tiptap-markdown-react 1.2.1 → 1.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { Markdown, MarkdownManager } from "@tiptap/markdown";
-import { g as getLocaleBundle, d as renderOrUpdateChart, e as destroyChart, u as useIsMobile, E as EditorToc, h as sameTocItems$1 } from "./ReportContentWithCharts-BMpzNVsX.js";
-import { C, a, b, c, f, m, r, s } from "./ReportContentWithCharts-BMpzNVsX.js";
+import { g as getLocaleBundle, S as SearchIcon, d as ChevronUpIcon, e as ChevronDownIcon, X as XIcon, h as ReplaceIcon, i as ReplaceAllIcon, j as renderOrUpdateChart, k as destroyChart, l as CheckIcon, T as TrashIcon, n as CopyIcon, o as ChevronsUpDownIcon, G as GripIcon, E as EraserIcon, D as DownloadIcon, u as useIsMobile, K as KeyboardIcon, p as EditorToc, I as ImagePreviewHost, q as sameTocItems$1, A as AlignRightIcon, t as AlignCenterIcon, v as AlignLeftIcon, w as CropIcon, x as CaptionsIcon, y as ExpandIcon, z as requestImagePreview, B as RotateCcwIcon, F as ExternalLinkIcon, H as TableDeleteIcon, J as ColumnBeforeIcon, L as ColumnAfterIcon, M as ColumnDeleteIcon, N as RowBeforeIcon, O as RowAfterIcon, P as RowDeleteIcon, U as UndoIcon, Q as RedoIcon, V as BoldIcon, W as ItalicIcon, Y as UnderlineIcon, Z as StrikethroughIcon, _ as CodeIcon, $ as LinkIcon, a0 as ImageIcon, a1 as DetailsIcon, a2 as AlignJustifyIcon, a3 as IndentIncreaseIcon, a4 as IndentDecreaseIcon, a5 as LineHeightIcon, a6 as ListUnorderedIcon, a7 as ListOrderedIcon, a8 as ListChecksIcon } from "./ReportContentWithCharts-B-K-EiAG.js";
+import { C, a9, aa, a, ab, ac, ad, ae, b, c, af, ag, ah, f, m, r, s } from "./ReportContentWithCharts-B-K-EiAG.js";
 import { jsx, jsxs, Fragment as Fragment$2 } from "react/jsx-runtime";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import FindAndReplace, { FindAndReplacePluginKey, createSearchRegex } from "@tiptap/extension-find-and-replace";
@@ -14,10 +14,10 @@ import { NodeViewWrapper, ReactNodeViewRenderer, useEditorState, ReactRenderer,
 import { Extension, Node as Node$1, mergeAttributes } from "@tiptap/core";
 import { createPortal } from "react-dom";
 import { useState, useEffect, useCallback, useRef, useMemo, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useImperativeHandle, Fragment as Fragment$1, useContext, createContext } from "react";
-import { e as enrichMarkdownCitations, c as styles$d } from "./ReportContent-B7okwVW0.js";
-import { R, a as a2, b as b2, s as s2 } from "./ReportContent-B7okwVW0.js";
-import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, n as normalizeImageAlign, p as prepareChartMarkdown, j as reportChart, f as CommentMark, b as baseExtensions, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, o as imageMarkdownTokenizer, q as imageParseMarkdown, t as imageRenderMarkdown, u as imageNodeHtml, v as imageFigureParseRule, w as imageCaptionAttribute, x as imageAlignAttribute, y as normalizeImageCaption, a as pureCodeBlock, c as pureImage, z as renderMathInto, A as readCurrentNumberingFormat, B as subscribeMathClick, D as applyNumberingFormat, N as NUMBERING_FORMAT_IDS, E as NUMBERING_FORMAT_LABELS, F as NUMBERING_FORMAT_PREVIEWS, d as pureChart } from "./extractToc-B50WvHao.js";
-import { P, g, e, s as s3 } from "./extractToc-B50WvHao.js";
+import { q as normalizeImageAlign, l as normalizeImageCrop, m as cropImageBox, e as enrichMarkdownCitations, o as styles$e, i as imageMarkdownTokenizer, c as imageParseMarkdown, d as imageRenderMarkdown, f as imageNodeHtml, g as imageFigureParseRule, h as imageCropAttribute, j as imageCaptionAttribute, k as imageAlignAttribute, r as normalizeImageCaption } from "./ReportContent-Cb67MCs9.js";
+import { R, a as a2, b as b2, s as s2 } from "./ReportContent-Cb67MCs9.js";
+import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, p as prepareChartMarkdown, j as reportChart, f as CommentMark, b as baseExtensions, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, a as pureCodeBlock, c as pureImage, n as renderMathInto, o as readCurrentNumberingFormat, q as subscribeMathClick, t as applyNumberingFormat, N as NUMBERING_FORMAT_IDS, u as NUMBERING_FORMAT_LABELS, v as NUMBERING_FORMAT_PREVIEWS, d as pureChart } from "./extractToc-H9otRa3G.js";
+import { P, g, e, s as s3 } from "./extractToc-H9otRa3G.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { PluginKey, Plugin, Selection, TextSelection, NodeSelection } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
@@ -364,301 +364,6 @@ function runFindCommand(run) {
     throw error;
   }
 }
-function Svg({ size = "1em", children, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...rest,
-      children
-    }
-  );
-}
-const BoldIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
-] });
-const ItalicIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
-  /* @__PURE__ */ jsx("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
-  /* @__PURE__ */ jsx("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
-] });
-const UnderlineIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
-  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
-] });
-const StrikethroughIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
-  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
-] });
-const CodeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
-  /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
-] });
-const LinkIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
-] });
-const EraserIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
-  /* @__PURE__ */ jsx("path", { d: "M22 21H7" }),
-  /* @__PURE__ */ jsx("path", { d: "m5 11 9 9" })
-] });
-const RotateCcwIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-  /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
-] });
-const ExternalLinkIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M15 3h6v6" }),
-  /* @__PURE__ */ jsx("path", { d: "M10 14 21 3" }),
-  /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
-] });
-const ImageIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
-] });
-const BlockSvg = ({ size = "1em", children, ...rest }) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none",
-    "aria-hidden": "true",
-    focusable: "false",
-    ...rest,
-    children
-  }
-);
-const AlignLeftIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "3.4", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "8.6", width: "12", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "13.8", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "19", width: "12", height: "2.4", rx: "1.2" })
-] });
-const AlignCenterIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "3.4", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "6", y: "8.6", width: "12", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "13.8", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "6", y: "19", width: "12", height: "2.4", rx: "1.2" })
-] });
-const AlignRightIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "3.4", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "9", y: "8.6", width: "12", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "13.8", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "9", y: "19", width: "12", height: "2.4", rx: "1.2" })
-] });
-const AlignJustifyIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "3.4", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "8.6", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "13.8", width: "18", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "19", width: "18", height: "2.4", rx: "1.2" })
-] });
-const IndentIncreaseIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M3 6.6 8.5 10.8 3 15 Z" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "3.6", width: "10.5", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "10.8", width: "10.5", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "18", width: "10.5", height: "2.4", rx: "1.2" })
-] });
-const IndentDecreaseIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M8.5 6.6 3 10.8 8.5 15 Z" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "3.6", width: "10.5", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "10.8", width: "10.5", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "10.5", y: "18", width: "10.5", height: "2.4", rx: "1.2" })
-] });
-const LineHeightIcon = (p) => /* @__PURE__ */ jsxs(BlockSvg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "1.8", y: "4.4", width: "2.4", height: "15.2", rx: "1.2" }),
-  /* @__PURE__ */ jsx("path", { d: "M3 2.4 5.4 5.8 H0.6 Z" }),
-  /* @__PURE__ */ jsx("path", { d: "M3 21.6 0.6 18.2 H5.4 Z" }),
-  /* @__PURE__ */ jsx("rect", { x: "9", y: "5.6", width: "12", height: "2.4", rx: "1.2" }),
-  /* @__PURE__ */ jsx("rect", { x: "9", y: "16", width: "12", height: "2.4", rx: "1.2" })
-] });
-const CaptionsIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M7 15h4" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 15h2" }),
-  /* @__PURE__ */ jsx("path", { d: "M7 11h2" }),
-  /* @__PURE__ */ jsx("path", { d: "M13 11h4" })
-] });
-const ImportIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
-  /* @__PURE__ */ jsx("path", { d: "m8 11 4 4 4-4" }),
-  /* @__PURE__ */ jsx("path", { d: "M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" })
-] });
-const ListUnorderedIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "6", y2: "6" }),
-  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "12", y2: "12" }),
-  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "18", y2: "18" }),
-  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "6", y2: "6" }),
-  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "12", y2: "12" }),
-  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "18", y2: "18" })
-] });
-const ListOrderedIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "6", y2: "6" }),
-  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "12", y2: "12" }),
-  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "18", y2: "18" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 6h1v4" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 10h2" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
-] });
-const DetailsIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "m9 7 4 5-4 5" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 7h5" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 12h5" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 17h5" })
-] });
-const ListChecksIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "m3 17 2 2 4-4" }),
-  /* @__PURE__ */ jsx("path", { d: "m3 7 2 2 4-4" }),
-  /* @__PURE__ */ jsx("path", { d: "M13 6h8" }),
-  /* @__PURE__ */ jsx("path", { d: "M13 12h8" }),
-  /* @__PURE__ */ jsx("path", { d: "M13 18h8" })
-] });
-const UndoIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11" })
-] });
-const RedoIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "m15 14 5-5-5-5" }),
-  /* @__PURE__ */ jsx("path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13" })
-] });
-const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
-const CheckIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
-const TrashIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
-  /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
-  /* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
-  /* @__PURE__ */ jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
-  /* @__PURE__ */ jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
-] });
-const LockIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-] });
-const MenuIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
-] });
-const SearchIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
-] });
-const XIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-] });
-const ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
-const ReplaceIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
-  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
-] });
-const ReplaceAllIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M14 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M19 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
-  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
-  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
-  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
-] });
-const ColumnBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "11", height: "16", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 4v16" }),
-  /* @__PURE__ */ jsx("path", { d: "M5 9v6" }),
-  /* @__PURE__ */ jsx("path", { d: "M2 12h6" })
-] });
-const ColumnAfterIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "11", height: "16", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M10 4v16" }),
-  /* @__PURE__ */ jsx("path", { d: "M19 9v6" }),
-  /* @__PURE__ */ jsx("path", { d: "M16 12h6" })
-] });
-const ColumnDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M12 4v16" }),
-  /* @__PURE__ */ jsx("path", { d: "m8 9 8 6" }),
-  /* @__PURE__ */ jsx("path", { d: "m16 9-8 6" })
-] });
-const RowBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "4", y: "10", width: "16", height: "11", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 14h16" }),
-  /* @__PURE__ */ jsx("path", { d: "M9 5h6" }),
-  /* @__PURE__ */ jsx("path", { d: "M12 2v6" })
-] });
-const RowAfterIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "4", y: "3", width: "16", height: "11", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 10h16" }),
-  /* @__PURE__ */ jsx("path", { d: "M9 19h6" }),
-  /* @__PURE__ */ jsx("path", { d: "M12 16v6" })
-] });
-const RowDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
-  /* @__PURE__ */ jsx("path", { d: "m9 8 6 8" }),
-  /* @__PURE__ */ jsx("path", { d: "m15 8-6 8" })
-] });
-const TableDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "1" }),
-  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
-  /* @__PURE__ */ jsx("path", { d: "M9 5v14" }),
-  /* @__PURE__ */ jsx("path", { d: "M15 5v14" }),
-  /* @__PURE__ */ jsx("path", { d: "m7 2 10 20" })
-] });
-const CopyIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
-] });
-const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
-  /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
-] });
-const GripIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, fill: "currentColor", strokeWidth: 0, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "6", r: "1.25" }),
-  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "6", r: "1.25" }),
-  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1.25" }),
-  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1.25" }),
-  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "18", r: "1.25" }),
-  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "18", r: "1.25" })
-] });
-const DownloadIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-  /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
-  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
-] });
-const KeyboardIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
-  /* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 8h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M10 8h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 8h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M18 8h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M6 12h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M10 12h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M14 12h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M18 12h.01" }),
-  /* @__PURE__ */ jsx("path", { d: "M7 16h10" })
-] });
 const bar$1 = "_bar_1h61e_3";
 const row$1 = "_row_1h61e_25";
 const field$1 = "_field_1h61e_43";
@@ -672,7 +377,7 @@ const toggleOn = "_toggleOn_1h61e_135";
 const iconGroup = "_iconGroup_1h61e_29";
 const spacer = "_spacer_1h61e_150";
 const readOnly = "_readOnly_1h61e_155";
-const styles$c = {
+const styles$d = {
   bar: bar$1,
   row: row$1,
   field: field$1,
@@ -796,11 +501,11 @@ function FindReplaceBar({
     });
   };
   if (!hasExtension) return null;
-  const toggleClass = (on) => `${styles$c.btn} ${styles$c.toggle}${on ? ` ${styles$c.toggleOn}` : ""}`;
+  const toggleClass = (on) => `${styles$d.btn} ${styles$d.toggle}${on ? ` ${styles$d.toggleOn}` : ""}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: className ? `${styles$c.bar} ${className}` : styles$c.bar,
+      className: className ? `${styles$d.bar} ${className}` : styles$d.bar,
       style,
       "data-find-bar": "",
       role: "dialog",
@@ -813,14 +518,14 @@ function FindReplaceBar({
         onClose();
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: styles$c.row, children: [
-          /* @__PURE__ */ jsxs("span", { className: styles$c.field, children: [
-            /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: styles$c.fieldIcon }),
+        /* @__PURE__ */ jsxs("div", { className: styles$d.row, children: [
+          /* @__PURE__ */ jsxs("span", { className: styles$d.field, children: [
+            /* @__PURE__ */ jsx(SearchIcon, { size: 14, className: styles$d.fieldIcon }),
             /* @__PURE__ */ jsx(
               "input",
               {
                 ref: inputRef,
-                className: styles$c.input,
+                className: styles$d.input,
                 "data-find-field": "search",
                 value: term,
                 onChange: (e2) => setTerm(e2.target.value),
@@ -834,7 +539,7 @@ function FindReplaceBar({
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: `${styles$c.counter}${invalidPattern ? ` ${styles$c.counterInvalid}` : ""}`,
+                className: `${styles$d.counter}${invalidPattern ? ` ${styles$d.counterInvalid}` : ""}`,
                 "data-find-counter": "",
                 "aria-live": "polite",
                 title: invalidPattern ? t.invalidRegex : void 0,
@@ -870,13 +575,13 @@ function FindReplaceBar({
               children: "ab"
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: styles$c.spacer }),
-          /* @__PURE__ */ jsxs("span", { className: styles$c.iconGroup, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$d.spacer }),
+          /* @__PURE__ */ jsxs("span", { className: styles$d.iconGroup, children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: styles$c.btn,
+                className: styles$d.btn,
                 "data-find-action": "previous",
                 title: t.previous,
                 "aria-label": t.previous,
@@ -890,7 +595,7 @@ function FindReplaceBar({
               "button",
               {
                 type: "button",
-                className: styles$c.btn,
+                className: styles$d.btn,
                 "data-find-action": "next",
                 title: t.next,
                 "aria-label": t.next,
@@ -904,7 +609,7 @@ function FindReplaceBar({
               "button",
               {
                 type: "button",
-                className: styles$c.btn,
+                className: styles$d.btn,
                 "data-find-action": "close",
                 title: t.close,
                 "aria-label": t.close,
@@ -914,11 +619,11 @@ function FindReplaceBar({
             )
           ] })
         ] }),
-        editor.isEditable ? /* @__PURE__ */ jsxs("div", { className: styles$c.row, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$c.field, children: /* @__PURE__ */ jsx(
+        editor.isEditable ? /* @__PURE__ */ jsxs("div", { className: styles$d.row, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$d.field, children: /* @__PURE__ */ jsx(
             "input",
             {
-              className: styles$c.input,
+              className: styles$d.input,
               "data-find-field": "replace",
               value: replaceTerm,
               onChange: (e2) => setReplaceTerm(e2.target.value),
@@ -928,12 +633,12 @@ function FindReplaceBar({
               spellCheck: false
             }
           ) }),
-          /* @__PURE__ */ jsx("span", { className: styles$c.spacer }),
+          /* @__PURE__ */ jsx("span", { className: styles$d.spacer }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: styles$c.btn,
+              className: styles$d.btn,
               "data-find-action": "replace",
               title: t.replaceOne,
               "aria-label": t.replaceOne,
@@ -947,7 +652,7 @@ function FindReplaceBar({
             "button",
             {
               type: "button",
-              className: styles$c.btn,
+              className: styles$d.btn,
               "data-find-action": "replace-all",
               title: t.replaceAll,
               "aria-label": t.replaceAll,
@@ -957,7 +662,7 @@ function FindReplaceBar({
               children: /* @__PURE__ */ jsx(ReplaceAllIcon, { size: 16 })
             }
           )
-        ] }) : /* @__PURE__ */ jsx("div", { className: styles$c.row, children: /* @__PURE__ */ jsx("span", { className: styles$c.readOnly, children: t.readOnly }) })
+        ] }) : /* @__PURE__ */ jsx("div", { className: styles$d.row, children: /* @__PURE__ */ jsx("span", { className: styles$d.readOnly, children: t.readOnly }) })
       ]
     }
   );
@@ -1128,7 +833,7 @@ const fileName = "_fileName_1k6n1_205";
 const actions = "_actions_1k6n1_215";
 const progressText = "_progressText_1k6n1_222";
 const remove = "_remove_1k6n1_228";
-const styles$b = {
+const styles$c = {
   wrap,
   dropzone,
   dragActive,
@@ -1303,14 +1008,14 @@ function ImageUploadView(props) {
   const hasFiles = items.length > 0;
   const maxSizeMb = maxSize > 0 ? toMb(maxSize) : null;
   const dropzoneClass = [
-    styles$b.dropzone,
-    dragActive2 ? styles$b.dragActive : "",
-    dragOver2 ? styles$b.dragOver : ""
+    styles$c.dropzone,
+    dragActive2 ? styles$c.dragActive : "",
+    dragOver2 ? styles$c.dragOver : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     NodeViewWrapper,
     {
-      className: styles$b.wrap,
+      className: styles$c.wrap,
       "data-image-upload": "",
       tabIndex: editable ? 0 : void 0,
       onClick: openPicker,
@@ -1342,28 +1047,28 @@ function ImageUploadView(props) {
             },
             onDrop,
             children: [
-              /* @__PURE__ */ jsxs("span", { className: styles$b.fileShape, "aria-hidden": true, children: [
+              /* @__PURE__ */ jsxs("span", { className: styles$c.fileShape, "aria-hidden": true, children: [
                 /* @__PURE__ */ jsx(FileDocIcon, {}),
                 /* @__PURE__ */ jsx(FileCornerIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: styles$b.fileBadge, children: /* @__PURE__ */ jsx(CloudUploadIcon, {}) })
+                /* @__PURE__ */ jsx("span", { className: styles$c.fileBadge, children: /* @__PURE__ */ jsx(CloudUploadIcon, {}) })
               ] }),
-              /* @__PURE__ */ jsxs("span", { className: styles$b.text, children: [
-                /* @__PURE__ */ jsxs("span", { className: styles$b.textMain, children: [
-                  /* @__PURE__ */ jsx("em", { className: styles$b.textEm, children: labels.dropzoneClick }),
+              /* @__PURE__ */ jsxs("span", { className: styles$c.text, children: [
+                /* @__PURE__ */ jsxs("span", { className: styles$c.textMain, children: [
+                  /* @__PURE__ */ jsx("em", { className: styles$c.textEm, children: labels.dropzoneClick }),
                   labels.dropzoneRest
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: styles$b.subtext, children: labels.dropzoneLimits(limit, maxSizeMb) })
+                /* @__PURE__ */ jsx("span", { className: styles$c.subtext, children: labels.dropzoneLimits(limit, maxSizeMb) })
               ] })
             ]
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: styles$b.previews, "data-image-upload-list": "", children: [
-          items.length > 1 && /* @__PURE__ */ jsxs("div", { className: styles$b.header, children: [
+        ) : /* @__PURE__ */ jsxs("div", { className: styles$c.previews, "data-image-upload-list": "", children: [
+          items.length > 1 && /* @__PURE__ */ jsxs("div", { className: styles$c.header, children: [
             /* @__PURE__ */ jsx("span", { children: labels.uploadingCount(items.length) }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: styles$b.clearAll,
+                className: styles$c.clearAll,
                 onClick: (e2) => {
                   e2.stopPropagation();
                   clearAll2();
@@ -1375,27 +1080,27 @@ function ImageUploadView(props) {
           items.map((it) => /* @__PURE__ */ jsxs(
             "div",
             {
-              className: styles$b.preview,
+              className: styles$c.preview,
               "data-image-upload-item": "",
               children: [
                 it.status === "uploading" && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$b.progress,
+                    className: styles$c.progress,
                     style: { width: `${it.progress}%` },
                     "aria-hidden": true
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: styles$b.previewContent, children: [
-                  /* @__PURE__ */ jsxs("span", { className: styles$b.fileInfo, children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$b.fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CloudUploadIcon, {}) }),
-                    /* @__PURE__ */ jsxs("span", { className: styles$b.details, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$b.fileName, children: it.file.name }),
-                      /* @__PURE__ */ jsx("span", { className: styles$b.subtext, children: it.status === "error" ? labels.failed : formatFileSize(it.file.size) })
+                /* @__PURE__ */ jsxs("div", { className: styles$c.previewContent, children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles$c.fileInfo, children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$c.fileIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CloudUploadIcon, {}) }),
+                    /* @__PURE__ */ jsxs("span", { className: styles$c.details, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$c.fileName, children: it.file.name }),
+                      /* @__PURE__ */ jsx("span", { className: styles$c.subtext, children: it.status === "error" ? labels.failed : formatFileSize(it.file.size) })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxs("span", { className: styles$b.actions, children: [
-                    it.status === "uploading" && /* @__PURE__ */ jsxs("span", { className: styles$b.progressText, children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles$c.actions, children: [
+                    it.status === "uploading" && /* @__PURE__ */ jsxs("span", { className: styles$c.progressText, children: [
                       Math.round(it.progress),
                       "%"
                     ] }),
@@ -1403,7 +1108,7 @@ function ImageUploadView(props) {
                       "button",
                       {
                         type: "button",
-                        className: styles$b.remove,
+                        className: styles$c.remove,
                         "data-image-upload-remove": "",
                         title: labels.remove,
                         "aria-label": labels.remove,
@@ -1462,7 +1167,7 @@ function FileDocIcon() {
       viewBox: "0 0 43 57",
       fill: "none",
       "aria-hidden": true,
-      className: styles$b.fileShapeDoc,
+      className: styles$c.fileShapeDoc,
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -1485,7 +1190,7 @@ function FileCornerIcon() {
       viewBox: "0 0 10 10",
       fill: "currentColor",
       "aria-hidden": true,
-      className: styles$b.fileShapeCorner,
+      className: styles$c.fileShapeCorner,
       children: /* @__PURE__ */ jsx("path", { d: "M0 0.75H0.343146C1.40401 0.75 2.42143 1.17143 3.17157 1.92157L8.82843 7.57843C9.57857 8.32857 10 9.34599 10 10.4069V10.75H4C1.79086 10.75 0 8.95914 0 6.75V0.75Z" })
     }
   );
@@ -1608,6 +1313,208 @@ function setImageAlignAt(editor, imageElement, align) {
     return false;
   }
 }
+const frames = /* @__PURE__ */ new WeakMap();
+const cropEditing = /* @__PURE__ */ new WeakSet();
+function pixel(value) {
+  if (value == null || value === "") return null;
+  const n = Number(value);
+  return Number.isFinite(n) && n > 0 ? n : null;
+}
+function applyCropImageStyle(img, crop) {
+  const box2 = cropImageBox(crop);
+  img.style.position = "absolute";
+  img.style.margin = "0";
+  img.style.maxWidth = "none";
+  img.style.pointerEvents = "none";
+  img.style.width = box2.width;
+  img.style.height = box2.height;
+  img.style.left = box2.left;
+  img.style.top = box2.top;
+}
+function clearCropStyles(img) {
+  img.style.position = "";
+  img.style.margin = "";
+  img.style.maxWidth = "";
+  img.style.pointerEvents = "";
+  img.style.width = "";
+  img.style.height = "";
+  img.style.left = "";
+  img.style.top = "";
+}
+function detachLoad(img, state) {
+  if (!state.loadHandler) return;
+  img.removeEventListener("load", state.loadHandler);
+  state.loadHandler = void 0;
+}
+function syncResizableImageCrop(host, img, attrs) {
+  var _a;
+  if (cropEditing.has(img)) return;
+  const crop = normalizeImageCrop(attrs.crop);
+  const width = pixel(attrs.width);
+  const height = pixel(attrs.height);
+  const state = frames.get(img);
+  if (!crop) {
+    if (state == null ? void 0 : state.installed) {
+      detachLoad(img, state);
+      state.frame.replaceWith(img);
+      host.element = img;
+      host.onResize = state.originalOnResize;
+      state.installed = false;
+    }
+    clearCropStyles(img);
+    img.style.width = width ? `${width}px` : "";
+    img.style.height = height ? `${height}px` : "";
+    return;
+  }
+  const frameState = state ?? {
+    frame: document.createElement("div"),
+    installed: false
+  };
+  if (!state) frames.set(img, frameState);
+  const { frame } = frameState;
+  frame.className = "tmr-image-crop";
+  frame.style.position = "relative";
+  frame.style.overflow = "hidden";
+  frame.style.display = "block";
+  frame.style.maxWidth = "100%";
+  frame.style.lineHeight = "0";
+  frame.style.marginLeft = "";
+  frame.style.marginTop = "";
+  if (!frameState.installed) {
+    frameState.originalOnResize = host.onResize;
+    (_a = img.parentElement) == null ? void 0 : _a.insertBefore(frame, img);
+    frame.appendChild(img);
+    host.element = frame;
+    frameState.installed = true;
+  }
+  host.onResize = () => applyCropImageStyle(img, crop);
+  host.element = frame;
+  if (width && height) {
+    detachLoad(img, frameState);
+    frame.style.width = `${width}px`;
+    frame.style.height = `${height}px`;
+    frame.style.aspectRatio = `${width} / ${height}`;
+  } else {
+    frame.style.width = "";
+    frame.style.height = "";
+    frame.style.aspectRatio = "";
+    detachLoad(img, frameState);
+    const fitToNatural = () => {
+      const w = Math.round(img.naturalWidth * crop.w);
+      const h = Math.round(img.naturalHeight * crop.h);
+      if (w <= 0 || h <= 0) return;
+      frame.style.width = `${w}px`;
+      frame.style.height = `${h}px`;
+      frame.style.aspectRatio = `${w} / ${h}`;
+    };
+    frameState.loadHandler = fitToNatural;
+    if (img.complete && img.naturalWidth > 0) fitToNatural();
+    else img.addEventListener("load", fitToNatural);
+  }
+  applyCropImageStyle(img, crop);
+}
+function openCropSurface(img, crop) {
+  const frame = img.closest(".tmr-image-crop");
+  const framed = frame instanceof HTMLElement ? frame : null;
+  const host = framed ?? img;
+  const displayWidth = host.clientWidth;
+  const displayHeight = host.clientHeight;
+  const frameSnap = framed ? {
+    width: framed.style.width,
+    height: framed.style.height,
+    aspectRatio: framed.style.aspectRatio,
+    overflow: framed.style.overflow,
+    maxWidth: framed.style.maxWidth
+  } : null;
+  const imgSnap = {
+    position: img.style.position,
+    margin: img.style.margin,
+    maxWidth: img.style.maxWidth,
+    pointerEvents: img.style.pointerEvents,
+    width: img.style.width,
+    height: img.style.height,
+    left: img.style.left,
+    top: img.style.top
+  };
+  const reflow = framed != null && crop != null && displayWidth >= 1 && displayHeight >= 1 && crop.w > 0 && crop.h > 0;
+  if (reflow && framed && crop) {
+    const fullW = displayWidth / crop.w;
+    const fullH = displayHeight / crop.h;
+    framed.style.width = `${fullW}px`;
+    framed.style.height = "auto";
+    framed.style.aspectRatio = `${fullW} / ${fullH}`;
+    framed.style.overflow = "hidden";
+    framed.style.maxWidth = "100%";
+    img.style.position = "absolute";
+    img.style.margin = "0";
+    img.style.maxWidth = "none";
+    img.style.pointerEvents = "none";
+    img.style.width = "100%";
+    img.style.height = "100%";
+    img.style.left = "0";
+    img.style.top = "0";
+  }
+  const parent = framed ?? img.parentElement ?? img;
+  let parentPosition = null;
+  if (!framed && parent !== img && getComputedStyle(parent).position === "static") {
+    parentPosition = parent.style.position;
+    parent.style.position = "relative";
+  }
+  const overlay = document.createElement("div");
+  overlay.className = "tmr-image-crop-edit";
+  overlay.dataset.imageCrop = "";
+  overlay.style.position = "absolute";
+  overlay.style.zIndex = "3";
+  if (reflow) {
+    overlay.style.inset = "0";
+  } else {
+    overlay.style.left = `${img.offsetLeft}px`;
+    overlay.style.top = `${img.offsetTop}px`;
+    overlay.style.width = `${Math.max(img.offsetWidth, 0)}px`;
+    overlay.style.height = `${Math.max(img.offsetHeight, 0)}px`;
+  }
+  parent.appendChild(overlay);
+  const container = img.closest("[data-resize-container]");
+  if (container instanceof HTMLElement) container.dataset.imageCropping = "";
+  cropEditing.add(img);
+  let alive = true;
+  let keepStyles = false;
+  const teardown = () => {
+    if (!alive) return;
+    alive = false;
+    cropEditing.delete(img);
+    overlay.remove();
+    if (container instanceof HTMLElement) delete container.dataset.imageCropping;
+    if (keepStyles) return;
+    if (framed && frameSnap) {
+      framed.style.width = frameSnap.width;
+      framed.style.height = frameSnap.height;
+      framed.style.aspectRatio = frameSnap.aspectRatio;
+      framed.style.overflow = frameSnap.overflow;
+      framed.style.maxWidth = frameSnap.maxWidth;
+    }
+    img.style.position = imgSnap.position;
+    img.style.margin = imgSnap.margin;
+    img.style.maxWidth = imgSnap.maxWidth;
+    img.style.pointerEvents = imgSnap.pointerEvents;
+    img.style.width = imgSnap.width;
+    img.style.height = imgSnap.height;
+    img.style.left = imgSnap.left;
+    img.style.top = imgSnap.top;
+    if (parentPosition !== null && parent !== img) parent.style.position = parentPosition;
+  };
+  return {
+    overlay,
+    displayWidth,
+    discard() {
+      keepStyles = true;
+      teardown();
+    },
+    restore() {
+      teardown();
+    }
+  };
+}
 const popupHost$1 = "_popupHost_xhti8_5";
 const panel$1 = "_panel_xhti8_11";
 const menu$3 = "_menu_xhti8_22";
@@ -1616,7 +1523,7 @@ const tab = "_tab_xhti8_32";
 const tabActive = "_tabActive_xhti8_40";
 const cell = "_cell_xhti8_71";
 const cellActive = "_cellActive_xhti8_72";
-const styles$a = {
+const styles$b = {
   popupHost: popupHost$1,
   panel: panel$1,
   menu: menu$3,
@@ -1756,13 +1663,13 @@ const EmojiSuggestionPopup = forwardRef(function EmojiSuggestionPopup2({ items,
     [visible, index, command]
   );
   if (!visible.length) return null;
-  return /* @__PURE__ */ jsxs("div", { className: styles$a.panel, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$b.panel, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         id: gridId,
         ref: menuRef,
-        className: styles$a.menu,
+        className: styles$b.menu,
         role: "listbox",
         "aria-label": menuLabel,
         children: visible.map((item2, i) => {
@@ -1778,7 +1685,7 @@ const EmojiSuggestionPopup = forwardRef(function EmojiSuggestionPopup2({ items,
               "aria-label": shortcode,
               "aria-selected": i === index,
               title: shortcode,
-              className: i === index ? styles$a.cellActive : styles$a.cell,
+              className: i === index ? styles$b.cellActive : styles$b.cell,
               tabIndex: -1,
               onMouseEnter: () => setIndex(i),
               onMouseDown: (event) => {
@@ -1792,7 +1699,7 @@ const EmojiSuggestionPopup = forwardRef(function EmojiSuggestionPopup2({ items,
         })
       }
     ),
-    browsing ? /* @__PURE__ */ jsx("div", { className: styles$a.tabs, role: "tablist", "aria-label": menuLabel, children: categories.map((category) => {
+    browsing ? /* @__PURE__ */ jsx("div", { className: styles$b.tabs, role: "tablist", "aria-label": menuLabel, children: categories.map((category) => {
       const selected = category.id === activeId;
       return /* @__PURE__ */ jsx(
         "button",
@@ -1803,7 +1710,7 @@ const EmojiSuggestionPopup = forwardRef(function EmojiSuggestionPopup2({ items,
           "aria-controls": gridId,
           "aria-label": category.label,
           title: category.label,
-          className: selected ? styles$a.tabActive : styles$a.tab,
+          className: selected ? styles$b.tabActive : styles$b.tab,
           tabIndex: -1,
           onMouseDown: (event) => {
             event.preventDefault();
@@ -1850,7 +1757,7 @@ function configureEmojiSuggestion(extension, enabled) {
                 menuLabel: getEditorBundle(props.editor).emoji.menuLabel,
                 command: props.command
               },
-              className: styles$a.popupHost
+              className: styles$b.popupHost
             });
             copyThemeVars(props.editor.view.dom, renderer.element);
             unmountPopup = props.mount(renderer.element);
@@ -1896,7 +1803,7 @@ const item$1 = "_item_1noza_53";
 const itemActive$1 = "_itemActive_1noza_54";
 const itemIcon$1 = "_itemIcon_1noza_79";
 const itemTitle = "_itemTitle_1noza_102";
-const styles$9 = {
+const styles$a = {
   popupHost,
   menu: menu$2,
   groupLabel: groupLabel$1,
@@ -2097,11 +2004,11 @@ const SlashMenuPopup = forwardRef(function SlashMenuPopup2({ items, query, menuL
   );
   if (!items.length) return null;
   let optionIndex = -1;
-  return /* @__PURE__ */ jsx("div", { className: styles$9.menu, role: "listbox", "aria-label": menuLabel, children: withGroupHeaders(items).map(([header2, item2]) => {
+  return /* @__PURE__ */ jsx("div", { className: styles$a.menu, role: "listbox", "aria-label": menuLabel, children: withGroupHeaders(items).map(([header2, item2]) => {
     optionIndex += 1;
     const i = optionIndex;
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      header2 !== null ? /* @__PURE__ */ jsx("div", { className: styles$9.groupLabel, "aria-hidden": "true", children: header2 }) : null,
+      header2 !== null ? /* @__PURE__ */ jsx("div", { className: styles$a.groupLabel, "aria-hidden": "true", children: header2 }) : null,
       /* @__PURE__ */ jsxs(
         "button",
         {
@@ -2109,7 +2016,7 @@ const SlashMenuPopup = forwardRef(function SlashMenuPopup2({ items, query, menuL
           role: "option",
           "aria-selected": i === index,
           title: item2.title,
-          className: i === index ? styles$9.itemActive : styles$9.item,
+          className: i === index ? styles$a.itemActive : styles$a.item,
           tabIndex: -1,
           onMouseEnter: () => setIndex(i),
           onMouseDown: (e2) => {
@@ -2117,8 +2024,8 @@ const SlashMenuPopup = forwardRef(function SlashMenuPopup2({ items, query, menuL
             command(item2);
           },
           children: [
-            item2.icon != null ? /* @__PURE__ */ jsx("span", { className: styles$9.itemIcon, "aria-hidden": "true", children: item2.icon }) : /* @__PURE__ */ jsx("span", { className: styles$9.itemIcon, "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { className: styles$9.itemTitle, children: item2.title })
+            item2.icon != null ? /* @__PURE__ */ jsx("span", { className: styles$a.itemIcon, "aria-hidden": "true", children: item2.icon }) : /* @__PURE__ */ jsx("span", { className: styles$a.itemIcon, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: styles$a.itemTitle, children: item2.title })
           ]
         }
       )
@@ -2170,7 +2077,7 @@ const SlashMenu = Extension.create({
                   menuLabel: getEditorBundle(props.editor).slashMenu.menuLabel,
                   command: props.command
                 },
-                className: styles$9.popupHost
+                className: styles$a.popupHost
               }
             );
             const pmStyle = getComputedStyle(props.editor.view.dom);
@@ -2223,7 +2130,7 @@ const rowKeys = "_rowKeys_ljnq6_127";
 const rowMd = "_rowMd_ljnq6_128";
 const keycap = "_keycap_ljnq6_138";
 const none = "_none_ljnq6_163";
-const styles$8 = {
+const styles$9 = {
   drawer,
   closeBtn,
   head,
@@ -2327,7 +2234,7 @@ function ShortcutPanel({
   return /* @__PURE__ */ jsxs(
     "aside",
     {
-      className: styles$8.drawer,
+      className: styles$9.drawer,
       role: "dialog",
       "aria-modal": "false",
       "aria-label": t.panelTitle,
@@ -2336,27 +2243,27 @@ function ShortcutPanel({
           "button",
           {
             type: "button",
-            className: styles$8.closeBtn,
+            className: styles$9.closeBtn,
             title: t.close,
             "aria-label": t.close,
             onClick: onClose,
             children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: styles$8.head, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$8.colFormat, children: t.colFormat }),
-          /* @__PURE__ */ jsx("span", { className: styles$8.colShortcut, children: t.colShortcut }),
-          /* @__PURE__ */ jsx("span", { className: styles$8.colMarkdown, children: t.colMarkdown })
+        /* @__PURE__ */ jsxs("div", { className: styles$9.head, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$9.colFormat, children: t.colFormat }),
+          /* @__PURE__ */ jsx("span", { className: styles$9.colShortcut, children: t.colShortcut }),
+          /* @__PURE__ */ jsx("span", { className: styles$9.colMarkdown, children: t.colMarkdown })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: styles$8.body, children: groups.map((group2) => /* @__PURE__ */ jsxs("section", { className: styles$8.group, children: [
-          /* @__PURE__ */ jsx("h3", { className: styles$8.groupTitle, children: group2.title }),
-          group2.entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: styles$8.row, children: [
-            /* @__PURE__ */ jsx("span", { className: styles$8.rowLabel, children: entry.label }),
-            /* @__PURE__ */ jsx("span", { className: styles$8.rowKeys, children: entry.keys ? entry.keys.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: styles$8.keycap, children: keycapText(key, mac) }, i)) : /* @__PURE__ */ jsx("span", { className: styles$8.none, children: "—" }) }),
-            /* @__PURE__ */ jsx("span", { className: styles$8.rowMd, children: entry.markdown ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
-              /* @__PURE__ */ jsx("kbd", { className: styles$8.keycap, children: entry.markdown.marker }),
-              entry.markdown.terminator ? /* @__PURE__ */ jsx("kbd", { className: styles$8.keycap, children: entry.markdown.terminator }) : null
-            ] }) : /* @__PURE__ */ jsx("span", { className: styles$8.none, children: "—" }) })
+        /* @__PURE__ */ jsx("div", { className: styles$9.body, children: groups.map((group2) => /* @__PURE__ */ jsxs("section", { className: styles$9.group, children: [
+          /* @__PURE__ */ jsx("h3", { className: styles$9.groupTitle, children: group2.title }),
+          group2.entries.map((entry) => /* @__PURE__ */ jsxs("div", { className: styles$9.row, children: [
+            /* @__PURE__ */ jsx("span", { className: styles$9.rowLabel, children: entry.label }),
+            /* @__PURE__ */ jsx("span", { className: styles$9.rowKeys, children: entry.keys ? entry.keys.map((key, i) => /* @__PURE__ */ jsx("kbd", { className: styles$9.keycap, children: keycapText(key, mac) }, i)) : /* @__PURE__ */ jsx("span", { className: styles$9.none, children: "—" }) }),
+            /* @__PURE__ */ jsx("span", { className: styles$9.rowMd, children: entry.markdown ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
+              /* @__PURE__ */ jsx("kbd", { className: styles$9.keycap, children: entry.markdown.marker }),
+              entry.markdown.terminator ? /* @__PURE__ */ jsx("kbd", { className: styles$9.keycap, children: entry.markdown.terminator }) : null
+            ] }) : /* @__PURE__ */ jsx("span", { className: styles$9.none, children: "—" }) })
           ] }, entry.id))
         ] }, group2.id)) })
       ]
@@ -2656,7 +2563,7 @@ const gutterLine = "_gutterLine_k8th1_184";
 const readonlyActions = "_readonlyActions_k8th1_188";
 const actionBtn = "_actionBtn_k8th1_194";
 const langBraces = "_langBraces_k8th1_213";
-const styles$7 = {
+const styles$8 = {
   wrapper,
   header,
   langTrigger,
@@ -2751,29 +2658,29 @@ function CodeBlockView({
     ta.remove();
   };
   const wrapperClass = [
-    styles$7.wrapper,
-    readonly2 ? styles$7.readonly : "",
-    folded2 ? styles$7.folded : ""
+    styles$8.wrapper,
+    readonly2 ? styles$8.readonly : "",
+    folded2 ? styles$8.folded : ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: wrapperClass, children: [
-    editable ? /* @__PURE__ */ jsxs("div", { className: styles$7.header, contentEditable: false, children: [
+    editable ? /* @__PURE__ */ jsxs("div", { className: styles$8.header, contentEditable: false, children: [
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: styles$7.langTrigger,
+            className: styles$8.langTrigger,
             "aria-label": labels.language,
             children: [
               /* @__PURE__ */ jsx("span", { children: currentLabel }),
-              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: styles$7.langChevron })
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: styles$8.langChevron })
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
           DropdownMenu.Content,
           {
-            className: styles$7.langMenu,
+            className: styles$8.langMenu,
             sideOffset: 4,
             align: "end",
             children: LANGUAGES.map((l) => {
@@ -2782,10 +2689,10 @@ function CodeBlockView({
               return /* @__PURE__ */ jsxs(
                 DropdownMenu.Item,
                 {
-                  className: `${styles$7.langItem}${selected ? ` ${styles$7.langItemSelected}` : ""}`,
+                  className: `${styles$8.langItem}${selected ? ` ${styles$8.langItemSelected}` : ""}`,
                   onSelect: () => updateAttributes({ language: l.value }),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$7.langItemCheck, children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : null }),
+                    /* @__PURE__ */ jsx("span", { className: styles$8.langItemCheck, children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : null }),
                     optionLabel
                   ]
                 },
@@ -2799,7 +2706,7 @@ function CodeBlockView({
         "button",
         {
           type: "button",
-          className: styles$7.deleteBtn,
+          className: styles$8.deleteBtn,
           title: labels.delete,
           "aria-label": labels.delete,
           onClick: () => deleteNode(),
@@ -2808,17 +2715,17 @@ function CodeBlockView({
       )
     ] }) : (
       // 只读头部：左侧语言标签，右侧复制 + 展开收起（展开后按钮保留，供收回）
-      /* @__PURE__ */ jsxs("div", { className: styles$7.readonlyHeader, contentEditable: false, children: [
-        /* @__PURE__ */ jsxs("span", { className: styles$7.langBadge, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$7.langBraces, children: "{}" }),
+      /* @__PURE__ */ jsxs("div", { className: styles$8.readonlyHeader, contentEditable: false, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles$8.langBadge, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$8.langBraces, children: "{}" }),
           currentLabel
         ] }),
-        /* @__PURE__ */ jsxs("span", { className: styles$7.readonlyActions, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles$8.readonlyActions, children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: styles$7.actionBtn,
+              className: styles$8.actionBtn,
               onClick: handleCopy,
               "aria-label": labels.copy,
               title: labels.copy,
@@ -2829,7 +2736,7 @@ function CodeBlockView({
             "button",
             {
               type: "button",
-              className: styles$7.actionBtn,
+              className: styles$8.actionBtn,
               onClick: () => setFolded((v) => !v),
               "aria-label": folded2 ? labels.expand : labels.collapse,
               title: folded2 ? labels.expand : labels.collapse,
@@ -2840,14 +2747,14 @@ function CodeBlockView({
         ] })
       ] })
     ),
-    /* @__PURE__ */ jsxs("pre", { ref: preRef, className: styles$7.pre, children: [
+    /* @__PURE__ */ jsxs("pre", { ref: preRef, className: styles$8.pre, children: [
       readonly2 ? /* @__PURE__ */ jsx(
         "span",
         {
-          className: styles$7.gutter,
+          className: styles$8.gutter,
           contentEditable: false,
           "aria-hidden": "true",
-          children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("span", { className: styles$7.gutterLine, children: i + 1 }, i))
+          children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("span", { className: styles$8.gutterLine, children: i + 1 }, i))
         }
       ) : null,
       /* @__PURE__ */ jsx(NodeViewContent, { as: "code" })
@@ -3284,7 +3191,7 @@ const item = "_item_5edcs_100";
 const itemActive = "_itemActive_5edcs_118";
 const itemDanger = "_itemDanger_5edcs_123";
 const itemIcon = "_itemIcon_5edcs_132";
-const styles$6 = {
+const styles$7 = {
   cluster,
   clusterOnTable,
   button,
@@ -3477,14 +3384,14 @@ function BlockDragHandle({ editor }) {
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$6.cluster} ${(target == null ? void 0 : target.node.type.name) === "table" ? styles$6.clusterOnTable : ""}`,
+            className: `${styles$7.cluster} ${(target == null ? void 0 : target.node.type.name) === "table" ? styles$7.clusterOnTable : ""}`,
             "data-block-drag": "",
             children: /* @__PURE__ */ jsx(
               "div",
               {
                 role: "button",
                 tabIndex: 0,
-                className: `${styles$6.button} ${styles$6.grip}`,
+                className: `${styles$7.button} ${styles$7.grip}`,
                 "data-block-drag-grip": "",
                 title: t.dragHandle,
                 "aria-label": t.dragHandle,
@@ -3516,7 +3423,7 @@ function BlockDragHandle({ editor }) {
         "div",
         {
           ref: menuRef,
-          className: styles$6.menu,
+          className: styles$7.menu,
           "data-block-drag-menu": "",
           role: "menu",
           "aria-label": t.menuLabel,
@@ -3524,37 +3431,37 @@ function BlockDragHandle({ editor }) {
           onMouseDown: (event) => event.stopPropagation(),
           children: [
             showTurn ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
-              /* @__PURE__ */ jsx("div", { className: styles$6.groupLabel, children: t.turnInto }),
+              /* @__PURE__ */ jsx("div", { className: styles$7.groupLabel, children: t.turnInto }),
               TURN_INTO_KINDS.map((kind) => /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
                   role: "menuitem",
-                  className: kind === activeKind ? `${styles$6.item} ${styles$6.itemActive}` : styles$6.item,
+                  className: kind === activeKind ? `${styles$7.item} ${styles$7.itemActive}` : styles$7.item,
                   "data-block-drag-action": kind,
                   onClick: () => run(() => turnBlockInto(editor, menu2.pos, kind)),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: TURN_ICON[kind] }),
+                    /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: TURN_ICON[kind] }),
                     /* @__PURE__ */ jsx("span", { children: turnLabel(kind) })
                   ]
                 },
                 kind
               )),
-              /* @__PURE__ */ jsx("div", { className: styles$6.divider })
+              /* @__PURE__ */ jsx("div", { className: styles$7.divider })
             ] }) : null,
             /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 role: "menuitem",
-                className: styles$6.item,
+                className: styles$7.item,
                 "data-block-drag-action": "copy",
                 onClick: () => run(() => {
                   const markdown = blockMarkdown(editor, menu2.pos);
                   if (markdown != null) void copyMarkdown(markdown);
                 }),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
                   /* @__PURE__ */ jsx("span", { children: t.copy })
                 ]
               }
@@ -3564,11 +3471,11 @@ function BlockDragHandle({ editor }) {
               {
                 type: "button",
                 role: "menuitem",
-                className: styles$6.item,
+                className: styles$7.item,
                 "data-block-drag-action": "duplicate",
                 onClick: () => run(() => duplicateBlock(editor, menu2.pos)),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(CopyIcon, {}) }),
                   /* @__PURE__ */ jsx("span", { children: t.duplicate })
                 ]
               }
@@ -3578,11 +3485,11 @@ function BlockDragHandle({ editor }) {
               {
                 type: "button",
                 role: "menuitem",
-                className: styles$6.item,
+                className: styles$7.item,
                 "data-block-drag-action": "reset",
                 onClick: () => run(() => resetBlockFormatting(editor, menu2.pos)),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(EraserIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(EraserIcon, {}) }),
                   /* @__PURE__ */ jsx("span", { children: t.resetFormatting })
                 ]
               }
@@ -3592,26 +3499,26 @@ function BlockDragHandle({ editor }) {
               {
                 type: "button",
                 role: "menuitem",
-                className: styles$6.item,
+                className: styles$7.item,
                 "data-block-drag-action": "download",
                 onClick: () => run(() => downloadImageBlock(menu2.node)),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(DownloadIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(DownloadIcon, {}) }),
                   /* @__PURE__ */ jsx("span", { children: t.downloadImage })
                 ]
               }
             ) : null,
-            /* @__PURE__ */ jsx("div", { className: styles$6.divider }),
+            /* @__PURE__ */ jsx("div", { className: styles$7.divider }),
             /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
                 role: "menuitem",
-                className: `${styles$6.item} ${styles$6.itemDanger}`,
+                className: `${styles$7.item} ${styles$7.itemDanger}`,
                 "data-block-drag-action": "delete",
                 onClick: () => run(() => deleteBlock(editor, menu2.pos)),
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$6.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+                  /* @__PURE__ */ jsx("span", { className: styles$7.itemIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
                   /* @__PURE__ */ jsx("span", { children: t.delete })
                 ]
               }
@@ -3659,7 +3566,8 @@ const ImageWithConfirmDelete = Image.extend({
     return {
       ...((_a = Image.config.addAttributes) == null ? void 0 : _a.call(this)) ?? {},
       align: imageAlignAttribute,
-      caption: imageCaptionAttribute
+      caption: imageCaptionAttribute,
+      crop: imageCropAttribute
     };
   },
   parseHTML() {
@@ -3731,7 +3639,9 @@ const ImageWithConfirmDelete = Image.extend({
         captionEl.dataset.imageCaption = "";
         (element.parentElement ?? container).appendChild(captionEl);
         const syncHandleTop = () => {
-          const height = element.offsetHeight;
+          const frame = element.closest(".tmr-image-crop");
+          const box2 = frame instanceof HTMLElement ? frame : element;
+          const height = box2.offsetHeight;
           if (height > 0) {
             container.style.setProperty("--tmr-image-h", `${height}px`);
           } else {
@@ -3748,17 +3658,21 @@ const ImageWithConfirmDelete = Image.extend({
         element.addEventListener("load", syncHandleTop);
         container.addEventListener("mousedown", applyMaxSize, true);
       }
-      if (resizable.element) {
-        const { element } = resizable;
+      if (resizable.element instanceof HTMLImageElement) {
+        const img = resizable.element;
+        const host = resizable;
+        const sync = (attrs) => {
+          syncResizableImageCrop(host, img, attrs);
+          syncCaption == null ? void 0 : syncCaption(attrs);
+        };
+        sync(props.node.attrs);
         const originalUpdate = (_b = nodeView.update) == null ? void 0 : _b.bind(nodeView);
         if (originalUpdate) {
           nodeView.update = (...args) => {
             const ok = originalUpdate(...args);
             if (ok) {
               const attrs = args[0].attrs;
-              element.style.width = attrs.width ? `${attrs.width}px` : "";
-              element.style.height = attrs.height ? `${attrs.height}px` : "";
-              syncCaption == null ? void 0 : syncCaption(attrs);
+              sync(attrs);
             }
             return ok;
           };
@@ -3798,14 +3712,14 @@ function CharacterCountStatus({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$d.charCount,
+      className: styles$e.charCount,
       role: "group",
       "aria-label": t.label,
       "data-characters": counts.characters,
       "data-words": counts.words,
       children: [
         /* @__PURE__ */ jsx("span", { children: t.characters(counts.characters) }),
-        /* @__PURE__ */ jsx("span", { className: styles$d.charCountSep, "aria-hidden": "true", children: "·" }),
+        /* @__PURE__ */ jsx("span", { className: styles$e.charCountSep, "aria-hidden": "true", children: "·" }),
         /* @__PURE__ */ jsx("span", { children: t.words(counts.words) })
       ]
     }
@@ -3960,7 +3874,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     immediatelyRender: false,
     editorProps: {
       attributes: {
-        class: styles$d.editorContent
+        class: styles$e.editorContent
       }
     }
   });
@@ -4160,7 +4074,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       locale,
       onClose: closeFind,
       inputRef: findInputRef,
-      className: styles$d.findBar,
+      className: styles$e.findBar,
       style: findBarOffsetStyle(findBarOffset)
     }
   ) : null;
@@ -4177,7 +4091,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     "button",
     {
       type: "button",
-      className: shortcutFabTarget ? `${styles$d.shortcutFab} ${styles$d.shortcutFabHosted}` : styles$d.shortcutFab,
+      className: shortcutFabTarget ? `${styles$e.shortcutFab} ${styles$e.shortcutFabHosted}` : styles$e.shortcutFab,
       title: shortcutT.panelTitle,
       "aria-label": shortcutT.panelTitle,
       "aria-expanded": shortcutsOpen,
@@ -4188,10 +4102,10 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$d.editorHost,
+      className: styles$e.editorHost,
       "data-block-drag-gutter": showBlockDrag ? "" : void 0,
       children: [
-        findBarNode && !findBarTarget ? /* @__PURE__ */ jsx("div", { className: styles$d.findBarAnchor, children: findBarNode }) : null,
+        findBarNode && !findBarTarget ? /* @__PURE__ */ jsx("div", { className: styles$e.findBarAnchor, children: findBarNode }) : null,
         findBarNode && findBarTarget ? createPortal(findBarNode, findBarTarget) : null,
         editor && toc && !blockDragMobile && tocItems.length > 0 ? /* @__PURE__ */ jsx(
           EditorToc,
@@ -4201,20 +4115,20 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
             locale
           }
         ) : null,
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ImagePreviewHost, { locale, activate: editable ? "dblclick" : "click", children: /* @__PURE__ */ jsx(
           EditorContent,
           {
             editor,
             className: [
-              styles$d.editorScroll,
-              showBlockDrag ? styles$d.withBlockDrag : "",
-              toc && !blockDragMobile && tocItems.length > 0 ? styles$d.withToc : "",
+              styles$e.editorScroll,
+              showBlockDrag ? styles$e.withBlockDrag : "",
+              toc && !blockDragMobile && tocItems.length > 0 ? styles$e.withToc : "",
               className ?? ""
             ].filter(Boolean).join(" ")
           }
-        ),
+        ) }),
         editor && showBlockDrag ? /* @__PURE__ */ jsx(BlockDragHandle, { editor }) : null,
-        editor && characterCount ? /* @__PURE__ */ jsxs("div", { className: styles$d.editorStatus, children: [
+        editor && characterCount ? /* @__PURE__ */ jsxs("div", { className: styles$e.editorStatus, children: [
           /* @__PURE__ */ jsx(CharacterCountStatus, { editor, locale }),
           shortcutFabNode && !shortcutFabTarget ? shortcutFabNode : null
         ] }) : shortcutFabNode && !shortcutFabTarget ? shortcutFabNode : null,
@@ -4288,7 +4202,7 @@ function MarkdownPreview({
       editable: false,
       immediatelyRender: false,
       editorProps: {
-        attributes: { class: styles$d.editorContent }
+        attributes: { class: styles$e.editorContent }
       }
     },
     [extensions]
@@ -4299,15 +4213,15 @@ function MarkdownPreview({
     editor.commands.setContent(prepared, { contentType: "markdown" });
   }, [editor, prepared]);
   const showToc = Boolean(editor && toc && !mobile && tocItems.length > 0);
-  return /* @__PURE__ */ jsxs("div", { className: styles$d.editorHost, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$e.editorHost, children: [
     showToc && editor ? /* @__PURE__ */ jsx(EditorToc, { items: tocItems, editorDom: editor.view.dom, locale }) : null,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(ImagePreviewHost, { locale, activate: "click", children: /* @__PURE__ */ jsx(
       EditorContent,
       {
         editor,
-        className: [className ?? styles$d.editorScroll, showToc ? styles$d.withToc : ""].filter(Boolean).join(" ")
+        className: [className ?? styles$e.editorScroll, showToc ? styles$e.withToc : ""].filter(Boolean).join(" ")
       }
-    )
+    ) })
   ] });
 }
 const MD_FILE_RE = /\.(md|markdown)$/i;
@@ -4429,7 +4343,7 @@ const mathFieldBlock = "_mathFieldBlock_1l6t0_531";
 const mathInput = "_mathInput_1l6t0_538";
 const mathDone = "_mathDone_1l6t0_556";
 const mathDoneKbd = "_mathDoneKbd_1l6t0_581";
-const styles$5 = {
+const styles$6 = {
   toolbar,
   inner,
   btn: btn$2,
@@ -4486,17 +4400,17 @@ const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
 const noneIcon = "_noneIcon_x5lrq_23";
 const noneLabel = "_noneLabel_x5lrq_43";
-const grid = "_grid_x5lrq_48";
+const grid$1 = "_grid_x5lrq_48";
 const swatch = "_swatch_x5lrq_54";
 const swatchActive = "_swatchActive_x5lrq_70";
 const themeLabel = "_themeLabel_x5lrq_76";
 const themeRow = "_themeRow_x5lrq_84";
-const styles$4 = {
+const styles$5 = {
   palette,
   noneRow,
   noneIcon,
   noneLabel,
-  grid,
+  grid: grid$1,
   swatch,
   swatchActive,
   themeLabel,
@@ -4514,25 +4428,25 @@ const THEME_COLORS = ["#ff6719", "#ff5500"];
 function ColorPalette({ value, onPick, locale = "en" }) {
   const t = getLocaleBundle(locale).palette;
   const current = value == null ? void 0 : value.toLowerCase();
-  return /* @__PURE__ */ jsxs("div", { className: styles$4.palette, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$5.palette, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: styles$4.noneRow,
+        className: styles$5.noneRow,
         onMouseDown: (e2) => e2.preventDefault(),
         onClick: () => onPick(null),
         children: [
-          /* @__PURE__ */ jsx("span", { className: styles$4.noneIcon, "aria-hidden": true }),
-          /* @__PURE__ */ jsx("span", { className: styles$4.noneLabel, children: t.none })
+          /* @__PURE__ */ jsx("span", { className: styles$5.noneIcon, "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: styles$5.noneLabel, children: t.none })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: styles$4.grid, children: PALETTE.flat().map((c2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$5.grid, children: PALETTE.flat().map((c2) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `${styles$4.swatch} ${current === c2.toLowerCase() ? styles$4.swatchActive : ""}`,
+        className: `${styles$5.swatch} ${current === c2.toLowerCase() ? styles$5.swatchActive : ""}`,
         style: { background: c2 },
         title: c2,
         "aria-label": c2,
@@ -4541,12 +4455,12 @@ function ColorPalette({ value, onPick, locale = "en" }) {
       },
       c2
     )) }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.themeLabel, children: t.theme }),
-    /* @__PURE__ */ jsx("div", { className: styles$4.themeRow, children: THEME_COLORS.map((c2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$5.themeLabel, children: t.theme }),
+    /* @__PURE__ */ jsx("div", { className: styles$5.themeRow, children: THEME_COLORS.map((c2) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `${styles$4.swatch} ${current === c2.toLowerCase() ? styles$4.swatchActive : ""}`,
+        className: `${styles$5.swatch} ${current === c2.toLowerCase() ? styles$5.swatchActive : ""}`,
         style: { background: c2 },
         title: c2,
         "aria-label": c2,
@@ -4571,19 +4485,266 @@ function setImageCaption(editor, caption) {
   if (pos == null) return false;
   return setImageCaptionAtPos(editor, pos, caption);
 }
-const bar = "_bar_mp2o5_7";
-const divider$1 = "_divider_mp2o5_24";
-const captionRow = "_captionRow_mp2o5_13";
-const captionInput = "_captionInput_mp2o5_40";
-const btn$1 = "_btn_mp2o5_58";
-const btnActive = "_btnActive_mp2o5_76";
+const MIN_CROP = 0.05;
+function moveCrop(start, dx, dy) {
+  return tidy({
+    x: clamp(start.x + dx, 0, 1 - start.w),
+    y: clamp(start.y + dy, 0, 1 - start.h),
+    w: start.w,
+    h: start.h
+  });
+}
+function resizeCrop(start, handle2, dx, dy) {
+  let left = start.x;
+  let top = start.y;
+  let right = start.x + start.w;
+  let bottom = start.y + start.h;
+  if (handle2.includes("w")) left += dx;
+  if (handle2.includes("e")) right += dx;
+  if (handle2.includes("n")) top += dy;
+  if (handle2.includes("s")) bottom += dy;
+  if (right - left < MIN_CROP) {
+    if (handle2.includes("w") && !handle2.includes("e")) left = right - MIN_CROP;
+    else right = left + MIN_CROP;
+  }
+  if (bottom - top < MIN_CROP) {
+    if (handle2.includes("n") && !handle2.includes("s")) top = bottom - MIN_CROP;
+    else bottom = top + MIN_CROP;
+  }
+  left = clamp(left, 0, 1 - MIN_CROP);
+  top = clamp(top, 0, 1 - MIN_CROP);
+  right = clamp(right, left + MIN_CROP, 1);
+  bottom = clamp(bottom, top + MIN_CROP, 1);
+  return tidy({ x: left, y: top, w: right - left, h: bottom - top });
+}
+function croppedDisplaySize(args) {
+  const { naturalWidth, naturalHeight, displayWidth, from, to } = args;
+  if (!(naturalWidth > 0) || !(naturalHeight > 0) || !(displayWidth > 0)) return null;
+  const scale = displayWidth / (naturalWidth * ((from == null ? void 0 : from.w) ?? 1));
+  if (!(scale > 0) || !Number.isFinite(scale)) return null;
+  const fractionW = (to == null ? void 0 : to.w) ?? 1;
+  const fractionH = (to == null ? void 0 : to.h) ?? 1;
+  return {
+    width: Math.max(1, Math.round(naturalWidth * fractionW * scale)),
+    height: Math.max(1, Math.round(naturalHeight * fractionH * scale))
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function round6(n) {
+  return Math.round(n * 1e6) / 1e6;
+}
+function tidy(crop) {
+  return { x: round6(crop.x), y: round6(crop.y), w: round6(crop.w), h: round6(crop.h) };
+}
+function sameCrop(a3, b3) {
+  if (a3 == null || b3 == null) return a3 == null && b3 == null;
+  return a3.x === b3.x && a3.y === b3.y && a3.w === b3.w && a3.h === b3.h;
+}
+function setImageCropAtPos(editor, pos, crop, metrics) {
+  const node = editor.state.doc.nodeAt(pos);
+  if (!node || node.type.name !== "image") return false;
+  const next = normalizeImageCrop(crop);
+  const current = normalizeImageCrop(node.attrs.crop);
+  const sized = metrics ? croppedDisplaySize({ ...metrics, from: current, to: next }) : null;
+  const width = (sized == null ? void 0 : sized.width) ?? node.attrs.width;
+  const height = (sized == null ? void 0 : sized.height) ?? node.attrs.height;
+  if (sameCrop(current, next) && width === node.attrs.width && height === node.attrs.height) {
+    return true;
+  }
+  let tr = editor.state.tr.setNodeAttribute(pos, "crop", next);
+  if (sized && sized.width !== node.attrs.width) {
+    tr = tr.setNodeAttribute(pos, "width", sized.width);
+  }
+  if (sized && sized.height !== node.attrs.height) {
+    tr = tr.setNodeAttribute(pos, "height", sized.height);
+  }
+  editor.view.dispatch(tr);
+  return true;
+}
+function setImageCrop(editor, crop, metrics) {
+  const pos = findImagePos(editor);
+  if (pos == null) return false;
+  return setImageCropAtPos(editor, pos, crop, metrics);
+}
+const surface = "_surface_1ihfb_3";
+const dim = "_dim_1ihfb_11";
+const box = "_box_1ihfb_18";
+const grid = "_grid_1ihfb_25";
+const handle$1 = "_handle_1ihfb_34";
+const styles$4 = {
+  surface,
+  dim,
+  box,
+  grid,
+  handle: handle$1
+};
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+const FULL = { x: 0, y: 0, w: 1, h: 1 };
+function isHandle(value) {
+  return !!value && HANDLES.includes(value);
+}
+const ImageCropStage = forwardRef(
+  function ImageCropStage2({ overlay, crop, label, onApply, onCancel }, ref) {
+    const dragRef = useRef(null);
+    const [draft, setDraft] = useState(crop ?? FULL);
+    const draftRef = useRef(draft);
+    draftRef.current = draft;
+    useImperativeHandle(ref, () => ({
+      apply() {
+        onApply(draftRef.current);
+      }
+    }));
+    const pointOf = (event) => {
+      const rect = overlay.getBoundingClientRect();
+      if (rect.width < 1 || rect.height < 1) return null;
+      return {
+        x: (event.clientX - rect.left) / rect.width,
+        y: (event.clientY - rect.top) / rect.height
+      };
+    };
+    const onPointerDown = (event) => {
+      var _a, _b, _c, _d;
+      event.preventDefault();
+      event.stopPropagation();
+      const point = pointOf(event);
+      if (!point) return;
+      const handle2 = (_a = event.target) == null ? void 0 : _a.dataset.cropHandle;
+      const onBox = (_b = event.target) == null ? void 0 : _b.closest("[data-crop-box]");
+      if (!isHandle(handle2) && !onBox) return;
+      (_d = (_c = event.currentTarget).setPointerCapture) == null ? void 0 : _d.call(_c, event.pointerId);
+      dragRef.current = {
+        mode: isHandle(handle2) ? handle2 : "move",
+        start: draft,
+        pointerX: point.x,
+        pointerY: point.y
+      };
+    };
+    const onPointerMove = (event) => {
+      const drag = dragRef.current;
+      const point = pointOf(event);
+      if (!drag || !point) return;
+      const dx = point.x - drag.pointerX;
+      const dy = point.y - drag.pointerY;
+      setDraft(
+        drag.mode === "move" ? moveCrop(drag.start, dx, dy) : resizeCrop(drag.start, drag.mode, dx, dy)
+      );
+    };
+    const endDrag = () => {
+      dragRef.current = null;
+    };
+    useEffect(() => {
+      const onKey = (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onCancel();
+      };
+      document.addEventListener("keydown", onKey, true);
+      return () => document.removeEventListener("keydown", onKey, true);
+    }, [onCancel]);
+    return createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$4.surface,
+          role: "application",
+          "aria-label": label,
+          onPointerDown,
+          onPointerMove,
+          onPointerUp: endDrag,
+          onPointerCancel: endDrag,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$4.dim,
+                style: { top: 0, left: 0, right: 0, height: `${draft.y * 100}%` }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$4.dim,
+                style: {
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  height: `${(1 - draft.y - draft.h) * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$4.dim,
+                style: {
+                  top: `${draft.y * 100}%`,
+                  left: 0,
+                  width: `${draft.x * 100}%`,
+                  height: `${draft.h * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles$4.dim,
+                style: {
+                  top: `${draft.y * 100}%`,
+                  right: 0,
+                  width: `${(1 - draft.x - draft.w) * 100}%`,
+                  height: `${draft.h * 100}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: styles$4.box,
+                "data-crop-box": "",
+                style: {
+                  left: `${draft.x * 100}%`,
+                  top: `${draft.y * 100}%`,
+                  width: `${draft.w * 100}%`,
+                  height: `${draft.h * 100}%`
+                },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: styles$4.grid }),
+                  HANDLES.map((handle2) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: styles$4.handle,
+                      "data-crop-handle": handle2
+                    },
+                    handle2
+                  ))
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      overlay
+    );
+  }
+);
+const bar = "_bar_1gju7_7";
+const divider$1 = "_divider_1gju7_24";
+const captionRow = "_captionRow_1gju7_13";
+const captionInput = "_captionInput_1gju7_40";
+const btn$1 = "_btn_1gju7_58";
+const btnActive = "_btnActive_1gju7_76";
+const btnApply = "_btnApply_1gju7_86";
 const styles$3 = {
   bar,
   divider: divider$1,
   captionRow,
   captionInput,
   btn: btn$1,
-  btnActive
+  btnActive,
+  btnApply
 };
 const TOOLBAR_HEIGHT = 34;
 const TOOLBAR_GAP = 8;
@@ -4604,7 +4765,8 @@ function measureImage(editor, img) {
   }
   const node = editor.state.doc.nodeAt(pos);
   if (!node || node.type.name !== "image") return null;
-  const rect = img.getBoundingClientRect();
+  const frame = img.closest(".tmr-image-crop");
+  const rect = (frame instanceof HTMLElement ? frame : img).getBoundingClientRect();
   return {
     pos,
     img,
@@ -4621,11 +4783,19 @@ function ImageAlignTools({ editor, labels }) {
   const [captionDraft, setCaptionDraft] = useState(null);
   const captionDraftRef = useRef(null);
   captionDraftRef.current = captionDraft;
+  const [cropping, setCropping] = useState(false);
+  const cropOpenRef = useRef(false);
+  cropOpenRef.current = cropping;
+  const cropSessionRef = useRef(null);
+  const cropStageRef = useRef(null);
+  const [cropOverlay, setCropOverlay] = useState(null);
   const clearHover = useCallback(() => {
     if (!hoverRef.current) return;
     hoverRef.current = null;
     setHover(null);
     setCaptionDraft(null);
+    cropOpenRef.current = false;
+    setCropping(false);
   }, []);
   const remeasureHover = useCallback(() => {
     const current = hoverRef.current;
@@ -4651,9 +4821,10 @@ function ImageAlignTools({ editor, labels }) {
         cancelPendingClear();
         return;
       }
-      const img = target && editor.view.dom.contains(target) ? target.closest("img") : null;
+      const cropHost = target && editor.view.dom.contains(target) ? target.closest(".tmr-image-crop") : null;
+      const img = target && editor.view.dom.contains(target) ? cropHost instanceof HTMLElement ? cropHost.querySelector("img") : target.closest("img") : null;
       if (!img) {
-        if (captionDraftRef.current !== null) return;
+        if (captionDraftRef.current !== null || cropOpenRef.current) return;
         if (hoverRef.current && clearTimerRef.current === null) {
           clearTimerRef.current = setTimeout(() => {
             clearTimerRef.current = null;
@@ -4664,6 +4835,7 @@ function ImageAlignTools({ editor, labels }) {
       }
       cancelPendingClear();
       if (((_b = hoverRef.current) == null ? void 0 : _b.img) === img) return;
+      setCropping(false);
       const next = measureImage(editor, img);
       hoverRef.current = next;
       setHover(next);
@@ -4691,12 +4863,34 @@ function ImageAlignTools({ editor, labels }) {
       editor.off("update", onUpdate);
     };
   }, [editor, remeasureHover]);
+  useEffect(() => {
+    var _a2;
+    if (!cropping) return;
+    const current = hoverRef.current;
+    if (!current) return;
+    const dom = editor.view.nodeDOM(current.pos);
+    const img = dom instanceof HTMLImageElement ? dom : dom instanceof HTMLElement ? dom.querySelector("img") : null;
+    if (!(img instanceof HTMLImageElement)) return;
+    const crop2 = normalizeImageCrop(
+      (_a2 = editor.state.doc.nodeAt(current.pos)) == null ? void 0 : _a2.attrs.crop
+    );
+    const session = openCropSurface(img, crop2);
+    cropSessionRef.current = session;
+    setCropOverlay(session.overlay);
+    remeasureHover();
+    return () => {
+      session.restore();
+      if (cropSessionRef.current === session) cropSessionRef.current = null;
+      setCropOverlay(null);
+    };
+  }, [cropping, editor, remeasureHover]);
   if (typeof document === "undefined") return null;
   if (!hover || !editor.isEditable) return null;
   const above = hover.top - TOOLBAR_HEIGHT - TOOLBAR_GAP >= 8;
   const nodeAttrs = (_a = editor.state.doc.nodeAt(hover.pos)) == null ? void 0 : _a.attrs;
   const active = normalizeImageAlign(nodeAttrs == null ? void 0 : nodeAttrs.align);
   const caption = normalizeImageCaption(nodeAttrs == null ? void 0 : nodeAttrs.caption);
+  const crop = normalizeImageCrop(nodeAttrs == null ? void 0 : nodeAttrs.crop);
   const labelOf = {
     left: labels.imageAlignLeft,
     center: labels.imageAlignCenter,
@@ -4708,6 +4902,25 @@ function ImageAlignTools({ editor, labels }) {
     setCaptionDraft(null);
     remeasureHover();
   };
+  const commitCrop = (next) => {
+    const pos = hover.pos;
+    const session = cropSessionRef.current;
+    const dom = editor.view.nodeDOM(pos);
+    const img = dom instanceof HTMLImageElement ? dom : dom instanceof HTMLElement ? dom.querySelector("img") : null;
+    const naturalWidth = (img == null ? void 0 : img.naturalWidth) ?? 0;
+    const naturalHeight = (img == null ? void 0 : img.naturalHeight) ?? 0;
+    const attrWidth = Number(nodeAttrs == null ? void 0 : nodeAttrs.width);
+    const displayWidth = (session && session.displayWidth > 0 ? session.displayWidth : 0) || (Number.isFinite(attrWidth) && attrWidth > 0 ? attrWidth : 0) || naturalWidth;
+    session == null ? void 0 : session.discard();
+    setImageCropAtPos(
+      editor,
+      pos,
+      next,
+      naturalWidth > 0 && naturalHeight > 0 && displayWidth > 0 ? { naturalWidth, naturalHeight, displayWidth } : null
+    );
+    setCropping(false);
+    remeasureHover();
+  };
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
@@ -4747,6 +4960,25 @@ function ImageAlignTools({ editor, labels }) {
             );
           }),
           /* @__PURE__ */ jsx("span", { className: styles$3.divider, "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-image-align-action": "crop",
+              className: `${styles$3.btn} ${crop || cropping ? styles$3.btnActive : ""}`,
+              title: labels.imageCrop,
+              "aria-label": labels.imageCrop,
+              "aria-pressed": !!crop || cropping,
+              onClick: () => {
+                setCaptionDraft(null);
+                setCropping((open) => {
+                  cropOpenRef.current = !open;
+                  return !open;
+                });
+              },
+              children: /* @__PURE__ */ jsx(CropIcon, { size: 14 })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -4758,11 +4990,72 @@ function ImageAlignTools({ editor, labels }) {
               "aria-pressed": !!caption,
               onClick: () => {
                 if (captionDraftRef.current !== null) return;
+                cropOpenRef.current = false;
+                setCropping(false);
                 setCaptionDraft(caption ?? "");
               },
               children: /* @__PURE__ */ jsx(CaptionsIcon, { size: 14 })
             }
           ),
+          cropping ? null : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-image-align-action": "preview",
+              className: styles$3.btn,
+              title: labels.imagePreview,
+              "aria-label": labels.imagePreview,
+              onClick: () => {
+                const dom = editor.view.nodeDOM(hover.pos);
+                const img = dom instanceof HTMLImageElement ? dom : dom instanceof HTMLElement ? dom.querySelector("img") : null;
+                if (img instanceof HTMLImageElement) requestImagePreview(img);
+              },
+              children: /* @__PURE__ */ jsx(ExpandIcon, { size: 14 })
+            }
+          ),
+          cropping ? /* @__PURE__ */ jsxs(Fragment$2, { children: [
+            /* @__PURE__ */ jsx("span", { className: styles$3.divider, "aria-hidden": true }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$3.btn,
+                "data-image-crop-reset": "",
+                title: labels.imageCropReset,
+                "aria-label": labels.imageCropReset,
+                disabled: !crop,
+                onClick: () => commitCrop(null),
+                children: /* @__PURE__ */ jsx(RotateCcwIcon, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$3.btn,
+                "data-image-crop-cancel": "",
+                title: labels.imageCropCancel,
+                "aria-label": labels.imageCropCancel,
+                onClick: () => setCropping(false),
+                children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `${styles$3.btn} ${styles$3.btnApply}`,
+                "data-image-crop-apply": "",
+                title: labels.imageCropApply,
+                "aria-label": labels.imageCropApply,
+                onClick: () => {
+                  var _a2;
+                  return (_a2 = cropStageRef.current) == null ? void 0 : _a2.apply();
+                },
+                children: /* @__PURE__ */ jsx(CheckIcon, { size: 14 })
+              }
+            )
+          ] }) : null,
           captionDraft !== null ? /* @__PURE__ */ jsx("div", { className: styles$3.captionRow, children: /* @__PURE__ */ jsx(
             "input",
             {
@@ -4779,7 +5072,18 @@ function ImageAlignTools({ editor, labels }) {
               },
               onBlur: commitCaption
             }
-          ) }) : null
+          ) }) : null,
+          cropOverlay ? /* @__PURE__ */ jsx(
+            ImageCropStage,
+            {
+              ref: cropStageRef,
+              overlay: cropOverlay,
+              crop,
+              label: labels.imageCrop,
+              onApply: commitCrop,
+              onCancel: () => setCropping(false)
+            }
+          ) : null
         ]
       }
     ),
@@ -5768,7 +6072,7 @@ function MathEditorPopover({
     "textarea",
     {
       ref: inputRef,
-      className: styles$5.mathInput,
+      className: styles$6.mathInput,
       value: draft,
       placeholder,
       rows: Math.max(3, draft.split("\n").length),
@@ -5780,7 +6084,7 @@ function MathEditorPopover({
     "input",
     {
       ref: inputRef,
-      className: styles$5.mathInput,
+      className: styles$6.mathInput,
       value: draft,
       placeholder,
       "aria-labelledby": titleId,
@@ -5794,7 +6098,7 @@ function MathEditorPopover({
       "div",
       {
         ref: rootRef,
-        className: styles$5.mathLayer,
+        className: styles$6.mathLayer,
         style: layerStyle,
         role: "dialog",
         "aria-modal": "false",
@@ -5802,15 +6106,15 @@ function MathEditorPopover({
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: isBlock ? `${styles$5.mathStack} ${styles$5.mathStackBlock}` : styles$5.mathStack,
+            className: isBlock ? `${styles$6.mathStack} ${styles$6.mathStackBlock}` : styles$6.mathStack,
             children: [
               showHint ? /* @__PURE__ */ jsxs(
                 "div",
                 {
                   id: titleId,
-                  className: isBlock ? `${styles$5.mathHint} ${styles$5.mathHintBlock}` : styles$5.mathHint,
+                  className: isBlock ? `${styles$6.mathHint} ${styles$6.mathHintBlock}` : styles$6.mathHint,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.mathHintIcon, "aria-hidden": true, children: isBlock ? "TeX" : "√x" }),
+                    /* @__PURE__ */ jsx("span", { className: styles$6.mathHintIcon, "aria-hidden": true, children: isBlock ? "TeX" : "√x" }),
                     newLabel
                   ]
                 }
@@ -5819,20 +6123,20 @@ function MathEditorPopover({
                 "div",
                 {
                   id: showHint ? void 0 : titleId,
-                  className: isBlock ? `${styles$5.mathField} ${styles$5.mathFieldBlock}` : styles$5.mathField,
+                  className: isBlock ? `${styles$6.mathField} ${styles$6.mathFieldBlock}` : styles$6.mathField,
                   children: [
                     field2,
                     /* @__PURE__ */ jsxs(
                       "button",
                       {
                         type: "button",
-                        className: styles$5.mathDone,
+                        className: styles$6.mathDone,
                         disabled: !canSubmit,
                         title: isBlock ? `${doneLabel} (⌘/Ctrl+Enter)` : `${doneLabel} (Enter)`,
                         onClick: submit,
                         children: [
                           doneLabel,
-                          /* @__PURE__ */ jsx("span", { className: styles$5.mathDoneKbd, "aria-hidden": true, children: "↵" })
+                          /* @__PURE__ */ jsx("span", { className: styles$6.mathDoneKbd, "aria-hidden": true, children: "↵" })
                         ]
                       }
                     )
@@ -5859,7 +6163,7 @@ const ToolbarButton = forwardRef(function ToolbarButton2({ title, active, disabl
       "aria-pressed": active,
       "aria-busy": busy,
       disabled,
-      className: `${styles$5.btn} ${active ? styles$5.btnActive : ""}${className ? ` ${className}` : ""}`,
+      className: `${styles$6.btn} ${active ? styles$6.btnActive : ""}${className ? ` ${className}` : ""}`,
       onMouseDown: (e2) => e2.preventDefault(),
       onClick,
       children
@@ -5867,7 +6171,7 @@ const ToolbarButton = forwardRef(function ToolbarButton2({ title, active, disabl
   );
 });
 function Divider() {
-  return /* @__PURE__ */ jsx("span", { className: styles$5.divider, "aria-hidden": true });
+  return /* @__PURE__ */ jsx("span", { className: styles$6.divider, "aria-hidden": true });
 }
 const LINE_HEIGHTS = ["1", "1.15", "1.5", "2", "2.5", "3"];
 function readParaAttr(editor, name) {
@@ -5888,7 +6192,7 @@ function MenuPopover({
     /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        className: contentClassName ? `${styles$5.menu} ${contentClassName}` : styles$5.menu,
+        className: contentClassName ? `${styles$6.menu} ${contentClassName}` : styles$6.menu,
         sideOffset: 4,
         align,
         onOpenAutoFocus: (e2) => e2.preventDefault(),
@@ -5910,7 +6214,7 @@ function MenuItem({
     {
       type: "button",
       disabled,
-      className: `${styles$5.menuItem} ${selected ? styles$5.menuItemSelected : ""}`,
+      className: `${styles$6.menuItem} ${selected ? styles$6.menuItemSelected : ""}`,
       onMouseDown: (e2) => e2.preventDefault(),
       onClick: () => {
         onSelect();
@@ -5925,7 +6229,7 @@ function NumberingFormatGrid({
   onSelect
 }) {
   const close = useContext(MenuCloseCtx);
-  return /* @__PURE__ */ jsx("div", { className: styles$5.numberingGrid, role: "group", "aria-label": "Numbering formats", children: NUMBERING_FORMAT_IDS.map((format) => {
+  return /* @__PURE__ */ jsx("div", { className: styles$6.numberingGrid, role: "group", "aria-label": "Numbering formats", children: NUMBERING_FORMAT_IDS.map((format) => {
     const active = current === format;
     return /* @__PURE__ */ jsx(
       "button",
@@ -5934,20 +6238,20 @@ function NumberingFormatGrid({
         role: "menuitem",
         "aria-label": NUMBERING_FORMAT_LABELS[format],
         "aria-pressed": active,
-        className: `${styles$5.numberingOption}${active ? ` ${styles$5.numberingOptionActive}` : ""}`,
+        className: `${styles$6.numberingOption}${active ? ` ${styles$6.numberingOptionActive}` : ""}`,
         onMouseDown: (e2) => e2.preventDefault(),
         onClick: () => {
           onSelect(format);
           close();
         },
-        children: /* @__PURE__ */ jsx("span", { className: styles$5.numberingPreview, children: NUMBERING_FORMAT_PREVIEWS[format].map((row2, index) => /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx("span", { className: styles$6.numberingPreview, children: NUMBERING_FORMAT_PREVIEWS[format].map((row2, index) => /* @__PURE__ */ jsxs(
           "span",
           {
-            className: styles$5.numberingPreviewRow,
+            className: styles$6.numberingPreviewRow,
             "data-depth": row2.depth,
             children: [
-              /* @__PURE__ */ jsx("span", { className: styles$5.numberingPreviewMarker, children: row2.marker }),
-              /* @__PURE__ */ jsx("span", { className: styles$5.numberingPreviewLine })
+              /* @__PURE__ */ jsx("span", { className: styles$6.numberingPreviewMarker, children: row2.marker }),
+              /* @__PURE__ */ jsx("span", { className: styles$6.numberingPreviewLine })
             ]
           },
           `${format}-${index}`
@@ -5982,21 +6286,21 @@ function TableInsertItem({
           {
             type: "button",
             disabled,
-            className: `${styles$5.menuItem} ${open ? styles$5.menuItemSelected : ""}`,
+            className: `${styles$6.menuItem} ${open ? styles$6.menuItemSelected : ""}`,
             onMouseDown: (e2) => e2.preventDefault(),
             children: [
-              /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "⊞" }),
+              /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "⊞" }),
                 labels.tableInsert
               ] }),
-              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.tableInsertCaret })
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.tableInsertCaret })
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
           Popover.Content,
           {
-            className: styles$5.tableSizePicker,
+            className: styles$6.tableSizePicker,
             side: "right",
             align: "start",
             sideOffset: 6,
@@ -6006,7 +6310,7 @@ function TableInsertItem({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: styles$5.tableSizeGrid,
+                  className: styles$6.tableSizeGrid,
                   style: {
                     gridTemplateColumns: `repeat(${TABLE_PICKER_COLS}, 1fr)`
                   },
@@ -6020,7 +6324,7 @@ function TableInsertItem({
                       {
                         type: "button",
                         "aria-label": labels.tableSizeSelected(col, row2),
-                        className: `${styles$5.tableSizeCell} ${active ? styles$5.tableSizeCellActive : ""}`,
+                        className: `${styles$6.tableSizeCell} ${active ? styles$6.tableSizeCellActive : ""}`,
                         onMouseDown: (e2) => e2.preventDefault(),
                         onMouseEnter: () => setHover({ cols: col, rows: row2 }),
                         onClick: () => {
@@ -6035,7 +6339,7 @@ function TableInsertItem({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: styles$5.tableSizeLabel, children: hover.cols > 0 ? labels.tableSizeSelected(hover.cols, hover.rows) : labels.tableInsert })
+              /* @__PURE__ */ jsx("div", { className: styles$6.tableSizeLabel, children: hover.cols > 0 ? labels.tableSizeSelected(hover.cols, hover.rows) : labels.tableInsert })
             ]
           }
         ) })
@@ -6057,20 +6361,20 @@ function ColorPopover({
       "button",
       {
         type: "button",
-        className: styles$5.btn,
+        className: styles$6.btn,
         title,
         "aria-label": title,
         onMouseDown: (e2) => e2.preventDefault(),
-        children: /* @__PURE__ */ jsxs("span", { className: styles$5.colorIcon, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$5.colorIconGlyph, children: glyph }),
-          /* @__PURE__ */ jsx("span", { className: styles$5.colorIconBar, style: { background: bar2 } })
+        children: /* @__PURE__ */ jsxs("span", { className: styles$6.colorIcon, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$6.colorIconGlyph, children: glyph }),
+          /* @__PURE__ */ jsx("span", { className: styles$6.colorIconBar, style: { background: bar2 } })
         ] })
       }
     ) }),
     /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        className: styles$5.popoverContent,
+        className: styles$6.popoverContent,
         sideOffset: 4,
         align: "start",
         onOpenAutoFocus: (e2) => e2.preventDefault(),
@@ -6336,8 +6640,8 @@ function EditorToolbar({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: className ? `${styles$5.toolbar} ${className}` : styles$5.toolbar,
-        children: /* @__PURE__ */ jsxs("div", { className: styles$5.inner, children: [
+        className: className ? `${styles$6.toolbar} ${className}` : styles$6.toolbar,
+        children: /* @__PURE__ */ jsxs("div", { className: styles$6.inner, children: [
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
@@ -6364,12 +6668,12 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$5.styleTrigger,
+                  className: styles$6.styleTrigger,
                   title: t.style,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.styleTriggerLabel, children: t.style }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$6.styleTriggerLabel, children: t.style }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
@@ -6379,8 +6683,8 @@ function EditorToolbar({
                   {
                     selected: (state.headingLevel ?? 0) === 0,
                     onSelect: () => setBlockStyle(0),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "¶" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "¶" }),
                       t.normalText
                     ] })
                   }
@@ -6390,8 +6694,8 @@ function EditorToolbar({
                   {
                     selected: state.headingLevel === lv,
                     onSelect: () => setBlockStyle(lv),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: `H${lv}` }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: `H${lv}` }),
                       t.headingLabel(lv)
                     ] })
                   },
@@ -6407,14 +6711,14 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$5.styleTrigger,
+                  className: styles$6.styleTrigger,
                   title: t.fontSize,
                   "aria-label": t.fontSize,
                   disabled: !canEditFontSize,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.styleTriggerLabel, children: state.fontSize || t.fontSize }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$6.styleTriggerLabel, children: state.fontSize || t.fontSize }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
@@ -6424,8 +6728,8 @@ function EditorToolbar({
                   {
                     selected: !state.fontSize,
                     onSelect: () => applyFontSize(""),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "A" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "A" }),
                       t.fontSizeDefault
                     ] })
                   }
@@ -6435,8 +6739,8 @@ function EditorToolbar({
                   {
                     selected: state.fontSize === size,
                     onSelect: () => applyFontSize(size),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: parseInt(size, 10) }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: parseInt(size, 10) }),
                       size
                     ] })
                   },
@@ -6520,13 +6824,13 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: `${styles$5.scriptTrigger} ${scriptActive !== "normal" ? styles$5.btnActive : ""}`,
+                  className: `${styles$6.scriptTrigger} ${scriptActive !== "normal" ? styles$6.btnActive : ""}`,
                   title: t.scriptMenu,
                   "aria-label": t.scriptMenu,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.scriptTriggerGlyph, children: "A" }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$6.scriptTriggerGlyph, children: "A" }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
@@ -6536,8 +6840,8 @@ function EditorToolbar({
                   {
                     selected: scriptActive === "normal",
                     onSelect: () => chain().unsetSuperscript().unsetSubscript().run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "A" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "A" }),
                       t.scriptNormal
                     ] })
                   }
@@ -6547,8 +6851,8 @@ function EditorToolbar({
                   {
                     selected: scriptActive === "superscript",
                     onSelect: () => chain().unsetSubscript().toggleSuperscript().run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsxs("span", { className: `${styles$5.styleIcon} ${styles$5.scriptGlyph}`, children: [
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$6.styleIcon} ${styles$6.scriptGlyph}`, children: [
                         "x",
                         /* @__PURE__ */ jsx("sup", { children: "2" })
                       ] }),
@@ -6561,8 +6865,8 @@ function EditorToolbar({
                   {
                     selected: scriptActive === "subscript",
                     onSelect: () => chain().unsetSuperscript().toggleSubscript().run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsxs("span", { className: `${styles$5.styleIcon} ${styles$5.scriptGlyph}`, children: [
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$6.styleIcon} ${styles$6.scriptGlyph}`, children: [
                         "x",
                         /* @__PURE__ */ jsx("sub", { children: "2" })
                       ] }),
@@ -6602,19 +6906,19 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$5.styleTrigger,
+                  className: styles$6.styleTrigger,
                   title: importTitle,
                   "aria-label": importTitle,
                   "aria-busy": !!importing,
                   disabled: !!importing,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.styleTriggerLabel, children: t.importDocument }),
+                    /* @__PURE__ */ jsx("span", { className: styles$6.styleTriggerLabel, children: t.importDocument }),
                     /* @__PURE__ */ jsx(
                       ChevronDownIcon,
                       {
                         size: 12,
-                        className: styles$5.styleTriggerCaret
+                        className: styles$6.styleTriggerCaret
                       }
                     )
                   ]
@@ -6636,7 +6940,7 @@ function EditorToolbar({
               title: t.blockquote,
               active: state.blockquote,
               onClick: () => chain().toggleBlockquote().run(),
-              children: /* @__PURE__ */ jsx("span", { className: styles$5.txtIcon, children: "❝" })
+              children: /* @__PURE__ */ jsx("span", { className: styles$6.txtIcon, children: "❝" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -6660,13 +6964,13 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: `${styles$5.styleTrigger} ${styles$5.iconTrigger}`,
+                  className: `${styles$6.styleTrigger} ${styles$6.iconTrigger}`,
                   title: t.align,
                   "aria-label": t.align,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
                     state.textAlign === "center" ? /* @__PURE__ */ jsx(AlignCenterIcon, {}) : state.textAlign === "right" ? /* @__PURE__ */ jsx(AlignRightIcon, {}) : state.textAlign === "justify" ? /* @__PURE__ */ jsx(AlignJustifyIcon, {}) : /* @__PURE__ */ jsx(AlignLeftIcon, {}),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
@@ -6680,8 +6984,8 @@ function EditorToolbar({
                 {
                   selected: state.textAlign === value,
                   onSelect: () => chain().setTextAlign(value).run(),
-                  children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: /* @__PURE__ */ jsx(Icon, { size: 14 }) }),
+                  children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: /* @__PURE__ */ jsx(Icon, { size: 14 }) }),
                     label
                   ] })
                 },
@@ -6696,23 +7000,23 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: `${styles$5.styleTrigger} ${styles$5.iconTrigger}`,
+                  className: `${styles$6.styleTrigger} ${styles$6.iconTrigger}`,
                   title: t.indent,
                   "aria-label": t.indent,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
                     /* @__PURE__ */ jsx(IndentIncreaseIcon, {}),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
               children: [
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().increaseIndent().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: /* @__PURE__ */ jsx(IndentIncreaseIcon, { size: 14 }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().increaseIndent().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: /* @__PURE__ */ jsx(IndentIncreaseIcon, { size: 14 }) }),
                   t.indentIncrease
                 ] }) }),
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().decreaseIndent().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: /* @__PURE__ */ jsx(IndentDecreaseIcon, { size: 14 }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().decreaseIndent().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: /* @__PURE__ */ jsx(IndentDecreaseIcon, { size: 14 }) }),
                   t.indentDecrease
                 ] }) })
               ]
@@ -6725,13 +7029,13 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: `${styles$5.styleTrigger} ${styles$5.iconTrigger}`,
+                  className: `${styles$6.styleTrigger} ${styles$6.iconTrigger}`,
                   title: t.lineHeight,
                   "aria-label": t.lineHeight,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
                     /* @__PURE__ */ jsx(LineHeightIcon, {}),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
@@ -6741,8 +7045,8 @@ function EditorToolbar({
                   {
                     selected: !state.lineHeight,
                     onSelect: () => chain().setLineHeight(null).run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "—" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "—" }),
                       t.lineHeightDefault
                     ] })
                   }
@@ -6752,8 +7056,8 @@ function EditorToolbar({
                   {
                     selected: state.lineHeight === Number(value),
                     onSelect: () => chain().setLineHeight(Number(value)).run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "≡" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "≡" }),
                       value
                     ] })
                   },
@@ -6775,7 +7079,7 @@ function EditorToolbar({
           /* @__PURE__ */ jsxs(
             "span",
             {
-              className: `${styles$5.listSplit}${state.orderedList ? ` ${styles$5.listSplitActive}` : ""}`,
+              className: `${styles$6.listSplit}${state.orderedList ? ` ${styles$6.listSplitActive}` : ""}`,
               children: [
                 /* @__PURE__ */ jsx(
                   ToolbarButton,
@@ -6790,12 +7094,12 @@ function EditorToolbar({
                   MenuPopover,
                   {
                     align: "end",
-                    contentClassName: styles$5.numberingMenu,
+                    contentClassName: styles$6.numberingMenu,
                     trigger: /* @__PURE__ */ jsx(
                       "button",
                       {
                         type: "button",
-                        className: `${styles$5.numberingCaret}${state.numberingFormat ? ` ${styles$5.numberingCaretActive}` : ""}`,
+                        className: `${styles$6.numberingCaret}${state.numberingFormat ? ` ${styles$6.numberingCaretActive}` : ""}`,
                         title: t.numberingFormat,
                         "aria-label": t.numberingFormat,
                         onMouseDown: (e2) => e2.preventDefault(),
@@ -6840,30 +7144,30 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$5.styleTrigger,
+                  className: styles$6.styleTrigger,
                   title: t.more,
                   onMouseDown: (e2) => e2.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$5.styleTriggerLabel, children: t.more }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$5.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$6.styleTriggerLabel, children: t.more }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$6.styleTriggerCaret })
                   ]
                 }
               ),
               children: [
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().toggleCodeBlock().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "{ }" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().toggleCodeBlock().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "{ }" }),
                   t.codeBlock
                 ] }) }),
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("inline"), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "√x" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("inline"), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "√x" }),
                   t.inlineMath
                 ] }) }),
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("block"), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "∑" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("block"), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "∑" }),
                   t.blockMath
                 ] }) }),
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().setHorizontalRule().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: "—" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().setHorizontalRule().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: "—" }),
                   t.hr
                 ] }) }),
                 /* @__PURE__ */ jsx(
@@ -6879,8 +7183,8 @@ function EditorToolbar({
                   {
                     disabled: item2.disabled,
                     onSelect: () => item2.onSelect(editor),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$5.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$5.styleIcon, children: item2.icon }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$6.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$6.styleIcon, children: item2.icon }),
                       item2.label
                     ] })
                   },
@@ -6924,7 +7228,7 @@ function EditorToolbar({
 function resetImageSize(editor) {
   const pos = findImagePos(editor);
   if (pos == null) return false;
-  return editor.chain().focus().setNodeSelection(pos).updateAttributes("image", { width: null, height: null }).run();
+  return editor.chain().focus().setNodeSelection(pos).updateAttributes("image", { width: null, height: null, crop: null }).run();
 }
 const popoverAnchor = "_popoverAnchor_9y5t0_55";
 const popoverContent = "_popoverContent_9y5t0_62";
@@ -7104,6 +7408,8 @@ export {
   C as ChartMount,
   CheckIcon,
   ChevronDownIcon,
+  a9 as ChevronLeftIcon,
+  aa as ChevronRightIcon,
   ChevronUpIcon,
   ChevronsUpDownIcon,
   a as CitationInteractive,
@@ -7117,19 +7423,22 @@ export {
   CommentMark,
   CommentPopover,
   CopyIcon,
+  CropIcon,
   DetailsIcon,
   DownloadIcon,
   EditorToolbar,
   EraserIcon,
+  ExpandIcon,
   ExternalLinkIcon,
   FIND_DEBOUNCE_MS,
   default2 as FindAndReplace,
   FindReplaceBar,
+  ab as FitIcon,
   GripIcon,
   ImageAlignTools,
   ImageIcon,
   ImageUploadNode,
-  ImportIcon,
+  ac as ImportIcon,
   ImportPlaceholder,
   IndentDecreaseIcon,
   IndentIncreaseIcon,
@@ -7141,12 +7450,12 @@ export {
   ListChecksIcon,
   ListOrderedIcon,
   ListUnorderedIcon,
-  LockIcon,
+  ad as LockIcon,
   MarkdownFileDrop,
   MarkdownPaste,
   MarkdownPreview,
   MarkdownWysiwygEditor,
-  MenuIcon,
+  ae as MenuIcon,
   PENDING_ANCHOR_CLASS,
   P as ParagraphStyles,
   RedoIcon,
@@ -7156,6 +7465,7 @@ export {
   b as ReportContentInteractive,
   c as ReportContentWithCharts,
   RotateCcwIcon,
+  af as RotateCwIcon,
   RowAfterIcon,
   RowBeforeIcon,
   RowDeleteIcon,
@@ -7168,6 +7478,8 @@ export {
   UnderlineIcon,
   UndoIcon,
   XIcon,
+  ag as ZoomInIcon,
+  ah as ZoomOutIcon,
   a2 as applyCitationSources,
   applyCommentAnchorsToEditor,
   applyLink,
@@ -7208,6 +7520,7 @@ export {
   nextComment,
   normalizeImageAlign,
   normalizeImageCaption,
+  normalizeImageCrop,
   normalizeLinkHref,
   normalizeMarkdown,
   openLinkUrl,
@@ -7230,6 +7543,8 @@ export {
   setImageAlignAt,
   setImageCaption,
   setImageCaptionAtPos,
+  setImageCrop,
+  setImageCropAtPos,
   s3 as stabilizeMarkdown,
   stripCommentAnchorMarks,
   useIsMobile