roosterjs-content-model-plugins 9.1.0 → 9.2.0

package/lib-amd/markdown/utils/setFormat.js

@@ -15,16 +15,18 @@ define(["require", "exports", "tslib", "roosterjs-content-model-api", "../../plu
                     var firstCharIndex = previousSegment.text
                         .substring(0, lastCharIndex - 1)
                         .lastIndexOf(character);
-                    var formattedText = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, firstCharIndex, lastCharIndex);
-                    formattedText.text = formattedText.text.replace(character, '').slice(0, -1);
-                    formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
-                    if (codeFormat) {
-                        formattedText.code = {
-                            format: codeFormat,
-                        };
+                    if (lastCharIndex - firstCharIndex > 2) {
+                        var formattedText = (0, splitTextSegment_1.splitTextSegment)(previousSegment, paragraph, firstCharIndex, lastCharIndex);
+                        formattedText.text = formattedText.text.replace(character, '').slice(0, -1);
+                        formattedText.format = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, formattedText.format), format);
+                        if (codeFormat) {
+                            formattedText.code = {
+                                format: codeFormat,
+                            };
+                        }
+                        context.canUndoByBackspace = true;
+                        return true;
                     }
-                    context.canUndoByBackspace = true;
-                    return true;
                 }
             }
             return false;

package/lib-amd/markdown/utils/setFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"setFormat.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACH,SAAgB,SAAS,CACrB,MAAe,EACf,SAAiB,EACjB,MAAiC,EACjC,UAAmC;QAEnC,IAAA,oEAAsC,EAClC,MAAM,EACN,UAAC,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO;YACtD,IAAI,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,EAAE;gBACpE,IAAM,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAC3D,OAAO,CAAC,gBAAgB,mDACjB,YAAY,KACf,aAAa,EAAE,CAAC,CAAC,YAAY,CAAC,aAAa,EAC3C,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,MAAM,EAC7B,UAAU,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC5D,CAAC;gBACF,IAAI,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE;oBAC1C,IAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;oBAClD,IAAM,cAAc,GAAG,eAAe,CAAC,IAAI;yBACtC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,CAAC,CAAC;yBAC/B,WAAW,CAAC,SAAS,CAAC,CAAC;oBAE5B,IAAM,aAAa,GAAG,IAAA,mCAAgB,EAClC,eAAe,EACf,SAAS,EACT,cAAc,EACd,aAAa,CAChB,CAAC;oBAEF,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBAC5E,aAAa,CAAC,MAAM,mDACb,aAAa,CAAC,MAAM,GACpB,MAAM,CACZ,CAAC;oBACF,IAAI,UAAU,EAAE;wBACZ,aAAa,CAAC,IAAI,GAAG;4BACjB,MAAM,EAAE,UAAU;yBACrB,CAAC;qBACL;oBAED,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC;oBAClC,OAAO,IAAI,CAAC;iBACf;aACJ;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CACJ,CAAC;IACN,CAAC;IAhDD,8BAgDC","sourcesContent":["import { formatTextSegmentBeforeSelectionMarker } from 'roosterjs-content-model-api';\nimport { splitTextSegment } from '../../pluginUtils/splitTextSegment';\n\nimport type {\n    ContentModelCodeFormat,\n    ContentModelSegmentFormat,\n    IEditor,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function setFormat(\n    editor: IEditor,\n    character: string,\n    format: ContentModelSegmentFormat,\n    codeFormat?: ContentModelCodeFormat\n) {\n    formatTextSegmentBeforeSelectionMarker(\n        editor,\n        (_model, previousSegment, paragraph, markerFormat, context) => {\n            if (previousSegment.text[previousSegment.text.length - 1] == character) {\n                const textBeforeMarker = previousSegment.text.slice(0, -1);\n                context.newPendingFormat = {\n                    ...markerFormat,\n                    strikethrough: !!markerFormat.strikethrough,\n                    italic: !!markerFormat.italic,\n                    fontWeight: markerFormat?.fontWeight ? 'bold' : undefined,\n                };\n                if (textBeforeMarker.indexOf(character) > -1) {\n                    const lastCharIndex = previousSegment.text.length;\n                    const firstCharIndex = previousSegment.text\n                        .substring(0, lastCharIndex - 1)\n                        .lastIndexOf(character);\n\n                    const formattedText = splitTextSegment(\n                        previousSegment,\n                        paragraph,\n                        firstCharIndex,\n                        lastCharIndex\n                    );\n\n                    formattedText.text = formattedText.text.replace(character, '').slice(0, -1);\n                    formattedText.format = {\n                        ...formattedText.format,\n                        ...format,\n                    };\n                    if (codeFormat) {\n                        formattedText.code = {\n                            format: codeFormat,\n                        };\n                    }\n\n                    context.canUndoByBackspace = true;\n                    return true;\n                }\n            }\n            return false;\n        }\n    );\n}\n"]}
+{"version":3,"file":"setFormat.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACH,SAAgB,SAAS,CACrB,MAAe,EACf,SAAiB,EACjB,MAAiC,EACjC,UAAmC;QAEnC,IAAA,oEAAsC,EAClC,MAAM,EACN,UAAC,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO;YACtD,IAAI,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,SAAS,EAAE;gBACpE,IAAM,gBAAgB,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAC3D,OAAO,CAAC,gBAAgB,mDACjB,YAAY,KACf,aAAa,EAAE,CAAC,CAAC,YAAY,CAAC,aAAa,EAC3C,MAAM,EAAE,CAAC,CAAC,YAAY,CAAC,MAAM,EAC7B,UAAU,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,UAAU,EAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC5D,CAAC;gBACF,IAAI,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE;oBAC1C,IAAM,aAAa,GAAG,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;oBAClD,IAAM,cAAc,GAAG,eAAe,CAAC,IAAI;yBACtC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,CAAC,CAAC;yBAC/B,WAAW,CAAC,SAAS,CAAC,CAAC;oBAC5B,IAAI,aAAa,GAAG,cAAc,GAAG,CAAC,EAAE;wBACpC,IAAM,aAAa,GAAG,IAAA,mCAAgB,EAClC,eAAe,EACf,SAAS,EACT,cAAc,EACd,aAAa,CAChB,CAAC;wBAEF,aAAa,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;wBAC5E,aAAa,CAAC,MAAM,mDACb,aAAa,CAAC,MAAM,GACpB,MAAM,CACZ,CAAC;wBACF,IAAI,UAAU,EAAE;4BACZ,aAAa,CAAC,IAAI,GAAG;gCACjB,MAAM,EAAE,UAAU;6BACrB,CAAC;yBACL;wBAED,OAAO,CAAC,kBAAkB,GAAG,IAAI,CAAC;wBAClC,OAAO,IAAI,CAAC;qBACf;iBACJ;aACJ;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CACJ,CAAC;IACN,CAAC;IAjDD,8BAiDC","sourcesContent":["import { formatTextSegmentBeforeSelectionMarker } from 'roosterjs-content-model-api';\nimport { splitTextSegment } from '../../pluginUtils/splitTextSegment';\n\nimport type {\n    ContentModelCodeFormat,\n    ContentModelSegmentFormat,\n    IEditor,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function setFormat(\n    editor: IEditor,\n    character: string,\n    format: ContentModelSegmentFormat,\n    codeFormat?: ContentModelCodeFormat\n) {\n    formatTextSegmentBeforeSelectionMarker(\n        editor,\n        (_model, previousSegment, paragraph, markerFormat, context) => {\n            if (previousSegment.text[previousSegment.text.length - 1] == character) {\n                const textBeforeMarker = previousSegment.text.slice(0, -1);\n                context.newPendingFormat = {\n                    ...markerFormat,\n                    strikethrough: !!markerFormat.strikethrough,\n                    italic: !!markerFormat.italic,\n                    fontWeight: markerFormat?.fontWeight ? 'bold' : undefined,\n                };\n                if (textBeforeMarker.indexOf(character) > -1) {\n                    const lastCharIndex = previousSegment.text.length;\n                    const firstCharIndex = previousSegment.text\n                        .substring(0, lastCharIndex - 1)\n                        .lastIndexOf(character);\n                    if (lastCharIndex - firstCharIndex > 2) {\n                        const formattedText = splitTextSegment(\n                            previousSegment,\n                            paragraph,\n                            firstCharIndex,\n                            lastCharIndex\n                        );\n\n                        formattedText.text = formattedText.text.replace(character, '').slice(0, -1);\n                        formattedText.format = {\n                            ...formattedText.format,\n                            ...format,\n                        };\n                        if (codeFormat) {\n                            formattedText.code = {\n                                format: codeFormat,\n                            };\n                        }\n\n                        context.canUndoByBackspace = true;\n                        return true;\n                    }\n                }\n            }\n            return false;\n        }\n    );\n}\n"]}

package/lib-amd/picker/PickerHandler.d.ts

@@ -0,0 +1,112 @@
+import type { PickerHelper } from './PickerHelper';
+import type { DOMInsertPoint } from 'roosterjs-content-model-types';
+/**
+ * Direction option for picker
+ */
+export declare type PickerDirection = 
+/**
+ * Show options horizontally
+ */
+'horizontal'
+/**
+ * Show options vertically
+ */
+ | 'vertical'
+/**
+ * Show options in both direction (2-D picker)
+ */
+ | 'both';
+/**
+ * Change mode that PickerPlugin will pass to child class
+ */
+export declare type PickerSelectionChangMode = 
+/**
+ * When user press Right ("horizontal" mode or "both" mode) (Left in RTL) or Down ("vertical" mode),
+ * select the next option
+ */
+'next'
+/**
+ * When user press Left ("horizontal" mode or "both" mode) (Right in RTL) or Up ("vertical" mode),
+ * select the previous option
+ */
+ | 'previous'
+/**
+ * When user press Down ("both" mode),
+ * select the next row
+ */
+ | 'nextRow'
+/**
+ * When user press Up ("both" mode),
+ * select the previous row
+ */
+ | 'previousRow'
+/**
+ * When user press PageDown,
+ * switch to next page
+ */
+ | 'nextPage'
+/**
+ * When user press PageUp,
+ * switch to previous page
+ */
+ | 'previousPage'
+/**
+ * When user press Home,
+ * Select the first item in current row
+ */
+ | 'firstInRow'
+/**
+ * When user press End,
+ * Select the last item in current row
+ */
+ | 'lastInRow'
+/**
+ * When user press CTRL (or META on Mac) + Home,
+ * Select the very first item
+ */
+ | 'first'
+/**
+ * When user press CTRL (or META on Mac) + End,
+ * Select the very last item
+ */
+ | 'last';
+/**
+ * Represents the interface a handler for picker plugin. Developer need to implement this interface to create a new type of picker
+ */
+export interface PickerHandler {
+    /**
+     * Initialize the picker handler, pass in editor and PickerPlugin instance so that the handler can save them
+     * @param editor The editor instance
+     * @param pickerPlugin The PickerPlugin instance
+     */
+    onInitialize: (helper: PickerHelper) => void;
+    /**
+     * Dispose the picker handler
+     */
+    onDispose: () => void;
+    /**
+     * Notify the picker handler that user has typed trigger character so handler should show picker now
+     * @param queryString Current query string
+     * @param insertPoint Insert point where user is typing, can be used for calculating picker position
+     * @returns A picker direction to let picker plugin know what kind of picker is opened. Picker plugin will use this value
+     * to decide how to handle keyboard event to change selection. Return null means picker is not actually opened
+     */
+    onTrigger: (queryString: string, insertPoint: DOMInsertPoint) => PickerDirection | null;
+    /**
+     * Notify the picker handler that picker should be closed now
+     */
+    onClosePicker?(): void;
+    /**
+     * Notify the picker handler that user has changed current typed query string
+     */
+    onQueryStringChanged?(queryString: string): void;
+    /**
+     * Notify the picker handler that user has decide to select the current option in picker
+     */
+    onSelect?(): void;
+    /**
+     * Notify the picker handler that user is using keyboard to change current selection
+     * @param mode The moving mode. Handler code can use this value to decide which item need to be selected
+     */
+    onSelectionChanged?(mode: PickerSelectionChangMode): void;
+}

package/lib-amd/picker/PickerHandler.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=PickerHandler.js.map

package/lib-amd/picker/PickerHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerHandler.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/picker/PickerHandler.ts"],"names":[],"mappings":"","sourcesContent":["import type { PickerHelper } from './PickerHelper';\nimport type { DOMInsertPoint } from 'roosterjs-content-model-types';\n\n/**\n * Direction option for picker\n */\nexport type PickerDirection =\n    /**\n     * Show options horizontally\n     */\n    | 'horizontal'\n    /**\n     * Show options vertically\n     */\n    | 'vertical'\n\n    /**\n     * Show options in both direction (2-D picker)\n     */\n    | 'both';\n\n/**\n * Change mode that PickerPlugin will pass to child class\n */\nexport type PickerSelectionChangMode =\n    /**\n     * When user press Right (\"horizontal\" mode or \"both\" mode) (Left in RTL) or Down (\"vertical\" mode),\n     * select the next option\n     */\n    | 'next'\n\n    /**\n     * When user press Left (\"horizontal\" mode or \"both\" mode) (Right in RTL) or Up (\"vertical\" mode),\n     * select the previous option\n     */\n    | 'previous'\n\n    /**\n     * When user press Down (\"both\" mode),\n     * select the next row\n     */\n    | 'nextRow'\n\n    /**\n     * When user press Up (\"both\" mode),\n     * select the previous row\n     */\n    | 'previousRow'\n\n    /**\n     * When user press PageDown,\n     * switch to next page\n     */\n    | 'nextPage'\n\n    /**\n     * When user press PageUp,\n     * switch to previous page\n     */\n    | 'previousPage'\n\n    /**\n     * When user press Home,\n     * Select the first item in current row\n     */\n    | 'firstInRow'\n\n    /**\n     * When user press End,\n     * Select the last item in current row\n     */\n    | 'lastInRow'\n\n    /**\n     * When user press CTRL (or META on Mac) + Home,\n     * Select the very first item\n     */\n    | 'first'\n\n    /**\n     * When user press CTRL (or META on Mac) + End,\n     * Select the very last item\n     */\n    | 'last';\n\n/**\n * Represents the interface a handler for picker plugin. Developer need to implement this interface to create a new type of picker\n */\nexport interface PickerHandler {\n    /**\n     * Initialize the picker handler, pass in editor and PickerPlugin instance so that the handler can save them\n     * @param editor The editor instance\n     * @param pickerPlugin The PickerPlugin instance\n     */\n    onInitialize: (helper: PickerHelper) => void;\n\n    /**\n     * Dispose the picker handler\n     */\n    onDispose: () => void;\n\n    /**\n     * Notify the picker handler that user has typed trigger character so handler should show picker now\n     * @param queryString Current query string\n     * @param insertPoint Insert point where user is typing, can be used for calculating picker position\n     * @returns A picker direction to let picker plugin know what kind of picker is opened. Picker plugin will use this value\n     * to decide how to handle keyboard event to change selection. Return null means picker is not actually opened\n     */\n    onTrigger: (queryString: string, insertPoint: DOMInsertPoint) => PickerDirection | null;\n\n    /**\n     * Notify the picker handler that picker should be closed now\n     */\n    onClosePicker?(): void;\n\n    /**\n     * Notify the picker handler that user has changed current typed query string\n     */\n    onQueryStringChanged?(queryString: string): void;\n\n    /**\n     * Notify the picker handler that user has decide to select the current option in picker\n     */\n    onSelect?(): void;\n\n    /**\n     * Notify the picker handler that user is using keyboard to change current selection\n     * @param mode The moving mode. Handler code can use this value to decide which item need to be selected\n     */\n    onSelectionChanged?(mode: PickerSelectionChangMode): void;\n}\n"]}

package/lib-amd/picker/PickerHelper.d.ts

@@ -0,0 +1,22 @@
+import type { ContentModelDocument, FormatContentModelOptions, IEditor } from 'roosterjs-content-model-types';
+/**
+ * Represents the interface of picker plugin, provides necessary utility functions for pickers
+ */
+export interface PickerHelper {
+    /**
+     * The editor instance
+     */
+    readonly editor: IEditor;
+    /**
+     * Replace the query string with a given Content Model.
+     * This is used for commit a change from picker and insert the committed content into editor.
+     * @param model The Content Model to insert
+     * @param options Options for formatting content model
+     * @param canUndoByBackspace Whether this change can be undone using Backspace key
+     */
+    replaceQueryString: (model: ContentModelDocument, options?: FormatContentModelOptions, canUndoByBackspace?: boolean) => void;
+    /**
+     * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state
+     */
+    closePicker: () => void;
+}

package/lib-amd/picker/PickerHelper.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=PickerHelper.js.map

package/lib-amd/picker/PickerHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerHelper.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/picker/PickerHelper.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n    ContentModelDocument,\n    FormatContentModelOptions,\n    IEditor,\n} from 'roosterjs-content-model-types';\n\n/**\n * Represents the interface of picker plugin, provides necessary utility functions for pickers\n */\nexport interface PickerHelper {\n    /**\n     * The editor instance\n     */\n    readonly editor: IEditor;\n\n    /**\n     * Replace the query string with a given Content Model.\n     * This is used for commit a change from picker and insert the committed content into editor.\n     * @param model The Content Model to insert\n     * @param options Options for formatting content model\n     * @param canUndoByBackspace Whether this change can be undone using Backspace key\n     */\n    replaceQueryString: (\n        model: ContentModelDocument,\n        options?: FormatContentModelOptions,\n        canUndoByBackspace?: boolean\n    ) => void;\n\n    /**\n     * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state\n     */\n    closePicker: () => void;\n}\n"]}

package/lib-amd/picker/PickerHelperImpl.d.ts

@@ -0,0 +1,25 @@
+import type { ContentModelDocument, FormatContentModelOptions, IEditor } from 'roosterjs-content-model-types';
+import type { PickerDirection, PickerHandler } from './PickerHandler';
+import type { PickerHelper } from './PickerHelper';
+/**
+ * @internal
+ */
+export declare class PickerHelperImpl implements PickerHelper {
+    readonly editor: IEditor;
+    readonly handler: PickerHandler;
+    private triggerCharacter;
+    direction: PickerDirection | null;
+    constructor(editor: IEditor, handler: PickerHandler, triggerCharacter: string);
+    /**
+     * Replace the query string with a given Content Model.
+     * This is used for commit a change from picker and insert the committed content into editor.
+     * @param model The Content Model to insert
+     * @param options Options for formatting content model
+     * @param canUndoByBackspace Whether this change can be undone using Backspace key
+     */
+    replaceQueryString(model: ContentModelDocument, options?: FormatContentModelOptions, canUndoByBackspace?: boolean): void;
+    /**
+     * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state
+     */
+    closePicker(): void;
+}

package/lib-amd/picker/PickerHelperImpl.js

@@ -0,0 +1,53 @@
+define(["require", "exports", "roosterjs-content-model-api", "./getQueryString", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_api_1, getQueryString_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PickerHelperImpl = void 0;
+    /**
+     * @internal
+     */
+    var PickerHelperImpl = /** @class */ (function () {
+        function PickerHelperImpl(editor, handler, triggerCharacter) {
+            this.editor = editor;
+            this.handler = handler;
+            this.triggerCharacter = triggerCharacter;
+            this.direction = null;
+        }
+        /**
+         * Replace the query string with a given Content Model.
+         * This is used for commit a change from picker and insert the committed content into editor.
+         * @param model The Content Model to insert
+         * @param options Options for formatting content model
+         * @param canUndoByBackspace Whether this change can be undone using Backspace key
+         */
+        PickerHelperImpl.prototype.replaceQueryString = function (model, options, canUndoByBackspace) {
+            var _this = this;
+            this.editor.focus();
+            (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(this.editor, function (target, previousSegment, paragraph, _, context) {
+                var potentialSegments = [];
+                var queryString = (0, getQueryString_1.getQueryString)(_this.triggerCharacter, paragraph, previousSegment, potentialSegments);
+                if (queryString) {
+                    potentialSegments.forEach(function (x) { return (x.isSelected = true); });
+                    (0, roosterjs_content_model_dom_1.mergeModel)(target, model, context);
+                    context.canUndoByBackspace = canUndoByBackspace;
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }, options);
+        };
+        /**
+         * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state
+         */
+        PickerHelperImpl.prototype.closePicker = function () {
+            var _a, _b;
+            if (this.direction) {
+                this.direction = null;
+                (_b = (_a = this.handler).onClosePicker) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        };
+        return PickerHelperImpl;
+    }());
+    exports.PickerHelperImpl = PickerHelperImpl;
+});
+//# sourceMappingURL=PickerHelperImpl.js.map

package/lib-amd/picker/PickerHelperImpl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerHelperImpl.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/picker/PickerHelperImpl.ts"],"names":[],"mappings":";;;;IAYA;;OAEG;IACH;QAGI,0BACoB,MAAe,EACf,OAAsB,EAC9B,gBAAwB;YAFhB,WAAM,GAAN,MAAM,CAAS;YACf,YAAO,GAAP,OAAO,CAAe;YAC9B,qBAAgB,GAAhB,gBAAgB,CAAQ;YAL7B,cAAS,GAA2B,IAAI,CAAC;QAM7C,CAAC;QAEJ;;;;;;WAMG;QACH,6CAAkB,GAAlB,UACI,KAA2B,EAC3B,OAAmC,EACnC,kBAA4B;YAHhC,iBA6BC;YAxBG,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YAEpB,IAAA,oEAAsC,EAClC,IAAI,CAAC,MAAM,EACX,UAAC,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO;gBAC3C,IAAM,iBAAiB,GAAuB,EAAE,CAAC;gBACjD,IAAM,WAAW,GAAG,IAAA,+BAAc,EAC9B,KAAI,CAAC,gBAAgB,EACrB,SAAS,EACT,eAAe,EACf,iBAAiB,CACpB,CAAC;gBAEF,IAAI,WAAW,EAAE;oBACb,iBAAiB,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,EAArB,CAAqB,CAAC,CAAC;oBACtD,IAAA,wCAAU,EAAC,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;oBACnC,OAAO,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;oBAChD,OAAO,IAAI,CAAC;iBACf;qBAAM;oBACH,OAAO,KAAK,CAAC;iBAChB;YACL,CAAC,EACD,OAAO,CACV,CAAC;QACN,CAAC;QAED;;WAEG;QACH,sCAAW,GAAX;;YACI,IAAI,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,aAAa,kDAAI,CAAC;aAClC;QACL,CAAC;QACL,uBAAC;IAAD,CAAC,AAxDD,IAwDC;IAxDY,4CAAgB","sourcesContent":["import { formatTextSegmentBeforeSelectionMarker } from 'roosterjs-content-model-api';\nimport { getQueryString } from './getQueryString';\nimport { mergeModel } from 'roosterjs-content-model-dom';\nimport type {\n    ContentModelDocument,\n    ContentModelText,\n    FormatContentModelOptions,\n    IEditor,\n} from 'roosterjs-content-model-types';\nimport type { PickerDirection, PickerHandler } from './PickerHandler';\nimport type { PickerHelper } from './PickerHelper';\n\n/**\n * @internal\n */\nexport class PickerHelperImpl implements PickerHelper {\n    public direction: PickerDirection | null = null;\n\n    constructor(\n        public readonly editor: IEditor,\n        public readonly handler: PickerHandler,\n        private triggerCharacter: string\n    ) {}\n\n    /**\n     * Replace the query string with a given Content Model.\n     * This is used for commit a change from picker and insert the committed content into editor.\n     * @param model The Content Model to insert\n     * @param options Options for formatting content model\n     * @param canUndoByBackspace Whether this change can be undone using Backspace key\n     */\n    replaceQueryString(\n        model: ContentModelDocument,\n        options?: FormatContentModelOptions,\n        canUndoByBackspace?: boolean\n    ): void {\n        this.editor.focus();\n\n        formatTextSegmentBeforeSelectionMarker(\n            this.editor,\n            (target, previousSegment, paragraph, _, context) => {\n                const potentialSegments: ContentModelText[] = [];\n                const queryString = getQueryString(\n                    this.triggerCharacter,\n                    paragraph,\n                    previousSegment,\n                    potentialSegments\n                );\n\n                if (queryString) {\n                    potentialSegments.forEach(x => (x.isSelected = true));\n                    mergeModel(target, model, context);\n                    context.canUndoByBackspace = canUndoByBackspace;\n                    return true;\n                } else {\n                    return false;\n                }\n            },\n            options\n        );\n    }\n\n    /**\n     * Notify Picker Plugin that picker is closed from the handler code, so picker plugin can quit the suggesting state\n     */\n    closePicker() {\n        if (this.direction) {\n            this.direction = null;\n            this.handler.onClosePicker?.();\n        }\n    }\n}\n"]}

package/lib-amd/picker/PickerPlugin.d.ts

@@ -0,0 +1,54 @@
+import type { PickerHandler } from './PickerHandler';
+import type { EditorPlugin, IEditor, PluginEvent } from 'roosterjs-content-model-types';
+/**
+ * PickerPlugin represents a plugin of editor which can handle picker related behaviors, including
+ * - Show picker when special trigger key is pressed
+ * - Hide picker
+ * - Change selection in picker by Up/Down/Left/Right
+ * - Apply selected item in picker
+ *
+ * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.
+ */
+export declare class PickerPlugin implements EditorPlugin {
+    private triggerCharacter;
+    private readonly handler;
+    private isMac;
+    private lastQueryString;
+    private helper;
+    /**
+     * Construct a new instance of PickerPlugin class
+     * @param triggerCharacter The character to trigger a picker to be shown
+     * @param handler Picker handler for receiving picker state change events
+     */
+    constructor(triggerCharacter: string, handler: PickerHandler);
+    /**
+     * Get a friendly name
+     */
+    getName(): string;
+    /**
+     * Initialize this plugin. This should only be called from Editor
+     * @param editor Editor instance
+     */
+    initialize(editor: IEditor): void;
+    /**
+     * Dispose this plugin
+     */
+    dispose(): void;
+    /**
+     * Check if the plugin should handle the given event exclusively.
+     * Handle an event exclusively means other plugin will not receive this event in
+     * onPluginEvent method.
+     * If two plugins will return true in willHandleEventExclusively() for the same event,
+     * the final result depends on the order of the plugins are added into editor
+     * @param event The event to check
+     */
+    willHandleEventExclusively(event: PluginEvent): boolean;
+    /**
+     * Handle events triggered from editor
+     * @param event PluginEvent object
+     */
+    onPluginEvent(event: PluginEvent): void;
+    private onSuggestingKeyDown;
+    private onSuggestingInput;
+    private onInput;
+}

package/lib-amd/picker/PickerPlugin.js

@@ -0,0 +1,215 @@
+define(["require", "exports", "roosterjs-content-model-dom", "roosterjs-content-model-api", "./getQueryString", "./PickerHelperImpl"], function (require, exports, roosterjs_content_model_dom_1, roosterjs_content_model_api_1, getQueryString_1, PickerHelperImpl_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.PickerPlugin = void 0;
+    /**
+     * PickerPlugin represents a plugin of editor which can handle picker related behaviors, including
+     * - Show picker when special trigger key is pressed
+     * - Hide picker
+     * - Change selection in picker by Up/Down/Left/Right
+     * - Apply selected item in picker
+     *
+     * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.
+     */
+    var PickerPlugin = /** @class */ (function () {
+        /**
+         * Construct a new instance of PickerPlugin class
+         * @param triggerCharacter The character to trigger a picker to be shown
+         * @param handler Picker handler for receiving picker state change events
+         */
+        function PickerPlugin(triggerCharacter, handler) {
+            this.triggerCharacter = triggerCharacter;
+            this.handler = handler;
+            this.isMac = false;
+            this.lastQueryString = '';
+            this.helper = null;
+        }
+        /**
+         * Get a friendly name
+         */
+        PickerPlugin.prototype.getName = function () {
+            return 'Picker';
+        };
+        /**
+         * Initialize this plugin. This should only be called from Editor
+         * @param editor Editor instance
+         */
+        PickerPlugin.prototype.initialize = function (editor) {
+            this.isMac = !!editor.getEnvironment().isMac;
+            this.helper = new PickerHelperImpl_1.PickerHelperImpl(editor, this.handler, this.triggerCharacter);
+            this.handler.onInitialize(this.helper);
+        };
+        /**
+         * Dispose this plugin
+         */
+        PickerPlugin.prototype.dispose = function () {
+            this.handler.onDispose();
+            this.helper = null;
+        };
+        /**
+         * Check if the plugin should handle the given event exclusively.
+         * Handle an event exclusively means other plugin will not receive this event in
+         * onPluginEvent method.
+         * If two plugins will return true in willHandleEventExclusively() for the same event,
+         * the final result depends on the order of the plugins are added into editor
+         * @param event The event to check
+         */
+        PickerPlugin.prototype.willHandleEventExclusively = function (event) {
+            var _a;
+            return (!!((_a = this.helper) === null || _a === void 0 ? void 0 : _a.direction) &&
+                event.eventType == 'keyDown' &&
+                ((0, roosterjs_content_model_dom_1.isCursorMovingKey)(event.rawEvent) ||
+                    event.rawEvent.key == 'Enter' ||
+                    event.rawEvent.key == 'Tab' ||
+                    event.rawEvent.key == 'Escape'));
+        };
+        /**
+         * Handle events triggered from editor
+         * @param event PluginEvent object
+         */
+        PickerPlugin.prototype.onPluginEvent = function (event) {
+            if (!this.helper) {
+                return;
+            }
+            switch (event.eventType) {
+                case 'contentChanged':
+                    if (this.helper.direction) {
+                        if (event.source == roosterjs_content_model_dom_1.ChangeSource.SetContent) {
+                            this.helper.closePicker();
+                        }
+                        else {
+                            this.onSuggestingInput(this.helper);
+                        }
+                    }
+                    break;
+                case 'keyDown':
+                    if (this.helper.direction) {
+                        this.onSuggestingKeyDown(this.helper, event.rawEvent);
+                    }
+                    break;
+                case 'input':
+                    if (this.helper.direction) {
+                        this.onSuggestingInput(this.helper);
+                    }
+                    else {
+                        this.onInput(this.helper, event.rawEvent);
+                    }
+                    break;
+                case 'mouseUp':
+                    if (this.helper.direction) {
+                        this.helper.closePicker();
+                    }
+                    break;
+            }
+        };
+        PickerPlugin.prototype.onSuggestingKeyDown = function (helper, event) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    if (helper.direction == 'horizontal' || helper.direction == 'both') {
+                        var isIncrement = event.key == 'ArrowRight';
+                        if (helper.editor.getDOMHelper().isRightToLeft()) {
+                            isIncrement = !isIncrement;
+                        }
+                        (_b = (_a = this.handler).onSelectionChanged) === null || _b === void 0 ? void 0 : _b.call(_a, isIncrement ? 'next' : 'previous');
+                    }
+                    event.preventDefault();
+                    break;
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    {
+                        var isIncrement = event.key == 'ArrowDown';
+                        if (helper.direction != 'horizontal') {
+                            (_d = (_c = this.handler).onSelectionChanged) === null || _d === void 0 ? void 0 : _d.call(_c, helper.direction == 'both'
+                                ? isIncrement
+                                    ? 'nextRow'
+                                    : 'previousRow'
+                                : isIncrement
+                                    ? 'next'
+                                    : 'previous');
+                        }
+                    }
+                    event.preventDefault();
+                    break;
+                case 'PageUp':
+                case 'PageDown':
+                    (_f = (_e = this.handler).onSelectionChanged) === null || _f === void 0 ? void 0 : _f.call(_e, event.key == 'PageDown' ? 'nextPage' : 'previousPage');
+                    event.preventDefault();
+                    break;
+                case 'Home':
+                case 'End':
+                    var hasCtrl = this.isMac ? event.metaKey : event.ctrlKey;
+                    (_h = (_g = this.handler).onSelectionChanged) === null || _h === void 0 ? void 0 : _h.call(_g, event.key == 'Home'
+                        ? hasCtrl
+                            ? 'first'
+                            : 'firstInRow'
+                        : hasCtrl
+                            ? 'last'
+                            : 'lastInRow');
+                    event.preventDefault();
+                    break;
+                case 'Escape':
+                    helper.closePicker();
+                    event.preventDefault();
+                    break;
+                case 'Enter':
+                case 'Tab':
+                    (_k = (_j = this.handler).onSelect) === null || _k === void 0 ? void 0 : _k.call(_j);
+                    event.preventDefault();
+                    break;
+            }
+        };
+        PickerPlugin.prototype.onSuggestingInput = function (helper) {
+            var _this = this;
+            if (!(0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(helper.editor, function (_, segment, paragraph) {
+                var _a, _b;
+                var newQueryString = (0, getQueryString_1.getQueryString)(_this.triggerCharacter, paragraph, segment).replace(/[\u0020\u00A0]/g, ' ');
+                var oldQueryString = _this.lastQueryString;
+                if (newQueryString &&
+                    ((newQueryString.length >= oldQueryString.length &&
+                        newQueryString.indexOf(oldQueryString) == 0) ||
+                        (newQueryString.length < oldQueryString.length &&
+                            oldQueryString.indexOf(newQueryString) == 0))) {
+                    _this.lastQueryString = newQueryString;
+                    (_b = (_a = _this.handler).onQueryStringChanged) === null || _b === void 0 ? void 0 : _b.call(_a, newQueryString);
+                }
+                else {
+                    helper.closePicker();
+                }
+                return false;
+            })) {
+                helper.closePicker();
+            }
+        };
+        PickerPlugin.prototype.onInput = function (helper, event) {
+            var _this = this;
+            if (event.inputType == 'insertText' && event.data == this.triggerCharacter) {
+                (0, roosterjs_content_model_api_1.formatTextSegmentBeforeSelectionMarker)(helper.editor, function (_, segment) {
+                    if (segment.text.endsWith(_this.triggerCharacter)) {
+                        var charBeforeTrigger = segment.text[segment.text.length - 2];
+                        if (!charBeforeTrigger ||
+                            !charBeforeTrigger.trim() ||
+                            (0, roosterjs_content_model_dom_1.isPunctuation)(charBeforeTrigger)) {
+                            var selection = helper.editor.getDOMSelection();
+                            var pos = (selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && selection.range.collapsed
+                                ? {
+                                    node: selection.range.startContainer,
+                                    offset: selection.range.startOffset,
+                                }
+                                : null;
+                            if (pos) {
+                                _this.lastQueryString = _this.triggerCharacter;
+                                helper.direction = _this.handler.onTrigger(_this.lastQueryString, pos);
+                            }
+                        }
+                    }
+                    return false;
+                });
+            }
+        };
+        return PickerPlugin;
+    }());
+    exports.PickerPlugin = PickerPlugin;
+});
+//# sourceMappingURL=PickerPlugin.js.map

package/lib-amd/picker/PickerPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/picker/PickerPlugin.ts"],"names":[],"mappings":";;;;IAYA;;;;;;;;OAQG;IACH;QAKI;;;;WAIG;QACH,sBAAoB,gBAAwB,EAAmB,OAAsB;YAAjE,qBAAgB,GAAhB,gBAAgB,CAAQ;YAAmB,YAAO,GAAP,OAAO,CAAe;YAT7E,UAAK,GAAY,KAAK,CAAC;YACvB,oBAAe,GAAG,EAAE,CAAC;YACrB,WAAM,GAA4B,IAAI,CAAC;QAOyC,CAAC;QAEzF;;WAEG;QACH,8BAAO,GAAP;YACI,OAAO,QAAQ,CAAC;QACpB,CAAC;QAED;;;WAGG;QACH,iCAAU,GAAV,UAAW,MAAe;YACtB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,KAAK,CAAC;YAC7C,IAAI,CAAC,MAAM,GAAG,IAAI,mCAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAChF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,CAAC;QAED;;WAEG;QACH,8BAAO,GAAP;YACI,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACvB,CAAC;QAED;;;;;;;WAOG;QACH,iDAA0B,GAA1B,UAA2B,KAAkB;;YACzC,OAAO,CACH,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS,CAAA;gBACxB,KAAK,CAAC,SAAS,IAAI,SAAS;gBAC5B,CAAC,IAAA,+CAAiB,EAAC,KAAK,CAAC,QAAQ,CAAC;oBAC9B,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,OAAO;oBAC7B,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,KAAK;oBAC3B,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC,CACtC,CAAC;QACN,CAAC;QAED;;;WAGG;QACH,oCAAa,GAAb,UAAc,KAAkB;YAC5B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;gBACd,OAAO;aACV;YAED,QAAQ,KAAK,CAAC,SAAS,EAAE;gBACrB,KAAK,gBAAgB;oBACjB,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;wBACvB,IAAI,KAAK,CAAC,MAAM,IAAI,0CAAY,CAAC,UAAU,EAAE;4BACzC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;yBAC7B;6BAAM;4BACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;yBACvC;qBACJ;oBACD,MAAM;gBAEV,KAAK,SAAS;oBACV,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;wBACvB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;qBACzD;oBACD,MAAM;gBAEV,KAAK,OAAO;oBACR,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;wBACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;qBACvC;yBAAM;wBACH,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;qBAC7C;oBACD,MAAM;gBAEV,KAAK,SAAS;oBACV,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE;wBACvB,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;qBAC7B;oBACD,MAAM;aACb;QACL,CAAC;QAEO,0CAAmB,GAA3B,UAA4B,MAAwB,EAAE,KAAoB;;YACtE,QAAQ,KAAK,CAAC,GAAG,EAAE;gBACf,KAAK,WAAW,CAAC;gBACjB,KAAK,YAAY;oBACb,IAAI,MAAM,CAAC,SAAS,IAAI,YAAY,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,EAAE;wBAChE,IAAI,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,YAAY,CAAC;wBAE5C,IAAI,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,aAAa,EAAE,EAAE;4BAC9C,WAAW,GAAG,CAAC,WAAW,CAAC;yBAC9B;wBAED,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,kBAAkB,mDAAG,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;qBACxE;oBAED,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACV,KAAK,SAAS,CAAC;gBACf,KAAK,WAAW;oBACZ;wBACI,IAAM,WAAW,GAAG,KAAK,CAAC,GAAG,IAAI,WAAW,CAAC;wBAE7C,IAAI,MAAM,CAAC,SAAS,IAAI,YAAY,EAAE;4BAClC,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,kBAAkB,mDAC3B,MAAM,CAAC,SAAS,IAAI,MAAM;gCACtB,CAAC,CAAC,WAAW;oCACT,CAAC,CAAC,SAAS;oCACX,CAAC,CAAC,aAAa;gCACnB,CAAC,CAAC,WAAW;oCACb,CAAC,CAAC,MAAM;oCACR,CAAC,CAAC,UAAU,CACnB,CAAC;yBACL;qBACJ;oBAED,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACV,KAAK,QAAQ,CAAC;gBACd,KAAK,UAAU;oBACX,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,kBAAkB,mDAC3B,KAAK,CAAC,GAAG,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CACxD,CAAC;oBAEF,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACV,KAAK,MAAM,CAAC;gBACZ,KAAK,KAAK;oBACN,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;oBAC3D,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,kBAAkB,mDAC3B,KAAK,CAAC,GAAG,IAAI,MAAM;wBACf,CAAC,CAAC,OAAO;4BACL,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,YAAY;wBAClB,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,MAAM;4BACR,CAAC,CAAC,WAAW,CACpB,CAAC;oBAEF,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBACV,KAAK,QAAQ;oBACT,MAAM,CAAC,WAAW,EAAE,CAAC;oBACrB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;gBAEV,KAAK,OAAO,CAAC;gBACb,KAAK,KAAK;oBACN,MAAA,MAAA,IAAI,CAAC,OAAO,EAAC,QAAQ,kDAAI,CAAC;oBAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,MAAM;aACb;QACL,CAAC;QAEO,wCAAiB,GAAzB,UAA0B,MAAwB;YAAlD,iBA4BC;YA3BG,IACI,CAAC,IAAA,oEAAsC,EAAC,MAAM,CAAC,MAAM,EAAE,UAAC,CAAC,EAAE,OAAO,EAAE,SAAS;;gBACzE,IAAM,cAAc,GAAG,IAAA,+BAAc,EACjC,KAAI,CAAC,gBAAgB,EACrB,SAAS,EACT,OAAO,CACV,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC;gBAClC,IAAM,cAAc,GAAG,KAAI,CAAC,eAAe,CAAC;gBAE5C,IACI,cAAc;oBACd,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,cAAc,CAAC,MAAM;wBAC5C,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;wBAC5C,CAAC,cAAc,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM;4BAC1C,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EACvD;oBACE,KAAI,CAAC,eAAe,GAAG,cAAc,CAAC;oBACtC,MAAA,MAAA,KAAI,CAAC,OAAO,EAAC,oBAAoB,mDAAG,cAAc,CAAC,CAAC;iBACvD;qBAAM;oBACH,MAAM,CAAC,WAAW,EAAE,CAAC;iBACxB;gBAED,OAAO,KAAK,CAAC;YACjB,CAAC,CAAC,EACJ;gBACE,MAAM,CAAC,WAAW,EAAE,CAAC;aACxB;QACL,CAAC;QAEO,8BAAO,GAAf,UAAgB,MAAwB,EAAE,KAAiB;YAA3D,iBA8BC;YA7BG,IAAI,KAAK,CAAC,SAAS,IAAI,YAAY,IAAI,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACxE,IAAA,oEAAsC,EAAC,MAAM,CAAC,MAAM,EAAE,UAAC,CAAC,EAAE,OAAO;oBAC7D,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAI,CAAC,gBAAgB,CAAC,EAAE;wBAC9C,IAAM,iBAAiB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;wBAEhE,IACI,CAAC,iBAAiB;4BAClB,CAAC,iBAAiB,CAAC,IAAI,EAAE;4BACzB,IAAA,2CAAa,EAAC,iBAAiB,CAAC,EAClC;4BACE,IAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC;4BAClD,IAAM,GAAG,GACL,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,KAAI,OAAO,IAAI,SAAS,CAAC,KAAK,CAAC,SAAS;gCACnD,CAAC,CAAC;oCACI,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,cAAc;oCACpC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,WAAW;iCACtC;gCACH,CAAC,CAAC,IAAI,CAAC;4BAEf,IAAI,GAAG,EAAE;gCACL,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,gBAAgB,CAAC;gCAC7C,MAAM,CAAC,SAAS,GAAG,KAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;6BACxE;yBACJ;qBACJ;oBAED,OAAO,KAAK,CAAC;gBACjB,CAAC,CAAC,CAAC;aACN;QACL,CAAC;QACL,mBAAC;IAAD,CAAC,AAvOD,IAuOC;IAvOY,oCAAY","sourcesContent":["import { ChangeSource, isCursorMovingKey, isPunctuation } from 'roosterjs-content-model-dom';\nimport { formatTextSegmentBeforeSelectionMarker } from 'roosterjs-content-model-api';\nimport { getQueryString } from './getQueryString';\nimport { PickerHelperImpl } from './PickerHelperImpl';\nimport type { PickerHandler } from './PickerHandler';\nimport type {\n    DOMInsertPoint,\n    EditorPlugin,\n    IEditor,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\n/**\n * PickerPlugin represents a plugin of editor which can handle picker related behaviors, including\n * - Show picker when special trigger key is pressed\n * - Hide picker\n * - Change selection in picker by Up/Down/Left/Right\n * - Apply selected item in picker\n *\n * PickerPlugin doesn't provide any UI, it just wraps related DOM events and invoke callback functions.\n */\nexport class PickerPlugin implements EditorPlugin {\n    private isMac: boolean = false;\n    private lastQueryString = '';\n    private helper: PickerHelperImpl | null = null;\n\n    /**\n     * Construct a new instance of PickerPlugin class\n     * @param triggerCharacter The character to trigger a picker to be shown\n     * @param handler Picker handler for receiving picker state change events\n     */\n    constructor(private triggerCharacter: string, private readonly handler: PickerHandler) {}\n\n    /**\n     * Get a friendly name\n     */\n    getName() {\n        return 'Picker';\n    }\n\n    /**\n     * Initialize this plugin. This should only be called from Editor\n     * @param editor Editor instance\n     */\n    initialize(editor: IEditor) {\n        this.isMac = !!editor.getEnvironment().isMac;\n        this.helper = new PickerHelperImpl(editor, this.handler, this.triggerCharacter);\n        this.handler.onInitialize(this.helper);\n    }\n\n    /**\n     * Dispose this plugin\n     */\n    dispose() {\n        this.handler.onDispose();\n        this.helper = null;\n    }\n\n    /**\n     * Check if the plugin should handle the given event exclusively.\n     * Handle an event exclusively means other plugin will not receive this event in\n     * onPluginEvent method.\n     * If two plugins will return true in willHandleEventExclusively() for the same event,\n     * the final result depends on the order of the plugins are added into editor\n     * @param event The event to check\n     */\n    willHandleEventExclusively(event: PluginEvent) {\n        return (\n            !!this.helper?.direction &&\n            event.eventType == 'keyDown' &&\n            (isCursorMovingKey(event.rawEvent) ||\n                event.rawEvent.key == 'Enter' ||\n                event.rawEvent.key == 'Tab' ||\n                event.rawEvent.key == 'Escape')\n        );\n    }\n\n    /**\n     * Handle events triggered from editor\n     * @param event PluginEvent object\n     */\n    onPluginEvent(event: PluginEvent) {\n        if (!this.helper) {\n            return;\n        }\n\n        switch (event.eventType) {\n            case 'contentChanged':\n                if (this.helper.direction) {\n                    if (event.source == ChangeSource.SetContent) {\n                        this.helper.closePicker();\n                    } else {\n                        this.onSuggestingInput(this.helper);\n                    }\n                }\n                break;\n\n            case 'keyDown':\n                if (this.helper.direction) {\n                    this.onSuggestingKeyDown(this.helper, event.rawEvent);\n                }\n                break;\n\n            case 'input':\n                if (this.helper.direction) {\n                    this.onSuggestingInput(this.helper);\n                } else {\n                    this.onInput(this.helper, event.rawEvent);\n                }\n                break;\n\n            case 'mouseUp':\n                if (this.helper.direction) {\n                    this.helper.closePicker();\n                }\n                break;\n        }\n    }\n\n    private onSuggestingKeyDown(helper: PickerHelperImpl, event: KeyboardEvent) {\n        switch (event.key) {\n            case 'ArrowLeft':\n            case 'ArrowRight':\n                if (helper.direction == 'horizontal' || helper.direction == 'both') {\n                    let isIncrement = event.key == 'ArrowRight';\n\n                    if (helper.editor.getDOMHelper().isRightToLeft()) {\n                        isIncrement = !isIncrement;\n                    }\n\n                    this.handler.onSelectionChanged?.(isIncrement ? 'next' : 'previous');\n                }\n\n                event.preventDefault();\n                break;\n            case 'ArrowUp':\n            case 'ArrowDown':\n                {\n                    const isIncrement = event.key == 'ArrowDown';\n\n                    if (helper.direction != 'horizontal') {\n                        this.handler.onSelectionChanged?.(\n                            helper.direction == 'both'\n                                ? isIncrement\n                                    ? 'nextRow'\n                                    : 'previousRow'\n                                : isIncrement\n                                ? 'next'\n                                : 'previous'\n                        );\n                    }\n                }\n\n                event.preventDefault();\n                break;\n            case 'PageUp':\n            case 'PageDown':\n                this.handler.onSelectionChanged?.(\n                    event.key == 'PageDown' ? 'nextPage' : 'previousPage'\n                );\n\n                event.preventDefault();\n                break;\n            case 'Home':\n            case 'End':\n                const hasCtrl = this.isMac ? event.metaKey : event.ctrlKey;\n                this.handler.onSelectionChanged?.(\n                    event.key == 'Home'\n                        ? hasCtrl\n                            ? 'first'\n                            : 'firstInRow'\n                        : hasCtrl\n                        ? 'last'\n                        : 'lastInRow'\n                );\n\n                event.preventDefault();\n                break;\n            case 'Escape':\n                helper.closePicker();\n                event.preventDefault();\n                break;\n\n            case 'Enter':\n            case 'Tab':\n                this.handler.onSelect?.();\n                event.preventDefault();\n                break;\n        }\n    }\n\n    private onSuggestingInput(helper: PickerHelperImpl) {\n        if (\n            !formatTextSegmentBeforeSelectionMarker(helper.editor, (_, segment, paragraph) => {\n                const newQueryString = getQueryString(\n                    this.triggerCharacter,\n                    paragraph,\n                    segment\n                ).replace(/[\\u0020\\u00A0]/g, ' ');\n                const oldQueryString = this.lastQueryString;\n\n                if (\n                    newQueryString &&\n                    ((newQueryString.length >= oldQueryString.length &&\n                        newQueryString.indexOf(oldQueryString) == 0) ||\n                        (newQueryString.length < oldQueryString.length &&\n                            oldQueryString.indexOf(newQueryString) == 0))\n                ) {\n                    this.lastQueryString = newQueryString;\n                    this.handler.onQueryStringChanged?.(newQueryString);\n                } else {\n                    helper.closePicker();\n                }\n\n                return false;\n            })\n        ) {\n            helper.closePicker();\n        }\n    }\n\n    private onInput(helper: PickerHelperImpl, event: InputEvent) {\n        if (event.inputType == 'insertText' && event.data == this.triggerCharacter) {\n            formatTextSegmentBeforeSelectionMarker(helper.editor, (_, segment) => {\n                if (segment.text.endsWith(this.triggerCharacter)) {\n                    const charBeforeTrigger = segment.text[segment.text.length - 2];\n\n                    if (\n                        !charBeforeTrigger ||\n                        !charBeforeTrigger.trim() ||\n                        isPunctuation(charBeforeTrigger)\n                    ) {\n                        const selection = helper.editor.getDOMSelection();\n                        const pos: DOMInsertPoint | null =\n                            selection?.type == 'range' && selection.range.collapsed\n                                ? {\n                                      node: selection.range.startContainer,\n                                      offset: selection.range.startOffset,\n                                  }\n                                : null;\n\n                        if (pos) {\n                            this.lastQueryString = this.triggerCharacter;\n                            helper.direction = this.handler.onTrigger(this.lastQueryString, pos);\n                        }\n                    }\n                }\n\n                return false;\n            });\n        }\n    }\n}\n"]}

package/lib-amd/picker/getQueryString.d.ts

@@ -0,0 +1,5 @@
+import type { ContentModelParagraph, ContentModelText } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function getQueryString(triggerCharacter: string, paragraph: ContentModelParagraph, previousSegment: ContentModelText, splittedSegmentResult?: ContentModelText[]): string;