Adding new selection

Hi @ipeychev ,
I tried by adding a new selection, but it seems not work, the toolbar for new selection does not appear

HTML code in the editor's content

<figure>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/jeWYdbi5CbM" frameborder="0" allowfullscreen></iframe>
    <div class="iframe-block"></div>
</figure>

in 'alloy-editor-all.js'

(function () {
    'use strict';

    var figureSelectionTest = function figureSelectionTest(payload) {
        var selectionData = payload.data.selectionData;

        return selectionData.element && selectionData.element.getName() === 'figure';
    };

    var linkSelectionTest = function linkSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        return !nativeEditor.isSelectionEmpty() && new CKEDITOR.Link(nativeEditor).getFromSelection();
    };

    var imageSelectionTest = function imageSelectionTest(payload) {
        var selectionData = payload.data.selectionData;

        return selectionData.element && selectionData.element.getName() === 'img';
    };

    var textSelectionTest = function textSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        var selectionEmpty = nativeEditor.isSelectionEmpty();

        var selectionData = payload.data.selectionData;

        return !selectionData.element && selectionData.region && !selectionEmpty;
    };

    var tableSelectionTest = function tableSelectionTest(payload) {
        var nativeEditor = payload.editor.get('nativeEditor');

        return !!new CKEDITOR.Table(nativeEditor).getFromSelection();
    };

    AlloyEditor.SelectionTest = {
        image: imageSelectionTest,
        link: linkSelectionTest,
        table: tableSelectionTest,
        text: textSelectionTest,
        figure: figureSelectionTest
    };
})();
'use strict';

invoke the static editable method of AlloyEditor

var advanced_toolbars = {
                add: {
                    buttons: ['images', 'attchments', 'embed', 'hline', 'table'],
                    tabIndex: 2
                },
                styles: {
                    selections: [
                       {
                            name: 'figure',
                            buttons: ['figureLeft', 'figureFull', 'figureRight'],
                            test: AlloyEditor.SelectionTest.figure
                        }, {
                            name: 'link',
                            buttons: ['linkEdit'],
                            test: AlloyEditor.SelectionTest.link
                        }, {
                            name: 'image',
                            buttons: ['imageLeft', 'imageCenter', 'imageRight'],
                            test: AlloyEditor.SelectionTest.image
                        }, {
                            name: 'text',
                            buttons: ['styles', 'bold', 'italic', 'underline', 'strike', 'quote', 'ol', 'ul', 'link', 'paragraphLeft', 'paragraphRight', 'paragraphCenter', 'paragraphJustify', 'removeFormat'],
                            test: AlloyEditor.SelectionTest.text
                        }, {
                            name: 'table',
                            buttons: [{
                                name: 'styles',
                                cfg: {
                                    styles: tableStyles
                                }
                            },'tableHeading', 'tableRow', 'tableColumn', 'tableCell', 'tableRemove'],
                            getArrowBoxClasses: AlloyEditor.SelectionGetArrowBoxClasses.table,
                            setPosition: AlloyEditor.SelectionSetPosition.table,
                            test: AlloyEditor.SelectionTest.table
                        }
                    ],
                    tabIndex: 1
                }
            };
var editor = AlloyEditor.editable('content-body-{{ content.id }}', {
    toolbars: advanced_toolbars
 });

[jbalsas]

Hi @trecreat

The problem in your code is that the test function will never return true. In this case, CKEditor simply doesn't return the figure element from the given selection.

I'd suggest you to change the test function to something like:

AlloyEditor.Selections.unshift({
    name: 'figure',
    buttons: ['figureLeft', 'figureFull', 'figureRight'],
    test: function(payload) {
        var editor = payload.editor.get('nativeEditor');
        var element = editor.getSelection().getStartElement();

        // This should work too:
        // var element = new CKEDITOR.dom.element(payload.data.nativeEvent.target);

        return editor.elementPath(element).contains('figure');
    }
});

var editor = AlloyEditor.editable('content-body-{{ content.id }}');

I've tested this, and from the little knowledge I have of what you want to achieve, I think it could work for you. This will show the figure toolbar whenever the start element is contained within a figure element.

Many thanks, @jbalsas !
I changed the the test function as your suggestion, and the toolbar has appeared !

[jbalsas]

Awesome, @trecreat, glad to help!

We'll probably create some guides based on this issue and others of the sort as soon as possible.

Let us know if you find any more issues.

@jbalsas after the toolbar, I have a problem with applying styles on this new selection. <figure> element has been duplicated when applying styles on it

Here is the original html code in editor's content

<p>lorem ipsum</p>
<p>
      <br>
</p>
<figure>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/jeWYdbi5CbM" frameborder="0" allowfullscreen></iframe>
      <div class="iframe-block"></div>
</figure>

After applying styles

<p>lorem ipsum</p>
<p>
      <br>
</p>
<figure>
      <figure style="float:left;">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/jeWYdbi5CbM" frameborder="0" allowfullscreen></iframe>
            <div class="iframe-block"></div>
      </figure>
</figure>

Button code

var ButtonFigureAlignLeft = React.createClass({
                displayName: 'ButtonFigureAlignLeft',
                mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonActionStyle],
                propTypes: {
                    editor: React.PropTypes.object.isRequired,
                    label: React.PropTypes.string,
                    tabIndex: React.PropTypes.number
                },
                statics: {
                    key: 'figureLeft'
                },
                getDefaultProps: function getDefaultProps() {
                    return {
                        style: {
                            element: 'figure',
                            styles: {
                                'float': 'left'
                            }
                        }
                    };
                },
                render: function render() {
                    var cssClass = 'ae-button ' + this.getStateClasses();

                    return React.createElement(
                        'button',
                        { 'aria-label': AlloyEditor.Strings.alignLeft, 'aria-pressed': cssClass.indexOf('pressed') !== -1, className: cssClass, 'data-type': 'button-image-align-left', onClick: this.applyStyle, tabIndex: this.props.tabIndex, title: AlloyEditor.Strings.alignLeft },
                        React.createElement('span', { className: 'ae-icon-align-left' })
                    );
                }
            });
            AlloyEditor.Buttons[ButtonFigureAlignLeft.key] = AlloyEditor.ButtonFigureAlignLeft = ButtonFigureAlignLeft;

[jbalsas]

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. 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.

In 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 :)

Instead of the onClick: this.applyStyle, you could probably try something like this:

_onClick: function(event) {
    var editor = this.props.editor.get('nativeEditor');

    var figureElement = editor.getSelection().getStartElement();

    new CKEDITOR.style(this.props.style).applyToObject(figureElement, editor);
) 

[jbalsas]

Hey @trecreat

Could you try our proposed solution? Did it work for you?

I think we should probably close this as there is no issue in adding new selections :)

@jbalsas really sorry for the delay, i need to find more before asking again. About applying styles on this new selection, everything was ok. But the position of the tool bar is not stable, same new selection for <figure> element.

For <figure> with <img> inside is fine ( i removed original image selection )

<figure class="right">
 <img src="/2015/08/05/khoangkhong_ok3kzvkkbekyeshuipe_82ad4bc1571094e81bd88c586abdb099d6ee070a.gif" alt="tumblr_n74gljqGnH1qjiauvo1_250.gif" class="ckimgrsz" style="width: 331px; height: 422px;">
</figure>

For <figure> with <div> inside, the toolbar is always left

<figure class="right">
 <div class="embed embed-16by9">
  <iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FaPxVSCfoYnU%3Ffeature%3Doembed&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DaPxVSCfoYnU&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FaPxVSCfoYnU%2Fhqdefault.jpg&amp;key=1e68c71e9dfe40b1961d93f7baef9c48&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" scrolling="no" frameborder="0" allowfullscreen=""></iframe>
 </div>
</figure>

Now, I stuck and have to accept this result. In new version, really need something like:

• A built-in embed button / embed videos on pasting URL
• A specific guide ( for beginners like me ) to adding / modify new selection on Alloy Editor's site.

Thank you, your support is much appreciated !