search

Lundalogik / lime-elements

Provides reusable web components for Lime CRM
https://lundalogik.github.io/lime-elements/versions/latest
Other
38 stars 12 forks source link

feat(text-editor): reinitialise editor on reconnect #3014

Closed LawrenceBorst closed 3 weeks ago

LawrenceBorst commented 1 month ago

Fixes Lundalogik/lime-elements#3010

How to test:

I have been using this code below, which replaces the existing basic prosemirror editor example

import { LimelProsemirrorAdapterCustomEvent } from '@limetech/lime-elements';
import { Component, Element, h, State } from '@stencil/core';
/**
 * Basic example
 *
 * Try typing and editing text, or copy & paste in some rendered HTML code
 * from your browser into the editor to see how it is rendered and what you get
 * as an output value.
 */
@Component({
    tag: 'limel-example-prosemirror-adapter-basic',
    shadow: true,
})
export class ProsemirrorAdapterBasicExample {
    @Element()
    private host: HTMLElement;

    @State()
    private text: string = '';

    private prosemirrorAdapter: HTMLElement;

    private handleChange = (
        event: LimelProsemirrorAdapterCustomEvent<string>,
    ): void => {
        event.stopPropagation();

        this.text = event.detail;
        (this.prosemirrorAdapter as any).value = event.detail;
    };

    public componentWillLoad() {
        this.prosemirrorAdapter = document.createElement(
            'limel-prosemirror-adapter',
        );
        this.prosemirrorAdapter.onchange = this.handleChange;
    }

    public render() {
        return [<limel-example-value value={this.text} />];
    }

    public componentDidLoad() {
        this.host.shadowRoot.appendChild(this.prosemirrorAdapter);

        setTimeout(() => {
            this.host.shadowRoot.removeChild(this.prosemirrorAdapter);
        }, 10000);

        setTimeout(() => {
            this.host.shadowRoot.appendChild(this.prosemirrorAdapter);
        }, 20000);
    }
}

This creates a prosemirror adapter, connects it to the DOM, then after 10 seconds disconnects it, and after 20 seconds reconnects it. You can put breakpoints in the connectedCallback and disconnectedCallback functions to test the behaviour, and set attributes on the element itself (as we did with onchange).

Review:

Browsers tested:

(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)

Windows:

Linux:

macOS:

Mobile:

github-actions[bot] commented 1 month ago

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3014/

lime-opensource commented 3 weeks ago

:tada: This PR is included in version 37.49.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: