This repository has been archived by the owner on Jun 26, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #224 from ckeditor/i/3287
Feature: Introduced the table and table cell properties plugins. Closes ckeditor/ckeditor5#6048.
- Loading branch information
Showing
67 changed files
with
6,620 additions
and
370 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,116 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/converters/tableproperites | ||
*/ | ||
|
||
/** | ||
* Conversion helper for upcasting attribute using normalized styles. | ||
* | ||
* @param {module:engine/conversion/conversion~Conversion} conversion | ||
* @param {String} modelElement | ||
* @param {String} modelAttribute | ||
* @param {String} styleName | ||
*/ | ||
export function upcastStyleToAttribute( conversion, modelElement, modelAttribute, styleName ) { | ||
conversion.for( 'upcast' ).attributeToAttribute( { | ||
view: { | ||
styles: { | ||
[ styleName ]: /[\s\S]+/ | ||
} | ||
}, | ||
model: { | ||
name: modelElement, | ||
key: modelAttribute, | ||
value: viewElement => viewElement.getNormalizedStyle( styleName ) | ||
} | ||
} ); | ||
} | ||
|
||
/** | ||
* Conversion helper for upcasting border styles for view element. | ||
* | ||
* @param {module:engine/conversion/conversion~Conversion} conversion | ||
* @param {String} viewElementName | ||
*/ | ||
export function upcastBorderStyles( conversion, viewElementName ) { | ||
conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:' + viewElementName, ( evt, data, conversionApi ) => { | ||
// TODO: this is counter-intuitive: ie.: if only `border-top` is defined then `hasStyle( 'border' )` also returns true. | ||
// TODO: this might needs to be fixed in styles normalizer. | ||
const stylesToConsume = [ | ||
'border-top', | ||
'border-right', | ||
'border-bottom', | ||
'border-left' | ||
].filter( styleName => data.viewItem.hasStyle( styleName ) ); | ||
|
||
if ( !stylesToConsume.length ) { | ||
return; | ||
} | ||
|
||
const matcherPattern = { | ||
styles: stylesToConsume | ||
}; | ||
|
||
// Try to consume appropriate values from consumable values list. | ||
if ( !conversionApi.consumable.test( data.viewItem, matcherPattern ) ) { | ||
return; | ||
} | ||
|
||
const modelElement = [ ...data.modelRange.getItems( { shallow: true } ) ].pop(); | ||
|
||
conversionApi.consumable.consume( data.viewItem, matcherPattern ); | ||
|
||
conversionApi.writer.setAttribute( 'borderStyle', data.viewItem.getNormalizedStyle( 'border-style' ), modelElement ); | ||
conversionApi.writer.setAttribute( 'borderColor', data.viewItem.getNormalizedStyle( 'border-color' ), modelElement ); | ||
conversionApi.writer.setAttribute( 'borderWidth', data.viewItem.getNormalizedStyle( 'border-width' ), modelElement ); | ||
} ) ); | ||
} | ||
|
||
/** | ||
* Conversion helper for downcasting attribute to a style. | ||
* | ||
* @param {module:engine/conversion/conversion~Conversion} conversion | ||
* @param {String} modelElement | ||
* @param {String} modelAttribute | ||
* @param {String} styleName | ||
*/ | ||
export function downcastAttributeToStyle( conversion, modelElement, modelAttribute, styleName ) { | ||
conversion.for( 'downcast' ).attributeToAttribute( { | ||
model: { | ||
name: modelElement, | ||
key: modelAttribute | ||
}, | ||
view: modelAttributeValue => ( { | ||
key: 'style', | ||
value: { | ||
[ styleName ]: modelAttributeValue | ||
} | ||
} ) | ||
} ); | ||
} | ||
|
||
/** | ||
* Conversion helper for downcasting attributes from model's table to a view table (not to figure). | ||
* | ||
* @param {module:engine/conversion/conversion~Conversion} conversion | ||
* @param {String} modelAttribute | ||
* @param {String} styleName | ||
*/ | ||
export function downcastTableAttribute( conversion, modelAttribute, styleName ) { | ||
conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( `attribute:${ modelAttribute }:table`, ( evt, data, conversionApi ) => { | ||
const { item, attributeNewValue } = data; | ||
const { mapper, writer } = conversionApi; | ||
|
||
const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) ); | ||
|
||
if ( attributeNewValue ) { | ||
writer.setStyle( styleName, attributeNewValue, table ); | ||
} else { | ||
writer.removeAttribute( styleName, table ); | ||
} | ||
} ) ); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/tablecellproperties | ||
*/ | ||
|
||
import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; | ||
|
||
import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertiesediting'; | ||
|
||
/** | ||
* The table cell properties feature. | ||
* | ||
* This is a "glue" plugin which loads the | ||
* {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table properties editing feature} and | ||
* table cell properties UI feature. | ||
* | ||
* @extends module:core/plugin~Plugin | ||
*/ | ||
export default class TableCellProperties extends Plugin { | ||
/** | ||
* @inheritDoc | ||
*/ | ||
static get pluginName() { | ||
return 'TableCellProperties'; | ||
} | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
static get requires() { | ||
return [ TableCellPropertiesEditing ]; | ||
} | ||
} |
35 changes: 35 additions & 0 deletions
35
src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/tablecellproperties/commands/tablecellbackgroundcolorcommand | ||
*/ | ||
|
||
import TableCellPropertyCommand from './tablecellpropertycommand'; | ||
|
||
/** | ||
* The table cell background color command. | ||
* | ||
* The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as | ||
* `'tableCellBackgroundColor'` editor command. | ||
* | ||
* To change the background color of selected cells, execute the command: | ||
* | ||
* editor.execute( 'tableCellBackgroundColor', { | ||
* value: '#f00' | ||
* } ); | ||
* | ||
* @extends module:core/command~Command | ||
*/ | ||
export default class TableCellBackgroundColorCommand extends TableCellPropertyCommand { | ||
/** | ||
* Creates a new `TableCellBackgroundColorCommand` instance. | ||
* | ||
* @param {module:core/editor/editor~Editor} editor An editor in which this command will be used. | ||
*/ | ||
constructor( editor ) { | ||
super( editor, 'backgroundColor' ); | ||
} | ||
} |
47 changes: 47 additions & 0 deletions
47
src/tablecellproperties/commands/tablecellbordercolorcommand.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/tablecellproperties/commands/tablecellbordercolorcommand | ||
*/ | ||
|
||
import TableCellPropertyCommand from './tablecellpropertycommand'; | ||
import { getSingleValue } from '../../commands/utils'; | ||
|
||
/** | ||
* The table cell border color command. | ||
* | ||
* The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as | ||
* `'tableCellBorderColor'` editor command. | ||
* | ||
* To change the border color of selected cells, execute the command: | ||
* | ||
* editor.execute( 'tableCellBorderColor', { | ||
* value: '#f00' | ||
* } ); | ||
* | ||
* @extends module:core/command~Command | ||
*/ | ||
export default class TableCellBorderColorCommand extends TableCellPropertyCommand { | ||
/** | ||
* Creates a new `TableCellBorderWidthCommand` instance. | ||
* | ||
* @param {module:core/editor/editor~Editor} editor An editor in which this command will be used. | ||
*/ | ||
constructor( editor ) { | ||
super( editor, 'borderColor' ); | ||
} | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
_getAttribute( tableCell ) { | ||
if ( !tableCell ) { | ||
return; | ||
} | ||
|
||
return getSingleValue( tableCell.getAttribute( this.attributeName ) ); | ||
} | ||
} |
47 changes: 47 additions & 0 deletions
47
src/tablecellproperties/commands/tablecellborderstylecommand.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/tablecellproperties/commands/tablecellborderstylecommand | ||
*/ | ||
|
||
import TableCellPropertyCommand from './tablecellpropertycommand'; | ||
import { getSingleValue } from '../../commands/utils'; | ||
|
||
/** | ||
* The table cell border style command. | ||
* | ||
* The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as | ||
* `'tableCellBorderStyle'` editor command. | ||
* | ||
* To change the border style of selected cells, execute the command: | ||
* | ||
* editor.execute( 'tableCellBorderStyle', { | ||
* value: 'dashed' | ||
* } ); | ||
* | ||
* @extends module:core/command~Command | ||
*/ | ||
export default class TableCellBorderStyleCommand extends TableCellPropertyCommand { | ||
/** | ||
* Creates a new `TableCellBorderWidthCommand` instance. | ||
* | ||
* @param {module:core/editor/editor~Editor} editor An editor in which this command will be used. | ||
*/ | ||
constructor( editor ) { | ||
super( editor, 'borderStyle' ); | ||
} | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
_getAttribute( tableCell ) { | ||
if ( !tableCell ) { | ||
return; | ||
} | ||
|
||
return getSingleValue( tableCell.getAttribute( this.attributeName ) ); | ||
} | ||
} |
47 changes: 47 additions & 0 deletions
47
src/tablecellproperties/commands/tablecellborderwidthcommand.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
/** | ||
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
*/ | ||
|
||
/** | ||
* @module table/tablecellproperties/commands/tablecellborderwidthcommand | ||
*/ | ||
|
||
import TableCellPropertyCommand from './tablecellpropertycommand'; | ||
import { getSingleValue } from '../../commands/utils'; | ||
|
||
/** | ||
* The table cell border width command. | ||
* | ||
* The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as | ||
* `'tableCellBorderWidth'` editor command. | ||
* | ||
* To change the border width of selected cells, execute the command: | ||
* | ||
* editor.execute( 'tableCellBorderWidth', { | ||
* value: '5px' | ||
* } ); | ||
* | ||
* @extends module:core/command~Command | ||
*/ | ||
export default class TableCellBorderWidthCommand extends TableCellPropertyCommand { | ||
/** | ||
* Creates a new `TableCellBorderWidthCommand` instance. | ||
* | ||
* @param {module:core/editor/editor~Editor} editor An editor in which this command will be used. | ||
*/ | ||
constructor( editor ) { | ||
super( editor, 'borderWidth' ); | ||
} | ||
|
||
/** | ||
* @inheritDoc | ||
*/ | ||
_getAttribute( tableCell ) { | ||
if ( !tableCell ) { | ||
return; | ||
} | ||
|
||
return getSingleValue( tableCell.getAttribute( this.attributeName ) ); | ||
} | ||
} |
Oops, something went wrong.