From c712f3b465c7bed443a168aff951583e2bb3bc97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Mon, 1 Apr 2024 17:33:30 -0300 Subject: [PATCH 1/2] WIP --- .../sidePane/editorOptions/EditorOptionsPlugin.ts | 6 ++++++ .../controlsV2/sidePane/editorOptions/OptionState.ts | 2 ++ .../sidePane/editorOptions/OptionsPane.tsx | 1 + .../sidePane/editorOptions/codes/AutoFormatCode.ts | 12 ++++++++++++ .../sidePane/editorOptions/codes/PluginsCode.ts | 4 ++-- .../sidePane/editorOptions/codes/SimplePluginCode.ts | 6 ------ 6 files changed, 23 insertions(+), 8 deletions(-) create mode 100644 demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts index c14132c0b2f..d464731df1a 100644 --- 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, + }, }; export class EditorOptionsPlugin extends SidePanePluginImpl { diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts index 2d0bd120033..6b86804b261 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts @@ -1,3 +1,4 @@ +import { AutoFormatOptions } 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'; @@ -35,6 +36,7 @@ export interface OptionState { tableMenu: boolean; imageMenu: boolean; watermarkText: string; + autoFormatOptions: AutoFormatOptions; // Legacy plugin options contentEditFeatures: ContentEditFeatureSettings; diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx b/demo/scripts/controlsV2/sidePane/editorOptions/OptionsPane.tsx index 54fba5e2795..0d8c956efca 100644 --- 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 { listMenu: this.state.listMenu, tableMenu: this.state.tableMenu, imageMenu: this.state.imageMenu, + autoFormatOptions: { ...this.state.autoFormatOptions }, }; if (callback) { diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts new file mode 100644 index 00000000000..27e536b6488 --- /dev/null +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts @@ -0,0 +1,12 @@ +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('${this.options}')`; + } +} diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts index e4a9e64db78..869bd1d0e8a 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts @@ -1,10 +1,10 @@ +import { AutoFormatCode } from './AutoFormatCode'; import { CodeElement } from './CodeElement'; import { ContentEditCode } from './ContentEditCode'; import { HyperLinkCode } from './HyperLinkCode'; 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 index 482c1ff4e3c..40e42027410 100644 --- 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'); From 7489c6d6c13cda1662e3929d5ccf69557980d26b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Mon, 1 Apr 2024 18:05:03 -0300 Subject: [PATCH 2/2] fix demo site --- .../sidePane/editorOptions/codes/AutoFormatCode.ts | 7 ++++++- .../lib/autoFormat/list/getListTypeStyle.ts | 4 ++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts index 27e536b6488..ba9f5c37100 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/AutoFormatCode.ts @@ -7,6 +7,11 @@ export class AutoFormatCode extends CodeElement { } getCode() { - return `new roosterjs.AutoFormatPlugin('${this.options}')`; + return `new roosterjs.AutoFormatPlugin({ + autoBullet: ${this.options.autoBullet}, + autoLink: ${this.options.autoLink}, + autoNumbering: ${this.options.autoNumbering}, + autoUnlink: ${this.options.autoUnlink}, + })`; } } diff --git a/packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts b/packages/roosterjs-content-model-plugins/lib/autoFormat/list/getListTypeStyle.ts index 2e566bbf2bb..7a6c64dc584 100644 --- 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 = { }; 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); };