@portone/docx-editor 0.3.0 → 0.5.0

package/dist/styles.css

@@ -62,11 +62,6 @@
   overflow: hidden;
 }
 
-/* A body-level bookmark occupies a document-model position but draws no placeholder. */
-.docx-editor-bookmark-block {
-  display: none;
-}
-
 .docx-editor-comment-range {
   background: #fff2a8;
   box-shadow: inset 0 -2px #e2b714;
@@ -588,10 +583,12 @@ button.docx-editor-comment-body {
    * is the same paper `A4_PORTRAIT` names in `docx/pageGeometry.ts`.
    *
    * The height is used only as a minimum, so that even short text feels like a full
-   * sheet and longer text simply grows it.
-   * The body left inside these margins is the width of a new table and the height
-   * between page boundaries; `page/pageLayout.ts` works both out from the very same
-   * geometry, so the divider on screen lands where the sheet actually ends.
+   * sheet and longer text simply grows it, and the editor supplies one grown to the
+   * last page's own bottom margin where a later section's is deeper than this one's.
+   * The body left inside these margins is what the sheet itself is drawn at. The width
+   * of a new table and the height between two page boundaries come from the paper of
+   * the section they stand in, which `page/pageLayout.ts` works out from the very same
+   * kind of geometry, so the divider on screen lands where that page actually ends.
    */
   --docx-editor-page-width: 21cm;
   --docx-editor-page-height: 29.7cm;
@@ -677,23 +674,10 @@ button.docx-editor-comment-body {
   border-top: 1px dotted rgb(26 79 208 / 40%);
 }
 
-/* The page number. Laid on the top right corner of every page */
-.docx-editor-page-badge {
-  position: absolute;
-  right: 10px;
-  min-width: 18px;
-  padding: 0 6px;
-  border-radius: 9px;
-  background: rgb(0 0 0 / 6%);
-  color: #808080;
-  font-family: system-ui, sans-serif;
-  font-size: 10px;
-  line-height: 18px;
-  text-align: center;
-  letter-spacing: 0.02em;
-}
-
-/* Display-only projections of the first section's header and footer stories. */
+/*
+ * Display-only projections of the header and footer stories of the section each page
+ * belongs to (`page/PageGuides.tsx`).
+ */
 .docx-editor-page-header,
 .docx-editor-page-footer {
   position: absolute;
@@ -720,14 +704,28 @@ button.docx-editor-comment-body {
  * the space.
  * Because box-sizing is border-box, as long as the number fits inside the space it
  * does not push where the body starts.
+ *
+ * A level that asks for a space or for nothing after its number (w:suff) keeps no
+ * space at all, so both variables are set to zero and the body starts right after
+ * the number. Where the number sits inside the space is the level's w:lvlJc.
+ *
+ * The level dresses its number and nothing else (lvl/rPr), so its character
+ * formatting arrives as variables read here rather than as anything the paragraph
+ * wears. Where the level writes none, the number is drawn like the text it stands
+ * in front of.
  */
 .docx-editor-p[data-marker]::before {
   content: attr(data-marker);
   display: inline-block;
   box-sizing: border-box;
   min-width: var(--docx-editor-marker-width, 18pt);
-  padding-right: 4pt;
-  text-align: left;
+  padding-right: var(--docx-editor-marker-gap, 4pt);
+  text-align: var(--docx-editor-marker-align, left);
+  font-weight: var(--docx-editor-marker-font-weight, inherit);
+  font-style: var(--docx-editor-marker-font-style, inherit);
+  font-size: var(--docx-editor-marker-font-size, inherit);
+  font-family: var(--docx-editor-marker-font-family, inherit);
+  color: var(--docx-editor-marker-color, inherit);
   /* Keeps the paragraph's hanging indent (text-indent) from being inherited and shifting the number again inside its own box */
   text-indent: 0;
   user-select: none;
@@ -930,12 +928,21 @@ button.docx-editor-comment-body {
  * held as data rather than as an `href`, so a click here places the caret the way a click on any
  * other text does, and opening the address is the link panel's business.
  * A color the run itself carries paints over this one, the same as any other run formatting.
+ * The line is a border rather than an underline so that it runs on across a tab, which a text
+ * decoration is not painted over.
  */
 .docx-editor-link {
   color: #1a56db;
   border-bottom: 1px solid currentcolor;
 }
 
+/* A word processor underlines a link through the `Hyperlink` style, so the line above would be a second one */
+.docx-editor-link:has([data-underline]):not(
+  :has(.docx-editor-run:not([data-underline]))
+) {
+  border-bottom: none;
+}
+
 /*
  * A content control that says its contents may not be edited (`editor/plugins/lockedContent` refuses
  * the edits). Yellow is what the contract templates already paint their settled parts with.
@@ -959,15 +966,63 @@ button.docx-editor-comment-body {
   cursor: not-allowed;
 }
 
+/*
+ * A preserved fragment inside a paragraph or inside a run. What it draws is the `display` the
+ * preservation rule gave it (`docx/importPolicy`), so the rule is read here as an attribute
+ * rather than as a second list of element names.
+ */
+.docx-editor-raw-inline,
+.docx-editor-raw-run {
+  vertical-align: baseline;
+}
+
 /* Elements that, like bookmarks, must not be visible */
-.docx-editor-raw-inline {
+.docx-editor-raw-inline[data-display="hidden"],
+.docx-editor-raw-run[data-display="hidden"] {
   display: inline-block;
   width: 0;
   overflow: hidden;
+}
+
+/* A character the file stands for and the editor cannot type, drawn as itself */
+.docx-editor-raw-inline[data-display="text"],
+.docx-editor-raw-run[data-display="text"] {
+  white-space: pre;
+}
+
+/*
+ * Content carried through whole that the editor has no model for: a field, a tracked change, a
+ * symbol. Small enough to read the line around it, outlined so it is plainly not ordinary text.
+ *
+ * Deliberately not `user-select: none`. A chip that carries its content whole can be selected and
+ * deleted whole, and taking it out of the selection would leave a reader dragging across it with
+ * no way to reach it.
+ */
+.docx-editor-raw-inline[data-display="chip"],
+.docx-editor-raw-run[data-display="chip"] {
+  display: inline-block;
+  max-width: 16em;
+  overflow: hidden;
+  padding: 0 3px;
+  border: 1px dashed #9a9a9a;
+  border-radius: 3px;
+  background: #f2f2f2;
+  color: #595959;
+  font-size: 0.85em;
+  font-family: system-ui, sans-serif;
+  line-height: 1.4;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   vertical-align: baseline;
 }
 
-.docx-editor-table,
+/* The chip while it is the selection, which is how a reader sees what a delete would take */
+.docx-editor-raw-inline[data-display="chip"].ProseMirror-selectednode,
+.docx-editor-raw-run[data-display="chip"].ProseMirror-selectednode {
+  outline: 2px solid #1a73e8;
+  outline-offset: 1px;
+}
+
 .docx-editor-raw-block {
   margin: 8pt 0;
   padding: 10pt 12pt;
@@ -980,6 +1035,11 @@ button.docx-editor-comment-body {
   user-select: none;
 }
 
+/* A range marker holds a spot between blocks and stands for nothing on the page. */
+.docx-editor-raw-block[data-display="hidden"] {
+  display: none;
+}
+
 /*
  * The toolbar.
  *

package/dist/table/cellFormatting.js

@@ -38,8 +38,7 @@ function planChanges(rect, edit) {
     const next = editCellProps(
       text(cell.attrs.tcPr),
       edit(rect, pos),
-      cellDefaultsAt(rect.map, pos, sources),
-      sources.margins
+      cellDefaultsAt(rect.map, pos, sources)
     );
     if (!next) continue;
     changes.push({

package/dist/table/gridBorders.d.ts

@@ -1,11 +1,12 @@
 /**
- * The lines a cell draws because of where it sits in the grid.
+ * The lines and the fill a cell draws because of where it sits in the grid.
  *
  * Every line of a table is drawn by its cells (see `docx/tableFormatting`), so which line a side
- * falls back on depends on where in the grid the cell sits. A new cell inherits its neighbour's
- * formatting, which is what a background has to do but not a line: the row appended under the last
- * one would draw the table's outer line against the row above it, and deleting the last row would
- * leave the table with no line along its bottom.
+ * falls back on depends on where in the grid the cell sits, and so does which parts of the table
+ * style dress it. A new cell inherits its neighbour's formatting, which is what a background has to
+ * do but not a line: the row appended under the last one would draw the table's outer line against
+ * the row above it, and deleting the last row would leave the table with no line along its bottom.
+ * A row added under the header row is likewise no header row.
  *
  * So the cells of a table whose grid moved derive their display values again, along the same path
  * the import takes. What a cell wrote down itself lives in its `w:tcPr` and is read straight back
@@ -14,21 +15,16 @@
  * deriver that runs them after an edit is `editor/plugins/tableDisplay`.
  */
 import type { Node as PMNode } from "prosemirror-model";
-import { type CellBorderDefaults } from "../docx/tableFormatting";
-import { type CellMargins, type InsideBorders, type TableFormat } from "../model/format";
+import { type CellDefaults, type TableCellSources } from "../docx/tableFormatting";
 import type { NodeAttrs, TableGridMap } from "./format";
 /**
- * What a table lays down for its cells to draw.
+ * What this table lays down for its cells to draw.
  * The values a table style laid down are not in the `tblPr`, so the table carries them separately.
+ * A node never changes once it is built, so what is read out of one is read once.
  */
-export interface TableCellSources {
-    outer: TableFormat | null;
-    inside: InsideBorders;
-    margins: CellMargins;
-}
 export declare function tableCellSources(table: PMNode): TableCellSources;
-/** The lines the cell at this position falls back on for the sides it draws no border of its own on */
-export declare function cellDefaultsAt(map: TableGridMap, pos: number, sources: TableCellSources): CellBorderDefaults;
+/** What the cell at this position falls back on for everything it did not write down itself */
+export declare function cellDefaultsAt(map: TableGridMap, pos: number, sources: TableCellSources): CellDefaults;
 export interface CellFix {
     /** The position of the cell within the table's content */
     pos: number;

package/dist/table/gridBorders.js

@@ -1,30 +1,39 @@
 // src/table/gridBorders.ts
 import { TableMap } from "prosemirror-tables";
 import {
-  cellBorderDefaults,
+  cellDefaultsFor,
   cellMarginsOf,
-  gridEdgesOf,
   insideBordersOf,
   layerCellMargins,
   layerInsideBorders,
-  NO_BORDER_DEFAULTS,
+  NO_BAND_SIZES,
+  NO_CELL_DEFAULTS,
   NO_CELL_MARGINS,
   NO_INSIDE_BORDERS,
-  readCellProps
+  NO_TABLE_STYLE_CONDITIONS,
+  readCellProps,
+  readTableLook,
+  tblStyleIdOf
 } from "../docx/tableFormatting.js";
 import {
   spanCount,
+  toBandSizes,
   toCellFormat,
   toCellMargins,
   toInsideBorders,
-  toTableFormat
+  toTableFormat,
+  toTableStyleConditions
 } from "../model/format.js";
+import { parsePropsXml } from "../ooxml/props.js";
 function text(value) {
   return typeof value === "string" ? value : null;
 }
 function tableCellSources(table) {
+  const known = sourcesByTable.get(table);
+  if (known) return known;
   const tblPr = text(table.attrs.tblPr);
-  return {
+  const props = tblPr === null ? null : parsePropsXml(tblPr);
+  const sources = {
     outer: toTableFormat(table.attrs.format),
     inside: layerInsideBorders(
       toInsideBorders(table.attrs.styleInside) ?? NO_INSIDE_BORDERS,
@@ -33,14 +42,23 @@ function tableCellSources(table) {
     margins: layerCellMargins(
       toCellMargins(table.attrs.styleCellMargins) ?? NO_CELL_MARGINS,
       cellMarginsOf(tblPr)
-    )
+    ),
+    look: readTableLook(props),
+    bands: toBandSizes(table.attrs.styleBands) ?? NO_BAND_SIZES,
+    conditions: toTableStyleConditions(table.attrs.styleConditions) ?? NO_TABLE_STYLE_CONDITIONS,
+    // The style the paragraphs inside resolve against; what it lays down for the cells is already
+    // in `styleConditions`
+    styleId: tblStyleIdOf(props)
   };
+  sourcesByTable.set(table, sources);
+  return sources;
 }
+var sourcesByTable = /* @__PURE__ */ new WeakMap();
 function cellDefaultsAt(map, pos, sources) {
-  return cellBorderDefaults(
-    gridEdgesOf(map.findCell(pos), { rows: map.height, cols: map.width }),
-    sources.outer,
-    sources.inside
+  return cellDefaultsFor(
+    map.findCell(pos),
+    { rows: map.height, cols: map.width },
+    sources
   );
 }
 var CELL_FORMAT_KEYS = [
@@ -106,16 +124,12 @@ function cellFixes(table) {
     const cell = table.nodeAt(pos);
     if (!cell) continue;
     const tcPr = text(cell.attrs.tcPr);
-    const format = readCellProps(
-      tcPr,
-      cellDefaultsAt(map, pos, sources),
-      sources.margins
-    );
+    const format = readCellProps(tcPr, cellDefaultsAt(map, pos, sources));
     cells.set(pos, {
       pos,
       attrs: cell.attrs,
       format: { ...format },
-      direct: readCellProps(tcPr, NO_BORDER_DEFAULTS)
+      direct: readCellProps(tcPr, NO_CELL_DEFAULTS)
     });
   }
   reconcileSharedBorders(map, cells);
@@ -144,7 +158,7 @@ function sameCellFormattingInputs(a, b) {
   );
 }
 function sameFormattingInputs(a, b) {
-  return sameGrid(a, b) && a.attrs.tblPr === b.attrs.tblPr && a.attrs.format === b.attrs.format && a.attrs.styleInside === b.attrs.styleInside && a.attrs.styleCellMargins === b.attrs.styleCellMargins && sameCellFormattingInputs(a, b);
+  return sameGrid(a, b) && a.attrs.tblPr === b.attrs.tblPr && a.attrs.format === b.attrs.format && a.attrs.styleInside === b.attrs.styleInside && a.attrs.styleCellMargins === b.attrs.styleCellMargins && a.attrs.styleConditions === b.attrs.styleConditions && a.attrs.styleBands === b.attrs.styleBands && sameCellFormattingInputs(a, b);
 }
 export {
   cellDefaultsAt,

package/dist/table/resize.d.ts

@@ -29,7 +29,8 @@ export interface ColumnEdge {
 /**
  * The limit a table can be widened to (dxa).
  *
- * The body width of the paper the document names, minus the table indent (`w:tblInd`).
+ * The body width of the paper handed in, which is the section's the table stands in, minus
+ * the table indent (`w:tblInd`).
  * For a table already stored wider than that, its current width is the limit, so
  * dragging can only narrow it.
  */
@@ -49,7 +50,8 @@ export declare function resizedGridCols(gridCols: number[], col: number, width:
  * Because it is one single transaction, a single undo returns everything to the state
  * before the drag.
  *
- * The geometry is the paper the open document names, which is what the table is kept
- * inside. The editor layer reads it off the state; this layer is handed it.
+ * The geometry is the paper of the section the table stands in, which is what the table is
+ * kept inside. The editor layer reads it off the state (`editor/documentStyles`); this layer
+ * is handed it.
  */
 export declare function buildResizeColumnTransaction(state: EditorState, edge: ColumnEdge, geometry: PageGeometry): Transaction | null;

package/dist/ui/CommentsPanel.d.ts

@@ -5,11 +5,9 @@ import { type CommentAuthor } from "../editor/commands/commentCommands";
 export interface CommentsPanelProps {
     view: EditorView;
     state: EditorState;
-    composerOpen: boolean;
     /** Whose comments the composers write. Null for a reader, who is offered none */
     author: CommentAuthor | null;
-    closeComposer: () => void;
     scrollContainer: HTMLElement | null;
     allCommentsOpen: boolean;
 }
-export declare function CommentsPanel({ view, state, composerOpen, author, closeComposer, scrollContainer, allCommentsOpen, }: CommentsPanelProps): ReactElement;
+export declare function CommentsPanel({ view, state, author, scrollContainer, allCommentsOpen, }: CommentsPanelProps): ReactElement;

package/dist/ui/CommentsPanel.js

@@ -4,7 +4,6 @@ import { useMemo, useRef, useState } from "react";
 import {
   addComment,
   addCommentReply,
-  documentComments,
   removeComment,
   removeCommentReply,
   selectComment,
@@ -12,6 +11,11 @@ import {
   updateComment,
   updateCommentReply
 } from "../editor/commands/commentCommands.js";
+import {
+  closeCommentComposer,
+  commentComposerRange
+} from "../editor/plugins/commentComposer.js";
+import { commentProjection } from "../editor/plugins/commentDecorations.js";
 import { commentOwned } from "../schema/protection.js";
 import { protectionOf } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
@@ -37,19 +41,19 @@ function run(view, command) {
   if (applied) view.focus();
   return applied;
 }
+var REFUSED_COMMENT = "This comment could not be added. The text it was written for may have been changed or locked since.";
+var REFUSED_REPLY = "This reply could not be added. The comment it answers may have been changed or deleted since.";
 function sameTarget(left, right) {
   return left?.commentId === right.commentId && left.replyId === right.replyId;
 }
 function CommentsPanel({
   view,
   state,
-  composerOpen,
   author,
-  closeComposer,
   scrollContainer,
   allCommentsOpen
 }) {
-  const comments = useMemo(() => documentComments(state), [state.doc]);
+  const comments = commentProjection.read(state).comments;
   const rules = protectionOf(state);
   const writer = author != null && rules.protection !== "readOnly" ? author : null;
   const owned = (authorId) => writer !== null && commentOwned(rules, authorId);
@@ -57,7 +61,9 @@ function CommentsPanel({
   const [editing, setEditing] = useState(null);
   const [draft, setDraft] = useState("");
   const [replying, setReplying] = useState(null);
-  const composerSelectionPos = composerOpen ? state.selection.from : -1;
+  const composerRange = commentComposerRange(state);
+  const composerOpen = composerRange !== null;
+  const composerSelectionPos = composerRange?.from ?? -1;
   const visible = useMemo(
     () => allCommentsOpen ? [...comments].sort((left, right) => {
       const leftTime = Date.parse(left.date ?? "");
@@ -112,7 +118,7 @@ function CommentsPanel({
             className: editorClassNames.commentsCanvas,
             style: { height: allCommentsOpen ? void 0 : `${canvasHeight}px` },
             children: [
-              composerOpen && writer !== null && /* @__PURE__ */ jsx(
+              composerRange !== null && writer !== null && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: editorClassNames.commentPosition,
@@ -126,16 +132,19 @@ function CommentsPanel({
                       author: writer,
                       label: "Comment text",
                       submitLabel: "Comment",
-                      onClose: closeComposer,
+                      onClose: () => run(view, closeCommentComposer),
                       onSubmit: (text) => run(
                         view,
-                        addComment({
-                          text,
-                          author: writer.name,
-                          authorId: writer.id,
-                          initials: writer.initials
-                        })
-                      )
+                        addComment(
+                          {
+                            text,
+                            author: writer.name,
+                            authorId: writer.id,
+                            initials: writer.initials
+                          },
+                          composerRange
+                        )
+                      ) ? null : REFUSED_COMMENT
                     }
                   )
                 }
@@ -335,7 +344,7 @@ function CommentsPanel({
                               authorId: writer.id,
                               initials: writer.initials
                             })
-                          )
+                          ) ? null : REFUSED_REPLY
                         }
                       )
                     ] })

package/dist/ui/NotesPanel.js

@@ -1,12 +1,12 @@
 // src/ui/NotesPanel.tsx
-import { documentNotes } from "../editor/commands/noteQueries.js";
+import { noteProjection } from "../editor/commands/noteQueries.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function NotesPanel({
   state,
   pageWidth
 }) {
-  const notes = documentNotes(state);
+  const { notes } = noteProjection.read(state);
   if (notes.length === 0) return null;
   return /* @__PURE__ */ jsxs(
     "section",

package/dist/ui/TextMenu.d.ts

@@ -9,7 +9,5 @@ export interface TextMenuProps {
     anchor: TextMenuAnchor;
     /** Whether the entries that lock and unlock a stretch of text are offered */
     allowLocking?: boolean;
-    /** Opens the built-in composer for the selected text. */
-    onAddComment?: () => void;
 }
-export declare function TextMenu({ view, state, anchor, allowLocking, onAddComment, }: TextMenuProps): ReactElement;
+export declare function TextMenu({ view, state, anchor, allowLocking, }: TextMenuProps): ReactElement;

package/dist/ui/TextMenu.js

@@ -17,7 +17,7 @@ import {
   selectionTouchesLocked,
   unlockSelection
 } from "../editor/commands/lockCommands.js";
-import { insertClipboardData } from "../editor/externalClipboard.js";
+import { openCommentComposer } from "../editor/plugins/commentComposer.js";
 import {
   closeTextMenu
 } from "../editor/plugins/textContextMenu.js";
@@ -62,8 +62,13 @@ async function clipboardContent() {
 async function pasteFromClipboard(view) {
   const content = await clipboardContent();
   if (!content.html && !content.text) return;
+  const data = new DataTransfer();
+  if (content.html) data.setData("text/html", content.html);
+  if (content.text) data.setData("text/plain", content.text);
+  const event = new ClipboardEvent("paste", { clipboardData: data });
   view.focus();
-  insertClipboardData(view, content);
+  if (content.html && view.pasteHTML(content.html, event)) return;
+  if (content.text) view.pasteText(content.text, event);
 }
 function lockItem(lock, run) {
   const locking = {
@@ -90,8 +95,7 @@ function TextMenu({
   view,
   state,
   anchor,
-  allowLocking = false,
-  onAddComment
+  allowLocking = false
 }) {
   const box = useRef(null);
   const placement = usePanelAtPoint(box, anchor);
@@ -143,8 +147,8 @@ function TextMenu({
     {
       label: "Add comment",
       icon: MessageSquarePlus,
-      enabled: !!onAddComment && canAddComment(state),
-      run: () => onAddComment?.()
+      enabled: canAddComment(state),
+      run: () => run(openCommentComposer)
     }
   ]);
   if (allowLocking && bodyOpen) {

package/dist/ui/comments/CommentComposer.d.ts

@@ -10,7 +10,12 @@ export interface CommentComposerProps {
     author: CommentAuthor;
     label: string;
     submitLabel: string;
-    onSubmit: (text: string) => boolean;
+    /**
+     * Writes the comment, and answers why it was not written where it was not. The text stays in
+     * the form then, together with the reason, rather than the form standing there as if nothing
+     * had been asked of it.
+     */
+    onSubmit: (text: string) => string | null;
     onClose: () => void;
 }
 export declare function CommentComposer({ author, label, submitLabel, onSubmit, onClose, }: CommentComposerProps): ReactElement;

package/dist/ui/comments/CommentComposer.js

@@ -1,5 +1,6 @@
 // src/ui/comments/CommentComposer.tsx
 import {
+  useEffect,
   useLayoutEffect,
   useRef,
   useState
@@ -12,7 +13,15 @@ function FocusedTextarea({
   onChange
 }) {
   const input = useRef(null);
-  useLayoutEffect(() => input.current?.focus(), []);
+  useLayoutEffect(() => input.current?.focus({ preventScroll: true }), []);
+  useEffect(() => {
+    const field = input.current;
+    if (typeof field?.scrollIntoView !== "function") return;
+    const frame = requestAnimationFrame(() => {
+      field.scrollIntoView({ block: "nearest" });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, []);
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -32,13 +41,27 @@ function CommentComposer({
   onClose
 }) {
   const [text, setText] = useState("");
+  const [refused, setRefused] = useState(null);
   const submit = (event) => {
     event.preventDefault();
-    if (onSubmit(text)) onClose();
+    const reason = onSubmit(text);
+    setRefused(reason);
+    if (reason === null) onClose();
   };
   return /* @__PURE__ */ jsxs("form", { className: editorClassNames.commentComposer, onSubmit: submit, children: [
     /* @__PURE__ */ jsx("div", { className: editorClassNames.commentMeta, children: author.name }),
-    /* @__PURE__ */ jsx(FocusedTextarea, { label, value: text, onChange: setText }),
+    /* @__PURE__ */ jsx(
+      FocusedTextarea,
+      {
+        label,
+        value: text,
+        onChange: (next) => {
+          setRefused(null);
+          setText(next);
+        }
+      }
+    ),
+    refused !== null && /* @__PURE__ */ jsx("p", { className: editorClassNames.commentMeta, role: "alert", children: refused }),
     /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentActions, children: [
       /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, children: "Cancel" }),
       /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",

package/dist/editor/externalClipboard.d.ts

@@ -1,11 +0,0 @@
-import { Slice } from "prosemirror-model";
-import { type EditorState, Plugin } from "prosemirror-state";
-import type { EditorView } from "prosemirror-view";
-import type { ImageToInsert } from "./insertImage";
-export declare function richHtmlSlice(state: EditorState, document: Document, source: string, images?: ReadonlyMap<string, ImageToInsert>): Slice | null;
-export declare function insertRichHtml(view: EditorView, source: string): boolean;
-export declare function insertClipboardData(view: EditorView, data: {
-    html?: string;
-    text?: string;
-}): void;
-export declare function externalClipboard(): Plugin;