quoin-editor 0.4.2 → 1.0.1

package/dist/chunk-QXG3HWDS.js

@@ -0,0 +1,184 @@
+import {
+  domMapOf
+} from "./chunk-SSIRYUCK.js";
+import {
+  Transaction,
+  textSelection,
+  undoInputRule
+} from "./chunk-UPSLDTLT.js";
+import {
+  blockById,
+  sliceInline
+} from "./chunk-62WKUAQY.js";
+
+// src/extensions/atoms/atom-place.ts
+function atomAt({ doc }, pos, types) {
+  const inline = blockById(doc, pos.block)?.regions[pos.region];
+  const [node] = inline === void 0 || pos.offset < 0 ? [] : sliceInline(inline, pos.offset, pos.offset + 1);
+  return node?.kind === "atom" && types.includes(node.type) ? node : null;
+}
+function atomPlaceAt(state, pos, types) {
+  const node = atomAt(state, pos, types);
+  return node === null ? null : { ...pos, node };
+}
+function atomBeforeCaret(state, types) {
+  const { selection } = state;
+  if (selection?.kind !== "text") return null;
+  const { anchor, head } = selection;
+  if (anchor.block !== head.block || anchor.region !== head.region || anchor.offset !== head.offset) return null;
+  return head.offset === 0 ? null : atomPlaceAt(state, { ...head, offset: head.offset - 1 }, types);
+}
+function selectedAtom(state, types) {
+  const { selection } = state;
+  if (selection?.kind !== "text") return null;
+  const { anchor, head } = selection;
+  if (anchor.block !== head.block || anchor.region !== head.region || Math.abs(anchor.offset - head.offset) !== 1) {
+    return null;
+  }
+  return atomPlaceAt(state, { ...head, offset: Math.min(anchor.offset, head.offset) }, types);
+}
+
+// src/extensions/atoms/extend-over-atom.ts
+function extendOverAtom(types, direction) {
+  return (state, dispatch) => {
+    const { selection } = state;
+    if (selection?.kind !== "text") return false;
+    const { anchor, head } = selection;
+    if (atomAt(state, { ...head, offset: direction < 0 ? head.offset - 1 : head.offset }, types) === null) return false;
+    dispatch?.(new Transaction(state).setSelection(textSelection(anchor, { ...head, offset: head.offset + direction })));
+    return true;
+  };
+}
+
+// src/extensions/atoms/select-atom-backward.ts
+function selectAtomBackward(types) {
+  return (state, dispatch) => {
+    if (undoInputRule(state, dispatch)) return true;
+    const place = atomBeforeCaret(state, types);
+    if (place === null) return false;
+    const { block, region, offset } = place;
+    const atom = textSelection({ block, region, offset }, { block, region, offset: offset + 1 });
+    dispatch?.(new Transaction(state).setSelection(atom));
+    return true;
+  };
+}
+
+// src/extensions/atoms/atom-keymap.ts
+function atomKeymap(types) {
+  return {
+    Backspace: selectAtomBackward(types),
+    "Shift-ArrowLeft": extendOverAtom(types, -1),
+    "Shift-ArrowRight": extendOverAtom(types, 1)
+  };
+}
+
+// src/extensions/atoms/selected-atom-decorations.ts
+var SELECTED_ATOM = "data-quoin-selected-atom";
+function selectedAtomDecorations(types) {
+  return (state) => {
+    const place = selectedAtom(state, types);
+    if (place === null) return [];
+    const { block, region, offset } = place;
+    return [{ kind: "inline", block, region, from: offset, to: offset + 1, attrs: { [SELECTED_ATOM]: "" } }];
+  };
+}
+
+// src/extensions/atoms/use-selection-out-of-atoms.ts
+import { useEffect } from "react";
+
+// src/extensions/atoms/selection-out-of-atoms.ts
+var ELEMENT_NODE = 1;
+function atomAround(node, types) {
+  const element = node.nodeType === ELEMENT_NODE ? node : node.parentElement;
+  const atom = element?.closest("[data-quoin-atom]") ?? null;
+  return atom !== null && types.includes(atom.getAttribute("data-quoin-atom") ?? "") ? atom : null;
+}
+function follows(atom, { node, offset }) {
+  const range = atom.ownerDocument.createRange();
+  range.selectNode(atom);
+  return range.comparePoint(node, offset) > 0;
+}
+function mapOf(atom, hostOf) {
+  const host = hostOf(atom);
+  return host === null ? void 0 : domMapOf(host);
+}
+function beside(atom, after, hostOf) {
+  const map = mapOf(atom, hostOf);
+  const from = map?.fromDom(atom, 0);
+  if (map === void 0 || from === null || from === void 0) return null;
+  return after ? map.toDom(from + 1, -1) : map.toDom(from, 1);
+}
+function caretOutside(atom, { node, offset }, hostOf) {
+  const map = mapOf(atom, hostOf);
+  const at = map?.fromDom(node, offset);
+  return map === void 0 || at === null || at === void 0 ? null : map.toDom(at, -1);
+}
+function moveSelectionOutOfAtoms(selection, hostOf, types) {
+  const { anchorNode, anchorOffset, focusNode, focusOffset } = selection;
+  if (anchorNode === null || focusNode === null) return false;
+  const anchor = { node: anchorNode, offset: anchorOffset };
+  const focus = { node: focusNode, offset: focusOffset };
+  const anchorAtom = atomAround(anchorNode, types);
+  const focusAtom = atomAround(focusNode, types);
+  let ends;
+  if (focusAtom !== null && selection.isCollapsed) {
+    const caret = caretOutside(focusAtom, focus, hostOf);
+    ends = [caret, caret];
+  } else if (focusAtom !== null && anchorAtom === focusAtom) {
+    ends = [beside(focusAtom, false, hostOf), beside(focusAtom, true, hostOf)];
+  } else {
+    ends = [
+      anchorAtom === null ? anchor : beside(anchorAtom, !follows(anchorAtom, focus), hostOf),
+      focusAtom === null ? focus : beside(focusAtom, !follows(focusAtom, anchor), hostOf)
+    ];
+  }
+  const [base, extent] = ends;
+  if (anchorAtom === null && focusAtom === null || base === null || extent === null) return false;
+  selection.setBaseAndExtent(base.node, base.offset, extent.node, extent.offset);
+  return true;
+}
+
+// src/extensions/atoms/use-selection-out-of-atoms.ts
+function useSelectionOutOfAtoms(controller, types, editable) {
+  useEffect(() => {
+    const root = controller.root;
+    const view = root?.ownerDocument.defaultView;
+    if (!editable || root === null || !view) return;
+    const hostOf = (node) => controller.registry.locate(node)?.element ?? null;
+    const moveOut = () => {
+      const selection = view.getSelection();
+      if (selection === null || controller.composingKey !== null) return;
+      if (root.contains(root.ownerDocument.activeElement)) moveSelectionOutOfAtoms(selection, hostOf, types);
+    };
+    view.addEventListener("selectionchange", moveOut, true);
+    root.addEventListener("keydown", moveOut, true);
+    return () => {
+      view.removeEventListener("selectionchange", moveOut, true);
+      root.removeEventListener("keydown", moveOut, true);
+    };
+  }, [controller, types, editable]);
+}
+
+// src/extensions/atoms/atom-at-target.ts
+function atomAtTarget(controller, target, types) {
+  const element = target?.closest?.("[data-quoin-atom]");
+  if (!element) return null;
+  const host = controller.registry.locate(element);
+  const offset = host === null ? null : domMapOf(host.element)?.fromDom(element, 0);
+  if (host === null || offset === null || offset === void 0) return null;
+  return atomPlaceAt(controller.editor.state, { block: host.block, region: host.region, offset }, types);
+}
+
+// src/extensions/atoms/plain-enter.ts
+var plainEnter = (event) => event.key === "Enter" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+
+export {
+  atomAt,
+  selectedAtom,
+  atomKeymap,
+  selectedAtomDecorations,
+  useSelectionOutOfAtoms,
+  atomAtTarget,
+  plainEnter
+};
+//# sourceMappingURL=chunk-QXG3HWDS.js.map

package/dist/chunk-QXG3HWDS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/extensions/atoms/atom-place.ts","../src/extensions/atoms/extend-over-atom.ts","../src/extensions/atoms/select-atom-backward.ts","../src/extensions/atoms/atom-keymap.ts","../src/extensions/atoms/selected-atom-decorations.ts","../src/extensions/atoms/use-selection-out-of-atoms.ts","../src/extensions/atoms/selection-out-of-atoms.ts","../src/extensions/atoms/atom-at-target.ts","../src/extensions/atoms/plain-enter.ts"],"mappings":"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","names":[]}

package/dist/chunk-RQW3P3GH.js

@@ -0,0 +1,504 @@
+import {
+  FOCUS_RING,
+  Input,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  SuggestionMenu,
+  bubblePart,
+  cn,
+  noChange,
+  preventDefault,
+  replaceTrigger,
+  runOnBlocks,
+  styleTargets,
+  suggestionPlugin,
+  toError,
+  useOutsidePress,
+  usePartAnchor,
+  useQuoin
+} from "./chunk-LE3F7WIP.js";
+import {
+  useEditorState,
+  useIsomorphicLayoutEffect,
+  useReadOnly
+} from "./chunk-SSIRYUCK.js";
+import {
+  createPluginKey,
+  defineExtension,
+  getPluginState,
+  insertText,
+  setAttrs
+} from "./chunk-UPSLDTLT.js";
+import {
+  blockById
+} from "./chunk-62WKUAQY.js";
+
+// src/extensions/emoji/CalloutIconPicker.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/extensions/emoji/all-callouts.ts
+var allCallouts = (state, blockIds) => blockIds.length > 0 && blockIds.every((id) => blockById(state.doc, id)?.type === "CALLOUT");
+
+// src/extensions/emoji/composing-key.ts
+var isComposing = (event) => event.isComposing || event.keyCode === 229;
+
+// src/extensions/emoji/EmojiPicker.tsx
+import { useMemo, useRef as useRef2, useState as useState3 } from "react";
+
+// src/extensions/emoji/EmojiGrids.tsx
+import { forwardRef, memo, useId, useState } from "react";
+
+// src/extensions/emoji/emoji-name.ts
+var emojiName = ({ shortcodes, tags }) => shortcodes[0] ?? tags[0] ?? "";
+
+// src/extensions/emoji/grid-moves.ts
+var inRow = (rows, row, col) => ({ row, col: Math.min(col, rows[row] - 1) });
+var MOVES = {
+  ArrowRight: (rows, { row, col }) => {
+    if (col + 1 < rows[row]) return { row, col: col + 1 };
+    return row + 1 < rows.length ? { row: row + 1, col: 0 } : { row, col };
+  },
+  ArrowLeft: (rows, { row, col }) => {
+    if (col > 0) return { row, col: col - 1 };
+    return row > 0 ? { row: row - 1, col: rows[row - 1] - 1 } : { row, col };
+  },
+  ArrowDown: (rows, { row, col }) => inRow(rows, Math.min(row + 1, rows.length - 1), col),
+  ArrowUp: (rows, { row, col }) => inRow(rows, Math.max(row - 1, 0), col),
+  Home: (_, { row }, ctrl) => ctrl ? { row: 0, col: 0 } : { row, col: 0 },
+  End: (rows, { row }, ctrl) => {
+    const to = ctrl ? rows.length - 1 : row;
+    return { row: to, col: rows[to] - 1 };
+  }
+};
+function gridMove(rows, cell, key, ctrl = false) {
+  return Object.hasOwn(MOVES, key) ? MOVES[key](rows, cell, ctrl) : null;
+}
+
+// src/extensions/emoji/EmojiGrids.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CELL = cn(
+  "flex size-8 shrink-0 cursor-default items-center justify-center rounded-sm text-xl hover:bg-accent",
+  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 = memo(function EmojiRow2({ baseId, row, emoji, activeCol }) {
+  return /* @__PURE__ */ jsx("div", { role: "row", className: "flex", children: emoji.map((cell, col) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "gridcell",
+      id: cellId(baseId, row, col),
+      tabIndex: col === activeCol ? 0 : -1,
+      "aria-label": emojiName(cell),
+      "data-emoji": cell.emoji,
+      className: CELL,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: cell.emoji })
+    },
+    cell.emoji
+  )) });
+});
+var EmojiGrids = forwardRef(function EmojiGrids2({ layout, onPick }, ref) {
+  const baseId = useId();
+  const [active, setActive] = useState(null);
+  const current = (active === null ? void 0 : layout.places.get(active)) ?? FIRST;
+  const onKeyDown = (event) => {
+    if (isComposing(event.nativeEvent) || event.altKey || event.shiftKey || event.metaKey) return;
+    if (event.key === "Enter") {
+      const emoji = emojiAt(event.target);
+      if (emoji === null) return;
+      event.preventDefault();
+      onPick(emoji);
+      return;
+    }
+    const next = gridMove(layout.rowLengths, current, event.key, event.ctrlKey);
+    if (next === null) return;
+    event.preventDefault();
+    setActive(layout.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__ */ jsx("div", { ref, className: "max-h-72 overflow-y-auto", onKeyDown, onClick, onFocus, children: layout.sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { id: `${baseId}-${section.key}`, className: HEADING, children: section.label }),
+    /* @__PURE__ */ jsx("div", { role: "grid", "aria-labelledby": `${baseId}-${section.key}`, children: section.rows.map((emoji, index) => {
+      const row = section.firstRow + index;
+      return /* @__PURE__ */ jsx(
+        EmojiRow,
+        {
+          baseId,
+          row,
+          emoji,
+          activeCol: row === current.row ? current.col : null
+        },
+        row
+      );
+    }) })
+  ] }, section.key)) });
+});
+
+// src/extensions/emoji/picker-layout.ts
+var COLUMNS = 8;
+function inRows(emoji) {
+  const rows = [];
+  for (let start = 0; start < emoji.length; start += COLUMNS) rows.push(emoji.slice(start, start + COLUMNS));
+  return rows;
+}
+function grouped(found, labels) {
+  const byGroup = /* @__PURE__ */ new Map();
+  for (const emoji of found) {
+    const group = byGroup.get(emoji.group);
+    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) }));
+}
+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 };
+}
+
+// src/extensions/emoji/use-emoji-data.ts
+import { useEffect, useRef, useState as useState2 } from "react";
+
+// src/extensions/emoji/lazy-load.ts
+function lazyLoad(load) {
+  let pending = null;
+  let value = null;
+  return {
+    load() {
+      pending ??= new Promise((resolve) => resolve(load())).then(
+        (current) => {
+          value = { current };
+          return current;
+        },
+        (reason) => {
+          pending = null;
+          throw reason;
+        }
+      );
+      return pending;
+    },
+    loaded: () => value?.current
+  };
+}
+
+// src/extensions/emoji/emoji-data.ts
+var importEmojiData = () => import("./emoji-data.js").then(({ searchEmoji, emojiByShortcode, skinTones }) => ({
+  searchEmoji,
+  emojiByShortcode,
+  skinTones
+}));
+var emojiData = lazyLoad(importEmojiData);
+var loadEmojiData = () => emojiData.load();
+
+// src/extensions/emoji/use-emoji-data.ts
+function useEmojiData() {
+  const { onError } = useQuoin();
+  const report = useRef(onError);
+  useIsomorphicLayoutEffect(() => {
+    report.current = onError;
+  });
+  const [state, setState] = useState2(() => emojiData.loaded() ?? "loading");
+  useEffect(() => {
+    let current = true;
+    emojiData.load().then(
+      (data) => {
+        if (current) setState(data);
+      },
+      (reason) => {
+        if (!current) return;
+        setState("failed");
+        report.current(toError(reason));
+      }
+    );
+    return () => {
+      current = false;
+    };
+  }, []);
+  return state;
+}
+
+// src/extensions/emoji/EmojiPicker.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ACTIVE_CELL = '[role="gridcell"][tabindex="0"]';
+function EmojiPicker({ labels, onPick }) {
+  const data = useEmojiData();
+  const [query, setQuery] = useState3("");
+  const field = useRef2(null);
+  const grids = useRef2(null);
+  const searching = query.trim() !== "";
+  const layout = useMemo(
+    () => typeof data === "string" ? null : pickerLayout(data.searchEmoji(query), searching, labels),
+    [data, query, searching, labels]
+  );
+  const shown = layout !== null && layout.sections.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 onFieldKeyDown = (event) => {
+    if (isComposing(event.nativeEvent)) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusGrids();
+    } else if (event.key === "Enter" && searching && shown) {
+      event.preventDefault();
+      onPick(layout.rows[0][0].emoji);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", onKeyDown, children: [
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        ref: field,
+        className: "h-8",
+        "aria-label": labels.searchEmoji,
+        placeholder: labels.searchEmoji,
+        autoComplete: "off",
+        spellCheck: false,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: onFieldKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsx2("p", { role: "status", className: "px-1 text-sm text-muted-foreground empty:hidden", children: status }),
+    shown && /* @__PURE__ */ jsx2(EmojiGrids, { ref: grids, layout, onPick })
+  ] });
+}
+
+// src/extensions/emoji/icon-request.ts
+import { useCallback, useSyncExternalStore } from "react";
+var stores = /* @__PURE__ */ new WeakMap();
+function storeOf(controller) {
+  let store = stores.get(controller);
+  if (store === void 0) {
+    store = { request: null, listeners: /* @__PURE__ */ new Set() };
+    stores.set(controller, store);
+  }
+  return store;
+}
+function requestIcon(controller, request) {
+  const store = storeOf(controller);
+  if (store.request === request) return;
+  store.request = request;
+  for (const listener of [...store.listeners]) listener();
+}
+function useIconRequest(controller) {
+  const subscribe = useCallback(
+    (notify) => {
+      const { listeners } = storeOf(controller);
+      listeners.add(notify);
+      return () => void listeners.delete(notify);
+    },
+    [controller]
+  );
+  const read = useCallback(() => storeOf(controller).request, [controller]);
+  return useSyncExternalStore(subscribe, read, read);
+}
+
+// src/extensions/emoji/CalloutIconPicker.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CALLOUT_ICON = ".quoin-callout > :first-child";
+function CalloutIconPicker({ controller, labels }) {
+  const readOnly = useReadOnly(controller);
+  const request = useIconRequest(controller);
+  const there = useEditorState(
+    controller,
+    useCallback2((state) => request !== null && allCallouts(state, request.blocks), [request])
+  );
+  const shown = request !== null && there && !readOnly;
+  useEffect2(() => {
+    if (request !== null && !shown) requestIcon(controller, null);
+  }, [controller, request, shown]);
+  if (!shown) return null;
+  return /* @__PURE__ */ jsx3(IconPopover, { controller, labels, request }, request.blocks.join(" "));
+}
+function IconPopover({ controller, labels, request: { blocks } }) {
+  const anchor = usePartAnchor(controller, blocks[0], CALLOUT_ICON);
+  const content = useRef3(null);
+  const close = () => requestIcon(controller, null);
+  const finish = (icon) => {
+    close();
+    runOnBlocks(controller, blocks, icon === null ? noChange : setAttrs({ icon }));
+    controller.focus();
+  };
+  const ownerDocument = useCallback2(() => controller.root?.ownerDocument ?? document, [controller]);
+  useOutsidePress(content, ownerDocument, close);
+  return /* @__PURE__ */ jsxs3(
+    Popover,
+    {
+      open: true,
+      modal: false,
+      onOpenChange: (open) => {
+        if (!open) close();
+      },
+      children: [
+        /* @__PURE__ */ jsx3(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsx3(
+          PopoverContent,
+          {
+            ref: content,
+            "aria-label": labels.chooseIcon,
+            side: "bottom",
+            align: "start",
+            className: "w-80 p-2",
+            onCloseAutoFocus: preventDefault,
+            onEscapeKeyDown: (event) => {
+              event.preventDefault();
+              if (!isComposing(event)) finish(null);
+            },
+            ...bubblePart(controller),
+            children: /* @__PURE__ */ jsx3(EmojiPicker, { labels, onPick: finish })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/extensions/emoji/choose-icon-action.ts
+import { SmilePlus } from "lucide-react";
+function calloutsFor(state, blockIds) {
+  if (blockIds.length === 0 || !state.doc.index.has(blockIds[0])) return null;
+  const targets = styleTargets(state, blockIds[0]);
+  return allCallouts(state, targets) ? targets : null;
+}
+var chooseIconAction = (labels) => ({
+  id: "choose-icon",
+  label: labels.chooseIcon,
+  icon: SmilePlus,
+  available: (state, blockIds) => calloutsFor(state, blockIds) !== null,
+  run: (controller, blockIds) => {
+    const blocks = calloutsFor(controller.editor.state, blockIds);
+    if (blocks !== null) requestIcon(controller, { blocks });
+  }
+});
+
+// src/extensions/emoji/emoji-key.ts
+var emojiKey = createPluginKey("emoji");
+
+// src/extensions/emoji/emoji-labels.ts
+var englishEmojiLabels = {
+  emojiMenu: "Emoji",
+  loading: "Loading emoji\u2026",
+  loadFailed: "Emoji could not be loaded",
+  noMatches: "No emoji found",
+  chooseIcon: "Choose icon",
+  searchEmoji: "Search emoji",
+  searchResults: "Search results",
+  groups: {
+    smileys: "Smileys and emotion",
+    people: "People and body",
+    animals: "Animals and nature",
+    food: "Food and drink",
+    travel: "Travel and places",
+    activities: "Activities",
+    objects: "Objects",
+    symbols: "Symbols",
+    flags: "Flags"
+  }
+};
+function resolveEmojiLabels(overrides) {
+  const given = Object.entries(overrides ?? {}).filter(([, value]) => value !== void 0);
+  return given.length === 0 ? englishEmojiLabels : { ...englishEmojiLabels, ...Object.fromEntries(given) };
+}
+
+// src/extensions/emoji/EmojiMenu.tsx
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState4 } from "react";
+
+// src/extensions/emoji/emoji-source.ts
+function emojiSource(limit, onFailure) {
+  let failed = false;
+  return (query) => {
+    const data = emojiData.loaded();
+    if (data !== void 0) return data.searchEmoji(query, limit);
+    if (failed) return [];
+    return emojiData.load().then(
+      (loaded) => loaded.searchEmoji(query, limit),
+      (reason) => {
+        failed = true;
+        onFailure();
+        throw reason;
+      }
+    );
+  };
+}
+
+// src/extensions/emoji/EmojiMenu.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SHOWN = 8;
+var SHORTEST_QUERY = 2;
+var queryAt = (state) => getPluginState(state, emojiKey).active?.query ?? null;
+var emojiOf = ({ emoji }) => emoji;
+var renderEmoji = (emoji) => /* @__PURE__ */ jsxs4(Fragment, { children: [
+  /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", className: "text-base", children: emoji.emoji }),
+  /* @__PURE__ */ jsx4("span", { className: "truncate", children: emojiName(emoji) })
+] });
+function EmojiMenu({ controller, labels }) {
+  const readOnly = useReadOnly(controller);
+  const query = useEditorState(controller, queryAt);
+  if (readOnly || query === null || query.length < SHORTEST_QUERY) return null;
+  return /* @__PURE__ */ jsx4(EmojiMatches, { controller, labels });
+}
+function EmojiMatches({ controller, labels }) {
+  const [failed, setFailed] = useState4(false);
+  const source = useMemo2(() => emojiSource(SHOWN, () => setFailed(true)), []);
+  const choose = useCallback3(
+    (emoji, range) => void replaceTrigger(controller, range, insertText(emoji.emoji)),
+    [controller]
+  );
+  return /* @__PURE__ */ jsx4(
+    SuggestionMenu,
+    {
+      controller,
+      pluginKey: emojiKey,
+      items: source,
+      itemKey: emojiOf,
+      renderItem: renderEmoji,
+      onSelect: choose,
+      label: labels.emojiMenu,
+      emptyLabel: failed ? labels.loadFailed : labels.noMatches,
+      pendingLabel: labels.loading
+    }
+  );
+}
+
+// src/extensions/emoji/emoji-extension.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function emojiExtension(options = {}) {
+  const labels = resolveEmojiLabels(options.labels);
+  const Menu = ({ controller }) => /* @__PURE__ */ jsx5(EmojiMenu, { controller, labels });
+  const Picker = ({ controller }) => /* @__PURE__ */ jsx5(CalloutIconPicker, { controller, labels });
+  const ui = { blockMenuItems: [chooseIconAction(labels)], overlays: [Menu, Picker] };
+  return defineExtension({ name: "emoji", plugins: [suggestionPlugin(emojiKey, { char: ":" })], ui });
+}
+
+export {
+  loadEmojiData,
+  englishEmojiLabels,
+  emojiExtension
+};
+//# sourceMappingURL=chunk-RQW3P3GH.js.map