From 7b93e31e03203f2d542953d76227b213aaf6cb6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F?= Date: Fri, 25 Jan 2019 16:28:28 +0200 Subject: [PATCH 1/5] Update examples.js --- examples/Components/Routes/CodeHighlighting/examples.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/Components/Routes/CodeHighlighting/examples.js b/examples/Components/Routes/CodeHighlighting/examples.js index a91c4c52..6bf80d6d 100644 --- a/examples/Components/Routes/CodeHighlighting/examples.js +++ b/examples/Components/Routes/CodeHighlighting/examples.js @@ -30,6 +30,9 @@ body, .usertext { export const ExplicitImportExample = `import javascript from 'highlight.js/lib/languages/javascript' import { Editor } from 'tiptap' +import { + CodeBlockHighlight, +} from 'tiptap-extensions' export default { components: { @@ -38,7 +41,7 @@ export default { data() { return { extensions: [ - new CodeBlockHighlightNode({ + new CodeBlockHighlight({ languages: { javascript, css, From 4c278e08a02f7b971d8564c11c46331737b7ee4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=BB=D1=8C=D1=8F?= Date: Fri, 25 Jan 2019 16:34:27 +0200 Subject: [PATCH 2/5] Update examples.js --- examples/Components/Routes/CodeHighlighting/examples.js | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/Components/Routes/CodeHighlighting/examples.js b/examples/Components/Routes/CodeHighlighting/examples.js index 6bf80d6d..9169ed30 100644 --- a/examples/Components/Routes/CodeHighlighting/examples.js +++ b/examples/Components/Routes/CodeHighlighting/examples.js @@ -29,6 +29,7 @@ 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 fce6d9dac90323ac8787f096713c71fcfd3ab9b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Thu, 31 Jan 2019 11:46:32 +0100 Subject: [PATCH 3/5] improve performance for codeblocks with highlight.js --- .../tiptap-extensions/src/nodes/CodeBlockHighlight.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js b/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js index 76c690a0..99c1b417 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) { // 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 currentNodeName = transaction.curSelection.$head.parent.type.name + if (transaction.docChanged && currentNodeName === 'code_block') { + return getDecorations(transaction.doc) } - return set.map(tr.mapping, tr.doc) + + return decorationSet.map(transaction.mapping, transaction.doc) }, }, props: { From e27d65390b700ff3776e93cbe66fb888a3785f8d Mon Sep 17 00:00:00 2001 From: Chrissi2812 Date: Thu, 31 Jan 2019 16:08:14 +0100 Subject: [PATCH 4/5] inputrule for horizonal-line --- .../tiptap-commands/src/commands/nodeInputRule.js | 14 ++++++++++++++ packages/tiptap-commands/src/index.js | 2 ++ .../tiptap-extensions/src/nodes/HorizontalRule.js | 7 +++++++ 3 files changed, 23 insertions(+) create mode 100644 packages/tiptap-commands/src/commands/nodeInputRule.js diff --git a/packages/tiptap-commands/src/commands/nodeInputRule.js b/packages/tiptap-commands/src/commands/nodeInputRule.js new file mode 100644 index 00000000..05fde32c --- /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 33e90265..c200c2d0 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 removeMark from './commands/removeMark' import replaceText from './commands/replaceText' @@ -91,6 +92,7 @@ export { // custom insertText, markInputRule, + nodeInputRule, pasteRule, removeMark, replaceText, diff --git a/packages/tiptap-extensions/src/nodes/HorizontalRule.js b/packages/tiptap-extensions/src/nodes/HorizontalRule.js index 23fede78..f74d02a5 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), + ] + } } From 996b3c4dde4a406a737b74dab044511547a614fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Fri, 1 Feb 2019 17:54:35 +0100 Subject: [PATCH 5/5] fix a bug for removing code blocks --- packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js b/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js index 99c1b417..20b3eeca 100644 --- a/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js +++ b/packages/tiptap-extensions/src/nodes/CodeBlockHighlight.js @@ -122,12 +122,12 @@ export default class CodeBlockHighlight extends Node { init(_, { doc }) { return getDecorations(doc) }, - apply(transaction, decorationSet) { + 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 - const currentNodeName = transaction.curSelection.$head.parent.type.name - if (transaction.docChanged && currentNodeName === 'code_block') { + const previousNodeName = oldState.selection.$head.parent.type.name + if (transaction.docChanged && previousNodeName === 'code_block') { return getDecorations(transaction.doc) }