diff --git a/.prettierrc b/.prettierrc index b5da6300b00..516f6fabf47 100644 --- a/.prettierrc +++ b/.prettierrc @@ -6,5 +6,6 @@ "jsxBracketSameLine": true, "semi": true, "bracketSpacing": true, - "endOfLine": "crlf" + "endOfLine": "crlf", + "arrowParens": "avoid" } diff --git a/.vscode/settings.json b/.vscode/settings.json index 5d11d4b8e62..64697c6401c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -13,6 +13,7 @@ "dist/**": true, "stats.json": true }, + "prettier.arrowParens": "avoid", "prettier.singleQuote": true, "editor.formatOnSave": true, "prettier.tabWidth": 4, @@ -21,4 +22,4 @@ "typescript.extension.sortImports.sortOnSave": true, "prettier.jsxBracketSameLine": true, "typescript.extension.sortImports.maxNamedImportsInSingleLine": 4 -} \ No newline at end of file +} diff --git a/packages/roosterjs-editor-api/lib/format/clearBlockFormat.ts b/packages/roosterjs-editor-api/lib/format/clearBlockFormat.ts index 766cc0ce812..e41b5c5c701 100644 --- a/packages/roosterjs-editor-api/lib/format/clearBlockFormat.ts +++ b/packages/roosterjs-editor-api/lib/format/clearBlockFormat.ts @@ -82,11 +82,7 @@ export default function clearBlockFormat( let styles = group.td.getAttribute('style') || ''; let styleArray = styles.split(';'); styleArray = styleArray.filter( - style => - style - .trim() - .toLowerCase() - .indexOf('border') == 0 + style => style.trim().toLowerCase().indexOf('border') == 0 ); styles = styleArray.join(';'); if (styles) { diff --git a/packages/roosterjs-editor-api/lib/test/format/replaceRangeWithNodeTest.ts b/packages/roosterjs-editor-api/lib/test/format/replaceRangeWithNodeTest.ts index 5a8f130b937..8e6f7b6f81c 100644 --- a/packages/roosterjs-editor-api/lib/test/format/replaceRangeWithNodeTest.ts +++ b/packages/roosterjs-editor-api/lib/test/format/replaceRangeWithNodeTest.ts @@ -7,11 +7,11 @@ describe('replaceRangeWithNode replaceRangeWithNode()', () => { let editor: Editor; let nodeID = 'replaceNode'; - beforeEach(function() { + beforeEach(function () { editor = TestHelper.initEditor(testID); }); - afterEach(function() { + afterEach(function () { editor.dispose(); TestHelper.removeElement(testID); TestHelper.removeElement(nodeID); diff --git a/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts b/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts index 8c4a804026a..2597d58b7e8 100644 --- a/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts +++ b/packages/roosterjs-editor-core/lib/corePlugins/DOMEventPlugin.ts @@ -137,9 +137,7 @@ export default class DOMEventPlugin implements EditorPlugin { let range = this.editor.getSelectionRange(); if ( range.collapsed && - Position.getStart(range) - .normalize() - .equalTo(this.cachedPosition) + Position.getStart(range).normalize().equalTo(this.cachedPosition) ) { this.restorePendingFormatState(); } else { diff --git a/packages/roosterjs-editor-core/lib/editor/createEditorCore.ts b/packages/roosterjs-editor-core/lib/editor/createEditorCore.ts index cd81fa8d9be..529db31227f 100644 --- a/packages/roosterjs-editor-core/lib/editor/createEditorCore.ts +++ b/packages/roosterjs-editor-core/lib/editor/createEditorCore.ts @@ -95,13 +95,10 @@ function createCoreApiMap(map?: Partial): CoreApiMap { } function createCustomData(initValue: { [key: string]: any }): CustomDataMap { - return Object.keys(initValue).reduce( - (result, key) => { - result[key] = { - value: initValue[key], - }; - return result; - }, - {} - ); + return Object.keys(initValue).reduce((result, key) => { + result[key] = { + value: initValue[key], + }; + return result; + }, {}); } diff --git a/packages/roosterjs-editor-dom/lib/blockElements/NodeBlockElement.ts b/packages/roosterjs-editor-dom/lib/blockElements/NodeBlockElement.ts index 2a69da679aa..bc81e68e7be 100644 --- a/packages/roosterjs-editor-dom/lib/blockElements/NodeBlockElement.ts +++ b/packages/roosterjs-editor-dom/lib/blockElements/NodeBlockElement.ts @@ -7,7 +7,7 @@ import { BlockElement } from 'roosterjs-editor-types'; * In most cases, it corresponds to an HTML block level element, i.e. P, DIV, LI, TD etc. */ export default class NodeBlockElement implements BlockElement { - constructor(private element: HTMLElement) { } + constructor(private element: HTMLElement) {} /** * Collapse this element to a single DOM element. diff --git a/packages/roosterjs-editor-dom/lib/blockElements/StartEndBlockElement.ts b/packages/roosterjs-editor-dom/lib/blockElements/StartEndBlockElement.ts index 7e767c9e574..fcc18ea1b1b 100644 --- a/packages/roosterjs-editor-dom/lib/blockElements/StartEndBlockElement.ts +++ b/packages/roosterjs-editor-dom/lib/blockElements/StartEndBlockElement.ts @@ -19,7 +19,7 @@ const STRUCTURE_NODE_TAGS = ['TD', 'TH', 'LI', 'BLOCKQUOTE']; * This start and end must be in same sibling level and have same parent in DOM tree */ export default class StartEndBlockElement implements BlockElement { - constructor(private rootNode: Node, private startNode: Node, private endNode: Node) { } + constructor(private rootNode: Node, private startNode: Node, private endNode: Node) {} static getBlockContext(node: Node): HTMLElement { while (node && !isBlockElement(node)) { diff --git a/packages/roosterjs-editor-dom/lib/test/inlineElements/NodeInlineElementTest.ts b/packages/roosterjs-editor-dom/lib/test/inlineElements/NodeInlineElementTest.ts index 5bf764a1d23..5daa43584a6 100644 --- a/packages/roosterjs-editor-dom/lib/test/inlineElements/NodeInlineElementTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/inlineElements/NodeInlineElementTest.ts @@ -237,7 +237,7 @@ describe('NodeInlineElement applyStyle()', () => { let mockColor = 'red'; // Act - element.applyStyle(function(node: HTMLElement) { + element.applyStyle(function (node: HTMLElement) { node.style.color = mockColor; }); diff --git a/packages/roosterjs-editor-dom/lib/test/inlineElements/PartialInelineElementTest.ts b/packages/roosterjs-editor-dom/lib/test/inlineElements/PartialInelineElementTest.ts index 560908cf365..d7509e85083 100644 --- a/packages/roosterjs-editor-dom/lib/test/inlineElements/PartialInelineElementTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/inlineElements/PartialInelineElementTest.ts @@ -522,7 +522,7 @@ describe('PartialInlineElement applyStyle()', () => { ); // Act - partialInlineElement.applyStyle(function(node: HTMLElement) { + partialInlineElement.applyStyle(function (node: HTMLElement) { node.style.color = 'red'; }); diff --git a/packages/roosterjs-editor-dom/lib/test/selections/createRangeTest.ts b/packages/roosterjs-editor-dom/lib/test/selections/createRangeTest.ts index b69ad105c3e..9b0d8bbc704 100644 --- a/packages/roosterjs-editor-dom/lib/test/selections/createRangeTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/selections/createRangeTest.ts @@ -27,7 +27,11 @@ describe('createRange() with nodes', () => { } it('Null', () => { - runTest('', () => [null, null], () => null); + runTest( + '', + () => [null, null], + () => null + ); }); it('Collapsed', () => { diff --git a/packages/roosterjs-editor-dom/lib/test/selections/isPositionAtBeginningOfTest.ts b/packages/roosterjs-editor-dom/lib/test/selections/isPositionAtBeginningOfTest.ts index 43c6f4b9c94..815e340d04d 100644 --- a/packages/roosterjs-editor-dom/lib/test/selections/isPositionAtBeginningOfTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/selections/isPositionAtBeginningOfTest.ts @@ -21,19 +21,43 @@ describe('isPositionAtBeginningOf()', () => { } it('Position is null', () => { - runTest('', () => null, 0, () => null, false); + runTest( + '', + () => null, + 0, + () => null, + false + ); }); it('Target node is null', () => { - runTest('
', () => $('id1'), 0, () => null, false); + runTest( + '
', + () => $('id1'), + 0, + () => null, + false + ); }); it('Is first child', () => { - runTest('
test
', () => $('id1'), 0, () => $('id1'), true); + runTest( + '
test
', + () => $('id1'), + 0, + () => $('id1'), + true + ); }); it('Has space before position', () => { - runTest('
test
', () => $('id1'), 1, () => $('id1'), false); + runTest( + '
test
', + () => $('id1'), + 1, + () => $('id1'), + false + ); runTest( '
​test
', () => $('id1'), @@ -51,8 +75,20 @@ describe('isPositionAtBeginningOf()', () => { }); it('Inside text', () => { - runTest('
test
', () => $('id1').firstChild, 0, () => $('id1'), true); - runTest('
test
', () => $('id1').firstChild, 2, () => $('id1'), false); + runTest( + '
test
', + () => $('id1').firstChild, + 0, + () => $('id1'), + true + ); + runTest( + '
test
', + () => $('id1').firstChild, + 2, + () => $('id1'), + false + ); }); it('Nested node', () => { diff --git a/packages/roosterjs-editor-dom/lib/test/table/VTableTest.ts b/packages/roosterjs-editor-dom/lib/test/table/VTableTest.ts index 1557ae0dd5f..b09b08ff212 100644 --- a/packages/roosterjs-editor-dom/lib/test/table/VTableTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/table/VTableTest.ts @@ -40,8 +40,16 @@ describe('VTable.ctor', () => { undefined, undefined, [ - [[true, false, false], [true, false, false], [true, false, false]], - [[true, false, false], [true, false, false], [true, false, false]], + [ + [true, false, false], + [true, false, false], + [true, false, false], + ], + [ + [true, false, false], + [true, false, false], + [true, false, false], + ], ] ); runTest( @@ -50,8 +58,16 @@ describe('VTable.ctor', () => { 1, 0, [ - [[true, false, false], [true, false, false], [true, false, false]], - [[true, false, false], [true, false, false], [true, false, false]], + [ + [true, false, false], + [true, false, false], + [true, false, false], + ], + [ + [true, false, false], + [true, false, false], + [true, false, false], + ], ] ); }); @@ -67,8 +83,14 @@ describe('VTable.ctor', () => { 1, 1, [ - [[true, false, false], [false, true, false]], - [[true, false, false], [true, false, false]], + [ + [true, false, false], + [false, true, false], + ], + [ + [true, false, false], + [true, false, false], + ], ] ); }); @@ -80,8 +102,14 @@ describe('VTable.ctor', () => { 1, 0, [ - [[true, false, false], [true, false, false]], - [[true, false, false], [false, true, false]], + [ + [true, false, false], + [true, false, false], + ], + [ + [true, false, false], + [false, true, false], + ], ] ); }); @@ -93,8 +121,14 @@ describe('VTable.ctor', () => { 1, 1, [ - [[true, false, false], [true, false, false]], - [[false, false, true], [true, false, false]], + [ + [true, false, false], + [true, false, false], + ], + [ + [false, false, true], + [true, false, false], + ], ] ); }); @@ -106,8 +140,14 @@ describe('VTable.ctor', () => { 0, 1, [ - [[true, false, false], [true, false, false]], - [[true, false, false], [false, false, true]], + [ + [true, false, false], + [true, false, false], + ], + [ + [true, false, false], + [false, false, true], + ], ] ); }); @@ -119,9 +159,21 @@ describe('VTable.ctor', () => { 2, 2, [ - [[true, false, false], [false, true, false], [true, false, false]], - [[false, false, true], [false, true, true], [true, false, false]], - [[true, false, false], [true, false, false], [true, false, false]], + [ + [true, false, false], + [false, true, false], + [true, false, false], + ], + [ + [false, false, true], + [false, true, true], + [true, false, false], + ], + [ + [true, false, false], + [true, false, false], + [true, false, false], + ], ] ); }); @@ -133,9 +185,21 @@ describe('VTable.ctor', () => { 1, 1, [ - [[true, false, false], [true, false, false], [false, true, false]], - [[false, false, true], [true, false, false], [true, false, false]], - [[true, false, false], [false, true, false], [false, false, true]], + [ + [true, false, false], + [true, false, false], + [false, true, false], + ], + [ + [false, false, true], + [true, false, false], + [true, false, false], + ], + [ + [true, false, false], + [false, true, false], + [false, false, true], + ], ] ); }); diff --git a/packages/roosterjs-editor-dom/lib/test/utils/findClosestElementAncestorTest.ts b/packages/roosterjs-editor-dom/lib/test/utils/findClosestElementAncestorTest.ts index 335a249ad22..b76cbfdb778 100644 --- a/packages/roosterjs-editor-dom/lib/test/utils/findClosestElementAncestorTest.ts +++ b/packages/roosterjs-editor-dom/lib/test/utils/findClosestElementAncestorTest.ts @@ -17,10 +17,30 @@ describe('findClosestElementAncestor()', () => { } it('findClosestElementAncestor()', () => { - runTest(0, '', () => null, () => null); - runTest(1, 'test', root => root.firstChild, root => root); - runTest(2, '
', root => root.firstChild, root => root.firstChild as HTMLElement); - runTest(3, '', root => root.firstChild, root => root); + runTest( + 0, + '', + () => null, + () => null + ); + runTest( + 1, + 'test', + root => root.firstChild, + root => root + ); + runTest( + 2, + '
', + root => root.firstChild, + root => root.firstChild as HTMLElement + ); + runTest( + 3, + '', + root => root.firstChild, + root => root + ); }); }); diff --git a/packages/roosterjs-editor-dom/lib/utils/applyFormat.ts b/packages/roosterjs-editor-dom/lib/utils/applyFormat.ts index ded31f733ca..d2fcbe92d32 100644 --- a/packages/roosterjs-editor-dom/lib/utils/applyFormat.ts +++ b/packages/roosterjs-editor-dom/lib/utils/applyFormat.ts @@ -5,10 +5,24 @@ import { DefaultFormat } from 'roosterjs-editor-types'; * @param element The HTML element to apply format to * @param format The format to apply */ -export default function applyFormat(element: HTMLElement, format: DefaultFormat, isDarkMode?: boolean) { +export default function applyFormat( + element: HTMLElement, + format: DefaultFormat, + isDarkMode?: boolean +) { if (format) { let elementStyle = element.style; - let { fontFamily, fontSize, textColor, textColors, backgroundColor, backgroundColors, bold, italic, underline } = format; + let { + fontFamily, + fontSize, + textColor, + textColors, + backgroundColor, + backgroundColors, + bold, + italic, + underline, + } = format; if (fontFamily) { elementStyle.fontFamily = fontFamily; diff --git a/packages/roosterjs-editor-dom/lib/utils/getPendableFormatState.ts b/packages/roosterjs-editor-dom/lib/utils/getPendableFormatState.ts index 7816b953436..18d02316525 100644 --- a/packages/roosterjs-editor-dom/lib/utils/getPendableFormatState.ts +++ b/packages/roosterjs-editor-dom/lib/utils/getPendableFormatState.ts @@ -48,11 +48,8 @@ export const PendableFormatCommandMap: { [key in PendableFormatNames]: DocumentC export default function getPendableFormatState(document: Document): PendableFormatState { let keys = Object.keys(PendableFormatCommandMap) as PendableFormatNames[]; - return keys.reduce( - (state, key) => { - state[key] = document.queryCommandState(PendableFormatCommandMap[key]); - return state; - }, - {} - ); + return keys.reduce((state, key) => { + state[key] = document.queryCommandState(PendableFormatCommandMap[key]); + return state; + }, {}); } diff --git a/packages/roosterjs-editor-plugins/lib/CustomReplace/CustomReplace.ts b/packages/roosterjs-editor-plugins/lib/CustomReplace/CustomReplace.ts index eaa3cf3cf89..8f45088623f 100644 --- a/packages/roosterjs-editor-plugins/lib/CustomReplace/CustomReplace.ts +++ b/packages/roosterjs-editor-plugins/lib/CustomReplace/CustomReplace.ts @@ -150,7 +150,10 @@ export default class CustomReplacePlugin implements EditorPlugin { } function getLongestReplacementSourceLength(replacements: Replacement[]): number { - return Math.max.apply(null, replacements.map(replacement => replacement.sourceString.length)); + return Math.max.apply( + null, + replacements.map(replacement => replacement.sourceString.length) + ); } function getReplacementEndCharacters(replacements: Replacement[]): Set { diff --git a/packages/roosterjs-editor-plugins/lib/HyperLink/HyperLink.ts b/packages/roosterjs-editor-plugins/lib/HyperLink/HyperLink.ts index ebb76e53b8f..af728040e6d 100644 --- a/packages/roosterjs-editor-plugins/lib/HyperLink/HyperLink.ts +++ b/packages/roosterjs-editor-plugins/lib/HyperLink/HyperLink.ts @@ -69,9 +69,10 @@ export default class HyperLink implements EditorPlugin { */ public onPluginEvent(event: PluginEvent): void { if (event.eventType == PluginEventType.MouseUp) { - const anchor = this.editor.getElementAtCursor('A', ( - event.rawEvent.srcElement - )) as HTMLAnchorElement; + const anchor = this.editor.getElementAtCursor( + 'A', + event.rawEvent.srcElement + ) as HTMLAnchorElement; if (anchor) { if (this.onLinkClick && this.onLinkClick(anchor, event.rawEvent) !== false) { diff --git a/packages/roosterjs-editor-plugins/lib/Paste/Paste.ts b/packages/roosterjs-editor-plugins/lib/Paste/Paste.ts index 31148080e23..865daf23fe5 100644 --- a/packages/roosterjs-editor-plugins/lib/Paste/Paste.ts +++ b/packages/roosterjs-editor-plugins/lib/Paste/Paste.ts @@ -129,7 +129,10 @@ export default class Paste implements EditorPlugin { for (let node of nodes) { if (mergeCurrentFormat) { - this.applyToElements(node, this.applyFormatting(clipboardData.originalFormat, this.editor.isDarkMode())); + this.applyToElements( + node, + this.applyFormatting(clipboardData.originalFormat, this.editor.isDarkMode()) + ); } fragment.appendChild(node); } @@ -179,9 +182,11 @@ export default class Paste implements EditorPlugin { }, ChangeSource.Paste); } - private applyFormatting = (format: DefaultFormat, isDarkMode: boolean) => (element: HTMLElement) => { + private applyFormatting = (format: DefaultFormat, isDarkMode: boolean) => ( + element: HTMLElement + ) => { applyFormat(element, format, isDarkMode); - } + }; private applyToElements(node: Node, elementTransform: (element: HTMLElement) => void) { let leaf = getFirstLeafNode(node); @@ -206,14 +211,14 @@ export default class Paste implements EditorPlugin { let format = getFormatState(this.editor); return format ? { - fontFamily: format.fontName, - fontSize: format.fontSize, - textColor: format.textColor, - backgroundColor: format.backgroundColor, - bold: format.isBold, - italic: format.isItalic, - underline: format.isUnderline, - } + fontFamily: format.fontName, + fontSize: format.fontSize, + textColor: format.textColor, + backgroundColor: format.backgroundColor, + bold: format.isBold, + italic: format.isItalic, + underline: format.isUnderline, + } : {}; } diff --git a/packages/roosterjs-editor-plugins/lib/Paste/fragmentHandler.ts b/packages/roosterjs-editor-plugins/lib/Paste/fragmentHandler.ts index a4fd227ea41..d91c9f66d8d 100644 --- a/packages/roosterjs-editor-plugins/lib/Paste/fragmentHandler.ts +++ b/packages/roosterjs-editor-plugins/lib/Paste/fragmentHandler.ts @@ -1,6 +1,8 @@ import convertPastedContentFromExcel from './excelConverter/convertPastedContentFromExcel'; import convertPastedContentFromWord from './wordConverter/convertPastedContentFromWord'; -import convertPastedContentFromWordOnline, { isWordOnlineWithList } from './officeOnlineConverter/convertPastedContentFromWordOnline'; +import convertPastedContentFromWordOnline, { + isWordOnlineWithList, +} from './officeOnlineConverter/convertPastedContentFromWordOnline'; import { WAC_IDENTIFING_SELECTOR } from './officeOnlineConverter/constants'; import { getTagOfNode } from 'roosterjs-editor-dom'; import { splitWithFragment } from 'roosterjs-html-sanitizer'; diff --git a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/ListItemBlock.ts b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/ListItemBlock.ts index b451294fb29..a8c951dfa1e 100644 --- a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/ListItemBlock.ts +++ b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/ListItemBlock.ts @@ -32,5 +32,5 @@ export function createListItemBlock(listItem: Element = null): ListItemBlock { endElement: listItem, insertPositionNode: null, listItemContainers: listItem ? [listItem] : [], - } -} \ No newline at end of file + }; +} diff --git a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/constants.ts b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/constants.ts index b1e3faf4fd0..212da8c8a3a 100644 --- a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/constants.ts +++ b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/constants.ts @@ -1,15 +1,16 @@ export const WORD_ORDERED_LIST_SELECTOR = 'div.ListContainerWrapper > ul[class^="BulletListStyle"]'; -export const WORD_UNORDERED_LIST_SELECTOR = 'div.ListContainerWrapper > ol[class^="NumberListStyle"]'; +export const WORD_UNORDERED_LIST_SELECTOR = + 'div.ListContainerWrapper > ol[class^="NumberListStyle"]'; export const WORD_ONLINE_IDENTIFYING_SELECTOR = `${WORD_ORDERED_LIST_SELECTOR},${WORD_UNORDERED_LIST_SELECTOR}`; -export const LIST_CONTAINER_ELEMENT_CLASS_NAME = "ListContainerWrapper"; +export const LIST_CONTAINER_ELEMENT_CLASS_NAME = 'ListContainerWrapper'; -export const UNORDERED_LIST_TAG_NAME = "UL"; +export const UNORDERED_LIST_TAG_NAME = 'UL'; -export const ORDERED_LIST_TAG_NAME = "OL"; +export const ORDERED_LIST_TAG_NAME = 'OL'; -const TEXT_CONTAINER_ELEMENT_CLASS_NAME = "OutlineElement"; +const TEXT_CONTAINER_ELEMENT_CLASS_NAME = 'OutlineElement'; -export const WAC_IDENTIFING_SELECTOR = `ul[class^="BulletListStyle"]>.${TEXT_CONTAINER_ELEMENT_CLASS_NAME},ol[class^="NumberListStyle"]>.${TEXT_CONTAINER_ELEMENT_CLASS_NAME}`; \ No newline at end of file +export const WAC_IDENTIFING_SELECTOR = `ul[class^="BulletListStyle"]>.${TEXT_CONTAINER_ELEMENT_CLASS_NAME},ol[class^="NumberListStyle"]>.${TEXT_CONTAINER_ELEMENT_CLASS_NAME}`; diff --git a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts index bee28ef22b2..a04d7dccbd2 100644 --- a/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts +++ b/packages/roosterjs-editor-plugins/lib/Paste/officeOnlineConverter/convertPastedContentFromWordOnline.ts @@ -4,7 +4,7 @@ import { WORD_ONLINE_IDENTIFYING_SELECTOR, LIST_CONTAINER_ELEMENT_CLASS_NAME, ORDERED_LIST_TAG_NAME, - UNORDERED_LIST_TAG_NAME + UNORDERED_LIST_TAG_NAME, } from './constants'; import { @@ -13,12 +13,11 @@ import { getFirstLeafNode, getTagOfNode, collapseNodes, - unwrap + unwrap, } from 'roosterjs-editor-dom'; import ListItemBlock, { createListItemBlock } from './ListItemBlock'; - export function isWordOnlineWithList(node: HTMLElement): boolean { return !!(node && node.querySelector(WORD_ONLINE_IDENTIFYING_SELECTOR)); } @@ -61,8 +60,7 @@ export default function convertPastedContentFromWordOnline(doc: HTMLDocument) { sanitizeListItemContainer(doc); const listItemBlocks: ListItemBlock[] = getListItemBlocks(doc); - listItemBlocks.forEach((itemBlock) => { - + listItemBlocks.forEach(itemBlock => { // There are cases where consecutive List Elements are seperated into different divs: //
//
@@ -96,7 +94,7 @@ export default function convertPastedContentFromWordOnline(doc: HTMLDocument) { itemBlock.insertPositionNode = itemBlock.endElement.nextSibling; let convertedListElement: Element; - itemBlock.listItemContainers.forEach((listItemContainer) => { + itemBlock.listItemContainers.forEach(listItemContainer => { let listType: 'OL' | 'UL' = getContainerListType(listItemContainer); // list type that is contained by iterator. // Initialize processed element with propery listType if this is the first element if (!convertedListElement) { @@ -105,7 +103,7 @@ export default function convertPastedContentFromWordOnline(doc: HTMLDocument) { // Get all list items(
  • ) in the current iterator element. const currentListItems = listItemContainer.querySelectorAll('li'); - currentListItems.forEach((item) => { + currentListItems.forEach(item => { // If item is in root level and the type of list changes then // insert the current list into body and then reinitialize the convertedListElement // Word Online is using data-aria-level to determine the the depth of the list item. @@ -128,7 +126,7 @@ export default function convertPastedContentFromWordOnline(doc: HTMLDocument) { // we need to remove all the non processed node from the parent node. const parentContainer = itemBlock.startElement.parentNode; if (parentContainer) { - itemBlock.listItemContainers.forEach((listItemContainer) => { + itemBlock.listItemContainers.forEach(listItemContainer => { parentContainer.removeChild(listItemContainer); }); } @@ -141,8 +139,10 @@ export default function convertPastedContentFromWordOnline(doc: HTMLDocument) { * @param doc pasted document that contains all the list element. */ function sanitizeListItemContainer(doc: HTMLDocument) { - const listItemContainerListEl = doc.querySelectorAll(`${WORD_ORDERED_LIST_SELECTOR}, ${WORD_UNORDERED_LIST_SELECTOR}`); - listItemContainerListEl.forEach((el) => { + const listItemContainerListEl = doc.querySelectorAll( + `${WORD_ORDERED_LIST_SELECTOR}, ${WORD_UNORDERED_LIST_SELECTOR}` + ); + listItemContainerListEl.forEach(el => { const replaceRegex = new RegExp(`\\b${LIST_CONTAINER_ELEMENT_CLASS_NAME}\\b`, 'g'); if (el.previousSibling) { const prevParent = splitParentNode(el, true) as HTMLElement; @@ -166,14 +166,16 @@ function getListItemBlocks(doc: HTMLDocument): ListItemBlock[] { for (let i = 0; i < listElements.length; i++) { let curItem = listElements[i]; if (!curListItemBlock) { - curListItemBlock = createListItemBlock(curItem) + curListItemBlock = createListItemBlock(curItem); } else { const { listItemContainers } = curListItemBlock; const lastItemInCurBlock = listItemContainers[listItemContainers.length - 1]; - if (curItem == lastItemInCurBlock.nextSibling - || getFirstLeafNode(curItem) == getNextLeafSibling(doc.body, lastItemInCurBlock)) { + if ( + curItem == lastItemInCurBlock.nextSibling || + getFirstLeafNode(curItem) == getNextLeafSibling(doc.body, lastItemInCurBlock) + ) { listItemContainers.push(curItem); - curListItemBlock.endElement = curItem + curListItemBlock.endElement = curItem; } else { curListItemBlock.endElement = lastItemInCurBlock; result.push(curListItemBlock); @@ -195,12 +197,17 @@ function getListItemBlocks(doc: HTMLDocument): ListItemBlock[] { * @param listItemBlock The list item block needed to be flattened. */ function flattenListBlock(rootElement: Element, listItemBlock: ListItemBlock) { - const collapsedListItemSections = collapseNodes(rootElement, listItemBlock.startElement, listItemBlock.endElement, true); - collapsedListItemSections.forEach((section) => { + const collapsedListItemSections = collapseNodes( + rootElement, + listItemBlock.startElement, + listItemBlock.endElement, + true + ); + collapsedListItemSections.forEach(section => { if (getTagOfNode(section.firstChild) == 'DIV') { - unwrap(section) + unwrap(section); } - }) + }); } /** @@ -219,9 +226,14 @@ function getContainerListType(listItemContainer: Element): 'OL' | 'UL' | null { * @param itemToInsert List item that needed to be inserted. * @param listType Type of list(ul/ol) */ -function insertListItem(listRootElement: Element, itemToInsert: HTMLElement, listType: string, doc: HTMLDocument): void { +function insertListItem( + listRootElement: Element, + itemToInsert: HTMLElement, + listType: string, + doc: HTMLDocument +): void { if (!listType) { - return + return; } // Get item level from 'data-aria-level' attribute let itemLevel = parseInt(itemToInsert.getAttribute('data-aria-level')); @@ -244,7 +256,7 @@ function insertListItem(listRootElement: Element, itemToInsert: HTMLElement, lis } else { // If the last child is not a list, then append a new list to the level // and move the level iterator to the new level. - curListLevel.append(doc.createElement(listType)) + curListLevel.append(doc.createElement(listType)); curListLevel = curListLevel.lastElementChild; } } @@ -261,7 +273,11 @@ function insertListItem(listRootElement: Element, itemToInsert: HTMLElement, lis * @param rootElement Root element of that contains the converted listItemBlock * @param listItemBlock List item block that was converted. */ -function insertConvertedListToDoc(convertedListElement: Element, rootElement: Element, listItemBlock: ListItemBlock) { +function insertConvertedListToDoc( + convertedListElement: Element, + rootElement: Element, + listItemBlock: ListItemBlock +) { if (!convertedListElement) { return; } @@ -275,9 +291,9 @@ function insertConvertedListToDoc(convertedListElement: Element, rootElement: El } else { const { parentElement } = listItemBlock.startElement; if (parentElement) { - parentElement.appendChild(convertedListElement) + parentElement.appendChild(convertedListElement); } else { rootElement.append(convertedListElement); } } -} \ No newline at end of file +} diff --git a/packages/roosterjs-editor-plugins/lib/test/fragmentHandlerTest.ts b/packages/roosterjs-editor-plugins/lib/test/fragmentHandlerTest.ts index 25e8caf0e85..4a131f6018c 100644 --- a/packages/roosterjs-editor-plugins/lib/test/fragmentHandlerTest.ts +++ b/packages/roosterjs-editor-plugins/lib/test/fragmentHandlerTest.ts @@ -43,7 +43,7 @@ describe('fragmentHandler', () => { '
    • A
    • B
    • C
    ', true, '
    • A
      • B
        • C
    ' - ) + ); }); // @@ -58,7 +58,7 @@ describe('fragmentHandler', () => { '
    • A
    • B
    • C
    • D
    • E
    ', true, '
    • A
      • B
        • C
      • D
        • E
    ' - ) + ); }); // List items on different level with different branch with a combination of @@ -74,8 +74,8 @@ describe('fragmentHandler', () => { '
    • A
    • B
    1. C1
    1. C2
    • D
    ', true, '
    • A
      • B
        1. C1
        2. C2
      • D
    ' - ) - }) + ); + }); }); describe('fragments contains both list and text', () => { @@ -92,7 +92,7 @@ describe('fragmentHandler', () => { '

    asdfasdf

    • A
    • B
    1. C1
    1. C2
    • D

    asdfasdf

    ', true, '

    asdfasdf

    • A
      • B
        1. C1
        2. C2
      • D

    asdfasdf

    ' - ) + ); }); // e.g. diff --git a/packages/roosterjs-editor-types/lib/interface/DefaultFormat.ts b/packages/roosterjs-editor-types/lib/interface/DefaultFormat.ts index e144eb09620..9484367209f 100644 --- a/packages/roosterjs-editor-types/lib/interface/DefaultFormat.ts +++ b/packages/roosterjs-editor-types/lib/interface/DefaultFormat.ts @@ -1,6 +1,5 @@ import ModeIndependentColor from './ModeIndependentColor'; - /** * Default format settings */ diff --git a/packages/roosterjs-html-sanitizer/lib/test/getInheritableStylesTest.ts b/packages/roosterjs-html-sanitizer/lib/test/getInheritableStylesTest.ts index e57f9e84033..49540060a32 100644 --- a/packages/roosterjs-html-sanitizer/lib/test/getInheritableStylesTest.ts +++ b/packages/roosterjs-html-sanitizer/lib/test/getInheritableStylesTest.ts @@ -82,8 +82,5 @@ describe('getInheritableStyles', () => { }); function sort(str: string) { - return str - .split(' ') - .sort() - .join(' '); + return str.split(' ').sort().join(' '); }