diff --git a/src/factories/create-suggestion-extension.ts b/src/factories/create-suggestion-extension.ts index cfdf4765..a41f8b4a 100644 --- a/src/factories/create-suggestion-extension.ts +++ b/src/factories/create-suggestion-extension.ts @@ -4,6 +4,8 @@ import { camelCase, kebabCase } from 'lodash-es' import { PluginKey } from 'prosemirror-state' import { SUGGESTION_EXTENSION_PRIORITY } from '../constants/extension-priorities' +import { canInsertNodeAt } from '../utilities/can-insert-node-at' +import { canInsertSuggestion } from '../utilities/can-insert-suggestion' import type { SuggestionKeyDownProps as CoreSuggestionKeyDownProps, @@ -268,10 +270,11 @@ function createSuggestionExtension< ) || [] ) }, - allow({ editor, range }) { - return editor.can().insertContentAt(range, { - type: nodeType, - }) + allow({ editor, range, state }) { + return ( + canInsertNodeAt({ editor, nodeType, range }) && + canInsertSuggestion({ editor, state }) + ) }, command({ editor, range, props }) { const nodeAfter = editor.view.state.selection.$to.nodeAfter diff --git a/src/index.ts b/src/index.ts index 83c428db..a26107f0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -31,6 +31,8 @@ export { createSuggestionExtension } from './factories/create-suggestion-extensi export { isMultilineDocument, isPlainTextDocument } from './helpers/schema' export { createHTMLSerializer } from './serializers/html/html' export { createMarkdownSerializer } from './serializers/markdown/markdown' +export { canInsertNodeAt } from './utilities/can-insert-node-at' +export { canInsertSuggestion } from './utilities/can-insert-suggestion' export type { AnyConfig, Editor as CoreEditor, EditorEvents, MarkRange, Range } from '@tiptap/core' export { combineTransactionSteps, diff --git a/src/utilities/can-insert-node-at.ts b/src/utilities/can-insert-node-at.ts new file mode 100644 index 00000000..851df575 --- /dev/null +++ b/src/utilities/can-insert-node-at.ts @@ -0,0 +1,22 @@ +import { Editor, Range } from '@tiptap/core' + +/** + * Check if a node of a specific type can be inserted at a specific position in the editor. + * + * @return True if the node can be inserted, false otherwise. + */ +function canInsertNodeAt({ + editor, + nodeType, + range, +}: { + editor: Editor + nodeType: string + range: Range +}) { + return editor.can().insertContentAt(range, { + type: nodeType, + }) +} + +export { canInsertNodeAt } diff --git a/src/utilities/can-insert-suggestion.ts b/src/utilities/can-insert-suggestion.ts new file mode 100644 index 00000000..e9a39288 --- /dev/null +++ b/src/utilities/can-insert-suggestion.ts @@ -0,0 +1,29 @@ +import { Editor } from '@tiptap/core' +import { EditorState } from '@tiptap/pm/state' + +/** + * Check if a suggestion can be inserted within the current editor selection. + * + * @return True if the suggestion can be inserted, false otherwise. + */ +function canInsertSuggestion({ editor, state }: { editor: Editor; state: EditorState }) { + const { selection } = state + + const isInsideCodeMark = editor.isActive('code') + + const isInsideCodeBlockNode = selection.$from.parent.type.name === 'codeBlock' + + const hasCodeMarkBefore = state.doc + .nodeAt(selection.$from.parentOffset - 1) + ?.marks.some((mark) => mark.type.name === 'code') + + const isComposingInlineCode = selection.$from.nodeBefore?.text + ?.split(' ') + .some((word) => word.startsWith('`')) + + return ( + !isInsideCodeMark && !isInsideCodeBlockNode && !hasCodeMarkBefore && !isComposingInlineCode + ) +} + +export { canInsertSuggestion } diff --git a/stories/documentation/reference/utilities.md b/stories/documentation/reference/utilities.md new file mode 100644 index 00000000..b76ae986 --- /dev/null +++ b/stories/documentation/reference/utilities.md @@ -0,0 +1,11 @@ +# Utilities + +Utilities are public helper functions that can be used by custom extensions implemented in the consuming applications. The intent is to provide small reusable functions with the DRY principle in mind. + +## `canInsertNodeAt` + +This function is a shorthand to `editor.can().insertContentAt()`, and checks if a node of a specific type can be inserted at a specific position in the editor. + +## `canInsertSuggestion` + +This function checks if a suggestion – like a mention – can be inserted within the current editor selection, and the main purpose is to check for all possible edge cases and disallow suggestions from being inserted within inline code marks or code blocks. diff --git a/stories/documentation/reference/utilities.story.mdx b/stories/documentation/reference/utilities.story.mdx new file mode 100644 index 00000000..6007b086 --- /dev/null +++ b/stories/documentation/reference/utilities.story.mdx @@ -0,0 +1,17 @@ +import { Meta } from '@storybook/addon-docs' + +import { MarkdownRenderer } from '../../components/markdown-renderer.tsx' + +import rawUtilities from './utilities.md?raw' + + + +