You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
136 lines
3.5 KiB
136 lines
3.5 KiB
/** |
|
* This file is a modified version of prosemirror-suggestions |
|
* https://github.com/quartzy/prosemirror-suggestions/blob/master/src/suggestions.js |
|
*/ |
|
|
|
import { Plugin, PluginKey } from 'prosemirror-state'; |
|
import { Decoration, DecorationSet } from 'prosemirror-view'; |
|
|
|
export const triggerCharacters = char => $position => { |
|
const regexp = new RegExp(`(?:^)?${char}[^\\s${char}]*`, 'g'); |
|
|
|
const textFrom = $position.before(); |
|
const textTo = $position.end(); |
|
|
|
const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0'); |
|
|
|
let match; |
|
|
|
// eslint-disable-next-line |
|
while ((match = regexp.exec(text))) { |
|
const prefix = match.input.slice(Math.max(0, match.index - 1), match.index); |
|
if (!/^[\s\0]?$/.test(prefix)) { |
|
// eslint-disable-next-line |
|
continue; |
|
} |
|
|
|
const from = match.index + $position.start(); |
|
let to = from + match[0].length; |
|
|
|
if (from < $position.pos && to >= $position.pos) { |
|
return { range: { from, to }, text: match[0] }; |
|
} |
|
} |
|
return null; |
|
}; |
|
|
|
export const suggestionsPlugin = ({ |
|
matcher, |
|
suggestionClass = 'prosemirror-mention-node', |
|
onEnter = () => false, |
|
onChange = () => false, |
|
onExit = () => false, |
|
onKeyDown = () => false, |
|
}) => { |
|
return new Plugin({ |
|
key: new PluginKey('mentions'), |
|
|
|
view() { |
|
return { |
|
update: (view, prevState) => { |
|
const prev = this.key.getState(prevState); |
|
const next = this.key.getState(view.state); |
|
|
|
const moved = |
|
prev.active && next.active && prev.range.from !== next.range.from; |
|
const started = !prev.active && next.active; |
|
const stopped = prev.active && !next.active; |
|
const changed = !started && !stopped && prev.text !== next.text; |
|
|
|
if (stopped || moved) |
|
onExit({ view, range: prev.range, text: prev.text }); |
|
if (changed && !moved) |
|
onChange({ view, range: next.range, text: next.text }); |
|
if (started || moved) |
|
onEnter({ view, range: next.range, text: next.text }); |
|
}, |
|
}; |
|
}, |
|
|
|
state: { |
|
init() { |
|
return { |
|
active: false, |
|
range: {}, |
|
text: null, |
|
}; |
|
}, |
|
|
|
apply(tr, prev) { |
|
const { selection } = tr; |
|
const next = { ...prev }; |
|
|
|
if (selection.from === selection.to) { |
|
if ( |
|
selection.from < prev.range.from || |
|
selection.from > prev.range.to |
|
) { |
|
next.active = false; |
|
} |
|
|
|
const $position = selection.$from; |
|
const match = matcher($position); |
|
|
|
if (match) { |
|
next.active = true; |
|
next.range = match.range; |
|
next.text = match.text; |
|
} else { |
|
next.active = false; |
|
} |
|
} else { |
|
next.active = false; |
|
} |
|
|
|
if (!next.active) { |
|
next.range = {}; |
|
next.text = null; |
|
} |
|
|
|
return next; |
|
}, |
|
}, |
|
|
|
props: { |
|
handleKeyDown(view, event) { |
|
const { active } = this.getState(view.state); |
|
|
|
if (!active) return false; |
|
|
|
return onKeyDown({ view, event }); |
|
}, |
|
decorations(editorState) { |
|
const { active, range } = this.getState(editorState); |
|
|
|
if (!active) return null; |
|
|
|
return DecorationSet.create(editorState.doc, [ |
|
Decoration.inline(range.from, range.to, { |
|
nodeName: 'span', |
|
class: suggestionClass, |
|
}), |
|
]); |
|
}, |
|
}, |
|
}); |
|
};
|
|
|