@portone/docx-editor 0.4.0 → 0.5.0

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.4.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,22 +0,0 @@
-import { Slice } from "prosemirror-model";
-import { type EditorState, Plugin, type Transaction } from "prosemirror-state";
-import type { EditorView } from "prosemirror-view";
-import { type NewLists } from "../numbering/listRegistry";
-import type { ImageToInsert } from "./insertImage";
-/** What a paste puts in: the content, and the definitions of the lists it started */
-export interface PastedContent {
-    slice: Slice;
-    newLists: NewLists;
-}
-export declare function richHtmlSlice(state: EditorState, document: Document, source: string, images?: ReadonlyMap<string, ImageToInsert>): PastedContent | null;
-/**
- * The transaction a paste is put in with: the content, and the definitions of the lists it started
- * recorded on the document node so that the export writes them out and undo takes them back.
- */
-export declare function withPastedContent(tr: Transaction, content: PastedContent): Transaction;
-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;