Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support style string definition (Fixes #533) #541

Merged
merged 3 commits into from
Jun 9, 2016
Merged

Support style string definition (Fixes #533) #541

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60227a7
Support setting the style using a string reference to an editor.confi…
jbalsas Jun 8, 2016
6bae88c
Update buttons using basicStyles plugin commands to use their matchin…
jbalsas Jun 8, 2016
8c12053
Improve style prop documentation with examples
jbalsas Jun 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions src/ui/react/src/components/base/button-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,15 @@
// Allows validating props being passed to the component.
propTypes: {
/**
* The style the button should handle as described by http://docs.ckeditor.com/#!/api/CKEDITOR.style
* The style the button should handle. It can be a style object as described by http://docs.ckeditor.com/#!/api/CKEDITOR.style
* or a string pointing to an object inside the editor instance configuration
Copy link
Contributor

@ipeychev ipeychev Jun 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Chema,

This sentence "a string pointing to an object inside the editor instance configuration" will need an example. We shall document this for 1.2.3 release and I'm not sure what exactly could be this string.

Could you please add an example to this comment?

Thanks,

Copy link
Contributor Author

@jbalsas jbalsas Jun 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I'll add an example tomorrow. You can see the usage in the buttons that are now configured with the string. For example,

style: 'coreStyles_bold'

will try to get the style from editor.config.coreStyles_bold and

style: 'myPlugin.myCustomObject.myCustomStyle'

will try to get it from editor.config.myPlugin.myCustomObject.myCustomStyle

Do you think that would be clear enough? If so, I'll push that tomorrow morning! :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this will be enough and the whole change is great!

Thanks,

*
* @property {Object} style
* @property {Object|String} style
*/
style: React.PropTypes.object
style: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.string
])
},

/**
Expand All @@ -24,7 +28,25 @@
* @method componentWillMount
*/
componentWillMount: function() {
this._style = new CKEDITOR.style(this.props.style);
var Lang = AlloyEditor.Lang;
var style = this.props.style;

if (Lang.isString(style)) {
var parts = style.split('.');
var currentMember = this.props.editor.get('nativeEditor').config;
var property = parts.shift();

while (property && Lang.isObject(currentMember) && Lang.isObject(currentMember[property])) {
currentMember = currentMember[property];
property = parts.shift();
}

if (Lang.isObject(currentMember)) {
style = currentMember;
}
}

this._style = new CKEDITOR.style(style);
},

/**
Expand Down