quoin-editor 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -32,16 +32,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   BlockCanvas: () => BlockCanvas,
+  FilePickerButton: () => FilePickerButton,
   QuoinProvider: () => QuoinProvider,
   TEXT_COMMANDS: () => TEXT_COMMANDS,
+  UploadField: () => UploadField,
+  applyEdit: () => applyEdit,
   blockByType: () => blockByType,
+  caretRect: () => caretRect,
+  continueList: () => continueList,
   coreBlocks: () => coreBlocks,
   defineBlock: () => defineBlock,
+  formatShortcut: () => formatShortcut,
+  indentList: () => indentList,
+  insertCommand: () => insertCommand,
+  lineAt: () => lineAt,
+  linkPaste: () => linkPaste,
   paletteBlocks: () => paletteBlocks,
+  shouldOpenPalette: () => shouldOpenPalette,
+  toggleLinePrefix: () => toggleLinePrefix,
   useAutoGrow: () => useAutoGrow,
   useAutosave: () => useAutosave,
   useBlockList: () => useBlockList,
-  useQuoin: () => useQuoin
+  useMarkdownKeymap: () => useMarkdownKeymap,
+  useQuoin: () => useQuoin,
+  wrapSelection: () => wrapSelection
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -181,12 +195,7 @@ function Button({
 
 // src/upload/FilePickerButton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FilePickerButton({
-  label,
-  accept,
-  disabled,
-  onPick
-}) {
+function FilePickerButton({ label, accept, disabled, onPick }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "relative inline-flex rounded-md has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50", children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "aria-hidden": "true", className: disabled ? "pointer-events-none opacity-50" : void 0, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Upload, { "aria-hidden": "true" }),
@@ -1144,7 +1153,10 @@ function MarkdownBlockEditor({ data, onChange, onInsertBlock, onDone }) {
   const palette = useSlashPalette(ref);
   const [shortcutsOpen, setShortcutsOpen] = React5.useState(false);
   const set = (patch) => onChange({ ...data, ...patch });
-  const commit = (next) => onChange({ ...data, markdown: next });
+  const commit = React5.useCallback(
+    (next) => onChange({ ...data, markdown: next }),
+    [data, onChange]
+  );
   const keymap = useMarkdownKeymap({ commit, onOpenPalette: palette.openAtCaret });
   function reopenBox() {
     const el = ref.current;
@@ -1390,12 +1402,7 @@ var import_react = require("react");
 // src/upload/UploadField.tsx
 var React6 = __toESM(require("react"), 1);
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function UploadField({
-  category,
-  label,
-  accept,
-  onUploaded
-}) {
+function UploadField({ category, label, accept, onUploaded }) {
   const { upload, onError } = useQuoin();
   const [busy, setBusy] = React6.useState(false);
   const [error, setError] = React6.useState(null);
@@ -1605,6 +1612,7 @@ function newBlockId() {
 
 // src/hooks/useBlockList.ts
 var removalSeq = 0;
+var UNDO_DEPTH = 20;
 function reducer(state, action) {
   switch (action.type) {
     case "insertAt": {
@@ -1623,6 +1631,11 @@ function reducer(state, action) {
       if (index === -1) return state;
       const removals = new Map(state.removals);
       removals.set(action.token, { block: state.blocks[index], index });
+      while (removals.size > UNDO_DEPTH) {
+        const oldest = removals.keys().next();
+        if (oldest.done) break;
+        removals.delete(oldest.value);
+      }
       return { blocks: state.blocks.filter((b) => b.id !== action.id), removals };
     }
     case "undo": {
@@ -1860,18 +1873,48 @@ function BlockEditor({
 }
 
 // src/canvas/source-offset.ts
+function caretPositionAt(x, y) {
+  const doc = document;
+  const position = doc.caretPositionFromPoint?.(x, y);
+  if (position) return position;
+  const range = doc.caretRangeFromPoint?.(x, y);
+  return range ? { offsetNode: range.startContainer, offset: range.startOffset } : null;
+}
+function renderedOffsetAt(container, x, y) {
+  const position = caretPositionAt(x, y);
+  if (!position || position.offsetNode.nodeType !== Node.TEXT_NODE) return null;
+  if (!container.contains(position.offsetNode)) return null;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  let before = 0;
+  while (walker.nextNode()) {
+    if (walker.currentNode === position.offsetNode) return before + position.offset;
+    before += walker.currentNode.textContent?.length ?? 0;
+  }
+  return null;
+}
 var PROBE_LENGTHS = [40, 20, 8];
-function sourceOffsetFor(source, clickedText) {
-  const text = clickedText.replace(/\s+/g, " ").trim();
-  if (text === "") return 0;
-  const whole = source.indexOf(text);
-  if (whole !== -1) return whole;
+function search(source, probe) {
+  const literal = probe.clickedText.trim();
+  if (literal === "" || literal === probe.rendered.trim()) return source.length;
+  const candidates = [literal, literal.replace(/\s+/g, " ")];
+  for (const text of candidates) {
+    const whole = source.indexOf(text);
+    if (whole !== -1) return whole;
+  }
   for (const length of PROBE_LENGTHS) {
-    if (text.length < length) continue;
-    const at = source.indexOf(text.slice(0, length));
-    if (at !== -1) return at;
+    for (const text of candidates) {
+      if (text.length < length) continue;
+      const at = source.indexOf(text.slice(0, length));
+      if (at !== -1) return at;
+    }
+  }
+  return source.length;
+}
+function sourceOffsetFor(source, probe) {
+  if (probe.renderedOffset !== null && probe.rendered === source) {
+    return Math.max(0, Math.min(probe.renderedOffset, source.length));
   }
-  return 0;
+  return search(source, probe);
 }
 
 // src/canvas/BlockCard.tsx
@@ -1892,14 +1935,14 @@ function BlockCardImpl({
   onUpdate,
   onInsertBlock
 }) {
-  const { blockTypes } = useQuoin();
+  const { blockTypes, onError } = useQuoin();
   const definition = blockByType(blockTypes, block.type);
   const Preview = definition?.preview;
   const [editing, setEditing] = React8.useState(editingByDefault && !readOnly);
   const editButtonRef = React8.useRef(null);
   const editorContainerRef = React8.useRef(null);
   const returnFocusOnClose = React8.useRef(false);
-  const clickedTextRef = React8.useRef(null);
+  const clickedRef = React8.useRef(null);
   const scrollTopRef = React8.useRef(null);
   const handleInsertBlock = React8.useCallback(
     (type) => onInsertBlock?.(index + 1, type),
@@ -1943,8 +1986,8 @@ function BlockCardImpl({
       'textarea, input, [role="combobox"]'
     );
     if (!field) return;
-    const clicked = clickedTextRef.current;
-    clickedTextRef.current = null;
+    const clicked = clickedRef.current;
+    clickedRef.current = null;
     if (clicked === null || !(field instanceof HTMLTextAreaElement)) {
       field.focus();
       if (field instanceof HTMLTextAreaElement) {
@@ -1969,6 +2012,12 @@ function BlockCardImpl({
     returnFocusOnClose.current = false;
     editButtonRef.current?.focus();
   }, [editing]);
+  const reportedType = React8.useRef(null);
+  React8.useEffect(() => {
+    if (definition || reportedType.current === block.type) return;
+    reportedType.current = block.type;
+    onError(new Error(`No block type is registered for "${block.type}".`));
+  }, [definition, block.type, onError]);
   if (definition?.alwaysEditing && !readOnly) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BlockEditor,
@@ -2008,7 +2057,7 @@ function BlockCardImpl({
       }
     );
   }
-  const rest = Preview ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Preview, { data: block.data, blockId: block.id }) : definition ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "py-1 text-sm text-muted-foreground", children: definition.label }) : null;
+  const rest = Preview ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Preview, { data: block.data, blockId: block.id }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "py-1 text-sm text-muted-foreground", children: definition?.label ?? block.type });
   if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: rest });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "group/card relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2018,7 +2067,11 @@ function BlockCardImpl({
           const target = e.target;
           if (target.closest(INTERACTIVE_SELECTOR)) return;
           if (hasSelectionWithin(e.currentTarget)) return;
-          clickedTextRef.current = target.textContent ?? "";
+          clickedRef.current = {
+            rendered: e.currentTarget.textContent ?? "",
+            clickedText: target.textContent ?? "",
+            renderedOffset: renderedOffsetAt(e.currentTarget, e.clientX, e.clientY)
+          };
           scrollTopRef.current = (document.scrollingElement ?? document.documentElement).scrollTop;
           setEditing(true);
         },
@@ -2167,6 +2220,16 @@ function DocumentStarter({
   ] });
 }
 
+// src/canvas/ReadOnlyCanvas.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function ReadOnlyCanvas({
+  blocks,
+  onUpdate,
+  root
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...root, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { className: "flex flex-col", children: blocks.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "data-block-index": i, className: "rounded-lg px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BlockCard, { block: b, index: i, editingByDefault: false, readOnly: true, onUpdate }) }) }, b.id)) }) });
+}
+
 // src/canvas/reorder-indices.ts
 function reorderIndices(ids, activeId, overId) {
   if (overId === null || activeId === overId) return null;
@@ -2196,7 +2259,7 @@ function sameBlocks(a, b) {
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var GUTTER = [
   "flex items-center justify-end gap-0.5 pb-1",
   "lg:absolute lg:right-full lg:top-1 lg:justify-start lg:pb-0 lg:pr-1",
@@ -2210,16 +2273,16 @@ function SortableBlock({
   children
 }) {
   const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = (0, import_sortable.useSortable)({ id });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       ref: setNodeRef,
       style: { transform: import_utilities.CSS.Transform.toString(transform), transition },
       className: cn("group/block relative", isDragging && "z-10 opacity-80"),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: GUTTER, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: GUTTER, children: [
           actions,
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             Button,
             {
               type: "button",
@@ -2230,17 +2293,17 @@ function SortableBlock({
               "aria-label": `Reorder block ${index + 1}`,
               ...attributes,
               ...listeners,
-              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.GripVertical, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react12.GripVertical, { "aria-hidden": "true" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
           {
             "data-block-index": index,
             className: cn(
               "rounded-lg px-2 py-1 transition-colors",
-              isDragging ? "bg-card shadow-[var(--shadow-md)]" : "group-hover/block:bg-muted/40"
+              isDragging ? "bg-popover shadow-md" : "group-hover/block:bg-muted/40"
             ),
             children
           }
@@ -2250,11 +2313,23 @@ function SortableBlock({
   );
 }
 
+// src/canvas/unacknowledged.ts
+var UNACKNOWLEDGED_LIMIT = 64;
+function remember(outstanding, blocks) {
+  outstanding.add(blocks);
+  while (outstanding.size > UNACKNOWLEDGED_LIMIT) {
+    const oldest = outstanding.values().next();
+    if (oldest.done) return;
+    outstanding.delete(oldest.value);
+  }
+}
+
 // src/canvas/BlockCanvas.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Canvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes,
   readOnly,
   className,
@@ -2272,22 +2347,32 @@ function Canvas({
   const [seedSelection, setSeedSelection] = React11.useState(null);
   const listRef = React11.useRef(null);
   const pendingDeleteIndexRef = React11.useRef(null);
+  const removedRef = React11.useRef(null);
   const announcements = React11.useMemo(
     () => buildAnnouncements(list.blocks, blockTypes),
     [list.blocks, blockTypes]
   );
   const lastEmitted = React11.useRef(blocks);
   const lastSupplied = React11.useRef(blocks);
+  const unacknowledged = React11.useRef(/* @__PURE__ */ new Set());
   React11.useEffect(() => {
     if (list.blocks === lastEmitted.current) return;
     lastEmitted.current = list.blocks;
+    remember(unacknowledged.current, list.blocks);
     onChange(list.blocks);
-  }, [list.blocks, onChange]);
+    const removed = removedRef.current;
+    removedRef.current = null;
+    if (removed) onDelete?.(removed.block, removed.index);
+  }, [list.blocks, onChange, onDelete]);
   React11.useEffect(() => {
     const previous = lastSupplied.current;
     lastSupplied.current = blocks;
-    if (blocks === lastEmitted.current) return;
+    if (unacknowledged.current.has(blocks)) {
+      if (blocks === lastEmitted.current) unacknowledged.current.clear();
+      return;
+    }
     if (sameBlocks(blocks, previous) || sameBlocks(blocks, list.blocks)) return;
+    unacknowledged.current.clear();
     lastEmitted.current = blocks;
     reset(blocks);
   }, [blocks, reset]);
@@ -2300,7 +2385,10 @@ function Canvas({
     [insertAt, blockTypes]
   );
   function handleDelete(index, id2) {
+    const block = list.blocks[index];
     pendingDeleteIndexRef.current = index;
+    if (block) removedRef.current = { block, index };
+    setNewBlockId((current) => current === id2 ? null : current);
     remove(id2);
   }
   React11.useEffect(() => {
@@ -2327,12 +2415,10 @@ function Canvas({
     role: ariaLabel ? "group" : void 0,
     "aria-label": ariaLabel
   };
-  if (readOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { "data-block-index": i, className: "rounded-lg px-2 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BlockCard, { block: b, index: i, editingByDefault: false, readOnly: true, onUpdate: update }) }) }, b.id)) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ReadOnlyCanvas, { blocks: list.blocks, onUpdate: update, root: rootProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_core.DndContext,
       {
         id: dndId,
@@ -2341,13 +2427,13 @@ function Canvas({
         modifiers: [import_modifiers.restrictToVerticalAxis],
         accessibility: { announcements },
         onDragEnd: handleDragEnd,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_sortable2.SortableContext, { items: list.blocks.map((b) => b.id), strategy: import_sortable2.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_sortable2.SortableContext, { items: list.blocks.map((b) => b.id), strategy: import_sortable2.verticalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             SortableBlock,
             {
               id: b.id,
               index: i,
-              actions: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              actions: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 BlockActionsMenu,
                 {
                   index: i,
@@ -2357,7 +2443,7 @@ function Canvas({
                   onDelete: () => handleDelete(i, b.id)
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 BlockCard,
                 {
                   block: b,
@@ -2370,7 +2456,7 @@ function Canvas({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             BlockInserter,
             {
               index: i + 1,
@@ -2381,7 +2467,7 @@ function Canvas({
         ] }, b.id)) }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       DocumentStarter,
       {
         autoFocus: list.blocks.length === 0,
@@ -2397,6 +2483,7 @@ function Canvas({
 function BlockCanvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes = coreBlocks,
   upload,
   resolveAssetUrl,
@@ -2410,11 +2497,12 @@ function BlockCanvas({
     () => ({ blockTypes, upload, resolveAssetUrl, onError }),
     [blockTypes, upload, resolveAssetUrl, onError]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(QuoinProvider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(QuoinProvider, { value: config, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Canvas,
     {
       blocks,
       onChange,
+      onDelete,
       blockTypes,
       readOnly,
       className,
@@ -2491,15 +2579,29 @@ function useAutosave({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlockCanvas,
+  FilePickerButton,
   QuoinProvider,
   TEXT_COMMANDS,
+  UploadField,
+  applyEdit,
   blockByType,
+  caretRect,
+  continueList,
   coreBlocks,
   defineBlock,
+  formatShortcut,
+  indentList,
+  insertCommand,
+  lineAt,
+  linkPaste,
   paletteBlocks,
+  shouldOpenPalette,
+  toggleLinePrefix,
   useAutoGrow,
   useAutosave,
   useBlockList,
-  useQuoin
+  useMarkdownKeymap,
+  useQuoin,
+  wrapSelection
 });
 //# sourceMappingURL=index.cjs.map