fix: remove gap cursor (#17888)

PostHog · Oct 23, 2023 · 5100791 · 5100791
1 parent dcfd9c3
commit 5100791
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/frontend/src/scenes/notebooks/Notebook/Editor.tsx b/frontend/src/scenes/notebooks/Notebook/Editor.tsx
@@ -31,6 +31,7 @@ import { BacklinkCommandsExtension } from './BacklinkCommands'
 import { NotebookNodeEarlyAccessFeature } from '../Nodes/NotebookNodeEarlyAccessFeature'
 import { NotebookNodeSurvey } from '../Nodes/NotebookNodeSurvey'
 import { InlineMenu } from './InlineMenu'
+import NodeGapInsertionExtension from './Extensions/NodeGapInsertion'
 
 const CustomDocument = ExtensionDocument.extend({
     content: 'heading block*',
@@ -65,6 +66,7 @@ export function Editor({
             CustomDocument,
             StarterKit.configure({
                 document: false,
+                gapcursor: false,
             }),
             ExtensionPlaceholder.configure({
                 placeholder: placeholder,
@@ -98,6 +100,7 @@ export function Editor({
             NotebookNodeImage,
             SlashCommandsExtension,
             BacklinkCommandsExtension,
+            NodeGapInsertionExtension,
         ],
         content: initialContent,
         editorProps: {

diff --git a/frontend/src/scenes/notebooks/Notebook/Extensions/NodeGapInsertion.ts b/frontend/src/scenes/notebooks/Notebook/Extensions/NodeGapInsertion.ts
@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+
+const NodeGapInsertionExtension = Extension.create({
+    name: 'nodeGapInsertion',
+
+    addProseMirrorPlugins() {
+        const { editor } = this
+        return [
+            new Plugin({
+                key: new PluginKey('nodeGapInsertion'),
+                props: {
+                    handleClick(view, pos, event) {
+                        if (!view || !view.editable) {
+                            return false
+                        }
+                        const clickPos = view.posAtCoords({ left: event.clientX, top: event.clientY })
+                        const node = editor.state.doc.nodeAt(pos)
+
+                        if (!clickPos || clickPos.inside > -1 || !node) {
+                            return false
+                        }
+
+                        editor.commands.insertContentAt(pos, { type: 'paragraph', content: [] })
+                        return true
+                    },
+                },
+            }),
+        ]
+    },
+})
+
+export default NodeGapInsertionExtension