feat: Disallow suggestions inside inline code marks and code blocks (#…

…154)

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

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,

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 }

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 }

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.

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'
+
+<Meta
+    title="Documentation/Reference/Utilities"
+    parameters={{
+        viewMode: 'docs',
+        options: {
+            isToolshown: false,
+        },
+    }}
+/>
+
+<MarkdownRenderer markdown={rawUtilities} />