@nectary/components 5.14.6 → 5.15.0

package/rich-textarea/utils.js

@@ -22,6 +22,9 @@ const isTextBlock = ($n) => isParagraph($n) || isListItem($n);
 const isEmoji = ($n) => {
   return $n !== null && $n.nodeName === "IMG";
 };
+const isChip = ($n) => {
+  return $n !== null && $n.nodeName === "SINCH-RICH-TEXTAREA-CHIP";
+};
 const isInline = ($n) => $n !== null && $n.nodeName === "SPAN";
 const isRoot = ($n) => $n !== null && $n.nodeName === "DIV";
 const assertNonNull = ($n) => {
@@ -89,7 +92,7 @@ const assertInline = ($n) => {
   }
 };
 const isTextContent = ($n) => {
-  return $n !== null && $n.nodeType === Node.ELEMENT_NODE && (isInline($n) || isEmoji($n));
+  return $n !== null && $n.nodeType === Node.ELEMENT_NODE && (isInline($n) || isEmoji($n) || isChip($n));
 };
 const assertTextContent = ($n) => {
   assertNonNull($n);
@@ -138,7 +141,6 @@ const isFormatItalic = ($n) => isFormatName($n, "i");
 const isFormatStrikethrough = ($n) => isFormatName($n, "s");
 const isFormatCodetag = ($n) => isFormatName($n, "c");
 const isFormatLink = ($n) => isFormatName($n, "l");
-const isFormatTag = ($n) => isFormatName($n, "m");
 const isAllInsideFormatName = ($a, $b, formatName) => {
   const aBlock = getParentTextBlock($a);
   const bBlock = getParentTextBlock($b);
@@ -185,9 +187,6 @@ const setInlineFormat = ($n, formatName, shouldEnable) => {
       $n.className = "";
       $n.removeAttribute(LINK_HREF_ATTR_NAME);
     }
-    if (formatName === "m" || isFormatName($n, "m")) {
-      $n.className = "";
-    }
     $n.classList.add(formatName);
   } else {
     if (formatName === "l") {
@@ -252,10 +251,41 @@ const createLink = (text, href, doc) => {
   $link.setAttribute(LINK_HREF_ATTR_NAME, href);
   return $link;
 };
-const createTag = (text, doc) => {
-  const $tag = createInlineWithText(`${text}`, doc);
-  setInlineFormat($tag, "m", true);
-  return $tag;
+const createTag = (text, doc, color, icon) => {
+  const $chip = doc.createElement("sinch-rich-textarea-chip");
+  $chip.text = text;
+  $chip.contentEditable = "false";
+  if (color !== void 0 && color !== null && color !== "") {
+    $chip.setAttribute("color", color);
+  }
+  if (icon !== void 0 && icon !== null && icon !== "") {
+    $chip.setAttribute("icon", icon);
+  }
+  return $chip;
+};
+const removeChip = ($chip, $root) => {
+  if (!isChip($chip)) {
+    return null;
+  }
+  const $parent = $chip.parentNode;
+  if ($parent === null) {
+    return null;
+  }
+  const $next = $chip.nextSibling;
+  const $prev = $chip.previousSibling;
+  $parent.removeChild($chip);
+  if ($next !== null && isTextContent($next)) {
+    return createCollapsedRange(createBeginCursorFromTextContent($next));
+  }
+  if ($prev !== null && isTextContent($prev)) {
+    return createCollapsedRange(createEndCursorFromTextContent($prev));
+  }
+  if (isTextBlock($parent)) {
+    const $empty = createEmptyInline($parent.ownerDocument);
+    $parent.appendChild($empty);
+    return createCollapsedRange(createBeginCursorFromTextContent($empty));
+  }
+  return getBeginRange($root);
 };
 const EMOJI_CHAR_ATTR_NAME = "data-char";
 const createEmoji = (emojiChar, baseUrl, doc) => {
@@ -893,6 +923,13 @@ const createIncomingCursorFromNodeWithOffset = (node, offset) => {
       offset: 0
     };
   }
+  if (isChip(node)) {
+    return {
+      $text: null,
+      $inline: node,
+      offset: 0
+    };
+  }
   if (isTextBlock(node)) {
     if (isAfterLastChildIndex(node, offset)) {
       return createEndCursorFromTextContent(
@@ -1075,10 +1112,10 @@ const insertLink = ($root, text, href, range) => {
     )
   };
 };
-const insertTag = ($root, text, range) => {
+const insertChip = ($root, text, range, options) => {
   const cursor = removeContentInRange(range);
   const { $text, $inline, offset, isAfterInline: isAfterLastChild } = cursor;
-  const $tag = createTag(text, $root.ownerDocument);
+  const $tag = createTag(text, $root.ownerDocument, options?.color, options?.icon);
   if (isTextNode($text)) {
     if (isEmptyText($text.nodeValue)) {
       getParentTextBlock($inline).replaceChild($tag, $inline);
@@ -1174,7 +1211,7 @@ const insertText = ($root, data, range) => {
     isTextNode(range.startContainer) && !isEmptyText(range.startContainer.nodeValue)
   ) {
     const $inline2 = getParentInline(range.startContainer);
-    const isHotTextWhitespace = range.startOffset === range.startContainer.length && data === TEXT_WHITESPACE && (isFormatCodetag($inline2) || isFormatLink($inline2) || isFormatTag($inline2));
+    const isHotTextWhitespace = range.startOffset === range.startContainer.length && data === TEXT_WHITESPACE && (isFormatCodetag($inline2) || isFormatLink($inline2));
     if (!isHotTextWhitespace) {
       return DEFAULT_ACTION_RESULT;
     }
@@ -1213,7 +1250,7 @@ const insertText = ($root, data, range) => {
       };
     }
     if (offset === $text.length && data === TEXT_WHITESPACE) {
-      if (isFormatLink($inline) || isFormatCodetag($inline) || isFormatTag($inline)) {
+      if (isFormatLink($inline) || isFormatCodetag($inline)) {
         const $newinline = createInlineWithText(data, $root.ownerDocument);
         $inline.after($newinline);
         return {
@@ -1370,6 +1407,18 @@ const getSelectionInfo = (range) => {
   const bCursor = createIncomingCursorFromNodeWithOffset(range.endContainer, range.endOffset);
   if (aCursor.$inline === bCursor.$inline) {
     const { $text, $inline } = aCursor;
+    if (isChip($inline)) {
+      return {
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        codetag: false,
+        tag: true,
+        link: false,
+        olist: isInsideList(true, $inline),
+        ulist: isInsideList(false, $inline)
+      };
+    }
     if ($text !== null || isInline($inline)) {
       assertInline($inline);
       return {
@@ -1377,7 +1426,7 @@ const getSelectionInfo = (range) => {
         italic: isFormatItalic($inline),
         strikethrough: isFormatStrikethrough($inline),
         codetag: isFormatCodetag($inline),
-        tag: isFormatTag($inline),
+        tag: false,
         link: isFormatLink($inline),
         olist: isInsideList(true, $inline),
         ulist: isInsideList(false, $inline)
@@ -1415,7 +1464,10 @@ const isEmptyTextBlock = ($block) => {
     return false;
   }
   const $inline = blockChildren[0];
-  const isEmptyText2 = isInline($inline) && !isFormatCodetag($inline) && !isFormatTag($inline) && isEmptyTextNode(getChildText($inline));
+  if (isChip($inline)) {
+    return false;
+  }
+  const isEmptyText2 = isInline($inline) && !isFormatCodetag($inline) && isEmptyTextNode(getChildText($inline));
   return isEmptyText2;
 };
 const isEditorEmpty = ($root) => {
@@ -1435,6 +1487,13 @@ const serializeDescriptorReducer = (range) => (state, $n) => {
     }
     return state;
   }
+  if (isChip($n)) {
+    const text2 = $n.text ?? "";
+    if (text2.length > 0) {
+      state.push({ isTag: true, text: `{{${text2}}}` });
+    }
+    return state;
+  }
   let text = getTextValue(getChildText($n));
   let trailingSpaces = "";
   if (range !== null) {
@@ -1456,10 +1515,6 @@ const serializeDescriptorReducer = (range) => (state, $n) => {
     state.push({ isCodetag: true, text });
     return state;
   }
-  if (isFormatTag($n)) {
-    state.push({ isTag: true, text: `{{${text}}}` });
-    return state;
-  }
   if (isFormatLink($n)) {
     const href = $n.getAttribute(LINK_HREF_ATTR_NAME) ?? "#";
     state.push({ isLink: true, text, href });
@@ -1664,10 +1719,22 @@ const serializeMarkdown = ($root, range) => {
 };
 const createParseVisitor = (doc) => {
   let emojiBaseUrl = null;
+  let chipColor = null;
+  let chipIcon = null;
+  let chipResolver = null;
   return {
     updateEmojiBaseUrl(url) {
       emojiBaseUrl = url;
     },
+    updateChipColor(color) {
+      chipColor = color;
+    },
+    updateChipIcon(icon) {
+      chipIcon = icon;
+    },
+    updateChipResolver(resolver) {
+      chipResolver = resolver;
+    },
     createVisitor() {
       const $root = doc.createDocumentFragment();
       let $currentBlock = null;
@@ -1693,7 +1760,8 @@ const createParseVisitor = (doc) => {
           $currentBlock.appendChild($inline);
         },
         tag(text) {
-          const $tag = createTag(text, doc);
+          const resolved = chipResolver?.(text);
+          const $tag = createTag(text, doc, resolved?.color ?? chipColor, resolved?.icon ?? chipIcon);
           $currentBlock.appendChild($tag);
         },
         inline(text, { isBold, isItalic, isStrikethrough }) {
@@ -1777,13 +1845,14 @@ export {
   getEndRange,
   getSelectionInfo,
   handleEmojiMousedown,
+  insertChip,
   insertFromPaste,
   insertLineBreak,
   insertLink,
-  insertTag,
   insertText,
   isEditorEmpty,
   isSelectionEqual,
+  removeChip,
   serializeMarkdown,
   setBrowserCaret
 };

package/rich-textarea-chip/index.d.ts

@@ -0,0 +1,20 @@
+import '../icon';
+import '../text';
+import { NectaryElement } from '../utils';
+export * from './types';
+export declare class RichTextareaChip extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    get text(): string;
+    set text(value: string);
+    get readonly(): boolean;
+    set readonly(isReadonly: boolean);
+    get color(): string;
+    set color(value: string);
+    get icon(): string;
+    set icon(value: string);
+}

package/rich-textarea-chip/index.js

@@ -0,0 +1,116 @@
+import "../icon/index.js";
+import "../text/index.js";
+import { getTagColorBg, getTagColorFg } from "../tag/utils.js";
+import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-chip-size-container-m);padding:0 5px 0 9px;border-radius:var(--sinch-comp-chip-shape-radius);background-color:var(--sinch-comp-chip-color-neutral-default-background-initial);box-sizing:border-box;--sinch-global-color-text:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-color-icon:var(--sinch-comp-chip-color-neutral-default-foreground-initial);--sinch-global-size-icon:var(--sinch-comp-chip-size-icon-m)}:host(:not([icon])) #icon-start{display:none}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-chip-font-size-m-label)}:host([readonly]) #button{padding-right:9px}#icon-close{cursor:pointer}:host([readonly]) #icon-close{display:none}</style><div id="button"><sinch-icon icons-version="2" id="icon-start"></sinch-icon><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon icons-version="2" name="circle-cross" id="icon-close"></sinch-icon></div>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class RichTextareaChip extends NectaryElement {
+  #$text;
+  #$button;
+  #$iconStart;
+  #$iconClose;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#$button = shadowRoot.querySelector("#button");
+    this.#$iconStart = shadowRoot.querySelector("#icon-start");
+    this.#$iconClose = shadowRoot.querySelector("#icon-close");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#$iconClose.addEventListener("click", this.#onRightIconClick, { signal });
+    this.addEventListener("click", this.#onClick, { signal });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ["text", "color", "icon", "readonly"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case "text": {
+        this.#$text.textContent = newVal;
+        updateAttribute(this, "aria-label", newVal);
+        break;
+      }
+      case "readonly": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
+      case "color": {
+        this.#updateColor(newVal);
+        break;
+      }
+      case "icon": {
+        this.#$iconStart.setAttribute("name", newVal ?? "");
+        break;
+      }
+    }
+  }
+  get text() {
+    return getAttribute(this, "text", "");
+  }
+  set text(value) {
+    updateAttribute(this, "text", value);
+  }
+  get readonly() {
+    return getBooleanAttribute(this, "readonly");
+  }
+  set readonly(isReadonly) {
+    updateBooleanAttribute(this, "readonly", isReadonly);
+  }
+  get color() {
+    return getAttribute(this, "color", "");
+  }
+  set color(value) {
+    updateAttribute(this, "color", value);
+  }
+  get icon() {
+    return getAttribute(this, "icon", "");
+  }
+  set icon(value) {
+    updateAttribute(this, "icon", value);
+  }
+  #updateColor(color) {
+    if (color !== null && color !== "") {
+      this.#$button.style.setProperty("background-color", getTagColorBg(color));
+      this.#$button.style.setProperty("--sinch-global-color-text", getTagColorFg(color));
+      this.#$button.style.setProperty("--sinch-global-color-icon", getTagColorFg(color));
+    } else {
+      this.#$button.style.removeProperty("background-color");
+      this.#$button.style.removeProperty("--sinch-global-color-text");
+      this.#$button.style.removeProperty("--sinch-global-color-icon");
+    }
+  }
+  #onClick = (e) => {
+    if (e.target === this.#$iconClose || this.#$iconClose.contains(e.target)) {
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("-click", { bubbles: true, composed: true })
+    );
+  };
+  #onRightIconClick = (e) => {
+    e.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent("-right-icon-click", { bubbles: true, composed: true })
+    );
+  };
+}
+defineCustomElement("sinch-rich-textarea-chip", RichTextareaChip);
+export {
+  RichTextareaChip
+};

package/rich-textarea-chip/types.d.ts

@@ -0,0 +1,56 @@
+import type { TSinchTagColor } from '../tag/colors';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export type TSinchRichTextareaChipProps = {
+    /** Text */
+    text: string;
+    /** Readonly - hides the close button */
+    readonly?: boolean;
+    /** Color using the tag color system */
+    color?: TSinchTagColor;
+    /** Icon name */
+    icon?: string;
+};
+export type TSinchRichTextareaChipEvents = {
+    /** Click event handler */
+    '-click'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchRichTextareaChipStyle = {
+    '--sinch-comp-chip-size-container-m'?: string;
+    '--sinch-comp-chip-size-icon-m'?: string;
+    '--sinch-comp-chip-font-size-m-label'?: string;
+    '--sinch-comp-chip-color-neutral-default-background-initial'?: string;
+    '--sinch-comp-chip-color-neutral-default-foreground-initial'?: string;
+    '--sinch-comp-chip-color-outiline-focus'?: string;
+    '--sinch-comp-chip-shape-radius'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchRichTextareaChip = {
+    props: TSinchRichTextareaChipProps;
+    events: TSinchRichTextareaChipEvents;
+    style: TSinchRichTextareaChipStyle;
+};
+export type TSinchRichTextareaChipElement = NectaryComponentVanillaByType<TSinchRichTextareaChip>;
+export type TSinchRichTextareaChipReact = NectaryComponentReactByType<TSinchRichTextareaChip>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-rich-textarea-chip': TSinchRichTextareaChip;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-rich-textarea-chip': NectaryComponentVanilla<'sinch-rich-textarea-chip'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-rich-textarea-chip': NectaryComponentReact<'sinch-rich-textarea-chip'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-rich-textarea-chip': NectaryComponentReact<'sinch-rich-textarea-chip'>;
+        }
+    }
+}

package/rich-textarea-chip/types.js

@@ -0,0 +1 @@
+

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -47,6 +47,7 @@ const BASE_COMPONENT_NAMES_LIST = [
   "radio",
   "rich-text",
   "rich-textarea",
+  "rich-textarea-chip",
   "segment-collapse",
   "segmented-control-option",
   "segmented-control",

package/utils/element.d.ts

@@ -56,6 +56,7 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"radio",
 	"rich-text",
 	"rich-textarea",
+	"rich-textarea-chip",
 	"segment-collapse",
 	"segmented-control-option",
 	"segmented-control",

package/utils/markdown.js

@@ -9,7 +9,7 @@ const regEm1Underscore = new RegExp("(?<!\\\\)_(?<em1>.+?)(?<!\\\\)_");
 const regCodeTag = new RegExp("(?<!\\\\)`(?<code>.+?)(?<!\\\\)`");
 const regStrikethrough = new RegExp("(?<!\\\\)~~(?<strike>.+?)(?<!\\\\)~~");
 const regLink = new RegExp("(?<!\\\\)!?\\[(?<linktext>[^\\]]*?)\\]\\((?<linkhref>[^)]+?)\\)(\\{(?<linkattrs>[^)]+?)\\})?");
-const regMention = new RegExp("(?<!\\\\)\\{\\{(?<mention>[a-zA-Z0-9_-]+)\\}\\}");
+const regChip = new RegExp("(?<!\\\\)\\{\\{(?<chip>[a-zA-Z0-9_-]+)\\}\\}");
 const regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
@@ -18,7 +18,7 @@ const allRegs = [
   regEscapedChars,
   regCodeTag,
   regLink,
-  regMention,
+  regChip,
   regEm3Star,
   regEm2Star,
   regEm1Star,
@@ -66,8 +66,8 @@ const createLineParser = (visitor) => function parseLine(regs, md, context = INI
     if (groups?.code != null) {
       visitor.codetag(groups.code);
     }
-    if (groups?.mention != null) {
-      visitor.tag(groups.mention);
+    if (groups?.chip != null) {
+      visitor.tag(groups.chip);
     }
     if (groups?.emoji != null) {
       visitor.emoji(groups.emoji);