@ckeditor/ckeditor5-paste-from-office 47.5.0 → 47.6.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-paste-from-office",
-  "version": "47.5.0",
+  "version": "47.6.0-alpha.0",
   "description": "Paste from Office feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,10 +13,10 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "47.5.0",
-    "@ckeditor/ckeditor5-core": "47.5.0",
-    "@ckeditor/ckeditor5-engine": "47.5.0",
-    "ckeditor5": "47.5.0"
+    "@ckeditor/ckeditor5-clipboard": "47.6.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "47.6.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "47.6.0-alpha.0",
+    "ckeditor5": "47.6.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/filters/list.js

@@ -6,7 +6,7 @@
  * @module paste-from-office/filters/list
  */
 import { Matcher, ViewUpcastWriter } from 'ckeditor5/src/engine.js';
-import { convertCssLengthToPx, isPx, toPx } from './utils.js';
+import { convertCssLengthToPx, toPx } from './utils.js';
 /**
  * Transforms Word specific list-like elements to the semantic HTML lists.
  *
@@ -32,9 +32,12 @@ export function transformListItemLikeElementsIntoLists(documentFragment, stylesS
     }
     const encounteredLists = {};
     const stack = [];
+    let topLevelListInfo = createTopLevelListInfo();
     for (const itemLikeElement of itemLikeElements) {
         if (itemLikeElement.indent !== undefined) {
             if (!isListContinuation(itemLikeElement)) {
+                applyIndentationToTopLevelList(writer, stack, topLevelListInfo);
+                topLevelListInfo = createTopLevelListInfo();
                 stack.length = 0;
             }
             // Combined list ID for addressing encounter lists counters.
@@ -61,16 +64,6 @@ export function transformListItemLikeElementsIntoLists(documentFragment, stylesS
                         listStyle.startIndex = encounteredLists[originalListId];
                     }
                     const listElement = createNewEmptyList(listStyle, writer, hasMultiLevelListPlugin);
-                    // Apply list padding only if we have margins for the item and the parent item.
-                    if (isPx(itemLikeElement.marginLeft) &&
-                        (indent == 0 || isPx(stack[indent - 1].marginLeft))) {
-                        let marginLeft = itemLikeElement.marginLeft;
-                        if (indent > 0) {
-                            // Convert the padding from absolute to relative.
-                            marginLeft = toPx(parseFloat(marginLeft) - parseFloat(stack[indent - 1].marginLeft));
-                        }
-                        writer.setStyle('padding-left', marginLeft, listElement);
-                    }
                     // Insert the new OL/UL.
                     if (stack.length == 0) {
                         const parent = itemLikeElement.element.parent;
@@ -96,6 +89,7 @@ export function transformListItemLikeElementsIntoLists(documentFragment, stylesS
             // Use LI if it is already it or create a new LI element.
             // https://github.com/ckeditor/ckeditor5/issues/15964
             const listItem = itemLikeElement.element.name == 'li' ? itemLikeElement.element : writer.createElement('li');
+            applyListItemMarginLeftAndUpdateTopLevelInfo(writer, stack, topLevelListInfo, itemLikeElement, listItem, indent);
             // Append the LI to OL/UL.
             writer.appendChild(listItem, stack[indent].listElement);
             stack[indent].listItemElements.push(listItem);
@@ -127,6 +121,70 @@ export function transformListItemLikeElementsIntoLists(documentFragment, stylesS
             }
         }
     }
+    applyIndentationToTopLevelList(writer, stack, topLevelListInfo);
+}
+function applyListItemMarginLeftAndUpdateTopLevelInfo(writer, stack, topLevelListInfo, itemLikeElement, listItem, indent) {
+    if (itemLikeElement.marginLeft === undefined) {
+        // If at least one of the list items at indent = 0 does not have margin-left style, we cannot set margin-left on the list.
+        if (indent == 0) {
+            topLevelListInfo.canApplyMarginOnList = false;
+        }
+        return;
+    }
+    const listItemBlockMarginLeft = parseFloat(itemLikeElement.marginLeft);
+    let currentListBlockIndent = 0;
+    if (stack.length > 1) {
+        const prevStackLevelItems = stack[stack.length - 2].listItemElements;
+        if (prevStackLevelItems.length > 0) {
+            // The margin-left style of the previous indent level last item is already a relative value applied in the previous iteration.
+            const lastItemMargin = prevStackLevelItems[prevStackLevelItems.length - 1].getStyle('margin-left');
+            if (lastItemMargin !== undefined) {
+                currentListBlockIndent += parseFloat(lastItemMargin);
+            }
+        }
+    }
+    // Add 40px for each indent level because by default HTML lists have 40px indentation (padding-inline-start: 40px).
+    // So every nested list is indented by another 40px.
+    // Additionally, the nested list itself may be placed in a list item with margin-left style.
+    currentListBlockIndent += stack.length * 40;
+    // Calculate relative list item indentation to the list it is in.
+    const adjustedListItemIndent = listItemBlockMarginLeft - currentListBlockIndent;
+    const listItemBlockMarginLeftPx = adjustedListItemIndent !== 0 ? toPx(adjustedListItemIndent) : undefined;
+    if (listItemBlockMarginLeftPx) {
+        writer.setStyle('margin-left', listItemBlockMarginLeftPx, listItem);
+        if (indent == 0 && topLevelListInfo.canApplyMarginOnList) {
+            if (topLevelListInfo.marginLeft === undefined) {
+                topLevelListInfo.marginLeft = listItemBlockMarginLeftPx;
+            }
+            if (listItemBlockMarginLeftPx !== topLevelListInfo.marginLeft) {
+                topLevelListInfo.canApplyMarginOnList = false;
+            }
+            topLevelListInfo.topLevelListItemElements.push(listItem);
+        }
+    }
+}
+function createTopLevelListInfo() {
+    return {
+        marginLeft: undefined,
+        canApplyMarginOnList: true,
+        topLevelListItemElements: []
+    };
+}
+/**
+ * Sets margin-left style to the top-level list if all its items have the same margin-left.
+ * If margin-left is set on the list, it is removed from all its items to avoid doubling of margins.
+ */
+function applyIndentationToTopLevelList(writer, stack, topLevelListInfo) {
+    if (topLevelListInfo.canApplyMarginOnList &&
+        topLevelListInfo.marginLeft &&
+        topLevelListInfo.topLevelListItemElements.length > 0) {
+        // Apply margin-left to the top-level list if all its items have the same margin-left.
+        writer.setStyle('margin-left', topLevelListInfo.marginLeft, stack[0].listElement);
+        // Remove margin-left from all top-level list items.
+        for (const topLevelListItem of topLevelListInfo.topLevelListItemElements) {
+            writer.removeStyle('margin-left', topLevelListItem);
+        }
+    }
 }
 /**
  * Removes paragraph wrapping content inside a list item.