@descope/web-components-ui 1.0.341 → 1.0.343

package/dist/umd/descope-enriched-text-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20212:(e,t,n)=>{n.r(t),n.d(t,{EnrichedTextClass:()=>d});var r=n(84569),o=n(94978),s=n(2061),i=n(54567);const l={components:{core:{rules:["block","inline"]},block:{rules:["blockquote","code","heading","list","paragraph","list"]},inline:{rules:["backticks","strikethrough","link","emphasis","strikethrough","newline","text"]}}};var h=n(33346);const a=(0,i.iY)("enriched-text");class c extends((0,h.s)({componentName:a,baseSelector:":host > div"})){#e;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n      *, *:last-child {\n        margin: 0;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p {\n        margin-bottom: 1em;\n      }\n      a {\n        text-decoration: none;\n        cursor: pointer;\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n      blockquote {\n        padding: 0 2em;\n      }\n    </style>\n    <slot part="text-wrapper" style="display:none"></slot>\n    <div class="content"></div>\n    ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#t(),(0,i.P$)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,n){super.attributeChangedCallback?.(e,t,n),n!==t&&("readonly"===e&&this.onReadOnlyChange("true"===n),"link-target-blank"===e&&this.#t())}#r(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,n,r,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,n,r,o)):this.processor.renderer.rules.link_open=this.#e}#o(){if(!this.processor)return;const e=l;this.processor.configure(e||{})}#s(){this.#o()}#i(){this.#e=this.processor.renderer.rules.link_open||((e,t,n,r,o)=>o.renderToken(e,t,n))}#t(){this.processor=new r.Z,this.#i(),this.#s(),this.#r()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=this.textContent;try{const t=this.processor.parse(this.textContent,{references:void 0});e=this.processor.renderer.render(t,{breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},textColor:{property:"color"},textLineHeight:{property:"line-height"},textAlign:{},linkColor:{selector:"a",property:"color"}}}),(0,o.yk)({componentNameOverride:(0,i.iY)("link")}),o.e4,o.Ae)(c);customElements.define(a,d)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20212:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>d});var n=r(84569),o=r(94978),s=r(2061),i=r(54567);const l=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"];var h=r(33346);const a=(0,i.iY)("enriched-text");class c extends((0,h.s)({componentName:a,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\n        line-height: 1em;\n        word-break: break-all;\n      }\n      :host > slot {\n        width: 100%;\n        display: inline-block;\n      }\n      *, *:last-child {\n        margin: 0;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      p {\n        margin-bottom: 1em;\n      }\n      a {\n        text-decoration: none;\n        cursor: pointer;\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n      blockquote {\n        padding: 0 2em;\n      }\n      u {\n        text-decoration: underline\n      }\n      s {\n        color: currentColor;\n      }\n    </style>\n    <slot part="text-wrapper" style="display:none"></slot>\n    <div class="content"></div>\n    ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#r(),(0,i.P$)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),r!==t&&("readonly"===e&&this.onReadOnlyChange("true"===r),"link-target-blank"===e&&this.#r())}customUnderlineRenderer(){this.processor.renderer.rules.em_open=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o)),this.processor.renderer.rules.em_close=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o))}#o(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,r,n,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,r,n,o)):this.processor.renderer.rules.link_open=this.#e}#s(){this.processor&&this.processor.disable(l)}#i(){this.#s()}#l(){this.#e=this.processor.renderer.rules.link_open||((e,t,r,n,o)=>o.renderToken(e,t,r)),this.#t=this.processor.renderer.rules.em_open||((e,t,r,n,o)=>o.renderToken(e,t,r))}#r(){this.processor=new n.Z,this.#l(),this.#i(),this.#o(),this.customUnderlineRenderer()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=this.textContent;try{const t=this.processor.parse(e,{references:void 0});e=this.processor.renderer.render(t,{breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},fontWeightBold:{selector:()=>":host strong",property:"font-weight"},textColor:{property:"color"},textLineHeight:{property:"line-height"},textAlign:{},linkColor:{selector:"a",property:"color"},minHeight:{},minWidth:{}}}),(0,o.yk)({componentNameOverride:(0,i.iY)("link")}),o.e4,o.Ae)(c);customElements.define(a,d)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.341",
+  "version": "1.0.343",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -61,7 +61,6 @@
     "@storybook/addon-links": "^6.4.9",
     "@storybook/html": "^6.4.9",
     "@storybook/manager-api": "^7.4.6",
-    "@types/markdown-it": "^14.1.1",
     "@types/node": "^20.8.0",
     "eslint": "^8.48.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -106,7 +105,7 @@
     "highlight.js": "^11.9.0",
     "lint-staged": "^15.0.0",
     "lodash.merge": "4.6.2",
-    "markdown-it": "^14.1.0"
+    "markdown-it": "14.1.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-enriched-text/EnrichedTextClass.js

@@ -1,8 +1,10 @@
+/* eslint-disable no-param-reassign */
+
 import MarkdownIt from 'markdown-it';
 import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
-import { textRuleSet } from './consts';
+import { disableRules } from './consts';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 
 export const componentName = getComponentName('enriched-text');
@@ -10,6 +12,8 @@ export const componentName = getComponentName('enriched-text');
 class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
+  #origEmRenderer;
+
   constructor() {
     super();
 
@@ -18,6 +22,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
       :host {
         display: inline-block;
         line-height: 1em;
+        word-break: break-all;
       }
       :host > slot {
         width: 100%;
@@ -45,6 +50,12 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
       blockquote {
         padding: 0 2em;
       }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
     </style>
     <slot part="text-wrapper" style="display:none"></slot>
     <div class="content"></div>
@@ -75,6 +86,18 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
     }
   }
 
+  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
+  customUnderlineRenderer() {
+    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
+      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+      return this.#origEmRenderer(tokens, idx, options, env, self);
+    };
+  }
+
   #customizeLinkRenderer() {
     if (this.linkTargetBlank) {
       this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
@@ -88,23 +111,25 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
     }
   }
 
-  #enableCustomRules() {
+  #disableCustomRules() {
     if (!this.processor) {
       return;
     }
-
-    const customRuleSet = textRuleSet;
-    this.processor.configure(customRuleSet || {});
+    this.processor.disable(disableRules);
   }
 
   #updateProcessorRules() {
-    this.#enableCustomRules();
+    this.#disableCustomRules();
   }
 
   #storeOrigRenderers() {
     const defaultLinkRenderer = (tokens, idx, options, _, self) =>
       self.renderToken(tokens, idx, options);
     this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+
+    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
+      self.renderToken(tokens, idx, options);
+    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
   }
 
   #initProcessor() {
@@ -112,6 +137,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
     this.#storeOrigRenderers();
     this.#updateProcessorRules();
     this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
   }
 
   get linkTargetBlank() {
@@ -130,7 +156,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
     let html = this.textContent;
 
     try {
-      const tokens = this.processor.parse(this.textContent, { references: undefined });
+      const tokens = this.processor.parse(html, { references: undefined });
       html = this.processor.renderer.render(tokens, { breaks: true });
     } catch (e) {
       // eslint-disable-next-line no-console
@@ -157,10 +183,13 @@ export const EnrichedTextClass = compose(
       fontSize: {},
       fontFamily: {},
       fontWeight: {},
+      fontWeightBold: { selector: () => ':host strong', property: 'font-weight' },
       textColor: { property: 'color' },
       textLineHeight: { property: 'line-height' },
       textAlign: {},
       linkColor: { selector: 'a', property: 'color' },
+      minHeight: {},
+      minWidth: {},
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),

package/src/components/descope-enriched-text/consts.js

@@ -1,13 +1,14 @@
-export const textRuleSet = {
-  components: {
-    core: {
-      rules: ['block', 'inline'],
-    },
-    block: {
-      rules: ['blockquote', 'code', 'heading', 'list', 'paragraph', 'list'],
-    },
-    inline: {
-      rules: ['backticks', 'strikethrough', 'link', 'emphasis', 'strikethrough', 'newline', 'text'],
-    },
-  },
-};
+export const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];

package/src/theme/components/enrichedText.js

@@ -11,6 +11,7 @@ const EnrichedText = {
 
   [vars.fontSize]: globalRefs.typography.body1.size,
   [vars.fontWeight]: globalRefs.typography.body1.weight,
+  [vars.fontWeightBold]: '900',
   [vars.fontFamily]: globalRefs.typography.body1.font,
 
   [vars.textLineHeight]: '1.35em',
@@ -19,6 +20,9 @@ const EnrichedText = {
 
   [vars.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
 
+  [vars.minWidth]: '0.25em',
+  [vars.minHeight]: '1.35em',
+
   mode: {
     primary: {
       [vars.textColor]: globalRefs.colors.surface.contrast,