mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-29 08:19:34 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

save decorationNode in state

Browse Source
This commit is contained in:
Philipp Kühn 2018-09-05 21:45:29 +02:00
parent 39072b217d
commit 82c956dfe9
1 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/tiptap-extensions/src/plugins/suggestions.js
View File

@ -80,11 +80,35 @@ export function suggestionsPlugin({
const started = !prev.active && next.active; const started = !prev.active && next.active;
const stopped = prev.active && !next.active; const stopped = prev.active && !next.active;
const changed = !started && !stopped && prev.text !== next.text; const changed = !started && !stopped && prev.text !== next.text;
const decorationNode = document.querySelector(`[data-decoration-id="${next.decorationId}"]`)
// Trigger the hooks when necessary // Trigger the hooks when necessary
if (stopped || moved) onExit({ view, range: prev.range, text: prev.text }); if (stopped || moved) {
if (changed && !moved) onChange({ view, range: next.range, text: next.text }); onExit({
if (started || moved) onEnter({ view, range: next.range, text: next.text }); view,
range: prev.range,
text: prev.text,
decorationNode,
})
}
if (changed && !moved) {
onChange({
view,
range: next.range,
text: next.text,
decorationNode,
})
}
if (started || moved) {
onEnter({
view,
range: next.range,
text: next.text,
decorationNode,
})
}
}, },
}; };
}, },
@ -125,10 +149,12 @@ export function suggestionsPlugin({
// Try to match against where our cursor currently is // Try to match against where our cursor currently is
const $position = selection.$from; const $position = selection.$from;
const match = matcher($position); const match = matcher($position);
const decorationId = (Math.random() + 1).toString(36).substr(2, 5);
// If we found a match, update the current state to show it // If we found a match, update the current state to show it
if (match) { if (match) {
next.active = true; next.active = true;
next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
next.range = match.range; next.range = match.range;
next.text = match.text; next.text = match.text;
} else { } else {
@ -140,6 +166,7 @@ export function suggestionsPlugin({
// Make sure to empty the range if suggestion is inactive // Make sure to empty the range if suggestion is inactive
if (!next.active) { if (!next.active) {
next.decorationId = null;
next.range = {}; next.range = {};
next.text = null; next.text = null;
} }
@ -172,7 +199,7 @@ export function suggestionsPlugin({
* @returns {?DecorationSet} * @returns {?DecorationSet}
*/ */
decorations(editorState) { decorations(editorState) {
const { active, range } = this.getState(editorState); const { active, range, decorationId } = this.getState(editorState);
if (!active) return null; if (!active) return null;
@ -180,6 +207,7 @@ export function suggestionsPlugin({
Decoration.inline(range.from, range.to, { Decoration.inline(range.from, range.to, {
nodeName: 'span', nodeName: 'span',
class: suggestionClass, class: suggestionClass,
'data-decoration-id': decorationId,
style: debug ? 'background: rgba(0, 0, 255, 0.05); color: blue; border: 2px solid blue;' : null, style: debug ? 'background: rgba(0, 0, 255, 0.05); color: blue; border: 2px solid blue;' : null,
}), }),
]); ]);