@portabletext/editor 1.19.0 → 1.20.0

package/lib/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var schema = require("@sanity/schema"), types = require("@sanity/types"), startCase = require("lodash.startcase"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$k = require("debug"), reactCompilerRuntime = require("react-compiler-runtime"), styledComponents = require("styled-components"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event"), xstate = require("xstate"), patches = require("@portabletext/patches"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isSelectionCollapsed = require("./_chunks-cjs/selector.is-selection-collapsed.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), getRandomValues = require("get-random-values-esm"), blockTools = require("@sanity/block-tools");
+var schema = require("@sanity/schema"), types = require("@sanity/types"), startCase = require("lodash.startcase"), jsxRuntime = require("react/jsx-runtime"), react = require("@xstate/react"), isEqual = require("lodash/isEqual.js"), noop = require("lodash/noop.js"), React = require("react"), slate = require("slate"), slateReact = require("slate-react"), debug$k = require("debug"), reactCompilerRuntime = require("react-compiler-runtime"), uniq = require("lodash/uniq.js"), rxjs = require("rxjs"), useEffectEvent = require("use-effect-event"), xstate = require("xstate"), patches = require("@portabletext/patches"), flatten = require("lodash/flatten.js"), isPlainObject = require("lodash/isPlainObject.js"), get = require("lodash/get.js"), isUndefined = require("lodash/isUndefined.js"), omitBy = require("lodash/omitBy.js"), selector_isSelectionCollapsed = require("./_chunks-cjs/selector.is-selection-collapsed.cjs"), behavior_core = require("./_chunks-cjs/behavior.core.cjs"), getRandomValues = require("get-random-values-esm"), blockTools = require("@sanity/block-tools");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -357,171 +357,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 $ = reactCompilerRuntime.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { children: t0 }) }), $[2] = t0, $[3] = t1) : t1 = $[3], t1;
+  return $[1] !== props.value._key || $[2] !== props.value._type ? (t1 = /* @__PURE__ */ jsxRuntime.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 = styledComponents.styled.div`
-  user-select: none;
-  border: ${(props) => props.selected ? "1px solid blue" : "1px solid transparent"};
-`;
-styledComponents.styled.span`
-  background: #999;
-  border: ${(props) => props.selected ? "1px solid blue" : "1px solid transparent"};
-`;
-const DefaultListItem = styledComponents.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 = styledComponents.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 $ = reactCompilerRuntime.c(51), {
     children,
@@ -727,7 +575,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,
@@ -737,7 +585,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
         schemaType: listType,
         level: value.level || 1,
         editorElementRef: blockRef
-      }) : renderedBlock = /* @__PURE__ */ jsxRuntime.jsx(DefaultListItem, { listStyle: value.listItem || schemaTypes.lists[0].value, listLevel: value.level || 1, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultListItemInner, { children: renderedBlock }) });
+      }));
     }
     const renderProps = Object.defineProperty({
       children: renderedBlock,
@@ -783,10 +631,7 @@ const EMPTY_ANNOTATIONS = [], inlineBlockStyle = {
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...attributes, className, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsxs(DraggableBlock, { element, readOnly, blockRef, children: [
-      renderedBlockFromProps && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps }),
-      !renderedBlockFromProps && /* @__PURE__ */ jsxRuntime.jsx(DefaultBlockObject, { selected, children: /* @__PURE__ */ jsxRuntime.jsx(DefaultObject, { value }) })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(DraggableBlock, { element, readOnly, blockRef, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: blockRef, contentEditable: !1, children: renderedBlockFromProps || /* @__PURE__ */ jsxRuntime.jsx(DefaultObject, { value }) }) })
   ] }, element._key);
 };
 Element.displayName = "Element";
@@ -5684,10 +5529,22 @@ const editorMachine = xstate.setup({
     input: {}
   },
   actions: {
+    "add behavior to context": xstate.assign({
+      behaviors: ({
+        context,
+        event
+      }) => (xstate.assertEvent(event, "add behavior"), /* @__PURE__ */ new Set([...context.behaviors, event.behavior]))
+    }),
+    "remove behavior from context": xstate.assign({
+      behaviors: ({
+        context,
+        event
+      }) => (xstate.assertEvent(event, "remove behavior"), context.behaviors.delete(event.behavior), /* @__PURE__ */ new Set([...context.behaviors]))
+    }),
     "assign behaviors": xstate.assign({
       behaviors: ({
         event
-      }) => (xstate.assertEvent(event, "update behaviors"), event.behaviors)
+      }) => (xstate.assertEvent(event, "update behaviors"), new Set(event.behaviors))
     }),
     "assign schema": xstate.assign({
       schema: ({
@@ -5734,7 +5591,7 @@ const editorMachine = xstate.setup({
       const defaultAction = 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;
@@ -5817,7 +5674,7 @@ const editorMachine = xstate.setup({
   context: ({
     input
   }) => ({
-    behaviors: input.behaviors ?? behavior_core.coreBehaviors,
+    behaviors: new Set(input.behaviors ?? behavior_core.coreBehaviors),
     keyGenerator: input.keyGenerator,
     pendingEvents: [],
     schema: input.schema,
@@ -5827,6 +5684,12 @@ const editorMachine = xstate.setup({
     value: input.value
   }),
   on: {
+    "add behavior": {
+      actions: "add behavior to context"
+    },
+    "remove behavior": {
+      actions: "remove behavior from context"
+    },
     unset: {
       actions: xstate.emit(({
         event
@@ -6152,6 +6015,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);
     },