[IMP] Core: introduce modifier's level.

Author: Gorash

packages/core/src/Format.ts

@@ -7,7 +7,9 @@ export class Format extends Modifier {
     modifiers = new Modifiers();
     constructor(htmlTag?: string) {
         super();
-        this.htmlTag = htmlTag;
+        if (htmlTag) {
+            this.htmlTag = htmlTag;
+        }
     }
     get name(): string {
         return this.htmlTag.toLowerCase();

packages/core/src/Modifier.ts

@@ -2,6 +2,11 @@ import { Constructor } from '../../utils/src/utils';
 import { VNode } from './VNodes/VNode';
 import { VersionableObject } from './Memory/VersionableObject';
 
+export enum ModifierLevel {
+    LOW,
+    MEDIUM,
+    HIGH,
+}
 export type ModifierTypeguard<T extends Modifier> = (modifier: Modifier) => modifier is T;
 export type ModifierPredicate<T = Modifier | boolean> = T extends Modifier
     ? Constructor<T> | ModifierTypeguard<T>
@@ -17,6 +22,7 @@ export class Modifier extends VersionableObject {
     preserveAfterNode = true; // True to preserve modifier after the node that holds it.
     preserveAfterParagraphBreak = true; // True to preserve modifier after a paragraph break.
     preserveAfterLineBreak = true; // True to preserve modifier after a line break.
+    level = ModifierLevel.MEDIUM;
 
     get name(): string {
         return '';

packages/plugin-char/test/Char.test.ts

@@ -318,8 +318,8 @@ describePlugin(Char, testEditor => {
                     await testEditor(BasicEditor, {
                         contentBefore: '[]a',
                         stepFunction: async (editor: JWEditor) => {
-                            await toggleFormat(editor, BoldFormat);
                             await toggleFormat(editor, UnderlineFormat);
+                            await toggleFormat(editor, BoldFormat);
                             await insertText(editor, 'b');
                         },
                         contentAfter: '<b><u>b[]</u></b>a',

packages/plugin-dom-layout/src/DomLayoutEngine.ts

@@ -195,6 +195,7 @@ export class DomLayoutEngine extends LayoutEngine {
         const cache = (this._rendererCache = await engine.render(
             updatedNodes,
             this._rendererCache,
+            !!this._rendererCache,
         ));
 
         this._domReconciliationEngine.update(

packages/plugin-dom-layout/src/DomReconciliationEngine.ts

@@ -1534,6 +1534,10 @@ export class DomReconciliationEngine {
             }
             if (domNodes.length) {
                 if (domObject.tag) {
+                    const swapNode = domNodes.find(domNode => domNode.contains(parentDomNode));
+                    if (swapNode) {
+                        parentDomNode.parentNode.removeChild(parentDomNode);
+                    }
                     this._insertDomChildren(domNodes, parentDomNode, parentDomNode.firstChild);
                 } else {
                     newNode = true;

packages/plugin-inline/src/Inline.ts

@@ -99,7 +99,7 @@ export class Inline<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<
                 if (!this.cache.modifiers) {
                     this.cache.modifiers = new Modifiers();
                 }
-                this.cache.modifiers.append(new FormatClass());
+                this.cache.modifiers.prepend(FormatClass);
             }
         } else {
             const selectedInlines = range.selectedNodes(InlineNode);

packages/plugin-inline/test/Inline.test.ts

@@ -1,8 +1,10 @@
 import { Format } from '../../core/src/Format';
 import { Attributes } from '../../plugin-xml/src/Attributes';
+import { ModifierLevel } from '../../core/src/Modifier';
 
 export class LinkFormat extends Format {
     preserveAfterParagraphBreak = false;
+    level = ModifierLevel.HIGH;
 
     constructor(url = '#', target = '') {
         super('A');

packages/plugin-link/src/LinkFormat.ts

@@ -510,8 +510,143 @@ export class DomObjectRenderingEngine extends RenderingEngine<DomObject> {
                 renderingUnits.push(this._createUnit(cache, node, rendered));
             }
         }
+        if (cache.optimizeModifiersRendering) {
+            this._optimizeModifiersRendering(cache, renderingUnits);
+        }
+
         return renderingUnits;
     }
+    /**
+     * The modifiers will be sorted to be rendererd with the minimum of tag and keep the hight
+     * modifier level.
+     *
+     * Eg: change this (without space of course):
+     *      <b>
+     *          <i>
+     *              _
+     *              <a href="#">__</a>
+     *          </i>
+     *          <a href="#">_</a>
+     *          <i>
+     *              <a href="#">__</a>
+     *          </i>
+     *      </b>
+     * Into this to keep the link:
+     *      <b>
+     *          <i>_</i>
+     *          <a href="#">
+     *              <i>__</i>
+     *              _
+     *              <i>__</i>
+     *          </a>
+     *      </b>
+     *
+     * @param cache
+     * @param renderingUnits
+     */
+    private _optimizeModifiersRendering(
+        cache: RenderingEngineCache<DomObject>,
+        renderingUnits: RenderingBatchUnit[],
+    ): void {
+        // Clone to use pop after and create the intervales.
+        const unitToModifiers = new Map<RenderingBatchUnit, Modifier[]>();
+        for (const renderingUnit of renderingUnits) {
+            if (renderingUnit) {
+                unitToModifiers.set(renderingUnit, [...renderingUnit[1]]);
+            }
+        }
+
+        // Group by same modifier, then order the modifiers and take care of the level.
+        // Create modifiers interval (Modifier, level, index begin, index end).
+        const intervals: [Modifier[], number, number, number][] = [];
+        for (let i = 0; i < renderingUnits.length; i++) {
+            const renderingUnit = renderingUnits[i];
+            const unitModifiers = unitToModifiers.get(renderingUnit);
+            if (unitModifiers) {
+                while (unitModifiers.length) {
+                    // Take the first modifier and group.
+                    const modifierToSort = unitModifiers.pop();
+                    const level = modifierToSort.level;
+                    if (!level) {
+                        continue;
+                    }
+                    const modifiers: Modifier[] = [modifierToSort];
+                    const groupIndexes: number[] = [0];
+
+                    let next: RenderingBatchUnit;
+                    let nextIndex = i + 1;
+                    while ((next = renderingUnits[nextIndex]) && unitToModifiers.get(next)) {
+                        const modifierIndex = unitToModifiers
+                            .get(next)
+                            .findIndex(modifier =>
+                                this._modifierIsSameAs(cache, modifierToSort, modifier),
+                            );
+                        if (modifierIndex === -1) {
+                            break;
+                        } else {
+                            const modifier = unitToModifiers.get(next)[modifierIndex];
+                            groupIndexes.push(next[1].indexOf(modifier));
+                            modifiers.push(modifier);
+                            unitToModifiers.get(next).splice(modifierIndex, 1);
+                            nextIndex++;
+                        }
+                    }
+                    intervals.push([modifiers, level, i, nextIndex - 1]);
+                }
+            }
+        }
+
+        // Split interval if break an interval with greatest level.
+        for (let i = 0; i < intervals.length; i++) {
+            const self = intervals[i];
+            // Use the same length because the newest are already splitted for this loop.
+            const len = intervals.length;
+            for (let u = 0; u < len; u++) {
+                if (u === i) {
+                    continue;
+                }
+                const other = intervals[u];
+                if (
+                    self[1] > other[1] ||
+                    (self[1] === other[1] && self[3] - self[2] > other[3] - other[2])
+                ) {
+                    // If greatest level or greatest number of VNodes split other modifiers.
+                    if (self[2] > other[2] && self[2] <= other[3] && self[3] > other[3]) {
+                        intervals.push([
+                            other[0].splice(0, other[3] - self[2] + 1),
+                            other[1],
+                            self[2],
+                            other[3],
+                        ]);
+                        other[3] = self[2] - 1;
+                    } else if (self[3] >= other[2] && self[3] < other[3] && self[2] < other[2]) {
+                        intervals.push([
+                            other[0].splice(0, self[3] - other[2] + 1),
+                            other[1],
+                            other[2],
+                            self[3],
+                        ]);
+                        other[2] = self[3] + 1;
+                    }
+                }
+            }
+        }
+
+        // Sort by largest interval.
+        intervals.sort((a, b) => a[3] - a[2] - b[3] + b[2]);
+
+        // Sort the modifiers in unit from the interval order.
+        for (const interval of intervals) {
+            const nodes = [];
+            for (let i = interval[2]; i <= interval[3]; i++) {
+                const modifer = interval[0][i - interval[2]];
+                const modifiers = renderingUnits[i][1];
+                modifiers.splice(modifiers.indexOf(modifer), 1);
+                modifiers.unshift(modifer);
+                nodes.push(renderingUnits[i][0]);
+            }
+        }
+    }
     private _createUnit(
         cache: RenderingEngineCache<DomObject>,
         node: VNode,

packages/plugin-renderer-dom-object/src/DomObjectRenderingEngine.ts

@@ -79,6 +79,7 @@ export class RenderingEngine<T = {}> {
     async render(
         nodes: VNode[],
         cache?: RenderingEngineCache<T>,
+        optimizeModifiersRendering?: boolean,
     ): Promise<RenderingEngineCache<T>> {
         if (!cache) {
             cache = new RenderingEngineCache();
@@ -95,6 +96,9 @@ export class RenderingEngine<T = {}> {
                 },
             };
         }
+        if (typeof optimizeModifiersRendering === 'boolean') {
+            cache.optimizeModifiersRendering = optimizeModifiersRendering;
+        }
 
         const promises = this.renderBatched(
             cache,