From ba053e73c8956e8cd99cc5bbd6df46b7ae0ddaae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Tue, 26 Mar 2024 13:38:19 -0300 Subject: [PATCH 1/5] code suport --- .../lib/markdown/MarkdownPlugin.ts | 34 +++++++--- .../lib/markdown/utils/setFormat.ts | 11 ++- .../test/markdown/markdownPluginTest.ts | 60 +++++++++++++++- .../test/markdown/utils/setFormatTest.ts | 68 ++++++++++++++++++- 4 files changed, 158 insertions(+), 15 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts index f892470faff..0b9cab189b8 100644 --- a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts @@ -15,6 +15,7 @@ export interface MarkdownOptions { strikethrough?: boolean; bold?: boolean; italic?: boolean; + code?: boolean; } /** @@ -24,6 +25,7 @@ const DefaultOptions: Required = { strikethrough: true, bold: true, italic: true, + code: true, }; /** @@ -34,6 +36,7 @@ export class MarkdownPlugin implements EditorPlugin { private shouldBold = false; private shouldItalic = false; private shouldStrikethrough = false; + private shouldCode = false; private lastKeyTyped: string | null = null; /** @@ -68,9 +71,7 @@ export class MarkdownPlugin implements EditorPlugin { */ dispose() { this.editor = null; - this.shouldBold = false; - this.shouldItalic = false; - this.shouldStrikethrough = false; + this.disableAllFeatures(); this.lastKeyTyped = null; } @@ -137,6 +138,16 @@ export class MarkdownPlugin implements EditorPlugin { } } break; + case '`': + if (this.options.code) { + if (this.shouldCode) { + setFormat(editor, '`', {} /* format */, { format: {} }); + this.shouldCode = false; + } else { + this.shouldCode = true; + } + } + break; } } } @@ -146,9 +157,7 @@ export class MarkdownPlugin implements EditorPlugin { if (!event.handledByEditFeature && !rawEvent.defaultPrevented) { switch (rawEvent.key) { case 'Enter': - this.shouldBold = false; - this.shouldItalic = false; - this.shouldStrikethrough = false; + this.disableAllFeatures(); this.lastKeyTyped = null; break; case 'Backspace': @@ -159,6 +168,8 @@ export class MarkdownPlugin implements EditorPlugin { this.shouldStrikethrough = false; } else if (this.lastKeyTyped === '_' && this.shouldItalic) { this.shouldItalic = false; + } else if (this.lastKeyTyped === '`' && this.shouldCode) { + this.shouldCode = false; } this.lastKeyTyped = null; break; @@ -171,9 +182,14 @@ export class MarkdownPlugin implements EditorPlugin { private handleContentChangedEvent(event: ContentChangedEvent) { if (event.source == 'Format') { - this.shouldBold = false; - this.shouldItalic = false; - this.shouldStrikethrough = false; + this.disableAllFeatures(); } } + + private disableAllFeatures() { + this.shouldBold = false; + this.shouldItalic = false; + this.shouldStrikethrough = false; + this.shouldCode = false; + } } diff --git a/packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts b/packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts index 7839d4c4481..e239f5abaaa 100644 --- a/packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts +++ b/packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts @@ -1,5 +1,6 @@ import { createText, getSelectedSegmentsAndParagraphs } from 'roosterjs-content-model-dom'; import type { + ContentModelCode, ContentModelSegmentFormat, ContentModelText, IEditor, @@ -8,7 +9,12 @@ import type { /** * @internal */ -export function setFormat(editor: IEditor, character: string, format: ContentModelSegmentFormat) { +export function setFormat( + editor: IEditor, + character: string, + format: ContentModelSegmentFormat, + code?: ContentModelCode +) { editor.formatContentModel((model, context) => { const selectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs( model, @@ -75,6 +81,9 @@ export function setFormat(editor: IEditor, character: string, format: ContentMod ...paragraph.segments[i].format, ...format, }; + if (code) { + segment.code = code; + } } } diff --git a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts index 619f42cea70..6cae52e384c 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts @@ -2,6 +2,7 @@ import * as setFormat from '../../lib/markdown/utils/setFormat'; import { MarkdownOptions, MarkdownPlugin } from '../../lib/markdown/MarkdownPlugin'; import { ContentChangedEvent, + ContentModelCode, ContentModelSegmentFormat, EditorInputEvent, IEditor, @@ -32,7 +33,8 @@ describe('MarkdownPlugin', () => { shouldCallTrigger: boolean, options?: MarkdownOptions, expectedChar?: string, - expectedFormat?: ContentModelSegmentFormat + expectedFormat?: ContentModelSegmentFormat, + expectedCode?: ContentModelCode ) { const plugin = new MarkdownPlugin(options); plugin.initialize(editor); @@ -40,7 +42,16 @@ describe('MarkdownPlugin', () => { events.forEach(event => plugin.onPluginEvent(event)); if (shouldCallTrigger) { - expect(setFormatSpy).toHaveBeenCalledWith(editor, expectedChar, expectedFormat); + if (expectedCode) { + expect(setFormatSpy).toHaveBeenCalledWith( + editor, + expectedChar, + expectedFormat, + expectedCode + ); + } else { + expect(setFormatSpy).toHaveBeenCalledWith(editor, expectedChar, expectedFormat); + } } else { expect(setFormatSpy).not.toHaveBeenCalled(); } @@ -178,6 +189,51 @@ describe('MarkdownPlugin', () => { ); }); + it('should trigger setFormat for code', () => { + runTest( + [ + { + rawEvent: { data: '`', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + { + rawEvent: { data: 't', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + { + rawEvent: { data: '`', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + ], + true, + { bold: true, italic: true, strikethrough: true, code: true }, + '`', + {}, + { format: {} } + ); + }); + + it('Feature disabled - should not trigger setFormat for code', () => { + runTest( + [ + { + rawEvent: { data: '`', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + { + rawEvent: { data: 't', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + { + rawEvent: { data: '`', inputType: 'insertText' }, + eventType: 'input', + } as EditorInputEvent, + ], + false, + { bold: true, italic: true, strikethrough: true, code: false } + ); + }); + it('Backspace - should not trigger setFormat for bold', () => { runTest( [ diff --git a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts index 990ec7d3409..94ca6258d68 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts @@ -1,5 +1,9 @@ -import { ContentModelDocument, ContentModelSegmentFormat } from 'roosterjs-content-model-types'; import { setFormat } from '../../../lib/markdown/utils/setFormat'; +import { + ContentModelCode, + ContentModelDocument, + ContentModelSegmentFormat, +} from 'roosterjs-content-model-types'; describe('setFormat', () => { function runTest( @@ -7,7 +11,8 @@ describe('setFormat', () => { char: string, format: ContentModelSegmentFormat, expectedModel: ContentModelDocument, - expectedResult: boolean + expectedResult: boolean, + code: ContentModelCode | undefined = undefined ) { const formatWithContentModelSpy = jasmine .createSpy('formatWithContentModel') @@ -27,7 +32,8 @@ describe('setFormat', () => { formatContentModel: formatWithContentModelSpy, } as any, char, - format + format, + code ); expect(formatWithContentModelSpy).toHaveBeenCalled(); @@ -225,6 +231,62 @@ describe('setFormat', () => { runTest(input, '_', { italic: true }, expectedModel, true); }); + it('should set code', () => { + const input: ContentModelDocument = { + blockGroupType: 'Document', + blocks: [ + { + blockType: 'Paragraph', + segments: [ + { + segmentType: 'Text', + text: '`test`', + format: {}, + }, + { + segmentType: 'SelectionMarker', + format: {}, + isSelected: true, + }, + ], + format: {}, + }, + ], + format: {}, + }; + const expectedModel: ContentModelDocument = { + blockGroupType: 'Document', + blocks: [ + { + blockType: 'Paragraph', + segments: [ + { + segmentType: 'Text', + text: '', + format: {}, + }, + { + segmentType: 'Text', + text: 'test', + format: {}, + code: { + format: {}, + }, + }, + { + segmentType: 'SelectionMarker', + format: {}, + isSelected: true, + }, + ], + format: {}, + }, + ], + format: {}, + }; + runTest(input, '`', {}, expectedModel, true, { format: {} }); + }); + it('should set bold in multiple words', () => { const input: ContentModelDocument = { blockGroupType: 'Document', From 48f2faea97d46d8019c10d2c835dd574cb8d2ee7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Tue, 26 Mar 2024 14:02:38 -0300 Subject: [PATCH 2/5] markdown --- .../lib/markdown/MarkdownPlugin.ts | 8 ++- .../test/markdown/markdownPluginTest.ts | 4 +- .../test/markdown/utils/setFormatTest.ts | 58 +++++++++++++++++++ 3 files changed, 65 insertions(+), 5 deletions(-) diff --git a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts index 0b9cab189b8..9b47de99f43 100644 --- a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts @@ -1,6 +1,7 @@ import { setFormat } from './utils/setFormat'; import type { ContentChangedEvent, + ContentModelCode, EditorInputEvent, EditorPlugin, IEditor, @@ -15,7 +16,7 @@ export interface MarkdownOptions { strikethrough?: boolean; bold?: boolean; italic?: boolean; - code?: boolean; + code?: ContentModelCode; } /** @@ -25,7 +26,7 @@ const DefaultOptions: Required = { strikethrough: true, bold: true, italic: true, - code: true, + code: { format: {} }, }; /** @@ -44,6 +45,7 @@ export class MarkdownPlugin implements EditorPlugin { * - strikethrough: If true text between ~ will receive strikethrough format. Defaults to true. * - bold: If true text between * will receive bold format. Defaults to true. * - italic: If true text between _ will receive italic format. Defaults to true. + * - code: If provided, text between ` will receive code format. Defaults to { format: {} }. */ constructor(private options: MarkdownOptions = DefaultOptions) {} @@ -141,7 +143,7 @@ export class MarkdownPlugin implements EditorPlugin { case '`': if (this.options.code) { if (this.shouldCode) { - setFormat(editor, '`', {} /* format */, { format: {} }); + setFormat(editor, '`', {} /* format */, this.options.code); this.shouldCode = false; } else { this.shouldCode = true; diff --git a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts index 6cae52e384c..4ca2cef41e8 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts @@ -206,7 +206,7 @@ describe('MarkdownPlugin', () => { } as EditorInputEvent, ], true, - { bold: true, italic: true, strikethrough: true, code: true }, + { bold: true, italic: true, strikethrough: true, code: { format: {} } }, '`', {}, { format: {} } @@ -230,7 +230,7 @@ describe('MarkdownPlugin', () => { } as EditorInputEvent, ], false, - { bold: true, italic: true, strikethrough: true, code: false } + { bold: true, italic: true, strikethrough: true, code: undefined } ); }); diff --git a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts index 94ca6258d68..89cc36f4b48 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts @@ -287,6 +287,64 @@ describe('setFormat', () => { runTest(input, '`', {}, expectedModel, true, { format: {} }); }); + it('should set code with format', () => { + const input: ContentModelDocument = { + blockGroupType: 'Document', + blocks: [ + { + blockType: 'Paragraph', + segments: [ + { + segmentType: 'Text', + text: '`test`', + format: {}, + }, + { + segmentType: 'SelectionMarker', + format: {}, + isSelected: true, + }, + ], + format: {}, + }, + ], + format: {}, + }; + const expectedModel: ContentModelDocument = { + blockGroupType: 'Document', + blocks: [ + { + blockType: 'Paragraph', + segments: [ + { + segmentType: 'Text', + text: '', + format: {}, + }, + { + segmentType: 'Text', + text: 'test', + format: {}, + code: { + format: { + fontFamily: 'arial', + }, + }, + }, + { + segmentType: 'SelectionMarker', + format: {}, + isSelected: true, + }, + ], + format: {}, + }, + ], + format: {}, + }; + runTest(input, '`', {}, expectedModel, true, { format: { fontFamily: 'arial' } }); + }); + it('should set bold in multiple words', () => { const input: ContentModelDocument = { blockGroupType: 'Document', From 1f105ff183523d34d7478b7997eda120442bf5c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Mon, 1 Apr 2024 16:36:53 -0300 Subject: [PATCH 3/5] adjust --- demo/scripts/controlsV2/mainPane/MainPane.tsx | 1 + .../lib/markdown/MarkdownPlugin.ts | 19 +++++++++++------- .../test/markdown/markdownPluginTest.ts | 10 +++++----- .../test/markdown/utils/setFormatTest.ts | 20 ++++++------------- 4 files changed, 24 insertions(+), 26 deletions(-) diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx index 8ef4939beee..3e4b31f0e7a 100644 --- a/demo/scripts/controlsV2/mainPane/MainPane.tsx +++ b/demo/scripts/controlsV2/mainPane/MainPane.tsx @@ -493,6 +493,7 @@ export class MainPane extends React.Component<{}, MainPaneState> { bold: true, italic: true, strikethrough: true, + codeFormat: {}, }), pluginList.emoji && createEmojiPlugin(), pluginList.pasteOption && createPasteOptionPlugin(), diff --git a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts index 6ee152a84f0..5ef27d3592d 100644 --- a/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts +++ b/packages/roosterjs-content-model-plugins/lib/markdown/MarkdownPlugin.ts @@ -10,13 +10,18 @@ import type { } from 'roosterjs-content-model-types'; /** + * * Options for Markdown plugin + * - strikethrough: If true text between ~ will receive strikethrough format. + * - bold: If true text between * will receive bold format. + * - italic: If true text between _ will receive italic format. + * - codeFormat: If provided, text between ` will receive code format. If equal to {}, it will set the default code format. */ export interface MarkdownOptions { strikethrough?: boolean; bold?: boolean; italic?: boolean; - code?: ContentModelCodeFormat; + codeFormat?: ContentModelCodeFormat; } /** @@ -41,10 +46,10 @@ export class MarkdownPlugin implements EditorPlugin { /** * @param options An optional parameter that takes in an object of type MarkdownOptions, which includes the following properties: - * - strikethrough: If true text between ~ will receive strikethrough format. Defaults to true. - * - bold: If true text between * will receive bold format. Defaults to true. - * - italic: If true text between _ will receive italic format. Defaults to true. - * - code: If provided, text between ` will receive code format. Defaults to { format: {} }. + * - strikethrough: If true text between ~ will receive strikethrough format. Defaults to false. + * - bold: If true text between * will receive bold format. Defaults to false. + * - italic: If true text between _ will receive italic format. Defaults to false. + * - codeFormat: If provided, text between ` will receive code format. Defaults to undefined. */ constructor(private options: MarkdownOptions = DefaultOptions) {} @@ -141,9 +146,9 @@ export class MarkdownPlugin implements EditorPlugin { } break; case '`': - if (this.options.code) { + if (this.options.codeFormat) { if (this.shouldCode) { - setFormat(editor, '`', {} /* format */, this.options.code); + setFormat(editor, '`', {} /* format */, this.options.codeFormat); this.shouldCode = false; } else { this.shouldCode = true; diff --git a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts index 4ca2cef41e8..f9dd8c28ea0 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/markdownPluginTest.ts @@ -2,7 +2,7 @@ import * as setFormat from '../../lib/markdown/utils/setFormat'; import { MarkdownOptions, MarkdownPlugin } from '../../lib/markdown/MarkdownPlugin'; import { ContentChangedEvent, - ContentModelCode, + ContentModelCodeFormat, ContentModelSegmentFormat, EditorInputEvent, IEditor, @@ -34,7 +34,7 @@ describe('MarkdownPlugin', () => { options?: MarkdownOptions, expectedChar?: string, expectedFormat?: ContentModelSegmentFormat, - expectedCode?: ContentModelCode + expectedCode?: ContentModelCodeFormat ) { const plugin = new MarkdownPlugin(options); plugin.initialize(editor); @@ -206,10 +206,10 @@ describe('MarkdownPlugin', () => { } as EditorInputEvent, ], true, - { bold: true, italic: true, strikethrough: true, code: { format: {} } }, + { bold: true, italic: true, strikethrough: true, codeFormat: {} }, '`', {}, - { format: {} } + {} ); }); @@ -230,7 +230,7 @@ describe('MarkdownPlugin', () => { } as EditorInputEvent, ], false, - { bold: true, italic: true, strikethrough: true, code: undefined } + { bold: true, italic: true, strikethrough: true, codeFormat: undefined } ); }); diff --git a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts index 6fe7e78ef03..346133c8567 100644 --- a/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts +++ b/packages/roosterjs-content-model-plugins/test/markdown/utils/setFormatTest.ts @@ -1,6 +1,6 @@ import { setFormat } from '../../../lib/markdown/utils/setFormat'; import { - ContentModelCode, + ContentModelCodeFormat, ContentModelDocument, ContentModelSegmentFormat, } from 'roosterjs-content-model-types'; @@ -12,7 +12,7 @@ describe('setFormat', () => { format: ContentModelSegmentFormat, expectedModel: ContentModelDocument, expectedResult: boolean, - code: ContentModelCode | undefined = undefined + code: ContentModelCodeFormat | undefined = undefined ) { const formatWithContentModelSpy = jasmine .createSpy('formatWithContentModel') @@ -249,11 +249,6 @@ describe('setFormat', () => { { blockType: 'Paragraph', segments: [ - { - segmentType: 'Text', - text: '', - format: {}, - }, { segmentType: 'Text', text: 'test', @@ -261,6 +256,7 @@ describe('setFormat', () => { code: { format: {}, }, + isSelected: undefined, }, { segmentType: 'SelectionMarker', @@ -273,7 +269,7 @@ describe('setFormat', () => { ], format: {}, }; - runTest(input, '`', {}, expectedModel, true, { format: {} }); + runTest(input, '`', {}, expectedModel, true, {}); }); it('should set code with format', () => { @@ -305,11 +301,6 @@ describe('setFormat', () => { { blockType: 'Paragraph', segments: [ - { - segmentType: 'Text', - text: '', - format: {}, - }, { segmentType: 'Text', text: 'test', @@ -319,6 +310,7 @@ describe('setFormat', () => { fontFamily: 'arial', }, }, + isSelected: undefined, }, { segmentType: 'SelectionMarker', @@ -331,7 +323,7 @@ describe('setFormat', () => { ], format: {}, }; - runTest(input, '`', {}, expectedModel, true, { format: { fontFamily: 'arial' } }); + runTest(input, '`', {}, expectedModel, true, { fontFamily: 'arial' }); }); it('should set bold in multiple words', () => { From 287a8df0341f44970c082357e01dc3792cc09343 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Mon, 1 Apr 2024 17:16:33 -0300 Subject: [PATCH 4/5] demo site --- demo/scripts/controlsV2/mainPane/MainPane.tsx | 9 ++------- .../sidePane/editorOptions/EditorOptionsPlugin.ts | 6 ++++++ .../controlsV2/sidePane/editorOptions/OptionState.ts | 2 ++ .../sidePane/editorOptions/OptionsPane.tsx | 1 + .../sidePane/editorOptions/codes/MarkdownCode.ts | 12 ++++++++++++ .../sidePane/editorOptions/codes/PluginsCode.ts | 4 ++-- .../sidePane/editorOptions/codes/SimplePluginCode.ts | 6 ------ 7 files changed, 25 insertions(+), 15 deletions(-) create mode 100644 demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts diff --git a/demo/scripts/controlsV2/mainPane/MainPane.tsx b/demo/scripts/controlsV2/mainPane/MainPane.tsx index 3e4b31f0e7a..39e5889141b 100644 --- a/demo/scripts/controlsV2/mainPane/MainPane.tsx +++ b/demo/scripts/controlsV2/mainPane/MainPane.tsx @@ -474,6 +474,7 @@ export class MainPane extends React.Component<{}, MainPaneState> { tableMenu, imageMenu, watermarkText, + markdownOptions, } = this.state.initState; return [ pluginList.autoFormat && @@ -488,13 +489,7 @@ export class MainPane extends React.Component<{}, MainPaneState> { pluginList.shortcut && new ShortcutPlugin(), pluginList.tableEdit && new TableEditPlugin(), pluginList.watermark && new WatermarkPlugin(watermarkText), - pluginList.markdown && - new MarkdownPlugin({ - bold: true, - italic: true, - strikethrough: true, - codeFormat: {}, - }), + pluginList.markdown && new MarkdownPlugin(markdownOptions), pluginList.emoji && createEmojiPlugin(), pluginList.pasteOption && createPasteOptionPlugin(), pluginList.sampleEntity && new SampleEntityPlugin(), diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts b/demo/scripts/controlsV2/sidePane/editorOptions/EditorOptionsPlugin.ts index c14132c0b2f..10e226dfc06 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, + markdownOptions: { + bold: true, + italic: true, + strikethrough: true, + codeFormat: {}, + }, }; 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..8aef2b55f14 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/OptionState.ts @@ -1,3 +1,4 @@ +import { 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'; @@ -35,6 +36,7 @@ export interface OptionState { tableMenu: boolean; imageMenu: boolean; watermarkText: string; + markdownOptions: MarkdownOptions; // 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..ee718909d96 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, + markdownOptions: { ...this.state.markdownOptions }, }; if (callback) { diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts new file mode 100644 index 00000000000..f7f52bb50b5 --- /dev/null +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts @@ -0,0 +1,12 @@ +import { CodeElement } from './CodeElement'; +import { MarkdownOptions } from 'roosterjs-content-model-plugins'; + +export class MarkdownCode extends CodeElement { + constructor(private markdownOptions: MarkdownOptions) { + super(); + } + + getCode() { + return `new roosterjs.MarkdownPlugin('${this.markdownOptions}')`; + } +} diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts index e4a9e64db78..2dcd271d0d7 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/PluginsCode.ts @@ -1,6 +1,7 @@ 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 { @@ -11,7 +12,6 @@ import { PastePluginCode, TableEditPluginCode, ShortcutPluginCode, - MarkdownPluginCode, } from './SimplePluginCode'; export class PluginsCodeBase extends CodeElement { @@ -45,7 +45,7 @@ export class PluginsCode extends PluginsCodeBase { pluginList.tableEdit && new TableEditPluginCode(), pluginList.shortcut && new ShortcutPluginCode(), pluginList.watermark && new WatermarkCode(state.watermarkText), - pluginList.markdown && new MarkdownPluginCode(), + pluginList.markdown && new MarkdownCode(state.markdownOptions), ]); } } diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts index 482c1ff4e3c..4d18e51b5a4 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/SimplePluginCode.ts @@ -51,9 +51,3 @@ export class CustomReplaceCode extends SimplePluginCode { super('CustomReplace', 'roosterjsLegacy'); } } - -export class MarkdownPluginCode extends SimplePluginCode { - constructor() { - super('MarkdownPlugin'); - } -} From 34ac350912b375351412240c21152487dfdcee03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BAlia=20Roldi?= Date: Mon, 1 Apr 2024 17:38:19 -0300 Subject: [PATCH 5/5] fix code pen --- .../sidePane/editorOptions/codes/MarkdownCode.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts b/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts index f7f52bb50b5..f0898881a1e 100644 --- a/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts +++ b/demo/scripts/controlsV2/sidePane/editorOptions/codes/MarkdownCode.ts @@ -7,6 +7,11 @@ export class MarkdownCode extends CodeElement { } getCode() { - return `new roosterjs.MarkdownPlugin('${this.markdownOptions}')`; + return `new roosterjs.MarkdownPlugin({ + bold: ${this.markdownOptions.bold}, + italic: ${this.markdownOptions.italic}, + strikethrough: ${this.markdownOptions.strikethrough}, + codeFormat: ${JSON.stringify(this.markdownOptions.codeFormat)}, + })`; } }