@nectary/components 4.7.3 → 4.7.5

package/input/types.d.ts

@@ -15,7 +15,7 @@ export type TSinchInputElement = HTMLElement & {
     /** Text that appears in the text field when it has no value set */
     placeholder: string | null;
     /** The HTML autocomplete attribute */
-    autocomplete: string;
+    autocomplete: HTMLInputElement['autocomplete'];
     /** Invalid state */
     invalid: boolean;
     /** Disabled */

package/package.json

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

package/rich-text/utils.js

@@ -12,6 +12,15 @@ export const createParseVisitor = doc => {
       let $li = null;
       const $lists = [];
       return {
+        escaped(char) {
+          const $text = doc.createTextNode(char);
+          if ($p != null) {
+            $p.appendChild($text);
+          } else {
+            this.paragraph();
+            $p.appendChild($text);
+          }
+        },
         emoji(emojiChar) {
           const $emoji = doc.createElement('sinch-emoji');
           setEmojiBaseUrl($emoji, emojiBaseUrl);

package/rich-textarea/utils.js

@@ -1636,6 +1636,15 @@ export const createParseVisitor = doc => {
       const listsStack = [];
       let isFirstListItem = false;
       return {
+        escaped(char) {
+          const $text = doc.createTextNode(char);
+          if ($currentBlock != null) {
+            $currentBlock.appendChild($text);
+          } else {
+            this.paragraph();
+            $currentBlock.appendChild($text);
+          }
+        },
         emoji(emojiChar) {
           const $emoji = createEmoji(emojiChar, emojiBaseUrl, doc);
           $currentBlock.appendChild($emoji);

package/select-menu/index.js

@@ -54,7 +54,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder'];
+    return ['value', 'rows', 'multiple', 'search-value', 'search-placeholder', 'search-autocomplete'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
@@ -64,6 +64,11 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
           updateExplicitBooleanAttribute(this, 'aria-multiselectable', isAttrTrue(newVal));
           break;
         }
+      case 'search-autocomplete':
+        {
+          updateAttribute(this.#$search, 'autocomplete', newVal);
+          break;
+        }
       case 'value':
         {
           this.#onValueChange(newVal ?? '');
@@ -119,6 +124,12 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const searchableAttribute = this.getAttribute('searchable');
     return searchableAttribute === null ? searchableAttribute : isAttrTrue(searchableAttribute);
   }
+  set 'search-autocomplete'(autocomplete) {
+    updateAttribute(this.#$search, 'autocomplete', autocomplete);
+  }
+  get 'search-autocomplete'() {
+    return getAttribute(this.#$search, 'autocomplete', '');
+  }
   set 'search-placeholder'(placeholder) {
     updateAttribute(this.#$search, 'placeholder', placeholder);
   }

package/select-menu/types.d.ts

@@ -8,6 +8,8 @@ export type TSinchSelectMenuElement = HTMLElement & {
     multiple: boolean;
     /** Enforce the search bar appearing, by default it appears above a certain number of options  */
     searchable: boolean | null;
+    /** Controls the autocomplete of the search input */
+    'search-autocomplete': HTMLInputElement['autocomplete'];
     /** Text for search bar's placeholder */
     'search-placeholder': string;
     /** Optionally control search value manually */
@@ -32,6 +34,8 @@ export type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement>
     multiple?: boolean;
     /** Enforce the search bar appearing, by default it appears above a certain number of options  */
     searchable?: boolean | null;
+    /** Controls the autocomplete of the search input */
+    'search-autocomplete'?: HTMLInputElement['autocomplete'];
     /** Text for search bar's placeholder */
     'search-placeholder'?: string;
     /** Label that is used for a11y */

package/utils/markdown.d.ts

@@ -4,6 +4,7 @@ export type TMarkdownInlineParams = {
     isStrikethrough?: boolean;
 };
 export type TMarkdownParseVisitor = {
+    escaped(char: string): void;
     link(text: string, href: string, attributes?: string[]): void;
     emoji(emojiChar: string): void;
     codetag(text: string): void;

package/utils/markdown.js

@@ -1,18 +1,19 @@
 const regLinebreak = /(?:<br>\n|<br>|\n)/;
 const regParagraph = /\n{2,}/;
-const regEm3Star = /\*\*\*(?<em3>.+?)\*\*\*/;
-const regEm2Star = /\*\*(?<em2>.+?)\*\*/;
-const regEm1Star = /\*(?<em1>.+?)\*/;
-const regEm3Underscore = /___(?<em3>.+?)___/;
-const regEm2Underscore = /__(?<em2>.+?)__/;
-const regEm1Underscore = /_(?<em1>.+?)_/;
-const regCodeTag = /`(?<code>.+?)`/;
-const regStrikethrough = /~~(?<strike>.+?)~~/;
-const regLink = /!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
+const regEm3Star = /(?<!\\)\*\*\*(?<em3>.+?)(?<!\\)\*\*\*/;
+const regEm2Star = /(?<!\\)\*\*(?<em2>.+?)(?<!\\)\*\*/;
+const regEm1Star = /(?<!\\)\*(?<em1>.+?)(?<!\\)\*/;
+const regEm3Underscore = /(?<!\\)___(?<em3>.+?)(?<!\\)___/;
+const regEm2Underscore = /(?<!\\)__(?<em2>.+?)(?<!\\)__/;
+const regEm1Underscore = /(?<!\\)_(?<em1>.+?)(?<!\\)_/;
+const regCodeTag = /(?<!\\)`(?<code>.+?)(?<!\\)`/;
+const regStrikethrough = /(?<!\\)~~(?<strike>.+?)(?<!\\)~~/;
+const regLink = /(?<!\\)!?\[(?<linktext>[^\]]*?)\]\((?<linkhref>[^)]+?)\)(\{(?<linkattrs>[^)]+?)\})?/;
 const regEmoji = /(?<emoji>(?![0-9*#])\p{Emoji})/u;
 const regUList = /^(?<indent>[\t ]*?)[*+-][\t ]+(?<ultext>.*?)[\t ]*?$/;
 const regOList = /^(?<indent>[\t ]*?)\d+\.[\t ]+(?<oltext>.*?)[\t ]*?$/;
-const allRegs = [regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
+const regEscapedChars = /\\(?<escaped>[\\\*_\[\]`~])/;
+const allRegs = [regEscapedChars, regCodeTag, regLink, regEm3Star, regEm2Star, regEm1Star, regEm3Underscore, regEm2Underscore, regEm1Underscore, regStrikethrough, regEmoji];
 export const isEmojiString = data => regEmoji.test(data);
 const excludeRegs = function (regs) {
   for (var _len = arguments.length, excluding = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -47,6 +48,10 @@ const createLineParser = visitor => function parseLine(regs, md) {
       visitor.inline(line.substring(0, match.index), context);
     }
     line = line.substring(match.index + matchedStr.length);
+    if (groups?.escaped != null) {
+      visitor.escaped(groups.escaped);
+      continue;
+    }
     if (groups?.linkhref != null) {
       visitor.link(groups.linktext, groups.linkhref, groups.linkattrs?.split(' '));
     }