@skhemata/skhemata-form/dist/src/SkhemataFormQuill.js

Skhemata Form Web Component. This web component can be used as base web component when working with forms and inputs.

import { __decorate } from "tslib";
import { html, css, property } from '@skhemata/skhemata-base';
import { SkhemataEditorQuill } from '@skhemata/skhemata-editor-quill';
import { SkhemataFormInput } from './SkhemataFormInput';
export class SkhemataFormQuill extends SkhemataFormInput {
    campaignId;
    static get styles() {
        return [
            ...super.styles,
            css `
        button.dropzone {
          cursor: pointer;
          border: none;
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          background: transparent;
        }
        .message {
          width: max-content;
        }
        #dropzone {
          border: none;
        }
        img {
          max-height: 15rem;
        }
        #sp-message {
          padding: 1rem;
        }
        .description {
          margin-bottom: 1rem;
        }
      `,
        ];
    }
    static get scopedElements() {
        return {
            'sk-quill': SkhemataEditorQuill,
        };
    }
    dropzone;
    editor;
    helpMessage = '';
    async firstUpdated() {
        await super.firstUpdated();
        this.editor = this.shadowRoot.getElementById('editor');
        this.editor.updateComplete.then(() => {
            this.initQuill();
        });
    }
    initQuill() {
        if (this.value) {
            // const delta = JSON.parse(this.value)?.ops;
            // this.editor.setContents(delta);
            const delta = this.editor.quill?.clipboard.convert(this.value);
            this.editor.quill.setContents(delta, 'silent');
        }
        this.editor.quill?.on('text-change', () => {
            // this.value = JSON.stringify(this.editor.quill.getContents());
            this.value = this.editor.quill.root.innerHTML;
        });
    }
    render() {
        const field = html `
    <div class="field">
        ${this.label && !this.horizontal
            ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>`
            : null}
        <div
          class="control"
        >
          ${this.description && !this.horizontal
            ? html `<p>${this.description}</p>`
            : null}
            <sk-quill id="editor" campaignId="${this.campaignId}" .api=${this.api} ></sk-quill>
          </div>
        ${!this.valid
            ? html `<p class="help ${this.helpClass}">${this.errorMessage}</p>`
            : ``}
      </div>

    `;
        const horizontalFieldLabel = html `
    <div class="field-label column is-one-quarter" style="text-align: left">
      ${this.label ? html `<label class="label">${this.label} ${this.required ? html `<span style="color: red">*</span>` : null}</label>` : null}
      ${this.description ? html `<p>${this.description}</p>` : null}
    </div>
  `;
        const horizontalField = html `
      <div class="field is-horizontal">
        ${this.label || this.description ? horizontalFieldLabel : null}
        <div class="field-body column">${field}</div>
      </div>
    `;
        return this.horizontal ? horizontalField : field;
    }
}
__decorate([
    property({ type: Number })
], SkhemataFormQuill.prototype, "campaignId", void 0);
__decorate([
    property({ type: Object, attribute: false })
], SkhemataFormQuill.prototype, "dropzone", void 0);
__decorate([
    property({ type: HTMLElement })
], SkhemataFormQuill.prototype, "editor", void 0);
__decorate([
    property({ type: String })
], SkhemataFormQuill.prototype, "helpMessage", void 0);
//# sourceMappingURL=SkhemataFormQuill.js.map