@portone/docx-editor 0.1.0

package/dist/ui/useFitWidthZoom.js

@@ -0,0 +1,26 @@
+// src/ui/useFitWidthZoom.ts
+import { useLayoutEffect, useState } from "react";
+import { fitWidthZoom } from "./zoom.js";
+function useFitWidthZoom(container, pageWidth) {
+  const [zoom, setZoom] = useState(1);
+  useLayoutEffect(() => {
+    const element = container.current;
+    if (!element) return;
+    const frameWindow = element.ownerDocument.defaultView;
+    const update = () => {
+      setZoom(fitWidthZoom(element.clientWidth, pageWidth));
+    };
+    update();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(element);
+    frameWindow?.addEventListener("resize", update, { passive: true });
+    return () => {
+      observer?.disconnect();
+      frameWindow?.removeEventListener("resize", update);
+    };
+  }, [container, pageWidth]);
+  return zoom;
+}
+export {
+  useFitWidthZoom
+};

package/dist/ui/useGridKeyboard.d.ts

@@ -0,0 +1,12 @@
+/** Two-dimensional ARIA grid navigation with clamped edges and Tab dismissal. */
+import { type KeyboardEvent, type RefObject } from "react";
+export interface GridKeyboardOptions {
+    grid: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    start?: (cells: readonly HTMLElement[]) => HTMLElement | undefined;
+    takeFocus?: boolean;
+}
+export interface GridKeyboard {
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function useGridKeyboard({ grid, onClose, start, takeFocus, }: GridKeyboardOptions): GridKeyboard;

package/dist/ui/useGridKeyboard.js

@@ -0,0 +1,90 @@
+// src/ui/useGridKeyboard.ts
+import { useCallback } from "react";
+import { SCROLLING_KEYS } from "./keyboardWalk.js";
+import { useRovingFocus } from "./rovingFocus.js";
+var GRID_ROWS = '[role="row"]';
+var GRID_CELLS = '[role="gridcell"]';
+function rowsOf(grid) {
+  return Array.from(
+    grid?.querySelectorAll(GRID_ROWS) ?? [],
+    (row) => Array.from(row.querySelectorAll(GRID_CELLS))
+  );
+}
+function spotOf(rows, cell) {
+  for (const [row, cells] of rows.entries()) {
+    const column = cells.findIndex((found) => found === cell);
+    if (column !== -1) return { row, column };
+  }
+  return { row: 0, column: 0 };
+}
+function held(value, last) {
+  return Math.max(0, Math.min(value, last));
+}
+function stepped(rows, from, event) {
+  const acrossRows = (row) => ({
+    row,
+    column: held(from.column, rows[row].length - 1)
+  });
+  const wholeGrid = event.ctrlKey || event.metaKey;
+  switch (event.key) {
+    case "ArrowRight":
+      return {
+        row: from.row,
+        column: held(from.column + 1, rows[from.row].length - 1)
+      };
+    case "ArrowLeft":
+      return {
+        row: from.row,
+        column: held(from.column - 1, rows[from.row].length - 1)
+      };
+    case "ArrowDown":
+      return acrossRows(held(from.row + 1, rows.length - 1));
+    case "ArrowUp":
+      return acrossRows(held(from.row - 1, rows.length - 1));
+    case "Home":
+      return wholeGrid ? { row: 0, column: 0 } : { row: from.row, column: 0 };
+    case "End": {
+      const row = wholeGrid ? rows.length - 1 : from.row;
+      return { row, column: rows[row].length - 1 };
+    }
+    default:
+      return null;
+  }
+}
+function useGridKeyboard({
+  grid,
+  onClose,
+  start,
+  takeFocus = true
+}) {
+  const roving = useRovingFocus({
+    container: grid,
+    selector: GRID_CELLS,
+    start,
+    takeFocus
+  });
+  const onKeyDown = useCallback(
+    (event) => {
+      const rows = rowsOf(grid.current).filter((cells) => cells.length > 0);
+      if (rows.length === 0) return;
+      if (event.key === "Tab") {
+        onClose();
+        event.preventDefault();
+        return;
+      }
+      if (SCROLLING_KEYS.has(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      const to = stepped(rows, spotOf(rows, document.activeElement), event);
+      if (!to) return;
+      roving.moveTo(rows[to.row][to.column]);
+      event.preventDefault();
+    },
+    [grid, onClose, roving]
+  );
+  return { onKeyDown };
+}
+export {
+  useGridKeyboard
+};

package/dist/ui/useMenuKeyboard.d.ts

@@ -0,0 +1,12 @@
+/** ARIA menu navigation with roving focus, typeahead, and Tab dismissal. */
+import { type KeyboardEvent, type RefObject } from "react";
+export interface MenuKeyboardOptions {
+    menu: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    /** Whether focus moves into the menu when it appears. */
+    takeFocus?: boolean;
+}
+export interface MenuKeyboard {
+    onKeyDown: (event: KeyboardEvent) => void;
+}
+export declare function useMenuKeyboard({ menu, onClose, takeFocus, }: MenuKeyboardOptions): MenuKeyboard;

package/dist/ui/useMenuKeyboard.js

@@ -0,0 +1,56 @@
+// src/ui/useMenuKeyboard.ts
+import { useCallback } from "react";
+import { SCROLLING_KEYS, useLinearWalk } from "./keyboardWalk.js";
+var MENU_ROWS = '[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"]';
+function currentChoice(rows) {
+  return rows.find((row) => row.getAttribute("aria-checked") === "true");
+}
+function typedAhead(rows, from, letter) {
+  const wanted = letter.toLowerCase();
+  for (let step = 1; step <= rows.length; step += 1) {
+    const row = rows[(from + step) % rows.length];
+    if (row.textContent?.trim().toLowerCase().startsWith(wanted)) return row;
+  }
+  return void 0;
+}
+function useMenuKeyboard({
+  menu,
+  onClose,
+  takeFocus = true
+}) {
+  const rows = useLinearWalk({
+    container: menu,
+    selector: MENU_ROWS,
+    orientation: "vertical",
+    start: currentChoice,
+    takeFocus
+  });
+  const onKeyDown = useCallback(
+    (event) => {
+      const found = rows.controls();
+      if (found.length === 0) return;
+      if (rows.walk(event)) return;
+      if (event.key === "Tab") {
+        onClose();
+        event.preventDefault();
+        return;
+      }
+      if (SCROLLING_KEYS.has(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      const typed = event.key.length === 1 && event.key !== " ";
+      if (!typed || event.altKey || event.ctrlKey || event.metaKey) return;
+      const at = found.findIndex((row2) => row2 === document.activeElement);
+      const row = typedAhead(found, at === -1 ? 0 : at, event.key);
+      if (!row) return;
+      rows.moveTo(row);
+      event.preventDefault();
+    },
+    [rows, onClose]
+  );
+  return { onKeyDown };
+}
+export {
+  useMenuKeyboard
+};

package/dist/ui/zoom.d.ts

@@ -0,0 +1,4 @@
+export type DocxEditorZoom = "fit-width" | number;
+export declare const DEFAULT_ZOOM_LEVELS: readonly [0.5, 0.75, 1, 1.25, 1.5];
+export declare function normalizeZoom(zoom: DocxEditorZoom): DocxEditorZoom;
+export declare function fitWidthZoom(containerWidth: number, pageWidth: number): number;

package/dist/ui/zoom.js

@@ -0,0 +1,21 @@
+// src/ui/zoom.ts
+var DEFAULT_ZOOM_LEVELS = [0.5, 0.75, 1, 1.25, 1.5];
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 2;
+var MIN_FIT_WIDTH_ZOOM = 0.5;
+function normalizeZoom(zoom) {
+  if (zoom === "fit-width") return zoom;
+  if (!Number.isFinite(zoom)) return 1;
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom));
+}
+function fitWidthZoom(containerWidth, pageWidth) {
+  if (containerWidth <= 0 || pageWidth <= 0) return 1;
+  const availableWidth = Math.max(0, containerWidth - 32);
+  const zoom = Math.min(1, availableWidth / pageWidth);
+  return Math.max(MIN_FIT_WIDTH_ZOOM, Math.round(zoom * 100) / 100);
+}
+export {
+  DEFAULT_ZOOM_LEVELS,
+  fitWidthZoom,
+  normalizeZoom
+};

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@portone/docx-editor",
+  "version": "0.1.0",
+  "description": "A simple DOCX editor for React, built directly on OOXML.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/portone-io/docx-editor.git"
+  },
+  "homepage": "https://docx-editor.portone.io",
+  "bugs": {
+    "url": "https://github.com/portone-io/docx-editor/issues"
+  },
+  "keywords": [
+    "docx",
+    "editor",
+    "ooxml",
+    "prosemirror",
+    "react"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./commands": {
+      "types": "./dist/editor/commands/index.d.ts",
+      "default": "./dist/editor/commands/index.js"
+    },
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "default": "./dist/table/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "assets"
+  ],
+  "dependencies": {
+    "fflate": "^0.8.2",
+    "lucide-react": "^1.16.0"
+  },
+  "peerDependencies": {
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.0",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-view": "^1.41.6",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.10",
+    "@changesets/changelog-github": "^1.0.0",
+    "@changesets/cli": "^3.0.1",
+    "@playwright/test": "^1.62.1",
+    "@types/node": "^26.2.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "esbuild": "^0.28.1",
+    "jsdom": "^30.0.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.0",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-view": "^1.41.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.6"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs && tsc -p tsconfig.build.json",
+    "dev": "vite --config demo/vite.config.ts --open",
+    "build:demo": "vite build --config demo/vite.config.ts",
+    "dev:site": "pnpm --filter @portone/docx-editor-site dev",
+    "build:site": "pnpm --filter @portone/docx-editor-site build",
+    "check": "pnpm lint && pnpm typecheck && pnpm test",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p e2e && tsc --noEmit -p demo && pnpm --filter @portone/docx-editor-site typecheck",
+    "lint": "pnpm biome check . --diagnostic-level=error",
+    "test": "vitest run",
+    "test:package": "vitest run --dir packaging --no-file-parallelism",
+    "verify:package": "node scripts/verify-package.mjs",
+    "spec": "node scripts/index-ooxml-spec.mjs",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "test:e2e": "playwright test"
+  },
+  "types": "./dist/index.d.ts"
+}