@atlaskit/editor-plugin-table 1.4.1 → 1.5.1

package/src/i18n/vi.ts

@@ -12,7 +12,7 @@ export default {
   'fabric.editor.cellOptions': 'Tùy chọn ô',
   'fabric.editor.clearCells': '{0, plural, other {Xóa ô}}',
   'fabric.editor.collapseTable': 'Thu gọn bảng',
-  'fabric.editor.cornerControl': 'Bảng nổi bật',
+  'fabric.editor.cornerControl': 'Làm nổi bật bảng',
   'fabric.editor.distributeColumns': 'Phân phối cột',
   'fabric.editor.extension.deleteElementTitle': 'Xóa thành phần',
   'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': 'Đồng thời xóa các thành phần được kết nối',
@@ -24,7 +24,7 @@ export default {
   'fabric.editor.numberedColumn': 'Cột được đánh số',
   'fabric.editor.removeColumns': '{0, plural, other {Xóa cột}}',
   'fabric.editor.removeRows': '{0, plural, other {Xóa hàng}}',
-  'fabric.editor.rowControl': 'Hàng nổi bật',
+  'fabric.editor.rowControl': 'Làm nổi bật hàng',
   'fabric.editor.sortColumnASC': 'Sắp xếp cột A → Z',
   'fabric.editor.sortColumnDESC': 'Sắp xếp cột Z → A',
   'fabric.editor.splitCell': 'Tách ô',

package/src/i18n/zh.ts

@@ -18,8 +18,8 @@ export default {
   'fabric.editor.extension.deleteElementTitle': '删除元素',
   'fabric.editor.extension.sourceNoTitledName': '此元素',
   'fabric.editor.floatingToolbar.confirmModalCheckboxLabel': '同时删除已连接的元素',
-  'fabric.editor.headerColumn': '标头列',
-  'fabric.editor.headerRow': '表头行',
+  'fabric.editor.headerColumn': '标题列',
+  'fabric.editor.headerRow': '标题行',
   'fabric.editor.insertColumn': '在右侧插入列',
   'fabric.editor.insertRow': '在下方插入行',
   'fabric.editor.mergeCells': '合并单元格',
@@ -29,7 +29,7 @@ export default {
   'fabric.editor.rowControl': '突出显示行',
   'fabric.editor.sortColumnASC': '对列 A → Z 进行排序',
   'fabric.editor.sortColumnDESC': '对列 Z → A 进行排序',
-  'fabric.editor.splitCell': '分离单元格',
+  'fabric.editor.splitCell': '拆分单元格',
   'fabric.editor.tableOptions': '表格选项',
   'fabric.editor.tables.confirmDeleteLinkedModalMessage': '删除 {nodeName} 将断开与其连接的所有内容。',
   'fabric.editor.tables.confirmDeleteLinkedModalOKButton': '删除',

package/src/plugins/table/index.tsx

@@ -7,7 +7,13 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 
-import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+  table,
+  tableCell,
+  tableHeader,
+  tableRow,
+  tableWithCustomWidth,
+} from '@atlaskit/adf-schema';
 
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 
@@ -63,6 +69,7 @@ import type {
 import { EditorState, Transaction } from 'prosemirror-state';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -135,8 +142,12 @@ const tablesPlugin: NextEditorPlugin<
     },
 
     nodes() {
+      const tableNode = getBooleanFF('platform.editor.custom-table-width')
+        ? tableWithCustomWidth
+        : table;
+
       return [
-        { name: 'table', node: table },
+        { name: 'table', node: tableNode },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -5,6 +5,7 @@ import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   calcTableWidth,
@@ -393,6 +394,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )
       : NOOP;
 
+    if (getBooleanFF('platform.editor.custom-table-width')) {
+      // new table experience code goes here
+      // return <Resizer>...
+    }
+
     return (
       <div
         style={{

package/src/plugins/table/nodeviews/table.tsx

@@ -38,6 +38,7 @@ const tableAttributes = (node: PmNode) => {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
+    'data-table-width': node.attrs.width,
   };
 };
 

package/src/plugins/table/pm-plugins/table-resizing/utils/resize-state.ts

@@ -289,6 +289,12 @@ export const getNewResizeStateFromSelectedColumns = (
   domAtPos: (pos: number) => { node: Node; offset: number },
   getEditorContainerWidth: GetEditorContainerWidth,
 ): ResizeStateWithAnalytics | undefined => {
+  // Fail early so that we don't do complex calculations for no reason
+  const numColumnsSelected = rect.right - rect.left;
+  if (numColumnsSelected <= 1) {
+    return;
+  }
+
   const { totalRowCount, totalColumnCount, table } = getSelectedTableInfo(
     state.selection,
   );
@@ -297,6 +303,11 @@ export const getNewResizeStateFromSelectedColumns = (
     return;
   }
 
+  // Fail early so that we don't do complex calculations for no reason
+  if (!hasTableBeenResized(table.node)) {
+    return;
+  }
+
   const maybeTable = domAtPos(table.start).node as HTMLElement;
   const tableRef = maybeTable.closest('table');
 

package/src/plugins/table/ui/common-styles.ts

@@ -24,7 +24,7 @@ import { TableCssClassName as ClassName } from '../types';
 
 import {
   tableCellBackgroundColor,
-  tableToolbarColor,
+  tableHeaderCellBackgroundColor,
   tableBorderColor,
   tableCellSelectedColor,
   tableToolbarSelectedColor,
@@ -481,7 +481,7 @@ export const tableStyles = (
       border: 1px solid ${tableBorderColor(props)};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableToolbarColor(props)};
+      background: ${tableHeaderCellBackgroundColor(props)};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -598,7 +598,7 @@ export const tableStyles = (
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableToolbarColor(props)};
+      background-color: ${tableHeaderCellBackgroundColor(props)};
       color: ${tableTextColor(props)};
       border-color: ${tableBorderColor(props)};
 

package/src/plugins/table/ui/consts.ts

@@ -38,6 +38,10 @@ export const tableCellBackgroundColor = themed({
   light: token('elevation.surface', N0),
   dark: token('elevation.surface', DN30),
 });
+export const tableHeaderCellBackgroundColor = themed({
+  light: token('color.background.neutral', akEditorTableToolbar),
+  dark: token('color.background.neutral', akEditorTableToolbarDark),
+});
 export const tableToolbarColor = themed({
   light: token('color.background.neutral.subtle', akEditorTableToolbar),
   dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
@@ -47,8 +51,8 @@ export const tableTextColor = themed({
   dark: token('color.text.subtlest', DN400),
 });
 export const tableBorderColor = themed({
-  light: token('color.border', akEditorTableBorder),
-  dark: token('color.border', akEditorTableBorderDark),
+  light: token('color.background.accent.gray.subtler', akEditorTableBorder),
+  dark: token('color.background.accent.gray.subtler', akEditorTableBorderDark),
 });
 export const tableFloatingControlsColor = token(
   'color.background.neutral',

package/src/plugins/table/ui/ui-styles.ts

@@ -21,9 +21,9 @@ import {
   Y200,
 } from '@atlaskit/theme/colors';
 import {
-  tableToolbarColor,
   tableBorderColor,
   tableToolbarSelectedColor,
+  tableHeaderCellBackgroundColor,
   tableBorderSelectedColor,
   tableCellDeleteColor,
   tableBorderDeleteColor,
@@ -95,7 +95,7 @@ const Button = (cssString?: string) => css`
 
 export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
   .${ClassName.CONTROLS_BUTTON} {
-    background: ${tableToolbarColor(props)};
+    background: ${tableHeaderCellBackgroundColor(props)};
     border: 1px solid ${tableBorderColor(props)};
     display: block;
     box-sizing: border-box;
@@ -297,7 +297,7 @@ export const OverflowShadow = (props: ThemeProps) => css`
 `;
 
 const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
-  background: ${tableToolbarColor(props)};
+  background: ${tableHeaderCellBackgroundColor(props)};
   border: 1px solid ${tableBorderColor(props)};
   display: block;
   box-sizing: border-box;