@stll/folio-react 0.28.0 → 0.29.0

package/README.md

@@ -45,6 +45,38 @@ export function Editor({ docx }: { docx: ArrayBuffer }) {
 The editor renders to the DOM; under SSR, load it from a client-only/dynamic
 import.
 
+## Read-only review views
+
+```tsx
+<DocxEditor
+  documentBuffer={docx}
+  readOnly
+  reviewDisplayMode="final"
+  showCommentHighlights={false}
+/>
+```
+
+`reviewDisplayMode` accepts `all-markup` (the default), `final` (all pending
+changes accepted for display), or `original` (all pending changes rejected for
+display). It controls the displayed text, formatting, numbering, table rows,
+pagination and search. The controlled prop updates the view without reparsing.
+Omit it to let the editor's review selector control the view.
+
+Projected views (`final`, `original`, and Simple Markup in the review selector)
+are read-only: typing and replacement are refused. Switch to `all-markup` to
+edit. `ref.current.getReadOnlyReason()` returns `review-display-mode`,
+`host-read-only`, `viewing-mode`, or `null` when editing is allowed.
+`onReadonlyEditAttempt(reason)` receives the exported `EditorReadOnlyReason`
+when a user attempts an edit.
+
+`showCommentHighlights` defaults to `true` and independently hides comment
+highlights in `all-markup`. Highlights are always hidden in `final` and
+`original`. Neither prop changes the document, revisions or comments: saving
+or exporting DOCX preserves the same authored document in every view. The
+Vue `DocxEditor` exposes the same props. `ReviewDisplayMode` is exported by
+both adapters and folio-core; core's `reviewDisplayModeToDisplayMode` selects
+the existing `markupView` layout configuration (`final` uses `no-markup`).
+
 ## Exports
 
 | Import                         | What it is                                                                                                                                              |

package/dist/{CommentsSidebar-mv0x1JQX.js → CommentsSidebar-D7eTgHpL.js}

@@ -1,10 +1,11 @@
-import { f as containedHandler, u as useDrawerFocus } from "./renderAsync-Bh7xudNL.js";
+import { f as containedHandler, u as useDrawerFocus } from "./renderAsync-D3Bxr14I.js";
 import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CheckIcon, MoreVerticalIcon } from "lucide-react";
 import { useLocale, useTranslations } from "use-intl";
 import { scrollEditorTo } from "@stll/folio-core/paged-layout/editorScrollRoot";
 import { closestHtmlElement, queryHtmlElement } from "@stll/folio-core/utils/domGuards";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { sliceText } from "@stll/folio-core/utils/sliceText";
 import { PANEL_METRICS } from "@stll/folio-core/panel-layout";
 import { commentAnchorSelector } from "@stll/folio-core/render-dom/commentAnchorAttributes";
 //#region src/components/CommentsSidebar.tsx
@@ -35,7 +36,15 @@ function formatDate(dateStr, locale) {
 	}).format(d);
 }
 function getInitials(name) {
-	return name.split(/\s+/u).map((w) => w[0]).join("").toUpperCase().slice(0, 2);
+	return sliceText({
+		text: name.split(/\s+/u).map((word) => sliceText({
+			text: word,
+			units: "graphemes",
+			end: 1
+		})).join("").toUpperCase(),
+		units: "graphemes",
+		end: 2
+	});
 }
 function getCommentParentId(comment) {
 	return comment.parentId;

package/dist/{FindReplaceDialog-LlVMe3EW.js → FindReplaceDialog-CUd8xdgd.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { c } from "react-compiler-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDownIcon, ChevronUpIcon, SearchIcon, XIcon } from "lucide-react";

package/dist/{FootnotePropertiesDialog-D73t3LNP.js → FootnotePropertiesDialog-BEs7N62_.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/{ImagePositionDialog-Cwt6R8iM.js → ImagePositionDialog-Oap9knQ-.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/{ImagePropertiesDialog-GNZLBFLB.js → ImagePropertiesDialog-lLMKHv0u.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/{InsertSymbolDialog-CeEhkEvc.js → InsertSymbolDialog-Drm40-9j.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useState } from "react";

package/dist/{PageSetupDialog-DD6IEZAo.js → PageSetupDialog-DTWCdPkX.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/{SetNumberingValueDialog-CDQGDvP1.js → SetNumberingValueDialog-twVIZMLc.js}

@@ -1,4 +1,4 @@
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { a as DIALOG_LABEL_CLASS, c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/{TablePropertiesDialog-Vu0HXQz6.js → TablePropertiesDialog-uSTmyEcu.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/compat/eigenpal.d.ts

@@ -1,4 +1,4 @@
-import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-BVAgBXCL.js";
+import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-DsMKdbU5.js";
 import { ReactNode } from "react";
 import { CreateEmptyDocumentOptions, createDocumentWithText, createEmptyDocument } from "@stll/folio-core/utils/createDocument";
 //#region src/compat/eigenpal.d.ts

package/dist/compat/eigenpal.js

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

package/dist/{dialogs-De-oslzU.js → dialogs-DGrcp10A.js}

@@ -1,4 +1,4 @@
-import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { r as useFolioUI } from "./folio-ui-ruRywxeb.js";
 import { a as DIALOG_LABEL_CLASS, c as DIALOG_SECONDARY_BUTTON_CLASS, i as DIALOG_INPUT_CLASS, l as DIALOG_TITLE_CLASS, n as DIALOG_BODY_CLASS, o as DIALOG_POPUP_CLASS, r as DIALOG_FOOTER_CLASS, s as DIALOG_PRIMARY_BUTTON_CLASS, t as DIALOG_BACKDROP_CLASS, u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";

package/dist/dialogs.js

@@ -1,9 +1,9 @@
-import { t as FindReplaceDialog } from "./FindReplaceDialog-LlVMe3EW.js";
-import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-D73t3LNP.js";
-import { a as InsertImageDialog, i as InsertTableDialog, n as SplitCellDialog, o as HyperlinkDialog, r as PasteSpecialDialog, t as WatermarkDialog } from "./dialogs-De-oslzU.js";
-import { t as ImagePositionDialog } from "./ImagePositionDialog-Cwt6R8iM.js";
-import { t as ImagePropertiesDialog } from "./ImagePropertiesDialog-GNZLBFLB.js";
-import { t as InsertSymbolDialog } from "./InsertSymbolDialog-CeEhkEvc.js";
-import { t as PageSetupDialog } from "./PageSetupDialog-DD6IEZAo.js";
-import { t as TablePropertiesDialog } from "./TablePropertiesDialog-Vu0HXQz6.js";
+import { t as FindReplaceDialog } from "./FindReplaceDialog-CUd8xdgd.js";
+import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-BEs7N62_.js";
+import { a as InsertImageDialog, i as InsertTableDialog, n as SplitCellDialog, o as HyperlinkDialog, r as PasteSpecialDialog, t as WatermarkDialog } from "./dialogs-DGrcp10A.js";
+import { t as ImagePositionDialog } from "./ImagePositionDialog-Oap9knQ-.js";
+import { t as ImagePropertiesDialog } from "./ImagePropertiesDialog-lLMKHv0u.js";
+import { t as InsertSymbolDialog } from "./InsertSymbolDialog-Drm40-9j.js";
+import { t as PageSetupDialog } from "./PageSetupDialog-DTWCdPkX.js";
+import { t as TablePropertiesDialog } from "./TablePropertiesDialog-uSTmyEcu.js";
 export { FindReplaceDialog, FootnotePropertiesDialog, HyperlinkDialog, ImagePositionDialog, ImagePropertiesDialog, InsertImageDialog, InsertSymbolDialog, InsertTableDialog, PageSetupDialog, PasteSpecialDialog, SplitCellDialog, TablePropertiesDialog, WatermarkDialog };

package/dist/{folio-ui-rCHqCEG6.js → folio-ui-ruRywxeb.js}

@@ -4,6 +4,7 @@ import { useTranslations } from "use-intl";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
 import { Popover } from "@base-ui/react/popover";
+import { sliceText } from "@stll/folio-core/utils/sliceText";
 import { Dialog } from "@base-ui/react/dialog";
 import { Input } from "@base-ui/react/input";
 import { Menu } from "@base-ui/react/menu";
@@ -210,7 +211,11 @@ function ColorSwatch(t0) {
 const toISODate = (value) => {
 	if (value === null) return "";
 	if (value instanceof Date) return `${value.getFullYear().toString().padStart(4, "0")}-${(value.getMonth() + 1).toString().padStart(2, "0")}-${value.getDate().toString().padStart(2, "0")}`;
-	return value.length >= 10 ? value.slice(0, 10) : value;
+	return value.length >= 10 ? sliceText({
+		text: value,
+		units: "codeUnits",
+		end: 10
+	}) : value;
 };
 function DefaultDatePickerPopover({ value, onChange, defaultOpen = false }) {
 	return /* @__PURE__ */ jsx("input", {

package/dist/index.d.ts

@@ -1,9 +1,11 @@
-import { _ as FolioUIProvider, a as DocxEditorApplyDocumentOperationsOptions, c as DocxEditorRef, d as ToolbarProps, f as EditorMode, g as FolioUIComponents, h as FolioButtonProps, i as renderAsync, l as HighlightPassageOptions, m as ColorPreset, n as EditorHandle, o as DocxEditorCollaboration, p as FontOption, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle, u as HighlightPassageResult, v as OutlineItem, y as FontDefinition } from "./renderAsync-BVAgBXCL.js";
+import { _ as FolioUIProvider, a as DocxEditorApplyDocumentOperationsOptions, c as DocxEditorRef, d as ToolbarProps, f as EditorMode, g as FolioUIComponents, h as FolioButtonProps, i as renderAsync, l as HighlightPassageOptions, m as ColorPreset, n as EditorHandle, o as DocxEditorCollaboration, p as FontOption, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle, u as HighlightPassageResult, v as OutlineItem, y as FontDefinition } from "./renderAsync-DsMKdbU5.js";
 import { A as HyperlinkDialog, C as ImagePropertiesData, D as ImagePositionDialog, E as ImagePositionData, F as FindReplaceDialog, I as FindReplaceDialogProps, M as HyperlinkDialogProps, N as FootnotePropertiesDialog, O as ImagePositionDialogProps, P as FootnotePropertiesDialogProps, S as InsertImageDialogProps, T as ImagePropertiesDialogProps, _ as InsertTableStyleOption, a as TablePropertiesDialogProps, b as InsertImageDialog, c as SplitCellDialogProps, d as PasteSpecialMode, f as PageSetupDialog, g as InsertTableDialogProps, h as InsertTableDialogData, i as TablePropertiesDialog, j as HyperlinkDialogData, k as HyperlinkBookmarkOption, l as PasteSpecialDialog, m as InsertTableDialog, n as WatermarkDialogProps, o as SplitCellDialog, p as PageSetupDialogProps, r as TableProperties, s as SplitCellDialogData, t as WatermarkDialog, u as PasteSpecialDialogProps, v as InsertSymbolDialog, w as ImagePropertiesDialog, x as InsertImageDialogData, y as InsertSymbolDialogProps } from "./dialogs-BENP66Ly.js";
 import React, { CSSProperties, ReactNode, RefObject } from "react";
 import { CreateEmptyDocumentOptions, createEmptyDocument } from "@stll/folio-core/utils/createDocument";
 import { FolioAIBlock, FolioAIBlockAnchor, FolioAIBlockKind, FolioAIBlockPreviewRun, FolioAIComment, FolioAIEditAppliedOperation, FolioAIEditApplyMode, FolioAIEditApplyResult, FolioAIEditOperation, FolioAIEditReviewMeta, FolioAIEditSeverity, FolioAIEditSkipReason, FolioAIEditSkippedOperation, FolioAIEditSnapshot, FolioAISignatureParty, WordDiffSegment, applyFolioAIEditOperations, createFolioAIEditSnapshot, diffWordSegments, hashFolioAIBlockText, normalizeFolioAIBlockText } from "@stll/folio-core/ai-edits";
 import { KeyboardShortcutScope, KeyboardShortcutScope as KeyboardShortcutScope$1 } from "@stll/folio-core/managers/editorShortcuts";
+import { EditorReadOnlyReason } from "@stll/folio-core/managers/EditorModeManager";
+import { ReviewDisplayMode } from "@stll/folio-core/managers/reviewDisplayMode";
 import { DocxCompatibility } from "@stll/folio-core/docx/compatibility";
 import { insertImageFromFile, insertPageBreakInView, insertTableInView, insertTableOfContentsInView } from "@stll/folio-core/prosemirror";
 import { FolioSuggestion, SuggestionAppliedAs, SuggestionKind } from "@stll/folio-core/prosemirror/commands/comments";
@@ -201,4 +203,4 @@ type AutocompleteCaretOverlayProps = {
 };
 declare const AutocompleteCaretOverlay: ({ caret, text, isStreaming }: AutocompleteCaretOverlayProps) => React.JSX.Element | null;
 //#endregion
-export { type AIBarStatus, type AIChatMode, type AICitation, type AICitationRange, type AICitationSource, type AIGenerateInput, type AISuggestion, type AISuggestionApplyMode, type AISuggestionPreset, type AISuggestionSeverity, type AISuggestionStatus, type AcceptAutocompleteResult, type AnonymizationMatch, type AnonymizationTerm, type ApplyResult, AutocompleteCaretOverlay, type AutocompleteCaretOverlayProps, type AutocompleteCaretRect, type AutocompleteSuggestionPluginOptions, type AutocompleteSuggestionState, type AutocompleteSuggestionStatus, type AutocompleteTriggerCheck, type AutocompleteTriggerOptions, type AutocompleteTriggerSkipReason, type BlockRect, type ColorPreset, type CreateEmptyDocumentOptions, DEFAULT_AI_SUGGESTION_PRESETS, DEFAULT_AUTOCOMPLETE_DEAD_ZONE_NODES, DOCUMENT_PRESET_VERSION, DOCUMENT_STYLE_SET_VERSION, type DeriveBlockIdInput, type DirectiveKind, type DirectiveRange, type Document, type DocumentPreset, type DocumentStyleCatalog, type DocumentStyleCatalogEntry, type DocumentStyleSet, type DocxCompatibility, DocxEditor, type DocxEditorApplyDocumentOperationsOptions, type DocxEditorCollaboration, type DocxEditorHandle, type DocxEditorProps, type DocxEditorRef, type EditorHandle, type EditorMode, type ExtractDocumentStyleSetOptions, FindReplaceDialog, type FindReplaceDialogProps, type FolioAIBlock, type FolioAIBlockAnchor, type FolioAIBlockKind, type FolioAIBlockPreviewRun, type FolioAIComment, type FolioAIEditAppliedOperation, type FolioAIEditApplyMode, type FolioAIEditApplyResult, type FolioAIEditOperation, type FolioAIEditReviewMeta, type FolioAIEditSeverity, type FolioAIEditSkipReason, type FolioAIEditSkippedOperation, type FolioAIEditSnapshot, type FolioAISignatureParty, type FolioBlockId, type FolioButtonProps, type FolioSuggestion, type FolioUIComponents, FolioUIProvider, type FontDefinition, type FontOption, FootnotePropertiesDialog, type FootnotePropertiesDialogProps, FormattingBar, type FormattingBarProps, type HighlightPassageOptions, type HighlightPassageResult, type HyperlinkBookmarkOption, HyperlinkDialog, type HyperlinkDialogData, type HyperlinkDialogProps, type ImageMeta, type ImagePositionData, ImagePositionDialog, type ImagePositionDialogProps, type ImagePropertiesData, ImagePropertiesDialog, type ImagePropertiesDialogProps, type ImageRef, InsertImageDialog, type InsertImageDialogData, type InsertImageDialogProps, InsertSymbolDialog, type InsertSymbolDialogProps, InsertTableDialog, type InsertTableDialogData, type InsertTableDialogProps, type InsertTableStyleOption, type KeyboardShortcutScope, type MarkdownOptions, type MarkdownResult, type OutlineDepth, type OutlineItem, PageSetupDialog, type PageSetupDialogProps, PasteSpecialDialog, type PasteSpecialDialogProps, type PasteSpecialMode, type PictureWatermark, type PositionalText, type RenderAsyncOptions, type ResolvedAnchor, STELLA_STYLE_SET_NAME, type ScrollToParaIdOptions, SplitCellDialog, type SplitCellDialogData, type SplitCellDialogProps, type SuggestionAppliedAs, type SuggestionKind, type TableProperties, TablePropertiesDialog, type TablePropertiesDialogProps, type TemplatePreviewHiddenRange, type TemplatePreviewSpan, type TemplatePreviewValue, type TemplatePreviewValues, type TemplateSlashMenuKeyAction, type TemplateSlashMenuState, type TextWatermark, type UseWheelZoomOptions, type UseWheelZoomReturn, type Watermark, WatermarkDialog, type WatermarkDialogProps, type WordDiffSegment, ZOOM_PRESETS, ZoomControl, type ZoomControlProps, type ZoomLevel, acceptAutocompleteSuggestion, acceptAutocompleteWord, anonymizationDecorationsKey, appendAutocompleteToken, applyFolioAIEditOperations, applySuggestions, autocompleteSuggestionKey, autocompleteSuggestionPlugin, buildPositionalText, clampZoom, clearAutocompleteSuggestion, clearTemplateSlashMenu, consumeTemplateSlashQuery, createAICitationDecorationsPlugin, createDocx, createEmptyDocument, createFolioAIEditSnapshot, createStellaStyleDocumentPreset, createStellaStyleSet, deriveBlockId, diffWordSegments, extractDocumentStyleSet, extractDocumentStyleSetFromDocx, finishAutocompleteSuggestion, formatZoom, fromMarkdown, getAnonymizationMatches, getAutocompleteSuggestion, getDocumentWatermark, getFolioCaretViewportRect, getFolioParaIdFromBlockId, getFolioSelectionViewportRect, getTemplateDirectives, getTemplateSlashMenu, hashFolioAIBlockText, insertImageFromFile, insertPageBreakInView, insertTableInView, insertTableOfContentsInView, inspectDocumentStyles, inspectDocumentStylesFromDocx, isFolioBlockId, isSequentialFolioBlockId, isSuggestionStale, normalizeFolioAIBlockText, parseZoom, renderAsync, resetTemplateSlashQuery, resolveSuggestionAnchor, scanDirectives, scrollFolioPositionIntoView, setAICitationsMeta, setAISuggestionsMeta, setActiveCitationMeta, setAnonymizationTermsMeta, setDocumentWatermark, setFocusedSuggestionMeta, setTemplatePreviewValues, shouldTriggerAutocomplete, startAutocompleteSuggestion, templateSlashMenuKey, toMarkdown, toMarkdownResult, useWheelZoom };
+export { type AIBarStatus, type AIChatMode, type AICitation, type AICitationRange, type AICitationSource, type AIGenerateInput, type AISuggestion, type AISuggestionApplyMode, type AISuggestionPreset, type AISuggestionSeverity, type AISuggestionStatus, type AcceptAutocompleteResult, type AnonymizationMatch, type AnonymizationTerm, type ApplyResult, AutocompleteCaretOverlay, type AutocompleteCaretOverlayProps, type AutocompleteCaretRect, type AutocompleteSuggestionPluginOptions, type AutocompleteSuggestionState, type AutocompleteSuggestionStatus, type AutocompleteTriggerCheck, type AutocompleteTriggerOptions, type AutocompleteTriggerSkipReason, type BlockRect, type ColorPreset, type CreateEmptyDocumentOptions, DEFAULT_AI_SUGGESTION_PRESETS, DEFAULT_AUTOCOMPLETE_DEAD_ZONE_NODES, DOCUMENT_PRESET_VERSION, DOCUMENT_STYLE_SET_VERSION, type DeriveBlockIdInput, type DirectiveKind, type DirectiveRange, type Document, type DocumentPreset, type DocumentStyleCatalog, type DocumentStyleCatalogEntry, type DocumentStyleSet, type DocxCompatibility, DocxEditor, type DocxEditorApplyDocumentOperationsOptions, type DocxEditorCollaboration, type DocxEditorHandle, type DocxEditorProps, type DocxEditorRef, type EditorHandle, type EditorMode, type EditorReadOnlyReason, type ExtractDocumentStyleSetOptions, FindReplaceDialog, type FindReplaceDialogProps, type FolioAIBlock, type FolioAIBlockAnchor, type FolioAIBlockKind, type FolioAIBlockPreviewRun, type FolioAIComment, type FolioAIEditAppliedOperation, type FolioAIEditApplyMode, type FolioAIEditApplyResult, type FolioAIEditOperation, type FolioAIEditReviewMeta, type FolioAIEditSeverity, type FolioAIEditSkipReason, type FolioAIEditSkippedOperation, type FolioAIEditSnapshot, type FolioAISignatureParty, type FolioBlockId, type FolioButtonProps, type FolioSuggestion, type FolioUIComponents, FolioUIProvider, type FontDefinition, type FontOption, FootnotePropertiesDialog, type FootnotePropertiesDialogProps, FormattingBar, type FormattingBarProps, type HighlightPassageOptions, type HighlightPassageResult, type HyperlinkBookmarkOption, HyperlinkDialog, type HyperlinkDialogData, type HyperlinkDialogProps, type ImageMeta, type ImagePositionData, ImagePositionDialog, type ImagePositionDialogProps, type ImagePropertiesData, ImagePropertiesDialog, type ImagePropertiesDialogProps, type ImageRef, InsertImageDialog, type InsertImageDialogData, type InsertImageDialogProps, InsertSymbolDialog, type InsertSymbolDialogProps, InsertTableDialog, type InsertTableDialogData, type InsertTableDialogProps, type InsertTableStyleOption, type KeyboardShortcutScope, type MarkdownOptions, type MarkdownResult, type OutlineDepth, type OutlineItem, PageSetupDialog, type PageSetupDialogProps, PasteSpecialDialog, type PasteSpecialDialogProps, type PasteSpecialMode, type PictureWatermark, type PositionalText, type RenderAsyncOptions, type ResolvedAnchor, type ReviewDisplayMode, STELLA_STYLE_SET_NAME, type ScrollToParaIdOptions, SplitCellDialog, type SplitCellDialogData, type SplitCellDialogProps, type SuggestionAppliedAs, type SuggestionKind, type TableProperties, TablePropertiesDialog, type TablePropertiesDialogProps, type TemplatePreviewHiddenRange, type TemplatePreviewSpan, type TemplatePreviewValue, type TemplatePreviewValues, type TemplateSlashMenuKeyAction, type TemplateSlashMenuState, type TextWatermark, type UseWheelZoomOptions, type UseWheelZoomReturn, type Watermark, WatermarkDialog, type WatermarkDialogProps, type WordDiffSegment, ZOOM_PRESETS, ZoomControl, type ZoomControlProps, type ZoomLevel, acceptAutocompleteSuggestion, acceptAutocompleteWord, anonymizationDecorationsKey, appendAutocompleteToken, applyFolioAIEditOperations, applySuggestions, autocompleteSuggestionKey, autocompleteSuggestionPlugin, buildPositionalText, clampZoom, clearAutocompleteSuggestion, clearTemplateSlashMenu, consumeTemplateSlashQuery, createAICitationDecorationsPlugin, createDocx, createEmptyDocument, createFolioAIEditSnapshot, createStellaStyleDocumentPreset, createStellaStyleSet, deriveBlockId, diffWordSegments, extractDocumentStyleSet, extractDocumentStyleSetFromDocx, finishAutocompleteSuggestion, formatZoom, fromMarkdown, getAnonymizationMatches, getAutocompleteSuggestion, getDocumentWatermark, getFolioCaretViewportRect, getFolioParaIdFromBlockId, getFolioSelectionViewportRect, getTemplateDirectives, getTemplateSlashMenu, hashFolioAIBlockText, insertImageFromFile, insertPageBreakInView, insertTableInView, insertTableOfContentsInView, inspectDocumentStyles, inspectDocumentStylesFromDocx, isFolioBlockId, isSequentialFolioBlockId, isSuggestionStale, normalizeFolioAIBlockText, parseZoom, renderAsync, resetTemplateSlashQuery, resolveSuggestionAnchor, scanDirectives, scrollFolioPositionIntoView, setAICitationsMeta, setAISuggestionsMeta, setActiveCitationMeta, setAnonymizationTermsMeta, setDocumentWatermark, setFocusedSuggestionMeta, setTemplatePreviewValues, shouldTriggerAutocomplete, startAutocompleteSuggestion, templateSlashMenuKey, toMarkdown, toMarkdownResult, useWheelZoom };

package/dist/index.js

@@ -1,13 +1,13 @@
-import { a as formatZoom, c as FormattingBar, d as AutocompleteCaretOverlay, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync } from "./renderAsync-Bh7xudNL.js";
-import { n as FolioUIProvider } from "./folio-ui-rCHqCEG6.js";
-import { t as FindReplaceDialog } from "./FindReplaceDialog-LlVMe3EW.js";
-import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-D73t3LNP.js";
-import { a as InsertImageDialog, i as InsertTableDialog, n as SplitCellDialog, o as HyperlinkDialog, r as PasteSpecialDialog, t as WatermarkDialog } from "./dialogs-De-oslzU.js";
-import { t as ImagePositionDialog } from "./ImagePositionDialog-Cwt6R8iM.js";
-import { t as ImagePropertiesDialog } from "./ImagePropertiesDialog-GNZLBFLB.js";
-import { t as InsertSymbolDialog } from "./InsertSymbolDialog-CeEhkEvc.js";
-import { t as PageSetupDialog } from "./PageSetupDialog-DD6IEZAo.js";
-import { t as TablePropertiesDialog } from "./TablePropertiesDialog-Vu0HXQz6.js";
+import { a as formatZoom, c as FormattingBar, d as AutocompleteCaretOverlay, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync } from "./renderAsync-D3Bxr14I.js";
+import { n as FolioUIProvider } from "./folio-ui-ruRywxeb.js";
+import { t as FindReplaceDialog } from "./FindReplaceDialog-CUd8xdgd.js";
+import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-BEs7N62_.js";
+import { a as InsertImageDialog, i as InsertTableDialog, n as SplitCellDialog, o as HyperlinkDialog, r as PasteSpecialDialog, t as WatermarkDialog } from "./dialogs-DGrcp10A.js";
+import { t as ImagePositionDialog } from "./ImagePositionDialog-Oap9knQ-.js";
+import { t as ImagePropertiesDialog } from "./ImagePropertiesDialog-lLMKHv0u.js";
+import { t as InsertSymbolDialog } from "./InsertSymbolDialog-Drm40-9j.js";
+import { t as PageSetupDialog } from "./PageSetupDialog-DTWCdPkX.js";
+import { t as TablePropertiesDialog } from "./TablePropertiesDialog-uSTmyEcu.js";
 import { applyFolioAIEditOperations, createFolioAIEditSnapshot, diffWordSegments, hashFolioAIBlockText, normalizeFolioAIBlockText } from "@stll/folio-core/ai-edits";
 import { insertImageFromFile, insertPageBreakInView, insertTableInView, insertTableOfContentsInView } from "@stll/folio-core/prosemirror";
 import { createAICitationDecorationsPlugin, setAICitationsMeta, setActiveCitationMeta } from "@stll/folio-core/prosemirror/plugins/aiCitationDecorations";

package/dist/{renderAsync-Bh7xudNL.js → renderAsync-D3Bxr14I.js}

@@ -1,6 +1,7 @@
-import { i as cn, n as FolioUIProvider, r as useFolioUI, t as DEFAULT_COMPONENTS } from "./folio-ui-rCHqCEG6.js";
+import { i as cn, n as FolioUIProvider, r as useFolioUI, t as DEFAULT_COMPONENTS } from "./folio-ui-ruRywxeb.js";
 import { t as messages_exports } from "./messages.js";
 import { c } from "react-compiler-runtime";
+import { readBlobText } from "@stll/folio-core/utils/textEncoding";
 import { CANONICAL_GAP, canonicalRefusalMessage, usesCanonicalSession } from "@stll/folio-core/types/canonicalCapabilities";
 import * as React$1 from "react";
 import React, { Component, Suspense, cloneElement, createContext, forwardRef, isValidElement, lazy, memo, useCallback, useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -30,7 +31,7 @@ import { executeEditorCommand, executeFirstEditorCommand } from "@stll/folio-cor
 import { insertPageBreak } from "@stll/folio-core/prosemirror/commands/pageBreak";
 import { clearTrackedChanges, getChangedParagraphIds, hasStructuralChanges, hasUntrackedChanges, repackWithEditorSectionRemovals } from "@stll/folio-core/prosemirror/extensions/features/ParagraphChangeTrackerExtension";
 import { createStarterKit } from "@stll/folio-core/prosemirror/extensions/StarterKit";
-import { resolveFindMatchRange } from "@stll/folio-core/prosemirror/findReplaceSelection";
+import { findInMarkupView, resolveFindMatchRange } from "@stll/folio-core/prosemirror/findReplaceSelection";
 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";
@@ -112,7 +113,8 @@ import { ErrorManager } from "@stll/folio-core/managers/ErrorManager";
 import { ContextMenuManager } from "@stll/folio-core/managers/ContextMenuManager";
 import { DocumentLoaderManager } from "@stll/folio-core/managers/DocumentLoaderManager";
 import { getDocumentLoadSource } from "@stll/folio-core/utils/documentLoaderBehavior";
-import { DISPLAY_MODES, EditorModeManager, isReadOnlyMode, isTrackChangesMode, toggledTrackChangesMode } from "@stll/folio-core/managers/EditorModeManager";
+import { DISPLAY_MODES, EditorModeManager, getEditorReadOnlyReason, getReviewViewReadOnlyReason, isTrackChangesMode, toggledTrackChangesMode } from "@stll/folio-core/managers/EditorModeManager";
+import { reviewDisplayModeToDisplayMode } from "@stll/folio-core/managers/reviewDisplayMode";
 import { FindReplaceManager } from "@stll/folio-core/managers/FindReplaceManager";
 import { createEmptyHeaderFooter, pickActiveHeaderFooterRId, removeHeaderFooter, resolveEffectiveSectionProperties, resolveHeaderFooterContent, saveHeaderFooterContent } from "@stll/folio-core/utils/headerFooter";
 import { createCanonicalHeaderFooterOperation, removeCanonicalHeaderFooterOperations } from "@stll/folio-core/controller/canonicalOperations";
@@ -354,9 +356,10 @@ const HOST_STYLES = {
 	zIndex: -1,
 	pointerEvents: "none"
 };
-const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ document, styles, theme, onTransaction, experimentalSession, getCanonicalApi, onSessionRefusal }, ref) {
+const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ document, readOnly, styles, theme, onTransaction, experimentalSession, getCanonicalApi, onSessionRefusal }, ref) {
 	const hostRef = useRef(null);
 	const documentRef = useRef(document);
+	const readOnlyRef = useRef(readOnly);
 	const stylesRef = useRef(styles);
 	const themeRef = useRef(theme);
 	const onTransactionRef = useRef(onTransaction);
@@ -366,6 +369,7 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 	const managerRef = useRef(null);
 	useLayoutEffect(() => {
 		documentRef.current = document;
+		readOnlyRef.current = readOnly;
 		stylesRef.current = styles;
 		themeRef.current = theme;
 		onTransactionRef.current = onTransaction;
@@ -375,6 +379,7 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 		managerRef.current ??= createHeaderFooterEditorManager({
 			getHost: () => hostRef.current,
 			getDocument: () => documentRef.current,
+			getReadOnly: () => readOnlyRef.current ?? false,
 			getStyles: () => stylesRef.current,
 			getTheme: () => themeRef.current,
 			getCanonicalApi: () => canonicalApiRef.current?.() ?? null,
@@ -384,8 +389,10 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 				onTransactionRef.current?.(rId, kind, view, docChanged, selectionChanged);
 			}
 		});
+		managerRef.current.sync();
 	}, [
 		document,
+		readOnly,
 		styles,
 		theme,
 		onTransaction,
@@ -393,9 +400,6 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 		experimentalSession,
 		onSessionRefusal
 	]);
-	useEffect(() => {
-		managerRef.current?.sync();
-	});
 	useEffect(() => () => {
 		managerRef.current?.destroy();
 	}, []);
@@ -3044,7 +3048,7 @@ function buildFootnoteRenderItems(pageFootnoteMap, footnoteContentMap, doc) {
 * PagedEditor - Main paginated editing component.
 */
 const PagedEditor = forwardRef(function PagedEditor(props, ref) {
-	const { document, documentIO, documentIdentity, experimentalSession, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, pageRenderer, markupView, showMarginGuides = false, marginGuideColor, onDocumentChange, onReadOnlyEditAttempt, onCopy, onCut, onPaste, onSelectionChange, onSelectionTextChange, onEditorViewReady, externalPlugins = EMPTY_PLUGINS, showTemplateDirectives = true, collaboration, extensionManager, suggestionModeActive = false, suggestionAuthor, onActiveNoteStoryChange, onHeaderFooterDoubleClick, hfEditMode, activeHeaderFooterRId, onBodyClick, className, style, pageEndGutter = 0, sidebarOverlay, scrollContainerRef: scrollContainerRefProp, onHyperlinkClick, onContextMenu, onAnchorPositionsChange, onTotalPagesChange, onError, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
+	const { document, documentIO, documentIdentity, experimentalSession, fonts: hostFonts, styles, theme: _theme, sectionProperties, headerContent, footerContent, firstPageHeaderContent, firstPageFooterContent, headerContentRId, footerContentRId, firstPageHeaderContentRId, firstPageFooterContentRId, readOnly = false, pageGap = 24, zoom = 1, pageRenderer, markupView, showCommentHighlights = true, showMarginGuides = false, marginGuideColor, onDocumentChange, onReadOnlyEditAttempt, onCopy, onCut, onPaste, onSelectionChange, onSelectionTextChange, onEditorViewReady, externalPlugins = EMPTY_PLUGINS, showTemplateDirectives = true, collaboration, extensionManager, suggestionModeActive = false, suggestionAuthor, onActiveNoteStoryChange, onHeaderFooterDoubleClick, hfEditMode, activeHeaderFooterRId, onBodyClick, className, style, pageEndGutter = 0, sidebarOverlay, scrollContainerRef: scrollContainerRefProp, onHyperlinkClick, onContextMenu, onAnchorPositionsChange, onTotalPagesChange, onError, anchorPositionMode = "comments-and-revisions", onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq } = props;
 	const getScrollContainer = useCallback(() => {
 		if (scrollContainerRefProp && typeof scrollContainerRefProp === "object") return getEditorScrollRoot(scrollContainerRefProp.current);
 		return getEditorScrollRoot(containerRef.current);
@@ -3321,6 +3325,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	const layoutInputSignature = useMemo(() => buildLayoutInputSignature({
 		columns,
 		markupView,
+		showCommentHighlights,
 		contentWidth,
 		defaultTabStop,
 		mirrorMargins,
@@ -3342,6 +3347,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	}), [
 		columns,
 		markupView,
+		showCommentHighlights,
 		contentWidth,
 		defaultTabStop,
 		mirrorMargins,
@@ -3416,7 +3422,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			emptyTemplatePreviewEntries: EMPTY_TEMPLATE_PREVIEW_ENTRIES,
 			emptyTemplatePreviewHidden: EMPTY_TEMPLATE_PREVIEW_HIDDEN,
 			hyphenationReadiness,
-			markupView
+			markupView,
+			showCommentHighlights
 		}, state, options);
 		if (outcome.blocks) setBlocks(outcome.blocks);
 		if (outcome.measures !== void 0) setMeasures(outcome.measures);
@@ -3453,6 +3460,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		mirrorMargins,
 		styles,
 		markupView,
+		showCommentHighlights,
 		layoutInputSignature,
 		hyphenationReadiness
 	]);
@@ -5532,7 +5540,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				setIsFocused(true);
 			});
 		};
-		if (layoutSessionRef.current.lastPmDoc?.eq(view_24.state.doc) && layoutSessionRef.current.lastMeasureInputs?.markupView === markupView) {
+		if (layoutSessionRef.current.lastPmDoc?.eq(view_24.state.doc) && layoutSessionRef.current.lastMeasureInputs?.markupView === markupView && layoutSessionRef.current.lastMeasureInputs?.showCommentHighlights === (showCommentHighlights && markupView !== "no-markup" && markupView !== "original")) {
 			const lastPreview = layoutSessionRef.current.lastTemplatePreview;
 			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview, templatePreviewRef.current) !== null) runLayoutPipeline$1(view_24.state, { reason: "manual" });
 			updateSelectionOverlay(view_24.state);
@@ -5573,7 +5581,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		updateAutocompleteOverlay,
 		readOnly,
 		refreshBodyImeCaretAnchor,
-		markupView
+		markupView,
+		showCommentHighlights
 	]);
 	const handleEditorViewDestroy = useCallback(() => {
 		onEditorViewReadyRef.current?.(null);
@@ -5961,6 +5970,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			/* @__PURE__ */ jsx(HiddenHeaderFooterPMs, {
 				ref: hfPMsRef,
 				document,
+				readOnly,
 				onTransaction: handleHfPmTransaction,
 				getCanonicalApi,
 				onSessionRefusal: handleSessionRefusal,
@@ -8338,14 +8348,14 @@ function _temp$10(heading) {
 }
 //#endregion
 //#region src/components/DocxEditorDialogs.tsx
-const FindReplaceDialog = lazy(() => import("./FindReplaceDialog-LlVMe3EW.js").then((n) => n.n).then((m) => ({ default: m.FindReplaceDialog })));
-const TablePropertiesDialog = lazy(() => import("./TablePropertiesDialog-Vu0HXQz6.js").then((n) => n.n).then((m) => ({ default: m.TablePropertiesDialog })));
-const ImagePositionDialog = lazy(() => import("./ImagePositionDialog-Cwt6R8iM.js").then((n) => n.n).then((m) => ({ default: m.ImagePositionDialog })));
-const ImagePropertiesDialog = lazy(() => import("./ImagePropertiesDialog-GNZLBFLB.js").then((n) => n.n).then((m) => ({ default: m.ImagePropertiesDialog })));
-const FootnotePropertiesDialog = lazy(() => import("./FootnotePropertiesDialog-D73t3LNP.js").then((n) => n.n).then((m) => ({ default: m.FootnotePropertiesDialog })));
-const PageSetupDialog = lazy(() => import("./PageSetupDialog-DD6IEZAo.js").then((n) => n.n).then((m) => ({ default: m.PageSetupDialog })));
-const SetNumberingValueDialog = lazy(() => import("./SetNumberingValueDialog-CDQGDvP1.js").then((m) => ({ default: m.SetNumberingValueDialog })));
-const InsertSymbolDialog = lazy(() => import("./InsertSymbolDialog-CeEhkEvc.js").then((n) => n.n).then((m) => ({ default: m.InsertSymbolDialog })));
+const FindReplaceDialog = lazy(() => import("./FindReplaceDialog-CUd8xdgd.js").then((n) => n.n).then((m) => ({ default: m.FindReplaceDialog })));
+const TablePropertiesDialog = lazy(() => import("./TablePropertiesDialog-uSTmyEcu.js").then((n) => n.n).then((m) => ({ default: m.TablePropertiesDialog })));
+const ImagePositionDialog = lazy(() => import("./ImagePositionDialog-Oap9knQ-.js").then((n) => n.n).then((m) => ({ default: m.ImagePositionDialog })));
+const ImagePropertiesDialog = lazy(() => import("./ImagePropertiesDialog-lLMKHv0u.js").then((n) => n.n).then((m) => ({ default: m.ImagePropertiesDialog })));
+const FootnotePropertiesDialog = lazy(() => import("./FootnotePropertiesDialog-BEs7N62_.js").then((n) => n.n).then((m) => ({ default: m.FootnotePropertiesDialog })));
+const PageSetupDialog = lazy(() => import("./PageSetupDialog-DTWCdPkX.js").then((n) => n.n).then((m) => ({ default: m.PageSetupDialog })));
+const SetNumberingValueDialog = lazy(() => import("./SetNumberingValueDialog-twVIZMLc.js").then((m) => ({ default: m.SetNumberingValueDialog })));
+const InsertSymbolDialog = lazy(() => import("./InsertSymbolDialog-Drm40-9j.js").then((n) => n.n).then((m) => ({ default: m.InsertSymbolDialog })));
 function DocxEditorDialogs(t0) {
 	const $ = c(52);
 	const { findReplace, tableProperties, imagePosition, imageProperties, pageSetup, footnoteProperties, insertSymbol, setNumberingValue } = t0;
@@ -10785,8 +10795,8 @@ const useDocumentLoader = (t0) => {
 * editing mode does not switch the display mode.
 */
 function useEditorMode(t0) {
-	const $ = c(24);
-	const { modeProp, onModeChange, readOnlyProp } = t0;
+	const $ = c(28);
+	const { modeProp, onModeChange, readOnlyProp, reviewDisplayMode } = t0;
 	let t1;
 	if ($[0] !== modeProp) {
 		t1 = () => new EditorModeManager(modeProp ?? "editing");
@@ -10808,60 +10818,75 @@ function useEditorMode(t0) {
 		$[5] = t2;
 	} else t2 = $[5];
 	const setEditingMode = t2;
+	let effectiveDisplayMode;
 	let t3;
-	if ($[6] !== editingMode || $[7] !== readOnlyProp) {
-		t3 = isReadOnlyMode(editingMode, readOnlyProp);
-		$[6] = editingMode;
-		$[7] = readOnlyProp;
-		$[8] = t3;
-	} else t3 = $[8];
-	const readOnly = t3;
+	if ($[6] !== displayMode || $[7] !== editingMode || $[8] !== readOnlyProp || $[9] !== reviewDisplayMode) {
+		effectiveDisplayMode = reviewDisplayMode === void 0 ? displayMode : reviewDisplayModeToDisplayMode(reviewDisplayMode);
+		t3 = getEditorReadOnlyReason({
+			editingMode,
+			readOnlyProp,
+			displayMode: effectiveDisplayMode
+		});
+		$[6] = displayMode;
+		$[7] = editingMode;
+		$[8] = readOnlyProp;
+		$[9] = reviewDisplayMode;
+		$[10] = effectiveDisplayMode;
+		$[11] = t3;
+	} else {
+		effectiveDisplayMode = $[10];
+		t3 = $[11];
+	}
+	const readOnlyReason = t3;
+	const readOnly = readOnlyReason !== null;
 	let t4;
-	if ($[9] !== editingMode) {
+	if ($[12] !== editingMode) {
 		t4 = isTrackChangesMode(editingMode);
-		$[9] = editingMode;
-		$[10] = t4;
-	} else t4 = $[10];
+		$[12] = editingMode;
+		$[13] = t4;
+	} else t4 = $[13];
 	const trackChangesOn = t4;
 	let t5;
-	if ($[11] !== editingMode || $[12] !== setEditingMode) {
+	if ($[14] !== editingMode || $[15] !== setEditingMode) {
 		t5 = () => {
 			setEditingMode(toggledTrackChangesMode(editingMode));
 		};
-		$[11] = editingMode;
-		$[12] = setEditingMode;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[14] = editingMode;
+		$[15] = setEditingMode;
+		$[16] = t5;
+	} else t5 = $[16];
 	const toggleTrackChanges = t5;
 	let t6;
-	if ($[14] !== manager) {
+	if ($[17] !== manager) {
 		t6 = (mode_0) => {
 			manager.setDisplayMode(mode_0);
 		};
-		$[14] = manager;
-		$[15] = t6;
-	} else t6 = $[15];
+		$[17] = manager;
+		$[18] = t6;
+	} else t6 = $[18];
 	const setDisplayMode = t6;
 	let t7;
-	if ($[16] !== displayMode || $[17] !== editingMode || $[18] !== readOnly || $[19] !== setDisplayMode || $[20] !== setEditingMode || $[21] !== toggleTrackChanges || $[22] !== trackChangesOn) {
+	if ($[19] !== editingMode || $[20] !== effectiveDisplayMode || $[21] !== readOnly || $[22] !== readOnlyReason || $[23] !== setDisplayMode || $[24] !== setEditingMode || $[25] !== toggleTrackChanges || $[26] !== trackChangesOn) {
 		t7 = {
 			editingMode,
 			setEditingMode,
 			readOnly,
+			readOnlyReason,
 			trackChangesOn,
 			toggleTrackChanges,
-			displayMode,
+			displayMode: effectiveDisplayMode,
 			setDisplayMode
 		};
-		$[16] = displayMode;
-		$[17] = editingMode;
-		$[18] = readOnly;
-		$[19] = setDisplayMode;
-		$[20] = setEditingMode;
-		$[21] = toggleTrackChanges;
-		$[22] = trackChangesOn;
-		$[23] = t7;
-	} else t7 = $[23];
+		$[19] = editingMode;
+		$[20] = effectiveDisplayMode;
+		$[21] = readOnly;
+		$[22] = readOnlyReason;
+		$[23] = setDisplayMode;
+		$[24] = setEditingMode;
+		$[25] = toggleTrackChanges;
+		$[26] = trackChangesOn;
+		$[27] = t7;
+	} else t7 = $[27];
 	return t7;
 }
 //#endregion
@@ -10879,71 +10904,130 @@ function useEditorMode(t0) {
 * from `dialogs/useFindReplace.ts`; this hook layers the document-aware
 * operations (find, replace, scroll-to-match) on top.
 */
+const toEditorFindMatch = ({ from, to, ...match }) => ({
+	...match,
+	contentIndex: 0,
+	authoredRange: {
+		from,
+		to
+	}
+});
 function useFindReplace(t0) {
-	const $ = c(35);
-	const { documentState, getDocumentState, containerRef, handleDocumentChange, findReplace, selectMatch } = t0;
+	const $ = c(49);
+	const { documentState, getDocumentState, getEditorState, markupView: markupViewProp, containerRef, handleDocumentChange, findReplace, selectMatch, readOnlyReason, onReadonlyEditAttempt } = t0;
+	const markupView = markupViewProp ?? "all-markup";
 	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = new FindReplaceManager();
-		$[0] = t1;
-	} else t1 = $[0];
-	const manager = t1;
+	if ($[0] !== markupView || $[1] !== readOnlyReason) {
+		t1 = getReviewViewReadOnlyReason(markupView) ?? readOnlyReason ?? null;
+		$[0] = markupView;
+		$[1] = readOnlyReason;
+		$[2] = t1;
+	} else t1 = $[2];
+	const replacementRefusal = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = new FindReplaceManager();
+		$[3] = t2;
+	} else t2 = $[3];
+	const manager = t2;
 	const [currentResult, setCurrentResult] = useState(null);
+	const activeSearch = useRef(null);
 	const { setMatches, goToMatch } = findReplace;
-	let t2;
-	if ($[1] !== setMatches) {
-		t2 = () => {
+	let t3;
+	if ($[4] !== setMatches) {
+		t3 = () => {
+			activeSearch.current = null;
 			manager.clear();
 			setCurrentResult(null);
 			setMatches([], 0);
 		};
-		$[1] = setMatches;
-		$[2] = t2;
-	} else t2 = $[2];
-	const resetFindResult = t2;
-	let t3;
-	if ($[3] !== documentState || $[4] !== getDocumentState) {
-		t3 = () => getDocumentState?.() ?? documentState ?? null;
-		$[3] = documentState;
-		$[4] = getDocumentState;
+		$[4] = setMatches;
 		$[5] = t3;
 	} else t3 = $[5];
-	const readDocumentState = t3;
+	const resetFindResult = t3;
 	let t4;
-	if ($[6] !== containerRef || $[7] !== selectMatch) {
-		t4 = (match) => {
-			if (!selectMatch?.(match) && containerRef.current) scrollToMatch(containerRef.current, match);
-		};
-		$[6] = containerRef;
-		$[7] = selectMatch;
+	if ($[6] !== documentState || $[7] !== getDocumentState) {
+		t4 = () => getDocumentState?.() ?? documentState ?? null;
+		$[6] = documentState;
+		$[7] = getDocumentState;
 		$[8] = t4;
 	} else t4 = $[8];
-	const revealMatch = t4;
+	const readDocumentState = t4;
 	let t5;
-	if ($[9] !== readDocumentState || $[10] !== resetFindResult || $[11] !== revealMatch || $[12] !== setMatches) {
-		t5 = (searchText, options) => {
+	if ($[9] !== containerRef || $[10] !== selectMatch) {
+		t5 = (match) => {
+			if (!selectMatch?.(match) && containerRef.current) scrollToMatch(containerRef.current, match);
+		};
+		$[9] = containerRef;
+		$[10] = selectMatch;
+		$[11] = t5;
+	} else t5 = $[11];
+	const revealMatch = t5;
+	let t6;
+	if ($[12] !== getEditorState || $[13] !== markupView || $[14] !== readDocumentState || $[15] !== resetFindResult || $[16] !== revealMatch || $[17] !== setMatches) {
+		t6 = (searchText, options) => {
 			const currentDocument = readDocumentState();
 			if (!currentDocument || !searchText.trim()) {
 				resetFindResult();
 				return null;
 			}
-			const matches = findInDocument(currentDocument, searchText, options);
+			const editorState = getEditorState?.();
+			let matches;
+			if (markupView === "all-markup") matches = findInDocument(currentDocument, searchText, options);
+			else {
+				if (!editorState) {
+					resetFindResult();
+					return null;
+				}
+				matches = findInMarkupView({
+					state: editorState,
+					markupView,
+					searchText,
+					options
+				}).map(toEditorFindMatch);
+			}
+			activeSearch.current = {
+				searchText,
+				options
+			};
 			const result = manager.setMatches(matches);
 			setCurrentResult(result);
 			setMatches(matches, 0);
 			if (matches.length > 0) revealMatch(matches[0]);
 			return result;
 		};
-		$[9] = readDocumentState;
-		$[10] = resetFindResult;
-		$[11] = revealMatch;
-		$[12] = setMatches;
-		$[13] = t5;
-	} else t5 = $[13];
-	const handleFind = t5;
-	let t6;
-	if ($[14] !== goToMatch || $[15] !== revealMatch) {
-		t6 = () => {
+		$[12] = getEditorState;
+		$[13] = markupView;
+		$[14] = readDocumentState;
+		$[15] = resetFindResult;
+		$[16] = revealMatch;
+		$[17] = setMatches;
+		$[18] = t6;
+	} else t6 = $[18];
+	const handleFind = t6;
+	const previousMarkupView = useRef(markupView);
+	let t7;
+	let t8;
+	if ($[19] !== handleFind || $[20] !== markupView) {
+		t7 = () => {
+			if (previousMarkupView.current === markupView) return;
+			previousMarkupView.current = markupView;
+			const search = activeSearch.current;
+			if (search) handleFind(search.searchText, search.options);
+		};
+		t8 = [markupView, handleFind];
+		$[19] = handleFind;
+		$[20] = markupView;
+		$[21] = t7;
+		$[22] = t8;
+	} else {
+		t7 = $[21];
+		t8 = $[22];
+	}
+	useEffect(t7, t8);
+	let t9;
+	if ($[23] !== goToMatch || $[24] !== revealMatch) {
+		t9 = () => {
 			const stepped = manager.navigate("next");
 			if (!stepped) return null;
 			setCurrentResult(manager.getResult());
@@ -10951,14 +11035,14 @@ function useFindReplace(t0) {
 			revealMatch(stepped.match);
 			return stepped.match;
 		};
-		$[14] = goToMatch;
-		$[15] = revealMatch;
-		$[16] = t6;
-	} else t6 = $[16];
-	const handleFindNext = t6;
-	let t7;
-	if ($[17] !== goToMatch || $[18] !== revealMatch) {
-		t7 = () => {
+		$[23] = goToMatch;
+		$[24] = revealMatch;
+		$[25] = t9;
+	} else t9 = $[25];
+	const handleFindNext = t9;
+	let t10;
+	if ($[26] !== goToMatch || $[27] !== revealMatch) {
+		t10 = () => {
 			const stepped_0 = manager.navigate("previous");
 			if (!stepped_0) return null;
 			setCurrentResult(manager.getResult());
@@ -10966,14 +11050,14 @@ function useFindReplace(t0) {
 			revealMatch(stepped_0.match);
 			return stepped_0.match;
 		};
-		$[17] = goToMatch;
-		$[18] = revealMatch;
-		$[19] = t7;
-	} else t7 = $[19];
-	const handleFindPrevious = t7;
-	let t8;
-	if ($[20] !== handleDocumentChange || $[21] !== readDocumentState) {
-		t8 = (replaceText) => {
+		$[26] = goToMatch;
+		$[27] = revealMatch;
+		$[28] = t10;
+	} else t10 = $[28];
+	const handleFindPrevious = t10;
+	let t11;
+	if ($[29] !== handleDocumentChange || $[30] !== readDocumentState) {
+		t11 = (replaceText) => {
 			const currentDocument_0 = readDocumentState();
 			if (!currentDocument_0) return false;
 			const newDoc = manager.replaceCurrent(currentDocument_0, replaceText);
@@ -10981,14 +11065,14 @@ function useFindReplace(t0) {
 			handleDocumentChange(newDoc);
 			return true;
 		};
-		$[20] = handleDocumentChange;
-		$[21] = readDocumentState;
-		$[22] = t8;
-	} else t8 = $[22];
-	const handleReplace = t8;
-	let t9;
-	if ($[23] !== handleDocumentChange || $[24] !== readDocumentState || $[25] !== resetFindResult) {
-		t9 = (searchText_0, replaceText_0, options_0) => {
+		$[29] = handleDocumentChange;
+		$[30] = readDocumentState;
+		$[31] = t11;
+	} else t11 = $[31];
+	const handleReplace = t11;
+	let t12;
+	if ($[32] !== handleDocumentChange || $[33] !== readDocumentState || $[34] !== resetFindResult) {
+		t12 = (searchText_0, replaceText_0, options_0) => {
 			const currentDocument_1 = readDocumentState();
 			if (!currentDocument_1 || !searchText_0.trim()) return 0;
 			const matches_0 = findInDocument(currentDocument_1, searchText_0, options_0);
@@ -10998,33 +11082,56 @@ function useFindReplace(t0) {
 			resetFindResult();
 			return outcome.replacedCount;
 		};
-		$[23] = handleDocumentChange;
-		$[24] = readDocumentState;
-		$[25] = resetFindResult;
-		$[26] = t9;
-	} else t9 = $[26];
-	const handleReplaceAll = t9;
-	let t10;
-	if ($[27] !== currentResult || $[28] !== handleFind || $[29] !== handleFindNext || $[30] !== handleFindPrevious || $[31] !== handleReplace || $[32] !== handleReplaceAll || $[33] !== resetFindResult) {
-		t10 = {
+		$[32] = handleDocumentChange;
+		$[33] = readDocumentState;
+		$[34] = resetFindResult;
+		$[35] = t12;
+	} else t12 = $[35];
+	const handleReplaceAll = t12;
+	let t13;
+	if ($[36] !== onReadonlyEditAttempt || $[37] !== replacementRefusal) {
+		t13 = () => {
+			if (replacementRefusal) onReadonlyEditAttempt?.(replacementRefusal);
+			return false;
+		};
+		$[36] = onReadonlyEditAttempt;
+		$[37] = replacementRefusal;
+		$[38] = t13;
+	} else t13 = $[38];
+	const refuseReplace = t13;
+	let t14;
+	if ($[39] !== refuseReplace) {
+		t14 = () => {
+			refuseReplace();
+			return 0;
+		};
+		$[39] = refuseReplace;
+		$[40] = t14;
+	} else t14 = $[40];
+	const refuseReplaceAll = t14;
+	const t15 = replacementRefusal ? refuseReplace : handleReplace;
+	const t16 = replacementRefusal ? refuseReplaceAll : handleReplaceAll;
+	let t17;
+	if ($[41] !== currentResult || $[42] !== handleFind || $[43] !== handleFindNext || $[44] !== handleFindPrevious || $[45] !== resetFindResult || $[46] !== t15 || $[47] !== t16) {
+		t17 = {
 			currentResult,
 			resetFindResult,
 			handleFind,
 			handleFindNext,
 			handleFindPrevious,
-			handleReplace,
-			handleReplaceAll
+			handleReplace: t15,
+			handleReplaceAll: t16
 		};
-		$[27] = currentResult;
-		$[28] = handleFind;
-		$[29] = handleFindNext;
-		$[30] = handleFindPrevious;
-		$[31] = handleReplace;
-		$[32] = handleReplaceAll;
-		$[33] = resetFindResult;
-		$[34] = t10;
-	} else t10 = $[34];
-	return t10;
+		$[41] = currentResult;
+		$[42] = handleFind;
+		$[43] = handleFindNext;
+		$[44] = handleFindPrevious;
+		$[45] = resetFindResult;
+		$[46] = t15;
+		$[47] = t16;
+		$[48] = t17;
+	} else t17 = $[48];
+	return t17;
 }
 //#endregion
 //#region src/components/hooks/useHeaderFooterEditor.ts
@@ -13818,7 +13925,7 @@ function _temp(id_4) {
 */
 /** No headings to track while the outline is not shown. */
 const NO_HEADINGS = [];
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-mv0x1JQX.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-D7eTgHpL.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-DZ3AUFKh.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");
@@ -13920,7 +14027,7 @@ const createPagedEditorBinding = () => {
 /**
 * DocxEditor - Complete DOCX editor component
 */
-const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, pageRenderer, showMarginGuides = false, marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, keyboardShortcuts = DEFAULT_KEYBOARD_SHORTCUT_SCOPE, hostShortcuts: hostShortcutsProp, readOnly: readOnlyProp = false, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, outlineDepth: outlineDepthProp, onOutlineDepthChange, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy, onCut, onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, plugins, featureFlags, experimentalSession, onSelectiveSaveTripwire }, ref) {
+const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, document: initialDocument, onSave, author = "User", onChange, onSelectionChange, onSelectionTextChange, onError, onFontsLoaded: onFontsLoadedCallback, fontFamilies, fonts, theme, showToolbar = true, showZoomControl = true, showReviewControls = true, showHeaderFooterEditing = true, pageRenderer, showMarginGuides = false, marginGuideColor, showRuler: showRulerProp = false, rulerUnit = "inch", initialZoom = 1, enableWheelZoom = true, keyboardShortcuts = DEFAULT_KEYBOARD_SHORTCUT_SCOPE, hostShortcuts: hostShortcutsProp, readOnly: readOnlyProp = false, reviewDisplayMode, showCommentHighlights = true, autoOpenReviewSidebar = true, components, toolbarExtra, className = "", style, placeholder, loadingIndicator, preserveDocumentWhileLoading = false, initialScrollTop, onScrollTopChange, showOutline: showOutlineProp = true, outlineDepth: outlineDepthProp, onOutlineDepthChange, onPrint, onInsertImage, onInsertTable, showTableInsert = true, onInsertPageBreak, onInsertTOC, onCopy, onCut, onPaste, mode: modeProp, onModeChange, onReadonlyEditAttempt, onCompatibilityChange, onEditorViewReady, onAnonymizationMatchesChange, onAnonymizationTermClick, selectedAnonymizationCanonical = null, anonymizationSelectionSeq, showTemplateDirectives = false, onSlashMenuChange, onSlashMenuKeyAction, customContextMenuItems, onCustomContextAction, comments: commentsProp, onCommentsChange, collaboration, plugins, featureFlags, experimentalSession, onSelectiveSaveTripwire }, ref) {
 	const pagedEditorRef = useRef(null);
 	const [pagedEditorBinding] = useState(createPagedEditorBinding);
 	const scrollContainerRef = useRef(null);
@@ -13975,10 +14082,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		setTrackedChangeEntries(entries);
 	}, []);
 	const [anchorPositions, setAnchorPositions] = useState(EMPTY_ANCHOR_POSITIONS);
-	const { editingMode, readOnly, trackChangesOn, toggleTrackChanges, displayMode, setDisplayMode } = useEditorMode({
+	const { editingMode, readOnly, readOnlyReason, trackChangesOn, toggleTrackChanges, displayMode, setDisplayMode } = useEditorMode({
 		modeProp,
 		onModeChange,
-		readOnlyProp
+		readOnlyProp,
+		...reviewDisplayMode === void 0 ? {} : { reviewDisplayMode }
 	});
 	useEffect(() => {
 		pagedEditorRef.current?.getEditor().setCanonicalMode(editingMode === "suggesting" ? {
@@ -14321,6 +14429,13 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		...!usesCanonicalSession(experimentalSession, CANONICAL_GAP.authorityRouting) ? {} : { experimentalSession },
 		getHfView: pagedEditorBinding.getHfView
 	});
+	useLayoutEffect(() => {
+		if (readOnly && hfEditPosition) handleBodyClick();
+	}, [
+		readOnly,
+		hfEditPosition,
+		handleBodyClick
+	]);
 	let activeHfRId = hfEditIsFirstPage ? activeFirstFooterRId : activeFooterRId;
 	if (hfEditPosition === "header") activeHfRId = hfEditIsFirstPage ? activeFirstHeaderRId : activeHeaderRId;
 	const visibleOutlineHeadings = useMemo(() => filterHeadingsByDepth(outlineHeadings, outlineDepth), [outlineDepth, outlineHeadings]);
@@ -14670,23 +14785,31 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		canonicalCommentsSerialized,
 		onCommentsChange
 	]);
+	const selectFindMatch = useCallback((match) => {
+		const editor_1 = pagedEditorRef.current;
+		const view_8 = editor_1?.getView();
+		if (!editor_1 || !view_8) return false;
+		const range = match.authoredRange ?? resolveFindMatchRange(view_8.state.doc, match);
+		if (!range) return false;
+		editor_1.setSelection(range.from, range.to);
+		requestAnimationFrame(() => {
+			editor_1.scrollToPosition(range.from);
+		});
+		return true;
+	}, []);
+	const notifyReadonlyEditAttempt = useCallback(() => {
+		if (readOnlyReason) onReadonlyEditAttempt?.(readOnlyReason);
+	}, [readOnlyReason, onReadonlyEditAttempt]);
 	const { currentResult: currentFindResult, resetFindResult, handleFind, handleFindNext, handleFindPrevious, handleReplace, handleReplaceAll } = useFindReplace({
 		getDocumentState: buildCurrentDocument,
+		getEditorState: () => pagedEditorRef.current?.getView()?.state ?? null,
+		markupView: displayMode,
 		containerRef,
 		handleDocumentChange,
 		findReplace,
-		selectMatch: useCallback((match) => {
-			const editor_1 = pagedEditorRef.current;
-			const view_8 = editor_1?.getView();
-			if (!editor_1 || !view_8) return false;
-			const range = resolveFindMatchRange(view_8.state.doc, match);
-			if (!range) return false;
-			editor_1.setSelection(range.from, range.to);
-			requestAnimationFrame(() => {
-				editor_1.scrollToPosition(range.from);
-			});
-			return true;
-		}, [])
+		selectMatch: selectFindMatch,
+		readOnlyReason,
+		onReadonlyEditAttempt
 	});
 	useLayoutEffect(() => {
 		resetFindResultRef.current = resetFindResult;
@@ -15479,8 +15602,8 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 					let html = "";
 					let text_1 = "";
 					for (const item_1 of items_0) {
-						if (item_1.types.includes("text/html")) html = await (await item_1.getType("text/html")).text();
-						if (item_1.types.includes("text/plain")) text_1 = await (await item_1.getType("text/plain")).text();
+						if (item_1.types.includes("text/html")) html = await readBlobText(await item_1.getType("text/html"));
+						if (item_1.types.includes("text/plain")) text_1 = await readBlobText(await item_1.getType("text/plain"));
 					}
 					const dt = new DataTransfer();
 					if (html) dt.items.add(html, "text/html");
@@ -15785,6 +15908,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		onError?.(error_1);
 	}, [onError]);
 	useImperativeHandle(ref, () => ({
+		getReadOnlyReason: () => readOnlyReason,
 		getDocument: () => buildCurrentDocument(),
 		hasPendingChanges: () => {
 			const view_21 = pagedEditorRef.current?.getView();
@@ -15811,6 +15935,10 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 			openFind(readFindSelectionSeed());
 		},
 		openReplace: () => {
+			if (readOnlyReason) {
+				notifyReadonlyEditAttempt();
+				return;
+			}
 			openReplace(readFindSelectionSeed());
 		},
 		loadDocument: (document_0) => {
@@ -16233,7 +16361,12 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		getPageText: (page_1) => {
 			const view_44 = pagedEditorRef.current?.getView();
 			if (!view_44) return null;
-			return getPageTextFromLayout(pagedEditorRef.current?.getEditor()?.getLayout() ?? null, view_44.state.doc, page_1);
+			return getPageTextFromLayout({
+				layout: pagedEditorRef.current?.getEditor()?.getLayout() ?? null,
+				doc: view_44.state.doc,
+				page: page_1,
+				projection: projectMarkupView(view_44.state, displayMode)
+			});
 		},
 		getTargetPage: (target_2, snapshot_6) => {
 			const view_45 = pagedEditorRef.current?.getView();
@@ -16303,6 +16436,9 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	}), [
 		author,
 		buildCurrentDocument,
+		displayMode,
+		readOnlyReason,
+		notifyReadonlyEditAttempt,
 		scrollPageInfo,
 		handleSave,
 		setZoomWithViewportAnchor,
@@ -17241,6 +17377,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 															documentIO,
 															documentIdentity: loadedDocumentIdentity,
 															markupView: displayMode,
+															showCommentHighlights,
 															...fonts !== void 0 ? { fonts } : {},
 															theme: history.state.package.theme || theme || null,
 															sectionProperties: effectiveSectionProperties ?? null,
@@ -17271,7 +17408,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 															...onCopy !== void 0 ? { onCopy } : {},
 															...onCut !== void 0 ? { onCut } : {},
 															...onPaste !== void 0 ? { onPaste } : {},
-															...onReadonlyEditAttempt !== void 0 ? { onReadOnlyEditAttempt: onReadonlyEditAttempt } : {},
+															...onReadonlyEditAttempt !== void 0 ? { onReadOnlyEditAttempt: notifyReadonlyEditAttempt } : {},
 															onSelectionChange: handlePagedSelectionChange,
 															...onSelectionTextChange !== void 0 ? { onSelectionTextChange } : {},
 															onEditorViewReady: handleBodyViewReady,

package/dist/{renderAsync-BVAgBXCL.d.ts → renderAsync-DsMKdbU5.d.ts}

@@ -7,6 +7,8 @@ import { FolioDocumentOperationBatch, FolioDocumentOperationResult, FolioDocumen
 import { ContentControlFilter, SetContentControlContentInput, SetContentControlValueInput } from "@stll/folio-core/content-controls";
 import { PageRendererName } from "@stll/folio-core/display-list/editor/pageRenderer";
 import { HostShortcut, KeyboardShortcutScope } from "@stll/folio-core/managers/editorShortcuts";
+import { EditorMode, EditorReadOnlyReason } from "@stll/folio-core/managers/EditorModeManager";
+import { ReviewDisplayMode } from "@stll/folio-core/managers/reviewDisplayMode";
 import { FolioEditor } from "@stll/folio-core/controller/folioEditor";
 import { DocxCompatibility } from "@stll/folio-core/docx/compatibility";
 import { FolioSelectiveSaveFlags } from "@stll/folio-core/docx/selectiveSaveFlags";
@@ -20,7 +22,6 @@ import { Comment } from "@stll/folio-core/types/content";
 import { DocxInput } from "@stll/folio-core/utils/docxInput";
 import { ScrollToParaIdOptions } from "@stll/folio-core/paged-layout/paragraphFlash";
 import { BlockRect } from "@stll/folio-core/paged-layout/blockGeometry";
-import { EditorMode } from "@stll/folio-core/managers/EditorModeManager";
 import "@stll/folio-core/controller/noteEditorManager";
 import { Layout } from "@stll/folio-core/layout-engine/types";
 import "@stll/folio-core/prosemirror/extensions/ExtensionManager";
@@ -749,6 +750,10 @@ type DocxEditorProps = {
   hostShortcuts?: readonly HostShortcut[];
   /** Whether the editor is read-only. When true, hides toolbar and rulers */
   readOnly?: boolean;
+  /** Controlled review view. Defaults to all-markup; saving preserves all revisions. */
+  reviewDisplayMode?: ReviewDisplayMode;
+  /** Show comment highlights in all-markup (default: true); hidden in final/original. */
+  showCommentHighlights?: boolean;
   /**
    * Whether the comments sidebar opens when a document with open comment
    * threads loads (default: true). It stays closed when it would be empty:
@@ -830,7 +835,7 @@ type DocxEditorProps = {
   /** Callback when the editing mode changes */
   onModeChange?: (mode: EditorMode) => void;
   /** Callback when a readonly user action would mutate the document. */
-  onReadonlyEditAttempt?: () => void;
+  onReadonlyEditAttempt?: (reason: EditorReadOnlyReason) => void;
   /**
    * Controlled comments array. When provided, the editor reads comment thread
    * metadata from this prop and emits every change through `onCommentsChange`.
@@ -969,6 +974,8 @@ type HighlightPassageOptions = {
  * Imperative handle exposed by the DocxEditor component.
  */
 type DocxEditorRef = {
+  /** Current reason user editing is refused, or null in an editable view. */
+  getReadOnlyReason: () => EditorReadOnlyReason | null;
   /** Get the current document */
   getDocument: () => Document | null;
   /** Whether the live ProseMirror state has edits that have not been serialized. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-react",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "React editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
   "keywords": [
     "document-editor",
@@ -37,23 +37,28 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./compat/eigenpal": {
       "types": "./dist/compat/eigenpal.d.ts",
-      "import": "./dist/compat/eigenpal.js"
+      "import": "./dist/compat/eigenpal.js",
+      "default": "./dist/compat/eigenpal.js"
     },
     "./dialogs": {
       "types": "./dist/dialogs.d.ts",
-      "import": "./dist/dialogs.js"
+      "import": "./dist/dialogs.js",
+      "default": "./dist/dialogs.js"
     },
     "./messages/*": {
       "types": "./dist/i18n/messages/*.d.ts",
-      "import": "./dist/i18n/messages/*.js"
+      "import": "./dist/i18n/messages/*.js",
+      "default": "./dist/i18n/messages/*.js"
     },
     "./messages": {
       "types": "./dist/messages.d.ts",
-      "import": "./dist/messages.js"
+      "import": "./dist/messages.js",
+      "default": "./dist/messages.js"
     },
     "./editor.css": "./dist/editor.css",
     "./standalone.css": "./dist/standalone.css"
@@ -79,7 +84,10 @@
     "@fontsource/noto-sans-arabic": "^5.2.7",
     "@fontsource/source-sans-3": "^5.2.9",
     "@fontsource/tinos": "^5.2.7",
-    "@stll/folio-core": "^0.60.0",
+    "@stll/folio-core": "^0.61.0",
+    "@stll/utf8-boundaries": "0.1.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "better-result": "3.0.1",
     "lucide-react": "1.24.0",
     "react-compiler-runtime": "^1.0.0"
@@ -96,14 +104,22 @@
     "yjs": "^13.6.31"
   },
   "peerDependencies": {
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-gapcursor": "^1.4.1",
     "prosemirror-history": "^1.5.0",
+    "prosemirror-inputrules": "^1.5.0",
+    "prosemirror-keymap": "^1.2.3",
     "prosemirror-model": "^1.25.9",
     "prosemirror-state": "^1.4.4",
     "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.12.0",
     "prosemirror-view": "^1.42.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "use-intl": ">=4.0.0",
+    "y-prosemirror": "^1.3.7",
+    "y-protocols": "^1.0.6",
     "yjs": "^13.6.31"
   },
   "main": "./dist/index.js",