Change Default Table Alignment in migration issue.

[zalaksanghani1]

📝 Provide detailed reproduction steps (if any)

1. Set table default alignment to left using float:left style
2. copy table with one paragraph data from ckeditor4 and paste in ckeditor5. Data :

<table style="width:500px;float:left;" border="1" cellspacing="1" cellpadding="1"><tbody><tr><td>a</td><td>b</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table><p>bbb</p>

✔️ Expected result

In both version data should be render equals.

❌ Actual result

in ckeditor5 data is showing differently.

❓ Possible solution

because of float:left style in ckeditor5 this issue is arising. so we can change alignment behavior or can introduce new InlineTable plugin which is different in alignment using below css.

left: margin-right: auto; margin-left: 0; center: margin-right: auto; margin-left: auto; right: margin-right: 0; margin-left: auto;

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[zalaksanghani1]

Hello, is there any update on this?

[bharathraomairpady]

@zalaksanghani1 can you please add screenshots demonstrating the expected and the observed behaviour. Thanks.

[zalaksanghani1]

Here, the content includes a table along with some paragraph data.

Expected result

Actual result:

[Reinmar]

Current state

CKEditor 5 currently offers these 3 options:

• wrap text + left aligned (sets float:left and nothing else)
• centered, no wrap (sets nothing, inherits the default table styles from stylesheets which for CKE5 is centered)
• wrap text + right aligned (sets float:right and nothing else)

CKEditor 4 supports 4 options:

• not set (will inherit position from stylesheets, which for CKE4 is left, no wrap)
• wrap text + left aligned (sets align=left attribute and nothing else)
• center (sets align=center attribute and nothing else)
• wrap text + right aligned (sets align=right attribute and nothing else)

Issue

There are two connected issues here:

• By default, CKEditor 5 styles tables to be centered while CKEditor 4 leaves them left aligned (no text wrap). This is the "not set" scenario.
  • This discrepancy means that when migrating from CKEditor 4 to CKEditor 5 one needs to override current CKEditor 5's default table style by removing margin-left/right: auto.
  • However, to make the Table properties dialog reflect that, one should also configure it, but that actually won't work as there's no "4th option" in it. There's only left/center/right but no "not set". So, even in the demo in this feature guide section, the table is actually styled by default as "wrap text + left aligned" which still isn't reflecting CKEditor 4's defaults.
  • I think that the only reasonable solution here, to avoid further complications, is to remove the margin-left/right:0 from our default table styles and add "Left aligned, no text wrap" option in the Table properties dialog. In default configuration this will be the "not set" option (the default).
  • This will be a big breaking change, but IMO the only way out of this confusing defaults. While the centered table seemed a nice default for "clean article editor", the reality is that this is a less frequent case. Also, Notion also aligns table to the left by default, so we'd actually align CKEditor 5 with this.
• Moving a bit further, we may consider having 5 styles availble, to cover the entire range of options. Just like we have for images:
  • 
  • 
• And going even further, I'd consider addressing https://github.com/ckeditor/ckeditor5/issues/14921 too.
  • To at least partially tackle it (there's the whole problem with lists which cannot be fixed in today's CSS), we'd need either: margin set directly on left/right` aligned tables or an additional class which we'd use to apply it. Both options seem a bit tricky taken scenarios with legacy content, but CKEditor 4 does not actually support margins for tables in any way, so maybe it's not an issue and we have a clean slate here.

[Witoso]

Thank you @Reinmar, one thought for future reference: Layout table feature already supports non-toggled alignment (I think in the data loading scenario) but it was introduced as a workaround due to many email templates depending on it, not a proper support.

[zalaksanghani1]

Yes @Reinmar, as you suggested, having left alignment as the default option (not set) would help resolve all the migration-related issues.

[Reinmar]

I was thinking about the easiest way forward, that'd unblock people who migrate from CKEditor 4.

I think the best option is to override the default content styles that CKEditor 5 provides, so a table without an explicitly specified alignment is left aligned (like in CKEditor 4).

This is one line of CSS does the job (the first class is to ensure high specificity of this style):

Unfortunately, for now, the table dialog will not reflect that:

For the dialog to reflect the "no style == left alined, no text wrap" and to correctly show all the 4+ options, we need to implement changes that I described in https://github.com/ckeditor/ckeditor5/issues/17932#issuecomment-2886175019.

[bharathraomairpady]

@Reinmar Thanks for your prompt and detailed response. That work around will not suffice as it will still be confusing to end users as the table alignment section will show that the table is central aligned contrary to what they are seeing.

Is there a way to completely remove the Alignment section in table properties? If it is possible, then we can apply the style override and remove the table alignment until a complete solution would be available as mentioned in https://github.com/ckeditor/ckeditor5/issues/17932#issuecomment-2886175019.

[zalaksanghani1]

@Reinmar Until a complete solution becomes available, as mentioned in https://github.com/ckeditor/ckeditor5/issues/17932#issuecomment-2886175019, we have implemented a temporary workaround by adding a not-set option using the code snippet below. This approach currently allows us to achieve the expected behavior.

We would really appreciate it if you could share your thoughts or suggestions on this workaround approach. === in Js ===

// Adding the not-set Alignmnet Option for the Table
setDefaultTableAlignment: function(editor){
		var self=this;
		
		var tablePropertiesUI = editor.plugins.get('TablePropertiesUI');
    	
	    var originalCreatePropertiesView = tablePropertiesUI._createPropertiesView;
		
		// Override the method responsible for creating the table properties view.
	    tablePropertiesUI._createPropertiesView = function(defaultTableProperties) {
		
			// Call the original method to get the view object of table properties.
			var view = originalCreatePropertiesView.call(tablePropertiesUI, defaultTableProperties);
			
			// Add the 'Not Set' alignment option into the alignment toolbar.
		    this.addTableAlignment({
		        view: view,
		        icon:'<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20"><path opacity=".5" d="M2 3h16v1.5H2zM2 6h16v1.5H2zM2 9h16v1.5H2zM2 12h16v1.5H2z" ></path></svg>',
		        toolbar: view.alignmentToolbar,
		        label: 'Not-Set',
		        propertyName: 'alignment',
		        defaultValue: defaultTableProperties.alignment, // get from config [tableProperties.defaultProperties.alignment]
			name:'not-set'
		    });
		    
	        return view;
	    };
	},

addTableAlignment: function(options) {
	    var view = options.view;
	    var propertyName = options.propertyName;
	    var defaultValue = options.defaultValue;
	
	    var button = new CKEDITOR.ButtonView(view.locale);
	
	        button.set({
	            role: 'radio',
	            isToggleable: true,
	            label: options.label,
	            icon: options.icon,
	            tooltip: options.label
	        });
	
	        var buttonValue = options.name;
	
	        // Bind the button's 'isOn' state to the value of the view[propertyName].
	        button.bind('isOn').to(view, propertyName, function(value) {
	            // Use the current buttonValue to compare with the view's alignment value
	            var valueToCompare = value;
	
	            // If it's empty, and the `defaultValue` is specified, use it instead.
	            if (value === '' && defaultValue) {
	                valueToCompare = defaultValue;
	            }
	
	            return buttonValue === valueToCompare;
	        });
	
	        // Handle the execution of the button click event
	        button.on('execute', function() {
	            // Toggle the alignment if there is no default value and the button is already selected
	            if (!defaultValue && buttonValue && view[propertyName] === buttonValue) {
	                view[propertyName] = undefined;
	            } else {
	                view[propertyName] = buttonValue;
	            }
	        });
	
	        // Add the button to the toolbar at position 0
	        options.toolbar.items.add(button, 0);
	},

and === in css ===

figure.table.ck-widget:not([style*="float"]){
    margin-left: 0px;
    margin-right: 0px;
}

[niegowski]

We would really appreciate it if you could share your thoughts or suggestions on this workaround approach.

As you are accessing private methods, we cannot guarantee that this will work in future editor versions.

I can see that addTableAlignment is almost an exact copy of (as this helper is not accessible to integrators):

https://github.com/ckeditor/ckeditor5/blob/77df19ad26ef1cde9d422d922ceeea5dc0483e49/packages/ckeditor5-table/src/utils/ui/table-properties.ts#L182-L216

However, I noticed that the provided CSS would not work outside the editor:

figure.table.ck-widget:not([style*="float"]){
    margin-left: 0px;
    margin-right: 0px;
}

Please note that .ck-widget is available only in the editing view and does not exist in the data. You should use CSS selector like this:

.ck-content .table:not(.layout-table):not([style*="float"])

Other than that, the workaround seems to be fine, assuming that table.tableProperties.defaultProperties.alignment is set to not-set in the editor config.

[zalaksanghani1]

Other than that, the workaround seems to be fine, assuming that table.tableProperties.defaultProperties.alignment is set to not-set in the editor config.

Yes table.tableProperties.defaultProperties.alignment is set to not-set in the editor config. and Thank you for sharing your valuable feedback. and, we are currently Considering this solution as a temporary measure. Once the 'Not Set' option becomes available as mentioned in https://github.com/ckeditor/ckeditor5/issues/17932#issuecomment-2886175019, we will transition to that approach. Also, thank you for correcting the CSS—much appreciated!

[bharathraomairpady]

@Reinmar @niegowski considering that the proposed solution contains extending an internal unsupported API, wouldn't it be simpler to add the "Not set" option in CKEditor itself? As shown in the example above, it is not a complex code change and this will greatly benefit the migration scenario from CK4 to CK5. Is this something which can be considered for the next immediate release?

Also, I would still like to check if there is an option to hide the Table alignment option in Table properties for teams that would not like to use the internal APIs.

[Witoso]

Please let's move any further questions on timelines to the support channel, as this ensures everyone stays aligned and reduces confusion.

[Witoso]

Notes

Table properties

• add the option "browser-default" (aligned with CKEditor 4): left / no text wrap

• we should have similar integration as images, but images use classes, tables do not (inline styles)

  • probably we should have both classes and inline styles

  • should we output both?

    • maybe not,
    • inline styles are hard to overwrite (e.g. adding margin when wrapping text → impossible to overwrite without !important)
    • Q: Progressive enhancement? Classes are easier to overwrite. → migrate to class for better UI? Or also output margin inline?

• default: should we change? (currently center, not 100%)

  • potential opt-out vs opt-in?
  • how does this relate to classes?
  • migration from CKE4 favors left, no wrap,
  • but CKEditor 5 has thousands of implementations built on current option

UI

• Potentially add placement it to the toolbar to save space in table properties? Similar to the images.

• "browser-default": how to go with it?

  • not set is an HTML term
  • left, no text wrap is more understandable

---

Word implements two separate configs.

• alignment
• text wrapping

[Witoso]

Meeting Notes:

• CKEditor 4 compatibility: good upcast, good output (compatible with external apps Word, etc.)
• Classes/Inline styles/Attributes: and picking the best option in the clipboard?
• Key content styles (like alignment/text wrap) should be in classes (backward compatible to inline?)
• Do not lose semantic meaning (classes), keep them and inline styles in the clipboard?

[Witoso]

@mmotyczynska to decide if this one or #3225 is the leading issue.

More issues to analyze (and probably close): #14921, #6174, #9982, #10867.

[Witoso]

Just a quick update regarding this request.

Starting from CKEditor 5 v47.3.0, new experimental table block-alignment options are available. These options introduce left and right table alignment without text wrapping, effectively covering the main needs described in this issue.

To try them out:

• Enable:
  config.experimentalFlags.useExtendedTableBlockAlignment
• Load the experimental UI plugins:
  TablePropertiesUIExperimental and TableCellPropertiesUIExperimental

Details: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-47.html#new-experimental-options

These improvements resolve the table-style limitations mentioned here (and other issues). The new behavior is planned to become the default in version 48.0.0 (~April).