@nectary/components 4.11.2 → 4.12.0

package/rich-textarea/index.js

@@ -1,11 +1,15 @@
-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');
+import { getEmojiBaseUrl } from "../emoji/utils.js";
+import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, getIntegerAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { isElementFocused } from "../utils/slot.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { parseMarkdown } from "../utils/markdown.js";
+import { createParseVisitor, getEndRange, formatList, handleEmojiMousedown, formatOutdent, formatIndent, formatInline, insertLink, insertText, insertLineBreak, deleteContentBackward, setBrowserCaret, serializeMarkdown, getSelectionInfo, isSelectionEqual, insertFromPaste, isEditorEmpty } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input-wrapper {\n  position: relative;\n  padding: 8px 10px 8px 12px;\n  box-sizing: border-box;\n}\n\n#input {\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  border: none;\n  outline: none;\n}\n\n#placeholder {\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  padding: 8px 10px 8px 12px;\n  pointer-events: none;\n  user-select: none;\n}\n\n#input.empty + #placeholder {\n  display: block;\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n:host([disabled]) {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n:host([disabled]) #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n:host(:not([disabled])) #input-wrapper:focus-within ~ #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n.p,\n.oli,\n.uli {\n  margin: 0;\n}\n\n.oli.l0,\n.uli.l0 {\n  margin-left: 6px;\n}\n\n.oli.l1,\n.uli.l1 {\n  margin-left: 36px;\n}\n\n.oli.l2,\n.uli.l2 {\n  margin-left: 64px;\n}\n\n.oli.l3,\n.uli.l3 {\n  margin-left: 92px;\n}\n\n.oli.l4,\n.uli.l4 {\n  margin-left: 120px;\n}\n\n.uli.l0 {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli.l1 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.uli.l2 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.uli.l3 {\n  counter-reset: list-3 list-4;\n}\n\n.uli.l4 {\n  counter-reset: list-4;\n}\n\n.oli.l0 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.oli.l1 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.oli.l2 {\n  counter-reset: list-3 list-4;\n}\n\n.oli.l3 {\n  counter-reset: list-4;\n}\n\n.oli.l0::before {\n  counter-increment: list-0;\n  content: counter(list-0, decimal) ". ";\n}\n\n.oli.l1::before {\n  counter-increment: list-1;\n  content: counter(list-1, lower-alpha) ". ";\n}\n\n.oli.l2::before {\n  counter-increment: list-2;\n  content: counter(list-2, lower-roman) ". ";\n}\n\n.oli.l3::before {\n  counter-increment: list-3;\n  content: counter(list-3, decimal) ". ";\n}\n\n.oli.l4::before {\n  counter-increment: list-4;\n  content: counter(list-4, lower-alpha) ". ";\n}\n\n.oli:first-of-type,\n.oli.block,\n.p + .oli {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli::before {\n  content: "\\25CF";\n  display: inline-block;\n  width: 16px;\n}\n\n.uli.block,\n.oli.block,\n.uli + .p,\n.oli + .p,\n.p + .uli,\n.p + .oli {\n  margin-top: 0.5em;\n}\n\n.c {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.l {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.i {\n  font-style: italic;\n}\n\n.b {\n  font-weight: bold;\n}\n\n.s {\n  text-decoration: line-through;\n}\n\n.e {\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: contain;\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.2em;\n}\n\n#top-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 4px 0;\n}\n\n#top-wrapper.empty {\n  display: none;\n}\n\n#bottom-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 0 4px 4px;\n}\n\n#bottom-wrapper.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="top-wrapper">\n    <slot id="top" name="top"></slot>\n  </div>\n  <div id="input-wrapper">\n    <div\n      id="input"\n      contentEditable\n      suppressContentEditableWarning\n      autoCapitalize="false"\n      autoCorrect="false"\n      autoSave="false"\n      spellCheck="false"\n    >\n    </div>\n    <div id="placeholder"></div>\n  </div>\n  <div id="border"></div>\n  <div id="bottom-wrapper">\n    <slot id="bottom" name="bottom"></slot>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === 'function';
-export class RichTextarea extends NectaryElement {
+const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === "function";
+class RichTextarea extends NectaryElement {
   #$input;
   #$placeholder;
   #controller = null;
@@ -22,32 +26,28 @@ export class RichTextarea extends NectaryElement {
   #parseVisitor;
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
+    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', {
+    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', {
+    Object.defineProperty(shadowRoot, "createTextNode", {
       value: document.createTextNode.bind(shadowRoot.ownerDocument)
     });
-    Object.defineProperty(shadowRoot, 'createElementNS', {
+    Object.defineProperty(shadowRoot, "createElementNS", {
       value: document.createElementNS.bind(shadowRoot.ownerDocument)
     });
-    Object.defineProperty(shadowRoot, 'createDocumentFragment', {
+    Object.defineProperty(shadowRoot, "createDocumentFragment", {
       value: document.createDocumentFragment.bind(shadowRoot.ownerDocument)
     });
     this.#parseVisitor = createParseVisitor(shadowRoot);
@@ -58,24 +58,24 @@ export class RichTextarea extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.setAttribute('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.setAttribute("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();
@@ -89,48 +89,49 @@ export class RichTextarea extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'placeholder'];
+    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;
+      case "value": {
+        if (this.isConnected === true) {
+          this.#onValueChange(newVal);
         }
+        break;
+      }
+      case "placeholder": {
+        this.#$placeholder.textContent = newVal;
+        updateAttribute(this, "aria-placeholder", newVal);
+        break;
+      }
     }
   }
   set value(value) {
-    updateAttribute(this, 'value', value);
+    updateAttribute(this, "value", value);
   }
   get value() {
-    return getAttribute(this, 'value', '');
+    return getAttribute(this, "value", "");
   }
   set placeholder(value) {
-    updateAttribute(this, 'placeholder', value);
+    updateAttribute(this, "placeholder", value);
   }
   get placeholder() {
-    return getAttribute(this, 'placeholder');
+    return getAttribute(this, "placeholder");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set rows(value) {
-    updateAttribute(this, 'rows', value);
+    updateAttribute(this, "rows", value);
   }
   get rows() {
-    return getIntegerAttribute(this, 'rows', 0);
+    return getIntegerAttribute(this, "rows", 0);
   }
   get focusable() {
     return true;
@@ -142,27 +143,27 @@ export class RichTextarea extends NectaryElement {
     this.#$input.blur();
   }
   insertText(value) {
-    const res = this.#handleInput('insertText', this.#getCurrentRange(), value);
+    const res = this.#handleInput("insertText", this.#getCurrentRange(), value);
     this.#handleActionResult(res);
   }
   insertLink(text, href) {
-    const res = this.#handleInput('insertLink', this.#getCurrentRange(), text, href);
+    const res = this.#handleInput("insertLink", this.#getCurrentRange(), text, href);
     this.#handleActionResult(res);
   }
   formatItalic() {
-    const res = this.#handleInput('formatItalic', this.#getCurrentRange());
+    const res = this.#handleInput("formatItalic", this.#getCurrentRange());
     this.#handleActionResult(res);
   }
   formatBold() {
-    const res = this.#handleInput('formatBold', this.#getCurrentRange());
+    const res = this.#handleInput("formatBold", this.#getCurrentRange());
     this.#handleActionResult(res);
   }
   formatStrikethrough() {
-    const res = this.#handleInput('formatStrikeThrough', this.#getCurrentRange());
+    const res = this.#handleInput("formatStrikeThrough", this.#getCurrentRange());
     this.#handleActionResult(res);
   }
   formatCodeTag() {
-    const res = this.#handleInput('formatCodeTag', this.#getCurrentRange());
+    const res = this.#handleInput("formatCodeTag", this.#getCurrentRange());
     this.#handleActionResult(res);
   }
   formatOrderedList() {
@@ -173,6 +174,9 @@ export class RichTextarea extends NectaryElement {
     const res = formatList(false, this.#getCurrentRange());
     this.#handleActionResult(res);
   }
+  /**
+   * Input must be in focus
+   */
   #getSelectionRange() {
     if (SUPPORTS_SHADOW_SELECTION) {
       const selection = this.#sh.getSelection();
@@ -193,85 +197,81 @@ export class RichTextarea extends NectaryElement {
     }
     this.#pendingRangePolyfill = true;
     this.#rangePolyfill = null;
-    document.execCommand('indent');
+    document.execCommand("indent");
     this.#pendingRangePolyfill = false;
     return this.#rangePolyfill;
   }
-  #onMouseDown = e => {
-    this.#handleActionResult(handleEmojiMousedown(e.target));
+  #onMouseDown = (e) => {
+    this.#handleActionResult(
+      handleEmojiMousedown(e.target)
+    );
   };
-  #onKeydown = e => {
+  #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;
+        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;
+        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());
+        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 'i':
-          {
-            const res = this.#handleInput('formatItalic', this.#getSelectionRange());
+          case "c": {
+            const res = this.#handleInput("formatCodeTag", 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 => {
+  #onBeforeInput = (e) => {
     const [range] = e.getTargetRanges();
     if (this.#pendingRangePolyfill) {
       this.#pendingRangePolyfill = false;
@@ -288,56 +288,54 @@ export class RichTextarea extends NectaryElement {
   };
   #handleInput(inputType, range, text, href) {
     if (range === null) {
-      return {
-        prevent: true,
-        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
-          };
-        }
+      // case 'deleteByDrag':
+      // case 'deleteByCut':
+      //   break
+      // }
+      // case 'insertLink': {
+      //   break
+      // }
+      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 'formatUnderline':
+      case "formatItalic":
+      case "formatBold":
+      case "formatStrikeThrough":
+      case "formatCodeTag": {
+        return formatInline(inputType, range);
+      }
+      case "formatIndent": {
+        return formatIndent(range);
+      }
+      case "formatOutdent": {
+        return formatOutdent(range);
+      }
+      // case 'formatSuperscript':
+      // case 'formatSubscript':
+      // case 'historyUndo':
+      // case 'historyRedo':
+      default: {
+        return { prevent: true, range: null };
+      }
     }
   }
   #handleActionResult(result) {
@@ -353,19 +351,17 @@ export class RichTextarea extends NectaryElement {
     if (this.#cachedRange !== null) {
       setBrowserCaret(this.#cachedRange);
     }
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(new CustomEvent("-focus"));
   };
   #onInputBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    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
-      }));
+      this.dispatchEvent(new CustomEvent("-change", { detail: value }));
     }
   }
   #getCurrentRange = () => {
@@ -387,9 +383,7 @@ export class RichTextarea extends NectaryElement {
     const selectionInfo = getSelectionInfo(this.#cachedRange);
     if (!isSelectionEqual(this.#lastSelectionInfo, selectionInfo)) {
       this.#lastSelectionInfo = selectionInfo;
-      this.dispatchEvent(new CustomEvent('-selection', {
-        detail: selectionInfo
-      }));
+      this.dispatchEvent(new CustomEvent("-selection", { detail: selectionInfo }));
     }
   };
   #onValueChange(value) {
@@ -397,7 +391,7 @@ export class RichTextarea extends NectaryElement {
       return;
     }
     if (value === null || value.length === 0) {
-      this.#$input.innerHTML = '';
+      this.#$input.innerHTML = "";
       this.#cachedRange = getEndRange(this.#$input);
       this.#prevDispatchedValue = value;
       this.#updateEditorEmptyClass();
@@ -405,61 +399,74 @@ export class RichTextarea extends NectaryElement {
     }
     this.#cachedRange = null;
     this.#prevDispatchedValue = value;
-    this.#$input.replaceChildren(parseMarkdown(value, this.#parseVisitor.createVisitor()));
+    this.#$input.replaceChildren(
+      parseMarkdown(value, this.#parseVisitor.createVisitor())
+    );
     this.#updateEditorEmptyClass();
   }
-  #onCopy = e => {
+  #onCopy = (e) => {
     e.preventDefault();
     if (this.#cachedRange === null) {
       return;
     }
     if (e.clipboardData != null) {
-      e.clipboardData.setData('text/plain', serializeMarkdown(this.#$input, this.#cachedRange));
+      e.clipboardData.setData("text/plain", serializeMarkdown(this.#$input, this.#cachedRange));
     }
   };
-  #onCut = e => {
+  #onCut = (e) => {
     e.preventDefault();
     if (this.#cachedRange === null) {
       return;
     }
     if (e.clipboardData != null) {
-      e.clipboardData.setData('text/plain', serializeMarkdown(this.#$input, this.#cachedRange));
+      e.clipboardData.setData("text/plain", serializeMarkdown(this.#$input, this.#cachedRange));
     }
-    this.#handleActionResult(deleteContentBackward(this.#$input, this.#cachedRange));
+    this.#handleActionResult(
+      deleteContentBackward(this.#$input, this.#cachedRange)
+    );
   };
-  #onPaste = e => {
+  #onPaste = (e) => {
     e.preventDefault();
-    const pasteValue = e.clipboardData?.getData('text/plain') ?? '';
+    const pasteValue = e.clipboardData?.getData("text/plain") ?? "";
     if (pasteValue.length === 0 || this.#cachedRange === null) {
       return;
     }
-    this.#handleActionResult(insertFromPaste(pasteValue, this.#cachedRange, this.#parseVisitor.createVisitor()));
+    this.#handleActionResult(
+      insertFromPaste(
+        pasteValue,
+        this.#cachedRange,
+        this.#parseVisitor.createVisitor()
+      )
+    );
   };
   #updateEditorEmptyClass() {
-    setClass(this.#$input, 'empty', isEditorEmpty(this.#$input));
+    setClass(this.#$input, "empty", isEditorEmpty(this.#$input));
   }
   #onBottomSlotChange = () => {
     const isEmpty = this.#$bottomSlot.assignedElements().length === 0;
-    setClass(this.#$bottomWrapper, 'empty', isEmpty);
+    setClass(this.#$bottomWrapper, "empty", isEmpty);
   };
   #onTopSlotChange = () => {
     const isEmpty = this.#$topSlot.assignedElements().length === 0;
-    setClass(this.#$topWrapper, 'empty', isEmpty);
+    setClass(this.#$topWrapper, "empty", isEmpty);
   };
-  #onDragStart = e => {
+  #onDragStart = (e) => {
     e.preventDefault();
   };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
   #onFocusReactHandler = () => {
-    getReactEventHandler(this, 'on-focus')?.();
+    getReactEventHandler(this, "on-focus")?.();
   };
   #onBlurReactHandler = () => {
-    getReactEventHandler(this, 'on-blur')?.();
+    getReactEventHandler(this, "on-blur")?.();
   };
-  #onSelectionReactHandler = e => {
-    getReactEventHandler(this, 'on-selection')?.(e);
+  #onSelectionReactHandler = (e) => {
+    getReactEventHandler(this, "on-selection")?.(e);
   };
 }
-defineCustomElement('sinch-rich-textarea', RichTextarea);
+defineCustomElement("sinch-rich-textarea", RichTextarea);
+export {
+  RichTextarea
+};

package/rich-textarea/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TRichTextareaSelection = {
     italic: boolean;
     bold: boolean;
@@ -60,3 +60,23 @@ export type TSinchRichTextarea = {
 };
 export type TSinchRichTextareaElement = NectaryComponentVanillaByType<TSinchRichTextarea>;
 export type TSinchRichTextareaReact = NectaryComponentReactByType<TSinchRichTextarea>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-rich-textarea': TSinchRichTextarea;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-rich-textarea': NectaryComponentVanilla<'sinch-rich-textarea'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-rich-textarea': NectaryComponentReact<'sinch-rich-textarea'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-rich-textarea': NectaryComponentReact<'sinch-rich-textarea'>;
+        }
+    }
+}

package/rich-textarea/types.js

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