quoin-editor 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -32,8 +32,10 @@ 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,
@@ -102,12 +104,12 @@ function blockByType(definitions, type) {
   return void 0;
 }
 function paletteBlocks(definitions) {
-  const seen = /* @__PURE__ */ new Set();
+  const seen2 = /* @__PURE__ */ new Set();
   const out = [];
   for (let i = definitions.length - 1; i >= 0; i -= 1) {
     const d = definitions[i];
-    if (seen.has(d.type)) continue;
-    seen.add(d.type);
+    if (seen2.has(d.type)) continue;
+    seen2.add(d.type);
     if (d.inSlashPalette === false) continue;
     out.push(d);
   }
@@ -193,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" }),
@@ -1405,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);
@@ -1874,9 +1866,8 @@ function BlockEditor({
   onDone
 }) {
   const { blockTypes } = useQuoin();
-  const definition = blockByType(blockTypes, type);
-  if (!definition) return null;
-  const Editor = definition.editor;
+  const Editor = blockByType(blockTypes, type)?.editor;
+  if (!Editor) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Editor, { data, onChange, onInsertBlock, onDone });
 }
 
@@ -1925,6 +1916,15 @@ function sourceOffsetFor(source, probe) {
   return search(source, probe);
 }
 
+// src/dev-warn.ts
+var seen = /* @__PURE__ */ new Set();
+function devWarn(message) {
+  if (typeof process !== "undefined" && process?.env?.NODE_ENV === "production") return;
+  if (seen.has(message)) return;
+  seen.add(message);
+  console.warn(`Quoin: ${message}`);
+}
+
 // src/canvas/BlockCard.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, [role="button"], [tabindex], iframe';
@@ -1946,7 +1946,8 @@ function BlockCardImpl({
   const { blockTypes, onError } = useQuoin();
   const definition = blockByType(blockTypes, block.type);
   const Preview = definition?.preview;
-  const [editing, setEditing] = React8.useState(editingByDefault && !readOnly);
+  const editable = Boolean(definition?.editor) && !readOnly;
+  const [editing, setEditing] = React8.useState(editingByDefault && editable);
   const editButtonRef = React8.useRef(null);
   const editorContainerRef = React8.useRef(null);
   const returnFocusOnClose = React8.useRef(false);
@@ -2026,7 +2027,13 @@ function BlockCardImpl({
     reportedType.current = block.type;
     onError(new Error(`No block type is registered for "${block.type}".`));
   }, [definition, block.type, onError]);
-  if (definition?.alwaysEditing && !readOnly) {
+  React8.useEffect(() => {
+    if (!readOnly || !definition || definition.preview) return;
+    devWarn(
+      `the block type "${block.type}" has no \`preview\`, so a read-only canvas can draw only its label. Give its definition a \`preview\` to render the block itself.`
+    );
+  }, [readOnly, definition, block.type]);
+  if (definition?.alwaysEditing && editable) {
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       BlockEditor,
       {
@@ -2066,7 +2073,7 @@ function BlockCardImpl({
     );
   }
   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 });
+  if (!editable) 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)(
       "div",
@@ -2228,6 +2235,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;
@@ -2257,7 +2274,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",
@@ -2271,16 +2288,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",
@@ -2291,17 +2308,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
           }
@@ -2311,8 +2328,7 @@ function SortableBlock({
   );
 }
 
-// src/canvas/BlockCanvas.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+// src/canvas/unacknowledged.ts
 var UNACKNOWLEDGED_LIMIT = 64;
 function remember(outstanding, blocks) {
   outstanding.add(blocks);
@@ -2322,9 +2338,13 @@ function remember(outstanding, blocks) {
     outstanding.delete(oldest.value);
   }
 }
+
+// src/canvas/BlockCanvas.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Canvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes,
   readOnly,
   className,
@@ -2342,6 +2362,7 @@ 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]
@@ -2354,7 +2375,10 @@ function Canvas({
     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;
@@ -2376,7 +2400,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(() => {
@@ -2403,12 +2430,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,
@@ -2417,13 +2442,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,
@@ -2433,7 +2458,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,
@@ -2446,7 +2471,7 @@ function Canvas({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             BlockInserter,
             {
               index: i + 1,
@@ -2457,7 +2482,7 @@ function Canvas({
         ] }, b.id)) }) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       DocumentStarter,
       {
         autoFocus: list.blocks.length === 0,
@@ -2473,6 +2498,7 @@ function Canvas({
 function BlockCanvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes = coreBlocks,
   upload,
   resolveAssetUrl,
@@ -2486,11 +2512,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,
@@ -2502,6 +2529,9 @@ function BlockCanvas({
 
 // src/hooks/useAutosave.ts
 var React12 = __toESM(require("react"), 1);
+function reportedFailure(result) {
+  return typeof result === "object" && result !== null && "ok" in result && result.ok === false;
+}
 function useAutosave({
   deps,
   build,
@@ -2525,7 +2555,7 @@ function useAutosave({
         setStatus("saving");
         try {
           const res = await saveRef.current(buildRef.current());
-          if (res && res.ok === false) throw new Error("save rejected");
+          if (reportedFailure(res)) throw new Error("save rejected");
           retryRef.current = 0;
           dirtyRef.current = false;
           setStatus("saved");
@@ -2541,10 +2571,10 @@ function useAutosave({
   });
   const seenRef = React12.useRef(null);
   React12.useEffect(() => {
-    const seen = seenRef.current;
+    const seen2 = seenRef.current;
     seenRef.current = deps;
-    if (seen === null) return;
-    const unchanged = seen.length === deps.length && seen.every((v, i) => v === deps[i]);
+    if (seen2 === null) return;
+    const unchanged = seen2.length === deps.length && seen2.every((v, i) => v === deps[i]);
     if (!unchanged) dirtyRef.current = true;
   }, deps);
   React12.useEffect(() => {
@@ -2567,8 +2597,10 @@ function useAutosave({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlockCanvas,
+  FilePickerButton,
   QuoinProvider,
   TEXT_COMMANDS,
+  UploadField,
   applyEdit,
   blockByType,
   caretRect,