Use no shadow dom field in client sided Binder (CKEditor)

Hilla
1

I am currently trying to create a custom field with a CKEditor. I followed the documentation Binding Data to Custom Components and this works. For the CKEditor to be rendered, I cannot have the template in the Shadow DOM.
As soon as I remove the Shadow DOM like following, the Binder does not get changed value anymore. No Validator get called and when submitting, the old value is still in the bean.

createRenderRoot(): HTMLElement | ShadowRoot {
   // Do not use a shadow root
   return this;
}

Using Hilla 2.5 with Lit. Reproduceable with Flow 24.5 starter today.

Does someone know can I create a custom component without a Shadow DOM that the binder can listen to? Does some know a solution to this or does this sound like an bug?
When this don’t work, I won’t use the Binder for this field and handle the value myself.

Thanks!

2

There are already some CKEditor addons out there, maybe you can have a glimpse there, how they solved the integration.

The Binder in Flow should not care about the client side structure, as long as the bound server side component implements the respective “has value and change event” interface and fires a value change event. Have you checked, if that is the case? (Not sure, what it requires in Hilla to work)

3

I do not use the Binder in Flow. Only client sided the @hilla/form package.

Thanks, I will look into the addons, maybe I can find there some input.

4

You need to wrap the CKEditor in a component that has the shared API’s of the Vaadin’s field components, I mean properties and attributes with the same name. The Binder will e.g. assume that the value is in property value. It also assumes that the is attribute “invalid”, when being set, field will show error styles when validation error occurs. The should be also attribute error-message which is set by Binder when validation error occurs. The attribute required will turn on the required indicator. These properties and attributes should be operable via actual root element of the component, not just React props, and you should use forwardRef to pass that root element on, so that the field directive can use it.

5

Hey Tatu,

I just don’t get it to work… The strategy is used but no value change is detected by the binder.
Where is a value change listener registered for the value property?
Could you give me some advise please?

import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";

import { ClassicEditor, Essentials, Bold, Italic, Font, Paragraph, List, Link, Indent, IndentBlock, HorizontalLine, CodeBlock, GeneralHtmlSupport, SourceEditing, SpecialCharactersEssentials, SpecialCharacters, Autosave, EmitterMixin } from 'ckeditor5';
// import MathType from '@wiris/mathtype-ckeditor5/dist/index.js';
import 'ckeditor5/ckeditor5.css';

import type { AbstractModel, DetachedModelConstructor, FieldStrategy } from '@vaadin/hilla-lit-form';
import { Binder, StringModel } from '@vaadin/hilla-lit-form';

import { View } from "Frontend/views/view";

@customElement('ck-editor-field')
export class CKEditorField extends View {

    @property({ type: String }) label = '';
    @property({ type: String }) value = '';
    @property({ type: Boolean }) required = false;
    @property({ type: Boolean }) invalid = false;
    @property({ type: String }) errorMessage = '';

    private editor?: ClassicEditor

    constructor() {
        super()
    }

    connectedCallback() {
        super.connectedCallback()
        setTimeout(async () => {
            const newLocal = document.querySelector('#editor');
            if (newLocal) {
                const editor = await ClassicEditor.create(newLocal as HTMLElement, {
                    plugins: [Autosave, Essentials, Bold, Italic, Font, Paragraph, List, Link, Indent, IndentBlock, HorizontalLine, CodeBlock, GeneralHtmlSupport, SourceEditing, SpecialCharacters, SpecialCharactersEssentials],
                    toolbar: [
                        'undo', 'redo', '|', 'bold', 'italic', 'fontColor', '|',
                        'numberedList', 'bulletedList', 'outdent', 'indent', '|',
                        'link', 'horizontalLine', 'codeBlock', 'specialCharacters', '|',
                        'sourceEditing'
                    ],
                    autosave: { save: async () => { } }
                })
                editor.setData(this.value)
                editor.model.document.on('change:data', () => {
                    this.onValueChanged(editor.getData())
                })
            }
        })

    }
    disconnectedCallback() {
        super.disconnectedCallback()
        if (this.editor) {
            this.editor.destroy()
            this.editor = undefined
        }
    }

    render() {
        return html`
            <div id="editor">
                <button @click=${() => this.onValueChanged('button clock')}>Change Value</button>
            </div>
        `
    }

    onValueChanged(value: string) {
        console.log("inner value change", value);
        this.value = value;
    }

}

export class CKEditorStrategy implements FieldStrategy {
    element: CKEditorField;

    constructor(element: CKEditorField) {
        this.element = element;
    }

    set required(required: boolean) {
        this.element.required = required;
    }

    set invalid(invalid: boolean) {
        this.element.invalid = invalid;
    }

    set errorMessage(errorMessage: string) {
        this.element.errorMessage = errorMessage;
    }

    // ...
    validate = async () => [];

    get value() {
        return this.element.value;
    }

    set value(value) {
        this.element.value = value;
    }

    setAttribute(key: string, val: unknown) {
        if (val) {
            this.element.setAttribute(key, '');
        } else {
            this.element.removeAttribute(key);
        }
    }

    get validity() {
        return {
            badInput: false,
            customError: false,
            patternMismatch: false,
            rangeOverflow: false,
            rangeUnderflow: false,
            stepMismatch: false,
            tooLong: false,
            tooShort: false,
            typeMismatch: false,
            valueMissing: false,
            valid: true
        };
    }

    checkValidity() {
        return true;
    }

    removeEventListeners() { }
}


export class CKEditorBinder<M extends AbstractModel> extends Binder<M> {
    constructor(context: Element, model: DetachedModelConstructor<M>) {
        super(context, model);
    }

    override getFieldStrategy(element: any, model?: AbstractModel): FieldStrategy {
        console.log(element.localName, model);
        
        if (element.localName === 'ck-editor-field' && model instanceof StringModel) {
            
            console.log("Match");
            return new CKEditorStrategy(element);
        }
        return super.getFieldStrategy(element);
    }
}