@portone/docx-editor 0.1.0

package/dist/ui/Toolbar.js

@@ -0,0 +1,448 @@
+// src/ui/Toolbar.tsx
+import {
+  Baseline,
+  Bold,
+  Highlighter,
+  IndentDecrease,
+  IndentIncrease,
+  Italic,
+  Link,
+  List,
+  ListChevronsUpDown,
+  ListOrdered,
+  MessagesSquare,
+  Redo2,
+  Strikethrough,
+  Table,
+  Underline,
+  Undo2
+} from "lucide-react";
+import { useMemo, useRef } from "react";
+import {
+  activeFontFamily,
+  activeFontSize,
+  activeTextBackground,
+  activeTextColor,
+  canFormatText,
+  documentFontNames,
+  isBoldActive,
+  isItalicActive,
+  isStrikeActive,
+  isUnderlineActive,
+  setTextBackground,
+  setTextColor,
+  toggleBold,
+  toggleItalic,
+  toggleStrike,
+  toggleUnderline
+} from "../editor/commands/formattingCommands.js";
+import { redo, undo } from "../editor/commands/historyCommands.js";
+import {
+  canDecreaseIndent,
+  canIncreaseIndent,
+  decreaseIndent,
+  increaseIndent
+} from "../editor/commands/indentCommands.js";
+import {
+  activeListKind,
+  toggleBulletList,
+  toggleNumberedList
+} from "../editor/commands/listCommands.js";
+import {
+  activeParagraphAlign,
+  activeParagraphStyle,
+  canSetParagraphAlign
+} from "../editor/commands/paragraphCommands.js";
+import { canSetLineSpacing } from "../editor/commands/spacingCommands.js";
+import {
+  documentDefaults,
+  documentParagraphStyles
+} from "../editor/documentStyles.js";
+import { canInsertTable } from "../editor/insertTable.js";
+import { openLinkPanel } from "../editor/plugins/linkPanel.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { AlignMenu, alignIcon } from "./AlignMenu.js";
+import { CellStyleGroup } from "./CellStyleGroup.js";
+import { ColorPicker } from "./ColorPicker.js";
+import { FontFamilySelect } from "./FontFamilySelect.js";
+import { FontSizeSelect } from "./FontSizeSelect.js";
+import { InsertImageButton } from "./InsertImageButton.js";
+import { useLinearWalk } from "./keyboardWalk.js";
+import { ParagraphStyleSelect } from "./ParagraphStyleSelect.js";
+import { Popover } from "./Popover.js";
+import { commandRunner } from "./runCommand.js";
+import { SpacingMenu } from "./SpacingMenu.js";
+import { TableSizePicker } from "./TableSizePicker.js";
+import { ToolbarButton } from "./ToolbarButton.js";
+import { hushedAttribute, useTooltipsHushed } from "./Tooltip.js";
+import { ZoomSelect } from "./ZoomSelect.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TEXT_TOGGLES = [
+  { label: "Bold", icon: Bold, command: toggleBold, active: isBoldActive },
+  {
+    label: "Italic",
+    icon: Italic,
+    command: toggleItalic,
+    active: isItalicActive
+  },
+  {
+    label: "Underline",
+    icon: Underline,
+    command: toggleUnderline,
+    active: isUnderlineActive
+  },
+  {
+    label: "Strikethrough",
+    icon: Strikethrough,
+    command: toggleStrike,
+    active: isStrikeActive
+  }
+];
+var LIST_TOGGLES = [
+  {
+    label: "Numbered list",
+    icon: ListOrdered,
+    kind: "numbered",
+    command: toggleNumberedList
+  },
+  {
+    label: "Bulleted list",
+    icon: List,
+    kind: "bullet",
+    command: toggleBulletList
+  }
+];
+var INDENTS = [
+  {
+    label: "Decrease indent",
+    icon: IndentDecrease,
+    command: decreaseIndent,
+    enabled: canDecreaseIndent
+  },
+  {
+    label: "Increase indent",
+    icon: IndentIncrease,
+    command: increaseIndent,
+    enabled: canIncreaseIndent
+  }
+];
+function Separator() {
+  return /* @__PURE__ */ jsx("span", { className: editorClassNames.toolbarSeparator });
+}
+var TOOLBAR_CONTROLS = `.${editorClassNames.toolbarButton},.${editorClassNames.toolbarSelect}`;
+function isLive(control) {
+  return !control.matches(":disabled");
+}
+function HistoryGroup({ state, run }) {
+  return /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: "Undo",
+        icon: Undo2,
+        disabled: !undo(state),
+        onRun: () => run(undo)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolbarButton,
+      {
+        label: "Redo",
+        icon: Redo2,
+        disabled: !redo(state),
+        onRun: () => run(redo)
+      }
+    )
+  ] });
+}
+function TextToggleGroup({
+  state,
+  run,
+  disabled
+}) {
+  return /* @__PURE__ */ jsx("div", { className: editorClassNames.toolbarGroup, children: TEXT_TOGGLES.map((toggle) => /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      label: toggle.label,
+      icon: toggle.icon,
+      pressed: toggle.active(state),
+      disabled,
+      onRun: () => run(toggle.command)
+    },
+    toggle.label
+  )) });
+}
+function ColorGroup({
+  state,
+  colors,
+  run,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Text color",
+        icon: Baseline,
+        indicatorColor: activeTextColor(state) ?? "#000000",
+        panel: "dialog",
+        disabled,
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            current: activeTextColor(state),
+            colors,
+            close,
+            takeFocus,
+            onPick: (hex) => {
+              run(setTextColor(hex));
+              close();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Highlight",
+        icon: Highlighter,
+        indicatorColor: activeTextBackground(state) ?? "transparent",
+        panel: "dialog",
+        disabled,
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            current: activeTextBackground(state),
+            colors,
+            close,
+            takeFocus,
+            onPick: (hex) => {
+              run(setTextBackground(hex));
+              close();
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function ParagraphLayoutGroup({
+  state,
+  lineSpacings,
+  run
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Alignment",
+        icon: alignIcon(activeParagraphAlign(state)),
+        panel: "menu",
+        disabled: !canSetParagraphAlign(state),
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          AlignMenu,
+          {
+            state,
+            run,
+            close,
+            takeFocus
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Line and paragraph spacing",
+        icon: ListChevronsUpDown,
+        panel: "menu",
+        disabled: !canSetLineSpacing(state),
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          SpacingMenu,
+          {
+            state,
+            lineSpacings,
+            run,
+            close,
+            takeFocus
+          }
+        )
+      }
+    )
+  ] });
+}
+function ListGroup({ state, run }) {
+  const kind = activeListKind(state);
+  return /* @__PURE__ */ jsx("div", { className: editorClassNames.toolbarGroup, children: LIST_TOGGLES.map((toggle) => /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      label: toggle.label,
+      icon: toggle.icon,
+      pressed: kind === toggle.kind,
+      disabled: !toggle.command(state),
+      onRun: () => run(toggle.command)
+    },
+    toggle.kind
+  )) });
+}
+function IndentGroup({ state, run }) {
+  return /* @__PURE__ */ jsx("div", { className: editorClassNames.toolbarGroup, children: INDENTS.map((indent) => /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      label: indent.label,
+      icon: indent.icon,
+      disabled: !indent.enabled(state),
+      onRun: () => run(indent.command)
+    },
+    indent.label
+  )) });
+}
+function Toolbar({
+  view,
+  state,
+  fontFallbacks,
+  presets,
+  onToggleComments,
+  commentsOpen = false,
+  zoom,
+  onZoomChange
+}) {
+  const run = commandRunner(view);
+  const bar = useRef(null);
+  const keys = useLinearWalk({
+    container: bar,
+    selector: TOOLBAR_CONTROLS,
+    orientation: "horizontal",
+    navigable: isLive
+  });
+  const hushed = useTooltipsHushed();
+  const doc = state.doc;
+  const defaults = documentDefaults(state);
+  const formattable = canFormatText(state);
+  const documentFonts = useMemo(
+    () => documentFontNames(doc, defaults),
+    [doc, defaults]
+  );
+  const onKeyDown = (event) => {
+    const { target } = event;
+    if (target instanceof HTMLElement && target.matches(TOOLBAR_CONTROLS)) {
+      keys.walk(event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: bar,
+      className: editorClassNames.toolbar,
+      role: "toolbar",
+      "aria-label": "Editor toolbar",
+      onKeyDown,
+      ...hushedAttribute(hushed),
+      children: [
+        /* @__PURE__ */ jsx(HistoryGroup, { state, run }),
+        /* @__PURE__ */ jsx(ZoomSelect, { zoom, onZoomChange }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+          /* @__PURE__ */ jsx(
+            ParagraphStyleSelect,
+            {
+              current: activeParagraphStyle(state),
+              styles: documentParagraphStyles(state),
+              run
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FontFamilySelect,
+            {
+              current: activeFontFamily(state, fontFallbacks),
+              documentFonts,
+              fonts: presets?.fonts,
+              fontFallbacks,
+              disabled: !formattable,
+              run
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FontSizeSelect,
+            {
+              current: activeFontSize(state),
+              fontSizes: presets?.fontSizes,
+              disabled: !formattable,
+              run
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(TextToggleGroup, { state, run, disabled: !formattable }),
+        /* @__PURE__ */ jsx(
+          ColorGroup,
+          {
+            state,
+            colors: presets?.colors,
+            run,
+            disabled: !formattable
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(
+          ParagraphLayoutGroup,
+          {
+            state,
+            lineSpacings: presets?.lineSpacings,
+            run
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(ListGroup, { state, run }),
+        /* @__PURE__ */ jsx(IndentGroup, { state, run }),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx(
+          CellStyleGroup,
+          {
+            state,
+            cellBorders: presets?.cellBorders,
+            colors: presets?.colors,
+            run
+          }
+        ),
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+          /* @__PURE__ */ jsx(
+            Popover,
+            {
+              label: "Insert table",
+              icon: Table,
+              panel: "dialog",
+              disabled: !canInsertTable(state),
+              children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(TableSizePicker, { run, close, takeFocus })
+            }
+          ),
+          /* @__PURE__ */ jsx(InsertImageButton, { view, state }),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              label: "Link",
+              icon: Link,
+              disabled: !openLinkPanel(state),
+              onRun: () => run(openLinkPanel)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              label: commentsOpen ? "Hide comments" : "Show comments",
+              icon: MessagesSquare,
+              pressed: commentsOpen,
+              disabled: !onToggleComments,
+              onRun: () => onToggleComments?.()
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Toolbar
+};

package/dist/ui/ToolbarButton.d.ts

@@ -0,0 +1,23 @@
+/** A toolbar button whose pointer activation preserves the editor selection and IME state. */
+import type { LucideIcon } from "lucide-react";
+export declare const ICON_SIZE = 16;
+/** Keyboard-generated clicks have `detail === 0`; panels use the source to decide focus. */
+export type RunSource = "pointer" | "keyboard";
+export interface ToolbarButtonProps {
+    /** Shared accessible name and tooltip text. */
+    label: string;
+    icon: LucideIcon;
+    pressed?: boolean;
+    /** Open state for disclosure buttons. */
+    expanded?: boolean;
+    popup?: "menu" | "dialog";
+    /** Optional color bar drawn under the icon. */
+    indicatorColor?: string;
+    disabled?: boolean;
+    onRun: (source: RunSource) => void;
+}
+/**
+ * `forwardRef` rather than a `ref` prop: React 18 hands a function component no `ref`
+ * in its props, so the button would never reach the popovers that focus it.
+ */
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/ui/ToolbarButton.js

@@ -0,0 +1,56 @@
+// src/ui/ToolbarButton.tsx
+import { forwardRef } from "react";
+import { editorClassNames } from "../styles/classNames.js";
+import { tooltipAttribute } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_SIZE = 16;
+var ToolbarButton = forwardRef(
+  function ToolbarButton2({
+    label,
+    icon: Icon,
+    pressed,
+    expanded,
+    popup,
+    indicatorColor,
+    disabled,
+    onRun
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: editorClassNames.toolbarButton,
+        "aria-label": label,
+        ...tooltipAttribute(label),
+        "aria-pressed": pressed,
+        "aria-expanded": expanded,
+        "aria-haspopup": popup,
+        disabled,
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: (event) => onRun(event.detail > 0 ? "pointer" : "keyboard"),
+        children: indicatorColor ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: editorClassNames.toolbarColorIcon,
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: ICON_SIZE }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: editorClassNames.toolbarColorIndicator,
+                  style: { backgroundColor: indicatorColor }
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(Icon, { size: ICON_SIZE, "aria-hidden": "true" })
+      }
+    );
+  }
+);
+export {
+  ICON_SIZE,
+  ToolbarButton
+};

package/dist/ui/Tooltip.d.ts

@@ -0,0 +1,19 @@
+/** CSS-rendered tooltip shown on hover or keyboard focus. */
+import { type ReactElement, type ReactNode } from "react";
+/** Adds tooltip text to an element that can render its own pseudo-element. */
+export declare function tooltipAttribute(label: string): {
+    "data-docx-editor-tooltip": string;
+};
+/** Hides tooltips after Escape until pointer or focus movement, as required by WCAG 1.4.13. */
+export declare function useTooltipsHushed(): boolean;
+export declare function hushedAttribute(hushed: boolean): {
+    "data-docx-editor-tooltips-off": string;
+} | {
+    "data-docx-editor-tooltips-off"?: undefined;
+};
+export interface TooltipProps {
+    /** Text shown by the tooltip. */
+    label: string;
+    children: ReactNode;
+}
+export declare function Tooltip({ label, children }: TooltipProps): ReactElement;

package/dist/ui/Tooltip.js

@@ -0,0 +1,47 @@
+// src/ui/Tooltip.tsx
+import { useEffect, useState } from "react";
+import { editorAttributes, editorClassNames } from "../styles/classNames.js";
+import { jsx } from "react/jsx-runtime";
+function tooltipAttribute(label) {
+  return { [editorAttributes.tooltip]: label };
+}
+function useTooltipsHushed() {
+  const [hushed, setHushed] = useState(false);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setHushed(true);
+    };
+    document.addEventListener("keydown", onKeyDown, true);
+    return () => document.removeEventListener("keydown", onKeyDown, true);
+  }, []);
+  useEffect(() => {
+    if (!hushed) return;
+    const wake = () => setHushed(false);
+    document.addEventListener("pointermove", wake, true);
+    document.addEventListener("focusin", wake, true);
+    return () => {
+      document.removeEventListener("pointermove", wake, true);
+      document.removeEventListener("focusin", wake, true);
+    };
+  }, [hushed]);
+  return hushed;
+}
+function hushedAttribute(hushed) {
+  return hushed ? { [editorAttributes.tooltipsHushed]: "" } : {};
+}
+function Tooltip({ label, children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: editorClassNames.tooltipWrapper,
+      ...tooltipAttribute(label),
+      children
+    }
+  );
+}
+export {
+  Tooltip,
+  hushedAttribute,
+  tooltipAttribute,
+  useTooltipsHushed
+};

package/dist/ui/ZoomSelect.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement } from "react";
+import { type DocxEditorZoom } from "./zoom";
+export interface ZoomSelectProps {
+    zoom: DocxEditorZoom;
+    onZoomChange: (zoom: DocxEditorZoom) => void;
+}
+export declare function ZoomSelect({ zoom, onZoomChange, }: ZoomSelectProps): ReactElement;

package/dist/ui/ZoomSelect.js

@@ -0,0 +1,44 @@
+// src/ui/ZoomSelect.tsx
+import { editorClassNames } from "../styles/classNames.js";
+import { Tooltip } from "./Tooltip.js";
+import {
+  DEFAULT_ZOOM_LEVELS,
+  normalizeZoom
+} from "./zoom.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function optionValue(zoom) {
+  return zoom === "fit-width" ? zoom : String(zoom);
+}
+function percentage(zoom) {
+  return `${Math.round(zoom * 100)}%`;
+}
+function ZoomSelect({
+  zoom,
+  onZoomChange
+}) {
+  const normalized = normalizeZoom(zoom);
+  const levels = typeof normalized === "number" && !DEFAULT_ZOOM_LEVELS.includes(
+    normalized
+  ) ? [...DEFAULT_ZOOM_LEVELS, normalized].sort((left, right) => left - right) : DEFAULT_ZOOM_LEVELS;
+  return /* @__PURE__ */ jsx(Tooltip, { label: "Zoom", children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: `${editorClassNames.toolbarSelect} ${editorClassNames.zoomSelect}`,
+      "aria-label": "Zoom",
+      value: optionValue(normalized),
+      onChange: (event) => {
+        const value = event.currentTarget.value;
+        onZoomChange(
+          value === "fit-width" ? value : normalizeZoom(Number(value))
+        );
+      },
+      children: [
+        /* @__PURE__ */ jsx("option", { value: "fit-width", children: "Fit" }),
+        levels.map((level) => /* @__PURE__ */ jsx("option", { value: level, children: percentage(level) }, level))
+      ]
+    }
+  ) });
+}
+export {
+  ZoomSelect
+};

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

@@ -0,0 +1,17 @@
+import { type ReactElement } from "react";
+import type { CommentAuthor } from "../../editor/commands/commentCommands";
+interface FocusedTextareaProps {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare function FocusedTextarea({ label, value, onChange, }: FocusedTextareaProps): ReactElement;
+export interface CommentComposerProps {
+    author: CommentAuthor;
+    label: string;
+    submitLabel: string;
+    onSubmit: (text: string) => boolean;
+    onClose: () => void;
+}
+export declare function CommentComposer({ author, label, submitLabel, onSubmit, onClose, }: CommentComposerProps): ReactElement;
+export {};