quoin-editor 0.1.1 → 0.2.0

package/dist/index.d.cts

@@ -102,6 +102,17 @@ type BlockCanvasProps = {
      */
     blocks: QuoinBlock[];
     onChange: (blocks: QuoinBlock[]) => void;
+    /**
+     * Called when a block is removed through its actions menu, with the block and the index it held.
+     * It runs just after the `onChange` that reports the document without it, so a host acting on the
+     * deletion is already looking at the new array. Restore the block by supplying a `blocks` array
+     * with it spliced back at that index, the same way any other document arrives.
+     *
+     * Restore it on a later tick or a later interaction, such as the click of an Undo toast. A
+     * restore applied synchronously inside this callback batches with the echo of the deletion, so
+     * what arrives is structurally equal to the document last supplied and is ignored.
+     */
+    onDelete?: (block: QuoinBlock, index: number) => void;
     /** Defaults to the five core block types. Pass `[...coreBlocks, yours]` to extend them. */
     blockTypes?: AnyBlockDefinition[];
     upload?: UploadFn;
@@ -116,11 +127,39 @@ type BlockCanvasProps = {
     'aria-label'?: string;
 };
 /** The editor: renders `blocks`, reports every edit through `onChange`, and accepts a new `blocks` array from outside at any time. */
-declare function BlockCanvas({ blocks, onChange, blockTypes, upload, resolveAssetUrl, onError, readOnly, className, id, 'aria-label': ariaLabel, }: BlockCanvasProps): React.JSX.Element;
+declare function BlockCanvas({ blocks, onChange, onDelete, blockTypes, upload, resolveAssetUrl, onError, readOnly, className, id, 'aria-label': ariaLabel, }: BlockCanvasProps): React.JSX.Element;
 
 /** The block types Quoin ships with. Spread them alongside your own definitions. */
 declare const coreBlocks: AnyBlockDefinition[];
 
+/** Props for `UploadField`; the upload function itself comes from the canvas, not from here. */
+type UploadFieldProps = {
+    /** Names what the file is for, and is passed to the host's `upload` as its second argument. */
+    category: string;
+    /** Labels the control for both the pointer and assistive technology. */
+    label: string;
+    /** An `accept` attribute for the file input, such as `'image/*'` or `'.pdf'`. */
+    accept?: string;
+    /** Called once the upload resolves. Throwing from it is reported through the canvas `onError`. */
+    onUploaded: (result: UploadResult) => void;
+};
+/** A file picker wired to the canvas `upload` function, with its own busy state and inline error. */
+declare function UploadField({ category, label, accept, onUploaded }: UploadFieldProps): React.JSX.Element;
+
+/** Props for `FilePickerButton`. */
+type FilePickerButtonProps = {
+    /** Labels the button and the file input behind it. */
+    label: string;
+    /** An `accept` attribute for the file input, such as `'image/*'` or `'.pdf'`. */
+    accept?: string;
+    /** Greys the button out and disables the input behind it. */
+    disabled?: boolean;
+    /** Called with the chosen file, and again if the same file is picked after a failure. */
+    onPick: (file: File) => void;
+};
+/** A button that opens the file picker and hands back the chosen file, performing no upload of its own. */
+declare function FilePickerButton({ label, accept, disabled, onPick }: FilePickerButtonProps): React.JSX.Element;
+
 /** The resolved canvas configuration every block editor reads through `useQuoin`. */
 type QuoinConfig = {
     blockTypes: AnyBlockDefinition[];
@@ -279,4 +318,4 @@ declare function useMarkdownKeymap({ commit, onOpenPalette, }: {
     onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
 };
 
-export { type AnyBlockDefinition, type AutosaveStatus, BlockCanvas, type BlockCanvasProps, type BlockDefinition, type BlockEditorProps, type BlockList, type BlockPreviewProps, type CaretRect, type Edit, type InsertableCommand, type LinePrefix, type QuoinBlock, type QuoinConfig, type QuoinConfigInput, QuoinProvider, TEXT_COMMANDS, type TextCommand, type UndoToken, type UploadFn, type UploadResult, type UseAutosaveInput, type UseAutosaveResult, type WrapKind, applyEdit, blockByType, caretRect, continueList, coreBlocks, defineBlock, formatShortcut, indentList, insertCommand, lineAt, linkPaste, paletteBlocks, shouldOpenPalette, toggleLinePrefix, useAutoGrow, useAutosave, useBlockList, useMarkdownKeymap, useQuoin, wrapSelection };
+export { type AnyBlockDefinition, type AutosaveStatus, BlockCanvas, type BlockCanvasProps, type BlockDefinition, type BlockEditorProps, type BlockList, type BlockPreviewProps, type CaretRect, type Edit, FilePickerButton, type FilePickerButtonProps, type InsertableCommand, type LinePrefix, type QuoinBlock, type QuoinConfig, type QuoinConfigInput, QuoinProvider, TEXT_COMMANDS, type TextCommand, type UndoToken, UploadField, type UploadFieldProps, type UploadFn, type UploadResult, type UseAutosaveInput, type UseAutosaveResult, type WrapKind, applyEdit, blockByType, caretRect, continueList, coreBlocks, defineBlock, formatShortcut, indentList, insertCommand, lineAt, linkPaste, paletteBlocks, shouldOpenPalette, toggleLinePrefix, useAutoGrow, useAutosave, useBlockList, useMarkdownKeymap, useQuoin, wrapSelection };

package/dist/index.d.ts

@@ -102,6 +102,17 @@ type BlockCanvasProps = {
      */
     blocks: QuoinBlock[];
     onChange: (blocks: QuoinBlock[]) => void;
+    /**
+     * Called when a block is removed through its actions menu, with the block and the index it held.
+     * It runs just after the `onChange` that reports the document without it, so a host acting on the
+     * deletion is already looking at the new array. Restore the block by supplying a `blocks` array
+     * with it spliced back at that index, the same way any other document arrives.
+     *
+     * Restore it on a later tick or a later interaction, such as the click of an Undo toast. A
+     * restore applied synchronously inside this callback batches with the echo of the deletion, so
+     * what arrives is structurally equal to the document last supplied and is ignored.
+     */
+    onDelete?: (block: QuoinBlock, index: number) => void;
     /** Defaults to the five core block types. Pass `[...coreBlocks, yours]` to extend them. */
     blockTypes?: AnyBlockDefinition[];
     upload?: UploadFn;
@@ -116,11 +127,39 @@ type BlockCanvasProps = {
     'aria-label'?: string;
 };
 /** The editor: renders `blocks`, reports every edit through `onChange`, and accepts a new `blocks` array from outside at any time. */
-declare function BlockCanvas({ blocks, onChange, blockTypes, upload, resolveAssetUrl, onError, readOnly, className, id, 'aria-label': ariaLabel, }: BlockCanvasProps): React.JSX.Element;
+declare function BlockCanvas({ blocks, onChange, onDelete, blockTypes, upload, resolveAssetUrl, onError, readOnly, className, id, 'aria-label': ariaLabel, }: BlockCanvasProps): React.JSX.Element;
 
 /** The block types Quoin ships with. Spread them alongside your own definitions. */
 declare const coreBlocks: AnyBlockDefinition[];
 
+/** Props for `UploadField`; the upload function itself comes from the canvas, not from here. */
+type UploadFieldProps = {
+    /** Names what the file is for, and is passed to the host's `upload` as its second argument. */
+    category: string;
+    /** Labels the control for both the pointer and assistive technology. */
+    label: string;
+    /** An `accept` attribute for the file input, such as `'image/*'` or `'.pdf'`. */
+    accept?: string;
+    /** Called once the upload resolves. Throwing from it is reported through the canvas `onError`. */
+    onUploaded: (result: UploadResult) => void;
+};
+/** A file picker wired to the canvas `upload` function, with its own busy state and inline error. */
+declare function UploadField({ category, label, accept, onUploaded }: UploadFieldProps): React.JSX.Element;
+
+/** Props for `FilePickerButton`. */
+type FilePickerButtonProps = {
+    /** Labels the button and the file input behind it. */
+    label: string;
+    /** An `accept` attribute for the file input, such as `'image/*'` or `'.pdf'`. */
+    accept?: string;
+    /** Greys the button out and disables the input behind it. */
+    disabled?: boolean;
+    /** Called with the chosen file, and again if the same file is picked after a failure. */
+    onPick: (file: File) => void;
+};
+/** A button that opens the file picker and hands back the chosen file, performing no upload of its own. */
+declare function FilePickerButton({ label, accept, disabled, onPick }: FilePickerButtonProps): React.JSX.Element;
+
 /** The resolved canvas configuration every block editor reads through `useQuoin`. */
 type QuoinConfig = {
     blockTypes: AnyBlockDefinition[];
@@ -279,4 +318,4 @@ declare function useMarkdownKeymap({ commit, onOpenPalette, }: {
     onPaste: (event: React.ClipboardEvent<HTMLTextAreaElement>) => void;
 };
 
-export { type AnyBlockDefinition, type AutosaveStatus, BlockCanvas, type BlockCanvasProps, type BlockDefinition, type BlockEditorProps, type BlockList, type BlockPreviewProps, type CaretRect, type Edit, type InsertableCommand, type LinePrefix, type QuoinBlock, type QuoinConfig, type QuoinConfigInput, QuoinProvider, TEXT_COMMANDS, type TextCommand, type UndoToken, type UploadFn, type UploadResult, type UseAutosaveInput, type UseAutosaveResult, type WrapKind, applyEdit, blockByType, caretRect, continueList, coreBlocks, defineBlock, formatShortcut, indentList, insertCommand, lineAt, linkPaste, paletteBlocks, shouldOpenPalette, toggleLinePrefix, useAutoGrow, useAutosave, useBlockList, useMarkdownKeymap, useQuoin, wrapSelection };
+export { type AnyBlockDefinition, type AutosaveStatus, BlockCanvas, type BlockCanvasProps, type BlockDefinition, type BlockEditorProps, type BlockList, type BlockPreviewProps, type CaretRect, type Edit, FilePickerButton, type FilePickerButtonProps, type InsertableCommand, type LinePrefix, type QuoinBlock, type QuoinConfig, type QuoinConfigInput, QuoinProvider, TEXT_COMMANDS, type TextCommand, type UndoToken, UploadField, type UploadFieldProps, type UploadFn, type UploadResult, type UseAutosaveInput, type UseAutosaveResult, type WrapKind, applyEdit, blockByType, caretRect, continueList, coreBlocks, defineBlock, formatShortcut, indentList, insertCommand, lineAt, linkPaste, paletteBlocks, shouldOpenPalette, toggleLinePrefix, useAutoGrow, useAutosave, useBlockList, useMarkdownKeymap, useQuoin, wrapSelection };

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" }),
@@ -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);
@@ -2189,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;
@@ -2218,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",
@@ -2241,7 +2241,7 @@ function SortableBlock({
       children: [
         /* @__PURE__ */ jsxs18("div", { className: GUTTER, children: [
           actions,
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               type: "button",
@@ -2252,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
           }
@@ -2272,8 +2272,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 +2282,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 +2306,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 +2319,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 +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(() => {
@@ -2364,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,
@@ -2378,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,
@@ -2394,7 +2402,7 @@ function Canvas({
                   onDelete: () => handleDelete(i, b.id)
                 }
               ),
-              children: /* @__PURE__ */ jsx26(
+              children: /* @__PURE__ */ jsx27(
                 BlockCard,
                 {
                   block: b,
@@ -2407,7 +2415,7 @@ function Canvas({
               )
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             BlockInserter,
             {
               index: i + 1,
@@ -2418,7 +2426,7 @@ function Canvas({
         ] }, b.id)) }) })
       }
     ),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       DocumentStarter,
       {
         autoFocus: list.blocks.length === 0,
@@ -2434,6 +2442,7 @@ function Canvas({
 function BlockCanvas({
   blocks,
   onChange,
+  onDelete,
   blockTypes = coreBlocks,
   upload,
   resolveAssetUrl,
@@ -2447,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,
@@ -2527,8 +2537,10 @@ function useAutosave({
 }
 export {
   BlockCanvas,
+  FilePickerButton,
   QuoinProvider,
   TEXT_COMMANDS,
+  UploadField,
   applyEdit,
   blockByType,
   caretRect,