whitespace
This commit is contained in:
Philipp Kühn
@@ -9,257 +9,257 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
|
|||||||
* @returns {function(*)}
|
* @returns {function(*)}
|
||||||
*/
|
*/
|
||||||
function triggerCharacter({
|
function triggerCharacter({
|
||||||
char = '@',
|
char = '@',
|
||||||
allowSpaces = false,
|
allowSpaces = false,
|
||||||
startOfLine = false,
|
startOfLine = false,
|
||||||
}) {
|
}) {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {ResolvedPos} $position
|
* @param {ResolvedPos} $position
|
||||||
*/
|
*/
|
||||||
return $position => {
|
return $position => {
|
||||||
// Matching expressions used for later
|
// Matching expressions used for later
|
||||||
const suffix = new RegExp(`\\s${char}$`)
|
const suffix = new RegExp(`\\s${char}$`)
|
||||||
const prefix = startOfLine ? '^' : ''
|
const prefix = startOfLine ? '^' : ''
|
||||||
const regexp = allowSpaces
|
const regexp = allowSpaces
|
||||||
? new RegExp(`${prefix}${char}.*?(?=\\s${char}|$)`, 'g')
|
? new RegExp(`${prefix}${char}.*?(?=\\s${char}|$)`, 'g')
|
||||||
: new RegExp(`${prefix}(?:^)?${char}[^\\s${char}]*`, 'g')
|
: new RegExp(`${prefix}(?:^)?${char}[^\\s${char}]*`, 'g')
|
||||||
|
|
||||||
// Lookup the boundaries of the current node
|
// Lookup the boundaries of the current node
|
||||||
const textFrom = $position.before()
|
const textFrom = $position.before()
|
||||||
const textTo = $position.end()
|
const textTo = $position.end()
|
||||||
const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
|
const text = $position.doc.textBetween(textFrom, textTo, '\0', '\0')
|
||||||
|
|
||||||
let match
|
let match
|
||||||
|
|
||||||
while ((match = regexp.exec(text))) {
|
while ((match = regexp.exec(text))) {
|
||||||
// Javascript doesn't have lookbehinds; this hacks a check that first character is " " or the line beginning
|
// Javascript doesn't have lookbehinds; this hacks a check that first character is " " or the line beginning
|
||||||
const prefix = match.input.slice(Math.max(0, match.index - 1), match.index)
|
const prefix = match.input.slice(Math.max(0, match.index - 1), match.index)
|
||||||
if (!/^[\s\0]?$/.test(prefix)) {
|
if (!/^[\s\0]?$/.test(prefix)) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
|
||||||
// The absolute position of the match in the document
|
// The absolute position of the match in the document
|
||||||
const from = match.index + $position.start()
|
const from = match.index + $position.start()
|
||||||
let to = from + match[0].length
|
let to = from + match[0].length
|
||||||
|
|
||||||
// Edge case handling; if spaces are allowed and we're directly in between two triggers
|
// Edge case handling; if spaces are allowed and we're directly in between two triggers
|
||||||
if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
|
if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
|
||||||
match[0] += ' '
|
match[0] += ' '
|
||||||
to++
|
to++
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the $position is located within the matched substring, return that range
|
// If the $position is located within the matched substring, return that range
|
||||||
if (from < $position.pos && to >= $position.pos) {
|
if (from < $position.pos && to >= $position.pos) {
|
||||||
return {
|
return {
|
||||||
range: {
|
range: {
|
||||||
from,
|
from,
|
||||||
to,
|
to,
|
||||||
},
|
},
|
||||||
text: match[0].slice(char.length),
|
text: match[0].slice(char.length),
|
||||||
fullText: match[0],
|
fullText: match[0],
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns {Plugin}
|
* @returns {Plugin}
|
||||||
*/
|
*/
|
||||||
export default function SuggestionsPlugin({
|
export default function SuggestionsPlugin({
|
||||||
matcher = {
|
matcher = {
|
||||||
char: '@',
|
char: '@',
|
||||||
allowSpaces: false,
|
allowSpaces: false,
|
||||||
startOfLine: false,
|
startOfLine: false,
|
||||||
},
|
},
|
||||||
suggestionClass = 'suggestion',
|
suggestionClass = 'suggestion',
|
||||||
command = () => false,
|
command = () => false,
|
||||||
items = [],
|
items = [],
|
||||||
onEnter = () => false,
|
onEnter = () => false,
|
||||||
onChange = () => false,
|
onChange = () => false,
|
||||||
onExit = () => false,
|
onExit = () => false,
|
||||||
onKeyDown = () => false,
|
onKeyDown = () => false,
|
||||||
onFilter = (searchItems, query) => {
|
onFilter = (searchItems, query) => {
|
||||||
if (!query) {
|
if (!query) {
|
||||||
return searchItems
|
return searchItems
|
||||||
}
|
}
|
||||||
|
|
||||||
return searchItems
|
return searchItems
|
||||||
.filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
|
.filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
|
||||||
},
|
},
|
||||||
}) {
|
}) {
|
||||||
return new Plugin({
|
return new Plugin({
|
||||||
key: new PluginKey('suggestions'),
|
key: new PluginKey('suggestions'),
|
||||||
|
|
||||||
view() {
|
view() {
|
||||||
return {
|
return {
|
||||||
update: (view, prevState) => {
|
update: (view, prevState) => {
|
||||||
const prev = this.key.getState(prevState)
|
const prev = this.key.getState(prevState)
|
||||||
const next = this.key.getState(view.state)
|
const next = this.key.getState(view.state)
|
||||||
|
|
||||||
// See how the state changed
|
// See how the state changed
|
||||||
const moved = prev.active && next.active && prev.range.from !== next.range.from
|
const moved = prev.active && next.active && prev.range.from !== next.range.from
|
||||||
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}"]`)
|
const decorationNode = document.querySelector(`[data-decoration-id="${next.decorationId}"]`)
|
||||||
const virtualNode = decorationNode ? {
|
const virtualNode = decorationNode ? {
|
||||||
getBoundingClientRect() {
|
getBoundingClientRect() {
|
||||||
return decorationNode.getBoundingClientRect()
|
return decorationNode.getBoundingClientRect()
|
||||||
},
|
},
|
||||||
clientWidth: decorationNode.clientWidth,
|
clientWidth: decorationNode.clientWidth,
|
||||||
clientHeight: decorationNode.clientHeight,
|
clientHeight: decorationNode.clientHeight,
|
||||||
} : null
|
} : null
|
||||||
|
|
||||||
// Trigger the hooks when necessary
|
// Trigger the hooks when necessary
|
||||||
if (stopped || moved) {
|
if (stopped || moved) {
|
||||||
onExit({
|
onExit({
|
||||||
view,
|
view,
|
||||||
range: prev.range,
|
range: prev.range,
|
||||||
query: prev.text,
|
query: prev.text,
|
||||||
text: prev.fullText,
|
text: prev.fullText,
|
||||||
decorationNode,
|
decorationNode,
|
||||||
virtualNode,
|
virtualNode,
|
||||||
items: onFilter(items, prev.text),
|
items: onFilter(items, prev.text),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (changed && !moved) {
|
if (changed && !moved) {
|
||||||
onChange({
|
onChange({
|
||||||
view,
|
view,
|
||||||
range: next.range,
|
range: next.range,
|
||||||
query: next.text,
|
query: next.text,
|
||||||
text: next.fullText,
|
text: next.fullText,
|
||||||
decorationNode,
|
decorationNode,
|
||||||
virtualNode,
|
virtualNode,
|
||||||
items: onFilter(items, next.text),
|
items: onFilter(items, next.text),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (started || moved) {
|
if (started || moved) {
|
||||||
onEnter({
|
onEnter({
|
||||||
view,
|
view,
|
||||||
range: next.range,
|
range: next.range,
|
||||||
query: next.text,
|
query: next.text,
|
||||||
text: next.fullText,
|
text: next.fullText,
|
||||||
decorationNode,
|
decorationNode,
|
||||||
virtualNode,
|
virtualNode,
|
||||||
items: onFilter(items, next.text),
|
items: onFilter(items, next.text),
|
||||||
command: ({ position, attrs }) => {
|
command: ({ position, attrs }) => {
|
||||||
command({
|
command({
|
||||||
position,
|
position,
|
||||||
attrs,
|
attrs,
|
||||||
schema: view.state.schema,
|
schema: view.state.schema,
|
||||||
})(view.state, view.dispatch, view)
|
})(view.state, view.dispatch, view)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
state: {
|
state: {
|
||||||
/**
|
/**
|
||||||
* Initialize the plugin's internal state.
|
* Initialize the plugin's internal state.
|
||||||
*
|
*
|
||||||
* @returns {Object}
|
* @returns {Object}
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
return {
|
return {
|
||||||
active: false,
|
active: false,
|
||||||
range: {},
|
range: {},
|
||||||
text: null,
|
text: null,
|
||||||
fullText: null,
|
fullText: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Apply changes to the plugin state from a view transaction.
|
* Apply changes to the plugin state from a view transaction.
|
||||||
*
|
*
|
||||||
* @param {Transaction} tr
|
* @param {Transaction} tr
|
||||||
* @param {Object} prev
|
* @param {Object} prev
|
||||||
*
|
*
|
||||||
* @returns {Object}
|
* @returns {Object}
|
||||||
*/
|
*/
|
||||||
apply(tr, prev) {
|
apply(tr, prev) {
|
||||||
const { selection } = tr
|
const { selection } = tr
|
||||||
const next = { ...prev }
|
const next = { ...prev }
|
||||||
|
|
||||||
// We can only be suggesting if there is no selection
|
// We can only be suggesting if there is no selection
|
||||||
if (selection.from === selection.to) {
|
if (selection.from === selection.to) {
|
||||||
// Reset active state if we just left the previous suggestion range
|
// Reset active state if we just left the previous suggestion range
|
||||||
if (selection.from < prev.range.from || selection.from > prev.range.to) {
|
if (selection.from < prev.range.from || selection.from > prev.range.to) {
|
||||||
next.active = false
|
next.active = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 = triggerCharacter(matcher)($position)
|
const match = triggerCharacter(matcher)($position)
|
||||||
const decorationId = (Math.random() + 1).toString(36).substr(2, 5)
|
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.decorationId = prev.decorationId ? prev.decorationId : decorationId
|
||||||
next.range = match.range
|
next.range = match.range
|
||||||
next.text = match.text
|
next.text = match.text
|
||||||
next.fullText = match.fullText
|
next.fullText = match.fullText
|
||||||
} else {
|
} else {
|
||||||
next.active = false
|
next.active = false
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
next.active = false
|
next.active = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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.decorationId = null
|
||||||
next.range = {}
|
next.range = {}
|
||||||
next.text = null
|
next.text = null
|
||||||
next.fullText = null
|
next.fullText = null
|
||||||
}
|
}
|
||||||
|
|
||||||
return next
|
return next
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
/**
|
/**
|
||||||
* Call the keydown hook if suggestion is active.
|
* Call the keydown hook if suggestion is active.
|
||||||
*
|
*
|
||||||
* @param view
|
* @param view
|
||||||
* @param event
|
* @param event
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
handleKeyDown(view, event) {
|
handleKeyDown(view, event) {
|
||||||
const { active, range } = this.getState(view.state)
|
const { active, range } = this.getState(view.state)
|
||||||
|
|
||||||
if (!active) return false
|
if (!active) return false
|
||||||
|
|
||||||
return onKeyDown({ view, event, range })
|
return onKeyDown({ view, event, range })
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Setup decorator on the currently active suggestion.
|
* Setup decorator on the currently active suggestion.
|
||||||
*
|
*
|
||||||
* @param {EditorState} editorState
|
* @param {EditorState} editorState
|
||||||
*
|
*
|
||||||
* @returns {?DecorationSet}
|
* @returns {?DecorationSet}
|
||||||
*/
|
*/
|
||||||
decorations(editorState) {
|
decorations(editorState) {
|
||||||
const { active, range, decorationId } = this.getState(editorState)
|
const { active, range, decorationId } = this.getState(editorState)
|
||||||
|
|
||||||
if (!active) return null
|
if (!active) return null
|
||||||
|
|
||||||
return DecorationSet.create(editorState.doc, [
|
return DecorationSet.create(editorState.doc, [
|
||||||
Decoration.inline(range.from, range.to, {
|
Decoration.inline(range.from, range.to, {
|
||||||
nodeName: 'span',
|
nodeName: 'span',
|
||||||
class: suggestionClass,
|
class: suggestionClass,
|
||||||
'data-decoration-id': decorationId,
|
'data-decoration-id': decorationId,
|
||||||
}),
|
}),
|
||||||
])
|
])
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user