@ckeditor/ckeditor5-table 45.0.0-alpha.0 → 45.0.0-alpha.1

package/src/tableproperties/tablepropertiesui.js

@@ -13,7 +13,7 @@ import TablePropertiesView from './ui/tablepropertiesview.js';
 import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, lengthFieldValidator, lineWidthFieldValidator, defaultColors } from '../utils/ui/table-properties.js';
 import { getSelectionAffectedTableWidget } from '../utils/ui/widget.js';
 import { getBalloonTablePositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon.js';
-import { getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
+import { getNormalizedDefaultProperties, getNormalizedDefaultTableProperties } from '../utils/table-properties.js';
 const ERROR_TEXT_TIMEOUT = 500;
 // Map of view properties and related commands.
 const propertyToCommandMap = {
@@ -35,7 +35,11 @@ export default class TablePropertiesUI extends Plugin {
     /**
      * The default table properties.
      */
-    _defaultTableProperties;
+    _defaultContentTableProperties;
+    /**
+     * The default layout table properties.
+     */
+    _defaultLayoutTableProperties;
     /**
      * The contextual balloon plugin instance.
      */
@@ -44,6 +48,14 @@ export default class TablePropertiesUI extends Plugin {
      * The properties form view displayed inside the balloon.
      */
     view = null;
+    /**
+     * The properties form view displayed inside the balloon (content table).
+     */
+    _viewWithContentTableDefaults = null;
+    /**
+     * The properties form view displayed inside the balloon (layout table).
+     */
+    _viewWithLayoutTableDefaults = null;
     /**
      * The batch used to undo all changes made by the form (which are live, as the user types)
      * when "Cancel" was pressed. Each time the view is shown, a new batch is created.
@@ -87,9 +99,10 @@ export default class TablePropertiesUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        this._defaultTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
+        this._defaultContentTableProperties = getNormalizedDefaultTableProperties(editor.config.get('table.tableProperties.defaultProperties'), {
             includeAlignmentProperty: true
         });
+        this._defaultLayoutTableProperties = getNormalizedDefaultProperties();
         this._balloon = editor.plugins.get(ContextualBalloon);
         editor.ui.componentFactory.add('tableProperties', () => this._createTablePropertiesButton());
     }
@@ -129,7 +142,7 @@ export default class TablePropertiesUI extends Plugin {
      *
      * @returns The table properties form view instance.
      */
-    _createPropertiesView() {
+    _createPropertiesView(defaultTableProperties) {
         const editor = this.editor;
         const config = editor.config.get('table.tableProperties');
         const borderColorsConfig = normalizeColorOptions(config.borderColors);
@@ -140,7 +153,7 @@ export default class TablePropertiesUI extends Plugin {
         const view = new TablePropertiesView(editor.locale, {
             borderColors: localizedBorderColors,
             backgroundColors: localizedBackgroundColors,
-            defaultTableProperties: this._defaultTableProperties,
+            defaultTableProperties,
             colorPickerConfig: hasColorPicker ? (config.colorPicker || {}) : false
         });
         const t = editor.t;
@@ -223,7 +236,9 @@ export default class TablePropertiesUI extends Plugin {
         Object.entries(propertyToCommandMap)
             .map(([property, commandName]) => {
             const propertyKey = property;
-            const defaultValue = this._defaultTableProperties[propertyKey] || '';
+            const defaultValue = this.view === this._viewWithContentTableDefaults ?
+                this._defaultContentTableProperties[propertyKey] || '' :
+                this._defaultLayoutTableProperties[propertyKey] || '';
             return [propertyKey, (commands.get(commandName).value || defaultValue)];
         })
             .forEach(([property, value]) => {
@@ -244,9 +259,16 @@ export default class TablePropertiesUI extends Plugin {
      */
     _showView() {
         const editor = this.editor;
-        if (!this.view) {
-            this.view = this._createPropertiesView();
+        const viewTable = getSelectionAffectedTableWidget(editor.editing.view.document.selection);
+        const modelTable = viewTable && editor.editing.mapper.toModelElement(viewTable);
+        const useDefaults = !modelTable || modelTable.getAttribute('tableType') !== 'layout';
+        if (useDefaults && !this._viewWithContentTableDefaults) {
+            this._viewWithContentTableDefaults = this._createPropertiesView(this._defaultContentTableProperties);
+        }
+        else if (!useDefaults && !this._viewWithLayoutTableDefaults) {
+            this._viewWithLayoutTableDefaults = this._createPropertiesView(this._defaultLayoutTableProperties);
         }
+        this.view = useDefaults ? this._viewWithContentTableDefaults : this._viewWithLayoutTableDefaults;
         this.listenTo(editor.ui, 'update', () => {
             this._updateView();
         });

package/src/tableproperties/ui/tablepropertiesview.d.ts

@@ -7,12 +7,12 @@
  */
 import { ButtonView, FocusCycler, LabeledFieldView, ToolbarView, View, ViewCollection, type DropdownView, type InputTextView, type NormalizedColorOption, type ColorPickerConfig, type FocusableView } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import type ColorInputView from '../../ui/colorinputview.js';
+import type { TablePropertiesOptions } from '../../tableconfig.js';
 import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 import '../../../theme/formrow.css';
 import '../../../theme/tableform.css';
 import '../../../theme/tableproperties.css';
-import type ColorInputView from '../../ui/colorinputview.js';
-import type { TablePropertiesOptions } from '../../tableconfig.js';
 /**
  * Additional configuration of the view.
  */

package/src/utils/table-properties.d.ts

@@ -80,18 +80,18 @@ export type NormalizeTableDefaultPropertiesOptions = {
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
 /**
  * Returns the normalized default table properties.
  *
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultTableProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultTableProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
 /**
  * Returns the normalized default cell properties.
  *
  * @param config The configuration to normalize.
  * @param options Options used to determine which properties should be added.
  */
-export declare function getNormalizedDefaultCellProperties(config: Partial<NormalizedDefaultProperties> | undefined, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;
+export declare function getNormalizedDefaultCellProperties(config?: Partial<NormalizedDefaultProperties>, options?: NormalizeTableDefaultPropertiesOptions): NormalizedDefaultProperties;

package/src/utils/ui/table-properties.js

@@ -146,7 +146,13 @@ export function fillToolbar(options) {
             return buttonValue === valueToCompare;
         });
         button.on('execute', () => {
-            view[propertyName] = buttonValue;
+            // Allow toggling alignment if there is no default value specified (especially for layout tables).
+            if (!defaultValue && buttonValue && view[propertyName] === buttonValue) {
+                view[propertyName] = undefined;
+            }
+            else {
+                view[propertyName] = buttonValue;
+            }
         });
         toolbar.items.add(button);
     }