Merge pull request #2549 from microsoft/u/juliaroldi/auto-format-demo…

…-site Fix AutorFormat
microsoft · Apr 2, 2024 · 9460c0c · 9460c0c
2 parents f362e01 + 13543b9
commit 9460c0c
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 11 deletions.
diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts
@@ -38,6 +38,12 @@ const initialState: OptionState = {
     imageMenu: true,
     tableMenu: true,
     listMenu: true,
+    autoFormatOptions: {
+        autoBullet: true,
+        autoLink: true,
+        autoNumbering: true,
+        autoUnlink: false,
+    },
     markdownOptions: {
         bold: true,
         italic: true,

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts
@@ -1,4 +1,4 @@
-import { MarkdownOptions } from 'roosterjs-content-model-plugins';
+import { AutoFormatOptions, MarkdownOptions } from 'roosterjs-content-model-plugins';
 import type { ContentEditFeatureSettings } from 'roosterjs-editor-types';
 import type { SidePaneElementProps } from '../SidePaneElement';
 import type { ContentModelSegmentFormat } from 'roosterjs-content-model-types';
@@ -36,6 +36,7 @@ export interface OptionState {
     tableMenu: boolean;
     imageMenu: boolean;
     watermarkText: string;
+    autoFormatOptions: AutoFormatOptions;
     markdownOptions: MarkdownOptions;
 
     // Legacy plugin options

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx
@@ -138,6 +138,7 @@ export class OptionsPane extends React.Component<OptionPaneProps, OptionState> {
             listMenu: this.state.listMenu,
             tableMenu: this.state.tableMenu,
             imageMenu: this.state.imageMenu,
+            autoFormatOptions: { ...this.state.autoFormatOptions },
             markdownOptions: { ...this.state.markdownOptions },
         };
 

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts
@@ -0,0 +1,17 @@
+import { AutoFormatOptions } from 'roosterjs-content-model-plugins';
+import { CodeElement } from './CodeElement';
+
+export class AutoFormatCode extends CodeElement {
+    constructor(private options: AutoFormatOptions) {
+        super();
+    }
+
+    getCode() {
+        return `new roosterjs.AutoFormatPlugin({
+            autoBullet: ${this.options.autoBullet},
+            autoLink: ${this.options.autoLink},
+            autoNumbering: ${this.options.autoNumbering},
+            autoUnlink: ${this.options.autoUnlink},
+        })`;
+    }
+}
diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts
@@ -1,11 +1,11 @@
+import { AutoFormatCode } from './AutoFormatCode';
 import { CodeElement } from './CodeElement';
 import { ContentEditCode } from './ContentEditCode';
 import { HyperLinkCode } from './HyperLinkCode';
 import { MarkdownCode } from './MarkdownCode';
 import { OptionState } from '../OptionState';
 import { WatermarkCode } from './WatermarkCode';
 import {
-    AutoFormatPluginCode,
     CustomReplaceCode,
     EditPluginCode,
     ImageEditCode,
@@ -39,7 +39,7 @@ export class PluginsCode extends PluginsCodeBase {
         const pluginList = state.pluginList;
 
         super([
-            pluginList.autoFormat && new AutoFormatPluginCode(),
+            pluginList.autoFormat && new AutoFormatCode(state.autoFormatOptions),
             pluginList.edit && new EditPluginCode(),
             pluginList.paste && new PastePluginCode(),
             pluginList.tableEdit && new TableEditPluginCode(),

diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts
@@ -10,12 +10,6 @@ class SimplePluginCode extends CodeElement {
     }
 }
 
-export class AutoFormatPluginCode extends SimplePluginCode {
-    constructor() {
-        super('AutoFormatPlugin');
-    }
-}
-
 export class EditPluginCode extends SimplePluginCode {
     constructor() {
         super('EditPlugin');

diff --git a/packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts b/packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts
@@ -44,7 +44,7 @@ export function getListTypeStyle(
         listMarkerSegment &&
         listMarkerSegment.segmentType == 'Text'
     ) {
-        const listMarker = listMarkerSegment.text;
+        const listMarker = listMarkerSegment.text.trim();
         const bulletType = bulletListType[listMarker];
 
         if (bulletType && shouldSearchForBullet) {
@@ -125,7 +125,7 @@ const bulletListType: Record<string, number> = {
 };
 
 const isNewList = (listMarker: string) => {
-    const marker = listMarker.replace(/[^\w\s]/g, '').trim();
+    const marker = listMarker.replace(/[^\w\s]/g, '');
     const pattern = /^[1aAiI]$/;
     return pattern.test(marker);
 };