@ckeditor/ckeditor5-paste-from-office 47.2.0 → 47.3.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-paste-from-office",
-  "version": "47.2.0",
+  "version": "47.3.0-alpha.1",
   "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.2.0",
-    "@ckeditor/ckeditor5-core": "47.2.0",
-    "@ckeditor/ckeditor5-engine": "47.2.0",
-    "ckeditor5": "47.2.0"
+    "@ckeditor/ckeditor5-clipboard": "47.3.0-alpha.1",
+    "@ckeditor/ckeditor5-core": "47.3.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "47.3.0-alpha.1",
+    "ckeditor5": "47.3.0-alpha.1"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/filters/table.d.ts

@@ -9,7 +9,8 @@ import { type ViewUpcastWriter, type ViewDocumentFragment } from 'ckeditor5/src/
 /**
  * Applies border none for table and cells without a border specified.
  * Normalizes style length units to px.
+ * Handles left block table alignment.
  *
  * @internal
  */
-export declare function transformTables(documentFragment: ViewDocumentFragment, writer: ViewUpcastWriter): void;
+export declare function transformTables(documentFragment: ViewDocumentFragment, writer: ViewUpcastWriter, hasTablePropertiesPlugin?: boolean, hasExtendedTableBlockAlignment?: boolean): void;

package/src/filters/table.js

@@ -6,16 +6,47 @@ import { convertCssLengthToPx } from './utils.js';
 /**
  * Applies border none for table and cells without a border specified.
  * Normalizes style length units to px.
+ * Handles left block table alignment.
  *
  * @internal
  */
-export function transformTables(documentFragment, writer) {
+export function transformTables(documentFragment, writer, hasTablePropertiesPlugin = false, hasExtendedTableBlockAlignment = false) {
     for (const item of writer.createRangeIn(documentFragment).getItems()) {
         if (!item.is('element', 'table') &&
             !item.is('element', 'td') &&
             !item.is('element', 'th')) {
             continue;
         }
+        // In MS Word, left-aligned tables (default) have no align attribute on the `<table>` and are not wrapped in a `<div>`.
+        // In such cases, we need to set `margin-left: 0` and `margin-right: auto` to indicate to the editor that
+        // the table is block-aligned to the left.
+        //
+        // Center- and right-aligned tables in MS Word are wrapped in a `<div>` with the `align` attribute set to
+        // `center` or `right`, respectively with no align attribute on the `<table>` itself.
+        //
+        // Additionally, the structure may change when pasting content from MS Word.
+        // Some browsers (e.g., Safari) may insert extra elements around the table (e.g., a <span>),
+        // so the surrounding `<div>` with the `align` attribute may end up being the table's grandparent.
+        if (hasTablePropertiesPlugin && hasExtendedTableBlockAlignment && item.is('element', 'table')) {
+            const directParent = item.parent?.is('element', 'div') ? item.parent : null;
+            const grandParent = item.parent?.parent?.is('element', 'div') ? item.parent.parent : null;
+            const divParent = directParent ?? grandParent;
+            // Center block table alignment.
+            if (divParent && divParent.getAttribute('align') === 'center' && !item.getAttribute('align')) {
+                writer.setStyle('margin-left', 'auto', item);
+                writer.setStyle('margin-right', 'auto', item);
+            }
+            // Right block table alignment.
+            else if (divParent && divParent.getAttribute('align') === 'right' && !item.getAttribute('align')) {
+                writer.setStyle('margin-left', 'auto', item);
+                writer.setStyle('margin-right', '0', item);
+            }
+            // Left block table alignment.
+            else if (!divParent && !item.getAttribute('align')) {
+                writer.setStyle('margin-left', '0', item);
+                writer.setStyle('margin-right', 'auto', item);
+            }
+        }
         const sides = ['left', 'top', 'right', 'bottom'];
         // As this is a pasted table, we do not want default table styles to apply here
         // so we set border node for sides that does not have any border style.

package/src/normalizers/mswordnormalizer.d.ts

@@ -10,12 +10,14 @@ import type { PasteFromOfficeNormalizer, PasteFromOfficeNormalizerData } from '.
 export declare class PasteFromOfficeMSWordNormalizer implements PasteFromOfficeNormalizer {
     readonly document: ViewDocument;
     readonly hasMultiLevelListPlugin: boolean;
+    readonly hasTablePropertiesPlugin: boolean;
+    readonly hasExtendedTableBlockAlignment: boolean;
     /**
      * Creates a new `PasteFromOfficeMSWordNormalizer` instance.
      *
      * @param document View document.
      */
-    constructor(document: ViewDocument, hasMultiLevelListPlugin?: boolean);
+    constructor(document: ViewDocument, hasMultiLevelListPlugin?: boolean, hasTablePropertiesPlugin?: boolean, hasExtendedTableBlockAlignment?: boolean);
     /**
      * @inheritDoc
      */

package/src/normalizers/mswordnormalizer.js

@@ -21,14 +21,18 @@ const msWordMatch2 = /xmlns:o="urn:schemas-microsoft-com/i;
 export class PasteFromOfficeMSWordNormalizer {
     document;
     hasMultiLevelListPlugin;
+    hasTablePropertiesPlugin;
+    hasExtendedTableBlockAlignment;
     /**
      * Creates a new `PasteFromOfficeMSWordNormalizer` instance.
      *
      * @param document View document.
      */
-    constructor(document, hasMultiLevelListPlugin = false) {
+    constructor(document, hasMultiLevelListPlugin = false, hasTablePropertiesPlugin = false, hasExtendedTableBlockAlignment = false) {
         this.document = document;
         this.hasMultiLevelListPlugin = hasMultiLevelListPlugin;
+        this.hasTablePropertiesPlugin = hasTablePropertiesPlugin;
+        this.hasExtendedTableBlockAlignment = hasExtendedTableBlockAlignment;
     }
     /**
      * @inheritDoc
@@ -45,7 +49,7 @@ export class PasteFromOfficeMSWordNormalizer {
         transformBookmarks(documentFragment, writer);
         transformListItemLikeElementsIntoLists(documentFragment, stylesString, this.hasMultiLevelListPlugin);
         replaceImagesSourceWithBase64(documentFragment, data.dataTransfer.getData('text/rtf'));
-        transformTables(documentFragment, writer);
+        transformTables(documentFragment, writer, this.hasTablePropertiesPlugin, this.hasExtendedTableBlockAlignment);
         removeInvalidTableWidth(documentFragment, writer);
         replaceMSFootnotes(documentFragment, writer);
         removeMSAttributes(documentFragment);

package/src/pastefromoffice.js

@@ -65,7 +65,9 @@ export class PasteFromOffice extends Plugin {
         const viewDocument = editor.editing.view.document;
         const normalizers = [];
         const hasMultiLevelListPlugin = this.editor.plugins.has('MultiLevelList');
-        normalizers.push(new PasteFromOfficeMSWordNormalizer(viewDocument, hasMultiLevelListPlugin));
+        const hasTablePropertiesPlugin = this.editor.plugins.has('TableProperties');
+        const hasExtendedTableBlockAlignment = !!this.editor.config.get('experimentalFlags.useExtendedTableBlockAlignment');
+        normalizers.push(new PasteFromOfficeMSWordNormalizer(viewDocument, hasMultiLevelListPlugin, hasTablePropertiesPlugin, hasExtendedTableBlockAlignment));
         normalizers.push(new GoogleDocsNormalizer(viewDocument));
         normalizers.push(new GoogleSheetsNormalizer(viewDocument));
         clipboardPipeline.on('inputTransformation', (evt, data) => {