From ac3098b1df784ccd39b7f6c4a802bdcd6c8db341 Mon Sep 17 00:00:00 2001 From: brian hung Date: Fri, 14 Feb 2020 19:29:08 -0800 Subject: [PATCH] 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 6ed761730..387f53a6e 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) }, },