Merge pull request #2963 from microsoft/u/nguyenvi/version-bump-030725

Version bump to 9.21.0

Author: vinguyen12

README.md

@@ -88,6 +88,8 @@ API overrides in Editor options when creating the editor.
 `roosterjs-content-model-api` provides APIs for scenario-based operations triggered by
 user interaction.
 
+`roosterjs-content-model-markdown` provides API to transform Markdown language in Content Model objects.
+
 ## Plugins
 
 Rooster supports plugins. You can use built-in plugins or build your own.

demo/scripts/controlsV2/mainPane/MainPane.tsx

@@ -15,6 +15,7 @@ import { getDarkColor } from 'roosterjs-color-utils';
 import { getPresetModelById } from '../sidePane/presets/allPresets/allPresets';
 import { getTabs, tabNames } from '../tabs/getTabs';
 import { getTheme } from '../theme/themes';
+import { MarkdownPanePlugin } from '../sidePane/MarkdownPane/MarkdownPanePlugin';
 import { OptionState, UrlPlaceholder } from '../sidePane/editorOptions/OptionState';
 import { popoutButton } from '../demoButtons/popoutButton';
 import { PresetPlugin } from '../sidePane/presets/PresetPlugin';
@@ -102,6 +103,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
     private samplePickerPlugin: SamplePickerPlugin;
     private snapshots: Snapshots;
     private imageEditPlugin: ImageEditPlugin;
+    private markdownPanePlugin: MarkdownPanePlugin;
 
     protected sidePane = React.createRef<SidePane>();
     protected updateContentPlugin: UpdateContentPlugin;
@@ -140,6 +142,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
         this.formatPainterPlugin = new FormatPainterPlugin();
         this.samplePickerPlugin = new SamplePickerPlugin();
         this.imageEditPlugin = new ImageEditPlugin();
+        this.markdownPanePlugin = new MarkdownPanePlugin();
 
         this.state = {
             showSidePane: window.location.hash != '',
@@ -481,6 +484,7 @@ export class MainPane extends React.Component<{}, MainPaneState> {
             this.snapshotPlugin,
             this.contentModelPanePlugin,
             this.presetPlugin,
+            this.markdownPanePlugin,
         ];
     }
 

demo/scripts/controlsV2/sidePane/MarkdownPane/MarkdownPane.scss

@@ -0,0 +1,10 @@
+.container {
+    flex-direction: column;
+    display: flex;
+    height: 100%;
+}
+
+.textArea {
+    height: 90%;
+    width: 100%;
+}

demo/scripts/controlsV2/sidePane/MarkdownPane/MarkdownPane.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { convertMarkdownToContentModel } from 'roosterjs-content-model-markdown';
+import { MarkdownPaneProps } from './MarkdownPanePlugin';
+import {
+    createBr,
+    createParagraph,
+    createSelectionMarker,
+    mergeModel,
+} from 'roosterjs-content-model-dom';
+
+const styles = require('./MarkdownPane.scss');
+
+export default class MarkdownPane extends React.Component<MarkdownPaneProps> {
+    private html = React.createRef<HTMLTextAreaElement>();
+
+    constructor(props: MarkdownPaneProps) {
+        super(props);
+    }
+
+    private convert = () => {
+        const editor = this.props.getEditor();
+        editor.formatContentModel((model, context) => {
+            const markdownModel = convertMarkdownToContentModel(this.html.current.value);
+            mergeModel(model, markdownModel, context);
+            return true;
+        });
+    };
+
+    private clear = () => {
+        this.html.current.value = '';
+    };
+
+    private clearEditor = () => {
+        const editor = this.props.getEditor();
+        editor.formatContentModel(model => {
+            model.blocks = [];
+            const emptyParagraph = createParagraph();
+            const marker = createSelectionMarker();
+            const br = createBr();
+            emptyParagraph.segments.push(marker);
+            emptyParagraph.segments.push(br);
+            model.blocks.push(emptyParagraph);
+            return true;
+        });
+    };
+
+    render() {
+        return (
+            <div className={styles.container}>
+                <p>Convert Markdown to content model</p>
+                <textarea
+                    className={styles.textArea}
+                    title="Plain Text Editor"
+                    ref={this.html}></textarea>
+                <div>
+                    <button type="button" onClick={this.clear}>
+                        Clear
+                    </button>
+                    <button type="button" onClick={this.clearEditor}>
+                        Clear editor
+                    </button>
+                    <button type="button" onClick={this.convert}>
+                        Convert
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}

demo/scripts/controlsV2/sidePane/MarkdownPane/MarkdownPanePlugin.ts

@@ -0,0 +1,25 @@
+import MarkdownPane from './MarkdownPane';
+import { IEditor, PluginEvent } from 'roosterjs-content-model-types';
+import { SidePaneElementProps } from '../SidePaneElement';
+import { SidePanePluginImpl } from '../SidePanePluginImpl';
+
+export interface MarkdownPaneProps extends SidePaneElementProps {
+    getEditor: () => IEditor;
+}
+
+export class MarkdownPanePlugin extends SidePanePluginImpl<MarkdownPane, MarkdownPaneProps> {
+    constructor() {
+        super(MarkdownPane, 'plainText', 'Markdown Editor');
+    }
+
+    onPluginEvent(e: PluginEvent) {}
+
+    getComponentProps(base: MarkdownPaneProps) {
+        return {
+            ...base,
+            getEditor: () => {
+                return this.editor;
+            },
+        };
+    }
+}

demo/scripts/tsconfig.json

@@ -19,6 +19,9 @@
             "roosterjs-content-model-api": ["packages/roosterjs-content-model-api/lib/index"],
             "roosterjs-content-model-plugins": [
                 "packages/roosterjs-content-model-plugins/lib/index"
+            ],
+            "roosterjs-content-model-markdown": [
+                "packages/roosterjs-content-model-markdown/lib/index"
             ]
         }
     },

packages/roosterjs-content-model-api/lib/modelApi/block/setModelAlignment.ts

@@ -1,5 +1,6 @@
 import { alignTable } from '../table/alignTable';
 import { getOperationalBlocks, mutateBlock } from 'roosterjs-content-model-dom';
+import { splitSelectedParagraphByBr } from './splitSelectedParagraphByBr';
 import type {
     ContentModelListItem,
     ReadonlyContentModelDocument,
@@ -53,6 +54,8 @@ export function setModelAlignment(
     model: ReadonlyContentModelDocument,
     alignment: 'left' | 'center' | 'right' | 'justify'
 ) {
+    splitSelectedParagraphByBr(model);
+
     const paragraphOrListItemOrTable = getOperationalBlocks<ContentModelListItem>(
         model,
         ['ListItem'],

packages/roosterjs-content-model-api/lib/modelApi/block/setModelDirection.ts

@@ -1,4 +1,5 @@
 import { findListItemsInSameThread } from '../list/findListItemsInSameThread';
+import { splitSelectedParagraphByBr } from './splitSelectedParagraphByBr';
 import {
     applyTableFormat,
     getOperationalBlocks,
@@ -19,6 +20,8 @@ import type {
  * @internal
  */
 export function setModelDirection(model: ReadonlyContentModelDocument, direction: 'ltr' | 'rtl') {
+    splitSelectedParagraphByBr(model);
+
     const paragraphOrListItemOrTable = getOperationalBlocks<ContentModelListItem>(
         model,
         ['ListItem'],

packages/roosterjs-content-model-api/lib/modelApi/block/setModelIndentation.ts

@@ -1,5 +1,6 @@
 import { findListItemsInSameThread } from '../list/findListItemsInSameThread';
 import { getListAnnounceData } from '../list/getListAnnounceData';
+import { splitSelectedParagraphByBr } from './splitSelectedParagraphByBr';
 import {
     createListLevel,
     getOperationalBlocks,
@@ -33,6 +34,8 @@ export function setModelIndentation(
     length: number = IndentStepInPixel,
     context?: FormatContentModelContext
 ) {
+    splitSelectedParagraphByBr(model);
+
     const paragraphOrListItem = getOperationalBlocks<ContentModelListItem>(
         model,
         ['ListItem'],

packages/roosterjs-content-model-api/lib/modelApi/block/splitSelectedParagraphByBr.ts

@@ -0,0 +1,68 @@
+import {
+    createParagraph,
+    getSelectedSegmentsAndParagraphs,
+    mutateBlock,
+} from 'roosterjs-content-model-dom';
+import type {
+    ReadonlyContentModelDocument,
+    ReadonlyContentModelParagraph,
+    ShallowMutableContentModelParagraph,
+} from 'roosterjs-content-model-types';
+
+/**
+ * @internal
+ * For all selected paragraphs, if it has BR in middle of other segments, split the paragraph into multiple paragraphs
+ * @param model The model to process
+ */
+export function splitSelectedParagraphByBr(model: ReadonlyContentModelDocument) {
+    const selections = getSelectedSegmentsAndParagraphs(
+        model,
+        false /*includingFormatHolder*/,
+        false /*includingEntity*/
+    );
+
+    for (const [_, para, path] of selections) {
+        if (para?.segments.some(s => s.segmentType == 'Br')) {
+            let currentParagraph = shallowColonParagraph(para);
+            let hasVisibleSegment = false;
+            const newParagraphs: ShallowMutableContentModelParagraph[] = [];
+            const parent = mutateBlock(path[0]);
+            const index = parent.blocks.indexOf(para);
+
+            if (index >= 0) {
+                for (const segment of mutateBlock(para).segments) {
+                    if (segment.segmentType == 'Br') {
+                        if (!hasVisibleSegment) {
+                            currentParagraph.segments.push(segment);
+                        }
+
+                        if (currentParagraph.segments.length > 0) {
+                            newParagraphs.push(currentParagraph);
+                        }
+
+                        currentParagraph = shallowColonParagraph(para);
+                        hasVisibleSegment = false;
+                    } else {
+                        currentParagraph.segments.push(segment);
+
+                        if (segment.segmentType != 'SelectionMarker') {
+                            hasVisibleSegment = true;
+                        }
+                    }
+                }
+
+                if (currentParagraph.segments.length > 0) {
+                    newParagraphs.push(currentParagraph);
+                }
+
+                parent.blocks.splice(index, 1, ...newParagraphs);
+            }
+        }
+    }
+}
+
+function shallowColonParagraph(
+    para: ReadonlyContentModelParagraph
+): ShallowMutableContentModelParagraph {
+    return createParagraph(false /*isImplicit*/, para.format, para.segmentFormat, para.decorator);
+}