{"action":"created","issue":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/300","labels_url":"https://api.github.com/repos/liferay/alloy-editor/issues/300/labels{/name}","comments_url":"https://api.github.com/repos/liferay/alloy-editor/issues/300/comments","events_url":"https://api.github.com/repos/liferay/alloy-editor/issues/300/events","html_url":"https://github.com/liferay/alloy-editor/issues/300","id":97295268,"number":300,"title":"Adding new selection","user":{"login":"trecreat","id":7949001,"avatar_url":"https://avatars.githubusercontent.com/u/7949001?v=3","gravatar_id":"","url":"https://api.github.com/users/trecreat","html_url":"https://github.com/trecreat","followers_url":"https://api.github.com/users/trecreat/followers","following_url":"https://api.github.com/users/trecreat/following{/other_user}","gists_url":"https://api.github.com/users/trecreat/gists{/gist_id}","starred_url":"https://api.github.com/users/trecreat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/trecreat/subscriptions","organizations_url":"https://api.github.com/users/trecreat/orgs","repos_url":"https://api.github.com/users/trecreat/repos","events_url":"https://api.github.com/users/trecreat/events{/privacy}","received_events_url":"https://api.github.com/users/trecreat/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/liferay/alloy-editor/labels/help%20wanted","name":"help wanted","color":"159818"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-07-26T07:45:54Z","updated_at":"2015-07-27T22:09:49Z","closed_at":null,"body":"Hi @ipeychev ,\r\nI tried by adding a new selection, but it seems not work, the toolbar for new selection does not appear\r\n\r\nHTML code in the editor's content\r\n```html\r\n<figure>\r\n\t<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/jeWYdbi5CbM\" frameborder=\"0\" allowfullscreen></iframe>\r\n\t<div class=\"iframe-block\"></div>\r\n</figure>\r\n```\r\n\r\nin 'alloy-editor-all.js'\r\n```javascript\r\n(function () {\r\n    'use strict';\r\n\r\n    var figureSelectionTest = function figureSelectionTest(payload) {\r\n        var selectionData = payload.data.selectionData;\r\n\r\n        return selectionData.element && selectionData.element.getName() === 'figure';\r\n    };\r\n\r\n    var linkSelectionTest = function linkSelectionTest(payload) {\r\n        var nativeEditor = payload.editor.get('nativeEditor');\r\n\r\n        return !nativeEditor.isSelectionEmpty() && new CKEDITOR.Link(nativeEditor).getFromSelection();\r\n    };\r\n\r\n    var imageSelectionTest = function imageSelectionTest(payload) {\r\n        var selectionData = payload.data.selectionData;\r\n\r\n        return selectionData.element && selectionData.element.getName() === 'img';\r\n    };\r\n\r\n    var textSelectionTest = function textSelectionTest(payload) {\r\n        var nativeEditor = payload.editor.get('nativeEditor');\r\n\r\n        var selectionEmpty = nativeEditor.isSelectionEmpty();\r\n\r\n        var selectionData = payload.data.selectionData;\r\n\r\n        return !selectionData.element && selectionData.region && !selectionEmpty;\r\n    };\r\n\r\n    var tableSelectionTest = function tableSelectionTest(payload) {\r\n        var nativeEditor = payload.editor.get('nativeEditor');\r\n\r\n        return !!new CKEDITOR.Table(nativeEditor).getFromSelection();\r\n    };\r\n\r\n    AlloyEditor.SelectionTest = {\r\n        image: imageSelectionTest,\r\n        link: linkSelectionTest,\r\n        table: tableSelectionTest,\r\n        text: textSelectionTest,\r\n        figure: figureSelectionTest\r\n    };\r\n})();\r\n'use strict';\r\n```\r\n\r\ninvoke the static editable method of AlloyEditor\r\n```javascript\r\nvar advanced_toolbars = {\r\n                add: {\r\n                    buttons: ['images', 'attchments', 'embed', 'hline', 'table'],\r\n                    tabIndex: 2\r\n                },\r\n                styles: {\r\n                    selections: [\r\n                       {\r\n                            name: 'figure',\r\n                            buttons: ['figureLeft', 'figureFull', 'figureRight'],\r\n                            test: AlloyEditor.SelectionTest.figure\r\n                        }, {\r\n                            name: 'link',\r\n                            buttons: ['linkEdit'],\r\n                            test: AlloyEditor.SelectionTest.link\r\n                        }, {\r\n                            name: 'image',\r\n                            buttons: ['imageLeft', 'imageCenter', 'imageRight'],\r\n                            test: AlloyEditor.SelectionTest.image\r\n                        }, {\r\n                            name: 'text',\r\n                            buttons: ['styles', 'bold', 'italic', 'underline', 'strike', 'quote', 'ol', 'ul', 'link', 'paragraphLeft', 'paragraphRight', 'paragraphCenter', 'paragraphJustify', 'removeFormat'],\r\n                            test: AlloyEditor.SelectionTest.text\r\n                        }, {\r\n                            name: 'table',\r\n                            buttons: [{\r\n                                name: 'styles',\r\n                                cfg: {\r\n                                    styles: tableStyles\r\n                                }\r\n                            },'tableHeading', 'tableRow', 'tableColumn', 'tableCell', 'tableRemove'],\r\n                            getArrowBoxClasses: AlloyEditor.SelectionGetArrowBoxClasses.table,\r\n                            setPosition: AlloyEditor.SelectionSetPosition.table,\r\n                            test: AlloyEditor.SelectionTest.table\r\n                        }\r\n                    ],\r\n                    tabIndex: 1\r\n                }\r\n            };\r\nvar editor = AlloyEditor.editable('content-body-{{ content.id }}', {\r\n    toolbars: advanced_toolbars\r\n });\r\n```"},"comment":{"url":"https://api.github.com/repos/liferay/alloy-editor/issues/comments/125361079","html_url":"https://github.com/liferay/alloy-editor/issues/300#issuecomment-125361079","issue_url":"https://api.github.com/repos/liferay/alloy-editor/issues/300","id":125361079,"user":{"login":"jbalsas","id":905006,"avatar_url":"https://avatars.githubusercontent.com/u/905006?v=3","gravatar_id":"","url":"https://api.github.com/users/jbalsas","html_url":"https://github.com/jbalsas","followers_url":"https://api.github.com/users/jbalsas/followers","following_url":"https://api.github.com/users/jbalsas/following{/other_user}","gists_url":"https://api.github.com/users/jbalsas/gists{/gist_id}","starred_url":"https://api.github.com/users/jbalsas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jbalsas/subscriptions","organizations_url":"https://api.github.com/users/jbalsas/orgs","repos_url":"https://api.github.com/users/jbalsas/repos","events_url":"https://api.github.com/users/jbalsas/events{/privacy}","received_events_url":"https://api.github.com/users/jbalsas/received_events","type":"User","site_admin":false},"created_at":"2015-07-27T22:09:49Z","updated_at":"2015-07-27T22:09:49Z","body":"Hey @trecreat, keep in mind that when you get down to `selections`, `commands` and `styles`, you're no longer dealing with AlloyEditor, but [CKEditor's API](http://docs.ckeditor.com/#!/api). I recommend you to take a look there to see what is available and how to use it to achieve what we don't provide OOTB.\r\n\r\nIn your case, since CKEditor doesn't really select the `figure` element, the behaviour you get when applying the defined styling to whatever is selected makes _kind of_ sense :)\r\n\r\nInstead of the `onClick: this.applyStyle`, you could probably try something like this:\r\n\r\n```javascript\r\n_onClick: function(event) {\r\n    var editor = this.props.editor.get('nativeEditor');\r\n\r\n    var figureElement = editor.getSelection().getStartElement();\r\n\r\n    new CKEDITOR.style(this.props.style).applyToObject(figureElement, editor);\r\n) \r\n```"}}