@portone/docx-editor 0.1.0

package/dist/ui/ColorPicker.js

@@ -0,0 +1,165 @@
+// src/ui/ColorPicker.tsx
+import { Check } from "lucide-react";
+import { useRef, useState } from "react";
+import { editorClassNames } from "../styles/classNames.js";
+import { DEFAULT_COLORS } from "../styles/colors.js";
+import { useGridKeyboard } from "./useGridKeyboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FALLBACK_CUSTOM_COLOR = "#000000";
+function normalizeHexColor(value) {
+  const digits = value.trim().replace(/^#/, "");
+  if (/^[0-9a-f]{3}$/i.test(digits)) {
+    return `#${[...digits].map((digit) => `${digit}${digit}`).join("")}`.toUpperCase();
+  }
+  return /^[0-9a-f]{6}$/i.test(digits) ? `#${digits.toUpperCase()}` : null;
+}
+function sameColor(a, b) {
+  return a !== null && a.toLowerCase() === b.toLowerCase();
+}
+function ColorPicker({
+  current,
+  colors = DEFAULT_COLORS,
+  clearLabel = "None",
+  close,
+  takeFocus,
+  onPick
+}) {
+  const grid = useRef(null);
+  const nativePicker = useRef(null);
+  const applyButton = useRef(null);
+  const initialCustomColor = normalizeHexColor(current ?? "");
+  const [customColor, setCustomColor] = useState(
+    initialCustomColor ?? FALLBACK_CUSTOM_COLOR
+  );
+  const normalizedCustomColor = normalizeHexColor(customColor);
+  const keys = useGridKeyboard({
+    grid,
+    onClose: close,
+    start: (cells) => cells.find((cell) => cell.getAttribute("aria-selected") === "true"),
+    takeFocus
+  });
+  const selectedCell = () => grid.current?.querySelector('[tabindex="0"]');
+  const onPanelKeyDownCapture = (event) => {
+    if (event.key !== "Tab" || event.shiftKey || !(event.target instanceof Element) || !event.target.closest('[role="grid"]')) {
+      return;
+    }
+    nativePicker.current?.focus();
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  const onCustomKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    if (event.shiftKey && event.target === nativePicker.current) {
+      selectedCell()?.focus({ preventScroll: true });
+      event.preventDefault();
+      return;
+    }
+    if (!event.shiftKey && event.target === applyButton.current) {
+      close();
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: editorClassNames.colorPicker,
+      onKeyDownCapture: onPanelKeyDownCapture,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: grid,
+            className: editorClassNames.colorGrid,
+            role: "grid",
+            "aria-label": "Colors",
+            ...keys,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: editorClassNames.colorClearRow, role: "row", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  className: editorClassNames.menuItem,
+                  "aria-selected": current === null,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => onPick(null),
+                  children: clearLabel
+                }
+              ) }),
+              colors.map((row) => /* @__PURE__ */ jsx("div", { className: editorClassNames.colorRow, role: "row", children: row.map((hex) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  className: editorClassNames.swatch,
+                  "aria-label": hex,
+                  "aria-selected": sameColor(current, hex),
+                  style: { background: hex },
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => onPick(hex)
+                },
+                hex
+              )) }, row[0]))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: editorClassNames.colorCustom,
+            onKeyDown: onCustomKeyDown,
+            onSubmit: (event) => {
+              event.preventDefault();
+              if (normalizedCustomColor) onPick(normalizedCustomColor);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: nativePicker,
+                  type: "color",
+                  className: editorClassNames.colorNativeInput,
+                  "aria-label": "Choose custom color",
+                  value: normalizedCustomColor ?? initialCustomColor ?? FALLBACK_CUSTOM_COLOR,
+                  onChange: (event) => {
+                    const color = normalizeHexColor(event.target.value);
+                    if (color) setCustomColor(color);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  className: editorClassNames.colorHexInput,
+                  "aria-label": "Custom color",
+                  "aria-invalid": customColor.length > 0 && !normalizedCustomColor,
+                  autoComplete: "off",
+                  maxLength: 7,
+                  placeholder: "#RRGGBB",
+                  spellCheck: false,
+                  value: customColor,
+                  onChange: (event) => setCustomColor(event.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: applyButton,
+                  type: "submit",
+                  className: editorClassNames.colorApply,
+                  "aria-label": "Apply color",
+                  disabled: !normalizedCustomColor,
+                  children: /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ColorPicker
+};

package/dist/ui/CommentsPanel.d.ts

@@ -0,0 +1,15 @@
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+import { type CommentAuthor } from "../editor/commands/commentCommands";
+export interface CommentsPanelProps {
+    view: EditorView;
+    state: EditorState;
+    readOnly: boolean;
+    composerOpen: boolean;
+    author: CommentAuthor;
+    closeComposer: () => void;
+    scrollContainer: HTMLElement | null;
+    allCommentsOpen: boolean;
+}
+export declare function CommentsPanel({ view, state, readOnly, composerOpen, author, closeComposer, scrollContainer, allCommentsOpen, }: CommentsPanelProps): ReactElement;

package/dist/ui/CommentsPanel.js

@@ -0,0 +1,348 @@
+// src/ui/CommentsPanel.tsx
+import { Check, Pencil, RotateCcw, Trash2 } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import {
+  addComment,
+  addCommentReply,
+  documentComments,
+  removeComment,
+  removeCommentReply,
+  selectComment,
+  setCommentResolved,
+  updateComment,
+  updateCommentReply
+} from "../editor/commands/commentCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { CommentComposer, FocusedTextarea } from "./comments/CommentComposer.js";
+import {
+  COMPOSER_POSITION,
+  useCommentRailLayout
+} from "./comments/useCommentRailLayout.js";
+import { tooltipAttribute } from "./Tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function shownDate(value) {
+  if (value === null) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.valueOf())) return value;
+  return `${date.toISOString().slice(0, 16).replace("T", " ")} UTC`;
+}
+function run(view, command) {
+  const applied = command(
+    view.state,
+    (transaction) => view.dispatch(transaction),
+    view
+  );
+  if (applied) view.focus();
+  return applied;
+}
+function sameTarget(left, right) {
+  return left?.commentId === right.commentId && left.replyId === right.replyId;
+}
+function CommentsPanel({
+  view,
+  state,
+  readOnly,
+  composerOpen,
+  author,
+  closeComposer,
+  scrollContainer,
+  allCommentsOpen
+}) {
+  const comments = useMemo(() => documentComments(state), [state.doc]);
+  const panel = useRef(null);
+  const [editing, setEditing] = useState(null);
+  const [draft, setDraft] = useState("");
+  const [replying, setReplying] = useState(null);
+  const composerSelectionPos = composerOpen ? state.selection.from : -1;
+  const visible = useMemo(
+    () => allCommentsOpen ? [...comments].sort((left, right) => {
+      const leftTime = Date.parse(left.date ?? "");
+      const rightTime = Date.parse(right.date ?? "");
+      if (Number.isNaN(leftTime) && Number.isNaN(rightTime)) {
+        return right.referencePos - left.referencePos;
+      }
+      if (Number.isNaN(leftTime)) return 1;
+      if (Number.isNaN(rightTime)) return -1;
+      return rightTime - leftTime;
+    }) : comments.filter((comment) => !comment.resolved),
+    [allCommentsOpen, comments]
+  );
+  const { positions, canvasHeight } = useCommentRailLayout({
+    panel,
+    view,
+    scrollContainer,
+    visible,
+    composerOpen,
+    composerSelectionPos,
+    allCommentsOpen
+  });
+  const beginEdit = (commentId, replyId, text) => {
+    setReplying(null);
+    setEditing({ commentId, replyId });
+    setDraft(text);
+  };
+  const saveEdit = (comment, replyId) => {
+    const original = replyId === null ? comment.text : comment.replies.find((reply) => reply.id === replyId)?.text ?? "";
+    const saved = draft === original || run(
+      view,
+      replyId === null ? updateComment(comment.id, draft) : updateCommentReply(comment.id, replyId, draft)
+    );
+    if (saved) {
+      setEditing(null);
+      setDraft("");
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: panel,
+      className: editorClassNames.commentsPanel,
+      "aria-label": "Comments",
+      "data-view": allCommentsOpen ? "all" : "rail",
+      style: allCommentsOpen ? void 0 : { height: `${canvasHeight}px` },
+      children: [
+        allCommentsOpen && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentsHeading, children: /* @__PURE__ */ jsx("h2", { children: "All comments" }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: editorClassNames.commentsCanvas,
+            style: { height: allCommentsOpen ? void 0 : `${canvasHeight}px` },
+            children: [
+              composerOpen && !readOnly && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: editorClassNames.commentPosition,
+                  "data-comment-position": COMPOSER_POSITION,
+                  style: allCommentsOpen ? void 0 : {
+                    top: `${positions.get(COMPOSER_POSITION) ?? 64}px`
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    CommentComposer,
+                    {
+                      author,
+                      label: "Comment text",
+                      submitLabel: "Comment",
+                      onClose: closeComposer,
+                      onSubmit: (text) => run(
+                        view,
+                        addComment({
+                          text,
+                          author: author.name,
+                          initials: author.initials
+                        })
+                      )
+                    }
+                  )
+                }
+              ),
+              visible.map((comment) => {
+                const rootTarget = { commentId: comment.id, replyId: null };
+                const rootEditing = !readOnly && sameTarget(editing, rootTarget);
+                return /* @__PURE__ */ jsx(
+                  "article",
+                  {
+                    className: editorClassNames.commentPosition,
+                    "data-resolved": comment.resolved ? "true" : void 0,
+                    "data-comment-position": comment.id,
+                    style: allCommentsOpen ? void 0 : { top: `${positions.get(comment.id) ?? 64}px` },
+                    children: /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentCard, children: [
+                      /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentHeader, children: [
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: editorClassNames.commentMeta,
+                            onClick: () => run(view, selectComment(comment.id)),
+                            disabled: comment.resolved,
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: editorClassNames.commentAuthor, children: comment.author ?? "Unknown author" }),
+                              shownDate(comment.date) && /* @__PURE__ */ jsx("span", { className: editorClassNames.commentDate, children: shownDate(comment.date) })
+                            ]
+                          }
+                        ),
+                        !readOnly && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
+                          !comment.resolved && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": "Edit",
+                              ...tooltipAttribute("Edit"),
+                              onClick: () => beginEdit(comment.id, null, comment.text),
+                              children: /* @__PURE__ */ jsx(Pencil, { size: 16, "aria-hidden": "true" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": comment.resolved ? "Reopen" : "Resolve",
+                              ...tooltipAttribute(
+                                comment.resolved ? "Reopen" : "Resolve"
+                              ),
+                              onClick: () => {
+                                setReplying(null);
+                                setEditing(null);
+                                run(
+                                  view,
+                                  setCommentResolved(comment.id, !comment.resolved)
+                                );
+                              },
+                              children: comment.resolved ? /* @__PURE__ */ jsx(RotateCcw, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
+                            }
+                          ),
+                          !comment.resolved && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              "aria-label": "Delete",
+                              ...tooltipAttribute("Delete"),
+                              onClick: () => run(view, removeComment(comment.id)),
+                              children: /* @__PURE__ */ jsx(Trash2, { size: 16, "aria-hidden": "true" })
+                            }
+                          )
+                        ] })
+                      ] }),
+                      rootEditing ? /* @__PURE__ */ jsx(
+                        FocusedTextarea,
+                        {
+                          label: "Edit comment",
+                          value: draft,
+                          onChange: setDraft
+                        }
+                      ) : readOnly || comment.resolved ? /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: comment.text }) : /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: editorClassNames.commentBody,
+                          "aria-label": `Reply to comment: ${comment.text}`,
+                          onClick: () => {
+                            setEditing(null);
+                            setReplying(comment.id);
+                          },
+                          children: comment.text
+                        }
+                      ),
+                      !readOnly && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: rootEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setEditing(null), children: "Cancel" }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: editorClassNames.commentPrimaryAction,
+                            disabled: draft.trim().length === 0,
+                            onClick: () => saveEdit(comment, null),
+                            children: "Save"
+                          }
+                        )
+                      ] }) : null }),
+                      comment.replies.map((reply) => {
+                        const target = {
+                          commentId: comment.id,
+                          replyId: reply.id
+                        };
+                        const isEditing = !readOnly && sameTarget(editing, target);
+                        return /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            className: editorClassNames.commentReply,
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentMeta, children: [
+                                /* @__PURE__ */ jsx("span", { className: editorClassNames.commentAuthor, children: reply.author ?? "Unknown author" }),
+                                shownDate(reply.date) && /* @__PURE__ */ jsx("span", { className: editorClassNames.commentDate, children: shownDate(reply.date) })
+                              ] }),
+                              isEditing ? /* @__PURE__ */ jsx(
+                                FocusedTextarea,
+                                {
+                                  label: "Edit reply",
+                                  value: draft,
+                                  onChange: setDraft
+                                }
+                              ) : /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: reply.text }),
+                              !readOnly && !comment.resolved && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: () => setEditing(null),
+                                    children: "Cancel"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: editorClassNames.commentPrimaryAction,
+                                    disabled: draft.trim().length === 0,
+                                    onClick: () => saveEdit(comment, reply.id),
+                                    children: "Save"
+                                  }
+                                )
+                              ] }) : /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: editorClassNames.commentIconActions,
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        "aria-label": "Edit reply",
+                                        ...tooltipAttribute("Edit reply"),
+                                        onClick: () => beginEdit(comment.id, reply.id, reply.text),
+                                        children: /* @__PURE__ */ jsx(Pencil, { size: 16, "aria-hidden": "true" })
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx(
+                                      "button",
+                                      {
+                                        type: "button",
+                                        "aria-label": "Delete reply",
+                                        ...tooltipAttribute("Delete reply"),
+                                        onClick: () => run(
+                                          view,
+                                          removeCommentReply(comment.id, reply.id)
+                                        ),
+                                        children: /* @__PURE__ */ jsx(Trash2, { size: 16, "aria-hidden": "true" })
+                                      }
+                                    )
+                                  ]
+                                }
+                              ) })
+                            ]
+                          },
+                          reply.id
+                        );
+                      }),
+                      replying === comment.id && !readOnly && !comment.resolved && /* @__PURE__ */ jsx(
+                        CommentComposer,
+                        {
+                          author,
+                          label: "Reply text",
+                          submitLabel: "Reply",
+                          onClose: () => setReplying(null),
+                          onSubmit: (text) => run(
+                            view,
+                            addCommentReply(comment.id, {
+                              text,
+                              author: author.name,
+                              initials: author.initials
+                            })
+                          )
+                        }
+                      )
+                    ] })
+                  },
+                  comment.id
+                );
+              }),
+              allCommentsOpen && visible.length === 0 && !composerOpen && /* @__PURE__ */ jsx("p", { className: editorClassNames.commentsEmpty, children: "This document has no comments." })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CommentsPanel
+};

package/dist/ui/FontFamilySelect.d.ts

@@ -0,0 +1,14 @@
+/** Shows the resolved font, leaves mixed selections blank, and clears explicit fonts via Default. */
+import type { ReactElement } from "react";
+import { type ActiveFontFamily } from "../editor/commands/formattingCommands";
+import { type FontFallbacks } from "../styles/fontStack";
+import type { RunCommand } from "./runCommand";
+export interface FontFamilySelectProps {
+    current: ActiveFontFamily;
+    documentFonts: readonly string[];
+    fonts?: readonly string[];
+    fontFallbacks?: FontFallbacks;
+    disabled?: boolean;
+    run: RunCommand;
+}
+export declare function FontFamilySelect({ current, documentFonts, fonts, fontFallbacks, disabled, run, }: FontFamilySelectProps): ReactElement;

package/dist/ui/FontFamilySelect.js

@@ -0,0 +1,59 @@
+// src/ui/FontFamilySelect.tsx
+import {
+  setFontFamily
+} from "../editor/commands/formattingCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { withFontFallback } from "../styles/fontStack.js";
+import { DEFAULT_FONTS } from "../styles/fonts.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LABEL = "Font";
+var CLEAR = ";default";
+var MIXED = "";
+function optionNames(current, fonts, documentFonts) {
+  const names = [...fonts, ...documentFonts];
+  if (current.kind !== "mixed" && !names.includes(current.name)) {
+    names.push(current.name);
+  }
+  return Array.from(new Set(names));
+}
+function FontFamilySelect({
+  current,
+  documentFonts,
+  fonts = DEFAULT_FONTS,
+  fontFallbacks,
+  disabled,
+  run
+}) {
+  const value = current.kind === "mixed" ? MIXED : current.name;
+  return /* @__PURE__ */ jsx(Tooltip, { label: LABEL, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: `${editorClassNames.toolbarSelect} ${editorClassNames.fontFamilySelect}`,
+      "aria-label": LABEL,
+      value,
+      disabled,
+      onChange: (event) => {
+        const chosen = event.target.value;
+        if (chosen === MIXED) return;
+        run(setFontFamily(chosen === CLEAR ? null : chosen));
+      },
+      children: [
+        current.kind === "mixed" && /* @__PURE__ */ jsx("option", { value: MIXED }),
+        /* @__PURE__ */ jsx("option", { value: CLEAR, children: "Default" }),
+        optionNames(current, fonts, documentFonts).map((name) => /* @__PURE__ */ jsx(
+          "option",
+          {
+            value: name,
+            style: { fontFamily: withFontFallback(`"${name}"`, fontFallbacks) },
+            children: name
+          },
+          name
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  FontFamilySelect
+};

package/dist/ui/FontSizeSelect.d.ts

@@ -0,0 +1,11 @@
+/** Shows the resolved size, leaves mixed selections blank, and clears explicit sizes via Default. */
+import type { ReactElement } from "react";
+import { type ActiveFontSize } from "../editor/commands/formattingCommands";
+import type { RunCommand } from "./runCommand";
+export interface FontSizeSelectProps {
+    current: ActiveFontSize;
+    fontSizes?: readonly number[];
+    disabled?: boolean;
+    run: RunCommand;
+}
+export declare function FontSizeSelect({ current, fontSizes, disabled, run, }: FontSizeSelectProps): ReactElement;

package/dist/ui/FontSizeSelect.js

@@ -0,0 +1,49 @@
+// src/ui/FontSizeSelect.tsx
+import {
+  setFontSize
+} from "../editor/commands/formattingCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { DEFAULT_FONT_SIZES } from "../styles/fontSizes.js";
+import { Tooltip } from "./Tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LABEL = "Font size";
+var CLEAR = "default";
+var MIXED = "";
+function FontSizeSelect({
+  current,
+  fontSizes = DEFAULT_FONT_SIZES,
+  disabled,
+  run
+}) {
+  const value = current.kind === "mixed" ? MIXED : `${current.pt}`;
+  const extra = current.kind !== "mixed" && !fontSizes.includes(current.pt) ? current.pt : null;
+  return /* @__PURE__ */ jsx(Tooltip, { label: LABEL, children: /* @__PURE__ */ jsxs(
+    "select",
+    {
+      className: editorClassNames.toolbarSelect,
+      "aria-label": LABEL,
+      value,
+      disabled,
+      onChange: (event) => {
+        const chosen = event.target.value;
+        if (chosen === MIXED) return;
+        run(setFontSize(chosen === CLEAR ? null : Number(chosen)));
+      },
+      children: [
+        current.kind === "mixed" && /* @__PURE__ */ jsx("option", { value: MIXED }),
+        /* @__PURE__ */ jsx("option", { value: CLEAR, children: "Default" }),
+        extra !== null && /* @__PURE__ */ jsxs("option", { value: `${extra}`, children: [
+          extra,
+          "pt"
+        ] }),
+        fontSizes.map((pt) => /* @__PURE__ */ jsxs("option", { value: `${pt}`, children: [
+          pt,
+          "pt"
+        ] }, pt))
+      ]
+    }
+  ) });
+}
+export {
+  FontSizeSelect
+};

package/dist/ui/InsertImageButton.d.ts

@@ -0,0 +1,9 @@
+/** Toolbar button backed by a hidden native image file input. */
+import type { EditorState } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+import { type ReactElement } from "react";
+export interface InsertImageButtonProps {
+    view: EditorView;
+    state: EditorState;
+}
+export declare function InsertImageButton({ view, state, }: InsertImageButtonProps): ReactElement;