quoin-editor 2.0.5 → 2.1.0

package/dist/{chunk-WDBFGX3U.cjs → chunk-VTTMJGWP.cjs}

@@ -1,20 +1,23 @@
 'use strict';
 
 var chunk2SWLD6R5_cjs = require('./chunk-2SWLD6R5.cjs');
-var chunkEBSDPHPS_cjs = require('./chunk-EBSDPHPS.cjs');
-var chunk2QKFRKOP_cjs = require('./chunk-2QKFRKOP.cjs');
+var chunk4UFWFV43_cjs = require('./chunk-4UFWFV43.cjs');
+var chunkN25EH2GZ_cjs = require('./chunk-N25EH2GZ.cjs');
 var chunkZWTIRGY5_cjs = require('./chunk-ZWTIRGY5.cjs');
-var chunkFK7EBZPX_cjs = require('./chunk-FK7EBZPX.cjs');
-var chunkI7X7B3WD_cjs = require('./chunk-I7X7B3WD.cjs');
+var chunkZ5EEDCRI_cjs = require('./chunk-Z5EEDCRI.cjs');
+var chunk4JDRDPLC_cjs = require('./chunk-4JDRDPLC.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/extensions/emoji/all-callouts.ts
-var allCallouts = (state, blockIds) => blockIds.length > 0 && blockIds.every((id) => chunkI7X7B3WD_cjs.blockById(state.doc, id)?.type === "CALLOUT");
+var allCallouts = (state, blockIds) => blockIds.length > 0 && blockIds.every((id) => chunk4JDRDPLC_cjs.blockById(state.doc, id)?.type === "CALLOUT");
 
 // src/extensions/emoji/composing-key.ts
 var isComposing = (event) => event.isComposing || event.keyCode === 229;
 
+// src/extensions/emoji/emoji-at.ts
+var emojiAt = (target) => target instanceof Element ? target.closest("[data-emoji]")?.getAttribute("data-emoji") ?? null : null;
+
 // src/extensions/emoji/emoji-name.ts
 var emojiName = ({ shortcodes, tags }) => shortcodes[0] ?? tags[0] ?? "";
 
@@ -40,14 +43,13 @@ var MOVES = {
 function gridMove(rows, cell, key, ctrl = false) {
   return Object.hasOwn(MOVES, key) ? MOVES[key](rows, cell, ctrl) : null;
 }
-var CELL = chunkEBSDPHPS_cjs.cn(
+var CELL = chunk4UFWFV43_cjs.cn(
   "flex size-8 shrink-0 cursor-default items-center justify-center rounded-sm text-xl hover:bg-accent",
-  chunkEBSDPHPS_cjs.FOCUS_RING
+  chunk4UFWFV43_cjs.FOCUS_RING
 );
 var HEADING = "px-1 pt-2 pb-1 text-xs font-medium text-muted-foreground";
 var FIRST = { row: 0, col: 0 };
 var cellId = (baseId, row, col) => `${baseId}-cell-${row}-${col}`;
-var emojiAt = (target) => target instanceof Element ? target.closest("[data-emoji]")?.getAttribute("data-emoji") ?? null : null;
 var EmojiRow = react.memo(function EmojiRow2({ baseId, row, emoji, activeCol }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "row", className: "flex", children: emoji.map((cell, col) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -63,10 +65,10 @@ var EmojiRow = react.memo(function EmojiRow2({ baseId, row, emoji, activeCol })
     cell.emoji
   )) });
 });
-var EmojiGrids = react.forwardRef(function EmojiGrids2({ layout, onPick }, ref) {
+function EmojiGrid({ section: section2, onPick }) {
   const baseId = react.useId();
   const [active, setActive] = react.useState(null);
-  const current = (active === null ? void 0 : layout.places.get(active)) ?? FIRST;
+  const current = (active === null ? void 0 : section2.places.get(active)) ?? FIRST;
   const onKeyDown = (event) => {
     if (isComposing(event.nativeEvent) || event.altKey || event.shiftKey || event.metaKey) return;
     if (event.key === "Enter") {
@@ -76,45 +78,47 @@ var EmojiGrids = react.forwardRef(function EmojiGrids2({ layout, onPick }, ref)
       onPick(emoji);
       return;
     }
-    const key = chunk2QKFRKOP_cjs.arrowAsWritten(event.key, chunk2QKFRKOP_cjs.inlineDirection(event.currentTarget));
-    const next = gridMove(layout.rowLengths, current, key, event.ctrlKey);
+    const key = chunkN25EH2GZ_cjs.arrowAsWritten(event.key, chunkN25EH2GZ_cjs.inlineDirection(event.currentTarget));
+    const next = gridMove(section2.rowLengths, current, key, event.ctrlKey);
     if (next === null) return;
     event.preventDefault();
-    setActive(layout.rows[next.row][next.col].emoji);
+    setActive(section2.rows[next.row][next.col].emoji);
     event.currentTarget.ownerDocument.getElementById(cellId(baseId, next.row, next.col))?.focus();
   };
-  const onClick = (event) => {
-    const emoji = emojiAt(event.target);
-    if (emoji !== null) onPick(emoji);
-  };
   const onFocus = (event) => {
     const emoji = emojiAt(event.target);
     if (emoji !== null) setActive(emoji);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "max-h-72 overflow-y-auto", onKeyDown, onClick, onFocus, children: layout.sections.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${baseId}-${section.key}`, className: HEADING, children: section.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-labelledby": `${baseId}-${section.key}`, children: section.rows.map((emoji, index) => {
-      const row = section.firstRow + index;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        EmojiRow,
-        {
-          baseId,
-          row,
-          emoji,
-          activeCol: row === current.row ? current.col : null
-        },
-        row
-      );
-    }) })
-  ] }, section.key)) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { id: `${baseId}-label`, className: HEADING, children: section2.label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { role: "grid", "aria-labelledby": `${baseId}-label`, onKeyDown, onFocus, children: section2.rows.map((emoji, row) => /* @__PURE__ */ jsxRuntime.jsx(
+      EmojiRow,
+      {
+        baseId,
+        row,
+        emoji,
+        activeCol: row === current.row ? current.col : null
+      },
+      row
+    )) })
+  ] });
+}
+var EmojiGrids = react.forwardRef(function EmojiGrids2({ layout, onPick }, ref) {
+  const onClick = (event) => {
+    const emoji = emojiAt(event.target);
+    if (emoji !== null) onPick(emoji);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "max-h-72 overflow-y-auto", onClick, children: layout.map((section2) => /* @__PURE__ */ jsxRuntime.jsx(EmojiGrid, { section: section2, onPick }, section2.key)) });
 });
 
 // src/extensions/emoji/picker-layout.ts
 var COLUMNS = 8;
-function inRows(emoji) {
+function section(key, label, emoji) {
   const rows = [];
   for (let start = 0; start < emoji.length; start += COLUMNS) rows.push(emoji.slice(start, start + COLUMNS));
-  return rows;
+  const places = /* @__PURE__ */ new Map();
+  rows.forEach((cells, row) => cells.forEach((cell, col) => places.set(cell.emoji, { row, col })));
+  return { key, label, rows, rowLengths: rows.map((cells) => cells.length), places };
 }
 function grouped(found, labels) {
   const byGroup = /* @__PURE__ */ new Map();
@@ -123,20 +127,11 @@ function grouped(found, labels) {
     if (group === void 0) byGroup.set(emoji.group, [emoji]);
     else group.push(emoji);
   }
-  return [...byGroup].map(([group, emoji]) => ({ key: group, label: labels.groups[group], rows: inRows(emoji) }));
+  return [...byGroup].map(([group, emoji]) => section(group, labels.groups[group], emoji));
 }
 function pickerLayout(found, searching, labels) {
-  const unplaced = found.length === 0 ? [] : searching ? [{ key: "results", label: labels.searchResults, rows: inRows(found) }] : grouped(found, labels);
-  let firstRow = 0;
-  const sections = unplaced.map((section) => {
-    const placed = { ...section, firstRow };
-    firstRow += section.rows.length;
-    return placed;
-  });
-  const rows = sections.flatMap((section) => section.rows);
-  const places = /* @__PURE__ */ new Map();
-  rows.forEach((cells, row) => cells.forEach(({ emoji }, col) => places.set(emoji, { row, col })));
-  return { sections, rows, rowLengths: rows.map((cells) => cells.length), places };
+  if (found.length === 0) return [];
+  return searching ? [section("results", labels.searchResults, found)] : grouped(found, labels);
 }
 
 // src/extensions/emoji/emoji-data.ts
@@ -150,9 +145,9 @@ var loadEmojiData = () => emojiData.load();
 
 // src/extensions/emoji/use-emoji-data.ts
 function useEmojiData() {
-  const { onError } = chunkEBSDPHPS_cjs.useQuoin();
+  const { onError } = chunk4UFWFV43_cjs.useQuoin();
   const report = react.useRef(onError);
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     report.current = onError;
   });
   const [state, setState] = react.useState(() => emojiData.loaded() ?? "loading");
@@ -165,7 +160,7 @@ function useEmojiData() {
       (reason) => {
         if (!current) return;
         setState("failed");
-        report.current(chunkEBSDPHPS_cjs.toError(reason));
+        report.current(chunk4UFWFV43_cjs.toError(reason));
       }
     );
     return () => {
@@ -185,15 +180,16 @@ function EmojiPicker({ labels, onPick }) {
     () => typeof data === "string" ? null : pickerLayout(data.searchEmoji(query), searching, labels),
     [data, query, searching, labels]
   );
-  const shown = layout !== null && layout.sections.length > 0;
+  const shown = layout !== null && layout.length > 0;
   const status = data === "loading" ? labels.loading : data === "failed" ? labels.loadFailed : shown ? "" : labels.noMatches;
   const focusGrids = () => grids.current?.querySelector(ACTIVE_CELL)?.focus();
   const onKeyDown = (event) => {
     if (event.key !== "Tab" || isComposing(event.nativeEvent) || event.altKey || event.ctrlKey || event.metaKey) return;
     event.preventDefault();
     event.stopPropagation();
-    if (event.target === field.current) focusGrids();
-    else field.current?.focus();
+    const stops = [field.current, ...grids.current?.querySelectorAll(ACTIVE_CELL) ?? []];
+    const at = stops.indexOf(event.target);
+    stops[(at + (event.shiftKey ? -1 : 1) + stops.length) % stops.length]?.focus();
   };
   const onFieldKeyDown = (event) => {
     if (isComposing(event.nativeEvent)) return;
@@ -202,12 +198,12 @@ function EmojiPicker({ labels, onPick }) {
       focusGrids();
     } else if (event.key === "Enter" && searching && shown) {
       event.preventDefault();
-      onPick(layout.rows[0][0].emoji);
+      onPick(layout[0].rows[0][0].emoji);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", onKeyDown, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEBSDPHPS_cjs.Input,
+      chunk4UFWFV43_cjs.Input,
       {
         ref: field,
         className: "h-8",
@@ -251,11 +247,11 @@ function useIconRequest(controller) {
   const read = react.useCallback(() => storeOf(controller).request, [controller]);
   return react.useSyncExternalStore(subscribe, read, read);
 }
-var CALLOUT_ICON = ".quoin-callout > :first-child";
+var CALLOUT_ICON_BUTTON = ".quoin-callout > :first-child";
 function CalloutIconPicker({ controller, labels }) {
-  const readOnly = chunk2QKFRKOP_cjs.useReadOnly(controller);
+  const readOnly = chunkN25EH2GZ_cjs.useReadOnly(controller);
   const request = useIconRequest(controller);
-  const there = chunk2QKFRKOP_cjs.useEditorState(
+  const there = chunkN25EH2GZ_cjs.useEditorState(
     controller,
     react.useCallback((state) => request !== null && allCallouts(state, request.blocks), [request])
   );
@@ -267,18 +263,18 @@ function CalloutIconPicker({ controller, labels }) {
   return /* @__PURE__ */ jsxRuntime.jsx(IconPopover, { controller, labels, request }, request.blocks.join(" "));
 }
 function IconPopover({ controller, labels, request: { blocks } }) {
-  const anchor = chunkEBSDPHPS_cjs.usePartAnchor(controller, blocks[0], CALLOUT_ICON);
+  const anchor = chunk4UFWFV43_cjs.usePartAnchor(controller, blocks[0], CALLOUT_ICON_BUTTON);
   const content = react.useRef(null);
   const close = () => requestIcon(controller, null);
   const finish = (icon) => {
     close();
-    chunkEBSDPHPS_cjs.runOnBlocks(controller, blocks, icon === null ? chunkEBSDPHPS_cjs.noChange : chunkFK7EBZPX_cjs.setAttrs({ icon }));
+    chunk4UFWFV43_cjs.runOnBlocks(controller, blocks, icon === null ? chunk4UFWFV43_cjs.noChange : chunkZ5EEDCRI_cjs.setAttrs({ icon }));
     controller.focus();
   };
   const ownerDocument = react.useCallback(() => controller.root?.ownerDocument ?? document, [controller]);
-  chunkEBSDPHPS_cjs.useOutsidePress(content, ownerDocument, close);
+  chunk4UFWFV43_cjs.useOutsidePress(content, ownerDocument, close);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkEBSDPHPS_cjs.Popover,
+    chunk4UFWFV43_cjs.Popover,
     {
       open: true,
       modal: false,
@@ -286,21 +282,21 @@ function IconPopover({ controller, labels, request: { blocks } }) {
         if (!open) close();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.PopoverAnchor, { virtualRef: anchor }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkEBSDPHPS_cjs.PopoverContent,
+          chunk4UFWFV43_cjs.PopoverContent,
           {
             ref: content,
             "aria-label": labels.chooseIcon,
             side: "bottom",
             align: "start",
             className: "w-80 p-2",
-            onCloseAutoFocus: chunkEBSDPHPS_cjs.preventDefault,
+            onCloseAutoFocus: chunk4UFWFV43_cjs.preventDefault,
             onEscapeKeyDown: (event) => {
               event.preventDefault();
               if (!isComposing(event)) finish(null);
             },
-            ...chunkEBSDPHPS_cjs.bubblePart(controller),
+            ...chunk4UFWFV43_cjs.bubblePart(controller),
             children: /* @__PURE__ */ jsxRuntime.jsx(EmojiPicker, { labels, onPick: finish })
           }
         )
@@ -312,13 +308,13 @@ function IconPopover({ controller, labels, request: { blocks } }) {
 // src/extensions/emoji/choose-icon-action.ts
 function calloutsFor(state, blockIds) {
   if (blockIds.length === 0 || !state.doc.index.has(blockIds[0])) return null;
-  const targets = chunkEBSDPHPS_cjs.styleTargets(state, blockIds[0]);
+  const targets = chunk4UFWFV43_cjs.styleTargets(state, blockIds[0]);
   return allCallouts(state, targets) ? targets : null;
 }
 var chooseIconAction = (labels) => ({
   id: "choose-icon",
   label: labels.chooseIcon,
-  icon: chunkEBSDPHPS_cjs.SmilePlus,
+  icon: chunk4UFWFV43_cjs.SmilePlus,
   available: (state, blockIds) => calloutsFor(state, blockIds) !== null,
   run: (controller, blockIds) => {
     const blocks = calloutsFor(controller.editor.state, blockIds);
@@ -327,7 +323,7 @@ var chooseIconAction = (labels) => ({
 });
 
 // src/extensions/emoji/emoji-key.ts
-var emojiKey = chunkFK7EBZPX_cjs.createPluginKey("emoji");
+var emojiKey = chunkZ5EEDCRI_cjs.createPluginKey("emoji");
 
 // src/extensions/emoji/emoji-labels.ts
 var englishEmojiLabels = {
@@ -370,28 +366,27 @@ function emojiSource(limit, onFailure) {
   };
 }
 var SHOWN = 8;
-var SHORTEST_QUERY = 2;
-var queryAt = (state) => chunkFK7EBZPX_cjs.getPluginState(state, emojiKey).active?.query ?? null;
+var queryAt = (state) => chunkZ5EEDCRI_cjs.getPluginState(state, emojiKey).active?.query ?? null;
 var emojiOf = ({ emoji }) => emoji;
 var renderEmoji = (emoji) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-base", children: emoji.emoji }),
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: emojiName(emoji) })
 ] });
 function EmojiMenu({ controller, labels }) {
-  const readOnly = chunk2QKFRKOP_cjs.useReadOnly(controller);
-  const query = chunk2QKFRKOP_cjs.useEditorState(controller, queryAt);
-  if (readOnly || query === null || query.length < SHORTEST_QUERY) return null;
+  const readOnly = chunkN25EH2GZ_cjs.useReadOnly(controller);
+  const query = chunkN25EH2GZ_cjs.useEditorState(controller, queryAt);
+  if (readOnly || query === null) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(EmojiMatches, { controller, labels });
 }
 function EmojiMatches({ controller, labels }) {
   const [failed, setFailed] = react.useState(false);
   const source = react.useMemo(() => emojiSource(SHOWN, () => setFailed(true)), []);
   const choose = react.useCallback(
-    (emoji, range) => void chunkEBSDPHPS_cjs.replaceTrigger(controller, range, chunkFK7EBZPX_cjs.insertText(emoji.emoji)),
+    (emoji, range) => void chunk4UFWFV43_cjs.replaceTrigger(controller, range, chunkZ5EEDCRI_cjs.insertText(emoji.emoji)),
     [controller]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkEBSDPHPS_cjs.SuggestionMenu,
+    chunk4UFWFV43_cjs.SuggestionMenu,
     {
       controller,
       pluginKey: emojiKey,
@@ -410,7 +405,7 @@ function emojiExtension(options = {}) {
   const Menu = ({ controller }) => /* @__PURE__ */ jsxRuntime.jsx(EmojiMenu, { controller, labels });
   const Picker = ({ controller }) => /* @__PURE__ */ jsxRuntime.jsx(CalloutIconPicker, { controller, labels });
   const ui = { blockMenuItems: [chooseIconAction(labels)], overlays: [Menu, Picker] };
-  return chunkFK7EBZPX_cjs.defineExtension({ name: "emoji", plugins: [chunkEBSDPHPS_cjs.suggestionPlugin(emojiKey, { char: ":" })], ui });
+  return chunkZ5EEDCRI_cjs.defineExtension({ name: "emoji", plugins: [chunk4UFWFV43_cjs.suggestionPlugin(emojiKey, { char: ":", minLength: 2 })], ui });
 }
 
 exports.emojiExtension = emojiExtension;