diff --git a/examples/Components/Routes/CodeHighlighting/examples.js b/examples/Components/Routes/CodeHighlighting/examples.js index a91c4c52d..9169ed304 100644 --- a/examples/Components/Routes/CodeHighlighting/examples.js +++ b/examples/Components/Routes/CodeHighlighting/examples.js @@ -29,7 +29,11 @@ body, .usertext { export const ExplicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript' +import css from 'highlight.js/lib/languages/css' import { Editor } from 'tiptap' +import { + CodeBlockHighlight, +} from 'tiptap-extensions' export default { components: { @@ -38,7 +42,7 @@ export default { data() { return { extensions: [ - new CodeBlockHighlightNode({ + new CodeBlockHighlight({ languages: { javascript, css, diff --git a/packages/tiptap-commands/src/commands/nodeInputRule.js b/packages/tiptap-commands/src/commands/nodeInputRule.js new file mode 100644 index 000000000..05fde32cc --- /dev/null +++ b/packages/tiptap-commands/src/commands/nodeInputRule.js @@ -0,0 +1,14 @@ +import { InputRule } from 'prosemirror-inputrules' + +export default function (regexp, type, getAttrs) { + return new InputRule(regexp, (state, match, start, end) => { + const attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs + const { tr } = state + + if (match[0]) { + tr.replaceWith(start - 1, end, type.create(attrs)) + } + + return tr + }) +} diff --git a/packages/tiptap-commands/src/index.js b/packages/tiptap-commands/src/index.js index 976201697..ded01c96c 100644 --- a/packages/tiptap-commands/src/index.js +++ b/packages/tiptap-commands/src/index.js @@ -40,6 +40,7 @@ import { import insertText from './commands/insertText' import markInputRule from './commands/markInputRule' +import nodeInputRule from './commands/nodeInputRule' import pasteRule from './commands/pasteRule' import markPasteRule from './commands/markPasteRule' import removeMark from './commands/removeMark' @@ -93,6 +94,7 @@ export { insertText, markInputRule, markPasteRule, + nodeInputRule, pasteRule, removeMark, replaceText, diff --git a/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js b/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js index 76c690a07..20b3eeca1 100644 --- a/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js +++ b/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js @@ -122,13 +122,16 @@ export default class CodeBlockHighlight extends Node { init(_, { doc }) { return getDecorations(doc) }, - apply(tr, set) { + apply(transaction, decorationSet, oldState) { // TODO: find way to cache decorations // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493 - if (tr.docChanged) { - return getDecorations(tr.doc) + + const previousNodeName = oldState.selection.$head.parent.type.name + if (transaction.docChanged && previousNodeName === 'code_block') { + return getDecorations(transaction.doc) } - return set.map(tr.mapping, tr.doc) + + return decorationSet.map(transaction.mapping, transaction.doc) }, }, props: { diff --git a/packages/tiptap-extensions/src/nodes/HorizontalRule.js b/packages/tiptap-extensions/src/nodes/HorizontalRule.js index 23fede782..f74d02a56 100644 --- a/packages/tiptap-extensions/src/nodes/HorizontalRule.js +++ b/packages/tiptap-extensions/src/nodes/HorizontalRule.js @@ -1,4 +1,5 @@ import { Node } from 'tiptap' +import { nodeInputRule } from 'tiptap-commands' export default class HorizontalRule extends Node { get name() { @@ -16,4 +17,10 @@ export default class HorizontalRule extends Node { commands({ type }) { return () => (state, dispatch) => dispatch(state.tr.replaceSelectionWith(type.create())) } + + inputRules({ type }) { + return [ + nodeInputRule(/^(?:---|___\s|\*\*\*\s)$/, type), + ] + } }