diff --git a/demo/index.html b/demo/index.html
index 623529f84ad..f655db7f2d4 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,8 +18,8 @@
-
-
+
+
diff --git a/index.html b/index.html
index 0b65d8b15ce..daf62dcaad3 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@
-
-
+
+
diff --git a/packages/roosterjs-editor-api/test/format/clearFormatTest.ts b/packages/roosterjs-editor-api/test/format/clearFormatTest.ts
index 49955f5ddeb..b2dd8da217d 100644
--- a/packages/roosterjs-editor-api/test/format/clearFormatTest.ts
+++ b/packages/roosterjs-editor-api/test/format/clearFormatTest.ts
@@ -39,7 +39,7 @@ describe('clearFormat()', () => {
// Assert
expect(editor.getContent()).toBe(
- 'text
'
+ 'text
'
);
});
@@ -63,7 +63,7 @@ describe('clearFormat()', () => {
// Assert
expect(editor.getContent()).toBe(
- ''
+ ''
);
});
@@ -97,7 +97,7 @@ describe('clearFormat()', () => {
// Assert
expect(editor.getContent()).toBe(
- ''
+ ''
);
}
);
@@ -116,7 +116,7 @@ describe('clearFormat()', () => {
// Assert
expect(editor.getContent()).toBe(
- 'This is a test text with Hyperlink.'
+ 'This is a test text with Hyperlink.'
);
}
);
@@ -280,7 +280,7 @@ describe('clearAutodetectFormat Partial Tests', () => {
const originalText =
'';
const expectedFormat =
- 'Header middle text 1';
+ 'Header middle text 1';
editor.setContent(originalText);
let header = doc.getElementById('testHeader');
@@ -300,7 +300,7 @@ describe('clearAutodetectFormat Partial Tests', () => {
const originalContent =
'
- item 1
- Item 2
- Sdasd
- asdasd
';
const expectedFormat =
- '
- item 1
- Item 2
- Sdasd
- asdasd
';
+ '
- item 1
- Item 2
- Sdasd
- asdasd
';
editor.setContent(originalContent);
const ul = doc.getElementsByTagName('ul')[0];
@@ -365,7 +365,7 @@ describe('clearAutodetectFormat tests with defaultFormat | ', () => {
'removes all text and structure format when selecting all the document',
() => {
const expectedFormat =
- 'Test
Text in Arial font-family
Text in paragraph
Header middle text 1
item 1
Item 2
Sdasd
asdasd
kjjkjk
';
+ 'Test
Text in Arial font-family
Text in paragraph
Header middle text 1
item 1
Item 2
Sdasd
asdasd
kjjkjk
';
runTest(ALL_CONTENT_TEST, expectedFormat, () => {
let start = doc.getElementById('start');
@@ -384,7 +384,7 @@ describe('clearAutodetectFormat tests with defaultFormat | ', () => {
const originalText =
'';
const expectedFormat =
- 'Header middle text 1
';
+ 'Header middle text 1
';
runTest(originalText, expectedFormat, () => {
const header = doc.getElementById('testHeader');
@@ -402,7 +402,7 @@ describe('clearAutodetectFormat tests with defaultFormat | ', () => {
const originalContent =
'
';
const expectedFormat =
- '
Text in paragraph
Header middle text 1
';
+ '
Text in paragraph
Header middle text 1
';
runTest(originalContent, expectedFormat, () => {
const paragraph = doc.getElementById('testP');
@@ -422,7 +422,7 @@ describe('clearAutodetectFormat tests with defaultFormat | ', () => {
const originalContent =
'
- item 2 with more text
- Item 2
- Sdasd
- asdasd
';
const expectedFormat =
- '
item 2 with more text
';
+ '
item 2 with more text
';
runTest(originalContent, expectedFormat, () => {
const ul = doc.getElementsByTagName('ul')[0];
const li = ul.children[0];
@@ -451,7 +451,7 @@ describe('clearAutodetectFormat tests with defaultFormat | ', () => {
},
() => {
const expectedFormat =
- ' asdfadf
';
+ ' asdfadf
';
let table: HTMLTableElement = doc.getElementById('testTable') as HTMLTableElement;
let cell = table.rows[0].cells[2];
table = doc.getElementsByTagName('table')[0] as HTMLTableElement;
diff --git a/packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts b/packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts
index da56310de91..e0b06e9526f 100644
--- a/packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts
+++ b/packages/roosterjs-editor-core/lib/corePlugins/LifecyclePlugin.ts
@@ -1,6 +1,5 @@
-import { Browser, getComputedStyles, getObjectKeys, setColor } from 'roosterjs-editor-dom';
+import { Browser, getObjectKeys, setColor } from 'roosterjs-editor-dom';
import {
- DefaultFormat,
DocumentCommand,
EditorOptions,
IEditor,
@@ -53,7 +52,6 @@ export default class LifecyclePlugin implements PluginWithState void) | null = null;
private disposer: (() => void) | null = null;
private adjustColor: () => void;
@@ -65,7 +63,6 @@ export default class LifecyclePlugin implements PluginWithState color);
+ const defaultFormat = options.defaultFormat ? { ...options.defaultFormat } : null;
+
+ if (defaultFormat) {
+ if (defaultFormat.textColor && !defaultFormat.textColors) {
+ defaultFormat.textColors = {
+ lightModeColor: defaultFormat.textColor,
+ darkModeColor: getDarkColor(defaultFormat.textColor),
+ };
+ delete defaultFormat.textColor;
+ }
+
+ if (defaultFormat.backgroundColor && !defaultFormat.backgroundColors) {
+ defaultFormat.backgroundColors = {
+ lightModeColor: defaultFormat.backgroundColor,
+ darkModeColor: getDarkColor(defaultFormat.backgroundColor),
+ };
+ delete defaultFormat.backgroundColor;
+ }
+ }
+
this.state = {
customData: {},
- defaultFormat: options.defaultFormat ?? null,
+ defaultFormat,
isDarkMode: !!options.inDarkMode,
- getDarkColor: options.getDarkColor ?? ((color: string) => color),
+ getDarkColor,
onExternalContentTransform: options.onExternalContentTransform ?? null,
experimentalFeatures: options.experimentalFeatures || [],
shadowEditFragment: null,
@@ -133,9 +151,6 @@ export default class LifecyclePlugin implements PluginWithState{};
- const defaultFormat = this.contentDivFormat;
-
- this.state.defaultFormat = {
- fontFamily: fontFamily || defaultFormat[0],
- fontSize: fontSize || defaultFormat[1],
- get textColor() {
- return textColors
- ? isDarkMode
- ? textColors.darkModeColor
- : textColors.lightModeColor
- : textColor || defaultFormat[2];
- },
- textColors: textColors,
- get backgroundColor() {
- return backgroundColors
- ? isDarkMode
- ? backgroundColors.darkModeColor
- : backgroundColors.lightModeColor
- : backgroundColor || '';
- },
- backgroundColors: backgroundColors,
- bold: bold,
- italic: italic,
- underline: underline,
- };
- }
}
diff --git a/packages/roosterjs-editor-core/test/corePlugins/lifecyclePluginTest.ts b/packages/roosterjs-editor-core/test/corePlugins/lifecyclePluginTest.ts
index a3ec8991da5..66ff6c30c5a 100644
--- a/packages/roosterjs-editor-core/test/corePlugins/lifecyclePluginTest.ts
+++ b/packages/roosterjs-editor-core/test/corePlugins/lifecyclePluginTest.ts
@@ -1,11 +1,5 @@
import LifecyclePlugin from '../../lib/corePlugins/LifecyclePlugin';
-import {
- ChangeSource,
- IEditor,
- NodePosition,
- PluginEventType,
- DarkColorHandler,
-} from 'roosterjs-editor-types';
+import { DarkColorHandler, IEditor, PluginEventType } from 'roosterjs-editor-types';
describe('LifecyclePlugin', () => {
const getDarkColor = (color: string) => color;
@@ -22,24 +16,11 @@ describe('LifecyclePlugin', () => {
getDarkColorHandler: () => null,
}));
- expect(state.defaultFormat.textColor).toBe('');
- expect(state.defaultFormat.backgroundColor).toBe('');
-
- // Reset these getters, we can ignore them since we have already verified them
- delete state.defaultFormat.textColor;
- delete state.defaultFormat.backgroundColor;
+ expect(state.defaultFormat).toBeNull();
expect(state).toEqual({
customData: {},
- defaultFormat: {
- fontFamily: '',
- fontSize: '',
- textColors: undefined,
- backgroundColors: undefined,
- bold: undefined,
- italic: undefined,
- underline: undefined,
- },
+ defaultFormat: null,
isDarkMode: false,
onExternalContentTransform: null,
experimentalFeatures: [],
@@ -87,14 +68,6 @@ describe('LifecyclePlugin', () => {
customData: {},
defaultFormat: {
fontFamily: 'arial',
- fontSize: '',
- textColor: '',
- textColors: undefined,
- backgroundColor: '',
- backgroundColors: undefined,
- bold: undefined,
- italic: undefined,
- underline: undefined,
},
isDarkMode: false,
onExternalContentTransform: null,
@@ -161,197 +134,3 @@ describe('LifecyclePlugin', () => {
expect(div.isContentEditable).toBeFalse();
});
});
-
-describe('recalculateDefaultFormat', () => {
- let div: HTMLDivElement;
- let plugin: LifecyclePlugin;
-
- beforeEach(() => {
- div = document.createElement('div');
- document.body.appendChild(div);
- div.style.fontFamily = 'arial';
- div.style.fontSize = '14pt';
- div.style.color = 'black';
- });
-
- afterEach(() => {
- document.body.removeChild(div);
- div = null;
- });
-
- it('get default format', () => {
- plugin = new LifecyclePlugin({}, div);
- expect(plugin.getState().defaultFormat).toBeNull();
- });
-
- it('no default format, light mode', () => {
- plugin = new LifecyclePlugin({}, div);
- plugin.initialize(({
- setContent: () => {},
- triggerPluginEvent: () => {},
- getFocusedPosition: () => null,
- getDarkColorHandler: () => null,
- }));
-
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(0, 0, 0)',
- textColors: undefined,
- backgroundColor: '',
- backgroundColors: undefined,
- bold: undefined,
- italic: undefined,
- underline: undefined,
- });
- });
-
- it('no default format, dark mode', () => {
- plugin = new LifecyclePlugin({ inDarkMode: true }, div);
- plugin.initialize(({
- setContent: () => {},
- triggerPluginEvent: () => {},
- getFocusedPosition: () => null,
- getDarkColorHandler: () => null,
- }));
-
- // First time it initials the default format
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(0, 0, 0)',
- textColors: undefined,
- backgroundColor: '',
- backgroundColors: undefined,
- bold: undefined,
- italic: undefined,
- underline: undefined,
- });
-
- // Second time it calculate default format for dark mode
- plugin.onPluginEvent({
- eventType: PluginEventType.ContentChanged,
- source: ChangeSource.SwitchToDarkMode,
- });
- expect(plugin.getState().isDarkMode).toBeTrue();
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(255,255,255)',
- textColors: {
- darkModeColor: 'rgb(255,255,255)',
- lightModeColor: 'rgb(0,0,0)',
- },
- backgroundColor: 'rgb(51,51,51)',
- backgroundColors: {
- darkModeColor: 'rgb(51,51,51)',
- lightModeColor: 'rgb(255,255,255)',
- },
- bold: undefined,
- italic: undefined,
- underline: undefined,
- });
- });
-
- it('has default format, light mode', () => {
- plugin = new LifecyclePlugin(
- {
- defaultFormat: {
- bold: true,
- fontFamily: 'arial',
- },
- },
- div
- );
- plugin.initialize(({
- setContent: () => {},
- triggerPluginEvent: () => {},
- getFocusedPosition: () => null,
- getDarkColorHandler: () => null,
- }));
-
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(0, 0, 0)',
- textColors: undefined,
- backgroundColor: '',
- backgroundColors: undefined,
- bold: true,
- italic: undefined,
- underline: undefined,
- });
- });
-
- it('has default format, dark mode', () => {
- plugin = new LifecyclePlugin(
- {
- inDarkMode: true,
- defaultFormat: {
- bold: true,
- fontFamily: 'arial',
- },
- },
- div
- );
- plugin.initialize(({
- setContent: () => {},
- triggerPluginEvent: () => {},
- getFocusedPosition: () => null,
- getDarkColorHandler: () => null,
- }));
-
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(255,255,255)',
- textColors: { darkModeColor: 'rgb(255,255,255)', lightModeColor: 'rgb(0,0,0)' },
- backgroundColor: 'rgb(51,51,51)',
- backgroundColors: {
- darkModeColor: 'rgb(51,51,51)',
- lightModeColor: 'rgb(255,255,255)',
- },
- bold: true,
- italic: undefined,
- underline: undefined,
- });
- });
-
- it('has empty default format', () => {
- plugin = new LifecyclePlugin(
- {
- defaultFormat: {},
- },
- div
- );
- plugin.initialize(({
- setContent: () => {},
- triggerPluginEvent: () => {},
- getFocusedPosition: () => null,
- getDarkColorHandler: () => null,
- }));
-
- expect(plugin.getState().defaultFormat).toEqual({});
-
- plugin.onPluginEvent({
- eventType: PluginEventType.ContentChanged,
- source: ChangeSource.SwitchToDarkMode,
- });
-
- expect(plugin.getState().isDarkMode).toBeTrue();
- expect(plugin.getState().defaultFormat).toEqual({
- fontFamily: 'arial',
- fontSize: '14pt',
- textColor: 'rgb(255,255,255)',
- textColors: { darkModeColor: 'rgb(255,255,255)', lightModeColor: 'rgb(0,0,0)' },
- backgroundColor: 'rgb(51,51,51)',
- backgroundColors: {
- darkModeColor: 'rgb(51,51,51)',
- lightModeColor: 'rgb(255,255,255)',
- },
- bold: undefined,
- italic: undefined,
- underline: undefined,
- });
- });
-});