fix added space on commit

This commit is contained in:
Eric Bailey
2023-10-10 12:44:22 -05:00
parent 50335206bf
commit f97f1302cf
2 changed files with 31 additions and 8 deletions
@@ -27,6 +27,8 @@ export const Tags = Node.create<TagOptions>({
allowSpaces: true, allowSpaces: true,
pluginKey: TagsPluginKey, pluginKey: TagsPluginKey,
command: ({editor, range, props}) => { command: ({editor, range, props}) => {
const {tag, punctuation} = props
// increase range.to by one when the next node is of type "text" // increase range.to by one when the next node is of type "text"
// and starts with a space character // and starts with a space character
const nodeAfter = editor.view.state.selection.$to.nodeAfter const nodeAfter = editor.view.state.selection.$to.nodeAfter
@@ -42,11 +44,11 @@ export const Tags = Node.create<TagOptions>({
.insertContentAt(range, [ .insertContentAt(range, [
{ {
type: this.name, type: this.name,
attrs: props, attrs: {id: tag},
}, },
{ {
type: 'text', type: 'text',
text: ' ', text: `${punctuation || ''} `,
}, },
]) ])
.run() .run()
@@ -92,8 +94,12 @@ export const Tags = Node.create<TagOptions>({
const from = startIndex + match.index + matchedString.indexOf(tag) const from = startIndex + match.index + matchedString.indexOf(tag)
// `to` should not include ending punctuation // `to` should not include ending punctuation
const to = from + tagWithoutPunctuation.length const to = from + tag.length
console.log({
from,
to,
})
if ( if (
from < cursorPosition && from < cursorPosition &&
to >= cursorPosition - punctuationIndexOffset to >= cursorPosition - punctuationIndexOffset
@@ -103,8 +109,12 @@ export const Tags = Node.create<TagOptions>({
from, from,
to, to,
}, },
// should not include ending punctuation /**
query: tagWithoutPunctuation.replace(/^#/, ''), * This is passed to the `items({ query })` method configured in `createTagsAutocomplete`.
*
* TODO This value should follow the rules of our hashtags spec.
*/
query: tag.replace(/^#/, ''),
// raw text string // raw text string
text: matchedString, text: matchedString,
} }
@@ -26,6 +26,9 @@ export function createTagsAutocomplete({
autocompleteModel: TagsAutocompleteModel autocompleteModel: TagsAutocompleteModel
}): Omit<SuggestionOptions, 'editor'> { }): Omit<SuggestionOptions, 'editor'> {
return { return {
/**
* This `query` param comes from the result of `findSuggestionMatch`
*/
async items({query}) { async items({query}) {
autocompleteModel.setActive(true) autocompleteModel.setActive(true)
await autocompleteModel.search(query) await autocompleteModel.search(query)
@@ -95,9 +98,19 @@ const Autocomplete = forwardRef<AutocompleteRef, ListProps>(
const [selectedIndex, setSelectedIndex] = useState(0) const [selectedIndex, setSelectedIndex] = useState(0)
const commit = React.useCallback( const commit = React.useCallback(
(tag: string) => { (query: string) => {
// @ts-ignore we're dealing with strings here not mentions const tag = query.replace(/(\p{P}+)$/gu, '')
command({id: tag}) const punctuation = query.match(/(\p{P}+)$/gu)?.[0] || ''
/*
* This values here are passed directly to the `command` method
* configured in the `Tags` plugin.
*
* The type error is ignored because we parse the tag and punctuation
* separately above. We could do this in `command` definition, but we
* only want to `commitRecentTag` with the sanitized tag.
*/
// @ts-ignore
command({tag, punctuation})
autocompleteModel.commitRecentTag(tag) autocompleteModel.commitRecentTag(tag)
}, },
[command, autocompleteModel], [command, autocompleteModel],