@portone/docx-editor 0.4.0 → 0.5.1

package/dist/schema/stories.js

@@ -0,0 +1,78 @@
+// src/schema/stories.ts
+import { sameSource } from "./sourceEquality.js";
+var STORIES_ATTR = "stories";
+var STORY_KINDS = [
+  "comment",
+  "footnote",
+  "endnote",
+  "header",
+  "footer"
+];
+function storyKey(kind, id) {
+  return `${kind}:${id}`;
+}
+function asStoryKey(text) {
+  const at = text.indexOf(":");
+  if (at < 1) return null;
+  const named = text.slice(0, at);
+  const kind = STORY_KINDS.find((candidate) => candidate === named);
+  return kind === void 0 ? null : storyKey(kind, text.slice(at + 1));
+}
+function isStoryJson(value) {
+  return typeof value === "object" && value !== null && typeof Reflect.get(value, "type") === "string";
+}
+function storiesOf(doc) {
+  const held = doc.attrs[STORIES_ATTR];
+  if (typeof held !== "object" || held === null) return {};
+  const stories = {};
+  for (const [key, value] of Object.entries(held)) {
+    if (asStoryKey(key) !== null && isStoryJson(value)) stories[key] = value;
+  }
+  return stories;
+}
+var built = /* @__PURE__ */ new WeakMap();
+function storyNodeOf(doc, key) {
+  const json = storiesOf(doc)[key];
+  if (json === void 0) return null;
+  const cached = built.get(json);
+  if (cached) return cached;
+  const node = doc.type.schema.nodeFromJSON(json);
+  built.set(json, node);
+  return node;
+}
+var unkeyed = /* @__PURE__ */ new WeakMap();
+function withoutBlockKeys(node) {
+  if (node.isText) return node;
+  const cached = unkeyed.get(node);
+  if (cached) return cached;
+  const children = node.children.map(withoutBlockKeys);
+  const attrs = node.attrs.srcId === null || node.attrs.srcId === void 0 ? node.attrs : { ...node.attrs, srcId: null };
+  const stripped = attrs === node.attrs && children.every((child, at) => child === node.child(at)) ? node : node.type.create(attrs, children, node.marks);
+  unkeyed.set(node, stripped);
+  return stripped;
+}
+function sameStory(a, b) {
+  if (a === null || b === null) return a === b;
+  return sameSource(withoutBlockKeys(a), withoutBlockKeys(b));
+}
+function withoutCommentStories(doc) {
+  const stories = storiesOf(doc);
+  const kept = Object.fromEntries(
+    Object.entries(stories).filter(([key]) => !key.startsWith("comment:"))
+  );
+  if (Object.keys(kept).length === Object.keys(stories).length) return doc;
+  return doc.type.create(
+    { ...doc.attrs, [STORIES_ATTR]: kept },
+    doc.content,
+    doc.marks
+  );
+}
+export {
+  STORIES_ATTR,
+  asStoryKey,
+  sameStory,
+  storiesOf,
+  storyKey,
+  storyNodeOf,
+  withoutCommentStories
+};

package/dist/schema/wrappers.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The inline wrappers a stretch of content stands inside, as the schema records them.
+ *
+ * A wrapper is an element that holds inline content and goes back out around the same content:
+ * a content control (`w:sdt`), a hyperlink (`w:hyperlink`). Each is a mark of its own, so each
+ * keeps the `inclusive` rule and the attrs its kind needs, and all of them share the `wrapper`
+ * group, so a node's `marks:` whitelist names the group rather than every kind in it and a new
+ * kind arrives as one mark spec.
+ *
+ * The nesting is recorded on the marks themselves: `depth` counts from the outermost wrapper the
+ * file wrote inwards. The order of a mark set cannot carry it - `Mark.addToSet` keeps insertion
+ * order only among marks of different types, `parseDOM` rebuilds a set from the page, and two
+ * wrappers of one kind may stand one inside the other - so `depth` is the source of truth and
+ * `wrapperMarks` is the one place that reads the order off it.
+ *
+ * What each kind reads out of the file and writes back into it is `docx/wrappers`.
+ */
+import type { Mark, MarkType, Node as PMNode } from "prosemirror-model";
+/** The mark group every inline wrapper belongs to */
+export declare const WRAPPER_GROUP = "wrapper";
+/** What every wrapper mark spec carries besides the attrs of its own kind */
+export declare const WRAPPER_ATTRS: {
+    /** Outer-to-inner order as read from the file; equal depths fall back to declaration rank */
+    readonly depth: {
+        readonly default: 0;
+    };
+    /** Which occurrence this is in the opened document, so two wrappers written alike stay apart */
+    readonly key: {
+        readonly default: 0;
+    };
+};
+/** Whether marks of this type wrap the content they cover (`WRAPPER_GROUP`) */
+export declare function isWrapperType(type: MarkType): boolean;
+/**
+ * The wrappers this node stands inside, outermost first.
+ *
+ * Two wrappers written at the same depth - a control laid over a link during editing, say - fall
+ * back to the order the schema declares them in, which is the nesting the marks meant before
+ * `depth` existed.
+ */
+export declare function wrapperMarks(node: PMNode): readonly Mark[];
+/** Every wrapper of this kind the node stands inside, outermost first */
+export declare function wrappersOf(node: PMNode, kind: MarkType): readonly Mark[];
+/** The outermost wrapper of this kind the node stands inside. null where it stands in none */
+export declare function wrapperOf(node: PMNode, kind: MarkType): Mark | null;
+/**
+ * The depth of the innermost of these wrappers, and -1 where there is none, so that
+ * `innermostDepth(marks) + 1` is the depth a wrapper laid inside every one of them takes.
+ */
+export declare function innermostDepth(marks: readonly Mark[]): number;
+/**
+ * The wrappers all of these nodes stand inside alike, outermost first: the longest run of
+ * wrappers, from the outside in, that every one of them wears the very same one of.
+ *
+ * A wrapper laid across the whole stretch goes inside these and outside everything else, which is
+ * what keeps it one element in the file rather than one per stretch the nesting differs over.
+ */
+export declare function sharedWrappers(nodes: readonly PMNode[]): readonly Mark[];

package/dist/schema/wrappers.js

@@ -0,0 +1,77 @@
+// src/schema/wrappers.ts
+var WRAPPER_GROUP = "wrapper";
+var WRAPPER_ATTRS = {
+  /** Outer-to-inner order as read from the file; equal depths fall back to declaration rank */
+  depth: { default: 0 },
+  /** Which occurrence this is in the opened document, so two wrappers written alike stay apart */
+  key: { default: 0 }
+};
+var FACTS = /* @__PURE__ */ new WeakMap();
+var NO_WRAPPERS = [];
+function factsOf(type) {
+  const known = FACTS.get(type);
+  if (known) return known;
+  const facts = {
+    wrapper: (type.spec.group ?? "").split(" ").includes(WRAPPER_GROUP),
+    rank: Object.keys(type.schema.marks).indexOf(type.name)
+  };
+  FACTS.set(type, facts);
+  return facts;
+}
+function isWrapperType(type) {
+  return factsOf(type).wrapper;
+}
+function depthOf(mark) {
+  const depth = mark.attrs.depth;
+  return typeof depth === "number" ? depth : 0;
+}
+function wrapperMarks(node) {
+  const marks = node.marks;
+  let found = 0;
+  for (const mark of marks) {
+    if (factsOf(mark.type).wrapper) found += 1;
+  }
+  if (found === 0) return NO_WRAPPERS;
+  const wrappers = found === marks.length ? [...marks] : marks.filter((mark) => factsOf(mark.type).wrapper);
+  if (found < 2) return wrappers;
+  return wrappers.sort(
+    (a, b) => depthOf(a) - depthOf(b) || factsOf(a.type).rank - factsOf(b.type).rank
+  );
+}
+function wrappersOf(node, kind) {
+  return wrapperMarks(node).filter((mark) => mark.type === kind);
+}
+function wrapperOf(node, kind) {
+  return wrapperMarks(node).find((mark) => mark.type === kind) ?? null;
+}
+function innermostDepth(marks) {
+  return marks.reduce(
+    (deepest, mark) => factsOf(mark.type).wrapper ? Math.max(deepest, depthOf(mark)) : deepest,
+    -1
+  );
+}
+function sharedWrappers(nodes) {
+  const first = nodes.at(0);
+  if (first === void 0) return [];
+  let shared = wrapperMarks(first);
+  for (const node of nodes.slice(1)) {
+    const marks = wrapperMarks(node);
+    const differs = shared.findIndex((mark, index) => {
+      const beside = marks[index];
+      return beside === void 0 || !mark.eq(beside);
+    });
+    if (differs !== -1) shared = shared.slice(0, differs);
+    if (shared.length === 0) break;
+  }
+  return shared;
+}
+export {
+  WRAPPER_ATTRS,
+  WRAPPER_GROUP,
+  innermostDepth,
+  isWrapperType,
+  sharedWrappers,
+  wrapperMarks,
+  wrapperOf,
+  wrappersOf
+};

package/dist/styles/classNames.d.ts

@@ -46,13 +46,11 @@ export declare const editorClassNames: {
     readonly commentMarker: "docx-editor-comment-marker";
     /** A superscript footnote or endnote reference */
     readonly noteReference: "docx-editor-note-reference";
-    /** An invisible bookmark marker that occurs between body blocks */
-    readonly bookmarkBlock: "docx-editor-bookmark-block";
     readonly rawInline: "docx-editor-raw-inline";
+    /** A preserved child of a run, drawn by the `display` its policy gave it */
+    readonly rawRunContent: "docx-editor-raw-run";
+    /** A preserved block, drawn by the `display` its policy gave it */
     readonly rawBlock: "docx-editor-raw-block";
-    /** A preserved block that carries the original XML directly (inside a table cell, and so on) */
-    readonly rawXmlBlock: "docx-editor-raw-xml";
-    readonly tablePlaceholder: "docx-editor-table";
     /** The box holding both the paper and the marks overlaid on it */
     readonly pageLayer: "docx-editor-page-layer";
     /** All of the page marks drawn over the paper */

package/dist/styles/classNames.js

@@ -41,13 +41,11 @@ var editorClassNames = {
   commentMarker: `${PREFIX}-comment-marker`,
   /** A superscript footnote or endnote reference */
   noteReference: `${PREFIX}-note-reference`,
-  /** An invisible bookmark marker that occurs between body blocks */
-  bookmarkBlock: `${PREFIX}-bookmark-block`,
   rawInline: `${PREFIX}-raw-inline`,
+  /** A preserved child of a run, drawn by the `display` its policy gave it */
+  rawRunContent: `${PREFIX}-raw-run`,
+  /** A preserved block, drawn by the `display` its policy gave it */
   rawBlock: `${PREFIX}-raw-block`,
-  /** A preserved block that carries the original XML directly (inside a table cell, and so on) */
-  rawXmlBlock: `${PREFIX}-raw-xml`,
-  tablePlaceholder: `${PREFIX}-table`,
   /** The box holding both the paper and the marks overlaid on it */
   pageLayer: `${PREFIX}-page-layer`,
   /** All of the page marks drawn over the paper */

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,7 +674,10 @@ button.docx-editor-comment-body {
   border-top: 1px dotted rgb(26 79 208 / 40%);
 }
 
-/* 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;
@@ -928,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.
@@ -957,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;
@@ -978,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/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(