@nectary/components 2.6.1 → 2.7.0

package/rich-textarea/index.js

@@ -0,0 +1,464 @@
+import { getEmojiBaseUrl } from '../emoji/utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isElementFocused, NectaryElement, parseMarkdown, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input-wrapper{position:relative;padding:8px 10px 8px 12px;box-sizing:border-box}#input{font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);white-space:pre-wrap;overflow-wrap:break-word;border:none;outline:0}#placeholder{display:none;position:absolute;left:0;top:0;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-placeholder);padding:8px 10px 8px 12px;pointer-events:none;user-select:none}#input.empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}:host([disabled]){color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}:host(:not([disabled])) #input-wrapper:focus-within~#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}.oli,.p,.uli{margin:0}.oli.l0,.uli.l0{margin-left:6px}.oli.l1,.uli.l1{margin-left:36px}.oli.l2,.uli.l2{margin-left:64px}.oli.l3,.uli.l3{margin-left:92px}.oli.l4,.uli.l4{margin-left:120px}.uli.l0{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli.l1{counter-reset:list-1 list-2 list-3 list-4}.uli.l2{counter-reset:list-2 list-3 list-4}.uli.l3{counter-reset:list-3 list-4}.uli.l4{counter-reset:list-4}.oli.l0{counter-reset:list-1 list-2 list-3 list-4}.oli.l1{counter-reset:list-2 list-3 list-4}.oli.l2{counter-reset:list-3 list-4}.oli.l3{counter-reset:list-4}.oli.l0::before{counter-increment:list-0;content:counter(list-0,decimal) ". "}.oli.l1::before{counter-increment:list-1;content:counter(list-1,lower-alpha) ". "}.oli.l2::before{counter-increment:list-2;content:counter(list-2,lower-roman) ". "}.oli.l3::before{counter-increment:list-3;content:counter(list-3,decimal) ". "}.oli.l4::before{counter-increment:list-4;content:counter(list-4,lower-alpha) ". "}.oli.block,.oli:first-of-type,.p+.oli{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli::before{content:"\\25CF";display:inline-block;width:16px}.oli+.p,.oli.block,.p+.oli,.p+.uli,.uli+.p,.uli.block{margin-top:.5em}.c{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.l{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.i{font-style:italic}.b{font-weight:700}.s{text-decoration:line-through}.e{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;width:1em;height:1em;vertical-align:-.2em}#top-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px 4px 0}#top-wrapper.empty{display:none}#bottom-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 4px 4px}#bottom-wrapper.empty{display:none}</style><div id="wrapper"><div id="top-wrapper"><slot id="top" name="top"></slot></div><div id="input-wrapper"><div id="input" contenteditable suppresscontenteditablewarning autocapitalize="false" autocorrect="false" autosave="false" spellcheck="false"></div><div id="placeholder"></div></div><div id="border"></div><div id="bottom-wrapper"><slot id="bottom" name="bottom"></slot></div></div>';
+import { createParseVisitor, deleteContentBackward, formatIndent, formatInline, formatList, formatOutdent, getEndRange, getSelectionInfo, handleEmojiMousedown, insertFromPaste, insertLineBreak, insertLink, insertText, isEditorEmpty, isSelectionEqual, serializeMarkdown, setBrowserCaret } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === 'function';
+defineCustomElement('sinch-rich-textarea', class extends NectaryElement {
+  #$input;
+  #$placeholder;
+  #controller = null;
+  #sh;
+  #pendingRangePolyfill = false;
+  #$bottomSlot;
+  #$bottomWrapper;
+  #$topSlot;
+  #$topWrapper;
+  #rangePolyfill = null;
+  #cachedRange = null;
+  #lastSelectionInfo = null;
+  #prevDispatchedValue = null;
+  #parseVisitor;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#sh = shadowRoot;
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$placeholder = shadowRoot.querySelector('#placeholder');
+    this.#$topSlot = shadowRoot.querySelector('#top');
+    this.#$topWrapper = shadowRoot.querySelector('#top-wrapper');
+    this.#$bottomSlot = shadowRoot.querySelector('#bottom');
+    this.#$bottomWrapper = shadowRoot.querySelector('#bottom-wrapper');
+    Object.defineProperty(this.#$input, 'ownerDocument', {
+      value: shadowRoot
+    });
+    if (typeof shadowRoot.createElement !== 'function') {
+      Object.defineProperty(shadowRoot, 'createElement', {
+        value: document.createElement.bind(shadowRoot.ownerDocument)
+      });
+    }
+    Object.defineProperty(shadowRoot, 'createTextNode', {
+      value: document.createTextNode.bind(shadowRoot.ownerDocument)
+    });
+    Object.defineProperty(shadowRoot, 'createElementNS', {
+      value: document.createElementNS.bind(shadowRoot.ownerDocument)
+    });
+    Object.defineProperty(shadowRoot, 'createDocumentFragment', {
+      value: document.createDocumentFragment.bind(shadowRoot.ownerDocument)
+    });
+    this.#parseVisitor = createParseVisitor(shadowRoot);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.role = 'textbox';
+    this.ariaMultiLine = 'true';
+    this.#$input.addEventListener('beforeinput', this.#onBeforeInput, options);
+    this.#$input.addEventListener('keydown', this.#onKeydown, options);
+    this.#$input.addEventListener('mousedown', this.#onMouseDown, options);
+    this.#$input.addEventListener('focus', this.#onInputFocus, options);
+    this.#$input.addEventListener('blur', this.#onInputBlur, options);
+    this.#$input.addEventListener('dragstart', this.#onDragStart, options);
+    this.#$input.addEventListener('cut', this.#onCut, options);
+    this.#$input.addEventListener('copy', this.#onCopy, options);
+    this.#$input.addEventListener('paste', this.#onPaste, options);
+    this.#$bottomSlot.addEventListener('slotchange', this.#onBottomSlotChange, options);
+    this.#$topSlot.addEventListener('slotchange', this.#onTopSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.addEventListener('-selection', this.#onSelectionReactHandler, options);
+    document.addEventListener('selectionchange', this.#onSelectionChange, options);
+    this.#parseVisitor.updateEmojiBaseUrl(getEmojiBaseUrl(this));
+    this.#onTopSlotChange();
+    this.#onBottomSlotChange();
+    this.#onValueChange(this.value);
+    this.#cachedRange = getEndRange(this.#$input);
+    this.#updateEditorEmptyClass();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['value', 'placeholder'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          if (this.isConnected) {
+            this.#onValueChange(newVal);
+          }
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$placeholder.textContent = newVal;
+          updateAttribute(this, 'aria-placeholder', newVal);
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+  get placeholder() {
+    return getAttribute(this, 'placeholder');
+  }
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+  set rows(value) {
+    updateAttribute(this, 'rows', value);
+  }
+  get rows() {
+    return getIntegerAttribute(this, 'rows', 0);
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$input.focus();
+  }
+  blur() {
+    this.#$input.blur();
+  }
+  insertText(value) {
+    const res = this.#handleInput('insertText', this.#getCurrentRange(), value);
+    this.#handleActionResult(res);
+  }
+  insertLink(text, href) {
+    const res = this.#handleInput('insertLink', this.#getCurrentRange(), text, href);
+    this.#handleActionResult(res);
+  }
+  formatItalic() {
+    const res = this.#handleInput('formatItalic', this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  formatBold() {
+    const res = this.#handleInput('formatBold', this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  formatStrikethrough() {
+    const res = this.#handleInput('formatStrikeThrough', this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  formatCodeTag() {
+    const res = this.#handleInput('formatCodeTag', this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  formatOrderedList() {
+    const res = formatList(true, this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  formatUnorderedList() {
+    const res = formatList(false, this.#getCurrentRange());
+    this.#handleActionResult(res);
+  }
+  #getSelectionRange() {
+    if (SUPPORTS_SHADOW_SELECTION) {
+      const selection = this.#sh.getSelection();
+      if (selection === null || selection.rangeCount === 0) {
+        return null;
+      }
+      return selection.getRangeAt(0);
+    }
+    {
+      const selection = document.getSelection();
+      if (selection === null || selection.rangeCount === 0) {
+        return null;
+      }
+      const range = selection.getRangeAt(0);
+      if (this.#$input.contains(range.startContainer)) {
+        return range;
+      }
+    }
+    this.#pendingRangePolyfill = true;
+    this.#rangePolyfill = null;
+    document.execCommand('indent');
+    this.#pendingRangePolyfill = false;
+    return this.#rangePolyfill;
+  }
+  #onMouseDown = e => {
+    this.#handleActionResult(handleEmojiMousedown(e.target));
+  };
+  #onKeydown = e => {
+    if (e.shiftKey) {
+      switch (e.key) {
+        case 'Tab':
+          {
+            const res = this.#handleInput('formatOutdent', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
+          }
+      }
+    } else {
+      switch (e.key) {
+        case 'Tab':
+          {
+            const res = this.#handleInput('formatIndent', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
+          }
+      }
+    }
+    if (e.metaKey || e.ctrlKey) {
+      switch (e.key) {
+        case 'b':
+          {
+            const res = this.#handleInput('formatBold', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
+          }
+        case 'i':
+          {
+            const res = this.#handleInput('formatItalic', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
+          }
+      }
+      if (e.shiftKey) {
+        switch (e.key) {
+          case 'x':
+            {
+              const res = this.#handleInput('formatStrikeThrough', this.#getSelectionRange());
+              if (res.prevent) {
+                e.preventDefault();
+              }
+              this.#handleActionResult(res);
+              break;
+            }
+          case 'c':
+            {
+              const res = this.#handleInput('formatCodeTag', this.#getSelectionRange());
+              if (res.prevent) {
+                e.preventDefault();
+              }
+              this.#handleActionResult(res);
+              break;
+            }
+        }
+      }
+    }
+  };
+  #onBeforeInput = e => {
+    const [range] = e.getTargetRanges();
+    if (this.#pendingRangePolyfill) {
+      this.#pendingRangePolyfill = false;
+      this.#rangePolyfill = range;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    const handleResult = this.#handleInput(e.inputType, range, e.data);
+    if (handleResult.prevent) {
+      e.preventDefault();
+    }
+    this.#handleActionResult(handleResult);
+  };
+  #handleInput(inputType, range, text, href) {
+    if (range === null) {
+      return {
+        prevent: true,
+        range: null
+      };
+    }
+    switch (inputType) {
+      case 'deleteContent':
+      case 'deleteContentForward':
+      case 'deleteWordForward':
+      case 'deleteContentBackward':
+      case 'deleteWordBackward':
+        {
+          return deleteContentBackward(this.#$input, range);
+        }
+      case 'insertLineBreak':
+      case 'insertParagraph':
+        {
+          return insertLineBreak(range);
+        }
+      case 'insertReplacementText':
+      case 'insertText':
+        {
+          return insertText(this.#$input, text, range);
+        }
+      case 'insertLink':
+        {
+          return insertLink(this.#$input, text, href, range);
+        }
+      case 'formatItalic':
+      case 'formatBold':
+      case 'formatStrikeThrough':
+      case 'formatCodeTag':
+        {
+          return formatInline(inputType, range);
+        }
+      case 'formatIndent':
+        {
+          return formatIndent(range);
+        }
+      case 'formatOutdent':
+        {
+          return formatOutdent(range);
+        }
+      default:
+        {
+          return {
+            prevent: true,
+            range: null
+          };
+        }
+    }
+  }
+  #handleActionResult(result) {
+    if (result.prevent) {
+      this.#cachedRange = result.range;
+      if (result.range !== null) {
+        setBrowserCaret(result.range);
+      }
+    }
+    this.#updateEditorEmptyClass();
+  }
+  #onInputFocus = () => {
+    if (this.#cachedRange !== null) {
+      setBrowserCaret(this.#cachedRange);
+    }
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+    this.#dispatchChangeEvent();
+  };
+  #dispatchChangeEvent() {
+    const value = serializeMarkdown(this.#$input, null);
+    this.#prevDispatchedValue = value;
+    if (value !== this.value) {
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: value
+      }));
+    }
+  }
+  #getCurrentRange = () => {
+    if (isElementFocused(this.#$input)) {
+      this.#cachedRange = this.#getSelectionRange();
+    }
+    if (this.#cachedRange === null) {
+      this.#cachedRange = getEndRange(this.#$input);
+    }
+    return this.#cachedRange;
+  };
+  #onSelectionChange = () => {
+    if (isElementFocused(this.#$input)) {
+      this.#cachedRange = this.#getSelectionRange();
+    }
+    if (this.#cachedRange === null) {
+      return;
+    }
+    const selectionInfo = getSelectionInfo(this.#cachedRange);
+    if (!isSelectionEqual(this.#lastSelectionInfo, selectionInfo)) {
+      this.#lastSelectionInfo = selectionInfo;
+      this.dispatchEvent(new CustomEvent('-selection', {
+        detail: selectionInfo
+      }));
+    }
+  };
+  #onValueChange(value) {
+    if (value === this.#prevDispatchedValue) {
+      return;
+    }
+    if (value === null || value.length === 0) {
+      this.#$input.innerHTML = '';
+      this.#cachedRange = getEndRange(this.#$input);
+      this.#prevDispatchedValue = value;
+      this.#updateEditorEmptyClass();
+      return;
+    }
+    this.#cachedRange = null;
+    this.#prevDispatchedValue = value;
+    this.#$input.replaceChildren(parseMarkdown(value, this.#parseVisitor.createVisitor()));
+    this.#updateEditorEmptyClass();
+  }
+  #onCopy = e => {
+    e.preventDefault();
+    if (this.#cachedRange === null) {
+      return;
+    }
+    if (e.clipboardData != null) {
+      e.clipboardData.setData('text/plain', serializeMarkdown(this.#$input, this.#cachedRange));
+    }
+  };
+  #onCut = e => {
+    e.preventDefault();
+    if (this.#cachedRange === null) {
+      return;
+    }
+    if (e.clipboardData != null) {
+      e.clipboardData.setData('text/plain', serializeMarkdown(this.#$input, this.#cachedRange));
+    }
+    this.#handleActionResult(deleteContentBackward(this.#$input, this.#cachedRange));
+  };
+  #onPaste = e => {
+    e.preventDefault();
+    const pasteValue = e.clipboardData?.getData('text/plain') ?? '';
+    if (pasteValue.length === 0 || this.#cachedRange === null) {
+      return;
+    }
+    this.#handleActionResult(insertFromPaste(pasteValue, this.#cachedRange, this.#parseVisitor.createVisitor()));
+  };
+  #updateEditorEmptyClass() {
+    setClass(this.#$input, 'empty', isEditorEmpty(this.#$input));
+  }
+  #onBottomSlotChange = () => {
+    const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
+    setClass(this.#$bottomWrapper, 'empty', isEmpty);
+  };
+  #onTopSlotChange = () => {
+    const isEmpty = this.#$topSlot.assignedElements().length === 0;
+    setClass(this.#$topWrapper, 'empty', isEmpty);
+  };
+  #onDragStart = e => {
+    e.preventDefault();
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onSelectionReactHandler = e => {
+    getReactEventHandler(this, 'on-selection')?.(e);
+  };
+});

package/rich-textarea/types.d.ts

@@ -0,0 +1,48 @@
+import type { TSinchElementReact } from '../types';
+export type TRichTextareaSelection = {
+    italic: boolean;
+    bold: boolean;
+    strikethrough: boolean;
+    codetag: boolean;
+    link: boolean;
+    ulist: boolean;
+    olist: boolean;
+};
+export type TSinchRichTextareaElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder: string | null;
+    insertText(value: string): void;
+    insertLink(text: string, href: string): void;
+    formatItalic(): void;
+    formatBold(): void;
+    formatStrikethrough(): void;
+    formatCodeTag(): void;
+    formatOrderedList(): void;
+    formatUnorderedList(): void;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-selection', listener: (e: CustomEvent<TRichTextareaSelection>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text that appears in the text field when it has no value set */
+    setAttribute(name: 'placeholder', value: string): void;
+};
+export type TSinchRichTextareaReact = TSinchElementReact<TSinchRichTextareaElement> & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder?: string;
+    'aria-label': string;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/rich-textarea/types.js

@@ -0,0 +1 @@
+export {};

package/rich-textarea/utils.d.ts

@@ -0,0 +1,39 @@
+import type { TRichTextareaSelection } from './types';
+import type { TMarkdownParseVisitor } from '../utils';
+export interface TRichTextareaRoot extends HTMLElement {
+    nodeName: 'DIV';
+}
+export type TRange = {
+    endContainer: Node;
+    endOffset: number;
+    startContainer: Node;
+    startOffset: number;
+};
+export type TRichTextareaFormatInputType = 'formatItalic' | 'formatBold' | 'formatStrikeThrough' | 'formatCodeTag';
+export declare const formatInline: (formatType: TRichTextareaFormatInputType, range: TRange) => TActionResult;
+export declare const formatIndent: (range: TRange) => TActionResult;
+export declare const formatOutdent: (range: TRange) => TActionResult;
+export declare const formatList: (isOrdered: boolean, range: TRange) => TActionResult;
+export type TActionResult = {
+    prevent: false;
+} | {
+    range: TRange | null;
+    prevent: true;
+};
+export declare const deleteContentBackward: ($root: TRichTextareaRoot, range: TRange) => TActionResult;
+export declare const insertLink: ($root: TRichTextareaRoot, text: string, href: string, range: TRange) => TActionResult;
+export declare const insertLineBreak: (range: TRange) => TActionResult;
+export declare const insertText: ($root: TRichTextareaRoot, data: string | null, range: TRange) => TActionResult;
+export declare const insertFromPaste: (data: string, range: Readonly<TRange>, visitor: TMarkdownParseVisitor) => TActionResult;
+export declare const handleEmojiMousedown: ($n: Node) => TActionResult;
+export declare const getBeginRange: ($root: TRichTextareaRoot) => TRange;
+export declare const getEndRange: ($root: TRichTextareaRoot) => TRange;
+export declare const getSelectionInfo: (range: TRange) => TRichTextareaSelection;
+export declare const isSelectionEqual: (a: TRichTextareaSelection | null, b: TRichTextareaSelection | null) => boolean;
+export declare const isEditorEmpty: ($root: TRichTextareaRoot) => boolean;
+export declare const serializeMarkdown: ($root: TRichTextareaRoot, range: Readonly<TRange> | null) => string;
+export declare const createParseVisitor: (doc: Document) => {
+    updateEmojiBaseUrl(url: string | null): void;
+    createVisitor(): TMarkdownParseVisitor;
+};
+export declare const setBrowserCaret: ({ startContainer, startOffset, endContainer, endOffset }: TRange) => void;