roosterjs-content-model-plugins 9.40.0 → 9.41.0

package/lib/announce/AnnouncePlugin.d.ts

@@ -0,0 +1,32 @@
+import type { IEditor, PluginEvent, EditorPlugin } from 'roosterjs-content-model-types';
+/**
+ * AnnouncePlugin helps editor announce table selection changes for accessibility
+ */
+export declare class AnnouncePlugin implements EditorPlugin {
+    private editor;
+    private previousSelection;
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent): void;
+}

package/lib/announce/AnnouncePlugin.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnnouncePlugin = void 0;
+var tableSelectionUtils_1 = require("./tableSelectionUtils");
+/**
+ * AnnouncePlugin helps editor announce table selection changes for accessibility
+ */
+var AnnouncePlugin = /** @class */ (function () {
+    function AnnouncePlugin() {
+        this.editor = null;
+        this.previousSelection = null;
+    }
+    /**
+     * Get name of this plugin
+     */
+    AnnouncePlugin.prototype.getName = function () {
+        return 'Announce';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    AnnouncePlugin.prototype.initialize = function (editor) {
+        this.editor = editor;
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    AnnouncePlugin.prototype.dispose = function () {
+        this.editor = null;
+        this.previousSelection = null;
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    AnnouncePlugin.prototype.onPluginEvent = function (event) {
+        var _a, _b;
+        if (!this.editor) {
+            return;
+        }
+        if (event.eventType == 'selectionChanged') {
+            if (((_a = event.newSelection) === null || _a === void 0 ? void 0 : _a.type) == 'table') {
+                var action = (0, tableSelectionUtils_1.getIsSelectingOrUnselecting)(((_b = this.previousSelection) === null || _b === void 0 ? void 0 : _b.type) == 'table' ? this.previousSelection : null, event.newSelection);
+                if (action && event.newSelection.tableSelectionInfo) {
+                    this.editor.announce({
+                        defaultStrings: action === 'unselecting' ? 'unselected' : 'selected',
+                        formatStrings: [
+                            (0, tableSelectionUtils_1.retrieveStringFromParsedTable)(event.newSelection.tableSelectionInfo),
+                        ],
+                    });
+                }
+            }
+            this.previousSelection = event.newSelection;
+        }
+    };
+    return AnnouncePlugin;
+}());
+exports.AnnouncePlugin = AnnouncePlugin;
+//# sourceMappingURL=AnnouncePlugin.js.map

package/lib/announce/AnnouncePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncePlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/announce/AnnouncePlugin.ts"],"names":[],"mappings":";;;AAAA,6DAAmG;AAQnG;;GAEG;AACH;IAAA;QACY,WAAM,GAAmB,IAAI,CAAC;QAC9B,sBAAiB,GAAwB,IAAI,CAAC;IA2D1D,CAAC;IAzDG;;OAEG;IACH,gCAAO,GAAP;QACI,OAAO,UAAU,CAAC;IACtB,CAAC;IAED;;;;;OAKG;IACH,mCAAU,GAAV,UAAW,MAAe;QACtB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAED;;;;OAIG;IACH,gCAAO,GAAP;QACI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAClC,CAAC;IAED;;;;;OAKG;IACH,sCAAa,GAAb,UAAc,KAAkB;;QAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACd,OAAO;SACV;QAED,IAAI,KAAK,CAAC,SAAS,IAAI,kBAAkB,EAAE;YACvC,IAAI,CAAA,MAAA,KAAK,CAAC,YAAY,0CAAE,IAAI,KAAI,OAAO,EAAE;gBACrC,IAAM,MAAM,GAAG,IAAA,iDAA2B,EACtC,CAAA,MAAA,IAAI,CAAC,iBAAiB,0CAAE,IAAI,KAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,EACvE,KAAK,CAAC,YAAY,CACrB,CAAC;gBACF,IAAI,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,kBAAkB,EAAE;oBACjD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;wBACjB,cAAc,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;wBACpE,aAAa,EAAE;4BACX,IAAA,mDAA6B,EAAC,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC;yBACvE;qBACJ,CAAC,CAAC;iBACN;aACJ;YAED,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAAC;SAC/C;IACL,CAAC;IACL,qBAAC;AAAD,CAAC,AA7DD,IA6DC;AA7DY,wCAAc","sourcesContent":["import { getIsSelectingOrUnselecting, retrieveStringFromParsedTable } from './tableSelectionUtils';\nimport type {\n    IEditor,\n    PluginEvent,\n    EditorPlugin,\n    DOMSelection,\n} from 'roosterjs-content-model-types';\n\n/**\n * AnnouncePlugin helps editor announce table selection changes for accessibility\n */\nexport class AnnouncePlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private previousSelection: DOMSelection | null = null;\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'Announce';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.editor = null;\n        this.previousSelection = null;\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (!this.editor) {\n            return;\n        }\n\n        if (event.eventType == 'selectionChanged') {\n            if (event.newSelection?.type == 'table') {\n                const action = getIsSelectingOrUnselecting(\n                    this.previousSelection?.type == 'table' ? this.previousSelection : null,\n                    event.newSelection\n                );\n                if (action && event.newSelection.tableSelectionInfo) {\n                    this.editor.announce({\n                        defaultStrings: action === 'unselecting' ? 'unselected' : 'selected',\n                        formatStrings: [\n                            retrieveStringFromParsedTable(event.newSelection.tableSelectionInfo),\n                        ],\n                    });\n                }\n            }\n\n            this.previousSelection = event.newSelection;\n        }\n    }\n}\n"]}

package/lib/announce/tableSelectionUtils.d.ts

@@ -0,0 +1,17 @@
+import type { TableSelectionInfo, TableSelection } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Retrieves text content from selected table cells in a parsed table structure
+ * @param tsInfo Table selection information containing the parsed table and coordinates
+ * @returns Combined text content from all selected cells, separated by spaces
+ */
+export declare function retrieveStringFromParsedTable(tsInfo: TableSelectionInfo): string;
+/**
+ * @internal
+ * Determines whether the table selection is expanding (selecting more) or contracting (selecting less)
+ * @param prevTableSelection Previous table selection object containing firstRow, lastRow, firstColumn, and lastColumn properties
+ * @param firstCo Current first coordinate of the selection (with row, col properties)
+ * @param lastCo Current last coordinate of the selection (with row, col properties)
+ * @returns 'selecting' if expanding selection, 'unselecting' if contracting, or null if no change
+ */
+export declare function getIsSelectingOrUnselecting(prevTableSelection: TableSelection | null, newTableSelection: TableSelection): 'selecting' | 'unselecting' | null;

package/lib/announce/tableSelectionUtils.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIsSelectingOrUnselecting = exports.retrieveStringFromParsedTable = void 0;
+/**
+ * @internal
+ * Retrieves text content from selected table cells in a parsed table structure
+ * @param tsInfo Table selection information containing the parsed table and coordinates
+ * @returns Combined text content from all selected cells, separated by spaces
+ */
+function retrieveStringFromParsedTable(tsInfo) {
+    var parsedTable = tsInfo.parsedTable, firstCo = tsInfo.firstCo, lastCo = tsInfo.lastCo;
+    var result = '';
+    if (lastCo) {
+        for (var r = firstCo.row; r <= lastCo.row; r++) {
+            for (var c = firstCo.col; c <= lastCo.col; c++) {
+                var cell = parsedTable[r] && parsedTable[r][c];
+                if (cell && typeof cell != 'string') {
+                    result += ' ' + cell.innerText + ',';
+                }
+            }
+        }
+    }
+    return result;
+}
+exports.retrieveStringFromParsedTable = retrieveStringFromParsedTable;
+/**
+ * @internal
+ * Determines whether the table selection is expanding (selecting more) or contracting (selecting less)
+ * @param prevTableSelection Previous table selection object containing firstRow, lastRow, firstColumn, and lastColumn properties
+ * @param firstCo Current first coordinate of the selection (with row, col properties)
+ * @param lastCo Current last coordinate of the selection (with row, col properties)
+ * @returns 'selecting' if expanding selection, 'unselecting' if contracting, or null if no change
+ */
+function getIsSelectingOrUnselecting(prevTableSelection, newTableSelection) {
+    if (!prevTableSelection) {
+        return 'selecting';
+    }
+    var prevFirstRow = prevTableSelection.firstRow, prevLastRow = prevTableSelection.lastRow, prevFirstColumn = prevTableSelection.firstColumn, prevLastColumn = prevTableSelection.lastColumn;
+    var newFirstRow = newTableSelection.firstRow, newLastRow = newTableSelection.lastRow, newFirstColumn = newTableSelection.firstColumn, newLastColumn = newTableSelection.lastColumn;
+    var prevRowSpan = Math.abs(prevLastRow - prevFirstRow) + 1;
+    var prevColSpan = Math.abs(prevLastColumn - prevFirstColumn) + 1;
+    var prevArea = prevRowSpan * prevColSpan;
+    var newRowSpan = Math.abs(newLastRow - newFirstRow) + 1;
+    var newColSpan = Math.abs(newLastColumn - newFirstColumn) + 1;
+    var newArea = newRowSpan * newColSpan;
+    // Check if selections are identical
+    if (prevFirstRow === newFirstRow &&
+        prevLastRow === newLastRow &&
+        prevFirstColumn === newFirstColumn &&
+        prevLastColumn === newLastColumn) {
+        return null;
+    }
+    if (newArea > prevArea) {
+        return 'selecting';
+    }
+    else if (newArea < prevArea) {
+        return 'unselecting';
+    }
+    else {
+        // Same area but different positions
+        return 'selecting';
+    }
+    if (prevFirstColumn !== newFirstColumn ||
+        prevFirstRow !== newFirstRow ||
+        prevLastColumn !== newLastColumn ||
+        prevLastRow !== newLastRow) {
+        return 'selecting';
+    }
+    return null;
+}
+exports.getIsSelectingOrUnselecting = getIsSelectingOrUnselecting;
+//# sourceMappingURL=tableSelectionUtils.js.map

package/lib/announce/tableSelectionUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableSelectionUtils.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/announce/tableSelectionUtils.ts"],"names":[],"mappings":";;;AAEA;;;;;GAKG;AACH,SAAgB,6BAA6B,CAAC,MAA0B;IAC5D,IAAA,WAAW,GAAsB,MAAM,YAA5B,EAAE,OAAO,GAAa,MAAM,QAAnB,EAAE,MAAM,GAAK,MAAM,OAAX,CAAY;IAChD,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,IAAI,MAAM,EAAE;QACR,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YAC5C,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBAC5C,IAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACjD,IAAI,IAAI,IAAI,OAAO,IAAI,IAAI,QAAQ,EAAE;oBACjC,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;iBACxC;aACJ;SACJ;KACJ;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAhBD,sEAgBC;AAED;;;;;;;GAOG;AACH,SAAgB,2BAA2B,CACvC,kBAAyC,EACzC,iBAAiC;IAEjC,IAAI,CAAC,kBAAkB,EAAE;QACrB,OAAO,WAAW,CAAC;KACtB;IAGG,IAAU,YAAY,GAItB,kBAAkB,SAJI,EACb,WAAW,GAGpB,kBAAkB,QAHE,EACP,eAAe,GAE5B,kBAAkB,YAFU,EAChB,cAAc,GAC1B,kBAAkB,WADQ,CACP;IAGnB,IAAU,WAAW,GAIrB,iBAAiB,SAJI,EACZ,UAAU,GAGnB,iBAAiB,QAHE,EACN,cAAc,GAE3B,iBAAiB,YAFU,EACf,aAAa,GACzB,iBAAiB,WADQ,CACP;IAEtB,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAC7D,IAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;IACnE,IAAM,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;IAE3C,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAC1D,IAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IAChE,IAAM,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IAExC,oCAAoC;IACpC,IACI,YAAY,KAAK,WAAW;QAC5B,WAAW,KAAK,UAAU;QAC1B,eAAe,KAAK,cAAc;QAClC,cAAc,KAAK,aAAa,EAClC;QACE,OAAO,IAAI,CAAC;KACf;IAED,IAAI,OAAO,GAAG,QAAQ,EAAE;QACpB,OAAO,WAAW,CAAC;KACtB;SAAM,IAAI,OAAO,GAAG,QAAQ,EAAE;QAC3B,OAAO,aAAa,CAAC;KACxB;SAAM;QACH,oCAAoC;QACpC,OAAO,WAAW,CAAC;KACtB;IAED,IACI,eAAe,KAAK,cAAc;QAClC,YAAY,KAAK,WAAW;QAC5B,cAAc,KAAK,aAAa;QAChC,WAAW,KAAK,UAAU,EAC5B;QACE,OAAO,WAAW,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AAChB,CAAC;AA3DD,kEA2DC","sourcesContent":["import type { TableSelectionInfo, TableSelection } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Retrieves text content from selected table cells in a parsed table structure\n * @param tsInfo Table selection information containing the parsed table and coordinates\n * @returns Combined text content from all selected cells, separated by spaces\n */\nexport function retrieveStringFromParsedTable(tsInfo: TableSelectionInfo): string {\n    const { parsedTable, firstCo, lastCo } = tsInfo;\n    let result = '';\n\n    if (lastCo) {\n        for (let r = firstCo.row; r <= lastCo.row; r++) {\n            for (let c = firstCo.col; c <= lastCo.col; c++) {\n                const cell = parsedTable[r] && parsedTable[r][c];\n                if (cell && typeof cell != 'string') {\n                    result += ' ' + cell.innerText + ',';\n                }\n            }\n        }\n    }\n\n    return result;\n}\n\n/**\n * @internal\n * Determines whether the table selection is expanding (selecting more) or contracting (selecting less)\n * @param prevTableSelection Previous table selection object containing firstRow, lastRow, firstColumn, and lastColumn properties\n * @param firstCo Current first coordinate of the selection (with row, col properties)\n * @param lastCo Current last coordinate of the selection (with row, col properties)\n * @returns 'selecting' if expanding selection, 'unselecting' if contracting, or null if no change\n */\nexport function getIsSelectingOrUnselecting(\n    prevTableSelection: TableSelection | null,\n    newTableSelection: TableSelection\n): 'selecting' | 'unselecting' | null {\n    if (!prevTableSelection) {\n        return 'selecting';\n    }\n\n    const {\n        firstRow: prevFirstRow,\n        lastRow: prevLastRow,\n        firstColumn: prevFirstColumn,\n        lastColumn: prevLastColumn,\n    } = prevTableSelection;\n\n    const {\n        firstRow: newFirstRow,\n        lastRow: newLastRow,\n        firstColumn: newFirstColumn,\n        lastColumn: newLastColumn,\n    } = newTableSelection;\n\n    const prevRowSpan = Math.abs(prevLastRow - prevFirstRow) + 1;\n    const prevColSpan = Math.abs(prevLastColumn - prevFirstColumn) + 1;\n    const prevArea = prevRowSpan * prevColSpan;\n\n    const newRowSpan = Math.abs(newLastRow - newFirstRow) + 1;\n    const newColSpan = Math.abs(newLastColumn - newFirstColumn) + 1;\n    const newArea = newRowSpan * newColSpan;\n\n    // Check if selections are identical\n    if (\n        prevFirstRow === newFirstRow &&\n        prevLastRow === newLastRow &&\n        prevFirstColumn === newFirstColumn &&\n        prevLastColumn === newLastColumn\n    ) {\n        return null;\n    }\n\n    if (newArea > prevArea) {\n        return 'selecting';\n    } else if (newArea < prevArea) {\n        return 'unselecting';\n    } else {\n        // Same area but different positions\n        return 'selecting';\n    }\n\n    if (\n        prevFirstColumn !== newFirstColumn ||\n        prevFirstRow !== newFirstRow ||\n        prevLastColumn !== newLastColumn ||\n        prevLastRow !== newLastRow\n    ) {\n        return 'selecting';\n    }\n\n    return null;\n}\n"]}

package/lib/findReplace/FindReplacePlugin.d.ts

@@ -0,0 +1,42 @@
+import type { FindReplaceHighlightOptions } from './types/FindReplaceHighlightOptions';
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import type { FindReplaceContext } from './types/FindReplaceContext';
+/**
+ * Plugin for finding and replacing text in the editor, maintain the highlights for found and replaced text
+ */
+export declare class FindReplacePlugin implements EditorPlugin {
+    private context;
+    private editor;
+    private findHighlightStyle;
+    private replaceHighlightStyle;
+    /**
+     * Creates a FindReplacePlugin instance
+     * @param context FindReplaceContext to use. It will be disposed when plugin is being disposed.
+     * @param options Options for highlighting styles
+     */
+    constructor(context: FindReplaceContext, options?: FindReplaceHighlightOptions);
+    /**
+     * Get name of this plugin
+     */
+    getName(): string;
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    dispose(): void;
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    onPluginEvent(event: PluginEvent): void;
+}

package/lib/findReplace/FindReplacePlugin.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FindReplacePlugin = void 0;
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var updateHighlight_1 = require("./utils/updateHighlight");
+var constants_1 = require("./utils/constants");
+var DefaultFindHighlightStyle = 'background-color: yellow;';
+var DefaultReplaceHighlightStyle = 'background-color: orange;';
+/**
+ * Plugin for finding and replacing text in the editor, maintain the highlights for found and replaced text
+ */
+var FindReplacePlugin = /** @class */ (function () {
+    /**
+     * Creates a FindReplacePlugin instance
+     * @param context FindReplaceContext to use. It will be disposed when plugin is being disposed.
+     * @param options Options for highlighting styles
+     */
+    function FindReplacePlugin(context, options) {
+        var _a, _b;
+        this.context = context;
+        this.editor = null;
+        this.findHighlightStyle = (_a = options === null || options === void 0 ? void 0 : options.findHighlightStyle) !== null && _a !== void 0 ? _a : DefaultFindHighlightStyle;
+        this.replaceHighlightStyle = (_b = options === null || options === void 0 ? void 0 : options.replaceHighlightStyle) !== null && _b !== void 0 ? _b : DefaultReplaceHighlightStyle;
+    }
+    /**
+     * Get name of this plugin
+     */
+    FindReplacePlugin.prototype.getName = function () {
+        return 'FindReplace';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    FindReplacePlugin.prototype.initialize = function (editor) {
+        var _a;
+        this.editor = editor;
+        var win = (_a = editor.getDocument().defaultView) !== null && _a !== void 0 ? _a : window;
+        this.context.findHighlight.initialize(win);
+        this.context.replaceHighlight.initialize(win);
+        this.editor.setEditorStyle(constants_1.FindHighlightRuleKey, this.findHighlightStyle, [
+            constants_1.FindHighlightSelector,
+        ]);
+        this.editor.setEditorStyle(constants_1.ReplaceHighlightRuleKey, this.replaceHighlightStyle, [
+            constants_1.ReplaceHighlightSelector,
+        ]);
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    FindReplacePlugin.prototype.dispose = function () {
+        this.context.findHighlight.dispose();
+        this.context.replaceHighlight.dispose();
+        if (this.editor) {
+            this.editor.setEditorStyle(constants_1.FindHighlightRuleKey, null /*cssRule*/);
+            this.editor.setEditorStyle(constants_1.ReplaceHighlightRuleKey, null /*cssRule*/);
+            this.editor = null;
+        }
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    FindReplacePlugin.prototype.onPluginEvent = function (event) {
+        if (!this.context.text || !this.editor) {
+            return;
+        }
+        switch (event.eventType) {
+            case 'input':
+                var selection = this.editor.getDOMSelection();
+                if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range') {
+                    var block = this.editor
+                        .getDOMHelper()
+                        .findClosestBlockElement(selection.range.startContainer);
+                    (0, updateHighlight_1.updateHighlight)(this.editor, this.context, [block], [block]);
+                }
+                break;
+            case 'contentChanged':
+                if (!event.contentModel && event.source != roosterjs_content_model_dom_1.ChangeSource.Replace) {
+                    (0, updateHighlight_1.updateHighlight)(this.editor, this.context);
+                }
+                break;
+            case 'rewriteFromModel':
+                (0, updateHighlight_1.updateHighlight)(this.editor, this.context, event.addedBlockElements, event.removedBlockElements);
+                break;
+        }
+    };
+    return FindReplacePlugin;
+}());
+exports.FindReplacePlugin = FindReplacePlugin;
+//# sourceMappingURL=FindReplacePlugin.js.map

package/lib/findReplace/FindReplacePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReplacePlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/findReplace/FindReplacePlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { ChangeSource } from 'roosterjs-content-model-dom';\nimport { updateHighlight } from './utils/updateHighlight';\nimport type { FindReplaceHighlightOptions } from './types/FindReplaceHighlightOptions';\nimport {\n    FindHighlightRuleKey,\n    FindHighlightSelector,\n    ReplaceHighlightRuleKey,\n    ReplaceHighlightSelector,\n} from './utils/constants';\nimport type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';\nimport type { FindReplaceContext } from './types/FindReplaceContext';\n\nconst DefaultFindHighlightStyle = 'background-color: yellow;';\nconst DefaultReplaceHighlightStyle = 'background-color: orange;';\n\n/**\n * Plugin for finding and replacing text in the editor, maintain the highlights for found and replaced text\n */\nexport class FindReplacePlugin implements EditorPlugin {\n    private editor: IEditor | null = null;\n    private findHighlightStyle: string;\n    private replaceHighlightStyle: string;\n\n    /**\n     * Creates a FindReplacePlugin instance\n     * @param context FindReplaceContext to use. It will be disposed when plugin is being disposed.\n     * @param options Options for highlighting styles\n     */\n    constructor(private context: FindReplaceContext, options?: FindReplaceHighlightOptions) {\n        this.findHighlightStyle = options?.findHighlightStyle ?? DefaultFindHighlightStyle;\n        this.replaceHighlightStyle = options?.replaceHighlightStyle ?? DefaultReplaceHighlightStyle;\n    }\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'FindReplace';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n\n        const win = editor.getDocument().defaultView ?? window;\n\n        this.context.findHighlight.initialize(win);\n        this.context.replaceHighlight.initialize(win);\n\n        this.editor.setEditorStyle(FindHighlightRuleKey, this.findHighlightStyle, [\n            FindHighlightSelector,\n        ]);\n        this.editor.setEditorStyle(ReplaceHighlightRuleKey, this.replaceHighlightStyle, [\n            ReplaceHighlightSelector,\n        ]);\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.context.findHighlight.dispose();\n        this.context.replaceHighlight.dispose();\n\n        if (this.editor) {\n            this.editor.setEditorStyle(FindHighlightRuleKey, null /*cssRule*/);\n            this.editor.setEditorStyle(ReplaceHighlightRuleKey, null /*cssRule*/);\n\n            this.editor = null;\n        }\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (!this.context.text || !this.editor) {\n            return;\n        }\n\n        switch (event.eventType) {\n            case 'input':\n                const selection = this.editor.getDOMSelection();\n\n                if (selection?.type == 'range') {\n                    const block = this.editor\n                        .getDOMHelper()\n                        .findClosestBlockElement(selection.range.startContainer);\n\n                    updateHighlight(this.editor, this.context, [block], [block]);\n                }\n\n                break;\n            case 'contentChanged':\n                if (!event.contentModel && event.source != ChangeSource.Replace) {\n                    updateHighlight(this.editor, this.context);\n                }\n\n                break;\n\n            case 'rewriteFromModel':\n                updateHighlight(\n                    this.editor,\n                    this.context,\n                    event.addedBlockElements,\n                    event.removedBlockElements\n                );\n\n                break;\n        }\n    }\n}\n"]}

package/lib/findReplace/createFindReplaceContext.d.ts

@@ -0,0 +1,8 @@
+import type { FindReplaceContext } from './types/FindReplaceContext';
+/**
+ * Creates a FindReplaceContext object with default values
+ * @param win The window object
+ * @param scrollMargin Margin size (in pixels) when scrolling to a highlighted item
+ * @returns
+ */
+export declare function createFindReplaceContext(scrollMargin?: number): FindReplaceContext;

package/lib/findReplace/createFindReplaceContext.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createFindReplaceContext = void 0;
+var HighlightHelperImpl_1 = require("./utils/HighlightHelperImpl");
+var constants_1 = require("./utils/constants");
+/**
+ * Creates a FindReplaceContext object with default values
+ * @param win The window object
+ * @param scrollMargin Margin size (in pixels) when scrolling to a highlighted item
+ * @returns
+ */
+function createFindReplaceContext(scrollMargin) {
+    if (scrollMargin === void 0) { scrollMargin = constants_1.ScrollMargin; }
+    return {
+        text: null,
+        matchCase: false,
+        wholeWord: false,
+        ranges: [],
+        markedIndex: -1,
+        scrollMargin: scrollMargin,
+        findHighlight: (0, HighlightHelperImpl_1.createHighlightHelper)(constants_1.FindHighlightStyleKey),
+        replaceHighlight: (0, HighlightHelperImpl_1.createHighlightHelper)(constants_1.ReplaceHighlightStyleKey),
+    };
+}
+exports.createFindReplaceContext = createFindReplaceContext;
+//# sourceMappingURL=createFindReplaceContext.js.map

package/lib/findReplace/createFindReplaceContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFindReplaceContext.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/findReplace/createFindReplaceContext.ts"],"names":[],"mappings":";;;AAAA,mEAAoE;AACpE,+CAAkG;AAGlG;;;;;GAKG;AACH,SAAgB,wBAAwB,CAAC,YAAmC;IAAnC,6BAAA,EAAA,eAAuB,wBAAY;IACxE,OAAO;QACH,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,EAAE;QACV,WAAW,EAAE,CAAC,CAAC;QACf,YAAY,cAAA;QACZ,aAAa,EAAE,IAAA,2CAAqB,EAAC,iCAAqB,CAAC;QAC3D,gBAAgB,EAAE,IAAA,2CAAqB,EAAC,oCAAwB,CAAC;KACpE,CAAC;AACN,CAAC;AAXD,4DAWC","sourcesContent":["import { createHighlightHelper } from './utils/HighlightHelperImpl';\nimport { FindHighlightStyleKey, ReplaceHighlightStyleKey, ScrollMargin } from './utils/constants';\nimport type { FindReplaceContext } from './types/FindReplaceContext';\n\n/**\n * Creates a FindReplaceContext object with default values\n * @param win The window object\n * @param scrollMargin Margin size (in pixels) when scrolling to a highlighted item\n * @returns\n */\nexport function createFindReplaceContext(scrollMargin: number = ScrollMargin): FindReplaceContext {\n    return {\n        text: null,\n        matchCase: false,\n        wholeWord: false,\n        ranges: [],\n        markedIndex: -1,\n        scrollMargin,\n        findHighlight: createHighlightHelper(FindHighlightStyleKey),\n        replaceHighlight: createHighlightHelper(ReplaceHighlightStyleKey),\n    };\n}\n"]}

package/lib/findReplace/find.d.ts

@@ -0,0 +1,11 @@
+import type { FindReplaceContext } from './types/FindReplaceContext';
+import type { IEditor } from 'roosterjs-content-model-types';
+/**
+ * Start a find operation in the editor
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param text The text to find
+ * @param matchCase Whether to match case
+ * @param wholeWord Whether to match whole words only
+ */
+export declare function find(editor: IEditor, context: FindReplaceContext, text: string | null, matchCase?: boolean, wholeWord?: boolean): void;

package/lib/findReplace/find.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.find = void 0;
+var updateHighlight_1 = require("./utils/updateHighlight");
+/**
+ * Start a find operation in the editor
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param text The text to find
+ * @param matchCase Whether to match case
+ * @param wholeWord Whether to match whole words only
+ */
+function find(editor, context, text, matchCase, wholeWord) {
+    context.text = text;
+    context.matchCase = !!matchCase;
+    context.wholeWord = !!wholeWord;
+    (0, updateHighlight_1.updateHighlight)(editor, context);
+}
+exports.find = find;
+//# sourceMappingURL=find.js.map

package/lib/findReplace/find.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/findReplace/find.ts"],"names":[],"mappings":";;;AAAA,2DAA0D;AAI1D;;;;;;;GAOG;AACH,SAAgB,IAAI,CAChB,MAAe,EACf,OAA2B,EAC3B,IAAmB,EACnB,SAAmB,EACnB,SAAmB;IAEnB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC;IAChC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC;IAEhC,IAAA,iCAAe,EAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AACrC,CAAC;AAZD,oBAYC","sourcesContent":["import { updateHighlight } from './utils/updateHighlight';\nimport type { FindReplaceContext } from './types/FindReplaceContext';\nimport type { IEditor } from 'roosterjs-content-model-types';\n\n/**\n * Start a find operation in the editor\n * @param editor The editor instance\n * @param context The FindReplaceContext to use\n * @param text The text to find\n * @param matchCase Whether to match case\n * @param wholeWord Whether to match whole words only\n */\nexport function find(\n    editor: IEditor,\n    context: FindReplaceContext,\n    text: string | null,\n    matchCase?: boolean,\n    wholeWord?: boolean\n): void {\n    context.text = text;\n    context.matchCase = !!matchCase;\n    context.wholeWord = !!wholeWord;\n\n    updateHighlight(editor, context);\n}\n"]}

package/lib/findReplace/moveHighlight.d.ts

@@ -0,0 +1,9 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type { FindReplaceContext } from './types/FindReplaceContext';
+/**
+ * Move the highlight to next or previous match
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param forward Whether to move forward or backward
+ */
+export declare function moveHighlight(editor: IEditor, context: FindReplaceContext, forward: boolean): void;

package/lib/findReplace/moveHighlight.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.moveHighlight = void 0;
+var setMarkedIndex_1 = require("./utils/setMarkedIndex");
+/**
+ * Move the highlight to next or previous match
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param forward Whether to move forward or backward
+ */
+function moveHighlight(editor, context, forward) {
+    if (context.ranges.length > 0) {
+        var newIndex = !forward && context.markedIndex == -1
+            ? context.ranges.length - 1
+            : (context.markedIndex + (forward ? 1 : -1) + context.ranges.length) %
+                context.ranges.length;
+        (0, setMarkedIndex_1.setMarkedIndex)(editor, context, newIndex);
+    }
+}
+exports.moveHighlight = moveHighlight;
+//# sourceMappingURL=moveHighlight.js.map

package/lib/findReplace/moveHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moveHighlight.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/findReplace/moveHighlight.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAIxD;;;;;GAKG;AACH,SAAgB,aAAa,CAAC,MAAe,EAAE,OAA2B,EAAE,OAAgB;IACxF,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;QAC3B,IAAM,QAAQ,GACV,CAAC,OAAO,IAAI,OAAO,CAAC,WAAW,IAAI,CAAC,CAAC;YACjC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;YAC3B,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QAEhC,IAAA,+BAAc,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;KAC7C;AACL,CAAC;AAVD,sCAUC","sourcesContent":["import { setMarkedIndex } from './utils/setMarkedIndex';\nimport type { IEditor } from 'roosterjs-content-model-types';\nimport type { FindReplaceContext } from './types/FindReplaceContext';\n\n/**\n * Move the highlight to next or previous match\n * @param editor The editor instance\n * @param context The FindReplaceContext to use\n * @param forward Whether to move forward or backward\n */\nexport function moveHighlight(editor: IEditor, context: FindReplaceContext, forward: boolean) {\n    if (context.ranges.length > 0) {\n        const newIndex =\n            !forward && context.markedIndex == -1\n                ? context.ranges.length - 1\n                : (context.markedIndex + (forward ? 1 : -1) + context.ranges.length) %\n                  context.ranges.length;\n\n        setMarkedIndex(editor, context, newIndex);\n    }\n}\n"]}

package/lib/findReplace/replace.d.ts

@@ -0,0 +1,10 @@
+import type { IEditor } from 'roosterjs-content-model-types';
+import type { FindReplaceContext } from './types/FindReplaceContext';
+/**
+ * Replace the currently found item or all found items in the editor
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param replaceText The text to replace with
+ * @param replaceAll Whether to replace all found items
+ */
+export declare function replace(editor: IEditor, context: FindReplaceContext, replaceText: string, replaceAll?: boolean): void;

package/lib/findReplace/replace.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.replace = void 0;
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var replaceTextInRange_1 = require("./utils/replaceTextInRange");
+var setMarkedIndex_1 = require("./utils/setMarkedIndex");
+/**
+ * Replace the currently found item or all found items in the editor
+ * @param editor The editor instance
+ * @param context The FindReplaceContext to use
+ * @param replaceText The text to replace with
+ * @param replaceAll Whether to replace all found items
+ */
+function replace(editor, context, replaceText, replaceAll) {
+    if (replaceAll === void 0) { replaceAll = false; }
+    if (context.text) {
+        editor.takeSnapshot();
+        var isReplaced = false;
+        do {
+            var range = context.ranges[context.markedIndex];
+            if (!range || !editor.getDOMHelper().isNodeInEditor(range.startContainer)) {
+                (0, setMarkedIndex_1.setMarkedIndex)(editor, context, 0);
+            }
+            else {
+                var resultRange = (0, replaceTextInRange_1.replaceTextInRange)(range, replaceText, context.ranges);
+                context.ranges.splice(context.markedIndex, 1);
+                (0, setMarkedIndex_1.setMarkedIndex)(editor, context, context.markedIndex >= context.ranges.length ? 0 : context.markedIndex, resultRange);
+                isReplaced = true;
+            }
+        } while (replaceAll && context.ranges[context.markedIndex]);
+        context.findHighlight.clear();
+        if (context.ranges.length > 0) {
+            context.findHighlight.addRanges(context.ranges);
+        }
+        if (isReplaced) {
+            editor.takeSnapshot();
+            editor.triggerEvent('contentChanged', {
+                data: replaceText,
+                source: roosterjs_content_model_dom_1.ChangeSource.Replace,
+            });
+        }
+    }
+    else {
+        (0, setMarkedIndex_1.setMarkedIndex)(editor, context, -1);
+    }
+}
+exports.replace = replace;
+//# sourceMappingURL=replace.js.map

package/lib/findReplace/replace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"replace.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/findReplace/replace.ts"],"names":[],"mappings":";;;AAAA,2EAA2D;AAC3D,iEAAgE;AAChE,yDAAwD;AAIxD;;;;;;GAMG;AACH,SAAgB,OAAO,CACnB,MAAe,EACf,OAA2B,EAC3B,WAAmB,EACnB,UAA2B;IAA3B,2BAAA,EAAA,kBAA2B;IAE3B,IAAI,OAAO,CAAC,IAAI,EAAE;QACd,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,GAAG;YACC,IAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;YAElD,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;gBACvE,IAAA,+BAAc,EAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;aACtC;iBAAM;gBACH,IAAM,WAAW,GAAG,IAAA,uCAAkB,EAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;gBAE3E,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;gBAC9C,IAAA,+BAAc,EACV,MAAM,EACN,OAAO,EACP,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,EACtE,WAAW,CACd,CAAC;gBAEF,UAAU,GAAG,IAAI,CAAC;aACrB;SACJ,QAAQ,UAAU,IAAI,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QAE5D,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAE9B,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;SACnD;QAED,IAAI,UAAU,EAAE;YACZ,MAAM,CAAC,YAAY,EAAE,CAAC;YACtB,MAAM,CAAC,YAAY,CAAC,gBAAgB,EAAE;gBAClC,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,0CAAY,CAAC,OAAO;aAC/B,CAAC,CAAC;SACN;KACJ;SAAM;QACH,IAAA,+BAAc,EAAC,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;KACvC;AACL,CAAC;AA9CD,0BA8CC","sourcesContent":["import { ChangeSource } from 'roosterjs-content-model-dom';\nimport { replaceTextInRange } from './utils/replaceTextInRange';\nimport { setMarkedIndex } from './utils/setMarkedIndex';\nimport type { IEditor } from 'roosterjs-content-model-types';\nimport type { FindReplaceContext } from './types/FindReplaceContext';\n\n/**\n * Replace the currently found item or all found items in the editor\n * @param editor The editor instance\n * @param context The FindReplaceContext to use\n * @param replaceText The text to replace with\n * @param replaceAll Whether to replace all found items\n */\nexport function replace(\n    editor: IEditor,\n    context: FindReplaceContext,\n    replaceText: string,\n    replaceAll: boolean = false\n): void {\n    if (context.text) {\n        editor.takeSnapshot();\n        let isReplaced = false;\n\n        do {\n            const range = context.ranges[context.markedIndex];\n\n            if (!range || !editor.getDOMHelper().isNodeInEditor(range.startContainer)) {\n                setMarkedIndex(editor, context, 0);\n            } else {\n                const resultRange = replaceTextInRange(range, replaceText, context.ranges);\n\n                context.ranges.splice(context.markedIndex, 1);\n                setMarkedIndex(\n                    editor,\n                    context,\n                    context.markedIndex >= context.ranges.length ? 0 : context.markedIndex,\n                    resultRange\n                );\n\n                isReplaced = true;\n            }\n        } while (replaceAll && context.ranges[context.markedIndex]);\n\n        context.findHighlight.clear();\n\n        if (context.ranges.length > 0) {\n            context.findHighlight.addRanges(context.ranges);\n        }\n\n        if (isReplaced) {\n            editor.takeSnapshot();\n            editor.triggerEvent('contentChanged', {\n                data: replaceText,\n                source: ChangeSource.Replace,\n            });\n        }\n    } else {\n        setMarkedIndex(editor, context, -1);\n    }\n}\n"]}

package/lib/findReplace/types/FindReplaceContext.d.ts

@@ -0,0 +1,38 @@
+import type { HighlightHelper } from './HighlightHelper';
+/**
+ * Represents a context object used by all find/replace operations
+ */
+export interface FindReplaceContext {
+    /**
+     * Text to find (null means no find)
+     */
+    text: string | null;
+    /**
+     * Whether to match case when finding text
+     */
+    matchCase: boolean;
+    /**
+     * Whether to match whole word when finding text
+     */
+    wholeWord: boolean;
+    /**
+     * Ranges of found results
+     */
+    ranges: Range[];
+    /**
+     * Current marked index in the ranges array
+     */
+    markedIndex: number;
+    /**
+     * Margin size (in pixels) when scrolling to a highlighted item
+     */
+    readonly scrollMargin: number;
+    /**
+     * Highlight helper used to highlight found results
+     */
+    readonly findHighlight: HighlightHelper;
+    /**
+     * Highlight helper used to highlight the current marked result
+     */
+    readonly replaceHighlight: HighlightHelper;
+}

package/lib/findReplace/types/FindReplaceContext.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=FindReplaceContext.js.map

package/lib/findReplace/types/FindReplaceContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReplaceContext.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/findReplace/types/FindReplaceContext.ts"],"names":[],"mappings":"","sourcesContent":["import type { HighlightHelper } from './HighlightHelper';\n\n/**\n * Represents a context object used by all find/replace operations\n */\nexport interface FindReplaceContext {\n    /**\n     * Text to find (null means no find)\n     */\n    text: string | null;\n\n    /**\n     * Whether to match case when finding text\n     */\n    matchCase: boolean;\n\n    /**\n     * Whether to match whole word when finding text\n     */\n    wholeWord: boolean;\n\n    /**\n     * Ranges of found results\n     */\n    ranges: Range[];\n\n    /**\n     * Current marked index in the ranges array\n     */\n    markedIndex: number;\n\n    /**\n     * Margin size (in pixels) when scrolling to a highlighted item\n     */\n    readonly scrollMargin: number;\n\n    /**\n     * Highlight helper used to highlight found results\n     */\n    readonly findHighlight: HighlightHelper;\n\n    /**\n     * Highlight helper used to highlight the current marked result\n     */\n    readonly replaceHighlight: HighlightHelper;\n}\n"]}

package/lib/findReplace/types/FindReplaceHighlightOptions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Options for creating FindReplaceContext
+ */
+export interface FindReplaceHighlightOptions {
+    /**
+     * Style for highlighting found items
+     */
+    findHighlightStyle?: string;
+    /**
+     * Style for highlighting replacing items
+     */
+    replaceHighlightStyle?: string;
+}

package/lib/findReplace/types/FindReplaceHighlightOptions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=FindReplaceHighlightOptions.js.map

package/lib/findReplace/types/FindReplaceHighlightOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReplaceHighlightOptions.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/findReplace/types/FindReplaceHighlightOptions.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Options for creating FindReplaceContext\n */\nexport interface FindReplaceHighlightOptions {\n    /**\n     * Style for highlighting found items\n     */\n    findHighlightStyle?: string;\n\n    /**\n     * Style for highlighting replacing items\n     */\n    replaceHighlightStyle?: string;\n}\n"]}