@descope/web-components-ui 1.0.300 → 1.0.302

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 var merge = require('lodash.merge');
 var Color = require('color');
-var markdownit = require('markdown-it');
+var remarkable = require('remarkable');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -95,13 +95,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 =
@@ -4417,50 +4417,39 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$s
 });
 
-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$A = 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$A, 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$A = getComponentName('text');
+  init() {
+    super.init();
 
-const BaseTextClass = createBaseTextClass(componentName$A);
+    observeChildren(this, () => {
+      const hasChildren = !!this.childNodes.length;
+      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+    });
+  }
+}
 
 const TextClass = compose(
   createStyleMixin({
@@ -4483,9 +4472,8 @@ const TextClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin,
-  hideWhenEmptyMixin
-)(BaseTextClass);
+  componentNameValidationMixin
+)(RawText);
 
 const globalRefs$j = getThemeRefs(globals);
 const vars$r = TextClass.cssVarList;
@@ -4577,115 +4565,217 @@ var text$3 = /*#__PURE__*/Object.freeze({
   vars: vars$r
 });
 
-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.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({
@@ -4697,27 +4787,82 @@ 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);
+
+const componentName$y = getComponentName('link');
+
+class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+		:host {
+			display: inline-block;
+		}
+		:host a {
+			display: inline;
+			text-decoration: none;
+		}
+		:host a:hover {
+			text-decoration: underline;
+		}
+		</style>
+		<div>
+			<descope-text>
+				<a>
+					<slot></slot>
+				</a>
+			</descope-text>
+		</div>
+		`;
+
+    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
+      includeAttrs: ['href', 'target', 'tooltip'],
+      mapAttrs: {
+        tooltip: 'title',
+      },
+    });
+
+    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
+      includeAttrs: ['mode', 'variant'],
+    });
+  }
 }
 
+const selectors$2 = {
+  host: { selector: () => ':host' },
+  anchor: {},
+  wrapper: { selector: () => ':host > div' },
+  text: { selector: () => TextClass.componentName },
+};
+
+const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
+
+const LinkClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host$h, property: 'width' },
+      hostDirection: { ...text$1, property: 'direction' },
+      textAlign: wrapper$1,
+      textColor: [
+        { ...anchor, property: 'color' },
+        { ...text$1, property: TextClass.cssVarList.textColor },
+      ],
+      cursor: anchor,
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawLink);
+
 const globalRefs$i = getThemeRefs(globals);
 const vars$q = EnrichedTextClass.cssVarList;
 
@@ -4732,6 +4877,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,
@@ -4802,73 +4949,6 @@ var EnrichedText$1 = /*#__PURE__*/Object.freeze({
   vars: vars$q
 });
 
-const componentName$y = getComponentName('link');
-
-class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-		}
-		:host a {
-			display: inline;
-			text-decoration: none;
-		}
-		:host a:hover {
-			text-decoration: underline;
-		}
-		</style>
-		<div>
-			<descope-text>
-				<a>
-					<slot></slot>
-				</a>
-			</descope-text>
-		</div>
-		`;
-
-    forwardAttrs(this, this.shadowRoot.querySelector('a'), {
-      includeAttrs: ['href', 'target', 'tooltip'],
-      mapAttrs: {
-        tooltip: 'title',
-      },
-    });
-
-    forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
-      includeAttrs: ['mode', 'variant'],
-    });
-  }
-}
-
-const selectors$2 = {
-  host: { selector: () => ':host' },
-  anchor: {},
-  wrapper: { selector: () => ':host > div' },
-  text: { selector: () => TextClass.componentName },
-};
-
-const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
-
-const LinkClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { ...host$h, property: 'width' },
-      hostDirection: { ...text$1, property: 'direction' },
-      textAlign: wrapper$1,
-      textColor: [
-        { ...anchor, property: 'color' },
-        { ...text$1, property: TextClass.cssVarList.textColor },
-      ],
-      cursor: anchor,
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawLink);
-
 const globalRefs$h = getThemeRefs(globals);
 const vars$p = LinkClass.cssVarList;