@portone/docx-editor 0.1.0 → 0.2.0

package/dist/ui/CommentsPanel.js

@@ -12,6 +12,8 @@ import {
   updateComment,
   updateCommentReply
 } from "../editor/commands/commentCommands.js";
+import { commentOwned } from "../schema/protection.js";
+import { protectionOf } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { CommentComposer, FocusedTextarea } from "./comments/CommentComposer.js";
 import {
@@ -41,7 +43,6 @@ function sameTarget(left, right) {
 function CommentsPanel({
   view,
   state,
-  readOnly,
   composerOpen,
   author,
   closeComposer,
@@ -49,6 +50,9 @@ function CommentsPanel({
   allCommentsOpen
 }) {
   const comments = useMemo(() => documentComments(state), [state.doc]);
+  const rules = protectionOf(state);
+  const writer = author != null && rules.protection !== "readOnly" ? author : null;
+  const owned = (authorId) => writer !== null && commentOwned(rules, authorId);
   const panel = useRef(null);
   const [editing, setEditing] = useState(null);
   const [draft, setDraft] = useState("");
@@ -108,7 +112,7 @@ function CommentsPanel({
             className: editorClassNames.commentsCanvas,
             style: { height: allCommentsOpen ? void 0 : `${canvasHeight}px` },
             children: [
-              composerOpen && !readOnly && /* @__PURE__ */ jsx(
+              composerOpen && writer !== null && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: editorClassNames.commentPosition,
@@ -119,7 +123,7 @@ function CommentsPanel({
                   children: /* @__PURE__ */ jsx(
                     CommentComposer,
                     {
-                      author,
+                      author: writer,
                       label: "Comment text",
                       submitLabel: "Comment",
                       onClose: closeComposer,
@@ -127,8 +131,9 @@ function CommentsPanel({
                         view,
                         addComment({
                           text,
-                          author: author.name,
-                          initials: author.initials
+                          author: writer.name,
+                          authorId: writer.id,
+                          initials: writer.initials
                         })
                       )
                     }
@@ -137,7 +142,8 @@ function CommentsPanel({
               ),
               visible.map((comment) => {
                 const rootTarget = { commentId: comment.id, replyId: null };
-                const rootEditing = !readOnly && sameTarget(editing, rootTarget);
+                const rootOwned = owned(comment.authorId);
+                const rootEditing = rootOwned && sameTarget(editing, rootTarget);
                 return /* @__PURE__ */ jsx(
                   "article",
                   {
@@ -160,8 +166,8 @@ function CommentsPanel({
                             ]
                           }
                         ),
-                        !readOnly && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
-                          !comment.resolved && /* @__PURE__ */ jsx(
+                        writer !== null && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
+                          rootOwned && !comment.resolved && /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
@@ -190,7 +196,7 @@ function CommentsPanel({
                               children: comment.resolved ? /* @__PURE__ */ jsx(RotateCcw, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
                             }
                           ),
-                          !comment.resolved && /* @__PURE__ */ jsx(
+                          rootOwned && !comment.resolved && /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
@@ -209,7 +215,7 @@ function CommentsPanel({
                           value: draft,
                           onChange: setDraft
                         }
-                      ) : readOnly || comment.resolved ? /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: comment.text }) : /* @__PURE__ */ jsx(
+                      ) : writer === null || comment.resolved ? /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: comment.text }) : /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
@@ -222,7 +228,7 @@ function CommentsPanel({
                           children: comment.text
                         }
                       ),
-                      !readOnly && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: rootEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentActions, children: [
                         /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setEditing(null), children: "Cancel" }),
                         /* @__PURE__ */ jsx(
                           "button",
@@ -234,13 +240,14 @@ function CommentsPanel({
                             children: "Save"
                           }
                         )
-                      ] }) : null }),
+                      ] }),
                       comment.replies.map((reply) => {
                         const target = {
                           commentId: comment.id,
                           replyId: reply.id
                         };
-                        const isEditing = !readOnly && sameTarget(editing, target);
+                        const replyOwned = owned(reply.authorId);
+                        const isEditing = replyOwned && sameTarget(editing, target);
                         return /* @__PURE__ */ jsxs(
                           "div",
                           {
@@ -258,7 +265,7 @@ function CommentsPanel({
                                   onChange: setDraft
                                 }
                               ) : /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: reply.text }),
-                              !readOnly && !comment.resolved && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              replyOwned && !comment.resolved && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
                                 /* @__PURE__ */ jsx(
                                   "button",
                                   {
@@ -313,10 +320,10 @@ function CommentsPanel({
                           reply.id
                         );
                       }),
-                      replying === comment.id && !readOnly && !comment.resolved && /* @__PURE__ */ jsx(
+                      replying === comment.id && writer !== null && !comment.resolved && /* @__PURE__ */ jsx(
                         CommentComposer,
                         {
-                          author,
+                          author: writer,
                           label: "Reply text",
                           submitLabel: "Reply",
                           onClose: () => setReplying(null),
@@ -324,8 +331,9 @@ function CommentsPanel({
                             view,
                             addCommentReply(comment.id, {
                               text,
-                              author: author.name,
-                              initials: author.initials
+                              author: writer.name,
+                              authorId: writer.id,
+                              initials: writer.initials
                             })
                           )
                         }

package/dist/ui/FontFamilySelect.js

@@ -3,7 +3,10 @@ import {
   setFontFamily
 } from "../editor/commands/formattingCommands.js";
 import { editorClassNames } from "../styles/classNames.js";
-import { withFontFallback } from "../styles/fontStack.js";
+import {
+  comparableFontName,
+  withFontFallback
+} from "../styles/fontStack.js";
 import { DEFAULT_FONTS } from "../styles/fonts.js";
 import { Tooltip } from "./Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,11 +14,21 @@ var LABEL = "Font";
 var CLEAR = ";default";
 var MIXED = "";
 function optionNames(current, fonts, documentFonts) {
-  const names = [...fonts, ...documentFonts];
-  if (current.kind !== "mixed" && !names.includes(current.name)) {
-    names.push(current.name);
+  const names = [
+    ...fonts,
+    ...documentFonts,
+    ...current.kind === "mixed" ? [] : [current.name]
+  ];
+  const byComparable = /* @__PURE__ */ new Map();
+  for (const name of names) {
+    const comparable = comparableFontName(name);
+    if (!byComparable.has(comparable)) byComparable.set(comparable, name);
   }
-  return Array.from(new Set(names));
+  return Array.from(byComparable.values());
+}
+function selectedValue(options, name) {
+  const comparable = comparableFontName(name);
+  return options.find((option) => comparableFontName(option) === comparable) ?? name;
 }
 function FontFamilySelect({
   current,
@@ -25,7 +38,8 @@ function FontFamilySelect({
   disabled,
   run
 }) {
-  const value = current.kind === "mixed" ? MIXED : current.name;
+  const options = optionNames(current, fonts, documentFonts);
+  const value = current.kind === "mixed" ? MIXED : selectedValue(options, current.name);
   return /* @__PURE__ */ jsx(Tooltip, { label: LABEL, children: /* @__PURE__ */ jsxs(
     "select",
     {
@@ -41,7 +55,7 @@ function FontFamilySelect({
       children: [
         current.kind === "mixed" && /* @__PURE__ */ jsx("option", { value: MIXED }),
         /* @__PURE__ */ jsx("option", { value: CLEAR, children: "Default" }),
-        optionNames(current, fonts, documentFonts).map((name) => /* @__PURE__ */ jsx(
+        options.map((name) => /* @__PURE__ */ jsx(
           "option",
           {
             value: name,

package/dist/ui/LinkCard.d.ts

@@ -7,6 +7,5 @@ export interface LinkCardProps {
     view: EditorView;
     state: EditorState;
     link: ActiveLinkSpan;
-    readOnly?: boolean;
 }
-export declare function LinkCard({ view, state, link, readOnly, }: LinkCardProps): ReactElement | null;
+export declare function LinkCard({ view, state, link, }: LinkCardProps): ReactElement | null;

package/dist/ui/LinkCard.js

@@ -49,8 +49,7 @@ function useEscape(onEscape) {
 function LinkCard({
   view,
   state,
-  link,
-  readOnly = false
+  link
 }) {
   const box = useRef(null);
   const [hidden, setHidden] = useState(false);
@@ -94,7 +93,7 @@ function LinkCard({
             children: /* @__PURE__ */ jsx(ExternalLink, { size: ICON_SIZE, "aria-hidden": "true" })
           }
         ),
-        !readOnly && openLinkPanel(state) && /* @__PURE__ */ jsx(
+        openLinkPanel(state) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -106,7 +105,7 @@ function LinkCard({
             children: /* @__PURE__ */ jsx(Pencil, { size: ICON_SIZE, "aria-hidden": "true" })
           }
         ),
-        !readOnly && removeLink(state) && /* @__PURE__ */ jsx(
+        removeLink(state) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

package/dist/ui/TextMenu.js

@@ -21,6 +21,7 @@ import { insertClipboardData } from "../editor/externalClipboard.js";
 import {
   closeTextMenu
 } from "../editor/plugins/textContextMenu.js";
+import { editsShut } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { usePanelAtPoint } from "./panelPlacement.js";
 import { commandRunner } from "./runCommand.js";
@@ -103,8 +104,16 @@ function TextMenu({
   const keys = useMenuKeyboard({ menu: box, onClose: close });
   const selected = !state.selection.empty;
   const shut = selectionTouchesLocked(state);
+  const bodyOpen = !editsShut(state);
+  const copy = {
+    label: "Copy",
+    icon: Copy,
+    hint: `${MOD}C`,
+    enabled: selected,
+    run: () => clipboardCommand(view, "copy")
+  };
   const groups = [
-    [
+    bodyOpen ? [
       {
         label: "Cut",
         icon: Scissors,
@@ -112,13 +121,7 @@ function TextMenu({
         enabled: selected && !shut,
         run: () => clipboardCommand(view, "cut")
       },
-      {
-        label: "Copy",
-        icon: Copy,
-        hint: `${MOD}C`,
-        enabled: selected,
-        run: () => clipboardCommand(view, "copy")
-      },
+      copy,
       {
         label: "Paste",
         icon: ClipboardPaste,
@@ -134,7 +137,7 @@ function TextMenu({
         enabled: selected && !shut,
         run: () => run(deleteSelection)
       }
-    ]
+    ] : [copy]
   ];
   groups.push([
     {
@@ -144,7 +147,9 @@ function TextMenu({
       run: () => onAddComment?.()
     }
   ]);
-  if (allowLocking) groups.push([lockItem(selectionLock(state), run)]);
+  if (allowLocking && bodyOpen) {
+    groups.push([lockItem(selectionLock(state), run)]);
+  }
   const choose = (item) => {
     if (!item.enabled) return;
     item.run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",
@@ -79,7 +79,7 @@
     "@playwright/test": "^1.62.1",
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "@vitejs/plugin-react": "^6.0.5",
     "esbuild": "^0.28.1",
     "jsdom": "^30.0.1",