@stll/folio-react 0.19.3 → 0.19.5

package/dist/{CommentsSidebar-BOaLk877.js → CommentsSidebar-tGhtc2ZH.js}

@@ -1,4 +1,4 @@
-import { d as containedHandler } from "./renderAsync-CKbqa0RR.js";
+import { d as containedHandler } from "./renderAsync-CkF394Ug.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CheckIcon, MoreVerticalIcon } from "lucide-react";
 import { useLocale, useTranslations } from "use-intl";

package/dist/compat/eigenpal.js

@@ -1,4 +1,4 @@
-import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-CKbqa0RR.js";
+import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-CkF394Ug.js";
 import { t as messages_exports } from "../messages.js";
 import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as formatZoom, c as FormattingBar, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync, u as AutocompleteCaretOverlay } from "./renderAsync-CKbqa0RR.js";
+import { a as formatZoom, c as FormattingBar, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync, u as AutocompleteCaretOverlay } from "./renderAsync-CkF394Ug.js";
 import { n as FolioUIProvider } from "./folio-ui-BgDDRsUX.js";
 import { t as FindReplaceDialog } from "./FindReplaceDialog-CqKK82nE.js";
 import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-CixRdIiT.js";

package/dist/{renderAsync-CKbqa0RR.js → renderAsync-CkF394Ug.js}

@@ -26,7 +26,7 @@ import { resolveFindMatchRange } from "@stll/folio-core/prosemirror/findReplaceS
 import { createAICitationDecorationsPlugin } from "@stll/folio-core/prosemirror/plugins/aiCitationDecorations";
 import { AI_SUGGESTION_SEVERITY_CLASS, aiSuggestionDecorationsKey, createAISuggestionDecorationsPlugin } from "@stll/folio-core/prosemirror/plugins/aiSuggestionDecorations";
 import { anonymizationDecorationsKey, createAnonymizationDecorationsPlugin, slugAnonymizationLabel } from "@stll/folio-core/prosemirror/plugins/anonymizationDecorations";
-import { expectImageAttrs, expectTableAttrs, expectTableCellAttrs, mergeImageAttrs, mergeTableAttrs, mergeTableCellAttrs, mergeTableRowAttrs } from "@stll/folio-core/prosemirror/attrs";
+import { expectImageAttrs, expectTableAttrs, expectTableCellAttrs, mergeTableAttrs, mergeTableCellAttrs, mergeTableRowAttrs } from "@stll/folio-core/prosemirror/attrs";
 import { autocompleteSuggestionKey, autocompleteSuggestionPlugin } from "@stll/folio-core/prosemirror/plugins/autocompleteSuggestion";
 import { createSuggestionModePlugin, setSuggestionMode, suggestionModeKey } from "@stll/folio-core/prosemirror/plugins/suggestionMode";
 import { createTemplateDirectivesPlugin, templateDirectivesKey } from "@stll/folio-core/prosemirror/plugins/templateDirectives";
@@ -83,6 +83,8 @@ import { resizeColumnPair } from "@stll/folio-core/paged-layout/tableColumnResiz
 import { tableInsertButtonOffset } from "@stll/folio-core/paged-layout/tableInsertButtonGeometry";
 import { getTransactionsDirtyRange } from "@stll/folio-core/paged-layout/transactionDirtyRange";
 import { findStartPosForParaId } from "@stll/folio-core/prosemirror/utils/findParagraphByParaId";
+import { allowsDirectDrawingEdit } from "@stll/folio-core/docx/imageRawXml";
+import { commitImageFloatMove, commitImageInlineMove, commitImageResize, isFloatingImage } from "@stll/folio-core/prosemirror/imageCommit";
 import { buildEmbeddedFontFamilyMap, extractEmbeddedFonts } from "@stll/folio-core/fonts/embeddedFonts";
 import { panic } from "better-result";
 import { collectRemoteSelections, createHiddenEditorManager, createHiddenEditorState } from "@stll/folio-core/controller/hiddenEditorManager";
@@ -1697,7 +1699,7 @@ function ImageSelectionOverlay({ imageInfo, zoom, isFocused, onResize, onResizeS
 				width: width + BORDER_WIDTH * 2,
 				height: height + BORDER_WIDTH * 2
 			} }),
-			/* @__PURE__ */ jsx("div", {
+			imageInfo.allowsDirectEdit && /* @__PURE__ */ jsx("div", {
 				role: "presentation",
 				style: {
 					position: "absolute",
@@ -1711,7 +1713,7 @@ function ImageSelectionOverlay({ imageInfo, zoom, isFocused, onResize, onResizeS
 				},
 				onMouseDown: handleBodyMouseDown
 			}),
-			HANDLES.map(({ pos, x, y }) => /* @__PURE__ */ jsx(Handle, {
+			imageInfo.allowsDirectEdit && HANDLES.map(({ pos, x, y }) => /* @__PURE__ */ jsx(Handle, {
 				handle: pos,
 				left: left + width * x - HANDLE_HALF,
 				top: top + height * y - HANDLE_HALF,
@@ -2938,11 +2940,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const imgTagCandidate = el.tagName === "IMG" ? el : el.querySelector("img");
 		const element = (imgTagCandidate instanceof HTMLElement ? imgTagCandidate : null) ?? el;
 		const rect = element.getBoundingClientRect();
+		const node = hiddenPMRef.current?.getView()?.state.doc.nodeAt(pmPos);
 		return {
 			element,
 			pmPos,
 			width: Math.round(rect.width / zoom),
-			height: Math.round(rect.height / zoom)
+			height: Math.round(rect.height / zoom),
+			allowsDirectEdit: node?.type.name === "image" ? allowsDirectDrawingEdit(expectImageAttrs(node)._docxRawXmlMode) : true
 		};
 	}, [zoom]);
 	const isDraggingRef = useRef(false);
@@ -3049,8 +3053,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const columns = useMemo(() => getColumns(sectionProperties), [sectionProperties]);
 	const contentWidth = pageSize.w - margins.left - margins.right;
 	const defaultTabStop = document?.package.settings?.defaultTabStop;
-	const documentSettings = document?.package.settings;
-	const mirrorMargins = documentSettings !== void 0 && "mirrorMargins" in documentSettings && documentSettings.mirrorMargins === true;
+	const mirrorMargins = document?.package.settings?.mirrorMargins === true;
 	const sectionHeaderFooterRefs = useMemo(() => resolveSectionHeaderFooterRefs(document), [document]);
 	const layoutInputSignature = useMemo(() => buildLayoutInputSignature({
 		columns,
@@ -3317,8 +3320,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const sel = state_3.selection;
 			if ("$anchorCell" in sel && typeof sel.forEachCell === "function") {
 				const selectedRanges = [];
-				sel.forEachCell((node, pos) => {
-					selectedRanges.push([pos, pos + node.nodeSize]);
+				sel.forEachCell((node_0, pos) => {
+					selectedRanges.push([pos, pos + node_0.nodeSize]);
 				});
 				const allCells = htmlQueryAll(pagesContainerRef.current, ".layout-table-cell");
 				for (const cellEl of allCells) {
@@ -3960,8 +3963,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		try {
 			const $pos = doc.resolve(pmPos_3);
 			for (let d = $pos.depth; d > 0; d--) {
-				const node_0 = $pos.node(d);
-				if (node_0.type.name === "tableCell" || node_0.type.name === "tableHeader") return $pos.before(d);
+				const node_1 = $pos.node(d);
+				if (node_1.type.name === "tableCell" || node_1.type.name === "tableHeader") return $pos.before(d);
 			}
 		} catch {}
 		return null;
@@ -4191,9 +4194,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (view_9) {
 				const $pos_1 = view_9.state.doc.resolve(resizeTablePmStartRef.current + 1);
 				for (let d_0 = $pos_1.depth; d_0 >= 0; d_0--) {
-					const node_1 = $pos_1.node(d_0);
-					if (node_1.type.name === "table") {
-						const widths = node_1.attrs["columnWidths"];
+					const node_2 = $pos_1.node(d_0);
+					if (node_2.type.name === "table") {
+						const widths = node_2.attrs["columnWidths"];
 						if (widths && widths[colIndex] !== void 0 && widths[colIndex + 1] !== void 0) resizeOrigWidthsRef.current = {
 							left: widths[colIndex],
 							right: widths[colIndex + 1]
@@ -4223,10 +4226,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (view_10) {
 				const $pos_2 = view_10.state.doc.resolve(resizeRowTablePmStartRef.current + 1);
 				for (let d_1 = $pos_2.depth; d_1 >= 0; d_1--) {
-					const node_2 = $pos_2.node(d_1);
-					if (node_2.type.name === "table") {
-						if (rowIndex < node_2.childCount) {
-							const height = node_2.child(rowIndex).attrs["height"];
+					const node_3 = $pos_2.node(d_1);
+					if (node_3.type.name === "table") {
+						if (rowIndex < node_3.childCount) {
+							const height = node_3.child(rowIndex).attrs["height"];
 							if (height) resizeRowOrigHeightRef.current = height;
 							else {
 								const rowEl = target_1.closest(".layout-table")?.querySelector(`[data-row-index="${rowIndex}"]`);
@@ -4258,9 +4261,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (view_11) {
 				const $pos_3 = view_11.state.doc.resolve(resizeRightEdgePmStartRef.current + 1);
 				for (let d_2 = $pos_3.depth; d_2 >= 0; d_2--) {
-					const node_3 = $pos_3.node(d_2);
-					if (node_3.type.name === "table") {
-						const widths_0 = node_3.attrs["columnWidths"];
+					const node_4 = $pos_3.node(d_2);
+					if (node_4.type.name === "table") {
+						const widths_0 = node_4.attrs["columnWidths"];
 						if (widths_0 && widths_0[colIndex_0] !== void 0) resizeRightEdgeOrigWidthRef.current = widths_0[colIndex_0];
 						break;
 					}
@@ -4463,18 +4466,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const { left: newLeft, right: newRight } = resizeOrigWidthsRef.current;
 				const $pos_5 = view_12.state.doc.resolve(pmStart_0 + 1);
 				for (let d_3 = $pos_5.depth; d_3 >= 0; d_3--) {
-					const node_4 = $pos_5.node(d_3);
-					if (node_4.type.name === "table") {
+					const node_5 = $pos_5.node(d_3);
+					if (node_5.type.name === "table") {
 						const tablePos = $pos_5.before(d_3);
 						const tr = view_12.state.tr;
-						const tableAttrs = expectTableAttrs(node_4);
+						const tableAttrs = expectTableAttrs(node_5);
 						if (!tableAttrs.columnWidths) break;
 						const widths_1 = [...tableAttrs.columnWidths];
 						widths_1[colIdx] = newLeft;
 						widths_1[colIdx + 1] = newRight;
-						tr.setNodeMarkup(tablePos, void 0, mergeTableAttrs(node_4, { columnWidths: widths_1 }));
+						tr.setNodeMarkup(tablePos, void 0, mergeTableAttrs(node_5, { columnWidths: widths_1 }));
 						let rowOffset = tablePos + 1;
-						node_4.forEach((row) => {
+						node_5.forEach((row) => {
 							let cellOffset = rowOffset + 1;
 							let cellColIdx = 0;
 							row.forEach((cell) => {
@@ -4513,13 +4516,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const newHeight_0 = resizeRowOrigHeightRef.current;
 				const $pos_6 = view_13.state.doc.resolve(pmStart_1 + 1);
 				for (let d_4 = $pos_6.depth; d_4 >= 0; d_4--) {
-					const node_5 = $pos_6.node(d_4);
-					if (node_5.type.name === "table") {
+					const node_6 = $pos_6.node(d_4);
+					if (node_6.type.name === "table") {
 						const tablePos_0 = $pos_6.before(d_4);
 						const tr_0 = view_13.state.tr;
 						let rowOffset_0 = tablePos_0 + 1;
 						let idx = 0;
-						node_5.forEach((row_0) => {
+						node_6.forEach((row_0) => {
 							if (idx === rowIdx) tr_0.setNodeMarkup(tr_0.mapping.map(rowOffset_0), void 0, mergeTableRowAttrs(row_0, {
 								height: newHeight_0,
 								heightRule: "atLeast"
@@ -4548,17 +4551,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const newWidth_1 = resizeRightEdgeOrigWidthRef.current;
 				const $pos_7 = view_14.state.doc.resolve(pmStart_2 + 1);
 				for (let d_5 = $pos_7.depth; d_5 >= 0; d_5--) {
-					const node_6 = $pos_7.node(d_5);
-					if (node_6.type.name === "table") {
+					const node_7 = $pos_7.node(d_5);
+					if (node_7.type.name === "table") {
 						const tablePos_1 = $pos_7.before(d_5);
 						const tr_1 = view_14.state.tr;
-						const tableAttrs_0 = expectTableAttrs(node_6);
+						const tableAttrs_0 = expectTableAttrs(node_7);
 						if (!tableAttrs_0.columnWidths) break;
 						const widths_2 = [...tableAttrs_0.columnWidths];
 						widths_2[colIdx_0] = newWidth_1;
-						tr_1.setNodeMarkup(tablePos_1, void 0, mergeTableAttrs(node_6, { columnWidths: widths_2 }));
+						tr_1.setNodeMarkup(tablePos_1, void 0, mergeTableAttrs(node_7, { columnWidths: widths_2 }));
 						let rowOffset_1 = tablePos_1 + 1;
-						node_6.forEach((row_1) => {
+						node_7.forEach((row_1) => {
 							let cellOffset_0 = rowOffset_1 + 1;
 							let cellColIdx_0 = 0;
 							row_1.forEach((cell_0) => {
@@ -4751,10 +4754,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					const view_16 = hiddenPMRef.current.getView();
 					if (view_16) {
 						const targetPos = { value: null };
-						view_16.state.doc.descendants((node_7, pos_2) => {
+						view_16.state.doc.descendants((node_8, pos_2) => {
 							if (targetPos.value !== null) return false;
-							if (node_7.type.name === "paragraph") {
-								if (node_7.attrs["bookmarks"]?.some((b) => b.name === bookmarkName)) {
+							if (node_8.type.name === "paragraph") {
+								if (node_8.attrs["bookmarks"]?.some((b) => b.name === bookmarkName)) {
 									targetPos.value = pos_2;
 									return false;
 								}
@@ -4816,8 +4819,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 						} else if (parent.isTextblock) {
 							const pmAlignedParts = [];
 							for (let i_0 = 0; i_0 < parent.content.childCount; i_0++) {
-								const node_8 = parent.content.child(i_0);
-								pmAlignedParts.push(node_8.isText ? node_8.text ?? "" : " ".repeat(node_8.nodeSize));
+								const node_9 = parent.content.child(i_0);
+								pmAlignedParts.push(node_9.isText ? node_9.text ?? "" : " ".repeat(node_9.nodeSize));
 							}
 							const pmAlignedText = pmAlignedParts.join("");
 							const offset = $pos_8.parentOffset;
@@ -4848,8 +4851,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					if (parent_0.isTextblock) {
 						const pmAlignedParts_0 = [];
 						for (let i_1 = 0; i_1 < parent_0.content.childCount; i_1++) {
-							const node_9 = parent_0.content.child(i_1);
-							pmAlignedParts_0.push(node_9.isText ? node_9.text ?? "" : " ".repeat(node_9.nodeSize));
+							const node_10 = parent_0.content.child(i_1);
+							pmAlignedParts_0.push(node_10.isText ? node_10.text ?? "" : " ".repeat(node_10.nodeSize));
 						}
 						const pmAlignedText_0 = pmAlignedParts_0.join("");
 						const offset_0 = $pos_9.parentOffset;
@@ -4960,16 +4963,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const handleImageResize = useCallback((pmPos_16, newWidth_2, newHeight_1) => {
 		const view_20 = hiddenPMRef.current?.getView();
 		if (!view_20) return;
-		try {
-			const node_10 = view_20.state.doc.nodeAt(pmPos_16);
-			if (!node_10 || node_10.type.name !== "image") return;
-			const tr_3 = view_20.state.tr.setNodeMarkup(pmPos_16, void 0, mergeImageAttrs(node_10, {
-				width: newWidth_2,
-				height: newHeight_1
-			}));
-			view_20.dispatch(tr_3);
-			hiddenPMRef.current?.setNodeSelection(pmPos_16);
-		} catch {}
+		const committed = commitImageResize(view_20, pmPos_16, newWidth_2, newHeight_1);
+		if (committed !== null) hiddenPMRef.current?.setNodeSelection(committed);
 	}, []);
 	/**
 	* Handle image resize start - prevent text selection during resize.
@@ -4993,8 +4988,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		try {
 			const node_11 = view_21.state.doc.nodeAt(pmPos_17);
 			if (!node_11 || node_11.type.name !== "image") return;
-			const attrs = expectImageAttrs(node_11);
-			if (attrs.displayMode === "float" || attrs.wrapType === "square" || attrs.wrapType === "tight" || attrs.wrapType === "through") {
+			let committed_0 = null;
+			if (isFloatingImage(node_11)) {
 				const pages_0 = pagesContainerRef.current?.querySelectorAll(".layout-page");
 				if (!pages_0 || pages_0.length === 0) return;
 				let contentEl = null;
@@ -5014,39 +5009,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				const dropX = (clientX_1 - contentRect.left) / zoom;
 				const dropY = (clientY_1 - contentRect.top) / zoom;
 				const PIXELS_TO_EMU = 914400 / 96;
-				const hOffsetEmu = Math.round(dropX * PIXELS_TO_EMU);
-				const vOffsetEmu = Math.round(dropY * PIXELS_TO_EMU);
-				const newPosition = {
-					horizontal: {
-						posOffset: hOffsetEmu,
-						relativeTo: "margin"
-					},
-					vertical: {
-						posOffset: vOffsetEmu,
-						relativeTo: "margin"
-					}
-				};
-				const tr_4 = view_21.state.tr.setNodeMarkup(pmPos_17, void 0, mergeImageAttrs(node_11, { position: newPosition }));
-				view_21.dispatch(tr_4);
-				hiddenPMRef.current?.setNodeSelection(pmPos_17);
+				committed_0 = commitImageFloatMove(view_21, pmPos_17, Math.round(dropX * PIXELS_TO_EMU), Math.round(dropY * PIXELS_TO_EMU));
 			} else {
 				const dropPos = getPositionFromMouse(clientX_1, clientY_1);
 				if (dropPos === null) return;
-				if (dropPos === pmPos_17 || dropPos === pmPos_17 + 1) return;
-				let tr_5 = view_21.state.tr;
-				tr_5 = tr_5.delete(pmPos_17, pmPos_17 + node_11.nodeSize);
-				let selectionPos;
-				if (dropPos <= pmPos_17) {
-					tr_5 = tr_5.insert(dropPos, node_11);
-					selectionPos = dropPos;
-				} else {
-					const adjusted = dropPos - node_11.nodeSize;
-					tr_5 = tr_5.insert(Math.min(adjusted, tr_5.doc.content.size), node_11);
-					selectionPos = Math.min(adjusted, tr_5.doc.content.size - 1);
-				}
-				hiddenPMRef.current?.setNodeSelection(selectionPos);
-				view_21.dispatch(tr_5);
+				committed_0 = commitImageInlineMove(view_21, pmPos_17, dropPos);
 			}
+			if (committed_0 !== null) hiddenPMRef.current?.setNodeSelection(committed_0);
 		} catch {}
 	}, [getPositionFromMouse, zoom]);
 	const handleImageDragStart = useCallback(() => {
@@ -5473,8 +5442,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		isFocused() {
 			return getActiveEditorStory().view?.hasFocus() ?? false;
 		},
-		dispatch(tr_6) {
-			folioEditor.dispatch(tr_6);
+		dispatch(tr_3) {
+			folioEditor.dispatch(tr_3);
 		},
 		undo() {
 			const target_5 = getActiveEditorStory();
@@ -12296,7 +12265,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-BOaLk877.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-tGhtc2ZH.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-Ci7-M4oU.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-react",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "React editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
   "keywords": [
     "document-editor",
@@ -68,7 +68,7 @@
     "@fontsource/noto-sans-arabic": "^5.2.7",
     "@fontsource/source-sans-3": "^5.2.9",
     "@fontsource/tinos": "^5.2.7",
-    "@stll/folio-core": "^0.39.1",
+    "@stll/folio-core": "^0.41.0",
     "better-result": "3.0.1",
     "lucide-react": "1.24.0",
     "prosemirror-history": "^1.5.0",