@portone/docx-editor 0.5.1 → 0.6.1

package/dist/styles.css

@@ -270,12 +270,15 @@
   margin-top: 2px;
 }
 
-button.docx-editor-comment-meta {
-  cursor: pointer;
+.docx-editor-comment-detached {
+  display: block;
+  margin-top: 2px;
+  color: #8a8a8a;
+  font-style: italic;
 }
 
-button.docx-editor-comment-meta:disabled {
-  cursor: default;
+button.docx-editor-comment-meta {
+  cursor: pointer;
 }
 
 .docx-editor-comment-body {
@@ -358,48 +361,82 @@ button.docx-editor-comment-body {
   cursor: help;
 }
 
-.docx-editor-notes {
+/*
+ * Notes drawn from their stories (`ui/notes`): footnotes over the paper at the foot of the page
+ * that refers to them, and notes listed after the last page. The editor hands both boxes the
+ * document's own text defaults, and the text is set as `prosemirror-view` sets an editor's, so a
+ * note wraps where it would in one.
+ */
+.docx-editor-note-areas {
+  position: absolute;
+  pointer-events: none;
+}
+
+.docx-editor-footnote-area {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+/* The endnotes after the last paragraph, drawn over the room the layout kept for them */
+.docx-editor-endnote-area {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.docx-editor-footnote-area,
+.docx-editor-endnote-area,
+.docx-editor-note-list {
   box-sizing: border-box;
+  color: #000000;
+  font-family: var(--docx-editor-font-family, sans-serif);
+  font-size: var(--docx-editor-font-size, 10pt);
+  line-height: var(--docx-editor-line-height, 1.3);
+  white-space: break-spaces;
+  word-wrap: break-word;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+}
+
+.docx-editor-note-list {
   margin: 16px auto 24px;
-  padding: 18px 24px;
-  border-top: 1px solid rgb(0 0 0 / 18%);
+  padding-block: 24px;
   background: #ffffff;
   box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
-  color: #242424;
 }
 
-.docx-editor-notes-heading {
-  margin: 0 0 10px;
-  font-size: 14px;
+/* A one-pixel rule across the middle of the height the layout keeps for it */
+.docx-editor-note-separator {
+  background:
+    linear-gradient(#000000, #000000) left center / 100% 1px no-repeat;
 }
 
-.docx-editor-notes-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
+/* Holds the margins of the paragraphs inside it, so a row measures as tall as it stands */
+.docx-editor-note-row {
+  display: flow-root;
 }
 
-.docx-editor-notes-list li {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 10px;
-  align-items: baseline;
+/*
+ * The note the caret is in.
+ *
+ * Neither the tint nor the ring around it takes any room, so the row measures the same height
+ * whether it is markup or the editing view, and the page keeps the room it already kept.
+ */
+.docx-editor-note-row-open {
+  border-radius: 2px;
+  background: rgb(49 93 168 / 7%);
+  box-shadow: 0 0 0 3px rgb(49 93 168 / 7%);
 }
 
-.docx-editor-note-label {
-  color: #315da8;
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
+/* The view one story is edited in. It sets its text from the box it is drawn in */
+.docx-editor-story-body {
+  outline: none;
 }
 
-.docx-editor-note-body {
-  margin: 0;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
+.docx-editor-note-mark {
+  font-size: 0.72em;
+  line-height: 0;
 }
 
 /* The fallback for browsers that do not know the two properties above (Safari) */
@@ -434,20 +471,43 @@ button.docx-editor-comment-body {
   background: transparent;
 }
 
+/*
+ * The reader's zoom scales the page layer with a transform and not with the `zoom`
+ * property, so the paper is laid out at its own size whatever it is being read at and only
+ * the painting is scaled. Under `zoom` Chromium lays every box out on whole device pixels
+ * of the scaled rendering, so a table row came out a fraction taller at one zoom than at
+ * another and a document sitting near a page boundary broke into a different number of
+ * pages for each reader.
+ *
+ * A transform leaves the layout box at its unscaled size, and a scroll box takes in both
+ * that box and the transformed one, so a shrunk layer left in the flow would keep the
+ * scroll area of a full-size one. The layer is therefore taken out of the flow, and this
+ * box stands in the flow in its place, holding the height the layer is drawn at
+ * (`ui/usePageRoom`).
+ */
+.docx-editor-page-box {
+  position: relative;
+  width: 100%;
+}
+
 /*
  * The paper and the boundary guides overlaid on it share one positioning origin.
  *
  * The side padding lives here rather than on the scroll box, because Chromium does not
  * draw a scroll box's own padding past the right edge of sideways-scrolled content.
  * Shrink-wrapping puts the padding beyond the paper even then, and min-width keeps the
- * layer filling the box on wide screens so the paper stays centered.
+ * layer filling the box on wide screens so the paper stays centered - widened by the
+ * reciprocal of the scale, since it is the scaled layer that has to fill the box.
  */
 .docx-editor-page-layer {
-  position: relative;
-  width: fit-content;
-  min-width: 100%;
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: max-content;
+  min-width: calc(100% / var(--docx-editor-zoom, 1));
   box-sizing: border-box;
   padding: 0 16px;
+  transform: scale(var(--docx-editor-zoom, 1));
+  transform-origin: 0 0;
 }
 
 @media (max-width: 840px) {

package/dist/ui/CommentsPanel.d.ts

@@ -1,7 +1,12 @@
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import { type ReactElement } from "react";
-import { type CommentAuthor } from "../editor/commands/commentCommands";
+import { type CommentAuthor, type DocumentComment } from "../editor/commands/commentCommands";
+/**
+ * Whether the rail beside the page carries this comment: the thread is unsettled, and the text it
+ * was written for is still there to draw it next to.
+ */
+export declare function shownBesideThePage(comment: DocumentComment): boolean;
 export interface CommentsPanelProps {
     view: EditorView;
     state: EditorState;

package/dist/ui/CommentsPanel.js

@@ -43,6 +43,19 @@ function run(view, command) {
 }
 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.";
+var DETACHED_LABEL = "Original content deleted";
+function shownBesideThePage(comment) {
+  return !comment.resolved && comment.anchored;
+}
+function CommentIdentity({
+  comment
+}) {
+  const date = shownDate(comment.date);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: editorClassNames.commentAuthor, children: comment.author ?? "Unknown author" }),
+    date && /* @__PURE__ */ jsx("span", { className: editorClassNames.commentDate, children: date })
+  ] });
+}
 function sameTarget(left, right) {
   return left?.commentId === right.commentId && left.replyId === right.replyId;
 }
@@ -74,7 +87,7 @@ function CommentsPanel({
       if (Number.isNaN(leftTime)) return 1;
       if (Number.isNaN(rightTime)) return -1;
       return rightTime - leftTime;
-    }) : comments.filter((comment) => !comment.resolved),
+    }) : comments.filter(shownBesideThePage),
     [allCommentsOpen, comments]
   );
   const { positions, canvasHeight } = useCommentRailLayout({
@@ -158,22 +171,26 @@ function CommentsPanel({
                   {
                     className: editorClassNames.commentPosition,
                     "data-resolved": comment.resolved ? "true" : void 0,
+                    "data-detached": comment.anchored ? void 0 : "true",
                     "data-comment-position": comment.id,
                     style: allCommentsOpen ? void 0 : { top: `${positions.get(comment.id) ?? 64}px` },
                     children: /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentCard, children: [
                       /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentHeader, children: [
-                        /* @__PURE__ */ jsxs(
+                        comment.anchored ? /* @__PURE__ */ jsx(
                           "button",
                           {
                             type: "button",
                             className: editorClassNames.commentMeta,
                             onClick: () => run(view, selectComment(comment.id)),
-                            disabled: comment.resolved,
-                            children: [
-                              /* @__PURE__ */ jsx("span", { className: editorClassNames.commentAuthor, children: comment.author ?? "Unknown author" }),
-                              shownDate(comment.date) && /* @__PURE__ */ jsx("span", { className: editorClassNames.commentDate, children: shownDate(comment.date) })
-                            ]
+                            children: /* @__PURE__ */ jsx(CommentIdentity, { comment })
                           }
+                        ) : (
+                          // Nothing on the page to go to, so the identity is text rather than a button:
+                          // a click here leaves the caret and the scroll where the reader left them
+                          /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentMeta, children: [
+                            /* @__PURE__ */ jsx(CommentIdentity, { comment }),
+                            /* @__PURE__ */ jsx("span", { className: editorClassNames.commentDetached, children: DETACHED_LABEL })
+                          ] })
                         ),
                         writer !== null && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
                           rootOwned && !comment.resolved && /* @__PURE__ */ jsx(
@@ -361,5 +378,6 @@ function CommentsPanel({
   );
 }
 export {
-  CommentsPanel
+  CommentsPanel,
+  shownBesideThePage
 };

package/dist/ui/InsertImageButton.d.ts

@@ -5,5 +5,7 @@ import { type ReactElement } from "react";
 export interface InsertImageButtonProps {
     view: EditorView;
     state: EditorState;
+    /** Turned off whatever the state says, which is what a surface taking no image sets */
+    disabled?: boolean;
 }
-export declare function InsertImageButton({ view, state, }: InsertImageButtonProps): ReactElement;
+export declare function InsertImageButton({ view, state, disabled, }: InsertImageButtonProps): ReactElement;

package/dist/ui/InsertImageButton.js

@@ -11,7 +11,8 @@ import { ToolbarButton } from "./ToolbarButton.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function InsertImageButton({
   view,
-  state
+  state,
+  disabled = false
 }) {
   const pickerRef = useRef(null);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -20,7 +21,7 @@ function InsertImageButton({
       {
         label: "Insert image",
         icon: Image,
-        disabled: !view.editable || !canInsertImage(state),
+        disabled: disabled || !view.editable || !canInsertImage(state),
         onRun: () => pickerRef.current?.click()
       }
     ),

package/dist/ui/TableMenu.d.ts

@@ -1,12 +1,15 @@
-/** Table context menu with an optional Unlock action for whole-cell locks. */
+/** Table context menu with footnote insertion and an optional Unlock action for whole-cell locks. */
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import { type ReactElement } from "react";
 import { type TableMenuAnchor } from "../editor/plugins/tableContextMenu";
+import type { SurfaceCapabilities } from "../editor/stories/storyView";
 export interface TableMenuProps {
     view: EditorView;
     state: EditorState;
     anchor: TableMenuAnchor;
+    /** What the surface holding the caret takes, which the entries that put something in ask */
+    takes: SurfaceCapabilities;
     allowLocking?: boolean;
 }
-export declare function TableMenu({ view, state, anchor, allowLocking, }: TableMenuProps): ReactElement;
+export declare function TableMenu({ view, state, anchor, takes, allowLocking, }: TableMenuProps): ReactElement;

package/dist/ui/TableMenu.js

@@ -16,6 +16,7 @@ import {
   mergeCells,
   splitCell
 } from "../table/index.js";
+import { noteItems } from "./noteItems.js";
 import { usePanelAtPoint } from "./panelPlacement.js";
 import { commandRunner } from "./runCommand.js";
 import { useDismiss } from "./useDismiss.js";
@@ -54,10 +55,21 @@ var UNLOCK_GROUP = {
   name: "lock",
   items: [{ label: "Unlock", command: unlockSelection }]
 };
+function noteGroup(takes) {
+  const notes = noteItems(takes);
+  return notes.length === 0 ? null : {
+    name: "note",
+    items: notes.map((note) => ({
+      label: note.label,
+      command: note.command
+    }))
+  };
+}
 function TableMenu({
   view,
   state,
   anchor,
+  takes,
   allowLocking = false
 }) {
   const box = useRef(null);
@@ -74,7 +86,12 @@ function TableMenu({
     run(command);
     close();
   };
-  const groups = allowLocking ? [...MENU_GROUPS, UNLOCK_GROUP] : MENU_GROUPS;
+  const note = noteGroup(takes);
+  const groups = [
+    ...MENU_GROUPS,
+    ...note === null ? [] : [note],
+    ...allowLocking ? [UNLOCK_GROUP] : []
+  ];
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/ui/TextMenu.d.ts

@@ -1,13 +1,16 @@
-/** Custom text context menu with clipboard, comment, and optional locking actions. */
+/** Custom text context menu with clipboard, comment, footnote, and optional locking actions. */
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import { type ReactElement } from "react";
 import { type TextMenuAnchor } from "../editor/plugins/textContextMenu";
+import type { SurfaceCapabilities } from "../editor/stories/storyView";
 export interface TextMenuProps {
     view: EditorView;
     state: EditorState;
     anchor: TextMenuAnchor;
+    /** What the surface holding the caret takes, which the entries that put something in ask */
+    takes: SurfaceCapabilities;
     /** Whether the entries that lock and unlock a stretch of text are offered */
     allowLocking?: boolean;
 }
-export declare function TextMenu({ view, state, anchor, allowLocking, }: TextMenuProps): ReactElement;
+export declare function TextMenu({ view, state, anchor, takes, allowLocking, }: TextMenuProps): ReactElement;

package/dist/ui/TextMenu.js

@@ -23,13 +23,14 @@ import {
 } from "../editor/plugins/textContextMenu.js";
 import { editsShut } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
+import { noteItems } from "./noteItems.js";
 import { usePanelAtPoint } from "./panelPlacement.js";
 import { commandRunner } from "./runCommand.js";
+import { modifierLabels } from "./shortcutLabels.js";
 import { ICON_SIZE } from "./ToolbarButton.js";
 import { useDismiss } from "./useDismiss.js";
 import { useMenuKeyboard } from "./useMenuKeyboard.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var MOD = typeof navigator !== "undefined" && navigator.platform.includes("Mac") ? "\u2318" : "Ctrl+";
 function clipboardCommand(view, command) {
   view.focus();
   document.execCommand(command);
@@ -95,6 +96,7 @@ function TextMenu({
   view,
   state,
   anchor,
+  takes,
   allowLocking = false
 }) {
   const box = useRef(null);
@@ -108,11 +110,12 @@ function TextMenu({
   const keys = useMenuKeyboard({ menu: box, onClose: close });
   const selected = !state.selection.empty;
   const shut = selectionTouchesLocked(state);
+  const { mod } = modifierLabels();
   const bodyOpen = !editsShut(state);
   const copy = {
     label: "Copy",
     icon: Copy,
-    hint: `${MOD}C`,
+    hint: `${mod}C`,
     enabled: selected,
     run: () => clipboardCommand(view, "copy")
   };
@@ -121,7 +124,7 @@ function TextMenu({
       {
         label: "Cut",
         icon: Scissors,
-        hint: `${MOD}X`,
+        hint: `${mod}X`,
         enabled: selected && !shut,
         run: () => clipboardCommand(view, "cut")
       },
@@ -129,7 +132,7 @@ function TextMenu({
       {
         label: "Paste",
         icon: ClipboardPaste,
-        hint: `${MOD}V`,
+        hint: `${mod}V`,
         enabled: !shut,
         run: () => {
           void pasteFromClipboard(view);
@@ -143,14 +146,26 @@ function TextMenu({
       }
     ] : [copy]
   ];
-  groups.push([
+  const anchored = [
     {
       label: "Add comment",
       icon: MessageSquarePlus,
       enabled: canAddComment(state),
       run: () => run(openCommentComposer)
     }
-  ]);
+  ];
+  if (bodyOpen) {
+    for (const note of noteItems(takes)) {
+      anchored.push({
+        label: note.label,
+        icon: note.icon,
+        hint: note.hint,
+        enabled: note.command(state),
+        run: () => run(note.command)
+      });
+    }
+  }
+  groups.push(anchored);
   if (allowLocking && bodyOpen) {
     groups.push([lockItem(selectionLock(state), run)]);
   }

package/dist/ui/Toolbar.d.ts

@@ -2,12 +2,27 @@
 import type { EditorState } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 import { type ReactElement } from "react";
+import type { ActiveSurface } from "../editor/stories/storyView";
 import type { FontFallbacks } from "../styles/fontStack";
 import type { DocxEditorPresets } from "./presets";
 import type { DocxEditorZoom } from "./zoom";
-export interface ToolbarProps {
+/** One editing surface the toolbar can act on: the document's own, or a story's */
+export interface ToolbarSurface {
     view: EditorView;
     state: EditorState;
+}
+export interface ToolbarProps {
+    /**
+     * The document itself, which undo and redo always read: a story edit is written into the
+     * document as one change, so the document's history is the one both surfaces share
+     * (`editor/stories`).
+     */
+    main: ToolbarSurface;
+    /**
+     * Where the caret is. Everything but undo and redo is asked of it and dispatched to it, so the
+     * formatting controls act on the note being edited rather than on the text behind it.
+     */
+    active: ActiveSurface;
     fontFallbacks?: FontFallbacks;
     /** Optional values offered by toolbar pickers. */
     presets?: DocxEditorPresets;
@@ -16,4 +31,4 @@ export interface ToolbarProps {
     zoom: DocxEditorZoom;
     onZoomChange: (zoom: DocxEditorZoom) => void;
 }
-export declare function Toolbar({ view, state, fontFallbacks, presets, onToggleComments, commentsOpen, zoom, onZoomChange, }: ToolbarProps): ReactElement;
+export declare function Toolbar({ main, active, fontFallbacks, presets, onToggleComments, commentsOpen, zoom, onZoomChange, }: ToolbarProps): ReactElement;

package/dist/ui/Toolbar.js

@@ -272,7 +272,11 @@ function ParagraphLayoutGroup({
     )
   ] });
 }
-function ListGroup({ state, run }) {
+function ListGroup({
+  state,
+  run,
+  disabled
+}) {
   const kind = activeListKind(state);
   return /* @__PURE__ */ jsx("div", { className: editorClassNames.toolbarGroup, children: LIST_TOGGLES.map((toggle) => /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -280,7 +284,7 @@ function ListGroup({ state, run }) {
       label: toggle.label,
       icon: toggle.icon,
       pressed: kind === toggle.kind,
-      disabled: !toggle.command(state),
+      disabled: disabled || !toggle.command(state),
       onRun: () => run(toggle.command)
     },
     toggle.kind
@@ -299,8 +303,8 @@ function IndentGroup({ state, run }) {
   )) });
 }
 function Toolbar({
-  view,
-  state,
+  main,
+  active,
   fontFallbacks,
   presets,
   onToggleComments,
@@ -308,7 +312,9 @@ function Toolbar({
   zoom,
   onZoomChange
 }) {
+  const { view, state, takes } = active;
   const run = commandRunner(view);
+  const runOnMain = commandRunner(main.view, view);
   const bar = useRef(null);
   const keys = useLinearWalk({
     container: bar,
@@ -340,7 +346,7 @@ function Toolbar({
       onKeyDown,
       ...hushedAttribute(hushed),
       children: [
-        /* @__PURE__ */ jsx(HistoryGroup, { state, run }),
+        /* @__PURE__ */ jsx(HistoryGroup, { state: main.state, run: runOnMain }),
         /* @__PURE__ */ jsx(ZoomSelect, { zoom, onZoomChange }),
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
@@ -394,7 +400,7 @@ function Toolbar({
           }
         ),
         /* @__PURE__ */ jsx(Separator, {}),
-        /* @__PURE__ */ jsx(ListGroup, { state, run }),
+        /* @__PURE__ */ jsx(ListGroup, { state, run, disabled: !takes.has("list") }),
         /* @__PURE__ */ jsx(IndentGroup, { state, run }),
         /* @__PURE__ */ jsx(Separator, {}),
         /* @__PURE__ */ jsx(
@@ -414,17 +420,24 @@ function Toolbar({
               label: "Insert table",
               icon: Table,
               panel: "dialog",
-              disabled: !canInsertTable(state),
+              disabled: !takes.has("table") || !canInsertTable(state),
               children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(TableSizePicker, { run, close, takeFocus })
             }
           ),
-          /* @__PURE__ */ jsx(InsertImageButton, { view, state }),
+          /* @__PURE__ */ jsx(
+            InsertImageButton,
+            {
+              view,
+              state,
+              disabled: !takes.has("image")
+            }
+          ),
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
               label: "Link",
               icon: Link,
-              disabled: !openLinkPanel(state),
+              disabled: !takes.has("link") || !openLinkPanel(state),
               onRun: () => run(openLinkPanel)
             }
           ),
@@ -434,7 +447,7 @@ function Toolbar({
               label: commentsOpen ? "Hide comments" : "Show comments",
               icon: MessagesSquare,
               pressed: commentsOpen,
-              disabled: !onToggleComments,
+              disabled: !takes.has("comment") || !onToggleComments,
               onRun: () => onToggleComments?.()
             }
           )

package/dist/ui/comments/useCommentRailLayout.js

@@ -1,6 +1,7 @@
 // src/ui/comments/useCommentRailLayout.ts
 import { useLayoutEffect, useRef, useState } from "react";
 import { editorClassNames } from "../../styles/classNames.js";
+import { visualScaleOf } from "../../styles/visualScale.js";
 var COMPOSER_POSITION = "composer";
 var VERTICAL_SCROLLBAR_CLEARANCE = 16;
 function estimatedCardHeight(comment) {
@@ -90,10 +91,7 @@ function useCommentRailLayout({
     const reserveCommentWidth = () => {
       if (!pageLayer) return;
       const drawnWidth = rail.getBoundingClientRect().width || rail.offsetWidth;
-      const computedZoom = Number.parseFloat(
-        frameWindow?.getComputedStyle(pageLayer).zoom ?? ""
-      );
-      const scale = Number.isFinite(computedZoom) && computedZoom > 0 ? computedZoom : 1;
+      const scale = visualScaleOf(pageLayer);
       pageLayer.style.paddingRight = `${(drawnWidth + 16 + VERTICAL_SCROLLBAR_CLEARANCE) / scale}px`;
     };
     const placeBesidePaper = () => {

package/dist/ui/noteItems.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The controls that put a note in, which every menu over the text draws its rows from.
+ *
+ * A right click is answered by one of two menus - the text menu, and the table menu wherever the
+ * click lands in a cell with nothing selected (`editor/plugins/textContextMenu`) - and a note goes
+ * into a table cell as readily as into a paragraph, so each row is written down once here. The
+ * command asked without a dispatch is what each menu draws a dead row from, and whether the rows
+ * are there at all is the surface's own declaration (`editor/stories/storyView`).
+ */
+import type { LucideIcon } from "lucide-react";
+import type { Command } from "prosemirror-state";
+import type { SurfaceCapabilities } from "../editor/stories/storyView";
+export interface NoteItem {
+    readonly label: string;
+    readonly icon: LucideIcon;
+    /** The shortcut for the same action, for a menu that labels its rows with theirs */
+    readonly hint: string;
+    readonly command: Command;
+}
+/** The rows a menu draws, and none for a surface that takes no note */
+export declare function noteItems(takes: SurfaceCapabilities): readonly NoteItem[];

package/dist/ui/noteItems.js

@@ -0,0 +1,30 @@
+// src/ui/noteItems.ts
+import { ListEnd, Superscript } from "lucide-react";
+import { insertEndnote, insertFootnote } from "../editor/commands/noteCommands.js";
+import { NOTE_KEYS } from "../editor/plugins/keymap.js";
+import { modifierLabels } from "./shortcutLabels.js";
+function keyLetter(binding) {
+  return (binding.split("-").at(-1) ?? "").toUpperCase();
+}
+var NO_ITEMS = [];
+function noteItems(takes) {
+  if (!takes.has("note")) return NO_ITEMS;
+  const { mod, alt } = modifierLabels();
+  return [
+    {
+      label: "Insert footnote",
+      icon: Superscript,
+      hint: `${mod}${alt}${keyLetter(NOTE_KEYS.footnote)}`,
+      command: insertFootnote
+    },
+    {
+      label: "Insert endnote",
+      icon: ListEnd,
+      hint: `${mod}${alt}${keyLetter(NOTE_KEYS.endnote)}`,
+      command: insertEndnote
+    }
+  ];
+}
+export {
+  noteItems
+};