@ckeditor/ckeditor5-table - npm Package Compare versions

Comparing version 23.1.0 to 24.0.0

package.json

 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "23.1.0",
+  "version": "24.0.0",
   "description": "Table feature for CKEditor 5.",
@@ -13,22 +13,22 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^23.1.0",
-    "@ckeditor/ckeditor5-ui": "^23.1.0",
-    "@ckeditor/ckeditor5-widget": "^23.1.0",
+    "@ckeditor/ckeditor5-core": "^24.0.0",
+    "@ckeditor/ckeditor5-ui": "^24.0.0",
+    "@ckeditor/ckeditor5-utils": "^24.0.0",
+    "@ckeditor/ckeditor5-widget": "^24.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^23.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^23.1.0",
-    "@ckeditor/ckeditor5-clipboard": "^23.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^23.1.0",
-    "@ckeditor/ckeditor5-engine": "^23.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^23.1.0",
-    "@ckeditor/ckeditor5-image": "^23.1.0",
-    "@ckeditor/ckeditor5-indent": "^23.1.0",
-    "@ckeditor/ckeditor5-list": "^23.1.0",
-    "@ckeditor/ckeditor5-media-embed": "^23.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^23.1.0",
-    "@ckeditor/ckeditor5-typing": "^23.1.0",
-    "@ckeditor/ckeditor5-undo": "^23.1.0",
-    "@ckeditor/ckeditor5-utils": "^23.1.0",
+    "@ckeditor/ckeditor5-alignment": "^24.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^24.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^24.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^24.0.0",
+    "@ckeditor/ckeditor5-engine": "^24.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^24.0.0",
+    "@ckeditor/ckeditor5-image": "^24.0.0",
+    "@ckeditor/ckeditor5-indent": "^24.0.0",
+    "@ckeditor/ckeditor5-list": "^24.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^24.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^24.0.0",
+    "@ckeditor/ckeditor5-typing": "^24.0.0",
+    "@ckeditor/ckeditor5-undo": "^24.0.0",
     "json-diff": "^0.5.4"
@@ -35,0 +35,0 @@ },

src/converters/downcast.js

@@ -12,2 +12,3 @@ /**
 import { setHighlightHandling, toWidget, toWidgetEditable } from '@ckeditor/ckeditor5-widget/src/utils';
+import toArray from '@ckeditor/ckeditor5-utils/src/toarray';
 
@@ -318,4 +319,4 @@ /**
 		viewWriter,
-		( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.classes ), element ),
-		( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.classes ), element )
+		( element, descriptor, writer ) => writer.addClass( toArray( descriptor.classes ), element ),
+		( element, descriptor, writer ) => writer.removeClass( toArray( descriptor.classes ), element )
 	);
@@ -368,4 +369,4 @@
 			conversionApi.writer,
-			( element, descriptor, writer ) => writer.addClass( normalizeToArray( descriptor.classes ), element ),
-			( element, descriptor, writer ) => writer.removeClass( normalizeToArray( descriptor.classes ), element )
+			( element, descriptor, writer ) => writer.addClass( toArray( descriptor.classes ), element ),
+			( element, descriptor, writer ) => writer.removeClass( toArray( descriptor.classes ), element )
 		);
@@ -527,5 +528,1 @@ }
 }
-
-function normalizeToArray( classes ) {
-	return Array.isArray( classes ) ? classes : [ classes ];
-}

src/converters/upcasttable.js

@@ -13,3 +13,3 @@ /**
 /**
- * View table element to model table element conversion helper.
+ * View the table element to model the table element conversion helper.
  *
@@ -68,9 +68,10 @@ * This conversion helper converts the table element as well as table rows.
 /**
- * Conversion helper that skips empty <tr> from upcasting at the beginning of the table.
+ * A conversion helper that skips empty <tr> from upcasting at the beginning of the table.
  *
- * Empty row is considered a table model error but when handling clipboard data there could be rows that contain only row-spanned cells
+ * AN empty row is considered a table model error but when handling clipboard data there could be rows that contain only row-spanned cells
  * and empty TR-s are used to maintain table structure (also {@link module:table/tablewalker~TableWalker} assumes that there are only rows
- * that have related tableRow elements).
+ * that have related `tableRow` elements).
  *
- * *Note:* Only first empty rows are removed because those have no meaning and solves issue of improper table with all empty rows.
+ * *Note:* Only the first empty rows are removed because those have no meaning and it solves the issue
+ * of an improper table with all empty rows.
  *
@@ -114,3 +115,3 @@ * @returns {Function} Conversion helper.
 	//
-	// But browsers will render rows in order as: 1 as heading and 2 and 3 as the body.
+	// But browsers will render rows in order as: 1 as the heading and 2 and 3 as the body.
 	const headRows = [];
@@ -120,10 +121,10 @@ const bodyRows = [];
 	// Currently the editor does not support more then one <thead> section.
-	// Only the first <thead> from the view will be used as heading rows and others will be converted to body rows.
+	// Only the first <thead> from the view will be used as a heading row and the others will be converted to body rows.
 	let firstTheadElement;
 
 	for ( const tableChild of Array.from( viewTable.getChildren() ) ) {
-		// Only <thead>, <tbody> & <tfoot> from allowed table children can have <tr>s.
-		// The else is for future purposes (mainly <caption>).
+		// Only `<thead>`, `<tbody>` & `<tfoot>` from allowed table children can have `<tr>`s.
+		// The else is for future purposes (mainly `<caption>`).
 		if ( tableChild.name === 'tbody' || tableChild.name === 'thead' || tableChild.name === 'tfoot' ) {
-			// Save the first <thead> in the table as table header - all other ones will be converted to table body rows.
+			// Save the first `<thead>` in the table as table header - all other ones will be converted to table body rows.
 			if ( tableChild.name === 'thead' && !firstTheadElement ) {
@@ -133,3 +134,3 @@ firstTheadElement = tableChild;
 
-			// There might be some extra empty text nodes between the `tr`s.
+			// There might be some extra empty text nodes between the `<tr>`s.
 			// Make sure further code operates on `tr`s only. (#145)
@@ -136,0 +137,0 @@ const trs = Array.from( tableChild.getChildren() ).filter( el => el.is( 'element', 'tr' ) );

src/tablecellproperties/tablecellpropertiesui.js

@@ -295,2 +295,5 @@ /**
 
+		// Update the view with the model values.
+		this._fillViewFormFromCommandValues();
+
 		this._balloon.add( {
@@ -304,5 +307,2 @@ view: this.view,
 
-		// Update the view with the model values.
-		this._fillViewFormFromCommandValues();
-
 		// Basic a11y.
@@ -309,0 +309,0 @@ this.view.focus();

src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -169,2 +169,3 @@ /**
 		const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
+		const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
 		const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
@@ -227,3 +228,3 @@ const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
 		 */
-		this.backgroundInput = this._createBackgroundField();
+		this.backgroundInput = backgroundInput;
 
@@ -337,5 +338,8 @@ /**
 		this.children.add( new FormRowView( locale, {
+			labelView: backgroundRowLabel,
 			children: [
-				this.backgroundInput
-			]
+				backgroundRowLabel,
+				backgroundInput
+			],
+			class: 'ck-table-form__background-row'
 		} ) );
@@ -492,2 +496,4 @@
 
+		borderStyleDropdown.bind( 'isEmpty' ).to( this, 'borderStyle', value => !value );
+
 		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
@@ -549,7 +555,15 @@
 	 * @private
-	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+	 * @returns {Object.<String,module:ui/view~View>}
 	 */
-	_createBackgroundField() {
+	_createBackgroundFields() {
 		const locale = this.locale;
 		const t = this.t;
+
+		// -- Group label ---------------------------------------------
+
+		const backgroundRowLabel = new LabelView( locale );
+		backgroundRowLabel.text = t( 'Background' );
+
+		// -- Background color input -----------------------------------
+
 		const colorInputCreator = getLabeledColorInputCreator( {
@@ -563,3 +577,3 @@ colorConfig: this.options.backgroundColors,
 		backgroundInput.set( {
-			label: t( 'Background' ),
+			label: t( 'Color' ),
 			class: 'ck-table-cell-properties-form__background'
@@ -573,3 +587,6 @@ } );
 
-		return backgroundInput;
+		return {
+			backgroundRowLabel,
+			backgroundInput
+		};
 	}
@@ -576,0 +593,0 @@

src/tableediting.js

@@ -84,6 +84,6 @@ /**
 
-		// Allow all $block content inside table cell.
+		// Allow all $block content inside a table cell.
 		schema.extend( '$block', { allowIn: 'tableCell' } );
 
-		// Disallow table in table.
+		// Disallow a table in a table.
 		schema.addChildCheck( ( context, childDefinition ) => {
@@ -114,3 +114,3 @@ if ( childDefinition.name == 'table' && Array.from( context.getNames() ).includes( 'table' ) ) {
 
-		// Duplicates code - needed to properly refresh paragraph inside table cell.
+		// Duplicates code - needed to properly refresh paragraph inside a table cell.
 		editor.conversion.for( 'editingDowncast' ).elementToElement( {
@@ -126,3 +126,3 @@ model: 'paragraph',
 
-		// Table heading columns conversion (change of heading rows requires reconversion of the whole table).
+		// Table heading columns conversion (a change of heading rows requires a reconversion of the whole table).
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingColumnsChange() );
@@ -129,0 +129,0 @@

src/tableproperties/tablepropertiesui.js

@@ -285,2 +285,5 @@ /**
 
+		// Update the view with the model values.
+		this._fillViewFormFromCommandValues();
+
 		this._balloon.add( {
@@ -294,5 +297,2 @@ view: this.view,
 
-		// Update the view with the model values.
-		this._fillViewFormFromCommandValues();
-
 		// Basic a11y.
@@ -299,0 +299,0 @@ this.view.focus();

src/tableproperties/ui/tablepropertiesview.js

@@ -144,2 +144,3 @@ /**
 		const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
+		const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields();
 		const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
@@ -202,3 +203,3 @@ const { alignmentToolbar, alignmentLabel } = this._createAlignmentFields();
 		 */
-		this.backgroundInput = this._createBackgroundField();
+		this.backgroundInput = backgroundInput;
 
@@ -223,3 +224,2 @@ /**
 		 * A toolbar with buttons that allow changing the alignment of an entire table.
-		 *
 		 * @readonly
@@ -297,5 +297,8 @@ * @member {module:ui/toolbar/toolbar~ToolbarView}
 		this.children.add( new FormRowView( locale, {
+			labelView: backgroundRowLabel,
 			children: [
-				this.backgroundInput
-			]
+				backgroundRowLabel,
+				backgroundInput
+			],
+			class: 'ck-table-form__background-row'
 		} ) );
@@ -440,2 +443,4 @@
 
+		borderStyleDropdown.bind( 'isEmpty' ).to( this, 'borderStyle', value => !value );
+
 		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
@@ -497,5 +502,15 @@
 	 * @private
-	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
+	 * @returns {Object.<String,module:ui/view~View>}
 	 */
-	_createBackgroundField() {
+	_createBackgroundFields() {
+		const locale = this.locale;
+		const t = this.t;
+
+		// -- Group label ---------------------------------------------
+
+		const backgroundRowLabel = new LabelView( locale );
+		backgroundRowLabel.text = t( 'Background' );
+
+		// -- Background color input -----------------------------------
+
 		const backgroundInputCreator = getLabeledColorInputCreator( {
@@ -505,4 +520,2 @@ colorConfig: this.options.backgroundColors,
 		} );
-		const locale = this.locale;
-		const t = this.t;
 
@@ -512,3 +525,3 @@ const backgroundInput = new LabeledFieldView( locale, backgroundInputCreator );
 		backgroundInput.set( {
-			label: t( 'Background' ),
+			label: t( 'Color' ),
 			class: 'ck-table-properties-form__background'
@@ -522,3 +535,6 @@ } );
 
-		return backgroundInput;
+		return {
+			backgroundRowLabel,
+			backgroundInput
+		};
 	}
@@ -525,0 +541,0 @@

src/ui/colorinputview.js

@@ -77,2 +77,23 @@ /**
 		/**
+		 * An observable flag set to `true` when the input is focused by the user.
+		 * `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isFocused
+		 * @default false
+		 */
+		this.set( 'isFocused', false );
+
+		/**
+		 * An observable flag set to `true` when the input contains no text.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #isEmpty
+		 * @default true
+		 */
+		this.set( 'isEmpty', true );
+
+		/**
 		 * The `id` of the element describing this field. When the field has
@@ -132,4 +153,4 @@ * some error, it helps screen readers read the error text.
 			children: [
-				this._inputView,
-				this._dropdownView
+				this._dropdownView,
+				this._inputView
 			]
@@ -219,4 +240,4 @@ } );
 		inputView.value = this.value;
-		inputView.bind( 'isReadOnly' ).to( this );
-		inputView.bind( 'hasError' ).to( this );
+		inputView.bind( 'isReadOnly', 'hasError' ).to( this );
+		this.bind( 'isFocused', 'isEmpty' ).to( inputView );
 
@@ -223,0 +244,0 @@ inputView.on( 'input', () => {

src/utils/ui/table-properties.js

@@ -365,3 +365,3 @@ /**
 		inputView.bind( 'isReadOnly' ).to( labeledFieldView, 'isEnabled', value => !value );
-		inputView.bind( 'errorText' ).to( labeledFieldView );
+		inputView.bind( 'hasError' ).to( labeledFieldView, 'errorText', value => !!value );
 
@@ -374,2 +374,4 @@ inputView.on( 'input', () => {
 
+		labeledFieldView.bind( 'isEmpty', 'isFocused' ).to( inputView );
+
 		return inputView;
@@ -376,0 +378,0 @@ };

theme/colorinput.css

@@ -9,2 +9,3 @@ /*
 	display: flex;
+	flex-direction: row-reverse;
 
@@ -14,7 +15,2 @@ & > input.ck.ck-input-text {
 		flex-grow: 1;
-
-		&:active,
-		&:focus {
-			z-index: var(--ck-z-default);
-		}
 	}
@@ -21,0 +17,0 @@

theme/tablecellproperties.css

@@ -12,3 +12,15 @@ /*
 			& .ck.ck-toolbar {
-				flex-grow: 0;
+				&:first-of-type {
+					/* 4 buttons out of 7 (h-alignment + v-alignment) = 0.57 */
+					flex-grow: 0.57;
+				}
+
+				&:last-of-type {
+					/* 3 buttons out of 7 (h-alignment + v-alignment) = 0.43 */
+					flex-grow: 0.43;
+				}
+
+				& .ck-button {
+					flex-grow: 1;
+				}
 			}
@@ -15,0 +27,0 @@ }

theme/tableform.css

@@ -10,19 +10,6 @@ /*
 			flex-wrap: wrap;
+		}
 
-			& .ck-labeled-field-view {
-				display: flex;
-				flex-direction: column-reverse;
-
-				& .ck.ck-dropdown {
-					flex-grow: 0;
-				}
-			}
-
-			& .ck-table-form__border-style {
-				flex-grow: 0;
-			}
-
-			& .ck-table-form__border-width {
-				flex-grow: 0;
-			}
+		&.ck-table-form__background-row {
+			flex-wrap: wrap;
 		}
@@ -29,0 +16,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

869569

0.24%

Dev dependency count

14

-6.67%

Lines of code

11072

0.35%

Worsened metrics

Dependency count

5

25%

Dependency changes

• + Added

  @ckeditor/ckeditor5-utils@^24.0.0

• + Added

  @ckeditor/ckeditor5-core@24.0.0
  (transitive)

• + Added

  @ckeditor/ckeditor5-engine@24.0.0
  (transitive)

• + Added

  @ckeditor/ckeditor5-typing@24.0.0
  (transitive)

• + Added

  @ckeditor/ckeditor5-ui@24.0.0
  (transitive)

• + Added

  @ckeditor/ckeditor5-utils@24.0.0
  (transitive)

• + Added

  @ckeditor/ckeditor5-widget@24.0.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-core@23.1.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-engine@23.1.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-typing@23.1.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-ui@23.1.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-utils@23.1.0
  (transitive)

• - Removed

  @ckeditor/ckeditor5-widget@23.1.0
  (transitive)

• Updated

  @ckeditor/ckeditor5-core@^24.0.0

• Updated

  @ckeditor/ckeditor5-ui@^24.0.0

• Updated

  @ckeditor/ckeditor5-widget@^24.0.0