@portabletext/editor 2.14.3 → 2.15.0

package/src/editor/editor-dom.ts

@@ -2,6 +2,7 @@ import {Editor} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import type {BehaviorEvent} from '../behaviors/behavior.types.event'
 import {toSlateRange} from '../internal-utils/to-slate-range'
+import {getSelectionEndBlock, getSelectionStartBlock} from '../selectors'
 import type {PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {EditorSnapshot} from './editor-snapshot'
@@ -9,6 +10,10 @@ import type {EditorSnapshot} from './editor-snapshot'
 export type EditorDom = {
   getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>
   getChildNodes: (snapshot: EditorSnapshot) => Array<Node>
+  getEditorElement: () => Element | undefined
+  getSelectionRect: (snapshot: EditorSnapshot) => DOMRect | null
+  getStartBlockElement: (snapshot: EditorSnapshot) => Element | null
+  getEndBlockElement: (snapshot: EditorSnapshot) => Element | null
   /**
    * Let the Editor set the drag ghost. This is to be sure that it will get
    * properly removed again when the drag ends.
@@ -33,6 +38,11 @@ export function createEditorDom(
   return {
     getBlockNodes: (snapshot) => getBlockNodes(slateEditor, snapshot),
     getChildNodes: (snapshot) => getChildNodes(slateEditor, snapshot),
+    getEditorElement: () => getEditorElement(slateEditor),
+    getSelectionRect: (snapshot) => getSelectionRect(snapshot),
+    getStartBlockElement: (snapshot) =>
+      getStartBlockElement(slateEditor, snapshot),
+    getEndBlockElement: (snapshot) => getEndBlockElement(slateEditor, snapshot),
     setDragGhost: ({event, ghost}) => setDragGhost({sendBack, event, ghost}),
   }
 }
@@ -99,6 +109,95 @@ function getChildNodes(
   }
 }
 
+function getEditorElement(slateEditor: PortableTextSlateEditor) {
+  try {
+    return DOMEditor.toDOMNode(slateEditor, slateEditor)
+  } catch {
+    return undefined
+  }
+}
+
+function getSelectionRect(snapshot: EditorSnapshot) {
+  if (!snapshot.context.selection) {
+    return null
+  }
+
+  try {
+    const selection = window.getSelection()
+
+    if (!selection) {
+      return null
+    }
+
+    const range = selection.getRangeAt(0)
+    return range.getBoundingClientRect()
+  } catch {
+    return null
+  }
+}
+
+function getStartBlockElement(
+  slateEditor: PortableTextSlateEditor,
+  snapshot: EditorSnapshot,
+) {
+  const startBlock = getSelectionStartBlock(snapshot)
+
+  if (!startBlock) {
+    return null
+  }
+
+  const startBlockNode = getBlockNodes(slateEditor, {
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: {
+        anchor: {
+          path: startBlock.path,
+          offset: 0,
+        },
+        focus: {
+          path: startBlock.path,
+          offset: 0,
+        },
+      },
+    },
+  })?.at(0)
+
+  return startBlockNode && startBlockNode instanceof Element
+    ? startBlockNode
+    : null
+}
+
+function getEndBlockElement(
+  slateEditor: PortableTextSlateEditor,
+  snapshot: EditorSnapshot,
+) {
+  const endBlock = getSelectionEndBlock(snapshot)
+
+  if (!endBlock) {
+    return null
+  }
+
+  const endBlockNode = getBlockNodes(slateEditor, {
+    ...snapshot,
+    context: {
+      ...snapshot.context,
+      selection: {
+        anchor: {
+          path: endBlock.path,
+          offset: 0,
+        },
+        focus: {
+          path: endBlock.path,
+          offset: 0,
+        },
+      },
+    },
+  })?.at(0)
+
+  return endBlockNode && endBlockNode instanceof Element ? endBlockNode : null
+}
+
 function setDragGhost({
   sendBack,
   event,

package/src/editor/plugins/createWithUndoRedo.ts

@@ -142,52 +142,89 @@ export function createWithUndoRedo(
         return
       }
 
-      const {operations, history} = editor
-      const {undos} = history
-      const step = undos[undos.length - 1]
-      const lastOp =
-        step && step.operations && step.operations[step.operations.length - 1]
-      const overwrite = shouldOverwrite(op, lastOp)
-      const save = isSaving(editor)
-
+      const savingUndoSteps = isSaving(editor)
       const currentUndoStepId = getCurrentUndoStepId(editor)
 
-      let merge =
-        currentUndoStepId === previousUndoStepId || isNormalizingNode(editor)
-
-      if (save) {
-        if (!step) {
-          merge = false
-        } else if (operations.length === 0) {
-          merge =
-            currentUndoStepId === undefined && previousUndoStepId === undefined
-              ? shouldMerge(op, lastOp) || overwrite
-              : merge
-        }
+      if (!savingUndoSteps) {
+        // If we are bypassing saving undo steps, then we can just move along.
 
-        if (step && merge) {
-          step.operations.push(op)
-        } else {
-          const newStep = {
-            operations: [
-              ...(editor.selection === null
-                ? []
-                : [createSelectOperation(editor)]),
-              op,
-            ],
-            timestamp: new Date(),
-          }
-          undos.push(newStep)
-          debug('Created new undo step', step)
-        }
+        previousUndoStepId = currentUndoStepId
 
-        while (undos.length > UNDO_STEP_LIMIT) {
-          undos.shift()
-        }
+        apply(op)
 
-        if (shouldClear(op)) {
-          history.redos = []
-        }
+        return
+      }
+
+      if (op.type !== 'set_selection') {
+        // Clear the repo steps if any actual changes are made
+        editor.history.redos = []
+      }
+
+      const step = editor.history.undos.at(editor.history.undos.length - 1)
+
+      if (!step) {
+        // If the undo stack is empty, then we can just create a new step and
+        // move along.
+
+        editor.history.undos.push({
+          operations: [
+            ...(editor.selection === null
+              ? []
+              : [createSelectOperation(editor)]),
+            op,
+          ],
+          timestamp: new Date(),
+        })
+
+        apply(op)
+
+        previousUndoStepId = currentUndoStepId
+
+        return
+      }
+
+      const selectingWithoutUndoStepId =
+        op.type === 'set_selection' &&
+        currentUndoStepId === undefined &&
+        previousUndoStepId !== undefined
+      const selectingWithDifferentUndoStepId =
+        op.type === 'set_selection' &&
+        currentUndoStepId !== undefined &&
+        previousUndoStepId !== undefined &&
+        previousUndoStepId !== currentUndoStepId
+
+      const lastOp = step.operations.at(-1)
+      const mergeOpIntoPreviousStep =
+        editor.operations.length > 0
+          ? currentUndoStepId === previousUndoStepId ||
+            isNormalizingNode(editor)
+          : selectingWithoutUndoStepId ||
+              selectingWithDifferentUndoStepId ||
+              (currentUndoStepId === undefined &&
+                previousUndoStepId === undefined)
+            ? shouldMerge(op, lastOp) ||
+              (lastOp?.type === 'set_selection' && op.type === 'set_selection')
+            : currentUndoStepId === previousUndoStepId ||
+              isNormalizingNode(editor)
+
+      if (mergeOpIntoPreviousStep) {
+        step.operations.push(op)
+      } else {
+        editor.history.undos.push({
+          operations: [
+            ...(editor.selection === null
+              ? []
+              : [createSelectOperation(editor)]),
+            op,
+          ],
+          timestamp: new Date(),
+        })
+      }
+
+      // Make sure we don't exceed the maximum number of undo steps we want
+      // to store.
+      while (editor.history.undos.length > UNDO_STEP_LIMIT) {
+        editor.history.undos.shift()
       }
 
       previousUndoStepId = currentUndoStepId
@@ -195,7 +232,6 @@ export function createWithUndoRedo(
       apply(op)
     }
 
-    // Plugin return
     return editor
   }
 }
@@ -563,25 +599,6 @@ const shouldMerge = (op: Operation, prev: Operation | undefined): boolean => {
   return false
 }
 
-const shouldOverwrite = (
-  op: Operation,
-  prev: Operation | undefined,
-): boolean => {
-  if (prev && op.type === 'set_selection' && prev.type === 'set_selection') {
-    return true
-  }
-
-  return false
-}
-
-const shouldClear = (op: Operation): boolean => {
-  if (op.type === 'set_selection') {
-    return false
-  }
-
-  return true
-}
-
 export function withoutSaving(editor: Editor, fn: () => void): void {
   const prev = isSaving(editor)
   SAVING.set(editor, false)