add test

packages/editor/__snapshots__/editors/documentEditor/__tests__/documentEditor.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`documentEditor renders document editor correctly 1`] = `
 <div>
   <div>
     <div
-      class="mc-c-kFryAW mc-c-kFryAW-gHONcO-enableSelection-false"
+      class="mc-c-liApjz mc-c-liApjz-gHONcO-enableSelection-false"
     >
       <div
         class="ProseMirror"

packages/editor/src/extensions/extensions/eventHandler/gapClickHandler.ts

@@ -15,9 +15,8 @@ export const gapClickHandler = (editor: Editor, view: EditorView, position: numb
     return
   }
 
-  if (position - 1 < 0) return
-
   // when clicked at the end of document, the latest two position will be null
+  if (position - 2 < 0) return
   const node = view.state.doc.nodeAt(position - 2)
   const nextNode = view.state.doc.nodeAt(position)
 

packages/editor/src/extensions/extensions/selection/MultipleNodeSelection.ts

@@ -41,13 +41,13 @@ export class MultipleNodeSelection extends Selection {
       if (node) {
         ranges.push(new SelectionRange(doc.resolve(from), doc.resolve(from + node.nodeSize)))
       }
+    } else {
+      doc.nodesBetween(from, to + 1, (node, pos) => {
+        ranges.push(new SelectionRange(doc.resolve(pos), doc.resolve(pos + node.nodeSize)))
+        return false
+      })
     }
 
-    doc.nodesBetween(from, to + 1, (node, pos) => {
-      ranges.push(new SelectionRange(doc.resolve(pos), doc.resolve(pos + node.nodeSize)))
-      return false
-    })
-
     super(ranges[0]?.$from ?? $anchorPos, ranges[0]?.$to ?? $headPos, ranges)
 
     this.$anchorPos = $anchorPos

packages/editor/src/extensions/extensions/selection/__tests__/MultipleNodeSelection.test.ts

@@ -6,6 +6,27 @@ import { MultipleNodeSelection } from '../MultipleNodeSelection'
 import { MultipleNodeBookmark } from '../MultipleNodeBookmark'
 
 describe('MultipleNodeSelection', () => {
+  it('creates MultipleNodeSelection includes one node correctly', () => {
+    const anchor = 1
+    const head = 1
+    const text1 = '1'
+    const { result } = renderHook(() =>
+      useTestEditor({
+        content: `
+          <p>${text1}</p>
+        `
+      })
+    )
+
+    const editor = result.current!
+
+    const selection = MultipleNodeSelection.create(editor.state.doc, anchor, head)
+
+    expect(selection.$anchorPos.pos).toEqual(anchor)
+    expect(selection.$headPos.pos).toEqual(head)
+    expect(selection.ranges.length).toBe(1)
+    expect(selection.$anchorPos.node().textContent).toEqual(text1)
+  })
   it('creates MultipleNodeSelection includes multiple nodes correctly', () => {
     const anchor = 1
     const head = 4
@@ -174,7 +195,7 @@ describe('MultipleNodeSelection', () => {
     const editor = result.current!
 
     const selection = MultipleNodeSelection.create(editor.state.doc, anchor, head)
-    const node = selection.ranges[0].$from.node()
+    const node = editor.state.doc.nodeAt(selection.ranges[0].$from.pos)!
     editor.commands.command(({ tr }) => {
       selection.replaceWith(tr, node)
       return true

packages/editor/src/extensions/extensions/selection/__tests__/decorations.test.ts

@@ -0,0 +1,165 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { mockEditor, useTestEditor } from '../../../../test'
+import { nodeSelectionDecoration, textSelectionDecoration } from '../decorations'
+import { Selection } from '../selection'
+
+describe('Selection Decorations', () => {
+  describe('TextSelection', () => {
+    it('creates null if editor is not editable correctly', () => {
+      const editor = mockEditor({
+        isEditable: false
+      })
+
+      const decorationSet = textSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet).toBeNull()
+    })
+
+    it('creates null if selection is empty correctly', () => {
+      const editor = mockEditor({
+        isEditable: true,
+        state: {
+          selection: {
+            empty: true
+          }
+        }
+      })
+
+      const decorationSet = textSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet).toBeNull()
+    })
+
+    it('creates null if selection is not a TextSelection correctly', () => {
+      const editor = mockEditor({
+        isEditable: true,
+        state: {
+          selection: {
+            from: 1,
+            to: 2
+          }
+        }
+      })
+
+      const decorationSet = textSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet).toBeNull()
+    })
+
+    it('creates text selection decoration correctly', () => {
+      const from = 1
+      const to = 2
+
+      // eslint-disable-next-line max-nested-callbacks
+      const { result } = renderHook(() =>
+        useTestEditor({
+          content: '<p>12</p>'
+        })
+      )
+      const editor = result.current!
+
+      editor.commands.setTextSelection({ from, to })
+
+      const decorationSet = textSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet?.find(from, to)).toHaveLength(1)
+    })
+  })
+
+  describe('MultipleNodeSelection', () => {
+    it('creates null if editor is not editable correctly', () => {
+      const editor = mockEditor({
+        isEditable: false
+      })
+
+      const decorationSet = nodeSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet).toBeNull()
+    })
+
+    it('creates null if selection is not a MultipleNodeSelection correctly', () => {
+      const editor = mockEditor({
+        isEditable: true,
+        state: {
+          selection: {
+            from: 1,
+            to: 2
+          }
+        }
+      })
+
+      const decorationSet = nodeSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet).toBeNull()
+    })
+
+    it('creates node selection decoration correctly', () => {
+      const from = 1
+      const to = 2
+
+      // eslint-disable-next-line max-nested-callbacks
+      const { result } = renderHook(() =>
+        useTestEditor({
+          content: '<p>12</p>',
+          extensions: [Selection]
+        })
+      )
+      const editor = result.current!
+
+      editor.commands.setMultipleNodeSelection(from, to)
+
+      const decorationSet = nodeSelectionDecoration(
+        editor,
+        {
+          textSelection: {},
+          nodeSelection: {}
+        },
+        editor.state
+      )
+
+      expect(decorationSet?.find(from, to)).toHaveLength(1)
+    })
+  })
+})