@portone/docx-editor 0.1.0

package/dist/ui/comments/CommentComposer.js

@@ -0,0 +1,59 @@
+// src/ui/comments/CommentComposer.tsx
+import {
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { editorClassNames } from "../../styles/classNames.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FocusedTextarea({
+  label,
+  value,
+  onChange
+}) {
+  const input = useRef(null);
+  useLayoutEffect(() => input.current?.focus(), []);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: input,
+      className: editorClassNames.commentInput,
+      "aria-label": label,
+      value,
+      onChange: (event) => onChange(event.target.value)
+    }
+  );
+}
+function CommentComposer({
+  author,
+  label,
+  submitLabel,
+  onSubmit,
+  onClose
+}) {
+  const [text, setText] = useState("");
+  const submit = (event) => {
+    event.preventDefault();
+    if (onSubmit(text)) 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__ */ jsxs("div", { className: editorClassNames.commentActions, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          className: editorClassNames.commentPrimaryAction,
+          disabled: text.trim().length === 0,
+          children: submitLabel
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  CommentComposer,
+  FocusedTextarea
+};

package/dist/ui/comments/useCommentRailLayout.d.ts

@@ -0,0 +1,18 @@
+import type { EditorView } from "prosemirror-view";
+import { type RefObject } from "react";
+import type { DocumentComment } from "../../editor/commands/commentCommands";
+export declare const COMPOSER_POSITION = "composer";
+interface CommentRailLayoutOptions {
+    panel: RefObject<HTMLElement | null>;
+    view: EditorView;
+    scrollContainer: HTMLElement | null;
+    visible: readonly DocumentComment[];
+    composerOpen: boolean;
+    composerSelectionPos: number;
+    allCommentsOpen: boolean;
+}
+export declare function useCommentRailLayout({ panel, view, scrollContainer, visible, composerOpen, composerSelectionPos, allCommentsOpen, }: CommentRailLayoutOptions): {
+    positions: ReadonlyMap<string, number>;
+    canvasHeight: number;
+};
+export {};

package/dist/ui/comments/useCommentRailLayout.js

@@ -0,0 +1,183 @@
+// src/ui/comments/useCommentRailLayout.ts
+import { useLayoutEffect, useRef, useState } from "react";
+import { editorClassNames } from "../../styles/classNames.js";
+var COMPOSER_POSITION = "composer";
+var VERTICAL_SCROLLBAR_CLEARANCE = 16;
+function estimatedCardHeight(comment) {
+  return 150 + comment.replies.length * 88;
+}
+function topAt(view, pos) {
+  try {
+    return view.coordsAtPos(pos).top;
+  } catch {
+    return 0;
+  }
+}
+function anchorPositions(comments, view, scrollContainer, rail, composerOpen, selectionPos) {
+  const root = scrollContainer.getBoundingClientRect();
+  const heights = /* @__PURE__ */ new Map();
+  for (const element of rail.querySelectorAll(
+    "[data-comment-position]"
+  )) {
+    const key = element.dataset.commentPosition;
+    if (key) heights.set(key, element.getBoundingClientRect().height);
+  }
+  const items = comments.map((comment) => ({
+    key: comment.id,
+    anchor: topAt(view, comment.from) - root.top + scrollContainer.scrollTop,
+    fallbackHeight: estimatedCardHeight(comment)
+  }));
+  if (composerOpen) {
+    items.push({
+      key: COMPOSER_POSITION,
+      anchor: topAt(view, selectionPos) - root.top + scrollContainer.scrollTop,
+      fallbackHeight: 150
+    });
+  }
+  items.sort((left, right) => left.anchor - right.anchor);
+  const positions = /* @__PURE__ */ new Map();
+  let next = 64;
+  for (const item of items) {
+    const top = Math.max(item.anchor, next);
+    positions.set(item.key, top);
+    next = top + (heights.get(item.key) || item.fallbackHeight) + 12;
+  }
+  return { positions, bottom: next };
+}
+function useCommentRailLayout({
+  panel,
+  view,
+  scrollContainer,
+  visible,
+  composerOpen,
+  composerSelectionPos,
+  allCommentsOpen
+}) {
+  const wasAllCommentsOpen = useRef(false);
+  const [positions, setPositions] = useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [canvasHeight, setCanvasHeight] = useState(0);
+  useLayoutEffect(() => {
+    if (allCommentsOpen && !wasAllCommentsOpen.current && panel.current) {
+      panel.current.scrollTop = 0;
+    }
+    wasAllCommentsOpen.current = allCommentsOpen;
+  }, [allCommentsOpen, panel]);
+  useLayoutEffect(() => {
+    const rail = panel.current;
+    if (!rail || !scrollContainer) return;
+    const frameWindow = scrollContainer.ownerDocument.defaultView;
+    const pageLayer = view.dom.closest(
+      `.${editorClassNames.pageLayer}`
+    );
+    if (allCommentsOpen) {
+      pageLayer?.style.removeProperty("padding-right");
+      rail.style.removeProperty("left");
+      setPositions(/* @__PURE__ */ new Map());
+      setCanvasHeight(0);
+      const wheelAllComments = (event) => {
+        event.preventDefault();
+        const before = rail.scrollTop;
+        const max = Math.max(0, rail.scrollHeight - rail.clientHeight);
+        rail.scrollTop = Math.min(max, Math.max(0, before + event.deltaY));
+        scrollContainer.scrollTop += event.deltaY - (rail.scrollTop - before);
+        scrollContainer.scrollLeft += event.deltaX;
+      };
+      rail.addEventListener("wheel", wheelAllComments, { passive: false });
+      return () => rail.removeEventListener("wheel", wheelAllComments);
+    }
+    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;
+      pageLayer.style.paddingRight = `${(drawnWidth + 16 + VERTICAL_SCROLLBAR_CLEARANCE) / scale}px`;
+    };
+    const placeBesidePaper = () => {
+      reserveCommentWidth();
+      const viewport = scrollContainer.getBoundingClientRect();
+      const paper = view.dom.getBoundingClientRect();
+      const desired = paper.right - viewport.left + scrollContainer.scrollLeft + 16;
+      rail.style.left = `${Math.max(16, desired)}px`;
+    };
+    const update = () => {
+      const layout = anchorPositions(
+        visible,
+        view,
+        scrollContainer,
+        rail,
+        composerOpen,
+        composerSelectionPos
+      );
+      setPositions(layout.positions);
+      const bottom = visible.length > 0 || composerOpen ? layout.bottom + 12 : 0;
+      setCanvasHeight(Math.max(scrollContainer.scrollHeight, bottom));
+    };
+    const wheelDocument = (event) => {
+      event.preventDefault();
+      scrollContainer.scrollTop += event.deltaY;
+      scrollContainer.scrollLeft += event.deltaX;
+    };
+    const placeAndUpdate = () => {
+      placeBesidePaper();
+      update();
+    };
+    placeAndUpdate();
+    let settledFrame;
+    const frame = frameWindow?.requestAnimationFrame(() => {
+      placeAndUpdate();
+      settledFrame = frameWindow.requestAnimationFrame(() => {
+        placeAndUpdate();
+      });
+    });
+    frameWindow?.addEventListener("resize", placeAndUpdate, {
+      passive: true
+    });
+    rail.addEventListener("wheel", wheelDocument, { passive: false });
+    const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(placeAndUpdate);
+    resize?.observe(scrollContainer);
+    resize?.observe(view.dom);
+    resize?.observe(rail);
+    for (const element of rail.querySelectorAll(
+      "[data-comment-position]"
+    )) {
+      resize?.observe(element);
+    }
+    const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+      placeAndUpdate();
+      for (const element of rail.querySelectorAll(
+        "[data-comment-position]"
+      )) {
+        resize?.observe(element);
+      }
+    });
+    mutations?.observe(rail, { childList: true, subtree: true });
+    return () => {
+      if (frame !== void 0) frameWindow?.cancelAnimationFrame(frame);
+      if (settledFrame !== void 0) {
+        frameWindow?.cancelAnimationFrame(settledFrame);
+      }
+      frameWindow?.removeEventListener("resize", placeAndUpdate);
+      rail.removeEventListener("wheel", wheelDocument);
+      mutations?.disconnect();
+      resize?.disconnect();
+      pageLayer?.style.removeProperty("padding-right");
+    };
+  }, [
+    allCommentsOpen,
+    composerOpen,
+    composerSelectionPos,
+    panel,
+    scrollContainer,
+    view,
+    visible
+  ]);
+  return { positions, canvasHeight };
+}
+export {
+  COMPOSER_POSITION,
+  useCommentRailLayout
+};

package/dist/ui/keyboardWalk.d.ts

@@ -0,0 +1,22 @@
+/** One-dimensional arrow/Home/End navigation backed by roving focus. */
+import { type KeyboardEvent, type RefObject } from "react";
+/** Prevent these keys from scrolling a screen-anchored panel out of place. */
+export declare const SCROLLING_KEYS: Set<string>;
+export type WalkOrientation = "vertical" | "horizontal";
+export interface LinearWalkOptions {
+    container: RefObject<HTMLElement | null>;
+    selector: string;
+    orientation: WalkOrientation;
+    /** Filters which controls the walk may land on; all of them by default. */
+    navigable?: (control: HTMLElement) => boolean;
+    /** The control to open on; the first by default. */
+    start?: (controls: readonly HTMLElement[]) => HTMLElement | undefined;
+    takeFocus?: boolean;
+}
+export interface LinearWalk {
+    controls: () => HTMLElement[];
+    moveTo: (control: HTMLElement | undefined) => void;
+    /** Handles one key; returns whether it was the walk's own so the caller can handle the rest. */
+    walk: (event: KeyboardEvent) => boolean;
+}
+export declare function useLinearWalk({ container, selector, orientation, navigable, start, takeFocus, }: LinearWalkOptions): LinearWalk;

package/dist/ui/keyboardWalk.js

@@ -0,0 +1,70 @@
+// src/ui/keyboardWalk.ts
+import {
+  useCallback,
+  useMemo
+} from "react";
+import { useRovingFocus } from "./rovingFocus.js";
+var SCROLLING_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var WALK_KEYS = {
+  vertical: { previous: "ArrowUp", next: "ArrowDown" },
+  horizontal: { previous: "ArrowLeft", next: "ArrowRight" }
+};
+function walkedTo(controls, from, key, orientation) {
+  const { previous, next } = WALK_KEYS[orientation];
+  switch (key) {
+    case next:
+      return controls[(from + 1) % controls.length];
+    case previous:
+      return controls[(from - 1 + controls.length) % controls.length];
+    case "Home":
+      return controls[0];
+    case "End":
+      return controls[controls.length - 1];
+    default:
+      return void 0;
+  }
+}
+function useLinearWalk({
+  container,
+  selector,
+  orientation,
+  navigable,
+  start,
+  takeFocus
+}) {
+  const roving = useRovingFocus({
+    container,
+    selector,
+    navigable,
+    start,
+    takeFocus
+  });
+  const walk = useCallback(
+    (event) => {
+      const controls = roving.controls();
+      if (controls.length === 0) return false;
+      const found = controls.findIndex(
+        (control) => control === document.activeElement
+      );
+      const to = walkedTo(
+        controls,
+        found === -1 ? 0 : found,
+        event.key,
+        orientation
+      );
+      if (!to) return false;
+      roving.moveTo(to);
+      event.preventDefault();
+      return true;
+    },
+    [roving, orientation]
+  );
+  return useMemo(
+    () => ({ controls: roving.controls, moveTo: roving.moveTo, walk }),
+    [roving, walk]
+  );
+}
+export {
+  SCROLLING_KEYS,
+  useLinearWalk
+};

package/dist/ui/openAddress.d.ts

@@ -0,0 +1,11 @@
+/** Validates document-provided addresses before the link card hands them to the browser. */
+/**
+ * Whether this address is one to hand a browser.
+ *
+ * A scheme-less address is not, and a leading `www.` does not make it one: nothing in the URI rules
+ * says a bare host means https, and a relationship target with no scheme is read as relative to the
+ * package, which is to say a file beside the document rather than a site. Guessing here would be
+ * guessing what the document meant, which is `setLink`'s policy not to do.
+ */
+export declare function openable(address: string): boolean;
+export declare function openAddress(address: string): void;

package/dist/ui/openAddress.js

@@ -0,0 +1,16 @@
+// src/ui/openAddress.ts
+var OPENABLE_SCHEMES = ["http:", "https:", "mailto:"];
+function openable(address) {
+  try {
+    return OPENABLE_SCHEMES.includes(new URL(address).protocol);
+  } catch {
+    return false;
+  }
+}
+function openAddress(address) {
+  window.open(address, "_blank", "noopener,noreferrer");
+}
+export {
+  openAddress,
+  openable
+};

package/dist/ui/panelPlacement.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Positions fixed panels within the viewport so host overflow cannot clip them. Panels that do
+ * not remeasure themselves are dismissed on scroll by `useDismiss`.
+ */
+import type { EditorView } from "prosemirror-view";
+import { type RefObject } from "react";
+export interface PanelPosition {
+    left: number;
+    top: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface Viewport {
+    width: number;
+    height: number;
+}
+export interface ControlBox {
+    left: number;
+    top: number;
+    bottom: number;
+}
+export interface ScreenPoint {
+    clientX: number;
+    clientY: number;
+}
+/**
+ * The panel hangs under the control, lined up with its left edge.
+ * When it does not fit under the control but does fit over it, it flips above instead;
+ * when it fits neither way it slides in from the bottom edge of the screen.
+ */
+export declare function positionUnderControl(control: ControlBox, size: Size, viewport: Viewport): PanelPosition;
+export declare function positionAtPoint(point: ScreenPoint, size: Size, viewport: Viewport): PanelPosition;
+/**
+ * The bottom left corner of what is drawn at this position in the document, which is where a panel
+ * about that spot hangs from.
+ *
+ * A position the browser has not laid out has no coordinates to ask for, and the panel then hangs
+ * against the top of the paper rather than not at all.
+ */
+export declare function pointBelowPos(view: EditorView, pos: number): ScreenPoint;
+/**
+ * Places a panel under the control it opens from.
+ *
+ * The panel has to be measured, so this is decided right after it renders, before the
+ * browser paints. It is `null` for that one render, which the panel spends invisible.
+ */
+export declare function usePanelUnderControl(panel: RefObject<HTMLElement | null>, control: RefObject<HTMLElement | null>, open: boolean): PanelPosition | null;
+export declare function usePanelAtPoint(panel: RefObject<HTMLElement | null>, point: ScreenPoint): PanelPosition | null;
+export {};

package/dist/ui/panelPlacement.js

@@ -0,0 +1,71 @@
+// src/ui/panelPlacement.ts
+import { useLayoutEffect, useState } from "react";
+var EDGE_GAP = 8;
+var CONTROL_GAP = 4;
+function slideInside(start, length, limit) {
+  return Math.max(EDGE_GAP, Math.min(start, limit - EDGE_GAP - length));
+}
+function positionUnderControl(control, size, viewport) {
+  const under = control.bottom + CONTROL_GAP;
+  const over = control.top - CONTROL_GAP - size.height;
+  const fitsUnder = under + size.height + EDGE_GAP <= viewport.height;
+  return {
+    left: slideInside(control.left, size.width, viewport.width),
+    top: fitsUnder || over < EDGE_GAP ? slideInside(under, size.height, viewport.height) : over
+  };
+}
+function positionAtPoint(point, size, viewport) {
+  return {
+    left: slideInside(point.clientX, size.width, viewport.width),
+    top: slideInside(point.clientY, size.height, viewport.height)
+  };
+}
+function pointBelowPos(view, pos) {
+  try {
+    const at = view.coordsAtPos(pos);
+    return { clientX: at.left, clientY: at.bottom };
+  } catch {
+    const paper = view.dom.getBoundingClientRect();
+    return { clientX: paper.left, clientY: paper.top };
+  }
+}
+function measure(panel) {
+  return {
+    size: { width: panel.offsetWidth, height: panel.offsetHeight },
+    viewport: { width: window.innerWidth, height: window.innerHeight }
+  };
+}
+function usePanelUnderControl(panel, control, open) {
+  const [position, setPosition] = useState(null);
+  useLayoutEffect(() => {
+    const box = panel.current;
+    const from = control.current;
+    if (!open || !box || !from) {
+      setPosition(null);
+      return;
+    }
+    const { size, viewport } = measure(box);
+    setPosition(
+      positionUnderControl(from.getBoundingClientRect(), size, viewport)
+    );
+  }, [panel, control, open]);
+  return position;
+}
+function usePanelAtPoint(panel, point) {
+  const [position, setPosition] = useState(null);
+  const { clientX, clientY } = point;
+  useLayoutEffect(() => {
+    const box = panel.current;
+    if (!box) return;
+    const { size, viewport } = measure(box);
+    setPosition(positionAtPoint({ clientX, clientY }, size, viewport));
+  }, [panel, clientX, clientY]);
+  return position;
+}
+export {
+  pointBelowPos,
+  positionAtPoint,
+  positionUnderControl,
+  usePanelAtPoint,
+  usePanelUnderControl
+};

package/dist/ui/presets.d.ts

@@ -0,0 +1,11 @@
+/** Optional picker values; omitted fields use the package's exported defaults. */
+import type { ColorRow } from "../styles/colors";
+import type { LineSpacingOption } from "../styles/lineSpacings";
+import type { CellBorderOption } from "../table/cellBorders";
+export interface DocxEditorPresets {
+    fonts?: readonly string[];
+    colors?: readonly ColorRow[];
+    fontSizes?: readonly number[];
+    lineSpacings?: readonly LineSpacingOption[];
+    cellBorders?: readonly CellBorderOption[];
+}

package/dist/ui/rovingFocus.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Maintains one tab stop in a composite widget. It writes `tabIndex` onto discovered controls and
+ * focuses without scrolling because scrolling dismisses floating panels.
+ */
+import { type RefObject } from "react";
+export interface RovingFocusOptions {
+    container: RefObject<HTMLElement | null>;
+    selector: string;
+    /** Limits which discovered controls can hold the tab stop. */
+    navigable?: (control: HTMLElement) => boolean;
+    /** Initial control; defaults to the first navigable control. */
+    start?: (controls: readonly HTMLElement[]) => HTMLElement | undefined;
+    /** Moves focus to the initial control when the widget appears. */
+    takeFocus?: boolean;
+}
+export interface RovingFocus {
+    controls: () => HTMLElement[];
+    moveTo: (control: HTMLElement | undefined) => void;
+}
+export declare function useRovingFocus({ container, selector, navigable, start, takeFocus, }: RovingFocusOptions): RovingFocus;

package/dist/ui/rovingFocus.js

@@ -0,0 +1,61 @@
+// src/ui/rovingFocus.ts
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef
+} from "react";
+function useRovingFocus({
+  container,
+  selector,
+  navigable,
+  start,
+  takeFocus = false
+}) {
+  const stop = useRef(null);
+  const took = useRef(false);
+  const all = useCallback(
+    () => Array.from(
+      container.current?.querySelectorAll(selector) ?? []
+    ),
+    [container, selector]
+  );
+  const controls = useCallback(
+    () => navigable ? all().filter(navigable) : all(),
+    [all, navigable]
+  );
+  const write = useCallback(
+    (onto) => {
+      for (const control of all()) control.tabIndex = control === onto ? 0 : -1;
+      stop.current = onto;
+    },
+    [all]
+  );
+  const moveTo = useCallback(
+    (control) => {
+      if (!control || !controls().includes(control)) return;
+      write(control);
+      control.focus({ preventScroll: true });
+    },
+    [controls, write]
+  );
+  useLayoutEffect(() => {
+    const found = controls();
+    if (found.length === 0) {
+      write(null);
+      took.current = false;
+      return;
+    }
+    const focused = found.find((control) => control === document.activeElement);
+    const held = stop.current;
+    const onto = focused ?? (held && found.includes(held) ? held : start?.(found) ?? found[0]) ?? null;
+    write(onto);
+    if (!takeFocus || took.current || !onto) return;
+    onto.focus({ preventScroll: true });
+    took.current = document.activeElement === onto;
+  });
+  return useMemo(() => ({ controls, moveTo }), [controls, moveTo]);
+}
+export {
+  useRovingFocus
+};

package/dist/ui/runCommand.d.ts

@@ -0,0 +1,5 @@
+/** Runs editor commands and restores focus for continued typing. */
+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;

package/dist/ui/runCommand.js

@@ -0,0 +1,13 @@
+// src/ui/runCommand.ts
+function apply(view, command) {
+  command(view.state, (tr) => view.dispatch(tr), view);
+}
+function commandRunner(view) {
+  return (command) => {
+    apply(view, command);
+    view.focus();
+  };
+}
+export {
+  commandRunner
+};

package/dist/ui/useDismiss.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dismisses a panel on outside press, Escape, scroll, or resize. Scroll uses capture to catch
+ * nested containers; events inside the panel are ignored so its own scrolling stays open.
+ */
+import { type RefObject } from "react";
+export declare function useDismiss(box: RefObject<HTMLElement | null>, open: boolean, onDismiss: () => void): void;

package/dist/ui/useDismiss.js

@@ -0,0 +1,31 @@
+// src/ui/useDismiss.ts
+import { useEffect } from "react";
+function useDismiss(box, open, onDismiss) {
+  useEffect(() => {
+    if (!open) return;
+    const inside = (event) => {
+      const target = event.target;
+      return target instanceof Node && box.current?.contains(target) === true;
+    };
+    const onOutside = (event) => {
+      if (inside(event)) return;
+      onDismiss();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onDismiss();
+    };
+    document.addEventListener("mousedown", onOutside, true);
+    document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("scroll", onOutside, true);
+    window.addEventListener("resize", onDismiss);
+    return () => {
+      document.removeEventListener("mousedown", onOutside, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("scroll", onOutside, true);
+      window.removeEventListener("resize", onDismiss);
+    };
+  }, [box, open, onDismiss]);
+}
+export {
+  useDismiss
+};

package/dist/ui/useFitWidthZoom.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from "react";
+export declare function useFitWidthZoom(container: RefObject<HTMLElement | null>, pageWidth: number): number;