@portabletext/editor 1.19.0 → 1.21.0

package/lib/index.js

@@ -1,7 +1,7 @@
 import { Schema } from "@sanity/schema";
 import { defineType, defineField, isKeySegment, isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isPortableTextListBlock } from "@sanity/types";
 import startCase from "lodash.startcase";
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useSelector, useActorRef } from "@xstate/react";
 import isEqual from "lodash/isEqual.js";
 import noop from "lodash/noop.js";
@@ -10,7 +10,6 @@ import { Editor, Element as Element$1, Range, Point, Text, Path, Transforms, Ope
 import { useSlateStatic, ReactEditor, useSelected, withReact, Slate, useSlate, Editable } from "slate-react";
 import debug$k from "debug";
 import { c } from "react-compiler-runtime";
-import { styled } from "styled-components";
 import uniq from "lodash/uniq.js";
 import { Subject } from "rxjs";
 import { useEffectEvent } from "use-effect-event";
@@ -22,7 +21,8 @@ import get from "lodash/get.js";
 import isUndefined from "lodash/isUndefined.js";
 import omitBy from "lodash/omitBy.js";
 import { createGuards } from "./_chunks-es/selector.is-selection-collapsed.js";
-import { blockOffsetToSpanSelectionPoint, coreBehaviors, isHotkey } from "./_chunks-es/behavior.core.js";
+import { blockOffsetToSpanSelectionPoint } from "./_chunks-es/util.is-empty-text-block.js";
+import { coreBehaviors, isCustomBehaviorEvent, isHotkey } from "./_chunks-es/behavior.core.js";
 import getRandomValues from "get-random-values-esm";
 import { htmlToBlocks, normalizeBlock } from "@sanity/block-tools";
 function createEditorSchema(portableTextType) {
@@ -377,171 +377,19 @@ function isEqualToEmptyEditor(children, schemaTypes) {
 const IS_PROCESSING_REMOTE_CHANGES = /* @__PURE__ */ new WeakMap(), IS_DRAGGING = /* @__PURE__ */ new WeakMap(), IS_DRAGGING_BLOCK_ELEMENT = /* @__PURE__ */ new WeakMap(), IS_DRAGGING_ELEMENT_TARGET = /* @__PURE__ */ new WeakMap(), IS_DRAGGING_BLOCK_TARGET_POSITION = /* @__PURE__ */ new WeakMap(), KEY_TO_SLATE_ELEMENT = /* @__PURE__ */ new WeakMap(), KEY_TO_VALUE_ELEMENT = /* @__PURE__ */ new WeakMap(), SLATE_TO_PORTABLE_TEXT_RANGE = /* @__PURE__ */ new WeakMap(), DefaultObject = (props) => {
   const $ = c(4);
   let t0;
-  $[0] !== props.value ? (t0 = JSON.stringify(props.value, null, 2), $[0] = props.value, $[1] = t0) : t0 = $[1];
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = {
+    userSelect: "none"
+  }, $[0] = t0) : t0 = $[0];
   let t1;
-  return $[2] !== t0 ? (t1 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("pre", { children: t0 }) }), $[2] = t0, $[3] = t1) : t1 = $[3], t1;
+  return $[1] !== props.value._key || $[2] !== props.value._type ? (t1 = /* @__PURE__ */ jsxs("div", { style: t0, children: [
+    "[",
+    props.value._type,
+    ": ",
+    props.value._key,
+    "]"
+  ] }), $[1] = props.value._key, $[2] = props.value._type, $[3] = t1) : t1 = $[3], t1;
 };
 DefaultObject.displayName = "DefaultObject";
-const DefaultBlockObject = styled.div`
-  user-select: none;
-  border: ${(props) => props.selected ? "1px solid blue" : "1px solid transparent"};
-`;
-styled.span`
-  background: #999;
-  border: ${(props) => props.selected ? "1px solid blue" : "1px solid transparent"};
-`;
-const DefaultListItem = styled.div`
-  &.pt-list-item {
-    width: fit-content;
-    position: relative;
-    display: block;
-
-    /* Important 'transform' in order to force refresh the ::before and ::after rules
-      in Webkit: https://stackoverflow.com/a/21947628/831480
-    */
-    transform: translateZ(0);
-    margin-left: ${(props) => getLeftPositionForListLevel(props.listLevel)};
-  }
-  &.pt-list-item > .pt-list-item-inner {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    &:before {
-      justify-content: flex-start;
-      vertical-align: top;
-    }
-  }
-  &.pt-list-item-bullet > .pt-list-item-inner:before {
-      content: '${(props) => getContentForListLevelAndStyle(props.listLevel, props.listStyle)}';
-      font-size: 0.4375rem; /* 7px */
-      line-height: 1.5rem; /* Same as body text */
-      /* Optical alignment */
-      position: relative;
-    }
-  }
-  &.pt-list-item-bullet > .pt-list-item-inner {
-    &:before {
-      min-width: 1.5rem; /* Make sure space between bullet and text never shrinks */
-    }
-  }
-  &.pt-list-item-number {
-    counter-increment: ${(props) => getCounterIncrementForListLevel(props.listLevel)};
-    counter-reset: ${(props) => getCounterResetForListLevel(props.listLevel)};
-  }
-  & + :not(.pt-list-item-number) {
-    counter-reset: listItemNumber;
-  }
-  &.pt-list-item-number > .pt-list-item-inner:before {
-    content: ${(props) => getCounterContentForListLevel(props.listLevel)};
-    min-width: 1.5rem; /* Make sure space between number and text never shrinks */
-    /* Optical alignment */
-    position: relative;
-    top: 1px;
-  }
-`, DefaultListItemInner = styled.div``;
-function getLeftPositionForListLevel(level) {
-  switch (Number(level)) {
-    case 1:
-      return "1.5em";
-    case 2:
-      return "3em";
-    case 3:
-      return "4.5em";
-    case 4:
-      return "6em";
-    case 5:
-      return "7.5em";
-    case 6:
-      return "9em";
-    case 7:
-      return "10.5em";
-    case 8:
-      return "12em";
-    case 9:
-      return "13.5em";
-    case 10:
-      return "15em";
-    default:
-      return "0em";
-  }
-}
-const bullets = ["\u25CF", "\u25CB", "\u25A0"];
-function getContentForListLevelAndStyle(level, style) {
-  const normalizedLevel = (level - 1) % 3;
-  return style === "bullet" ? bullets[normalizedLevel] : "*";
-}
-function getCounterIncrementForListLevel(level) {
-  switch (level) {
-    case 1:
-      return "listItemNumber";
-    case 2:
-      return "listItemAlpha";
-    case 3:
-      return "listItemRoman";
-    case 4:
-      return "listItemNumberNext";
-    case 5:
-      return "listItemLetterNext";
-    case 6:
-      return "listItemRomanNext";
-    case 7:
-      return "listItemNumberNextNext";
-    case 8:
-      return "listItemAlphaNextNext";
-    case 9:
-      return "listItemRomanNextNext";
-    default:
-      return "listItemNumberNextNextNext";
-  }
-}
-function getCounterResetForListLevel(level) {
-  switch (level) {
-    case 1:
-      return "listItemAlpha";
-    case 2:
-      return "listItemRoman";
-    case 3:
-      return "listItemNumberNext";
-    case 4:
-      return "listItemLetterNext";
-    case 5:
-      return "listItemRomanNext";
-    case 6:
-      return "listItemNumberNextNext";
-    case 7:
-      return "listItemAlphaNextNext";
-    case 8:
-      return "listItemRomanNextNext";
-    case 9:
-      return "listItemNumberNextNextNext";
-    default:
-      return "listItemNumberNextNextNext";
-  }
-}
-function getCounterContentForListLevel(level) {
-  switch (level) {
-    case 1:
-      return "counter(listItemNumber) '. '";
-    case 2:
-      return "counter(listItemAlpha, lower-alpha) '. '";
-    case 3:
-      return "counter(listItemRoman, lower-roman) '. '";
-    case 4:
-      return "counter(listItemNumberNext) '. '";
-    case 5:
-      return "counter(listItemLetterNext, lower-alpha) '. '";
-    case 6:
-      return "counter(listItemRomanNext, lower-roman) '. '";
-    case 7:
-      return "counter(listItemNumberNextNext) '. '";
-    case 8:
-      return "counter(listItemAlphaNextNext, lower-alpha) '. '";
-    case 9:
-      return "counter(listItemRomanNextNext, lower-roman) '. '";
-    default:
-      return "counter(listItemNumberNextNextNext) '. '";
-  }
-}
 const debug$j = debugWithName("components:DraggableBlock"), DraggableBlock = (t0) => {
   const $ = c(51), {
     children,
@@ -747,7 +595,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
     let level;
     if (isListItem && (typeof element.level == "number" && (level = element.level), className += ` pt-list-item pt-list-item-${element.listItem} pt-list-item-level-${level || 1}`), editor.isListBlock(value) && isListItem && element.listItem) {
       const listType = schemaTypes.lists.find((item_0) => item_0.value === element.listItem);
-      renderListItem && listType ? renderedBlock = renderListItem({
+      renderListItem && listType && (renderedBlock = renderListItem({
         block: value,
         children: renderedBlock,
         focused,
@@ -757,7 +605,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
         schemaType: listType,
         level: value.level || 1,
         editorElementRef: blockRef
-      }) : renderedBlock = /* @__PURE__ */ jsx(DefaultListItem, { listStyle: value.listItem || schemaTypes.lists[0].value, listLevel: value.level || 1, children: /* @__PURE__ */ jsx(DefaultListItemInner, { children: renderedBlock }) });
+      }));
     }
     const renderProps = Object.defineProperty({
       children: renderedBlock,
@@ -803,10 +651,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   }
   return /* @__PURE__ */ jsxs("div", { ...attributes, className, children: [
     children,
-    /* @__PURE__ */ jsxs(DraggableBlock, { element, readOnly, blockRef, children: [
-      renderedBlockFromProps && /* @__PURE__ */ jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps }),
-      !renderedBlockFromProps && /* @__PURE__ */ jsx(DefaultBlockObject, { selected, children: /* @__PURE__ */ jsx(DefaultObject, { value }) })
-    ] })
+    /* @__PURE__ */ jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsx(DefaultObject, { value }) }) })
   ] }, element._key);
 };
 Element.displayName = "Element";
@@ -2944,6 +2789,14 @@ function createWithEventListeners(editorActor, subscriptions) {
             });
             break;
           }
+          case "custom.*": {
+            editorActor.send({
+              type: "custom behavior event",
+              behaviorEvent: event.event,
+              editor
+            });
+            break;
+          }
           case "decorator.toggle": {
             editorActor.send({
               type: "behavior event",
@@ -5704,10 +5557,22 @@ const editorMachine = setup({
     input: {}
   },
   actions: {
+    "add behavior to context": assign({
+      behaviors: ({
+        context,
+        event
+      }) => (assertEvent(event, "add behavior"), /* @__PURE__ */ new Set([...context.behaviors, event.behavior]))
+    }),
+    "remove behavior from context": assign({
+      behaviors: ({
+        context,
+        event
+      }) => (assertEvent(event, "remove behavior"), context.behaviors.delete(event.behavior), /* @__PURE__ */ new Set([...context.behaviors]))
+    }),
     "assign behaviors": assign({
       behaviors: ({
         event
-      }) => (assertEvent(event, "update behaviors"), event.behaviors)
+      }) => (assertEvent(event, "update behaviors"), new Set(event.behaviors))
     }),
     "assign schema": assign({
       schema: ({
@@ -5750,11 +5615,11 @@ const editorMachine = setup({
       event,
       enqueue
     }) => {
-      assertEvent(event, ["behavior event"]);
-      const defaultAction = event.behaviorEvent.type === "copy" || event.behaviorEvent.type === "key.down" || event.behaviorEvent.type === "key.up" || event.behaviorEvent.type === "paste" ? void 0 : {
+      assertEvent(event, ["behavior event", "custom behavior event"]);
+      const defaultAction = event.type === "custom behavior event" || event.behaviorEvent.type === "copy" || event.behaviorEvent.type === "key.down" || event.behaviorEvent.type === "key.up" || event.behaviorEvent.type === "paste" ? void 0 : {
         ...event.behaviorEvent,
         editor: event.editor
-      }, eventBehaviors = context.behaviors.filter((behavior) => behavior.on === event.behaviorEvent.type);
+      }, eventBehaviors = [...context.behaviors.values()].filter((behavior) => behavior.on === event.behaviorEvent.type);
       if (eventBehaviors.length === 0) {
         if (!defaultAction)
           return;
@@ -5795,7 +5660,11 @@ const editorMachine = setup({
             Editor.withoutNormalizing(event.editor, () => {
               for (const actionIntend of actionIntends) {
                 if (actionIntend.type === "raise") {
-                  enqueue.raise({
+                  isCustomBehaviorEvent(actionIntend.event) ? enqueue.raise({
+                    type: "custom behavior event",
+                    behaviorEvent: actionIntend.event,
+                    editor: event.editor
+                  }) : enqueue.raise({
                     type: "behavior event",
                     behaviorEvent: actionIntend.event,
                     editor: event.editor
@@ -5837,7 +5706,7 @@ const editorMachine = setup({
   context: ({
     input
   }) => ({
-    behaviors: input.behaviors ?? coreBehaviors,
+    behaviors: new Set(input.behaviors ?? coreBehaviors),
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
@@ -5847,6 +5716,12 @@ const editorMachine = setup({
     value: input.value
   }),
   on: {
+    "add behavior": {
+      actions: "add behavior to context"
+    },
+    "remove behavior": {
+      actions: "remove behavior from context"
+    },
     unset: {
       actions: emit(({
         event
@@ -5967,6 +5842,9 @@ const editorMachine = setup({
             "behavior event": {
               actions: "handle behavior event"
             },
+            "custom behavior event": {
+              actions: "handle behavior event"
+            },
             "annotation.*": {
               actions: emit(({
                 event
@@ -5977,6 +5855,14 @@ const editorMachine = setup({
                 event
               }) => event)
             },
+            "custom.*": {
+              actions: emit(({
+                event
+              }) => ({
+                type: "custom.*",
+                event
+              }))
+            },
             "decorator.*": {
               actions: emit(({
                 event
@@ -6172,6 +6058,15 @@ function createEditorFromActor(editorActor) {
       editorActorSnapshot: editorActor.getSnapshot(),
       slateEditorInstance: slateEditor.instance
     }),
+    registerBehavior: (config) => (editorActor.send({
+      type: "add behavior",
+      behavior: config.behavior
+    }), () => {
+      editorActor.send({
+        type: "remove behavior",
+        behavior: config.behavior
+      });
+    }),
     send: (event) => {
       editorActor.send(event);
     },