Add an experimental feature to allow disabling list chain functionali…

…ty (#1915)
microsoft · Jun 26, 2023 · af52fc7 · af52fc7
1 parent 8ba2318
commit af52fc7
Show file tree

Hide file tree

Showing 11 changed files with 38 additions and 14 deletions.
diff --git a/demo/scripts/controls/sidePane/apiPlayground/vlist/VListPane.tsx b/demo/scripts/controls/sidePane/apiPlayground/vlist/VListPane.tsx
@@ -101,7 +101,8 @@ export default class VListPane extends React.Component<ApiPaneProps, VListPaneSt
         const editor = this.props.getEditor();
         editor.addUndoSnapshot(() => {
             this.state.vlist?.writeBack(
-                editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements)
+                editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements),
+                editor.isFeatureEnabled(ExperimentalFeatures.DisableListChain)
             );
             editor.focus();
             editor.select(this.state.vlist.items[0]?.getNode(), PositionType.Begin);

diff --git a/demo/scripts/controls/sidePane/editorOptions/ContentModelExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ContentModelExperimentalFeatures.tsx
@@ -22,6 +22,7 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
     [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:
         'Add read entities around read only entities to handle browser edge cases.',
     [ExperimentalFeatures.ContentModelPaste]: 'Paste with content model',
+    [ExperimentalFeatures.DisableListChain]: 'Disable list chain functionality',
 };
 
 export default class ContentModelExperimentalFeaturesPane extends React.Component<

diff --git a/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx b/demo/scripts/controls/sidePane/editorOptions/ExperimentalFeatures.tsx
@@ -18,6 +18,7 @@ const FeatureNames: Partial<Record<ExperimentalFeatures, string>> = {
         'Delete a table selected with the table selector pressing Backspace key',
     [ExperimentalFeatures.InlineEntityReadOnlyDelimiters]:
         'Add read entities around read only entities to handle browser edge cases.',
+    [ExperimentalFeatures.DisableListChain]: 'Disable list chain functionality',
 };
 
 export default class ExperimentalFeaturesPane extends React.Component<

diff --git a/packages/roosterjs-editor-api/lib/format/setIndentation.ts b/packages/roosterjs-editor-api/lib/format/setIndentation.ts
@@ -86,7 +86,8 @@ export default function setIndentation(
                             vList.writeBack(
                                 editor.isFeatureEnabled(
                                     ExperimentalFeatures.ReuseAllAncestorListElements
-                                )
+                                ),
+                                editor.isFeatureEnabled(ExperimentalFeatures.DisableListChain)
                             );
                             blockGroups.push([]);
                         }

diff --git a/packages/roosterjs-editor-api/lib/format/setOrderedListNumbering.ts b/packages/roosterjs-editor-api/lib/format/setOrderedListNumbering.ts
@@ -27,7 +27,8 @@ export default function setOrderedListNumbering(
                 if (vList) {
                     vList.split(separator, startNumber);
                     vList.writeBack(
-                        editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements)
+                        editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements),
+                        editor.isFeatureEnabled(ExperimentalFeatures.DisableListChain)
                     );
                 }
             }

diff --git a/packages/roosterjs-editor-api/lib/utils/commitListChains.ts b/packages/roosterjs-editor-api/lib/utils/commitListChains.ts
@@ -14,7 +14,14 @@ export default function commitListChains(editor: IEditor, chains: VListChain[])
         const shouldReuseAllAncestorListElements = editor.isFeatureEnabled(
             ExperimentalFeatures.ReuseAllAncestorListElements
         );
-        chains.forEach(chain => chain.commit(shouldReuseAllAncestorListElements));
+        const shouldDisableListChain = editor.isFeatureEnabled(
+            ExperimentalFeatures.DisableListChain
+        );
+
+        chains.forEach(chain =>
+            chain.commit(shouldReuseAllAncestorListElements, shouldDisableListChain)
+        );
+
         if (start && end) {
             editor.select(start, end);
         }

diff --git a/packages/roosterjs-editor-api/lib/utils/toggleListType.ts b/packages/roosterjs-editor-api/lib/utils/toggleListType.ts
@@ -68,7 +68,8 @@ export default function toggleListType(
                     vList.setListStyleType(orderedStyle, unorderedStyle);
                 }
                 vList.writeBack(
-                    editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements)
+                    editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements),
+                    editor.isFeatureEnabled(ExperimentalFeatures.DisableListChain)
                 );
             }
         },

diff --git a/packages/roosterjs-editor-dom/lib/list/VList.ts b/packages/roosterjs-editor-dom/lib/list/VList.ts
@@ -179,8 +179,9 @@ export default class VList {
      * After that, this VList becomes unavailable because we set this.rootList to null
      *
      * @param shouldReuseAllAncestorListElements Optional - defaults to false.
+     * @param disableListChain Whether we want to disable list chain functionality. @default false
      */
-    writeBack(shouldReuseAllAncestorListElements?: boolean) {
+    writeBack(shouldReuseAllAncestorListElements?: boolean, disableListChain?: boolean) {
         if (!this.rootList) {
             throw new Error('rootList must not be null');
         }
@@ -216,7 +217,7 @@ export default class VList {
                     }
                 }
 
-                if (item.getLevel() == 1 && !item.isDummy()) {
+                if (item.getLevel() == 1 && !item.isDummy() && !disableListChain) {
                     start++;
                 }
             }

diff --git a/packages/roosterjs-editor-dom/lib/list/VListChain.ts b/packages/roosterjs-editor-dom/lib/list/VListChain.ts
@@ -103,19 +103,23 @@ export default class VListChain {
     /**
      * After change the lists, commit the change to all lists in this chain to update the list number,
      * and clear the temporary dataset values added to list node
+     * @param shouldReuseAllAncestorListElements Whether we can parent list item (OL/UL) even if its list type does not match the previous one. @default false
+     * @param disableListChain Whether we want to disable list chain functionality, so splitted list will always restart its number from 1 @default false
      */
-    commit(shouldReuseAllAncestorListElements?: boolean) {
+    commit(shouldReuseAllAncestorListElements?: boolean, disableListChain?: boolean) {
         const lists = this.getLists();
         let lastNumber = 0;
 
         for (let i = 0; i < lists.length; i++) {
             const list = lists[i];
 
-            //If there is a list chain sequence, ensure the list chain keep increasing correctly
-            if (list.start > 1) {
-                list.start = list.start === lastNumber ? lastNumber + 1 : list.start;
-            } else {
-                list.start = lastNumber + 1;
+            if (!disableListChain) {
+                //If there is a list chain sequence, ensure the list chain keep increasing correctly
+                if (list.start > 1) {
+                    list.start = list.start === lastNumber ? lastNumber + 1 : list.start;
+                } else {
+                    list.start = lastNumber + 1;
+                }
             }
 
             const vlist = new VList(list);

diff --git a/packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/listFeatures.ts b/packages/roosterjs-editor-plugins/lib/plugins/ContentEdit/features/listFeatures.ts
@@ -162,7 +162,8 @@ const MergeInNewLine: BuildInEditFeature<PluginKeyboardEvent> = {
                 if (vList && start && end) {
                     vList.setIndentation(start, end, Indentation.Decrease, true /*softOutdent*/);
                     vList.writeBack(
-                        editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements)
+                        editor.isFeatureEnabled(ExperimentalFeatures.ReuseAllAncestorListElements),
+                        editor.isFeatureEnabled(ExperimentalFeatures.DisableListChain)
                     );
                     event.rawEvent.preventDefault();
                 }

diff --git a/packages/roosterjs-editor-types/lib/enum/ExperimentalFeatures.ts b/packages/roosterjs-editor-types/lib/enum/ExperimentalFeatures.ts
@@ -168,4 +168,9 @@ export const enum ExperimentalFeatures {
      * Paste with Content model
      */
     ContentModelPaste = 'ContentModelPaste',
+
+    /**
+     * Disable list chain functionality
+     */
+    DisableListChain = 'DisableListChain',
 }