@portabletext/editor 1.1.12 → 1.2.1

package/lib/index.mjs

@@ -5,7 +5,7 @@ import { useRef, useState, useMemo, useEffect, useCallback, createContext, useCo
 import { Editor, Element as Element$1, Range, Point, Text, Path, Transforms, Node, Operation, createEditor, deleteBackward, deleteForward, insertText } from "slate";
 import { useSlateStatic, ReactEditor, useSelected, withReact, Slate, useSlate, Editable } from "slate-react";
 import debug$m from "debug";
-import { isKeySegment, isPortableTextTextBlock, isPortableTextSpan, isPortableTextListBlock } from "@sanity/types";
+import { isKeySegment, isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isPortableTextListBlock } from "@sanity/types";
 import { styled } from "styled-components";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
@@ -830,6 +830,17 @@ function getFocusBlockObject(context) {
   const focusBlock = getFocusBlock(context);
   return focusBlock && !isPortableTextTextBlock(focusBlock.node) ? { node: focusBlock.node, path: focusBlock.path } : void 0;
 }
+function getFocusChild(context) {
+  const focusBlock = getFocusTextBlock(context);
+  if (!focusBlock)
+    return;
+  const key = context.selection && isKeySegment(context.selection.focus.path[2]) ? context.selection.focus.path[2]._key : void 0, node = key ? focusBlock.node.children.find((span) => span._key === key) : void 0;
+  return node && key ? { node, path: [...focusBlock.path, "children", { _key: key }] } : void 0;
+}
+function getFocusSpan(context) {
+  const focusChild = getFocusChild(context);
+  return focusChild && isPortableTextSpan$1(focusChild.node) ? { node: focusChild.node, path: focusChild.path } : void 0;
+}
 function getSelectionStartBlock(context) {
   const key = context.selection.backward ? isKeySegment(context.selection.focus.path[0]) ? context.selection.focus.path[0]._key : void 0 : isKeySegment(context.selection.anchor.path[0]) ? context.selection.anchor.path[0]._key : void 0, node = key ? context.value.find((block) => block._key === key) : void 0;
   return node && key ? { node, path: [{ _key: key }] } : void 0;
@@ -876,11 +887,7 @@ function getNextBlock(context) {
 function isEmptyTextBlock(block) {
   return block.children.length === 1 && block.children[0].text === "";
 }
-const softReturn = {
-  on: "insert soft break",
-  actions: [() => [{ type: "insert text", text: `
-` }]]
-}, breakingVoidBlock = {
+const breakingVoidBlock = {
   on: "insert break",
   guard: ({ context }) => !!getFocusBlockObject(context),
   actions: [() => [{ type: "insert text block", decorators: [] }]]
@@ -932,11 +939,48 @@ const softReturn = {
       }
     ]
   ]
-}, coreBehaviors = [
-  softReturn,
+}, coreBlockObjectBehaviors = [
   breakingVoidBlock,
   deletingEmptyTextBlockAfterBlockObject,
   deletingEmptyTextBlockBeforeBlockObject
+], clearListOnBackspace = {
+  on: "delete backward",
+  guard: ({ context }) => {
+    const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
+    return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0 && focusTextBlock.node.level === 1 ? { focusTextBlock } : !1;
+  },
+  actions: [
+    (_, { focusTextBlock }) => [
+      {
+        type: "unset block",
+        props: ["listItem", "level"],
+        paths: [focusTextBlock.path]
+      }
+    ]
+  ]
+}, unindentListOnBackspace = {
+  on: "delete backward",
+  guard: ({ context }) => {
+    const selectionCollapsed = selectionIsCollapsed(context), focusTextBlock = getFocusTextBlock(context), focusSpan = getFocusSpan(context);
+    return !selectionCollapsed || !focusTextBlock || !focusSpan ? !1 : focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection.focus.offset === 0 && focusTextBlock.node.level !== void 0 && focusTextBlock.node.level > 1 ? { focusTextBlock, level: focusTextBlock.node.level - 1 } : !1;
+  },
+  actions: [
+    (_, { focusTextBlock, level }) => [
+      {
+        type: "set block",
+        level,
+        paths: [focusTextBlock.path]
+      }
+    ]
+  ]
+}, coreListBehaviors = [clearListOnBackspace, unindentListOnBackspace], softReturn = {
+  on: "insert soft break",
+  actions: [() => [{ type: "insert text", text: `
+` }]]
+}, coreBehaviors = [
+  softReturn,
+  ...coreBlockObjectBehaviors,
+  ...coreListBehaviors
 ], debug$k = debugWithName("operationToPatches");
 function createOperationToPatches(types) {
   const textBlockName = types.block.name;
@@ -1507,14 +1551,14 @@ function createWithEditableAPI(editorActor, portableTextEditor, types) {
             })
           ];
           if (spans.length === 0 || spans.some(
-            ([span]) => !isPortableTextSpan(span) || !span.marks || span.marks?.length === 0
+            ([span]) => !isPortableTextSpan$1(span) || !span.marks || span.marks?.length === 0
           ))
             return !1;
           const selectionMarkDefs = spans.reduce((accMarkDefs, [, path]) => {
             const [block] = Editor.node(editor, path, { depth: 1 });
             return editor.isTextBlock(block) && block.markDefs ? [...accMarkDefs, ...block.markDefs] : accMarkDefs;
           }, []);
-          return spans.every(([span]) => isPortableTextSpan(span) ? span.marks?.map(
+          return spans.every(([span]) => isPortableTextSpan$1(span) ? span.marks?.map(
             (markKey) => selectionMarkDefs.find((def) => def?._key === markKey)?._type
           )?.includes(annotationType) : !1);
         } catch {
@@ -3321,6 +3365,9 @@ function createWithPortableTextLists(types) {
     }, editor;
   };
 }
+function isPortableTextSpan(node) {
+  return node._type === "span" && "text" in node && typeof node.text == "string" && (typeof node.marks > "u" || Array.isArray(node.marks) && node.marks.every((mark) => typeof mark == "string"));
+}
 function isPortableTextBlock(node) {
   return (
     // A block doesn't _have_ to be named 'block' - to differentiate between
@@ -3486,6 +3533,71 @@ function createWithPortableTextMarkModel(editorActor, types) {
         apply2(op);
         return;
       }
+      if (op.type === "set_selection" && Editor.marks(editor) && op.properties && op.newProperties && op.properties.anchor && op.properties.focus && op.newProperties.anchor && op.newProperties.focus) {
+        const previousSelectionIsCollapsed = Range.isCollapsed({
+          anchor: op.properties.anchor,
+          focus: op.properties.focus
+        }), newSelectionIsCollapsed = Range.isCollapsed({
+          anchor: op.newProperties.anchor,
+          focus: op.newProperties.focus
+        });
+        if (previousSelectionIsCollapsed && newSelectionIsCollapsed) {
+          const focusSpan = Array.from(
+            Editor.nodes(editor, {
+              mode: "lowest",
+              at: op.properties.focus,
+              match: (n) => editor.isTextSpan(n),
+              voids: !1
+            })
+          )[0]?.[0], newFocusSpan = Array.from(
+            Editor.nodes(editor, {
+              mode: "lowest",
+              at: op.newProperties.focus,
+              match: (n) => editor.isTextSpan(n),
+              voids: !1
+            })
+          )[0]?.[0], movedToNextSpan = focusSpan && newFocusSpan && op.newProperties.focus.path[0] === op.properties.focus.path[0] && op.newProperties.focus.path[1] === op.properties.focus.path[1] + 1 && focusSpan.text.length === op.properties.focus.offset && op.newProperties.focus.offset === 0, movedToPreviousSpan = focusSpan && newFocusSpan && op.newProperties.focus.path[0] === op.properties.focus.path[0] && op.newProperties.focus.path[1] === op.properties.focus.path[1] - 1 && op.properties.focus.offset === 0 && newFocusSpan.text.length === op.newProperties.focus.offset;
+          if (movedToNextSpan || movedToPreviousSpan)
+            return;
+        }
+      }
+      if (op.type === "insert_node") {
+        const { selection } = editor;
+        if (selection) {
+          const [_block, blockPath] = Editor.node(editor, selection, { depth: 1 }), previousSpan = getPreviousSpan({
+            editor,
+            blockPath,
+            spanPath: op.path
+          }), previousSpanAnnotations = previousSpan ? previousSpan.marks?.filter((mark) => !decorators.includes(mark)) : [], nextSpan = getNextSpan({
+            editor,
+            blockPath,
+            spanPath: [op.path[0], op.path[1] - 1]
+          }), nextSpanAnnotations = nextSpan ? nextSpan.marks?.filter((mark) => !decorators.includes(mark)) : [], annotationsEnding = previousSpanAnnotations?.filter(
+            (annotation) => !nextSpanAnnotations?.includes(annotation)
+          ) ?? [];
+          if (annotationsEnding.length > 0 && isPortableTextSpan(op.node) && op.node.marks?.some((mark) => annotationsEnding.includes(mark))) {
+            Transforms.insertNodes(editor, {
+              ...op.node,
+              marks: op.node.marks?.filter(
+                (mark) => !annotationsEnding.includes(mark)
+              ) ?? []
+            });
+            return;
+          }
+          const annotationsStarting = nextSpanAnnotations?.filter(
+            (annotation) => !previousSpanAnnotations?.includes(annotation)
+          ) ?? [];
+          if (annotationsStarting.length > 0 && isPortableTextSpan(op.node) && op.node.marks?.some((mark) => annotationsStarting.includes(mark))) {
+            Transforms.insertNodes(editor, {
+              ...op.node,
+              marks: op.node.marks?.filter(
+                (mark) => !annotationsStarting.includes(mark)
+              ) ?? []
+            });
+            return;
+          }
+        }
+      }
       if (op.type === "insert_text") {
         const { selection } = editor, collapsedSelection = selection ? Range.isCollapsed(selection) : !1;
         if (selection && collapsedSelection) {
@@ -3502,25 +3614,41 @@ function createWithPortableTextMarkModel(editorActor, types) {
             (mark) => decorators.includes(mark)
           ), spanHasAnnotations = marks.length > marksWithoutAnnotations.length, spanIsEmpty = span.text.length === 0, atTheBeginningOfSpan = selection.anchor.offset === 0, atTheEndOfSpan = selection.anchor.offset === span.text.length, previousSpan = getPreviousSpan({ editor, blockPath, spanPath }), nextSpan = getNextSpan({ editor, blockPath, spanPath }), nextSpanAnnotations = nextSpan?.marks?.filter((mark) => !decorators.includes(mark)) ?? [], spanAnnotations = marks.filter(
             (mark) => !decorators.includes(mark)
-          ), previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
+          ), previousSpanHasAnnotations = previousSpan ? previousSpan.marks?.some((mark) => !decorators.includes(mark)) : !1, previousSpanHasSameAnnotations = previousSpan ? previousSpan.marks?.filter((mark) => !decorators.includes(mark)).every((mark) => marks.includes(mark)) : !1, previousSpanHasSameAnnotation = previousSpan ? previousSpan.marks?.some(
             (mark) => !decorators.includes(mark) && marks.includes(mark)
           ) : !1, previousSpanHasSameMarks = previousSpan ? previousSpan.marks?.every((mark) => marks.includes(mark)) : !1, nextSpanSharesSomeAnnotations = spanAnnotations.some(
             (mark) => nextSpanAnnotations?.includes(mark)
           );
           if (spanHasAnnotations && !spanIsEmpty) {
             if (atTheBeginningOfSpan) {
-              previousSpanHasSameMarks ? Transforms.insertNodes(editor, {
-                _type: "span",
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                text: op.text,
-                marks: previousSpan?.marks ?? []
-              }) : previousSpanHasSameAnnotation ? apply2(op) : Transforms.insertNodes(editor, {
-                _type: "span",
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                text: op.text,
-                marks: []
-              });
-              return;
+              if (previousSpanHasSameMarks) {
+                Transforms.insertNodes(editor, {
+                  _type: "span",
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: previousSpan?.marks ?? []
+                });
+                return;
+              } else if (previousSpanHasSameAnnotations) {
+                Transforms.insertNodes(editor, {
+                  _type: "span",
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: previousSpan?.marks ?? []
+                });
+                return;
+              } else if (previousSpanHasSameAnnotation) {
+                apply2(op);
+                return;
+              } else if (!previousSpan) {
+                Transforms.insertNodes(editor, {
+                  _type: "span",
+                  _key: editorActor.getSnapshot().context.keyGenerator(),
+                  text: op.text,
+                  marks: []
+                });
+                return;
+              }
             }
             if (atTheEndOfSpan) {
               if (nextSpan && nextSpanSharesSomeAnnotations && nextSpanAnnotations.length < spanAnnotations.length || !nextSpanSharesSomeAnnotations) {
@@ -3548,7 +3676,7 @@ function createWithPortableTextMarkModel(editorActor, types) {
               _type: "span",
               _key: editorActor.getSnapshot().context.keyGenerator(),
               text: op.text,
-              marks: (previousSpan.marks ?? []).filter(
+              marks: previousSpanHasAnnotations ? [] : (previousSpan.marks ?? []).filter(
                 (mark) => decorators.includes(mark)
               )
             });
@@ -3776,7 +3904,7 @@ function createWithSchemaTypes({
   schemaTypes
 }) {
   return function(editor) {
-    editor.isTextBlock = (value) => isPortableTextTextBlock(value) && value._type === schemaTypes.block.name, editor.isTextSpan = (value) => isPortableTextSpan(value) && value._type === schemaTypes.span.name, editor.isListBlock = (value) => isPortableTextListBlock(value) && value._type === schemaTypes.block.name, editor.isVoid = (element) => schemaTypes.block.name !== element._type && (schemaTypes.blockObjects.map((obj) => obj.name).includes(element._type) || schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type)), editor.isInline = (element) => schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type) && "__inline" in element && element.__inline === !0;
+    editor.isTextBlock = (value) => isPortableTextTextBlock(value) && value._type === schemaTypes.block.name, editor.isTextSpan = (value) => isPortableTextSpan$1(value) && value._type === schemaTypes.span.name, editor.isListBlock = (value) => isPortableTextListBlock(value) && value._type === schemaTypes.block.name, editor.isVoid = (element) => schemaTypes.block.name !== element._type && (schemaTypes.blockObjects.map((obj) => obj.name).includes(element._type) || schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type)), editor.isInline = (element) => schemaTypes.inlineObjects.map((obj) => obj.name).includes(element._type) && "__inline" in element && element.__inline === !0;
     const { normalizeNode } = editor;
     return editor.normalizeNode = (entry) => {
       const [node, path] = entry;
@@ -3929,10 +4057,10 @@ function createWithHotkeys(portableTextEditor, hotkeysFromOptions) {
       if ((isTab || isShiftTab) && editor.selection) {
         const [focusChild] = Editor.node(editor, editor.selection.focus, {
           depth: 2
-        }), [focusBlock] = isPortableTextSpan(focusChild) ? Editor.node(editor, editor.selection.focus, { depth: 1 }) : [], hasAnnotationFocus = focusChild && isPortableTextTextBlock(focusBlock) && isPortableTextSpan(focusChild) && (focusChild.marks || []).filter(
+        }), [focusBlock] = isPortableTextSpan$1(focusChild) ? Editor.node(editor, editor.selection.focus, { depth: 1 }) : [], hasAnnotationFocus = focusChild && isPortableTextTextBlock(focusBlock) && isPortableTextSpan$1(focusChild) && (focusChild.marks || []).filter(
           (m) => (focusBlock.markDefs || []).map((def) => def._key).includes(m)
         ).length > 0, [start] = Range.edges(editor.selection), atStartOfNode = Editor.isStart(editor, start, start.path);
-        focusChild && isPortableTextSpan(focusChild) && (!hasAnnotationFocus || atStartOfNode) && editor.pteIncrementBlockLevels(isShiftTab) && event.preventDefault();
+        focusChild && isPortableTextSpan$1(focusChild) && (!hasAnnotationFocus || atStartOfNode) && editor.pteIncrementBlockLevels(isShiftTab) && event.preventDefault();
       }
       if (isEnter && !isShiftEnter && editor.selection) {
         const focusBlockPath = editor.selection.focus.path.slice(0, 1), focusBlock = Node.descendant(editor, focusBlockPath);