@portone/docx-editor 0.6.0 → 0.6.1

package/dist/schema/preservedGuards.js

@@ -137,14 +137,6 @@ var preservedGuard = {
     return shut;
   }
 };
-function isNoteReference(node) {
-  return node.type.name === "noteReference";
-}
-var noteGuard = preservedNodeGuard(
-  "note",
-  isNoteReference,
-  (node) => JSON.stringify(node.attrs)
-);
 function endsASection(node) {
   if (node.type.name !== "paragraph") return false;
   const pPr = node.attrs.pPr;
@@ -174,7 +166,6 @@ var sectionGuard = {
   }
 };
 export {
-  noteGuard,
   preservedGuard,
   preservedNodeGuard,
   sectionGuard

package/dist/schema/stories.d.ts

@@ -7,9 +7,23 @@
  * the key, the value on the node, and the two comparisons the protection rules are written over.
  */
 import type { Node as PMNode } from "prosemirror-model";
-export type StoryKind = "comment" | "footnote" | "endnote" | "header" | "footer";
+/** Which of the two notes parts a note stands in */
+export declare const NOTE_KINDS: readonly ["footnote", "endnote"];
+export type NoteKind = (typeof NOTE_KINDS)[number];
+/** The two kinds of story a header or footer part holds, one story to a part */
+export declare const HEADER_FOOTER_KINDS: readonly ["header", "footer"];
+export type HeaderFooterKind = (typeof HEADER_FOOTER_KINDS)[number];
+export declare const STORY_KINDS: readonly ["comment", "footnote", "endnote", "header", "footer"];
+export type StoryKind = (typeof STORY_KINDS)[number];
 /** `comment:4`, `footnote:2`, `header:word/header1.xml` */
 export type StoryKey = `${StoryKind}:${string}`;
+/**
+ * What a reader listening to the page is told a note reference is.
+ *
+ * A reference whose own mark follows it in the document draws no label of the editor's
+ * (§17.11.14), so it is named by its kind alone rather than by a number that is not there.
+ */
+export declare function noteName(kind: NoteKind, label: string): string;
 /** One story as the document node holds it, which is `Node.toJSON` of a document of this schema */
 export interface StoryJson {
     readonly type: string;
@@ -18,7 +32,25 @@ export interface StoryJson {
 }
 /** The attr the stories stand on, named here so the schema and the readers cannot spell it apart */
 export declare const STORIES_ATTR = "stories";
-export declare function storyKey(kind: StoryKind, id: string): StoryKey;
+export declare function storyKey<K extends StoryKind>(kind: K, id: string): `${K}:${string}`;
+/** The key of a story that is a note: `footnote:2`, `endnote:3` */
+export type NoteKey = `${NoteKind}:${string}`;
+/**
+ * The note this key names, and null for a key naming a story of another kind.
+ *
+ * A note's id never carries a colon - a note is identified by a whole number (§17.11.2, §17.11.8)
+ * - so the kind is everything up to the first one.
+ */
+export declare function noteKeyOf(key: StoryKey): {
+    readonly kind: NoteKind;
+    readonly id: string;
+} | null;
+/**
+ * The kinds of note an edit may add, delete, copy and rewrite, which is both of them: each part is
+ * written back one entry per note (`docx/notes/writing`). The lifecycle, the clipboard and the
+ * navigation all read this one list, so a kind of note added to the format joins it once.
+ */
+export declare const EDITABLE_NOTE_KINDS: readonly NoteKind[];
 /**
  * The key this text spells, or null for one that names no kind of story.
  *

package/dist/schema/stories.js

@@ -1,16 +1,27 @@
 // src/schema/stories.ts
 import { sameSource } from "./sourceEquality.js";
-var STORIES_ATTR = "stories";
+var NOTE_KINDS = ["footnote", "endnote"];
+var HEADER_FOOTER_KINDS = ["header", "footer"];
 var STORY_KINDS = [
   "comment",
-  "footnote",
-  "endnote",
-  "header",
-  "footer"
+  ...NOTE_KINDS,
+  ...HEADER_FOOTER_KINDS
 ];
+function noteName(kind, label) {
+  const named = kind === "endnote" ? "Endnote" : "Footnote";
+  return label === "" ? named : `${named} ${label}`;
+}
+var STORIES_ATTR = "stories";
 function storyKey(kind, id) {
   return `${kind}:${id}`;
 }
+function noteKeyOf(key) {
+  const at = key.indexOf(":");
+  const named = key.slice(0, at);
+  const kind = NOTE_KINDS.find((candidate) => candidate === named);
+  return kind === void 0 ? null : { kind, id: key.slice(at + 1) };
+}
+var EDITABLE_NOTE_KINDS = NOTE_KINDS;
 function asStoryKey(text) {
   const at = text.indexOf(":");
   if (at < 1) return null;
@@ -68,8 +79,14 @@ function withoutCommentStories(doc) {
   );
 }
 export {
+  EDITABLE_NOTE_KINDS,
+  HEADER_FOOTER_KINDS,
+  NOTE_KINDS,
   STORIES_ATTR,
+  STORY_KINDS,
   asStoryKey,
+  noteKeyOf,
+  noteName,
   sameStory,
   storiesOf,
   storyKey,

package/dist/styles/classNames.d.ts

@@ -51,7 +51,9 @@ export declare const editorClassNames: {
     readonly rawRunContent: "docx-editor-raw-run";
     /** A preserved block, drawn by the `display` its policy gave it */
     readonly rawBlock: "docx-editor-raw-block";
-    /** The box holding both the paper and the marks overlaid on it */
+    /** The room the scaled page layer takes up in the scroll box */
+    readonly pageBox: "docx-editor-page-box";
+    /** The box holding both the paper and the marks overlaid on it, scaled to the reader's zoom */
     readonly pageLayer: "docx-editor-page-layer";
     /** All of the page marks drawn over the paper */
     readonly pageGuides: "docx-editor-page-guides";
@@ -148,11 +150,24 @@ export declare const editorClassNames: {
     readonly commentIconActions: "docx-editor-comment-icon-actions";
     readonly commentComposer: "docx-editor-comment-composer";
     readonly commentInput: "docx-editor-comment-input";
-    readonly notesPanel: "docx-editor-notes";
-    readonly notesHeading: "docx-editor-notes-heading";
-    readonly notesList: "docx-editor-notes-list";
-    readonly noteLabel: "docx-editor-note-label";
-    readonly noteBody: "docx-editor-note-body";
+    /** Everything drawn over the paper in the room the pages keep for notes, which only its areas take the mouse in */
+    readonly noteAreas: "docx-editor-note-areas";
+    /** The footnotes at the foot of one page: a short rule, then each footnote */
+    readonly footnoteArea: "docx-editor-footnote-area";
+    /** The endnotes drawn after the last paragraph, one box per page they run onto */
+    readonly endnoteArea: "docx-editor-endnote-area";
+    /** The short rule that sets notes apart from the text above them */
+    readonly noteSeparator: "docx-editor-note-separator";
+    /** One note, drawn from its story */
+    readonly noteRow: "docx-editor-note-row";
+    /** Attached alongside it while the caret is in that note and an editing view stands over it */
+    readonly noteRowOpen: "docx-editor-note-row-open";
+    /** The editing view one side story is edited in (`editor/stories`) */
+    readonly storyBody: "docx-editor-story-body";
+    /** A note's own reference mark, drawn as the label its reference carries */
+    readonly noteMark: "docx-editor-note-mark";
+    /** The notes listed after the last page */
+    readonly noteList: "docx-editor-note-list";
     /** The panel drawn in place of the editor when a document was refused and the consumer wrote no panel of its own */
     readonly rejection: "docx-editor-rejection";
     readonly rejectionTitle: "docx-editor-rejection-title";

package/dist/styles/classNames.js

@@ -46,7 +46,9 @@ var editorClassNames = {
   rawRunContent: `${PREFIX}-raw-run`,
   /** A preserved block, drawn by the `display` its policy gave it */
   rawBlock: `${PREFIX}-raw-block`,
-  /** The box holding both the paper and the marks overlaid on it */
+  /** The room the scaled page layer takes up in the scroll box */
+  pageBox: `${PREFIX}-page-box`,
+  /** The box holding both the paper and the marks overlaid on it, scaled to the reader's zoom */
   pageLayer: `${PREFIX}-page-layer`,
   /** All of the page marks drawn over the paper */
   pageGuides: `${PREFIX}-page-guides`,
@@ -144,11 +146,24 @@ var editorClassNames = {
   commentIconActions: `${PREFIX}-comment-icon-actions`,
   commentComposer: `${PREFIX}-comment-composer`,
   commentInput: `${PREFIX}-comment-input`,
-  notesPanel: `${PREFIX}-notes`,
-  notesHeading: `${PREFIX}-notes-heading`,
-  notesList: `${PREFIX}-notes-list`,
-  noteLabel: `${PREFIX}-note-label`,
-  noteBody: `${PREFIX}-note-body`,
+  /** Everything drawn over the paper in the room the pages keep for notes, which only its areas take the mouse in */
+  noteAreas: `${PREFIX}-note-areas`,
+  /** The footnotes at the foot of one page: a short rule, then each footnote */
+  footnoteArea: `${PREFIX}-footnote-area`,
+  /** The endnotes drawn after the last paragraph, one box per page they run onto */
+  endnoteArea: `${PREFIX}-endnote-area`,
+  /** The short rule that sets notes apart from the text above them */
+  noteSeparator: `${PREFIX}-note-separator`,
+  /** One note, drawn from its story */
+  noteRow: `${PREFIX}-note-row`,
+  /** Attached alongside it while the caret is in that note and an editing view stands over it */
+  noteRowOpen: `${PREFIX}-note-row-open`,
+  /** The editing view one side story is edited in (`editor/stories`) */
+  storyBody: `${PREFIX}-story-body`,
+  /** A note's own reference mark, drawn as the label its reference carries */
+  noteMark: `${PREFIX}-note-mark`,
+  /** The notes listed after the last page */
+  noteList: `${PREFIX}-note-list`,
   /** The panel drawn in place of the editor when a document was refused and the consumer wrote no panel of its own */
   rejection: `${PREFIX}-rejection`,
   rejectionTitle: `${PREFIX}-rejection-title`

package/dist/styles/inlineStyle.d.ts

@@ -1,4 +1,5 @@
 import { type CellFormat, type DocumentDefaults, type HighlightName, type LineSpacing, type ParagraphFormat, type RowFormat, type RunFormat, type TableFormat, type TableWidth } from "../model/format";
+import { editorCssVariables } from "./classNames";
 import { type FontFallbacks } from "./fontStack";
 /**
  * The value used on screen only, when nowhere in the document declares a default
@@ -65,3 +66,9 @@ export declare function cellStyle(format: CellFormat | null): string | undefined
  * not drawn in a different font in every environment.
  */
 export declare function documentDefaultsStyle(defaults: DocumentDefaults, fontFallbacks?: FontFallbacks): string;
+export type DocumentDefaultsVariables = Readonly<Record<typeof editorCssVariables.fontSize | typeof editorCssVariables.lineHeight | typeof editorCssVariables.fontFamily, string>>;
+/**
+ * The same values as the variables they are written into, for a box drawn outside the sheet that
+ * is to set its text the way the sheet does: a note drawn at the foot of a page, or after the last
+ */
+export declare function documentDefaultsVariables(defaults: DocumentDefaults, fontFallbacks?: FontFallbacks): DocumentDefaultsVariables;

package/dist/styles/inlineStyle.js

@@ -199,12 +199,17 @@ function cellStyle(format) {
   return declarations(css);
 }
 function documentDefaultsStyle(defaults, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
+  return Object.entries(documentDefaultsVariables(defaults, fontFallbacks)).map(([name, value]) => `${name}:${value}`).join(";");
+}
+function documentDefaultsVariables(defaults, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
   const fontFamily = defaults.fontFamily ? withFontFallback(defaults.fontFamily, fontFallbacks) : fontFallbacks.defaultStack;
-  return [
-    `${editorCssVariables.fontSize}:${pt(defaults.fontSizePt ?? FALLBACK_FONT_SIZE_PT)}`,
-    `${editorCssVariables.lineHeight}:${lineHeightValue(defaults.lineSpacing)}`,
-    `${editorCssVariables.fontFamily}:${fontFamily}`
-  ].join(";");
+  return {
+    [editorCssVariables.fontSize]: pt(
+      defaults.fontSizePt ?? FALLBACK_FONT_SIZE_PT
+    ),
+    [editorCssVariables.lineHeight]: lineHeightValue(defaults.lineSpacing),
+    [editorCssVariables.fontFamily]: fontFamily
+  };
 }
 export {
   FALLBACK_FONT_SIZE_PT,
@@ -213,6 +218,7 @@ export {
   cellStyle,
   columnWidthPx,
   documentDefaultsStyle,
+  documentDefaultsVariables,
   lineHeightValue,
   paragraphStyle,
   rowStyle,

package/dist/styles/visualScale.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The scale an element is drawn at, read back off the transforms standing over it.
+ *
+ * The page layer is scaled with a transform rather than the `zoom` property (`./editor.css`), so
+ * the scale has to be read out of whatever the transform resolves to: a browser hands back the used
+ * matrix, while a document implementation that does not compute one hands the function back as it
+ * was written. Everything that turns a rectangle read off the screen into a measurement on the
+ * paper divides by this number, so a transform an application puts above the editor - a dialog
+ * opening on a scale, a container fitting itself to a small screen - counts as much as the layer's
+ * own: a rectangle read inside one of those is drawn at their product.
+ *
+ * The drawn width over `offsetWidth` would answer without parsing anything, but `offsetWidth` is
+ * rounded to whole pixels, and a scale a ten-thousandth out is a measurement half a pixel out by
+ * the foot of a long document, which is the drift this scaling exists to avoid.
+ */
+/** The horizontal scale of an element's own transform and of every transform above it */
+export declare function visualScaleOf(element: Element | null | undefined): number;
+/** The scale the paper a node is drawn on is being read at */
+export declare function pageScaleAround(node: Element): number;

package/dist/styles/visualScale.js

@@ -0,0 +1,26 @@
+// src/styles/visualScale.ts
+import { editorClassNames } from "./classNames.js";
+var HORIZONTAL_SCALE = /^(?:matrix3d|matrix|scale3d|scaleX|scale)\(\s*(-?\d*\.?\d+(?:e[+-]?\d+)?)/i;
+function styleOf(element) {
+  const view = element.ownerDocument.defaultView;
+  return view ? view.getComputedStyle(element) : null;
+}
+function ownScale(element) {
+  const matched = HORIZONTAL_SCALE.exec(styleOf(element)?.transform ?? "");
+  const scale = Number.parseFloat(matched?.[1] ?? "");
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+function visualScaleOf(element) {
+  let scale = 1;
+  for (let at = element ?? null; at !== null; at = at.parentElement) {
+    scale *= ownScale(at);
+  }
+  return scale;
+}
+function pageScaleAround(node) {
+  return visualScaleOf(node.closest(`.${editorClassNames.pageLayer}`));
+}
+export {
+  pageScaleAround,
+  visualScaleOf
+};

package/dist/styles.css

@@ -361,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) */
@@ -437,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/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)]);
   }