@descope/web-components-ui 1.0.300 → 1.0.302

package/dist/index.d.ts

@@ -24,8 +24,8 @@ export { NotpImageClass } from './components/descope-notp-image';
 export { NumberFieldClass } from './components/descope-number-field';
 export { PasscodeClass } from './components/descope-passcode';
 export { PasswordClass } from './components/descope-password';
-export { TextClass } from './components/text-components/descope-text';
-export { EnrichedTextClass } from './components/text-components/descope-enriched-text';
+export { TextClass } from './components/descope-text';
+export { EnrichedTextClass } from './components/descope-enriched-text';
 export { TextAreaClass } from './components/descope-text-area';
 export { TextFieldClass } from './components/descope-text-field';
 export { ImageClass } from './components/descope-image';

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 markdownit from 'markdown-it';
+import { Remarkable } from 'remarkable';
 import '@vaadin/text-area';
 import '@vaadin/combo-box';
 import '@vaadin/grid';
@@ -112,13 +112,13 @@ const observeChildren = (ele, callback) => {
 
   const observer = new MutationObserver((mutationsList) => {
     mutationsList.forEach((mutation) => {
-      if (mutation.type === 'childList') {
+      if (mutation.type === 'childList' || mutation.type === 'characterData') {
         callback(mutation);
       }
     });
   });
 
-  observer.observe(ele, { childList: true });
+  observer.observe(ele, { childList: true, characterData: true, subtree: true });
 };
 
 const createSyncAttrsCb =
@@ -2214,50 +2214,39 @@ const ContainerClass = compose(
 
 customElements.define(componentName$M, ContainerClass);
 
-const hideWhenEmptyMixin = (superclass) =>
-  class HideWhenEmptyMixinClass extends superclass {
-    get hideWhenEmpty() {
-      return this.getAttribute('hide-when-empty') === 'true';
-    }
-
-    init() {
-      super.init();
-
-      observeChildren(this, () => {
-        const hasChildren = !!this.childNodes.length;
-        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
-      });
-    }
-  };
-
-const createBaseTextClass = (componentName) => {
-  class BaseText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
-    constructor() {
-      super();
+const componentName$L = getComponentName('text');
 
-      this.attachShadow({ mode: 'open' }).innerHTML = `
-      <style>
-        :host {
-          display: inline-block;
-        }
-        :host > slot {
-          width: 100%;
-          display: inline-block;
-        }
-      </style>
-      <slot part="text-wrapper"></slot>
-      `;
+class RawText extends createBaseClass({ componentName: componentName$L, baseSelector: ':host > slot' }) {
+  constructor() {
+    super();
 
-      this.textSlot = this.shadowRoot.querySelector('slot');
-    }
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+    </style>
+    <slot part="text-wrapper"></slot>
+    `;
   }
 
-  return BaseText;
-};
+  get hideWhenEmpty() {
+    return this.getAttribute('hide-when-empty') === 'true';
+  }
 
-const componentName$L = getComponentName('text');
+  init() {
+    super.init();
 
-const BaseTextClass = createBaseTextClass(componentName$L);
+    observeChildren(this, () => {
+      const hasChildren = !!this.childNodes.length;
+      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+    });
+  }
+}
 
 const TextClass = compose(
   createStyleMixin({
@@ -2280,9 +2269,8 @@ const TextClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin,
-  hideWhenEmptyMixin
-)(BaseTextClass);
+  componentNameValidationMixin
+)(RawText);
 
 const componentName$K = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName: componentName$K, baseSelector: ':host > div' }) {
@@ -3343,115 +3331,217 @@ const PasswordClass = compose(
 
 customElements.define(componentName$A, PasswordClass);
 
-const customEleMap = {
-  a: 'descope-link',
+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 getTokenTag = (token) => customEleMap[token.tag] || token.tag;
+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
+  ],
+};
 
-const isImageToken = (token) => token?.children?.[0].type === 'image';
+const componentName$z = getComponentName('enriched-text');
 
-const enrichTokens = (tokens) =>
-  tokens.map((token) => {
-    const tag = getTokenTag(token);
+let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
+  #origImageRenderer;
 
-    if (isImageToken(token)) {
-      token.children[0].attrs.push(['style', 'width:100%']);
-      return {
-        ...token,
-        tag,
-      };
-    }
+  constructor() {
+    super();
 
-    if (token?.children?.length > 0) {
-      return {
-        ...token,
-        tag,
-        children: enrichTokens(token.children),
-      };
-    }
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        text-decoration: none;
+        cursor: pointer;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+    </style>
+    <slot part="text-wrapper" style="display:none"></slot>
+    <div class="content"></div>
+    `;
 
-    return {
-      ...token,
-      tag,
-    };
-  });
+    this.textSlot = this.shadowRoot.querySelector('slot');
 
-const onClipboardCopy = (e) => {
-  const selection = document.getSelection().toString();
-  const clipdata = e.clipboardData || window.clipboardData;
-  clipdata.setData('text/plain', selection);
-  clipdata.setData('text/html', selection);
-  e.preventDefault();
-};
+    this.#initProcessor();
 
-const componentName$z = getComponentName('enriched-text');
+    observeChildren(this, this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly'];
+  }
 
-const BaseEnrichedTextClass = createBaseTextClass(componentName$z);
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-const EnrichedTextMixin = (superclass) =>
-  class EnrichedTextMixinClass extends superclass {
-    static get observedAttributes() {
-      return ['disabled-rules', 'line-break', 'readonly'];
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
     }
+  }
 
-    get lineBreak() {
-      return this.getAttribute('line-break');
+  #disableAllRules() {
+    if (!this.processor) {
+      return;
     }
 
-    get disabledRules() {
-      return (this.getAttribute('disabled-rules') || '').split(',').filter(Boolean);
-    }
+    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);
 
-    init() {
-      super.init();
-      this.#initProcessor();
-      this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
+    this.processor.renderer.rules.image = () => {
+      return '';
+    };
+  }
+
+  #enableCustomRules() {
+    if (!this.processor) {
+      return;
     }
 
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    const customRuleSet = textRuleSet;
 
-      if (attrName === 'disabled-rules') {
-        if (newValue !== oldValue) {
-          this.#initProcessor(newValue);
-          this.#parseChildren();
-        }
-      }
+    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 (attrName === 'readonly') {
-        this.onReadOnlyChange(newValue !== null);
-      }
+    if (customRuleSet?.custom?.includes('image')) {
+      this.processor.renderer.rules.image = this.#origImageRenderer;
     }
+  }
 
-    #initProcessor() {
-      this.processor = markdownit({ breaks: this.lineBreak }).disable(this.disabledRules);
-    }
+  #updateProcessorRules() {
+    this.#disableAllRules();
+    this.#enableCustomRules();
+  }
 
-    #parseChildren() {
-      const node = this.textSlot.assignedNodes({ flatten: true })?.[0];
+  #initProcessor() {
+    this.processor = new Remarkable();
+    this.#origImageRenderer = this.processor.renderer.rules.image;
+    this.#updateProcessorRules();
+  }
 
-      if (node && node.nodeType === Node.TEXT_NODE) {
-        const tokens = this.processor.parse(node.textContent, { references: undefined });
-        const result = this.processor.renderer.render(enrichTokens(tokens), {
-          breaks: this.lineBreak,
-        });
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
 
-        if (result !== node.textContent) {
-          const span = document.createElement('div');
-          span.classList.add('enriched-text');
-          // eslint-disable-next-line no-use-before-define
-          span.innerHTML = `${getStyleReset()}${result}`;
-          span.addEventListener('copy', onClipboardCopy);
-          node.parentNode.replaceChild(span, node);
-        }
-      }
+  #parseChildren() {
+    if (!this.processor) {
+      return;
     }
 
-    onReadOnlyChange(val) {
-      this.setAttribute('inert', val);
+    let html = this.textContent;
+
+    try {
+      const tokens = this.processor.parse(this.textContent);
+      html = this.processor.renderer.render(tokens, { breaks: true });
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn('Not parsing invalid markdown token');
     }
-  };
+
+    this.contentNode.innerHTML = html;
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.setAttribute('inert', isReadOnly);
+    } else {
+      this.removeAttribute('inert');
+    }
+  }
+};
 
 const EnrichedTextClass = compose(
   createStyleMixin({
@@ -3463,26 +3553,14 @@ const EnrichedTextClass = compose(
       fontWeight: {},
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },
-      marginReset: { selector: '*', property: 'margin' },
       textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
     },
   }),
+  createStyleMixin({ componentNameOverride: getComponentName('link') }),
   draggableMixin,
-  componentNameValidationMixin,
-  EnrichedTextMixin,
-  hideWhenEmptyMixin
-)(BaseEnrichedTextClass);
-
-function getStyleReset() {
-  return `
-  <style>
-    .enriched-text > * { margin:0 }
-    .enriched-text > *:not(:only-child):not(:last-child) {
-      margin-bottom: var(${EnrichedTextClass.cssVarList.textLineHeight})
-    }
-  </style>
-  `;
-}
+  componentNameValidationMixin
+)(EnrichedText$2);
 
 customElements.define(componentName$z, EnrichedTextClass);
 
@@ -11562,6 +11640,8 @@ const EnrichedText = {
   [vars$q.textAlign]: 'left',
   [vars$q.textColor]: globalRefs$i.colors.surface.dark,
 
+  [vars$q.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
+
   mode: {
     primary: {
       [vars$q.textColor]: globalRefs$i.colors.surface.contrast,