Ckeditor5: How to override LinkFormView?

[oskarwrobel]

I need to use Link plugin with a custom form view. Everything should work the same but View has to have a different markup. That's it. I see 2 ways to do it:

1. Create a copy of Link class and change import of LinkFormView and also create a copy of LinkFormView and change template. Easy but produces a lot of duplicated code to maintenance. Eventually, we can split Link and LinkformView into small helpers to reduce duplicated code.
2. Try to change Link and LinkFormView classes to be available to extend and override. Makes Link#_createFormView @protected instead of @private and move LinkFormView template definition from constructor to @protected method.

Option 2 seems to be the easiest from my perspective.

[oleq]

Well, we're back to the roots of the UI library here. The initial assumption was that views are interchangeable but we dropped the idea after a while because it meant a very complex architecture.

I'd try to create a CustomLinkFormView which inherits from LinkFormView but with a different template. Then I'd create a CustomLink inheriting from Link with a custom _createForm implementation that uses CustomLinkFormView.

Perhaps it's possible to do it on the build-level? Like silently replace LinkFormView with CustomLinkFormView?

/cc @Reinmar

[oleq]

It also depends on to what extent the new LinkFormView will customize the basic one. If this is something simple maybe there's no need to create CustomLinkFormView but manipulate the template somehow directly from the CustomLink?

[oskarwrobel]

I need to change an order of child views and remove one container. So I'm afraid that I need a new template definition.

[oskarwrobel]

Theoretically, I can try to hack this view by a CSS but I'm not sure if it is a right way.

[oleq]

I need to change an order of child views

~They're in collection so remove() + add( view, index ) should do the trick, even after template was rendered.~

They're not in collections :(

remove one container

Which one? Maybe this can be hacked with CSS.

[oskarwrobel]

Now is:

this.template = new Template( {
    tag: 'form',

    attributes: {
        class: [
            'ck-link-form',
        ]
    },

    children: [
        this.urlInputView,
        {
            tag: 'div',

            attributes: {
                class: [
                    'ck-link-form__actions'
                ]
            },

            children: [
                this.saveButtonView,
                this.cancelButtonView,
                this.unlinkButtonView
            ]
        }
    ]
} );

I need:

this.template = new Template( {
    tag: 'form',

    attributes: {
        class: [
            'ck-link-form',
        ]
    },

    children: [
        this.unlinkButtonView
        this.urlInputView,
        this.saveButtonView,
        this.cancelButtonView,
    ]
} );

[oskarwrobel]

I don't even need to change order of child for the FocysCycler.

[Reinmar]

I replied regarding some aspects of this ticket in https://github.com/ckeditor/ckeditor5/issues/425.

[oskarwrobel]

I'll use webpack to replace this View.

[Reinmar]

Could you post some example how you configured this under https://github.com/ckeditor/ckeditor5/issues/425?