@nectary/components 4.12.0 → 4.12.1

package/rich-textarea/index.js

@@ -1,15 +1,11 @@
-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");
+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";
-class RichTextarea extends NectaryElement {
+const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === 'function';
+export class RichTextarea extends NectaryElement {
   #$input;
   #$placeholder;
   #controller = null;
@@ -26,28 +22,32 @@ 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 @@ 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,49 +89,48 @@ 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 === true) {
-          this.#onValueChange(newVal);
+      case 'value':
+        {
+          if (this.isConnected) {
+            this.#onValueChange(newVal);
+          }
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$placeholder.textContent = newVal;
+          updateAttribute(this, 'aria-placeholder', newVal);
+          break;
         }
-        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;
@@ -143,27 +142,27 @@ 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() {
@@ -174,9 +173,6 @@ 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();
@@ -197,81 +193,85 @@ 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();
+        case 'Tab':
+          {
+            const res = this.#handleInput('formatOutdent', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
           }
-          this.#handleActionResult(res);
-          break;
-        }
       }
     } else {
       switch (e.key) {
-        case "Tab": {
-          const res = this.#handleInput("formatIndent", this.#getSelectionRange());
-          if (res.prevent) {
-            e.preventDefault();
+        case 'Tab':
+          {
+            const res = this.#handleInput('formatIndent', this.#getSelectionRange());
+            if (res.prevent) {
+              e.preventDefault();
+            }
+            this.#handleActionResult(res);
+            break;
           }
-          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());
+        case 'b':
+          {
+            const res = this.#handleInput('formatBold', this.#getSelectionRange());
             if (res.prevent) {
               e.preventDefault();
             }
             this.#handleActionResult(res);
             break;
           }
-          case "c": {
-            const res = this.#handleInput("formatCodeTag", this.#getSelectionRange());
+        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) => {
+  #onBeforeInput = e => {
     const [range] = e.getTargetRanges();
     if (this.#pendingRangePolyfill) {
       this.#pendingRangePolyfill = false;
@@ -288,54 +288,56 @@ 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 '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 };
-      }
+      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) {
@@ -351,17 +353,19 @@ 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 = () => {
@@ -383,7 +387,9 @@ 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) {
@@ -391,7 +397,7 @@ 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();
@@ -399,74 +405,61 @@ 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);
-export {
-  RichTextarea
-};
+defineCustomElement('sinch-rich-textarea', RichTextarea);

package/rich-textarea/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TRichTextareaSelection = {
     italic: boolean;
     bold: boolean;
@@ -60,23 +60,3 @@ 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 {};