@portone/docx-editor 0.6.0 → 0.6.2

package/dist/ui/notes/StoryRow.js

@@ -0,0 +1,122 @@
+// src/ui/notes/StoryRow.tsx
+import {
+  memo,
+  useEffect,
+  useLayoutEffect,
+  useRef
+} from "react";
+import { noteNodeSpecs } from "../../editor/notes/noteSurface.js";
+import {
+  storyMarkup
+} from "../../editor/stories/storyMarkup.js";
+import {
+  caretOf,
+  createStoryView
+} from "../../editor/stories/storyView.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import { jsx } from "react/jsx-runtime";
+var drawn = /* @__PURE__ */ new WeakMap();
+function markupOf(story, label, fontFallbacks, draw) {
+  const held = drawn.get(story);
+  if (held?.label === label && held.fontFallbacks === fontFallbacks && held.draw === draw) {
+    return held.markup;
+  }
+  const markup = draw(story, {
+    fontFallbacks,
+    nodeSpecs: noteNodeSpecs(() => label)
+  });
+  drawn.set(story, { label, fontFallbacks, draw, markup });
+  return markup;
+}
+function pressedTheNumber(target) {
+  return target instanceof Element && target.closest(`.${editorClassNames.noteMark}`) !== null;
+}
+var StoryRow = memo(function StoryRow2({
+  noteKey,
+  story,
+  label,
+  fontFallbacks,
+  name,
+  hidden = false,
+  onHeight,
+  zoom = 1,
+  draw = storyMarkup,
+  editing = null,
+  revision,
+  readOnly = false,
+  onPress,
+  onReturn
+}) {
+  const box = useRef(null);
+  const scale = useRef(zoom);
+  const live = useRef(null);
+  useEffect(() => {
+    scale.current = zoom;
+  });
+  useLayoutEffect(() => {
+    if (editing) return;
+    box.current?.replaceChildren(
+      markupOf(story, label, fontFallbacks, draw).cloneNode(true)
+    );
+  }, [editing, story, label, fontFallbacks, draw]);
+  useLayoutEffect(() => {
+    const row = box.current;
+    if (!row || !editing) return;
+    const mount = document.createElement("div");
+    row.replaceChildren(mount);
+    const opened = createStoryView({
+      mount,
+      host: editing.host,
+      key: noteKey,
+      document: editing.document,
+      fontFallbacks,
+      extensions: editing.extensions,
+      caret: editing.caret.take(),
+      onStateChange: editing.onStateChange
+    });
+    live.current = opened;
+    opened.view.focus();
+    return () => {
+      editing.caret.keep(caretOf(opened.view.state));
+      live.current = null;
+      opened.destroy();
+    };
+  }, [editing, noteKey, fontFallbacks]);
+  useLayoutEffect(() => {
+    live.current?.sync();
+  }, [revision]);
+  useEffect(() => {
+    const row = box.current;
+    if (!row || !onHeight || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      onHeight(noteKey, row.getBoundingClientRect().height / scale.current);
+    });
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [noteKey, onHeight]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: [
+        editorClassNames.noteRow,
+        editing ? editorClassNames.noteRowOpen : null
+      ].filter(Boolean).join(" "),
+      role: name === void 0 ? void 0 : "group",
+      "aria-label": name,
+      "aria-readonly": editing && readOnly ? true : void 0,
+      style: hidden ? { visibility: "hidden" } : void 0,
+      onMouseDown: editing || !onPress && !onReturn ? void 0 : (event) => {
+        event.preventDefault();
+        if (onReturn && pressedTheNumber(event.target)) {
+          onReturn();
+          return;
+        }
+        onPress?.({ left: event.clientX, top: event.clientY });
+      }
+    }
+  );
+});
+export {
+  StoryRow
+};

package/dist/ui/notes/noteBands.d.ts

@@ -0,0 +1,100 @@
+/**
+ * The footnote band: what a page keeps room for at its foot, and what is drawn in that room and
+ * after the last page.
+ *
+ * A band is two halves that have to agree. The layout is told a name, a place at the foot, the
+ * height a page adds once for the band and the height of each thing kept in it (`page/demands`),
+ * and something has to draw exactly that much. Both halves live here so a page's room and the
+ * notes drawn in it cannot drift apart, and so the component that mounts the editor asks only for
+ * the bands a document keeps and renders what it is handed.
+ *
+ * A document referring to no footnote keeps no band at all, so it is laid out through the same
+ * pass it took before a page kept room for anything.
+ */
+import type { EditorState } from "prosemirror-state";
+import type { CSSProperties, ReactElement } from "react";
+import { type NoteRow } from "../../editor/commands/noteQueries";
+import type { DemandBand } from "../../page/demands";
+import type { PagePixels, TrailingRows } from "../../page/pageLayout";
+import type { PageOverlay } from "../../page/usePageLayout";
+import type { StoryKey } from "../../schema/stories";
+import { type FontFallbacks } from "../../styles/fontStack";
+import type { NoteHeightReport, RowEditing } from "./StoryRow";
+/** What a document's notes ask of the page layout, and what is needed to draw them */
+export interface NoteBands {
+    /**
+     * The bands to lay the pages out with, by name, or undefined where the document asks for no
+     * room at all. A new value lays the pages out again, so it changes only when a height does
+     */
+    readonly bands: ReadonlyMap<string, DemandBand> | undefined;
+    /**
+     * The endnotes as rows laid after the last block of the document, or undefined where it refers
+     * to none. A new value lays the pages out again, so it changes only when a height does
+     */
+    readonly trailing: TrailingRows | undefined;
+    /**
+     * Every note the document refers to, by story key, in first-reference order.
+     *
+     * Which one a caret stands in is the mounting component's to hold, so this is the one half of
+     * the notes it reads; everything else about how they are drawn stays in `drawn`.
+     */
+    readonly rows: ReadonlyMap<StoryKey, NoteRow>;
+    /** Held for `NotesAroundPage`; nothing else reads it */
+    readonly drawn: DrawnNotes;
+}
+/** What `NotesAroundPage` draws with, kept opaque so a caller cannot take the two halves apart */
+interface DrawnNotes {
+    /** The footnotes, which are the notes drawn at the foot of the page their reference stands on */
+    readonly footnotes: ReadonlyMap<StoryKey, NoteRow>;
+    readonly endnotes: readonly NoteRow[];
+    readonly anyNotes: boolean;
+    readonly heights: ReadonlyMap<StoryKey, number>;
+    readonly onHeight: NoteHeightReport;
+    readonly fontFallbacks: FontFallbacks;
+    readonly textStyle: CSSProperties;
+}
+export interface NoteBandsOptions {
+    /** The live document's state, or null before one is opened */
+    readonly state: EditorState | null;
+    /** A value that differs for every document opened, which the measured heights are held against */
+    readonly of: unknown;
+    readonly fontFallbacks: FontFallbacks | undefined;
+}
+export declare function useNoteBands({ state, of, fontFallbacks, }: NoteBandsOptions): NoteBands;
+export interface NotesAroundPageProps {
+    readonly notes: NoteBands;
+    /**
+     * Where the pages stand, or null while none are measured, which is what decides where the notes
+     * go: a page keeps room for them only once it has been laid out
+     */
+    readonly overlay: PageOverlay | null;
+    /** The paper the first section is drawn on, which the list under the sheet is as wide as */
+    readonly page: PagePixels;
+    readonly zoom: number;
+    /** The note the caret is in, which is the one row an editing view stands over */
+    readonly open?: StoryKey | null;
+    /** What mounts that view. Null while no note is open */
+    readonly editing?: RowEditing | null;
+    /** Whether the open note stands where nothing may be edited */
+    readonly readOnly?: boolean;
+    /** A value that differs every time the main document changes, which the open row syncs on */
+    readonly revision?: unknown;
+    /** Called for a press on a note no view stands over yet */
+    readonly onOpen?: (key: StoryKey, at: {
+        left: number;
+        top: number;
+    }) => void;
+    /** Called for a press on the number a note is drawn by, which is the way back to its reference */
+    readonly onReturn?: (key: StoryKey) => void;
+}
+/**
+ * The notes around the paper: each footnote over the room its page keeps, and the endnotes over
+ * the room kept after the last paragraph.
+ *
+ * Until a page has been measured there is no room to stand in - the guides may be off, or the
+ * first frame may not have been laid out yet - and a note drawn nowhere is a note a reader cannot
+ * read, so both kinds are listed under the sheet until there is. Only a note standing in its own
+ * room is edited in place.
+ */
+export declare function NotesAroundPage({ notes, overlay, page, zoom, open, editing, readOnly, revision, onOpen, onReturn, }: NotesAroundPageProps): ReactElement | null;
+export {};

package/dist/ui/notes/noteBands.js

@@ -0,0 +1,142 @@
+// src/ui/notes/noteBands.tsx
+import { useMemo } from "react";
+import {
+  noteProjection
+} from "../../editor/commands/noteQueries.js";
+import { documentOf } from "../../editor/editorDocument.js";
+import {
+  FOOTNOTE_BAND,
+  FOOTNOTE_BAND_ORDER
+} from "../../page/demands/footnoteDemands.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import {
+  DEFAULT_FONT_FALLBACKS
+} from "../../styles/fontStack.js";
+import { documentDefaultsVariables } from "../../styles/inlineStyle.js";
+import { endnoteAreasOf, footnoteAreasOf, NoteAreas } from "./NoteAreas.js";
+import { NoteList } from "./NoteList.js";
+import { useNoteHeights } from "./noteHeights.js";
+import { NOTE_SEPARATOR_HEIGHT } from "./noteSeparator.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NO_ROWS = /* @__PURE__ */ new Map();
+var NO_NOTE_ROWS = [];
+function useNoteBands({
+  state,
+  of,
+  fontFallbacks
+}) {
+  const notes = state === null ? null : noteProjection.read(state);
+  const footnotes = notes?.footnotes ?? NO_ROWS;
+  const hasFootnotes = footnotes.size > 0;
+  const [heights, onHeight] = useNoteHeights(of);
+  const bands = useMemo(
+    () => hasFootnotes ? /* @__PURE__ */ new Map([
+      [
+        FOOTNOTE_BAND,
+        {
+          order: FOOTNOTE_BAND_ORDER,
+          overhead: NOTE_SEPARATOR_HEIGHT,
+          heights
+        }
+      ]
+    ]) : void 0,
+    [hasFootnotes, heights]
+  );
+  const endnotes = notes?.endnotes ?? NO_NOTE_ROWS;
+  const trailing = useMemo(
+    () => endnotes.length === 0 ? void 0 : {
+      overhead: NOTE_SEPARATOR_HEIGHT,
+      rows: endnotes.map((row) => ({
+        id: row.key,
+        height: heights.get(row.key) ?? 0
+      }))
+    },
+    [endnotes, heights]
+  );
+  const snapshot = state === null ? null : documentOf(state);
+  const noteFontFallbacks = fontFallbacks ?? DEFAULT_FONT_FALLBACKS;
+  const textStyle = useMemo(
+    () => snapshot === null ? {} : {
+      ...documentDefaultsVariables(snapshot.defaults, noteFontFallbacks),
+      tabSize: `${snapshot.defaultTabStopPt}pt`
+    },
+    [snapshot, noteFontFallbacks]
+  );
+  return {
+    bands,
+    trailing,
+    rows: notes?.rows ?? NO_ROWS,
+    drawn: {
+      footnotes,
+      endnotes,
+      anyNotes: notes !== null,
+      heights,
+      onHeight,
+      fontFallbacks: noteFontFallbacks,
+      textStyle
+    }
+  };
+}
+function NotesAroundPage({
+  notes,
+  overlay,
+  page,
+  zoom,
+  open,
+  editing,
+  readOnly,
+  revision,
+  onOpen,
+  onReturn
+}) {
+  const { footnotes, endnotes, anyNotes, heights, onHeight } = notes.drawn;
+  const drawing = {
+    heights,
+    onHeight,
+    fontFallbacks: notes.drawn.fontFallbacks,
+    textStyle: notes.drawn.textStyle,
+    zoom,
+    open,
+    editing,
+    readOnly,
+    revision,
+    onOpen,
+    onReturn
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    overlay !== null && footnotes.size > 0 && /* @__PURE__ */ jsx(
+      NoteAreas,
+      {
+        overlay,
+        areas: footnoteAreasOf(overlay),
+        areaClassName: editorClassNames.footnoteArea,
+        rows: footnotes,
+        ...drawing
+      }
+    ),
+    overlay !== null && endnotes.length > 0 && /* @__PURE__ */ jsx(
+      NoteAreas,
+      {
+        overlay,
+        areas: endnoteAreasOf(overlay),
+        areaClassName: editorClassNames.endnoteArea,
+        rows: notes.rows,
+        ...drawing
+      }
+    ),
+    anyNotes && overlay === null && /* @__PURE__ */ jsx(
+      NoteList,
+      {
+        footnotes: [...footnotes.values()],
+        endnotes,
+        page,
+        fontFallbacks: notes.drawn.fontFallbacks,
+        textStyle: notes.drawn.textStyle
+      }
+    )
+  ] });
+}
+export {
+  NotesAroundPage,
+  useNoteBands
+};

package/dist/ui/notes/noteHeights.d.ts

@@ -0,0 +1,10 @@
+import type { StoryKey } from "../../schema/stories";
+import type { NoteHeightReport } from "./StoryRow";
+/**
+ * The height each note stands at, as its row last reported it, for the document `of` names.
+ *
+ * A height is a fact about what the browser drew, so it can only arrive after a row is drawn. The
+ * map handed back is the same object until a height really changes, which is what lets the page
+ * layout that reads it run again only then, and a document swapped in starts from none.
+ */
+export declare function useNoteHeights(of: unknown): readonly [ReadonlyMap<StoryKey, number>, NoteHeightReport];

package/dist/ui/notes/noteHeights.js

@@ -0,0 +1,24 @@
+// src/ui/notes/noteHeights.ts
+import { useCallback, useState } from "react";
+var NO_HEIGHTS = /* @__PURE__ */ new Map();
+function round(value) {
+  return Math.round(value * 100) / 100;
+}
+function useNoteHeights(of) {
+  const [held, setHeld] = useState({ of, heights: NO_HEIGHTS });
+  const report = useCallback(
+    (key, height) => {
+      const rounded = round(height);
+      setHeld((previous) => {
+        const heights = previous.of === of ? previous.heights : NO_HEIGHTS;
+        if (heights.get(key) === rounded && previous.of === of) return previous;
+        return { of, heights: new Map(heights).set(key, rounded) };
+      });
+    },
+    [of]
+  );
+  return [held.of === of ? held.heights : NO_HEIGHTS, report];
+}
+export {
+  useNoteHeights
+};

package/dist/ui/notes/noteSeparator.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The rule notes are set under, wherever they are drawn: in the room a page keeps for them
+ * (`./NoteAreas`) and at the head of the list under the sheet (`./NoteList`).
+ *
+ * Its height is also what the page layout is told a page adds once when it holds any footnote
+ * (`DemandBand.overhead`), and what the endnotes are given once where they begin
+ * (`TrailingRows.overhead`), so the room kept and the notes drawn in it are the same size.
+ */
+/** The height a page's notes are set under, the rule drawn across the middle of it */
+export declare const NOTE_SEPARATOR_HEIGHT = 16;
+/** Word's rule runs a third of the body and no further than two inches */
+export declare function noteSeparatorWidth(bodyWidth: number): number;

package/dist/ui/notes/noteSeparator.js

@@ -0,0 +1,9 @@
+// src/ui/notes/noteSeparator.ts
+var NOTE_SEPARATOR_HEIGHT = 16;
+function noteSeparatorWidth(bodyWidth) {
+  return Math.min(bodyWidth / 3, 192);
+}
+export {
+  NOTE_SEPARATOR_HEIGHT,
+  noteSeparatorWidth
+};

package/dist/ui/notes/useStorySurface.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Which side story the caret is in, and what the one view over it is built from.
+ *
+ * One story is open at a time (`editor/stories/storyView`), and this is what holds that true: the
+ * state here names one story key. Everything the view is built from arrives as one binding, so a
+ * second kind of story is another binding rather than more of the component that renders this.
+ * Where a story stands on the screen is the drawing side's (`./noteBands`).
+ */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import type { NoteRow } from "../../editor/commands/noteQueries";
+import { type EditorDocument } from "../../editor/editorDocument";
+import { type ActiveSurface, type StoryExtensions, type StoryHost } from "../../editor/stories/storyView";
+import type { StoryKey } from "../../schema/stories";
+import type { RowEditing } from "./StoryRow";
+/** A view and the state on screen, which is what the mounting component holds as React state */
+export interface LiveSurface {
+    readonly view: EditorView;
+    readonly state: EditorState;
+}
+/** What one kind of story hands the view over one of its rows, which is all that differs per kind */
+export interface StorySurfaceBinding {
+    /** The host every edit in this kind of story leaves through */
+    hostOf(main: EditorView, activate: StoryHost["activate"]): StoryHost;
+    /** What the view over this row adds, and null for a row this binding does not answer for */
+    extensionsOf(main: EditorView, row: NoteRow): StoryExtensions | null;
+    /** The values this row's story is edited against, worked out from the document's own snapshot */
+    documentFor(main: EditorState, snapshot: EditorDocument, row: NoteRow): EditorDocument;
+    /**
+     * Which story the document is asking to have opened, read off the state the mounting component
+     * holds. A fresh value for every request, so asking twice for one story opens it twice.
+     */
+    requestedIn(main: EditorState): {
+        readonly key: StoryKey;
+    } | null;
+    /** Puts the caret in this row's story, which is what opens it */
+    openIn(main: EditorView, row: NoteRow): void;
+    /** Hands the caret back to the text this row's story is called from, which is what closes it */
+    returnFrom(main: EditorView, row: NoteRow): void;
+}
+export interface StorySurfaceOptions {
+    /** The body's view and the state on screen, or null before a document is opened */
+    readonly main: LiveSurface | null;
+    /** The rows one of which a view may stand over, by the key naming each one's story */
+    readonly rows: ReadonlyMap<StoryKey, NoteRow>;
+    /** The kind of story these rows hold. A new value takes an open view down, so keep one */
+    readonly binding: StorySurfaceBinding;
+}
+export interface StorySurface {
+    /** Where the caret is, and null before a document is opened */
+    readonly active: ActiveSurface | null;
+    /** The story a view stands over, and null while the caret is in the body */
+    readonly open: StoryKey | null;
+    /** What mounts that view, which only the open row is given. Null while none is open */
+    readonly editing: RowEditing | null;
+    /** Whether the open story stands where nothing may be edited */
+    readonly readOnly: boolean;
+    /** Whether the open view is composing, which a page laid out again would take down */
+    composing(): boolean;
+    /** Opens the story of this row, with the caret where the press landed */
+    onOpen(key: StoryKey, at: {
+        left: number;
+        top: number;
+    }): void;
+    /** Hands the caret back to the text this row's story is called from */
+    onReturn(key: StoryKey): void;
+}
+export declare function useStorySurface({ main, rows, binding, }: StorySurfaceOptions): StorySurface;

package/dist/ui/notes/useStorySurface.js

@@ -0,0 +1,95 @@
+// src/ui/notes/useStorySurface.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { documentOf } from "../../editor/editorDocument.js";
+import {
+  EVERY_CAPABILITY
+} from "../../editor/stories/storyView.js";
+function useStorySurface({
+  main,
+  rows,
+  binding
+}) {
+  const [asked, setAsked] = useState(null);
+  const [live, setLive] = useState(null);
+  const held = useRef(null);
+  const requested = main === null ? null : binding.requestedIn(main.state);
+  useEffect(() => {
+    if (requested !== null) setAsked(requested.key);
+  }, [requested]);
+  useEffect(() => {
+    const body = main?.view;
+    if (!body) return;
+    const leave = () => setAsked(null);
+    body.dom.addEventListener("focus", leave);
+    return () => body.dom.removeEventListener("focus", leave);
+  }, [main?.view]);
+  const open = asked !== null && rows.has(asked) ? asked : null;
+  const row = open === null ? void 0 : rows.get(open);
+  const activate = useCallback((_key, view) => {
+    setLive(view === null ? null : { view, state: view.state });
+  }, []);
+  const onStateChange = useCallback((state) => {
+    setLive(
+      (current) => current === null ? current : { view: current.view, state }
+    );
+  }, []);
+  const caret = useMemo(
+    () => ({
+      take: () => held.current?.key === open ? held.current.caret : null,
+      keep: (at) => {
+        if (open !== null) held.current = { key: open, caret: at };
+      }
+    }),
+    [open]
+  );
+  const host = useMemo(
+    () => main === null ? null : binding.hostOf(main.view, activate),
+    [main?.view, activate, binding]
+  );
+  const extensions = useMemo(
+    () => main === null || row === void 0 ? null : binding.extensionsOf(main.view, row),
+    [main?.view, row?.key, row?.label, binding]
+  );
+  const snapshot = main === null ? null : documentOf(main.state);
+  const document = useMemo(
+    () => main === null || snapshot === null || row === void 0 ? null : binding.documentFor(main.state, snapshot, row),
+    [main?.view, snapshot, row?.referencePos, binding]
+  );
+  const editing = useMemo(
+    () => host === null || extensions === null || document === null ? null : { host, document, extensions, caret, onStateChange },
+    [host, extensions, document, caret, onStateChange]
+  );
+  const active = main === null ? null : open !== null && live !== null && extensions !== null ? {
+    surface: "story",
+    key: open,
+    view: live.view,
+    state: live.state,
+    takes: extensions.takes
+  } : {
+    surface: "body",
+    view: main.view,
+    state: main.state,
+    takes: EVERY_CAPABILITY
+  };
+  return {
+    active,
+    open,
+    editing,
+    readOnly: open !== null && host !== null && host.shut(open),
+    composing: () => live?.view.composing === true,
+    onOpen(key, at) {
+      const pressed = rows.get(key);
+      if (main === null || pressed === void 0) return;
+      held.current = { key, caret: { kind: "point", ...at } };
+      binding.openIn(main.view, pressed);
+    },
+    onReturn(key) {
+      const pressed = rows.get(key);
+      if (main === null || pressed === void 0) return;
+      binding.returnFrom(main.view, pressed);
+    }
+  };
+}
+export {
+  useStorySurface
+};

package/dist/ui/runCommand.d.ts

@@ -2,4 +2,11 @@
 import type { Command } from "prosemirror-state";
 import type { EditorView } from "prosemirror-view";
 export type RunCommand = (command: Command) => void;
-export declare function commandRunner(view: EditorView): RunCommand;
+/**
+ * Runs commands on `view` and leaves the focus on `focus`, which is `view` itself unless the
+ * command acts somewhere other than where the caret stands.
+ *
+ * Undo and redo are the one case: they run on the document while the caret is in a story, and
+ * handing the focus to the document is what closes an open story (`DocxEditor`).
+ */
+export declare function commandRunner(view: EditorView, focus?: EditorView): RunCommand;

package/dist/ui/runCommand.js

@@ -2,10 +2,10 @@
 function apply(view, command) {
   command(view.state, (tr) => view.dispatch(tr), view);
 }
-function commandRunner(view) {
+function commandRunner(view, focus = view) {
   return (command) => {
     apply(view, command);
-    view.focus();
+    focus.focus();
   };
 }
 export {

package/dist/ui/shortcutLabels.d.ts

@@ -0,0 +1,16 @@
+/**
+ * How a menu row spells the modifiers of a key binding.
+ *
+ * `Mod` is Command on Apple platforms and Control elsewhere, and which one a binding answers to is
+ * decided by `prosemirror-keymap` off the platform name. A label is read off the same platform
+ * test, so a row cannot promise a key the bindings do not hold - an iPad keyboard sends Command
+ * for every `Mod` binding the editor declares (`editor/clipboard/plugin` reads it for the same
+ * reason).
+ */
+export interface ModifierLabels {
+    /** `Mod`, as a row writes it before the key */
+    readonly mod: string;
+    readonly alt: string;
+}
+/** The spellings this platform's bindings are labelled with */
+export declare function modifierLabels(): ModifierLabels;

package/dist/ui/shortcutLabels.js

@@ -0,0 +1,9 @@
+// src/ui/shortcutLabels.ts
+var APPLE = /Mac|iP(hone|[oa]d)/;
+function modifierLabels() {
+  const platform = typeof navigator === "undefined" ? "" : navigator.platform;
+  return APPLE.test(platform) ? { mod: "\u2318", alt: "\u2325" } : { mod: "Ctrl+", alt: "Alt+" };
+}
+export {
+  modifierLabels
+};

package/dist/ui/usePageRoom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Holds the room the page layer takes in the scroll box.
+ *
+ * The layer is scaled with a transform and stands outside the flow (`styles/editor.css`), so
+ * nothing in the flow reaches down to where the paper ends and the scroll box would stop short of
+ * it. The box the layer stands in is given the height the layer is drawn at, and the scroll box
+ * then reaches the paper and keeps its own padding below it.
+ *
+ * The two elements are taken rather than refs to them, so that a surface which drew neither - a
+ * file that was refused, before the reader opens one that is not - is measured the moment they
+ * arrive rather than never again.
+ */
+export declare function usePageRoom(box: HTMLElement | null, layer: HTMLElement | null, scale: number): void;