@nectary/components 2.12.1 → 2.12.2

package/lib/cjs/rich-text/utils.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sizeValues = exports.createParseVisitor = void 0;
+var _utils = require('../emoji/utils');
+const sizeValues = exports.sizeValues = ['m', 's', 'xs', 'xxs'];
+const createParseVisitor = doc => {
+  let emojiBaseUrl = null;
+  return {
+    updateEmojiBaseUrl(url) {
+      emojiBaseUrl = url;
+    },
+    createVisitor() {
+      const $root = doc.createDocumentFragment();
+      let $p = null;
+      let $li = null;
+      const $lists = [];
+      return {
+        emoji(emojiChar) {
+          const $emoji = doc.createElement('sinch-emoji');
+          (0, _utils.setEmojiBaseUrl)($emoji, emojiBaseUrl);
+          $emoji.setAttribute('char', emojiChar);
+          $emoji.className = 'emoji';
+          $p.appendChild($emoji);
+        },
+        codetag(text) {
+          const $codeTag = doc.createElement('sinch-code-tag');
+          $codeTag.text = text;
+          $p.appendChild($codeTag);
+        },
+        inline(text, _ref) {
+          let {
+            isBold,
+            isItalic,
+            isStrikethrough
+          } = _ref;
+          const $inline = doc.createElement('SPAN');
+          $inline.append(doc.createTextNode(text));
+          if (isItalic === true) {
+            $inline.classList.add('em1');
+          }
+          if (isBold === true) {
+            $inline.classList.add('em2');
+          }
+          if (isStrikethrough === true) {
+            $inline.classList.add('strikethrough');
+          }
+          $p.appendChild($inline);
+        },
+        linebreak() {
+          const $br = doc.createElement('br');
+          $p.appendChild($br);
+        },
+        link(text, href, attributes) {
+          const $link = doc.createElement('sinch-link');
+          $link.text = text;
+          $link.href = href;
+          if (attributes != null) {
+            attributes.forEach(attr => {
+              switch (attr) {
+                case 'use-history':
+                  $link['use-history'] = true;
+                  break;
+                case 'external':
+                  $link.external = true;
+                  break;
+                default:
+                  break;
+              }
+            });
+          }
+          $p.appendChild($link);
+        },
+        list(isOrdered) {
+          const $list = doc.createElement(isOrdered ? 'ol' : 'ul');
+          $list.classList.add(isOrdered ? 'ol' : 'ul');
+          if ($li !== null) {
+            $li.appendChild($list);
+            $li = null;
+          } else {
+            $root.appendChild($list);
+          }
+          $lists.push($list);
+        },
+        endList() {
+          $p = null;
+          $li = null;
+          $lists.length = $lists.length - 1;
+          if ($lists.length > 0) {
+            $li = $lists.at(-1).lastChild;
+          }
+        },
+        listItem() {
+          $p = null;
+          $li = doc.createElement('li');
+          $li.classList.add('li');
+          $lists.at(-1).appendChild($li);
+        },
+        paragraph() {
+          $p = doc.createElement('p');
+          $p.classList.add('p');
+          if ($li !== null) {
+            $li.appendChild($p);
+          } else {
+            $root.appendChild($p);
+          }
+        },
+        end() {
+          return $root;
+        }
+      };
+    }
+  };
+};
+exports.createParseVisitor = createParseVisitor;

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

@@ -0,0 +1,466 @@
+"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

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