@stll/folio-react 0.4.0 → 0.6.0

package/dist/{folio-ui-CA59webC.js → useFindReplace-BPBpMWS9.js}

@@ -1,5 +1,6 @@
-import { createContext, useContext } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { prefersReducedMotionBehavior } from "@stll/folio-core/paged-layout/scrollNavigation";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { Popover } from "@base-ui/react/popover";
 import { Dialog } from "@base-ui/react/dialog";
@@ -487,4 +488,355 @@ function useFolioUI() {
 	return useContext(FolioUIContext);
 }
 //#endregion
-export { cn as i, FolioUIProvider as n, useFolioUI as r, DEFAULT_COMPONENTS as t };
+//#region src/components/dialogs/findReplaceUtils.ts
+/**
+* Find & Replace Utility Functions
+*
+* Pure utility functions for text search, pattern matching, and document search.
+* Extracted from FindReplaceDialog.tsx.
+*/
+/**
+* Create default find options
+*/
+function createDefaultFindOptions() {
+	return {
+		matchCase: false,
+		matchWholeWord: false,
+		useRegex: false
+	};
+}
+/**
+* Find all matches of search text in content
+*/
+function findAllMatches(content, searchText, options) {
+	if (!content || !searchText) return [];
+	const matches = [];
+	let searchFor = searchText;
+	if (!options.matchCase) searchFor = searchText.toLowerCase();
+	const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/gu, "\\$&");
+	let pattern;
+	if (options.matchWholeWord) pattern = `\\b${escapeRegex(searchFor)}\\b`;
+	else pattern = escapeRegex(searchFor);
+	const flags = options.matchCase ? "g" : "gi";
+	const regex = new RegExp(pattern, flags);
+	let match;
+	while ((match = regex.exec(content)) !== null) {
+		matches.push({
+			start: match.index,
+			end: match.index + match[0].length
+		});
+		if (match[0].length === 0) regex.lastIndex++;
+	}
+	return matches;
+}
+/**
+* Get plain text from a run
+*/
+function getRunText(run) {
+	let text = "";
+	for (const item of run.content) if (item.type === "text") text += item.text;
+	else if (item.type === "tab") text += "	";
+	else if (item.type === "break" && item.breakType === "textWrapping") text += "\n";
+	return text;
+}
+function getHyperlinkText(hyperlink) {
+	let text = "";
+	for (const child of hyperlink.children) if (child.type === "run") text += getRunText(child);
+	return text;
+}
+function getParagraphContentText(content) {
+	if (content.type === "run") return getRunText(content);
+	if (content.type === "hyperlink") return getHyperlinkText(content);
+	if (content.type === "inlineSdt") {
+		let text = "";
+		for (const child of content.content) text += getParagraphContentText(child);
+		return text;
+	}
+	if (content.type === "simpleField") {
+		let text = "";
+		for (const child of content.content) {
+			if (child.type === "run") {
+				text += getRunText(child);
+				continue;
+			}
+			text += getHyperlinkText(child);
+		}
+		return text;
+	}
+	if (content.type === "complexField") {
+		let text = "";
+		for (const run of content.fieldResult) text += getRunText(run);
+		return text;
+	}
+	return "";
+}
+/**
+* Get plain text from a paragraph
+*/
+function getParagraphPlainText(paragraph) {
+	let text = "";
+	for (const item of paragraph.content) text += getParagraphContentText(item);
+	return text;
+}
+/**
+* Find all matches in a document
+*/
+function findInDocument(document, searchText, options) {
+	if (!document || !searchText) return [];
+	const matches = [];
+	const body = document.package.document;
+	if (!isDocumentBody(body)) return matches;
+	forEachParagraph(body.content, (block, paragraphIndex) => {
+		const paragraphMatches = findInParagraph(block, searchText, options, paragraphIndex);
+		matches.push(...paragraphMatches);
+	});
+	return matches;
+}
+function forEachParagraph(blocks, visit) {
+	let paragraphIndex = 0;
+	const walkBlocks = (items) => {
+		for (const block of items) {
+			if (isParagraph(block)) {
+				visit(block, paragraphIndex);
+				paragraphIndex++;
+				continue;
+			}
+			if (isTable(block)) {
+				walkTable(block);
+				continue;
+			}
+			if (isBlockSdt(block)) walkBlocks(block.content);
+		}
+	};
+	const walkTable = (table) => {
+		for (const row of table.rows) {
+			if (!isTableRow(row)) continue;
+			for (const cell of row.cells) {
+				if (!isTableCell(cell)) continue;
+				walkBlocks(cell.content);
+			}
+		}
+	};
+	walkBlocks(blocks);
+}
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function isDocumentBody(value) {
+	return isRecord(value) && Array.isArray(value["content"]);
+}
+function isParagraph(value) {
+	return isRecord(value) && value["type"] === "paragraph" && Array.isArray(value["content"]);
+}
+function isTable(value) {
+	return isRecord(value) && value["type"] === "table" && Array.isArray(value["rows"]);
+}
+function isTableRow(value) {
+	return isRecord(value) && Array.isArray(value["cells"]);
+}
+function isTableCell(value) {
+	return isRecord(value) && Array.isArray(value["content"]);
+}
+function isBlockSdt(value) {
+	return isRecord(value) && value["type"] === "blockSdt" && Array.isArray(value["content"]);
+}
+/**
+* Find matches in a single paragraph
+*/
+function findInParagraph(paragraph, searchText, options, paragraphIndex) {
+	const matches = [];
+	const paragraphText = getParagraphPlainText(paragraph);
+	if (!paragraphText) return matches;
+	const textMatches = findAllMatches(paragraphText, searchText, options);
+	for (const match of textMatches) {
+		const contentInfo = findContentAtOffset(paragraph, match.start);
+		matches.push({
+			paragraphIndex,
+			contentIndex: contentInfo.contentIndex,
+			startOffset: match.start,
+			endOffset: match.end,
+			text: paragraphText.slice(match.start, match.end)
+		});
+	}
+	return matches;
+}
+/**
+* Find the content (run) at a specific character offset in a paragraph
+*/
+function findContentAtOffset(paragraph, offset) {
+	let currentOffset = 0;
+	let contentIndex = 0;
+	for (const item of paragraph.content) {
+		const itemLength = getParagraphContentText(item).length;
+		if (currentOffset + itemLength > offset) return {
+			contentIndex,
+			runIndex: contentIndex,
+			offsetInContent: offset - currentOffset
+		};
+		currentOffset += itemLength;
+		contentIndex++;
+	}
+	return {
+		contentIndex: Math.max(0, paragraph.content.length - 1),
+		runIndex: Math.max(0, paragraph.content.length - 1),
+		offsetInContent: 0
+	};
+}
+/**
+* Scroll to a match in the document
+*/
+function scrollToMatch(containerElement, match) {
+	if (!containerElement) return;
+	(containerElement.querySelector(`[data-paragraph-index="${match.paragraphIndex}"]`) ?? containerElement.querySelector(`.layout-paragraph[data-block-id="block-${match.paragraphIndex + 1}"]`) ?? containerElement.querySelectorAll(".layout-paragraph").item(match.paragraphIndex)).scrollIntoView({
+		behavior: prefersReducedMotionBehavior(),
+		block: "center"
+	});
+}
+//#endregion
+//#region src/components/dialogs/useFindReplace.ts
+/**
+* useFindReplace Hook
+*
+* React hook for managing find/replace dialog state.
+* Extracted from FindReplaceDialog.tsx.
+*/
+/**
+* Hook for managing find/replace dialog state
+*/
+function useFindReplace(hookOptions) {
+	const [state, setState] = useState({
+		...closedDialogState(hookOptions?.initialReplaceMode ? "replace" : "find"),
+		searchText: "",
+		replaceText: "",
+		options: createDefaultFindOptions(),
+		matches: [],
+		currentIndex: 0
+	});
+	return {
+		state,
+		openFind: useCallback((selectedText) => {
+			setState((prev) => ({
+				...prev,
+				...openDialogState("find"),
+				searchText: selectedText || prev.searchText,
+				matches: [],
+				currentIndex: 0
+			}));
+		}, []),
+		openReplace: useCallback((selectedText) => {
+			setState((prev) => ({
+				...prev,
+				...openDialogState("replace"),
+				searchText: selectedText || prev.searchText,
+				matches: [],
+				currentIndex: 0
+			}));
+		}, []),
+		close: useCallback(() => {
+			setState((prev) => ({
+				...prev,
+				...closedDialogState(prev.lastMode)
+			}));
+		}, []),
+		toggle: useCallback(() => {
+			setState((prev) => ({
+				...prev,
+				...prev.dialog.status === "closed" ? openDialogState(prev.lastMode) : closedDialogState(prev.lastMode)
+			}));
+		}, []),
+		setSearchText: useCallback((text) => {
+			setState((prev) => ({
+				...prev,
+				searchText: text
+			}));
+		}, []),
+		setReplaceText: useCallback((text) => {
+			setState((prev) => ({
+				...prev,
+				replaceText: text
+			}));
+		}, []),
+		setOptions: useCallback((options) => {
+			setState((prev) => ({
+				...prev,
+				options: {
+					...prev.options,
+					...options
+				}
+			}));
+		}, []),
+		setMatches: useCallback((matches, currentIndex = 0) => {
+			const newIndex = Math.max(0, Math.min(currentIndex, matches.length - 1));
+			setState((prev) => ({
+				...prev,
+				matches,
+				currentIndex: matches.length > 0 ? newIndex : 0
+			}));
+			hookOptions?.onMatchesChange?.(matches);
+			if (matches.length > 0) hookOptions?.onCurrentMatchChange?.(matches[newIndex] ?? null, newIndex);
+			else hookOptions?.onCurrentMatchChange?.(null, -1);
+		}, [hookOptions]),
+		goToNextMatch: useCallback(() => {
+			let newIndex = 0;
+			setState((prev) => {
+				if (prev.matches.length === 0) return prev;
+				newIndex = (prev.currentIndex + 1) % prev.matches.length;
+				return {
+					...prev,
+					currentIndex: newIndex
+				};
+			});
+			return newIndex;
+		}, []),
+		goToPreviousMatch: useCallback(() => {
+			let newIndex = 0;
+			setState((prev) => {
+				if (prev.matches.length === 0) return prev;
+				newIndex = prev.currentIndex === 0 ? prev.matches.length - 1 : prev.currentIndex - 1;
+				return {
+					...prev,
+					currentIndex: newIndex
+				};
+			});
+			return newIndex;
+		}, []),
+		goToMatch: useCallback((index) => {
+			setState((prev) => {
+				if (prev.matches.length === 0 || index < 0 || index >= prev.matches.length) return prev;
+				return {
+					...prev,
+					currentIndex: index
+				};
+			});
+		}, []),
+		getCurrentMatch: useCallback(() => {
+			if (state.matches.length === 0) return null;
+			return state.matches[state.currentIndex] || null;
+		}, [state.matches, state.currentIndex]),
+		hasMatches: useCallback(() => state.matches.length > 0, [state.matches.length])
+	};
+}
+function closedDialogState(mode) {
+	return {
+		dialog: { status: "closed" },
+		lastMode: mode
+	};
+}
+function openDialogState(mode) {
+	if (mode === "replace") return {
+		dialog: {
+			status: "open",
+			mode: "replace"
+		},
+		lastMode: "replace"
+	};
+	return {
+		dialog: {
+			status: "open",
+			mode: "find"
+		},
+		lastMode: "find"
+	};
+}
+//#endregion
+export { FolioUIProvider as a, DEFAULT_COMPONENTS as i, findInDocument as n, useFolioUI as o, scrollToMatch as r, cn as s, useFindReplace as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-react",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "React editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
   "keywords": [
     "document-editor",
@@ -32,6 +32,14 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./compat/eigenpal": {
+      "types": "./dist/compat/eigenpal.d.ts",
+      "import": "./dist/compat/eigenpal.js"
+    },
+    "./dialogs": {
+      "types": "./dist/dialogs.d.ts",
+      "import": "./dist/dialogs.js"
+    },
     "./messages": {
       "types": "./dist/messages.d.ts",
       "import": "./dist/messages.js"
@@ -74,8 +82,8 @@
     "y-prosemirror": "^1.3.7"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "use-intl": ">=4.0.0"
   },
   "main": "./dist/index.js",

package/dist/contained-handler-4uiqUVRn.js

@@ -1,45 +0,0 @@
-//#region src/utils/contained-handler.ts
-/**
-* Wrap a React event handler so it only fires when the event target
-* is a DOM descendant of the given ref.
-*
-* React forwards synthetic events through the parent React tree even
-* when descendants are rendered via createPortal. That makes it unsafe
-* for a parent element to attach `onMouseDown`, `onClick`, `onFocus`,
-* etc. that side-effect (focus steal, preventDefault, selection changes)
-* under the assumption "the target lives inside me" — a portaled popup
-* (Dialog, Combobox, Tooltip) silently bypasses the DOM boundary and
-* triggers the side effect, dismissing itself.
-*
-* Only use for event types whose `target` is the meaningful subject of
-* the event: pointer/mouse/touch/click and `focus`. Do **not** wrap
-* `onBlur`: blur's `target` is the element losing focus, not the new
-* focus destination, so the containment test cannot answer "is focus
-* leaving for a portaled child?". For that case test `relatedTarget`
-* directly inside the handler.
-*
-* The `require-contained-handler` oxlint rule enforces this on any JSX
-* element carrying both `ref={…}` and one of the watched handler props.
-*
-* @example
-*   const barRef = useRef<HTMLDivElement>(null);
-*   return (
-*     <div
-*       ref={barRef}
-*       onMouseDown={containedHandler(barRef, (e) => {
-*         e.preventDefault();
-*         focusEditor();
-*       })}
-*     >
-*       ...
-*     </div>
-*   );
-*/
-const containedHandler = (ref, handler) => (event) => {
-	if (handler === void 0) return;
-	const container = ref?.current ?? null;
-	if (container !== null && event.target instanceof Node && !container.contains(event.target)) return;
-	handler(event);
-};
-//#endregion
-export { containedHandler as t };