@nectary/components 5.9.1 → 5.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.9.1",
+  "version": "5.10.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.3.1"
+    "@nectary/assets": "3.3.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.7.1"
+    "@nectary/theme-base": "1.8.0"
   }
 }

package/rich-text/index.d.ts

@@ -1,6 +1,7 @@
 import '../emoji';
 import '../code-tag';
 import '../link';
+import '../tag';
 import { NectaryElement } from '../utils';
 import type { TSinchTextType } from '../text/types';
 export * from './types';

package/rich-text/index.js

@@ -2,6 +2,7 @@ import { getEmojiBaseUrl } from "../emoji/utils.js";
 import "../emoji/index.js";
 import "../code-tag/index.js";
 import "../link/index.js";
+import "../tag/index.js";
 import { getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";

package/rich-text/utils.js

@@ -34,6 +34,11 @@ const createParseVisitor = (doc) => {
           $codeTag.text = text;
           $p.appendChild($codeTag);
         },
+        tag(text) {
+          const $tag = doc.createElement("sinch-tag");
+          $tag.text = text;
+          $p.appendChild($tag);
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = doc.createElement("SPAN");
           $inline.append(doc.createTextNode(text));

package/rich-textarea/index.d.ts

@@ -20,6 +20,7 @@ export declare class RichTextarea extends NectaryElement {
     blur(): void;
     insertText(value: string): void;
     insertLink(text: string, href: string): void;
+    insertMention(username: string): void;
     formatItalic(): void;
     formatBold(): void;
     formatStrikethrough(): void;

package/rich-textarea/index.js

@@ -4,8 +4,8 @@ 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>: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, getEndRange, formatList, handleEmojiMousedown, formatOutdent, formatIndent, formatInline, insertTag, insertLink, insertText, insertLineBreak, deleteContentBackward, setBrowserCaret, 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}.m{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--sinch-comp-tag-shape-radius,4px);background-color:var(--sinch-comp-tag-color-default-background,#e3e8f0);color:var(--sinch-comp-tag-color-default-foreground,#1e2433);font-size:12px;font-weight:500;line-height:20px;white-space:nowrap;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 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";
@@ -150,6 +150,10 @@ class RichTextarea extends NectaryElement {
     const res = this.#handleInput("insertLink", this.#getCurrentRange(), text, href);
     this.#handleActionResult(res);
   }
+  insertMention(username) {
+    const res = this.#handleInput("insertMention", this.#getCurrentRange(), username);
+    this.#handleActionResult(res);
+  }
   formatItalic() {
     const res = this.#handleInput("formatItalic", this.#getCurrentRange());
     this.#handleActionResult(res);
@@ -316,6 +320,9 @@ class RichTextarea extends NectaryElement {
       case "insertLink": {
         return insertLink(this.#$input, text, href, range);
       }
+      case "insertMention": {
+        return insertTag(this.#$input, text, range);
+      }
       // case 'formatUnderline':
       case "formatItalic":
       case "formatBold":

package/rich-textarea/types.d.ts

@@ -4,6 +4,7 @@ export type TRichTextareaSelection = {
     bold: boolean;
     strikethrough: boolean;
     codetag: boolean;
+    tag: boolean;
     link: boolean;
     ulist: boolean;
     olist: boolean;
@@ -18,6 +19,7 @@ export type TSinchRichTextareaProps = {
 export type TSinchRichTextareaMethods = {
     insertText(value: string): void;
     insertLink(text: string, href: string): void;
+    insertMention(username: string): void;
     formatItalic(): void;
     formatBold(): void;
     formatStrikethrough(): void;

package/rich-textarea/utils.d.ts

@@ -22,6 +22,7 @@ export type TActionResult = {
 };
 export declare const deleteContentBackward: ($root: TRichTextareaRoot, range: TRange) => TActionResult;
 export declare const insertLink: ($root: TRichTextareaRoot, text: string, href: string, range: TRange) => TActionResult;
+export declare const insertTag: ($root: TRichTextareaRoot, text: string, range: TRange) => TActionResult;
 export declare const insertLineBreak: (range: TRange) => TActionResult;
 export declare const insertText: ($root: TRichTextareaRoot, data: string | null, range: TRange) => TActionResult;
 export declare const insertFromPaste: (data: string, range: Readonly<TRange>, visitor: TMarkdownParseVisitor) => TActionResult;

package/rich-textarea/utils.js

@@ -138,6 +138,7 @@ 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);
@@ -184,6 +185,9 @@ 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") {
@@ -248,6 +252,11 @@ 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 EMOJI_CHAR_ATTR_NAME = "data-char";
 const createEmoji = (emojiChar, baseUrl, doc) => {
   const $emoji = doc.createElement("img");
@@ -1066,6 +1075,36 @@ const insertLink = ($root, text, href, range) => {
     )
   };
 };
+const insertTag = ($root, text, range) => {
+  const cursor = removeContentInRange(range);
+  const { $text, $inline, offset, isAfterInline: isAfterLastChild } = cursor;
+  const $tag = createTag(text, $root.ownerDocument);
+  if (isTextNode($text)) {
+    if (isEmptyText($text.nodeValue)) {
+      getParentTextBlock($inline).replaceChild($tag, $inline);
+    } else {
+      const [$before, $after] = splitTextNode($text, offset);
+      if ($before === null) {
+        assertNonNull($after);
+        $after.before($tag);
+      } else {
+        $before.after($tag);
+      }
+    }
+  } else if (isAfterLastChild === true) {
+    $inline.after($tag);
+  } else {
+    $inline.before($tag);
+  }
+  const $trailingSpace = createInlineWithText(" ", $root.ownerDocument);
+  $tag.after($trailingSpace);
+  return {
+    prevent: true,
+    range: createCollapsedRange(
+      createEndCursorFromTextContent($trailingSpace)
+    )
+  };
+};
 const insertLineBreak = (range) => {
   const cursor = removeContentInRange(range);
   const { $text, $inline, offset, isAfterInline: isAfterLastChild } = cursor;
@@ -1135,7 +1174,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));
+    const isHotTextWhitespace = range.startOffset === range.startContainer.length && data === TEXT_WHITESPACE && (isFormatCodetag($inline2) || isFormatLink($inline2) || isFormatTag($inline2));
     if (!isHotTextWhitespace) {
       return DEFAULT_ACTION_RESULT;
     }
@@ -1174,7 +1213,7 @@ const insertText = ($root, data, range) => {
       };
     }
     if (offset === $text.length && data === TEXT_WHITESPACE) {
-      if (isFormatLink($inline) || isFormatCodetag($inline)) {
+      if (isFormatLink($inline) || isFormatCodetag($inline) || isFormatTag($inline)) {
         const $newinline = createInlineWithText(data, $root.ownerDocument);
         $inline.after($newinline);
         return {
@@ -1184,6 +1223,27 @@ const insertText = ($root, data, range) => {
           )
         };
       }
+      const content2 = $text.nodeValue;
+      const tagMatch = content2.match(/\{\{([a-zA-Z0-9_-]+)\}\}$/);
+      if (tagMatch !== null) {
+        const text = tagMatch[1];
+        const tagStartPos = content2.length - tagMatch[0].length;
+        const $tag = createTag(text, $root.ownerDocument);
+        const $space = createInlineWithText(data, $root.ownerDocument);
+        if (tagStartPos === 0) {
+          getParentTextBlock($inline).replaceChild($tag, $inline);
+        } else {
+          $text.nodeValue = content2.substring(0, tagStartPos);
+          $inline.after($tag);
+        }
+        $tag.after($space);
+        return {
+          prevent: true,
+          range: createCollapsedRange(
+            createEndCursorFromTextContent($space)
+          )
+        };
+      }
     }
     const content = $text.nodeValue;
     $text.nodeValue = content.substring(0, offset) + data + content.substring(offset);
@@ -1317,6 +1377,7 @@ const getSelectionInfo = (range) => {
         italic: isFormatItalic($inline),
         strikethrough: isFormatStrikethrough($inline),
         codetag: isFormatCodetag($inline),
+        tag: isFormatTag($inline),
         link: isFormatLink($inline),
         olist: isInsideList(true, $inline),
         ulist: isInsideList(false, $inline)
@@ -1327,6 +1388,7 @@ const getSelectionInfo = (range) => {
       bold: false,
       strikethrough: false,
       codetag: false,
+      tag: false,
       link: false,
       olist: false,
       ulist: false
@@ -1337,6 +1399,8 @@ const getSelectionInfo = (range) => {
     italic: isAllInsideItalic(aCursor.$inline, bCursor.$inline),
     strikethrough: isAllInsideStrikethrough(aCursor.$inline, bCursor.$inline),
     codetag: isAllInsideCodetag(aCursor.$inline, bCursor.$inline),
+    tag: false,
+    // Tags are atomic, so multi-selection doesn't apply
     link: isAllInsideLink(aCursor.$inline, bCursor.$inline),
     olist: isAllInsideList(true, aCursor.$inline, bCursor.$inline),
     ulist: isAllInsideList(false, aCursor.$inline, bCursor.$inline)
@@ -1351,7 +1415,7 @@ const isEmptyTextBlock = ($block) => {
     return false;
   }
   const $inline = blockChildren[0];
-  const isEmptyText2 = isInline($inline) && !isFormatCodetag($inline) && isEmptyTextNode(getChildText($inline));
+  const isEmptyText2 = isInline($inline) && !isFormatCodetag($inline) && !isFormatTag($inline) && isEmptyTextNode(getChildText($inline));
   return isEmptyText2;
 };
 const isEditorEmpty = ($root) => {
@@ -1392,6 +1456,10 @@ 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 });
@@ -1449,6 +1517,10 @@ const serializeTextReducer = (state, desc, i, descArray) => {
     chunks.push(`${MD_CODETAG_TOKEN}${desc.text}${MD_CODETAG_TOKEN}`);
     return state;
   }
+  if (desc.isTag === true) {
+    chunks.push(desc.text);
+    return state;
+  }
   if (desc.isWhitespace === true) {
     chunks.push(desc.text);
     return state;
@@ -1620,6 +1692,10 @@ const createParseVisitor = (doc) => {
           setInlineFormat($inline, "c", true);
           $currentBlock.appendChild($inline);
         },
+        tag(text) {
+          const $tag = createTag(text, doc);
+          $currentBlock.appendChild($tag);
+        },
         inline(text, { isBold, isItalic, isStrikethrough }) {
           const $inline = createInlineWithText(text, doc);
           setInlineFormat($inline, "b", isBold === true);
@@ -1704,6 +1780,7 @@ export {
   insertFromPaste,
   insertLineBreak,
   insertLink,
+  insertTag,
   insertText,
   isEditorEmpty,
   isSelectionEqual,

package/utils/markdown.d.ts

@@ -8,6 +8,7 @@ export type TMarkdownParseVisitor = {
     link(text: string, href: string, attributes?: string[]): void;
     emoji(emojiChar: string): void;
     codetag(text: string): void;
+    tag(username: string): void;
     inline(text: string, params: TMarkdownInlineParams): void;
     linebreak(): void;
     paragraph(): void;

package/utils/markdown.js

@@ -9,14 +9,16 @@ 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 regEmoji = new RegExp("(?<emoji>(?![0-9*#])\\p{Emoji})", "u");
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
-const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~])/;
+const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~\{\}])/;
 const allRegs = [
   regEscapedChars,
   regCodeTag,
   regLink,
+  regMention,
   regEm3Star,
   regEm2Star,
   regEm1Star,
@@ -64,6 +66,9 @@ 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?.emoji != null) {
       visitor.emoji(groups.emoji);
     }