Is it possible to set style attribute on td and `table tag ?

[gauravjain028]

I have created color plugins which works fine on $text and $block. It can select any color from color picker and set that color as style="color:#AAAAAA;" .

Now I want to do like, if I select the whole table by it's handler, and can select the color. After that it can update the border color as well. Currently it updated the color of text written inside.

It is possible ?

[Reinmar]

Hi! It simply depends on where you apply that attribute. If you apply it to a text and write a converter for a text attribute, then it's displayed on the text. If you feature will apply it to a <table> or <tableCell> elements and you'll use downcastAttributeToAttribute() (you need upcastAttributeToAttribute() too, of course), then this attribute will appear on the respective view elements.

Note: Adding support for classes that are set on <figure class="table *"> is much easier. See #1462.

[Reinmar]

LOL, I need to take a screenshot of what I posted above for the future :D I'll remove the comment cause the code couldn't work in any universe:

Obviously, downcast/upcastAttrToAttr() need to be called with editor.conversion.for().add() :D

[Reinmar]

OK, this is an awful day. The corrected code:

editor.model.schema.extend( 'table', {
	allowAttributes: 'style'
} );

editor.conversion.for( 'upcast' ).add( upcastAttributeToAttribute( {
	view: {
		name: 'table',
		key: 'style'
	},
	model: 'style'
} ) );

editor.conversion.for( 'downcast' ).add( downcastAttributeToAttribute( {
	model: {
		name: 'table',
		key: 'style'
	},
	view: 'style'
} ) );

window.setTableStyle = function( style ) {
	const table = editor.model.document.selection.getFirstPosition().getAncestors().find( item => item.name == 'table' );

	editor.model.change( writer => {
		writer.setAttribute( 'style', style, table );
	} );
};

But what the hell is this:

There are two issues:

1. That this attribute gets assigned to the <figure>. Now, this is understandable when you know the structure of the view, but how to write a converter which will apply that attribute to a <table>?

2. Why was the value of this attribute passed via some Array.from()? Did I make some mistake or is it a bug?

   

[Reinmar]

cc @jodator @scofalik

[Reinmar]

BTW, I also found the API confusing. I realised that the mistake I did is something that may happen to anyone simply because I was just copying pieces of code from API docs. This matter is being discussed in https://github.com/ckeditor/ckeditor5-engine/issues/1556#issuecomment-424105185

[gauravjain028]

@Reinmar Thanks for explanation. I have a question, from where should I call setTableStyle ?

[Reinmar]

From wherever you want :) That's just an example code which applies an attribute on a model's table element. Depending on your use case you need to turn it into some command. You said that you want it to work when a table is selected, so I'd recommend using Selection#getSelectedElement().

[gauravjain028]

Thanks. I got it working. But having same issue as you had

That this attribute gets assigned to the <figure>. Now, this is understandable when you know the structure of the view, but how to write a converter which will apply that attribute to a <table>?

Is there any workaround for it or it is going to be fixed in ckeditor?

[Reinmar]

I hope that @jodator or @scofalik will be able to provide some quick and easy workaround now. If not, then we need to improve those converter factories I showed you above.

[Reinmar]

PS. that's not a bug. The model's <table> is represented by the <figure> in the view. But we need to make it simple to map model <table>'s attr to <table>'s attr in the view.

[gauravjain028]

@Reinmar @jodator @scofalik
Waiting for your reply, please help me on this.

[jodator]

@gauravjain028: Sorry for longer response - we have a release in progress so we have less time to answer questions.

So the working code for styling background-color style is:

editor.model.schema.extend( 'table', {
	allowAttributes: 'style'
} );

editor.conversion.for( 'upcast' ).add( upcastAttributeToAttribute( {
	view: {
		name: 'table',
		key: 'style',
		value: {
			'background-color': /[\s\S]+/
		}
	},
	model: {
		key: 'style',
		value: viewElement => viewElement.getStyle( 'background-color' )
	}
} ) );

editor.conversion.for( 'downcast' ).add( dispatcher => {
	dispatcher.on( 'attribute:style:table', ( evt, data, conversionApi ) => {
		const table = data.item;

		// The table from the model is mapped to the widget element: <figure>.
		const viewFigure = conversionApi.mapper.toViewElement( table );

		// A <table> is direct child of a <figure> but there might be other view (including UI) elments inside <figure>.
		const viewTable = [ ...viewFigure.getChildren() ].find( element => element.name === 'table' );

		// it should be consumed...

		// User view writer to change style of a view table.
		if ( data.attributeNewValue ) {
			conversionApi.writer.setStyle( 'background-color', data.attributeNewValue, viewTable );
		} else {
			conversionApi.writer.removeStyle( 'background-color', viewTable );
		}
	} );
} );

window.setTableStyle = function( style ) {
	const table = editor.model.document.selection.getFirstPosition().getAncestors().find( item => item.name == 'table' );

	editor.model.change( writer => {
		writer.setAttribute( 'style', style, table );
	} );
};

There are few things to note:

1. AFAICS you cannot just use style with conversion helpers - or at least I was unable to do so (cc @scofalik?)
2. Downcasting attributes on widgets is trouble some because model element is mapped to <figure> not the feature element (ie table, image).
3. Allowing any element as an model value is not so good documented (or I was unable to quickly find them)

cc @Reinmar - look on those remarks as we might think how to improve that for widgets. (see linked issue from Image feature).

[Reinmar]

I reported a ticket for the bug when you try to use attributeToAttribute() converter for style: https://github.com/ckeditor/ckeditor5-engine/issues/1740. There's a workaround mentioned there how to allow style on <td> or <tr>.

Regarding allowing style on <table> and <image> there's an example in https://github.com/ckeditor/ckeditor5-core/compare/poc/customfigureattributes which does that. It will end up one day in the documentation.