@portabletext/editor 1.16.4 → 1.17.1

package/lib/behaviors/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var selector_isSelectionCollapsed = require("../_chunks-cjs/selector.is-selection-collapsed.cjs"), behavior_core = require("../_chunks-cjs/behavior.core.cjs"), types = require("@sanity/types"), selector_getTextBefore = require("../_chunks-cjs/selector.get-text-before.cjs");
+var selector_isSelectionCollapsed = require("../_chunks-cjs/selector.is-selection-collapsed.cjs"), behavior_core = require("../_chunks-cjs/behavior.core.cjs"), xstate = require("xstate"), selector_getTextBefore = require("../_chunks-cjs/selector.get-text-before.cjs"), types = require("@sanity/types");
 function createCodeEditorBehaviors(config) {
   return [behavior_core.defineBehavior({
     on: "key.down",
@@ -8,12 +8,11 @@ function createCodeEditorBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const isMoveUpShortcut = behavior_core.isHotkey(config.moveBlockUpShortcut, event.keyboardEvent), firstBlock = selector_isSelectionCollapsed.getFirstBlock({
         context
       }), selectedBlocks = selector_isSelectionCollapsed.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)
       };
@@ -30,12 +29,11 @@ function createCodeEditorBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const isMoveDownShortcut = behavior_core.isHotkey(config.moveBlockDownShortcut, event.keyboardEvent), lastBlock = selector_isSelectionCollapsed.getLastBlock({
         context
       }), selectedBlocks = selector_isSelectionCollapsed.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()
       };
@@ -48,6 +46,303 @@ 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 = xstate.createActor(createEmojiPickerMachine());
+  return emojiPickerActor.start(), emojiPickerActor.subscribe((state) => {
+    config.onMatchesChanged({
+      matches: state.context.matches
+    }), config.onSelectedIndexChanged({
+      selectedIndex: state.context.selectedIndex
+    });
+  }), [behavior_core.defineBehavior({
+    on: "insert.text",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (!emojiCharRegEx.test(event.text))
+        return {
+          emojis: []
+        };
+      const focusBlock = selector_isSelectionCollapsed.getFocusTextBlock({
+        context
+      }), emojiKeyword = `${selector_getTextBefore.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
+        });
+      }
+    }]]
+  }), behavior_core.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 = selector_isSelectionCollapsed.getFocusTextBlock({
+        context
+      }), textBefore = selector_getTextBefore.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
+    }]]
+  }), behavior_core.defineBehavior({
+    on: "key.down",
+    guard: ({
+      context,
+      event
+    }) => {
+      const isShift = behavior_core.isHotkey("Shift", event.keyboardEvent), isColon = event.keyboardEvent.key === ":", isEmojiChar = emojiCharRegEx.test(event.keyboardEvent.key);
+      if (isShift || isColon || isEmojiChar)
+        return !1;
+      const isArrowDown = behavior_core.isHotkey("ArrowDown", event.keyboardEvent), isArrowUp = behavior_core.isHotkey("ArrowUp", event.keyboardEvent), isEnter = behavior_core.isHotkey("Enter", event.keyboardEvent), isTab = behavior_core.isHotkey("Tab", event.keyboardEvent), matches = emojiPickerActor.getSnapshot().context.matches;
+      if (isEnter || isTab) {
+        const selectedIndex = emojiPickerActor.getSnapshot().context.selectedIndex, emoji = matches[selectedIndex] ? config.parseMatch({
+          match: matches[selectedIndex]
+        }) : void 0;
+        if (!emoji)
+          return !1;
+        const focusBlock = selector_isSelectionCollapsed.getFocusTextBlock({
+          context
+        }), textBefore = selector_getTextBefore.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 && matches.length > 0 ? {
+        action: "navigate down"
+      } : isArrowUp && matches.length > 0 ? {
+        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"
+        });
+      }
+    }]]
+  }), behavior_core.defineBehavior({
+    on: "delete.backward",
+    guard: ({
+      context,
+      event
+    }) => {
+      if (event.unit !== "character" || emojiPickerActor.getSnapshot().context.matches.length === 0)
+        return !1;
+      const focusBlock = selector_isSelectionCollapsed.getFocusTextBlock({
+        context
+      }), textBefore = selector_getTextBefore.getBlockTextBefore({
+        context
+      }), emojiKeyword = textBefore.slice(0, textBefore.length - 1).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
+        });
+      }
+    }]]
+  })];
+}
+function createEmojiPickerMachine() {
+  return xstate.setup({
+    types: {
+      context: {},
+      events: {}
+    },
+    actions: {
+      "assign matches": xstate.assign({
+        matches: ({
+          event
+        }) => (xstate.assertEvent(event, "emojis found"), event.matches)
+      }),
+      "reset matches": xstate.assign({
+        matches: []
+      }),
+      "reset selected index": xstate.assign({
+        selectedIndex: 0
+      }),
+      "increment selected index": xstate.assign({
+        selectedIndex: ({
+          context
+        }) => context.selectedIndex === context.matches.length - 1 ? 0 : context.selectedIndex + 1
+      }),
+      "decrement selected index": xstate.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 = behavior_core.defineBehavior({
     on: "paste",
@@ -55,10 +350,9 @@ function createLinkBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const selectionCollapsed = selector_isSelectionCollapsed.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;
@@ -78,7 +372,6 @@ function createLinkBehaviors(config) {
       context,
       event
     }) => {
-      var _a;
       const focusSpan = selector_isSelectionCollapsed.getFocusSpan({
         context
       }), selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
@@ -86,7 +379,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;
@@ -111,18 +404,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 = behavior_core.defineBehavior({
     on: "insert.text",
@@ -130,7 +415,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
@@ -150,12 +434,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 = behavior_core.getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = (_c = config.blockquoteStyle) == null ? void 0 : _c.call(config, context);
+      const blockText = behavior_core.getTextBlockText(focusTextBlock.node), caretAtTheEndOfQuote = blockOffset.offset === 1, looksLikeMarkdownQuote = /^>/.test(blockText), blockquoteStyle = config.blockquoteStyle?.(context);
       return caretAtTheEndOfQuote && looksLikeMarkdownQuote && blockquoteStyle !== void 0 ? {
         focusTextBlock,
         style: blockquoteStyle
@@ -192,11 +476,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 = selector_isSelectionCollapsed.getFocusTextBlock({
+      const hrObject = config.horizontalRuleObject?.(context), focusBlock = selector_isSelectionCollapsed.getFocusTextBlock({
         context
       }), selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
         context
@@ -234,17 +517,17 @@ function createMarkdownBehaviors(config) {
       type: "insert.block object",
       placement: "before",
       blockObject: hrObject
-    }, __spreadValues({
-      type: "delete.text"
-    }, hrBlockOffsets)]]
+    }, {
+      type: "delete.text",
+      ...hrBlockOffsets
+    }]]
   }), automaticHrOnPaste = behavior_core.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 = selector_isSelectionCollapsed.getFocusBlock({
+      const text = event.data.getData("text/plain"), hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm, hrCharacters = text.match(hrRegExp)?.[0], hrObject = config.horizontalRuleObject?.(context), focusBlock = selector_isSelectionCollapsed.getFocusBlock({
         context
       });
       return !hrCharacters || !hrObject || !focusBlock ? !1 : {
@@ -285,7 +568,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
@@ -305,7 +587,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)
@@ -313,7 +595,7 @@ function createMarkdownBehaviors(config) {
       const blockText = behavior_core.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;
@@ -353,7 +635,6 @@ function createMarkdownBehaviors(config) {
     guard: ({
       context
     }) => {
-      var _a, _b;
       const selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
         context
       }), focusTextBlock = selector_isSelectionCollapsed.getFocusTextBlock({
@@ -363,7 +644,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
@@ -383,7 +664,6 @@ function createMarkdownBehaviors(config) {
       context,
       event
     }) => {
-      var _a, _b, _c, _d, _e;
       if (event.text !== " ")
         return !1;
       const selectionCollapsed = selector_isSelectionCollapsed.isSelectionCollapsed({
@@ -403,12 +683,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 = behavior_core.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 = behavior_core.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,
@@ -416,7 +696,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,
@@ -455,6 +735,7 @@ exports.coreBehavior = behavior_core.coreBehavior;
 exports.coreBehaviors = behavior_core.coreBehaviors;
 exports.defineBehavior = behavior_core.defineBehavior;
 exports.createCodeEditorBehaviors = createCodeEditorBehaviors;
+exports.createEmojiPickerBehaviors = createEmojiPickerBehaviors;
 exports.createLinkBehaviors = createLinkBehaviors;
 exports.createMarkdownBehaviors = createMarkdownBehaviors;
 //# sourceMappingURL=index.cjs.map