Apply decorations in HighlightPlugin if change in named nodes.

This commit is contained in:
brian hung 2020-02-14 19:29:08 -08:00
parent fb147d45f3
commit ac3098b1df

View File

@ -64,15 +64,15 @@ export default function HighlightPlugin({ name }) {
init: (_, { doc }) => getDecorations({ doc, name }), init: (_, { doc }) => getDecorations({ doc, name }),
apply: (transaction, decorationSet, oldState, state) => { apply: (transaction, decorationSet, oldState, state) => {
// TODO: find way to cache decorations // TODO: find way to cache decorations
// see: https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493 // https://discuss.prosemirror.net/t/how-to-update-multiple-inline-decorations-on-node-change/1493
const oldNodeName = oldState.selection.$head.parent.type.name
const nodeName = state.selection.$head.parent.type.name const newNodeName = newState.selection.$head.parent.type.name
const previousNodeName = oldState.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)
if (transaction.docChanged && [nodeName, previousNodeName].includes(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 getDecorations({ doc: transaction.doc, name })
} }
return decorationSet.map(transaction.mapping, transaction.doc) return decorationSet.map(transaction.mapping, transaction.doc)
}, },
}, },