diff --git a/packages/tiptap-extensions/src/plugins/Highlight.js b/packages/tiptap-extensions/src/plugins/Highlight.js index 6ed761730..59449d6d4 100644 --- a/packages/tiptap-extensions/src/plugins/Highlight.js +++ b/packages/tiptap-extensions/src/plugins/Highlight.js @@ -62,17 +62,20 @@ 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 - // 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) }, },