From be29b108e08ca0455b76f6a5610e53e00623236d Mon Sep 17 00:00:00 2001 From: Ricardo Amaral Date: Wed, 1 Mar 2023 17:50:01 +0000 Subject: [PATCH] feat: Disallow suggestions inside inline code marks and code blocks --- src/factories/create-suggestion-extension.ts | 11 ++++--- src/index.ts | 2 ++ src/utilities/can-insert-node-at.ts | 22 +++++++++++++ src/utilities/can-insert-suggestion.ts | 33 +++++++++++++++++++ stories/documentation/reference/utilities.md | 11 +++++++ .../reference/utilities.story.mdx | 17 ++++++++++ 6 files changed, 92 insertions(+), 4 deletions(-) create mode 100644 src/utilities/can-insert-node-at.ts create mode 100644 src/utilities/can-insert-suggestion.ts create mode 100644 stories/documentation/reference/utilities.md create mode 100644 stories/documentation/reference/utilities.story.mdx 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..88dc3644 --- /dev/null +++ b/src/utilities/can-insert-suggestion.ts @@ -0,0 +1,33 @@ +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: { selection }, +}: { + editor: Editor + state: EditorState +}) { + const isInsideCodeMark = editor.isActive('code') + + const isInsideCodeBlockNode = selection.$from.parent.type.name === 'codeBlock' + + const hasCodeMarkBefore = selection.$from.nodeBefore?.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' + + + +