@nectary/components 5.41.2 → 5.42.1

package/bundle.js

@@ -291,40 +291,19 @@ class Icon extends NectaryElement {
   static get observedAttributes() {
     return ["name", "icons-version"];
   }
-  /* Font class is now set before the text content. Covered by new regression tests.
-  
-    Before:
-    1. textContent = "fa-clone" → Safari renders the text using the default font
-     (Material Icons)
-    2. _matchNameToFont() → switches font-family to Sinch Icons Zero To D via
-    class
-  
-    After:
-    1. _matchNameToFont() → sets the correct font-family class first
-    2. textContent = "fa-clone" → Safari renders the text using the correct font
-     from the start
-  
-    Reasoning:
-    * Safari caches the ligature layout from the first paint. When
-    the text was set in Material Icons (which doesn't have these ligatures),
-    Safari calculated glyph positions for individual characters. When the font
-    then switched to Sinch Icons, Safari reused some of that cached layout
-    instead of fully recalculating — shifting certain glyphs to the right.
-    * _matchNameToFont() reads this.name via getAttribute(this,
-    'name'), which reads the HTML attribute — not textContent. The attribute is
-    already set when the callback fires (that's what triggers the callback), so
-    the method gets the correct name regardless of when textContent is set.
-    */
+  // Font class is set before textContent to avoid a WebKit ligature caching
+  // bug: Safari caches glyph layout from the first paint, so if textContent
+  // lands while the default font (Material Icons) is active, the cached
+  // positions stick even after the font switches. Setting the class first
+  // ensures the correct font-family is active before any text renders.
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "name": {
-        {
-          this.#$icon.textContent = newVal;
-          updateAttribute(this.#$icon, "aria-label", newVal);
-          if (getAttribute(this, "icons-version", "1") !== "1") {
-            this._matchNameToFont();
-          }
+        if (getAttribute(this, "icons-version", "1") !== "1") {
+          this._matchNameToFont();
         }
+        this.#$icon.textContent = newVal;
+        updateAttribute(this.#$icon, "aria-label", newVal);
         break;
       }
       case "icons-version": {
@@ -1549,7 +1528,8 @@ const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
 const regButtonPlaceholder = new RegExp("(?<!\\\\)\\[\\[(?<button>[a-zA-Z0-9_-]+)\\]\\]");
 const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
 const regChip = new RegExp("(?<!\\\\)\\{\\{(?<chip>[a-zA-Z0-9_-]+)\\}\\}");
-const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
+const regEmojiSeq = "(?![0-9#*])\\p{Emoji}(?:\\uFE0F|\\p{Emoji_Modifier})?\\u20E3?";
+const regEmoji = new RegExp(`(?<emoji>\\p{RI}\\p{RI}|${regEmojiSeq}(?:\\u200D${regEmojiSeq})*)`, "u");
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
 const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~\{\}])/;
@@ -12237,11 +12217,18 @@ const assertListItem = ($n) => {
     throw new Error(`Node is not a ListItem: ${$n?.nodeName}`);
   }
 };
+const BLOCK_CLASSNAME = "block";
 const markListItemAsBlock = ($li) => {
-  $li.classList.add("block");
+  $li.classList.add(BLOCK_CLASSNAME);
 };
 const isListItemMarkedArBlock = ($li) => {
-  return $li.classList.contains("block");
+  return $li.classList.contains(BLOCK_CLASSNAME);
+};
+const markParagraphAsBlock = ($p) => {
+  $p.classList.add(BLOCK_CLASSNAME);
+};
+const isParagraphMarkedAsBlock = ($p) => {
+  return $p.classList.contains(BLOCK_CLASSNAME);
 };
 const MAX_LISTITEM_LEVEL = 4;
 const removeListItemLevel = ($li) => {
@@ -13758,6 +13745,7 @@ const MD_ULISTITEM_TOKEN = "*";
 const MD_OLISTITEM_TOKEN = "1.";
 const MD_LISTITEM_JOIN = "\n";
 const MD_PARAGRAPH_JOIN = "\n\n";
+const MD_SOFT_LINEBREAK = "\n";
 const serializeTextReducer = (state, desc, i, descArray) => {
   const { chunks } = state;
   if (desc.isLink === true) {
@@ -13879,7 +13867,7 @@ const serializeRoot = ($root, range) => {
   };
   const flushParagraphChunks = () => {
     if (paragraphChunks.length > 0) {
-      chunks.push(...paragraphChunks);
+      chunks.push(paragraphChunks.join(MD_SOFT_LINEBREAK));
       paragraphChunks.length = 0;
     }
   };
@@ -13897,6 +13885,9 @@ const serializeRoot = ($root, range) => {
     } else {
       assertTextBlock($child);
       flushListChunks();
+      if (isParagraph($child) && isParagraphMarkedAsBlock($child) && paragraphChunks.length > 0) {
+        flushParagraphChunks();
+      }
       paragraphChunks.push(
         serializeTextBlock($child, range)
       );
@@ -14013,8 +14004,10 @@ const createParseVisitor = (doc) => {
         },
         paragraph() {
           if (listsStack.length === 0) {
-            $currentBlock = createActuallyEmptyParagraph(doc);
-            $root.appendChild($currentBlock);
+            const $p = createActuallyEmptyParagraph(doc);
+            markParagraphAsBlock($p);
+            $currentBlock = $p;
+            $root.appendChild($p);
           }
         },
         end() {
@@ -14041,7 +14034,7 @@ const setBrowserCaret = ({ startContainer, startOffset, endContainer, endOffset
   range.setEnd(endContainer, endOffset);
   selection.addRange(range);
 };
-const templateHTML$p = '<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}sinch-rich-textarea-chip{display:inline-flex;vertical-align:middle;user-select:none}.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="true" role="textbox" aria-multiline="true" 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 templateHTML$p = '<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);caret-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}sinch-rich-textarea-chip{display:inline-flex;vertical-align:middle;user-select:none}.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="true" role="textbox" aria-multiline="true" 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$p = document.createElement("template");
 template$p.innerHTML = templateHTML$p;
 const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === "function";
@@ -14059,7 +14052,13 @@ class RichTextarea extends NectaryElement {
   #cachedRange = null;
   #lastSelectionInfo = null;
   #prevDispatchedValue = null;
+  #changeDebounce = null;
   #parseVisitor;
+  /* @internal
+   * The chip resolver is used to resolve the color and icon of a chip.
+   * It is used to resolve the color and icon of a chip.
+   * It is used to resolve the color and icon of a chip.
+  */
   #chipResolver = null;
   constructor() {
     super();
@@ -14123,6 +14122,7 @@ class RichTextarea extends NectaryElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.#clearChangeDebounce();
     this.#controller.abort();
     this.#controller = null;
   }
@@ -14448,9 +14448,23 @@ class RichTextarea extends NectaryElement {
       if (result.range !== null) {
         setBrowserCaret(result.range);
       }
+      this.#scheduleChangeDispatch();
     }
     this.#updateEditorEmptyClass();
   }
+  #clearChangeDebounce() {
+    if (this.#changeDebounce !== null) {
+      clearTimeout(this.#changeDebounce);
+      this.#changeDebounce = null;
+    }
+  }
+  #scheduleChangeDispatch() {
+    this.#clearChangeDebounce();
+    this.#changeDebounce = setTimeout(() => {
+      this.#changeDebounce = null;
+      this.#dispatchChangeEvent();
+    }, 100);
+  }
   #onInputFocus = () => {
     if (this.#cachedRange !== null) {
       setBrowserCaret(this.#cachedRange);
@@ -14459,6 +14473,7 @@ class RichTextarea extends NectaryElement {
   };
   #onInputBlur = () => {
     this.dispatchEvent(new CustomEvent("-blur"));
+    this.#clearChangeDebounce();
     this.#dispatchChangeEvent();
   };
   #dispatchChangeEvent() {

package/icon/index.js

@@ -14,40 +14,19 @@ class Icon extends NectaryElement {
   static get observedAttributes() {
     return ["name", "icons-version"];
   }
-  /* Font class is now set before the text content. Covered by new regression tests.
-  
-    Before:
-    1. textContent = "fa-clone" → Safari renders the text using the default font
-     (Material Icons)
-    2. _matchNameToFont() → switches font-family to Sinch Icons Zero To D via
-    class
-  
-    After:
-    1. _matchNameToFont() → sets the correct font-family class first
-    2. textContent = "fa-clone" → Safari renders the text using the correct font
-     from the start
-  
-    Reasoning:
-    * Safari caches the ligature layout from the first paint. When
-    the text was set in Material Icons (which doesn't have these ligatures),
-    Safari calculated glyph positions for individual characters. When the font
-    then switched to Sinch Icons, Safari reused some of that cached layout
-    instead of fully recalculating — shifting certain glyphs to the right.
-    * _matchNameToFont() reads this.name via getAttribute(this,
-    'name'), which reads the HTML attribute — not textContent. The attribute is
-    already set when the callback fires (that's what triggers the callback), so
-    the method gets the correct name regardless of when textContent is set.
-    */
+  // Font class is set before textContent to avoid a WebKit ligature caching
+  // bug: Safari caches glyph layout from the first paint, so if textContent
+  // lands while the default font (Material Icons) is active, the cached
+  // positions stick even after the font switches. Setting the class first
+  // ensures the correct font-family is active before any text renders.
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case "name": {
-        {
-          this.#$icon.textContent = newVal;
-          updateAttribute(this.#$icon, "aria-label", newVal);
-          if (getAttribute(this, "icons-version", "1") !== "1") {
-            this._matchNameToFont();
-          }
+        if (getAttribute(this, "icons-version", "1") !== "1") {
+          this._matchNameToFont();
         }
+        this.#$icon.textContent = newVal;
+        updateAttribute(this.#$icon, "aria-label", newVal);
         break;
       }
       case "icons-version": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.41.2",
+  "version": "5.42.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/rich-textarea/index.js

@@ -6,7 +6,7 @@ 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, removeChip, setBrowserCaret, formatOutdent, formatIndent, formatInline, insertChip, insertLink, insertText, insertLineBreak, deleteContentBackward, serializeMarkdown, getSelectionInfo, isSelectionEqual, insertFromPaste, isEditorEmpty } from "./utils.js";
-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}sinch-rich-textarea-chip{display:inline-flex;vertical-align:middle;user-select:none}.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="true" role="textbox" aria-multiline="true" 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 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);caret-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}sinch-rich-textarea-chip{display:inline-flex;vertical-align:middle;user-select:none}.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="true" role="textbox" aria-multiline="true" 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";
@@ -24,7 +24,13 @@ class RichTextarea extends NectaryElement {
   #cachedRange = null;
   #lastSelectionInfo = null;
   #prevDispatchedValue = null;
+  #changeDebounce = null;
   #parseVisitor;
+  /* @internal
+   * The chip resolver is used to resolve the color and icon of a chip.
+   * It is used to resolve the color and icon of a chip.
+   * It is used to resolve the color and icon of a chip.
+  */
   #chipResolver = null;
   constructor() {
     super();
@@ -88,6 +94,7 @@ class RichTextarea extends NectaryElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.#clearChangeDebounce();
     this.#controller.abort();
     this.#controller = null;
   }
@@ -413,9 +420,23 @@ class RichTextarea extends NectaryElement {
       if (result.range !== null) {
         setBrowserCaret(result.range);
       }
+      this.#scheduleChangeDispatch();
     }
     this.#updateEditorEmptyClass();
   }
+  #clearChangeDebounce() {
+    if (this.#changeDebounce !== null) {
+      clearTimeout(this.#changeDebounce);
+      this.#changeDebounce = null;
+    }
+  }
+  #scheduleChangeDispatch() {
+    this.#clearChangeDebounce();
+    this.#changeDebounce = setTimeout(() => {
+      this.#changeDebounce = null;
+      this.#dispatchChangeEvent();
+    }, 100);
+  }
   #onInputFocus = () => {
     if (this.#cachedRange !== null) {
       setBrowserCaret(this.#cachedRange);
@@ -424,6 +445,7 @@ class RichTextarea extends NectaryElement {
   };
   #onInputBlur = () => {
     this.dispatchEvent(new CustomEvent("-blur"));
+    this.#clearChangeDebounce();
     this.#dispatchChangeEvent();
   };
   #dispatchChangeEvent() {

package/rich-textarea/types.d.ts

@@ -24,6 +24,7 @@ export type TSinchRichTextareaProps = {
     'chip-color'?: TSinchTagColor;
     /** Default icon for chips/tags */
     'chip-icon'?: string;
+    /** Accessible label for the rich textarea */
     'aria-label': string;
 };
 export type TSinchRichTextareaMethods = {
@@ -44,7 +45,7 @@ export type TSinchRichTextareaMethods = {
     chipResolver: TChipResolver | null;
 };
 export type TSinchRichTextareaEvents = {
-    /** Change value handler */
+    /** Change value handler — fires while editing (debounced) and on blur */
     '-change'?: (e: CustomEvent<string>) => void;
     /** Focus handler */
     '-focus'?: (e: CustomEvent<void>) => void;

package/rich-textarea/utils.js

@@ -55,11 +55,18 @@ const assertListItem = ($n) => {
     throw new Error(`Node is not a ListItem: ${$n?.nodeName}`);
   }
 };
+const BLOCK_CLASSNAME = "block";
 const markListItemAsBlock = ($li) => {
-  $li.classList.add("block");
+  $li.classList.add(BLOCK_CLASSNAME);
 };
 const isListItemMarkedArBlock = ($li) => {
-  return $li.classList.contains("block");
+  return $li.classList.contains(BLOCK_CLASSNAME);
+};
+const markParagraphAsBlock = ($p) => {
+  $p.classList.add(BLOCK_CLASSNAME);
+};
+const isParagraphMarkedAsBlock = ($p) => {
+  return $p.classList.contains(BLOCK_CLASSNAME);
 };
 const MAX_LISTITEM_LEVEL = 4;
 const removeListItemLevel = ($li) => {
@@ -1576,6 +1583,7 @@ const MD_ULISTITEM_TOKEN = "*";
 const MD_OLISTITEM_TOKEN = "1.";
 const MD_LISTITEM_JOIN = "\n";
 const MD_PARAGRAPH_JOIN = "\n\n";
+const MD_SOFT_LINEBREAK = "\n";
 const serializeTextReducer = (state, desc, i, descArray) => {
   const { chunks } = state;
   if (desc.isLink === true) {
@@ -1697,7 +1705,7 @@ const serializeRoot = ($root, range) => {
   };
   const flushParagraphChunks = () => {
     if (paragraphChunks.length > 0) {
-      chunks.push(...paragraphChunks);
+      chunks.push(paragraphChunks.join(MD_SOFT_LINEBREAK));
       paragraphChunks.length = 0;
     }
   };
@@ -1715,6 +1723,9 @@ const serializeRoot = ($root, range) => {
     } else {
       assertTextBlock($child);
       flushListChunks();
+      if (isParagraph($child) && isParagraphMarkedAsBlock($child) && paragraphChunks.length > 0) {
+        flushParagraphChunks();
+      }
       paragraphChunks.push(
         serializeTextBlock($child, range)
       );
@@ -1831,8 +1842,10 @@ const createParseVisitor = (doc) => {
         },
         paragraph() {
           if (listsStack.length === 0) {
-            $currentBlock = createActuallyEmptyParagraph(doc);
-            $root.appendChild($currentBlock);
+            const $p = createActuallyEmptyParagraph(doc);
+            markParagraphAsBlock($p);
+            $currentBlock = $p;
+            $root.appendChild($p);
           }
         },
         end() {

package/utils/markdown.js

@@ -11,7 +11,8 @@ const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
 const regButtonPlaceholder = new RegExp("(?<!\\\\)\\[\\[(?<button>[a-zA-Z0-9_-]+)\\]\\]");
 const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
 const regChip = new RegExp("(?<!\\\\)\\{\\{(?<chip>[a-zA-Z0-9_-]+)\\}\\}");
-const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
+const regEmojiSeq = "(?![0-9#*])\\p{Emoji}(?:\\uFE0F|\\p{Emoji_Modifier})?\\u20E3?";
+const regEmoji = new RegExp(`(?<emoji>\\p{RI}\\p{RI}|${regEmojiSeq}(?:\\u200D${regEmojiSeq})*)`, "u");
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
 const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~\{\}])/;