@descope/web-components-ui 1.0.304 → 1.0.306

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import '@vaadin/text-field';
 import '@vaadin/email-field';
 import '@vaadin/number-field';
 import '@vaadin/password-field';
-import { Remarkable } from 'remarkable';
+import MarkdownIt from 'markdown-it';
 import '@vaadin/text-area';
 import '@vaadin/combo-box';
 import '@vaadin/grid';
@@ -3331,85 +3331,24 @@ const PasswordClass = compose(
 
 customElements.define(componentName$A, PasswordClass);
 
-const ruleSet = {
-  custom: ['image'],
-  core: [
-    'block',
-    'inline',
-    'abbr', // Parse abbreviation definitions, i.e. `*[abbr]: description`
-    'abbr2', // Enclose abbreviations in <abbr> tags
-    'references',
-    'footnote_tail',
-    'replacements', // Simple typographical replacements
-    'smartquotes', // Convert straight quotation marks to typographic ones
-  ],
-  inline: [
-    'text',
-    'newline', // Proceess '\n'
-    'backticks', // Parse backticks
-    'del', // Process ~~deleted text~~
-    'emphasis', // Process *this* and _that_
-    'sub', // Process ~subscript~
-    'sup', // Process ^superscript^
-    'links', // Process [links](<to> "stuff")
-    'escape', // Proceess escaped chars and hardbreaks
-    'ins', // Process ++inserted text++
-    'mark', // Process ==highlighted text==
-    'footnote_inline', // Process inline footnotes (^[...])
-    'footnote_ref', // Process footnote references ([^...])
-    'autolink', // Process autolinks '<protocol:...>'
-    'htmltag', // Process html tags
-    'entity', // Process html entity - &#123;, &#xAF;, &quot;, ...
-  ],
-  block: [
-    'code', // Code block (4 spaces padded)
-    'fences', // fences (``` lang, ~~~ lang)
-    'blockquote', // Block quotes
-    'list',
-    'heading', // heading (#, ##, ...)
-    'paragraph',
-    'hr', // Horizontal rule
-    'footnote', // Process footnote reference list
-    'lheading', // lheading (---, ===)
-    'htmlblock', // HTML block
-    'table', // GFM table, non-standard
-    'deflist', // Definition lists
-  ],
-};
-
 const textRuleSet = {
-  core: ['block', 'inline'],
-  inline: [
-    'text',
-    'newline', // Proceess '\n'
-    'backticks', // Parse backticks
-    'del', // Process ~~deleted text~~
-    'emphasis', // Process *this* and _that_
-    'sub', // Process ~subscript~
-    'sup', // Process ^superscript^
-    'links', // Process [links](<to> "stuff")
-    'escape', // Proceess escaped chars and hardbreaks
-    'ins', // Process ++inserted text++
-    'footnote_inline', // Process inline footnotes (^[...])
-    'footnote_ref', // Process footnote references ([^...])
-    'autolink', // Process autolinks '<protocol:...>'
-  ],
-  block: [
-    'code', // Code block (4 spaces padded)
-    'fences', // fences (``` lang, ~~~ lang)
-    'blockquote', // Block quotes
-    'list',
-    'heading', // heading (#, ##, ...)
-    'paragraph',
-    'footnote', // Process footnote reference list
-    'htmlblock', // HTML block
-  ],
+  components: {
+    core: {
+      rules: ['block', 'inline'],
+    },
+    block: {
+      rules: ['blockquote', 'code', 'heading', 'list', 'paragraph', 'list'],
+    },
+    inline: {
+      rules: ['backticks', 'strikethrough', 'link', 'emphasis', 'strikethrough', 'newline', 'text'],
+    },
+  },
 };
 
 const componentName$z = getComponentName('enriched-text');
 
 let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
-  #origImageRenderer;
+  #origLinkRenderer;
 
   constructor() {
     super();
@@ -3458,7 +3397,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
   }
 
   static get observedAttributes() {
-    return ['readonly'];
+    return ['readonly', 'link-target-blank'];
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -3468,21 +3407,24 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       if (attrName === 'readonly') {
         this.onReadOnlyChange(newValue === 'true');
       }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
     }
   }
 
-  #disableAllRules() {
-    if (!this.processor) {
-      return;
+  #customizeLinkRenderer() {
+    if (this.linkTargetBlank) {
+      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+        // Add a new `target` attribute, or replace the value of the existing one.
+        tokens[idx].attrSet('target', '_blank');
+        // Pass the token to the default renderer.
+        return this.#origLinkRenderer(tokens, idx, options, env, self);
+      };
+    } else {
+      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
     }
-
-    ruleSet?.core && this.processor.core.ruler.disable(ruleSet.core);
-    ruleSet?.inline && this.processor.inline.ruler.disable(ruleSet.inline);
-    ruleSet?.block && this.processor.block.ruler.disable(ruleSet.block);
-
-    this.processor.renderer.rules.image = () => {
-      return '';
-    };
   }
 
   #enableCustomRules() {
@@ -3491,25 +3433,28 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     }
 
     const customRuleSet = textRuleSet;
-
-    customRuleSet?.core && this.processor?.core.ruler.enable(customRuleSet?.core);
-    customRuleSet?.inline && this.processor?.inline.ruler.enable(customRuleSet?.inline);
-    customRuleSet?.block && this.processor?.block.ruler.enable(customRuleSet?.block);
-
-    if (customRuleSet?.custom?.includes('image')) {
-      this.processor.renderer.rules.image = this.#origImageRenderer;
-    }
+    this.processor.configure(customRuleSet || {});
   }
 
   #updateProcessorRules() {
-    this.#disableAllRules();
     this.#enableCustomRules();
   }
 
+  #storeOrigRenderers() {
+    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+  }
+
   #initProcessor() {
-    this.processor = new Remarkable();
-    this.#origImageRenderer = this.processor.renderer.rules.image;
+    this.processor = new MarkdownIt();
+    this.#storeOrigRenderers();
     this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
   }
 
   get contentNode() {
@@ -3524,7 +3469,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
     let html = this.textContent;
 
     try {
-      const tokens = this.processor.parse(this.textContent);
+      const tokens = this.processor.parse(this.textContent, { references: undefined });
       html = this.processor.renderer.render(tokens, { breaks: true });
     } catch (e) {
       // eslint-disable-next-line no-console