quoin-editor 0.1.0 → 0.2.0

package/dist/index.js

@@ -143,12 +143,7 @@ function Button({
 
 // src/upload/FilePickerButton.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-function FilePickerButton({
-  label,
-  accept,
-  disabled,
-  onPick
-}) {
+function FilePickerButton({ label, accept, disabled, onPick }) {
   return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex rounded-md has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50", children: [
     /* @__PURE__ */ jsx3(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: disabled ? "pointer-events-none opacity-50" : void 0, children: [
       /* @__PURE__ */ jsx3(Upload, { "aria-hidden": "true" }),
@@ -1117,7 +1112,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;
@@ -1363,12 +1361,7 @@ import { useEffect as useEffect2, useRef as useRef3 } from "react";
 // src/upload/UploadField.tsx
 import * as React6 from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "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);
@@ -1578,6 +1571,7 @@ function newBlockId() {
 
 // src/hooks/useBlockList.ts
 var removalSeq = 0;
+var UNDO_DEPTH = 20;
 function reducer(state, action) {
   switch (action.type) {
     case "insertAt": {
@@ -1596,6 +1590,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": {
@@ -1833,18 +1832,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 0;
+  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 search(source, probe);
 }
 
 // src/canvas/BlockCard.tsx
@@ -1865,14 +1894,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),
@@ -1916,8 +1945,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) {
@@ -1942,6 +1971,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__ */ jsx22(
       BlockEditor,
@@ -1981,7 +2016,7 @@ function BlockCardImpl({
       }
     );
   }
-  const rest = Preview ? /* @__PURE__ */ jsx22(Preview, { data: block.data, blockId: block.id }) : definition ? /* @__PURE__ */ jsx22("p", { className: "py-1 text-sm text-muted-foreground", children: definition.label }) : null;
+  const rest = Preview ? /* @__PURE__ */ jsx22(Preview, { data: block.data, blockId: block.id }) : /* @__PURE__ */ jsx22("p", { className: "py-1 text-sm text-muted-foreground", children: definition?.label ?? block.type });
   if (readOnly) return /* @__PURE__ */ jsx22("div", { children: rest });
   return /* @__PURE__ */ jsxs15("div", { className: "group/card relative", children: [
     /* @__PURE__ */ jsx22(
@@ -1991,7 +2026,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);
         },
@@ -2140,6 +2179,16 @@ function DocumentStarter({
   ] });
 }
 
+// src/canvas/ReadOnlyCanvas.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function ReadOnlyCanvas({
+  blocks,
+  onUpdate,
+  root
+}) {
+  return /* @__PURE__ */ jsx25("div", { ...root, children: /* @__PURE__ */ jsx25("ul", { className: "flex flex-col", children: blocks.map((b, i) => /* @__PURE__ */ jsx25("li", { children: /* @__PURE__ */ jsx25("div", { "data-block-index": i, className: "rounded-lg px-2 py-1", children: /* @__PURE__ */ jsx25(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;
@@ -2169,7 +2218,7 @@ function sameBlocks(a, b) {
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { GripVertical } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "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",
@@ -2192,7 +2241,7 @@ function SortableBlock({
       children: [
         /* @__PURE__ */ jsxs18("div", { className: GUTTER, children: [
           actions,
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               type: "button",
@@ -2203,17 +2252,17 @@ function SortableBlock({
               "aria-label": `Reorder block ${index + 1}`,
               ...attributes,
               ...listeners,
-              children: /* @__PURE__ */ jsx25(GripVertical, { "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx26(GripVertical, { "aria-hidden": "true" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "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
           }
@@ -2223,11 +2272,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
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function Canvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes,
   readOnly,
   className,
@@ -2245,22 +2306,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]);
@@ -2273,7 +2344,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(() => {
@@ -2300,12 +2374,10 @@ function Canvas({
     role: ariaLabel ? "group" : void 0,
     "aria-label": ariaLabel
   };
-  if (readOnly) {
-    return /* @__PURE__ */ jsx26("div", { ...rootProps, children: /* @__PURE__ */ jsx26("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ jsx26("li", { children: /* @__PURE__ */ jsx26("div", { "data-block-index": i, className: "rounded-lg px-2 py-1", children: /* @__PURE__ */ jsx26(BlockCard, { block: b, index: i, editingByDefault: false, readOnly: true, onUpdate: update }) }) }, b.id)) }) });
-  }
+  if (readOnly) return /* @__PURE__ */ jsx27(ReadOnlyCanvas, { blocks: list.blocks, onUpdate: update, root: rootProps });
   return /* @__PURE__ */ jsxs19("div", { ...rootProps, children: [
-    /* @__PURE__ */ jsx26(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start" }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start" }),
+    /* @__PURE__ */ jsx27(
       DndContext,
       {
         id: dndId,
@@ -2314,13 +2386,13 @@ function Canvas({
         modifiers: [restrictToVerticalAxis],
         accessibility: { announcements },
         onDragEnd: handleDragEnd,
-        children: /* @__PURE__ */ jsx26(SortableContext, { items: list.blocks.map((b) => b.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx26("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ jsxs19("li", { children: [
-          /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27(SortableContext, { items: list.blocks.map((b) => b.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx27("ul", { className: "flex flex-col", children: list.blocks.map((b, i) => /* @__PURE__ */ jsxs19("li", { children: [
+          /* @__PURE__ */ jsx27(
             SortableBlock,
             {
               id: b.id,
               index: i,
-              actions: /* @__PURE__ */ jsx26(
+              actions: /* @__PURE__ */ jsx27(
                 BlockActionsMenu,
                 {
                   index: i,
@@ -2330,7 +2402,7 @@ function Canvas({
                   onDelete: () => handleDelete(i, b.id)
                 }
               ),
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx27(
                 BlockCard,
                 {
                   block: b,
@@ -2343,7 +2415,7 @@ function Canvas({
               )
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             BlockInserter,
             {
               index: i + 1,
@@ -2354,7 +2426,7 @@ function Canvas({
         ] }, b.id)) }) })
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       DocumentStarter,
       {
         autoFocus: list.blocks.length === 0,
@@ -2370,6 +2442,7 @@ function Canvas({
 function BlockCanvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes = coreBlocks,
   upload,
   resolveAssetUrl,
@@ -2383,11 +2456,12 @@ function BlockCanvas({
     () => ({ blockTypes, upload, resolveAssetUrl, onError }),
     [blockTypes, upload, resolveAssetUrl, onError]
   );
-  return /* @__PURE__ */ jsx26(QuoinProvider, { value: config, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(QuoinProvider, { value: config, children: /* @__PURE__ */ jsx27(
     Canvas,
     {
       blocks,
       onChange,
+      onDelete,
       blockTypes,
       readOnly,
       className,
@@ -2463,15 +2537,29 @@ function useAutosave({
 }
 export {
   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.js.map