@nectary/components 3.3.1 → 3.3.2

package/lib/cjs/rich-textarea/index.js

@@ -1,466 +0,0 @@
-"use strict";
-
-var _utils = require('../emoji/utils');
-var _utils2 = require('../utils');
-var _utils3 = require('./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>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === 'function';
-(0, _utils2.defineCustomElement)('sinch-rich-textarea', class extends _utils2.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 = (0, _utils3.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((0, _utils.getEmojiBaseUrl)(this));
-    this.#onTopSlotChange();
-    this.#onBottomSlotChange();
-    this.#onValueChange(this.value);
-    this.#cachedRange = (0, _utils3.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;
-          (0, _utils2.updateAttribute)(this, 'aria-placeholder', newVal);
-          break;
-        }
-    }
-  }
-  set value(value) {
-    (0, _utils2.updateAttribute)(this, 'value', value);
-  }
-  get value() {
-    return (0, _utils2.getAttribute)(this, 'value', '');
-  }
-  set placeholder(value) {
-    (0, _utils2.updateAttribute)(this, 'placeholder', value);
-  }
-  get placeholder() {
-    return (0, _utils2.getAttribute)(this, 'placeholder');
-  }
-  set disabled(isDisabled) {
-    (0, _utils2.updateBooleanAttribute)(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return (0, _utils2.getBooleanAttribute)(this, 'disabled');
-  }
-  set rows(value) {
-    (0, _utils2.updateAttribute)(this, 'rows', value);
-  }
-  get rows() {
-    return (0, _utils2.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 = (0, _utils3.formatList)(true, this.#getCurrentRange());
-    this.#handleActionResult(res);
-  }
-  formatUnorderedList() {
-    const res = (0, _utils3.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((0, _utils3.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 (0, _utils3.deleteContentBackward)(this.#$input, range);
-        }
-      case 'insertLineBreak':
-      case 'insertParagraph':
-        {
-          return (0, _utils3.insertLineBreak)(range);
-        }
-      case 'insertReplacementText':
-      case 'insertText':
-        {
-          return (0, _utils3.insertText)(this.#$input, text, range);
-        }
-      case 'insertLink':
-        {
-          return (0, _utils3.insertLink)(this.#$input, text, href, range);
-        }
-      case 'formatItalic':
-      case 'formatBold':
-      case 'formatStrikeThrough':
-      case 'formatCodeTag':
-        {
-          return (0, _utils3.formatInline)(inputType, range);
-        }
-      case 'formatIndent':
-        {
-          return (0, _utils3.formatIndent)(range);
-        }
-      case 'formatOutdent':
-        {
-          return (0, _utils3.formatOutdent)(range);
-        }
-      default:
-        {
-          return {
-            prevent: true,
-            range: null
-          };
-        }
-    }
-  }
-  #handleActionResult(result) {
-    if (result.prevent) {
-      this.#cachedRange = result.range;
-      if (result.range !== null) {
-        (0, _utils3.setBrowserCaret)(result.range);
-      }
-    }
-    this.#updateEditorEmptyClass();
-  }
-  #onInputFocus = () => {
-    if (this.#cachedRange !== null) {
-      (0, _utils3.setBrowserCaret)(this.#cachedRange);
-    }
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onInputBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-    this.#dispatchChangeEvent();
-  };
-  #dispatchChangeEvent() {
-    const value = (0, _utils3.serializeMarkdown)(this.#$input, null);
-    this.#prevDispatchedValue = value;
-    if (value !== this.value) {
-      this.dispatchEvent(new CustomEvent('-change', {
-        detail: value
-      }));
-    }
-  }
-  #getCurrentRange = () => {
-    if ((0, _utils2.isElementFocused)(this.#$input)) {
-      this.#cachedRange = this.#getSelectionRange();
-    }
-    if (this.#cachedRange === null) {
-      this.#cachedRange = (0, _utils3.getEndRange)(this.#$input);
-    }
-    return this.#cachedRange;
-  };
-  #onSelectionChange = () => {
-    if ((0, _utils2.isElementFocused)(this.#$input)) {
-      this.#cachedRange = this.#getSelectionRange();
-    }
-    if (this.#cachedRange === null) {
-      return;
-    }
-    const selectionInfo = (0, _utils3.getSelectionInfo)(this.#cachedRange);
-    if (!(0, _utils3.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 = (0, _utils3.getEndRange)(this.#$input);
-      this.#prevDispatchedValue = value;
-      this.#updateEditorEmptyClass();
-      return;
-    }
-    this.#cachedRange = null;
-    this.#prevDispatchedValue = value;
-    this.#$input.replaceChildren((0, _utils2.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', (0, _utils3.serializeMarkdown)(this.#$input, this.#cachedRange));
-    }
-  };
-  #onCut = e => {
-    e.preventDefault();
-    if (this.#cachedRange === null) {
-      return;
-    }
-    if (e.clipboardData != null) {
-      e.clipboardData.setData('text/plain', (0, _utils3.serializeMarkdown)(this.#$input, this.#cachedRange));
-    }
-    this.#handleActionResult((0, _utils3.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((0, _utils3.insertFromPaste)(pasteValue, this.#cachedRange, this.#parseVisitor.createVisitor()));
-  };
-  #updateEditorEmptyClass() {
-    (0, _utils2.setClass)(this.#$input, 'empty', (0, _utils3.isEditorEmpty)(this.#$input));
-  }
-  #onBottomSlotChange = () => {
-    const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
-    (0, _utils2.setClass)(this.#$bottomWrapper, 'empty', isEmpty);
-  };
-  #onTopSlotChange = () => {
-    const isEmpty = this.#$topSlot.assignedElements().length === 0;
-    (0, _utils2.setClass)(this.#$topWrapper, 'empty', isEmpty);
-  };
-  #onDragStart = e => {
-    e.preventDefault();
-  };
-  #onChangeReactHandler = e => {
-    (0, _utils2.getReactEventHandler)(this, 'on-change')?.(e);
-  };
-  #onFocusReactHandler = () => {
-    (0, _utils2.getReactEventHandler)(this, 'on-focus')?.();
-  };
-  #onBlurReactHandler = () => {
-    (0, _utils2.getReactEventHandler)(this, 'on-blur')?.();
-  };
-  #onSelectionReactHandler = e => {
-    (0, _utils2.getReactEventHandler)(this, 'on-selection')?.(e);
-  };
-});

package/lib/cjs/rich-textarea/types.js

@@ -1 +0,0 @@
-"use strict";