From ac3098b1df784ccd39b7f6c4a802bdcd6c8db341 Mon Sep 17 00:00:00 2001 From: brian hung Date: Fri, 14 Feb 2020 19:29:08 -0800 Subject: [PATCH 1/2] Apply decorations in HighlightPlugin if change in named nodes. --- .../tiptap-extensions/src/plugins/Highlight.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/tiptap-extensions/src/plugins/Highlight.js b/packages/tiptap-extensions/src/plugins/Highlight.js index 6ed76173..387f53a6 100644 --- a/packages/tiptap-extensions/src/plugins/Highlight.js +++ b/packages/tiptap-extensions/src/plugins/Highlight.js @@ -64,15 +64,15 @@ export default function HighlightPlugin({ name }) { init: (_, { doc }) => getDecorations({ doc, name }), apply: (transaction, decorationSet, oldState, state) => { // TODO: find way to cache decorations - // see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493 - - const nodeName = state.selection.$head.parent.type.name - const previousNodeName = oldState.selection.$head.parent.type.name - - if (transaction.docChanged && [nodeName, previousNodeName].includes(name)) { + // https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493 + const oldNodeName = oldState.selection.$head.parent.type.name + const newNodeName = newState.selection.$head.parent.type.name + const oldNodes = findBlockNodes(oldState.doc).filter(item => item.node.type.name === name) + const newNodes = findBlockNodes(newState.doc).filter(item => item.node.type.name === name) + // Apply decorations if selection includes named node, or transaction changes named node. + if (transaction.docChanged && ([oldNodeName, newNodeName].includes(name) || newNodes.length != oldNodes.length)) { return getDecorations({ doc: transaction.doc, name }) } - return decorationSet.map(transaction.mapping, transaction.doc) }, }, From 39d4b50c194e94ef0da364f059167cf608874be5 Mon Sep 17 00:00:00 2001 From: brian hung Date: Fri, 14 Feb 2020 23:31:07 -0800 Subject: [PATCH 2/2] Fixing TravisCI linting errors. --- packages/tiptap-extensions/src/plugins/Highlight.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/tiptap-extensions/src/plugins/Highlight.js b/packages/tiptap-extensions/src/plugins/Highlight.js index 387f53a6..59449d6d 100644 --- a/packages/tiptap-extensions/src/plugins/Highlight.js +++ b/packages/tiptap-extensions/src/plugins/Highlight.js @@ -62,15 +62,18 @@ export default function HighlightPlugin({ name }) { name: new PluginKey('highlight'), state: { init: (_, { doc }) => getDecorations({ doc, name }), - apply: (transaction, decorationSet, oldState, state) => { + apply: (transaction, decorationSet, oldState, newState) => { // TODO: find way to cache decorations // https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493 const oldNodeName = oldState.selection.$head.parent.type.name const newNodeName = newState.selection.$head.parent.type.name - const oldNodes = findBlockNodes(oldState.doc).filter(item => item.node.type.name === name) - const newNodes = findBlockNodes(newState.doc).filter(item => item.node.type.name === name) + const oldNodes = findBlockNodes(oldState.doc) + .filter(item => item.node.type.name === name) + const newNodes = findBlockNodes(newState.doc) + .filter(item => item.node.type.name === name) // Apply decorations if selection includes named node, or transaction changes named node. - if (transaction.docChanged && ([oldNodeName, newNodeName].includes(name) || newNodes.length != oldNodes.length)) { + if (transaction.docChanged && ([oldNodeName, newNodeName].includes(name) + || newNodes.length !== oldNodes.length)) { return getDecorations({ doc: transaction.doc, name }) } return decorationSet.map(transaction.mapping, transaction.doc)