@portabletext/editor 1.16.3 → 1.17.0

package/lib/behaviors/index.js

@@ -1,8 +1,9 @@
-import { getFirstBlock, getSelectedBlocks, getLastBlock, isSelectionCollapsed, getFocusSpan, getFocusTextBlock, getFocusBlock } from "../_chunks-es/selector.is-selection-collapsed.js";
+import { getFirstBlock, getSelectedBlocks, getLastBlock, getFocusTextBlock, isSelectionCollapsed, getFocusSpan, getFocusBlock } from "../_chunks-es/selector.is-selection-collapsed.js";
 import { defineBehavior, isHotkey, spanSelectionPointToBlockOffset, getTextBlockText } from "../_chunks-es/behavior.core.js";
 import { coreBehavior, coreBehaviors } from "../_chunks-es/behavior.core.js";
-import { isPortableTextTextBlock } from "@sanity/types";
+import { createActor, setup, assign, assertEvent } from "xstate";
 import { getBlockTextBefore } from "../_chunks-es/selector.get-text-before.js";
+import { isPortableTextTextBlock } from "@sanity/types";
 function createCodeEditorBehaviors(config) {
   return [defineBehavior({
     on: "key.down",
@@ -10,12 +11,11 @@ function createCodeEditorBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const isMoveUpShortcut = isHotkey(config.moveBlockUpShortcut, event.keyboardEvent), firstBlock = getFirstBlock({
         context
       }), selectedBlocks = getSelectedBlocks({
         context
-      }), blocksAbove = (firstBlock == null ? void 0 : firstBlock.node._key) !== ((_a = selectedBlocks[0]) == null ? void 0 : _a.node._key);
+      }), blocksAbove = firstBlock?.node._key !== selectedBlocks[0]?.node._key;
       return !isMoveUpShortcut || !blocksAbove ? !1 : {
         paths: selectedBlocks.map((block) => block.path)
       };
@@ -32,12 +32,11 @@ function createCodeEditorBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const isMoveDownShortcut = isHotkey(config.moveBlockDownShortcut, event.keyboardEvent), lastBlock = getLastBlock({
         context
       }), selectedBlocks = getSelectedBlocks({
         context
-      }), blocksBelow = (lastBlock == null ? void 0 : lastBlock.node._key) !== ((_a = selectedBlocks[selectedBlocks.length - 1]) == null ? void 0 : _a.node._key);
+      }), blocksBelow = lastBlock?.node._key !== selectedBlocks[selectedBlocks.length - 1]?.node._key;
       return !isMoveDownShortcut || !blocksBelow ? !1 : {
         paths: selectedBlocks.map((block) => block.path).reverse()
       };
@@ -50,6 +49,304 @@ function createCodeEditorBehaviors(config) {
     }))]
   })];
 }
+const emojiCharRegEx = /^[a-zA-Z-_0-9]{1}$/, incompleteEmojiRegEx = /:([a-zA-Z-_0-9]+)$/, emojiRegEx = /:([a-zA-Z-_0-9]+):$/;
+function createEmojiPickerBehaviors(config) {
+  const emojiPickerActor = createActor(createEmojiPickerMachine());
+  return emojiPickerActor.start(), emojiPickerActor.subscribe((state) => {
+    config.onMatchesChanged({
+      matches: state.context.matches
+    }), config.onSelectedIndexChanged({
+      selectedIndex: state.context.selectedIndex
+    });
+  }), [defineBehavior({
+    on: "insert.text",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (event.text !== ":")
+        return !1;
+      const matches = emojiPickerActor.getSnapshot().context.matches, selectedIndex = emojiPickerActor.getSnapshot().context.selectedIndex, emoji = matches[selectedIndex] ? config.parseMatch({
+        match: matches[selectedIndex]
+      }) : void 0, focusBlock = getFocusTextBlock({
+        context
+      }), textBefore = getBlockTextBefore({
+        context
+      }), emojiKeyword = `${textBefore}:`.match(emojiRegEx)?.[1];
+      if (!focusBlock || emojiKeyword === void 0)
+        return !1;
+      const emojiStringLength = emojiKeyword.length + 2;
+      return emoji ? {
+        focusBlock,
+        emoji,
+        emojiStringLength,
+        textBeforeLength: textBefore.length + 1
+      } : !1;
+    },
+    actions: [() => [{
+      type: "insert.text",
+      text: ":"
+    }], (_, params) => [{
+      type: "effect",
+      effect: () => {
+        emojiPickerActor.send({
+          type: "select"
+        });
+      }
+    }, {
+      type: "delete.text",
+      anchor: {
+        path: params.focusBlock.path,
+        offset: params.textBeforeLength - params.emojiStringLength
+      },
+      focus: {
+        path: params.focusBlock.path,
+        offset: params.textBeforeLength
+      }
+    }, {
+      type: "insert.text",
+      text: params.emoji
+    }]]
+  }), defineBehavior({
+    on: "insert.text",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (!emojiCharRegEx.test(event.text))
+        return {
+          emojis: []
+        };
+      const focusBlock = getFocusTextBlock({
+        context
+      }), emojiKeyword = `${getBlockTextBefore({
+        context
+      })}${event.text}`.match(incompleteEmojiRegEx)?.[1];
+      return !focusBlock || emojiKeyword === void 0 ? {
+        emojis: []
+      } : {
+        emojis: config.matchEmojis({
+          keyword: emojiKeyword
+        })
+      };
+    },
+    actions: [(_, params) => [{
+      type: "effect",
+      effect: () => {
+        emojiPickerActor.send({
+          type: "emojis found",
+          matches: params.emojis
+        });
+      }
+    }]]
+  }), defineBehavior({
+    on: "key.down",
+    guard: ({
+      context,
+      event
+    }) => {
+      const isShift = isHotkey("Shift", event.keyboardEvent), isColon = event.keyboardEvent.key === ":", isEmojiChar = emojiCharRegEx.test(event.keyboardEvent.key);
+      if (isShift || isColon || isEmojiChar)
+        return !1;
+      const isArrowDown = isHotkey("ArrowDown", event.keyboardEvent), isArrowUp = isHotkey("ArrowUp", event.keyboardEvent), isEnter = isHotkey("Enter", event.keyboardEvent), isTab = isHotkey("Tab", event.keyboardEvent);
+      if (isEnter || isTab) {
+        const matches = emojiPickerActor.getSnapshot().context.matches, selectedIndex = emojiPickerActor.getSnapshot().context.selectedIndex, emoji = matches[selectedIndex] ? config.parseMatch({
+          match: matches[selectedIndex]
+        }) : void 0;
+        if (!emoji)
+          return !1;
+        const focusBlock = getFocusTextBlock({
+          context
+        }), textBefore = getBlockTextBefore({
+          context
+        }), emojiKeyword = textBefore.match(incompleteEmojiRegEx)?.[1];
+        if (!focusBlock || emojiKeyword === void 0)
+          return !1;
+        const emojiStringLength = emojiKeyword.length + 1;
+        return emoji ? {
+          action: "select",
+          focusBlock,
+          emoji,
+          emojiStringLength,
+          textBeforeLength: textBefore.length
+        } : !1;
+      }
+      return isArrowDown ? {
+        action: "navigate down"
+      } : isArrowUp ? {
+        action: "navigate up"
+      } : {
+        action: "reset"
+      };
+    },
+    actions: [(_, params) => params.action === "select" ? [{
+      type: "effect",
+      effect: () => {
+        emojiPickerActor.send({
+          type: "select"
+        });
+      }
+    }, {
+      type: "delete.text",
+      anchor: {
+        path: params.focusBlock.path,
+        offset: params.textBeforeLength - params.emojiStringLength
+      },
+      focus: {
+        path: params.focusBlock.path,
+        offset: params.textBeforeLength
+      }
+    }, {
+      type: "insert.text",
+      text: params.emoji
+    }] : params.action === "navigate up" ? [
+      // If we are navigating then we want to hijack the key event and
+      // turn it into a noop.
+      {
+        type: "noop"
+      },
+      {
+        type: "effect",
+        effect: () => {
+          emojiPickerActor.send({
+            type: "navigate up"
+          });
+        }
+      }
+    ] : params.action === "navigate down" ? [
+      // If we are navigating then we want to hijack the key event and
+      // turn it into a noop.
+      {
+        type: "noop"
+      },
+      {
+        type: "effect",
+        effect: () => {
+          emojiPickerActor.send({
+            type: "navigate down"
+          });
+        }
+      }
+    ] : [{
+      type: "effect",
+      effect: () => {
+        emojiPickerActor.send({
+          type: "reset"
+        });
+      }
+    }]]
+  }), defineBehavior({
+    on: "delete.backward",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (event.unit !== "character")
+        return !1;
+      const focusBlock = getFocusTextBlock({
+        context
+      }), textBefore = getBlockTextBefore({
+        context
+      }), emojiKeyword = textBefore.slice(0, textBefore.length - 1).match(incompleteEmojiRegEx)?.[1];
+      return !focusBlock || emojiKeyword === void 0 ? {
+        emojis: [],
+        event
+      } : {
+        emojis: config.matchEmojis({
+          keyword: emojiKeyword
+        })
+      };
+    },
+    actions: [(_, params) => [{
+      type: "effect",
+      effect: () => {
+        emojiPickerActor.send({
+          type: "emojis found",
+          matches: params.emojis
+        });
+      }
+    }]]
+  })];
+}
+function createEmojiPickerMachine() {
+  return setup({
+    types: {
+      context: {},
+      events: {}
+    },
+    actions: {
+      "assign matches": assign({
+        matches: ({
+          event
+        }) => (assertEvent(event, "emojis found"), event.matches)
+      }),
+      "reset matches": assign({
+        matches: []
+      }),
+      "reset selected index": assign({
+        selectedIndex: 0
+      }),
+      "increment selected index": assign({
+        selectedIndex: ({
+          context
+        }) => context.selectedIndex === context.matches.length - 1 ? 0 : context.selectedIndex + 1
+      }),
+      "decrement selected index": assign({
+        selectedIndex: ({
+          context
+        }) => context.selectedIndex === 0 ? context.matches.length - 1 : context.selectedIndex - 1
+      })
+    },
+    guards: {
+      "no matches": ({
+        context
+      }) => context.matches.length === 0
+    }
+  }).createMachine({
+    id: "emoji picker",
+    context: {
+      matches: [],
+      selectedIndex: 0
+    },
+    initial: "idle",
+    states: {
+      idle: {
+        on: {
+          "emojis found": {
+            actions: "assign matches",
+            target: "showing matches"
+          }
+        }
+      },
+      "showing matches": {
+        always: {
+          guard: "no matches",
+          target: "idle"
+        },
+        exit: ["reset selected index"],
+        on: {
+          "emojis found": {
+            actions: "assign matches"
+          },
+          "navigate down": {
+            actions: "increment selected index"
+          },
+          "navigate up": {
+            actions: "decrement selected index"
+          },
+          reset: {
+            target: "idle",
+            actions: ["reset selected index", "reset matches"]
+          },
+          select: {
+            target: "idle",
+            actions: ["reset selected index", "reset matches"]
+          }
+        }
+      }
+    }
+  });
+}
 function createLinkBehaviors(config) {
   const pasteLinkOnSelection = defineBehavior({
     on: "paste",
@@ -57,10 +354,9 @@ function createLinkBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const selectionCollapsed = isSelectionCollapsed({
         context
-      }), text = event.data.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? (_a = config.linkAnnotation) == null ? void 0 : _a.call(config, {
+      }), text = event.data.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? config.linkAnnotation?.({
         url,
         schema: context.schema
       }) : void 0;
@@ -80,7 +376,6 @@ function createLinkBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const focusSpan = getFocusSpan({
         context
       }), selectionCollapsed = isSelectionCollapsed({
@@ -88,7 +383,7 @@ function createLinkBehaviors(config) {
       });
       if (!focusSpan || !selectionCollapsed)
         return !1;
-      const text = event.data.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? (_a = config.linkAnnotation) == null ? void 0 : _a.call(config, {
+      const text = event.data.getData("text/plain"), url = looksLikeUrl(text) ? text : void 0, annotation = url !== void 0 ? config.linkAnnotation?.({
         url,
         schema: context.schema
       }) : void 0;
@@ -113,18 +408,10 @@ function looksLikeUrl(text) {
   let looksLikeUrl2 = !1;
   try {
     new URL(text), looksLikeUrl2 = !0;
-  } catch (e) {
+  } catch {
   }
   return looksLikeUrl2;
 }
-var __defProp = Object.defineProperty, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b))
-      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  return a;
-};
 function createMarkdownBehaviors(config) {
   const automaticBlockquoteOnSpace = defineBehavior({
     on: "insert.text",
@@ -132,7 +419,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = isSelectionCollapsed({
@@ -152,12 +438,12 @@ function createMarkdownBehaviors(config) {
           }, "children", {
             _key: focusSpan.node._key
           }],
-          offset: (_b = (_a = context.selection) == null ? void 0 : _a.focus.offset) != null ? _b : 0
+          offset: context.selection?.focus.offset ?? 0
         }
       });
       if (!blockOffset)
         return !1;
-      const blockText = getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = (_c = config.blockquoteStyle) == null ? void 0 : _c.call(config, context);
+      const blockText = getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = config.blockquoteStyle?.(context);
       return caretAtTheEndOfQuote && looksLikeMarkdownQuote && blockquoteStyle !== void 0 ? {
         focusTextBlock,
         style: blockquoteStyle
@@ -194,11 +480,10 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const hrCharacter = event.text === "-" ? "-" : event.text === "*" ? "*" : event.text === "_" ? "_" : void 0;
       if (hrCharacter === void 0)
         return !1;
-      const hrObject = (_a = config.horizontalRuleObject) == null ? void 0 : _a.call(config, context), focusBlock = getFocusTextBlock({
+      const hrObject = config.horizontalRuleObject?.(context), focusBlock = getFocusTextBlock({
         context
       }), selectionCollapsed = isSelectionCollapsed({
         context
@@ -236,17 +521,17 @@ function createMarkdownBehaviors(config) {
       type: "insert.block object",
       placement: "before",
       blockObject: hrObject
-    }, __spreadValues({
-      type: "delete.text"
-    }, hrBlockOffsets)]]
+    }, {
+      type: "delete.text",
+      ...hrBlockOffsets
+    }]]
   }), automaticHrOnPaste = defineBehavior({
     on: "paste",
     guard: ({
       context,
       event
     }) => {
-      var _a, _b;
-      const text = event.data.getData("text/plain"), hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm, hrCharacters = (_a = text.match(hrRegExp)) == null ? void 0 : _a[0], hrObject = (_b = config.horizontalRuleObject) == null ? void 0 : _b.call(config, context), focusBlock = getFocusBlock({
+      const text = event.data.getData("text/plain"), hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm, hrCharacters = text.match(hrRegExp)?.[0], hrObject = config.horizontalRuleObject?.(context), focusBlock = getFocusBlock({
         context
       });
       return !hrCharacters || !hrObject || !focusBlock ? !1 : {
@@ -287,7 +572,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = isSelectionCollapsed({
@@ -307,7 +591,7 @@ function createMarkdownBehaviors(config) {
           }, "children", {
             _key: focusSpan.node._key
           }],
-          offset: (_b = (_a = context.selection) == null ? void 0 : _a.focus.offset) != null ? _b : 0
+          offset: context.selection?.focus.offset ?? 0
         }
       });
       if (!blockOffset)
@@ -315,7 +599,7 @@ function createMarkdownBehaviors(config) {
       const blockText = getTextBlockText(focusTextBlock.node), markdownHeadingSearch = /^#+/.exec(blockText), level = markdownHeadingSearch ? markdownHeadingSearch[0].length : void 0;
       if (blockOffset.offset !== level)
         return !1;
-      const style = level !== void 0 ? (_c = config.headingStyle) == null ? void 0 : _c.call(config, {
+      const style = level !== void 0 ? config.headingStyle?.({
         schema: context.schema,
         level
       }) : void 0;
@@ -355,7 +639,6 @@ function createMarkdownBehaviors(config) {
     guard: ({
       context
     }) => {
-      var _a, _b;
       const selectionCollapsed = isSelectionCollapsed({
         context
       }), focusTextBlock = getFocusTextBlock({
@@ -365,7 +648,7 @@ function createMarkdownBehaviors(config) {
       });
       if (!selectionCollapsed || !focusTextBlock || !focusSpan)
         return !1;
-      const atTheBeginningOfBLock = focusTextBlock.node.children[0]._key === focusSpan.node._key && ((_a = context.selection) == null ? void 0 : _a.focus.offset) === 0, defaultStyle = (_b = config.defaultStyle) == null ? void 0 : _b.call(config, context);
+      const atTheBeginningOfBLock = focusTextBlock.node.children[0]._key === focusSpan.node._key && context.selection?.focus.offset === 0, defaultStyle = config.defaultStyle?.(context);
       return atTheBeginningOfBLock && defaultStyle && focusTextBlock.node.style !== defaultStyle ? {
         defaultStyle,
         focusTextBlock
@@ -385,7 +668,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c, _d, _e;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = isSelectionCollapsed({
@@ -405,12 +687,12 @@ function createMarkdownBehaviors(config) {
           }, "children", {
             _key: focusSpan.node._key
           }],
-          offset: (_b = (_a = context.selection) == null ? void 0 : _a.focus.offset) != null ? _b : 0
+          offset: context.selection?.focus.offset ?? 0
         }
       });
       if (!blockOffset)
         return !1;
-      const blockText = getTextBlockText(focusTextBlock.node), defaultStyle = (_c = config.defaultStyle) == null ? void 0 : _c.call(config, context), looksLikeUnorderedList = /^(-|\*)/.test(blockText), unorderedListStyle = (_d = config.unorderedListStyle) == null ? void 0 : _d.call(config, context), caretAtTheEndOfUnorderedList = blockOffset.offset === 1;
+      const blockText = getTextBlockText(focusTextBlock.node), defaultStyle = config.defaultStyle?.(context), looksLikeUnorderedList = /^(-|\*)/.test(blockText), unorderedListStyle = config.unorderedListStyle?.(context), caretAtTheEndOfUnorderedList = blockOffset.offset === 1;
       if (defaultStyle && caretAtTheEndOfUnorderedList && looksLikeUnorderedList && unorderedListStyle !== void 0)
         return {
           focusTextBlock,
@@ -418,7 +700,7 @@ function createMarkdownBehaviors(config) {
           listItemLength: 1,
           style: defaultStyle
         };
-      const looksLikeOrderedList = /^1\./.test(blockText), orderedListStyle = (_e = config.orderedListStyle) == null ? void 0 : _e.call(config, context), caretAtTheEndOfOrderedList = blockOffset.offset === 2;
+      const looksLikeOrderedList = /^1\./.test(blockText), orderedListStyle = config.orderedListStyle?.(context), caretAtTheEndOfOrderedList = blockOffset.offset === 2;
       return defaultStyle && caretAtTheEndOfOrderedList && looksLikeOrderedList && orderedListStyle !== void 0 ? {
         focusTextBlock,
         listItem: orderedListStyle,
@@ -457,6 +739,7 @@ export {
   coreBehavior,
   coreBehaviors,
   createCodeEditorBehaviors,
+  createEmojiPickerBehaviors,
   createLinkBehaviors,
   createMarkdownBehaviors,
   defineBehavior