import { r as registerInstance, c as createEvent, h, H as Host } from './index-b7735e0d.js';

const dvnRichEditorTextBlockCss = "dvn-rich-editor-text-block{display:block;-ms-flex:1;flex:1;position:relative}dvn-rich-editor-text-block .ql-editor{line-height:24px}dvn-rich-editor-text-block .ql-editor.ql-blank::before{color:var(--color-text-secondary);content:attr(data-placeholder);font-style:italic;left:0;pointer-events:none;position:absolute;right:15px}dvn-rich-editor-text-block .ql-editor *:first-child{margin-top:0}dvn-rich-editor-text-block .ql-editor *:last-child{margin-bottom:0}dvn-rich-editor-text-block .ql-clipboard{display:none}";

let DvnRichEditor = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.lastBackspaceKeyDown = createEvent(this, "lastBackspaceKeyDown", 7);
    this.arrowDown = createEvent(this, "arrowDown", 7);
    this.arrowUp = createEvent(this, "arrowUp", 7);
    this.isContentCleared = false;
    /**
     * The last position of the cursor is saved here to focus after parent re-render. Otherwise the focus is lost.
     */
    this.lastCursorPosition = undefined;
    this.getValue = () => this.quill.root.innerHTML;
    this.onTextChange = () => {
      if (this.quill.getLength() === 1) {
        // set flag after a while. onKeyDown callback on host should ignore the
        // first key down because it would be the same event that clears the content
        // we want to delete this component once it's blank and user presses backspace
        setTimeout(() => this.isContentCleared = true, 100);
        // hide the overlay menu if the text is cleared
        // 1 means it's empty. See: https://quilljs.com/docs/api/#getlength
        this.overlayMenu.hide();
      }
      this.retainPosition();
      this.change.emit({
        id: this.id,
        value: {
          text: this.getValue(),
        }
      });
    };
    this.retainPosition = () => this.lastCursorPosition = this.quill.getSelection();
    this.onTextSelectionChange = (range) => {
      if (!range) {
        // cursor is not in the editor
        this.overlayMenu.hide();
        return;
      }
      if (range.length == 0) {
        // cursor is on a single position, no text is selected
        this.overlayMenu.hide();
        return;
      }
      // a text is selected
      const existingFormat = this.quill.getFormat(range);
      this.overlayMenu.show(range, existingFormat);
    };
  }
  componentDidLoad() {
    var _a;
    // @ts-ignore
    this.quill = new Quill(`#editor-${this.id}`, {
      placeholder: (_a = this.value) === null || _a === void 0 ? void 0 : _a.placeholder,
    });
    this.quill.on('text-change', this.onTextChange);
    this.quill.on('selection-change', this.onTextSelectionChange);
    this.quill.clipboard.dangerouslyPasteHTML(this.value.text);
  }
  async focusOnInput() {
    this.quill.setSelection(this.lastCursorPosition || this.quill.getLength(), 0, 'silent');
  }
  async getRawValue() {
    return this.quill.getText();
  }
  render() {
    return (h(Host, { onKeyDown: (e) => {
        if (e.key === 'Backspace' && this.isContentCleared) {
          this.lastBackspaceKeyDown.emit(e);
        }
        else if (e.key === 'ArrowDown') {
          // focus on the next component if the cursor is at the end and down arrow is pressed
          if (this.quill.getSelection().index + 1 === this.quill.getLength()) {
            this.arrowDown.emit(e);
          }
        }
        else if (e.key === 'ArrowUp') {
          // focus on the previous component if the cursor is at the beginning and up arrow is pressed
          if (this.quill.getSelection().index === 0) {
            this.arrowUp.emit(e);
          }
        }
        else if (e.key === 'Enter' && this.lastCursorPosition) {
          // this is needed when Enter is pressed at the end and the parent component re-renders
          this.lastCursorPosition = Object.assign(Object.assign({}, this.lastCursorPosition), { index: this.lastCursorPosition.index + 1 });
        }
      } }, h("div", { id: `editor-${this.id}` }), h("dvn-rich-editor-overlay-menu", { enabledActions: this.editorSettings.blockSettings.text.textSelectionOptions, ref: (el) => this.overlayMenu = el, onOverlayMenuAction: (range, action, value) => {
        if (action === 'link') {
          this.quill.formatText(range.index, range.length, action, value);
        }
        else {
          const existingFormat = this.quill.getFormat(range);
          this.quill.format(action, !((existingFormat === null || existingFormat === void 0 ? void 0 : existingFormat[action]) || false));
        }
      } })));
  }
};
DvnRichEditor.style = dvnRichEditorTextBlockCss;

export { DvnRichEditor as dvn_rich_editor_text_block };
