@atlaskit/editor-plugin-table 7.25.6 → 7.25.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.7
+
+### Patch Changes
+
+- [`ccee8f7d5cdfe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ccee8f7d5cdfe) -
+  ED-24623 Added alignment logic to fallback DOM
+
 ## 7.25.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -18,6 +18,7 @@ var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _types = require("../types");
 var _alignment = require("../utils/alignment");
+var _tableContainerStyles = require("./table-container-styles");
 var _TableResizer = require("./TableResizer");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -39,14 +40,6 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     "data-testid": "table-container"
   }, children);
 });
-var centerAlignStyle = {
-  display: 'flex',
-  justifyContent: 'center'
-};
-var leftAlignStyle = {
-  display: 'flex',
-  justifyContent: 'flex-start'
-};
 var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var node = _ref2.node,
     children = _ref2.children,
@@ -77,7 +70,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorView, tableState, node]);
   var style = (0, _react.useMemo)(function () {
-    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+    return (0, _tableContainerStyles.getAlignmentStyle)(alignment);
   }, [alignment]);
   return (
     /*#__PURE__*/

package/dist/cjs/nodeviews/table-container-styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAlignmentStyle = void 0;
+var _alignment = require("../utils/alignment");
+var centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+var leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+var getAlignmentStyle = exports.getAlignmentStyle = function getAlignmentStyle(alignment) {
+  return alignment === _alignment.ALIGN_START ? leftAlignStyle : centerAlignStyle;
+};

package/dist/cjs/toDOM.js

@@ -6,10 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableNodeSpecWithFixedToDOM = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tableContainerStyles = require("./nodeviews/table-container-styles");
 var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -20,6 +23,12 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   return _objectSpread(_objectSpread({}, _adfSchema.table), {}, {
     toDOM: function toDOM(node) {
       var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, node.attrs.width);
+      var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+          k = _ref2[0],
+          v = _ref2[1];
+        return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
+      }).join(';');
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -65,7 +74,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }
       var tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
-        style: 'display: flex; justify-content: center;'
+        style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
         style: "width: ".concat(node.attrs.width, "px")

package/dist/es2019/nodeviews/TableContainer.js

@@ -9,6 +9,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
+import { getAlignmentStyle } from './table-container-styles';
 import { TableResizer } from './TableResizer';
 export const InnerContainer = /*#__PURE__*/forwardRef(({
   className,
@@ -29,14 +30,6 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-testid": "table-container"
   }, children);
 });
-const centerAlignStyle = {
-  display: 'flex',
-  justifyContent: 'center'
-};
-const leftAlignStyle = {
-  display: 'flex',
-  justifyContent: 'flex-start'
-};
 const AlignmentTableContainer = ({
   node,
   children,
@@ -73,7 +66,7 @@ const AlignmentTableContainer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorView, tableState, node]);
   const style = useMemo(() => {
-    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+    return getAlignmentStyle(alignment);
   }, [alignment]);
   return (
     /*#__PURE__*/

package/dist/es2019/nodeviews/table-container-styles.js

@@ -0,0 +1,10 @@
+import { ALIGN_START } from '../utils/alignment';
+const centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+const leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+export const getAlignmentStyle = alignment => alignment === ALIGN_START ? leftAlignStyle : centerAlignStyle;

package/dist/es2019/toDOM.js

@@ -1,6 +1,8 @@
+import kebabCase from 'lodash/kebabCase';
 import { table } from '@atlaskit/adf-schema';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 export const tableNodeSpecWithFixedToDOM = config => {
   if (!fg('platform_editor_lazy-node-views')) {
@@ -10,6 +12,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
     ...table,
     toDOM: node => {
       const editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
+      const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -55,7 +58,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }
       const tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
-        style: 'display: flex; justify-content: center;'
+        style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
         style: `width: ${node.attrs.width}px`

package/dist/esm/nodeviews/TableContainer.js

@@ -10,6 +10,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
+import { getAlignmentStyle } from './table-container-styles';
 import { TableResizer } from './TableResizer';
 export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -29,14 +30,6 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-var centerAlignStyle = {
-  display: 'flex',
-  justifyContent: 'center'
-};
-var leftAlignStyle = {
-  display: 'flex',
-  justifyContent: 'flex-start'
-};
 var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var node = _ref2.node,
     children = _ref2.children,
@@ -67,7 +60,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorView, tableState, node]);
   var style = useMemo(function () {
-    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+    return getAlignmentStyle(alignment);
   }, [alignment]);
   return (
     /*#__PURE__*/

package/dist/esm/nodeviews/table-container-styles.js

@@ -0,0 +1,12 @@
+import { ALIGN_START } from '../utils/alignment';
+var centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+var leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+export var getAlignmentStyle = function getAlignmentStyle(alignment) {
+  return alignment === ALIGN_START ? leftAlignStyle : centerAlignStyle;
+};

package/dist/esm/toDOM.js

@@ -1,10 +1,13 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import kebabCase from 'lodash/kebabCase';
 import { table } from '@atlaskit/adf-schema';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   if (!fg('platform_editor_lazy-node-views')) {
@@ -13,6 +16,12 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
   return _objectSpread(_objectSpread({}, table), {}, {
     toDOM: function toDOM(node) {
       var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
+      var alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          k = _ref2[0],
+          v = _ref2[1];
+        return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
+      }).join(';');
       var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -58,7 +67,7 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }
       var tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
-        style: 'display: flex; justify-content: center;'
+        style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
         style: "width: ".concat(node.attrs.width, "px")

package/dist/types/nodeviews/table-container-styles.d.ts

@@ -0,0 +1,5 @@
+import type { AlignmentOptions } from '../types';
+export declare const getAlignmentStyle: (alignment: AlignmentOptions) => {
+    display: string;
+    justifyContent: string;
+};

package/dist/types-ts4.5/nodeviews/table-container-styles.d.ts

@@ -0,0 +1,5 @@
+import type { AlignmentOptions } from '../types';
+export declare const getAlignmentStyle: (alignment: AlignmentOptions) => {
+    display: string;
+    justifyContent: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.6",
+	"version": "7.25.7",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableContainer.tsx

@@ -30,6 +30,7 @@ import type { PluginInjectionAPI, TableSharedState } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
 
+import { getAlignmentStyle } from './table-container-styles';
 import { TableResizer } from './TableResizer';
 
 type InnerContainerProps = {
@@ -60,10 +61,6 @@ export const InnerContainer = forwardRef<HTMLDivElement, PropsWithChildren<Inner
 	},
 );
 
-const centerAlignStyle = { display: 'flex', justifyContent: 'center' };
-
-const leftAlignStyle = { display: 'flex', justifyContent: 'flex-start' };
-
 type AlignmentTableContainerProps = {
 	node: PMNode;
 	pluginInjectionApi?: PluginInjectionAPI;
@@ -114,7 +111,7 @@ const AlignmentTableContainer = ({
 	}, [editorView, tableState, node]);
 
 	const style = useMemo(() => {
-		return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+		return getAlignmentStyle(alignment);
 	}, [alignment]);
 
 	return (

package/src/nodeviews/table-container-styles.ts

@@ -0,0 +1,9 @@
+import type { AlignmentOptions } from '../types';
+import { ALIGN_START } from '../utils/alignment';
+
+const centerAlignStyle = { display: 'flex', justifyContent: 'center' };
+
+const leftAlignStyle = { display: 'flex', justifyContent: 'flex-start' };
+
+export const getAlignmentStyle = (alignment: AlignmentOptions) =>
+	alignment === ALIGN_START ? leftAlignStyle : centerAlignStyle;

package/src/toDOM.ts

@@ -1,9 +1,12 @@
+import kebabCase from 'lodash/kebabCase';
+
 import { table } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
 import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 
+import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 
 type Config = {
@@ -23,6 +26,10 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2,
 				node.attrs.width,
 			);
+			const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout))
+				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
+				.join(';');
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -111,7 +118,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				'div',
 				{
 					'data-testid': 'table-alignment-container',
-					style: 'display: flex; justify-content: center;',
+					style: alignmentStyle,
 				},
 				[
 					'div',