quoin-editor 0.1.1 → 0.3.0

package/dist/index.js

@@ -52,12 +52,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);
   }
@@ -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" }),
@@ -1366,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);
@@ -1835,9 +1825,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__ */ jsx21(Editor, { data, onChange, onInsertBlock, onDone });
 }
 
@@ -1886,6 +1875,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
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var INTERACTIVE_SELECTOR = 'a, button, input, textarea, select, [role="button"], [tabindex], iframe';
@@ -1907,7 +1905,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);
@@ -1987,7 +1986,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__ */ jsx22(
       BlockEditor,
       {
@@ -2027,7 +2032,7 @@ function BlockCardImpl({
     );
   }
   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 });
+  if (!editable) return /* @__PURE__ */ jsx22("div", { children: rest });
   return /* @__PURE__ */ jsxs15("div", { className: "group/card relative", children: [
     /* @__PURE__ */ jsx22(
       "div",
@@ -2189,6 +2194,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;
@@ -2218,7 +2233,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",
@@ -2241,7 +2256,7 @@ function SortableBlock({
       children: [
         /* @__PURE__ */ jsxs18("div", { className: GUTTER, children: [
           actions,
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               type: "button",
@@ -2252,17 +2267,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
           }
@@ -2272,8 +2287,7 @@ function SortableBlock({
   );
 }
 
-// src/canvas/BlockCanvas.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+// src/canvas/unacknowledged.ts
 var UNACKNOWLEDGED_LIMIT = 64;
 function remember(outstanding, blocks) {
   outstanding.add(blocks);
@@ -2283,9 +2297,13 @@ function remember(outstanding, blocks) {
     outstanding.delete(oldest.value);
   }
 }
+
+// src/canvas/BlockCanvas.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function Canvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes,
   readOnly,
   className,
@@ -2303,6 +2321,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]
@@ -2315,7 +2334,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;
@@ -2337,7 +2359,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(() => {
@@ -2364,12 +2389,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,
@@ -2378,13 +2401,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,
@@ -2394,7 +2417,7 @@ function Canvas({
                   onDelete: () => handleDelete(i, b.id)
                 }
               ),
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx27(
                 BlockCard,
                 {
                   block: b,
@@ -2407,7 +2430,7 @@ function Canvas({
               )
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             BlockInserter,
             {
               index: i + 1,
@@ -2418,7 +2441,7 @@ function Canvas({
         ] }, b.id)) }) })
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       DocumentStarter,
       {
         autoFocus: list.blocks.length === 0,
@@ -2434,6 +2457,7 @@ function Canvas({
 function BlockCanvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes = coreBlocks,
   upload,
   resolveAssetUrl,
@@ -2447,11 +2471,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,6 +2488,9 @@ function BlockCanvas({
 
 // src/hooks/useAutosave.ts
 import * as React12 from "react";
+function reportedFailure(result) {
+  return typeof result === "object" && result !== null && "ok" in result && result.ok === false;
+}
 function useAutosave({
   deps,
   build,
@@ -2486,7 +2514,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");
@@ -2502,10 +2530,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(() => {
@@ -2527,8 +2555,10 @@ function useAutosave({
 }
 export {
   BlockCanvas,
+  FilePickerButton,
   QuoinProvider,
   TEXT_COMMANDS,
+  UploadField,
   applyEdit,
   blockByType,
   caretRect,