Bump main version to 9.2.0

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -2,8 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import SampleEntityPlugin from '../plugins/SampleEntityPlugin';
 import { ApiPlaygroundPlugin } from '../sidePane/apiPlayground/ApiPlaygroundPlugin';
-import { Border, ContentModelDocument, EditorOptions } from 'roosterjs-content-model-types';
-import { Colors, EditorPlugin, IEditor, Snapshots } from 'roosterjs-content-model-types';
 import { ContentModelPanePlugin } from '../sidePane/contentModel/ContentModelPanePlugin';
 import { createEmojiPlugin } from '../roosterjsReact/emoji';
 import { createImageEditMenuProvider } from '../roosterjsReact/contextMenu/menus/createImageEditMenuProvider';
@@ -30,6 +28,7 @@ import { PresetPlugin } from '../sidePane/presets/PresetPlugin';
 import { redoButton } from '../roosterjsReact/ribbon/buttons/redoButton';
 import { registerWindowForCss, unregisterWindowForCss } from '../../utils/cssMonitor';
 import { Rooster } from '../roosterjsReact/rooster';
+import { SamplePickerPlugin } from '../plugins/SamplePickerPlugin';
 import { SidePane } from '../sidePane/SidePane';
 import { SidePanePlugin } from '../sidePane/SidePanePlugin';
 import { SnapshotPlugin } from '../sidePane/snapshot/SnapshotPlugin';
@@ -41,11 +40,18 @@ import { UpdateContentPlugin } from '../plugins/UpdateContentPlugin';
 import { WindowProvider } from '@fluentui/react/lib/WindowProvider';
 import { zoomButton } from '../demoButtons/zoomButton';
 import {
-    createContextMenuPlugin,
-    createTableEditMenuProvider,
-} from '../roosterjsReact/contextMenu';
+    Border,
+    Colors,
+    ContentModelDocument,
+    EditorOptions,
+    EditorPlugin,
+    IEditor,
+    KnownAnnounceStrings,
+    Snapshots,
+} from 'roosterjs-content-model-types';
 import {
     AutoFormatPlugin,
+    CustomReplacePlugin,
     EditPlugin,
     HyperlinkPlugin,
     MarkdownPlugin,
@@ -54,6 +60,10 @@ import {
     TableEditPlugin,
     WatermarkPlugin,
 } from 'roosterjs-content-model-plugins';
+import {
+    createContextMenuPlugin,
+    createTableEditMenuProvider,
+} from '../roosterjsReact/contextMenu';
 
 const styles = require('./MainPane.scss');
 
@@ -88,6 +98,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private ribbonPlugin: RibbonPlugin;
     private snapshotPlugin: SnapshotPlugin;
     private formatPainterPlugin: FormatPainterPlugin;
+    private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
 
     protected sidePane = React.createRef<SidePane>();
@@ -125,6 +136,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.presetPlugin = new PresetPlugin();
         this.ribbonPlugin = createRibbonPlugin();
         this.formatPainterPlugin = new FormatPainterPlugin();
+        this.samplePickerPlugin = new SamplePickerPlugin();
 
         this.state = {
             showSidePane: window.location.hash != '',
@@ -327,6 +339,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         const plugins: EditorPlugin[] = [
             this.ribbonPlugin,
             this.formatPainterPlugin,
+            this.samplePickerPlugin,
             ...this.getToggleablePlugins(),
             this.contentModelPanePlugin.getInnerRibbonPlugin(),
             this.updateContentPlugin,
@@ -356,6 +369,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                             dir={this.state.isRtl ? 'rtl' : 'ltr'}
                             knownColors={this.knownColors}
                             disableCache={this.state.initState.disableCache}
+                            announcerStringGetter={getAnnouncingString}
                         />
                     )}
                 </div>
@@ -478,6 +492,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             markdownOptions,
             autoFormatOptions,
             linkTitle,
+            customReplacements,
         } = this.state.initState;
         return [
             pluginList.autoFormat && new AutoFormatPlugin(autoFormatOptions),
@@ -500,10 +515,21 @@ export class MainPane extends React.Component<{}, MainPaneState> {
                         ? url => linkTitle.replace(UrlPlaceholder, url)
                         : linkTitle
                 ),
+            pluginList.customReplace && new CustomReplacePlugin(customReplacements),
         ].filter(x => !!x);
     }
 }
 
+const AnnounceStringMap: Record<KnownAnnounceStrings, string> = {
+    announceListItemBullet: 'Auto corrected Bullet',
+    announceListItemNumbering: 'Auto corrected {0}',
+    announceOnFocusLastCell: 'Warning, pressing tab here adds an extra row.',
+};
+
+function getAnnouncingString(key: KnownAnnounceStrings) {
+    return AnnounceStringMap[key];
+}
+
 export function mount(parent: HTMLElement) {
     ReactDOM.render(<MainPane />, parent);
 }

demo/scripts/controlsV2/plugins/SamplePickerPlugin.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { Callout } from '@fluentui/react/lib/Callout';
+import { DOMInsertPoint } from 'roosterjs-content-model-types';
+import { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
+import { mergeStyles } from '@fluentui/react/lib/Styling';
+import { ReactEditorPlugin, UIUtilities } from '../roosterjsReact/common';
+import {
+    PickerDirection,
+    PickerHandler,
+    PickerHelper,
+    PickerPlugin,
+    PickerSelectionChangMode,
+    getDOMInsertPointRect,
+} from 'roosterjs-content-model-plugins';
+import {
+    createContentModelDocument,
+    createEntity,
+    createParagraph,
+} from 'roosterjs-content-model-dom';
+
+const itemStyle = mergeStyles({
+    height: '20px',
+    margin: '4px',
+    padding: '4px',
+    minWidth: '200px',
+});
+
+const selectedItemStyle = mergeStyles({
+    backgroundColor: 'blue',
+    color: 'white',
+    fontWeight: 'bold',
+});
+
+export class SamplePickerPlugin extends PickerPlugin implements ReactEditorPlugin {
+    private pickerHandler: SamplePickerHandler;
+
+    constructor() {
+        const pickerHandler = new SamplePickerHandler();
+        super('@', pickerHandler);
+
+        this.pickerHandler = pickerHandler;
+    }
+
+    setUIUtilities(uiUtilities: UIUtilities): void {
+        this.pickerHandler.setUIUtilities(uiUtilities);
+    }
+}
+
+class SamplePickerHandler implements PickerHandler {
+    private uiUtilities: UIUtilities;
+    private index = 0;
+    private ref: IPickerMenu | null = null;
+    private queryString: string;
+    private items: IContextualMenuItem[] = [];
+    private onClose: (() => void) | null = null;
+    private helper: PickerHelper | null = null;
+
+    onInitialize(helper: PickerHelper) {
+        this.helper = helper;
+    }
+
+    onDispose() {
+        this.helper = null;
+    }
+
+    setUIUtilities(uiUtilities: UIUtilities): void {
+        this.uiUtilities = uiUtilities;
+    }
+
+    onTrigger(queryString: string, pos: DOMInsertPoint): PickerDirection | null {
+        this.index = 0;
+        this.queryString = queryString;
+        this.items = buildItems(queryString, this.index);
+
+        const rect = getDOMInsertPointRect(this.helper.editor.getDocument(), pos);
+
+        if (rect) {
+            this.onClose = this.uiUtilities.renderComponent(
+                <PickerMenu
+                    x={rect.left}
+                    y={(rect.bottom + rect.top) / 2}
+                    ref={ref => (this.ref = ref)}
+                    items={this.items}
+                />
+            );
+            return 'vertical';
+        } else {
+            return null;
+        }
+    }
+
+    onClosePicker() {
+        this.onClose?.();
+        this.onClose = null;
+    }
+
+    onSelectionChanged(mode: PickerSelectionChangMode): void {
+        switch (mode) {
+            case 'first':
+            case 'firstInRow':
+            case 'previousPage':
+                this.index = 0;
+                break;
+
+            case 'last':
+            case 'lastInRow':
+            case 'nextPage':
+                this.index = 4;
+                break;
+
+            case 'previous':
+                this.index = this.index - 1;
+
+                if (this.index < 0) {
+                    this.index = 4;
+                }
+
+                break;
+
+            case 'next':
+                this.index = (this.index + 1) % 5;
+                break;
+        }
+
+        this.items = buildItems(this.queryString, this.index);
+        this.ref?.setMenuItems(this.items);
+    }
+
+    onSelect(): void {
+        const text = this.items[this.index]?.text;
+
+        if (text) {
+            const span = this.helper.editor.getDocument().createElement('span');
+            span.textContent = '@' + text;
+            span.style.textDecoration = 'underline';
+            span.style.color = 'blue';
+
+            const entity = createEntity(span, true /*isReadonly*/, {}, 'TEST_ENTITY');
+            const paragraph = createParagraph();
+            const doc = createContentModelDocument();
+
+            paragraph.segments.push(entity);
+            doc.blocks.push(paragraph);
+
+            this.helper.replaceQueryString(
+                doc,
+                {
+                    changeSource: 'SamplePicker',
+                },
+                true /*canUndoByBackspace*/
+            );
+        }
+
+        this.onClose?.();
+        this.onClose = null;
+        this.ref = null;
+        this.helper.closePicker();
+    }
+
+    onQueryStringChanged(queryString: string): void {
+        this.queryString = queryString;
+
+        if (queryString.length > 100 || queryString.split(' ').length > 4) {
+            // Querystring is too long, so close picker
+            this.helper.closePicker();
+        } else {
+            this.items = buildItems(this.queryString, this.index);
+            this.ref?.setMenuItems(this.items);
+        }
+    }
+}
+
+function buildItems(queryString: string, index: number): IContextualMenuItem[] {
+    return [1, 2, 3, 4, 5].map((x, i) => ({
+        key: 'item' + i,
+        text: queryString.substring(1) + ' item ' + x,
+        checked: i == index,
+    }));
+}
+
+interface IPickerMenu {
+    setMenuItems: (items: IContextualMenuItem[]) => void;
+}
+
+const PickerMenu = React.forwardRef(
+    (
+        props: { x: number; y: number; items: IContextualMenuItem[] },
+        ref: React.Ref<IPickerMenu>
+    ) => {
+        const [items, setItems] = React.useState<IContextualMenuItem[]>(props.items);
+
+        React.useImperativeHandle(ref, () => ({
+            setMenuItems: setItems,
+        }));
+
+        return (
+            <Callout target={{ left: props.x, top: props.y }} isBeakVisible={false} gapSpace={10}>
+                {items.map(item => (
+                    <div className={itemStyle + (item.checked ? ' ' + selectedItemStyle : '')}>
+                        {item.text}
+                    </div>
+                ))}
+            </Callout>
+        );
+    }
+);

demo/scripts/controlsV2/plugins/createLegacyPlugins.ts

@@ -1,5 +1,5 @@
-import { Announce, CustomReplace, ImageEdit } from 'roosterjs-editor-plugins';
-import { EditorPlugin as LegacyEditorPlugin, KnownAnnounceStrings } from 'roosterjs-editor-types';
+import { EditorPlugin as LegacyEditorPlugin } from 'roosterjs-editor-types';
+import { ImageEdit } from 'roosterjs-editor-plugins';
 import { LegacyPluginList, OptionState } from '../sidePane/editorOptions/OptionState';
 
 export function createLegacyPlugins(initState: OptionState): LegacyEditorPlugin[] {
@@ -12,20 +12,7 @@ export function createLegacyPlugins(initState: OptionState): LegacyEditorPlugin[
                   applyChangesOnMouseUp: initState.applyChangesOnMouseUp,
               })
             : null,
-        customReplace: pluginList.customReplace ? new CustomReplace() : null,
-        announce: pluginList.announce ? new Announce(getDefaultStringsMap()) : null,
     };
 
     return Object.values(plugins).filter(x => !!x);
 }
-
-function getDefaultStringsMap(): Map<KnownAnnounceStrings, string> {
-    return new Map<KnownAnnounceStrings, string>([
-        [KnownAnnounceStrings.AnnounceListItemBullet, 'Autocorrected Bullet'],
-        [KnownAnnounceStrings.AnnounceListItemNumbering, 'Autocorrected {0}'],
-        [
-            KnownAnnounceStrings.AnnounceOnFocusLastCell,
-            'Warning, pressing tab here adds an extra row.',
-        ],
-    ]);
-}

demo/scripts/controlsV2/roosterjsReact/pasteOptions/component/showPasteOptionPane.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { ButtonKeys, Buttons } from '../utils/buttons';
 import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
+import { getDOMInsertPointRect } from 'roosterjs-content-model-plugins';
 import { getLocalizedString } from '../../common/index';
 import { getObjectKeys } from 'roosterjs-content-model-dom';
-import { getPositionRect } from '../utils/getPositionRect';
 import { Icon } from '@fluentui/react/lib/Icon';
 import { IconButton } from '@fluentui/react/lib/Button';
 import { memoizeFunction } from '@fluentui/react/lib/Utilities';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { renderReactComponent } from '../../common/utils/renderReactComponent';
 import { useTheme } from '@fluentui/react/lib/Theme';
+import { useWindow } from '@fluentui/react/lib/WindowProvider';
 import type { LocalizedStrings, UIUtilities } from '../../common/index';
 import type { Theme } from '@fluentui/react/lib/Theme';
 import type { PasteOptionButtonKeys, PasteOptionStringKeys } from '../type/PasteOptionStringKeys';
@@ -106,7 +107,7 @@ const PasteOptionComponent = React.forwardRef(function PasteOptionFunc(
     const classNames = getPasteOptionClassNames(theme);
     const [selectedKey, setSelectedKey] = React.useState<PasteOptionButtonKeys | null>(null);
 
-    const rect = getPositionRect(container, offset);
+    const rect = getDOMInsertPointRect(useWindow().document, { node: container, offset });
     const target = rect && { x: props.isRtl ? rect.left : rect.right, y: rect.bottom };
 
     React.useImperativeHandle(

demo/scripts/controlsV2/roosterjsReact/rooster/component/Rooster.tsx

@@ -53,7 +53,14 @@ export function Rooster(props: RoosterProps) {
     }, [inDarkMode]);
 
     const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);
-    return <div ref={editorDiv} tabIndex={0} {...(divProps || {})}></div>;
+    return (
+        <div
+            ref={editorDiv}
+            tabIndex={0}
+            role="textbox"
+            aria-multiline="true"
+            {...(divProps || {})}></div>
+    );
 }
 
 function defaultEditorCreator(div: HTMLDivElement, options: EditorOptions) {