@descope/web-components-ui 1.0.305 → 1.0.306

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],{212:(e,t,n)=>{n.r(t),n.d(t,{EnrichedTextClass:()=>d});var o=n(4569),r=n(4978),s=n(2061),i=n(4567);const c={components:{core:{rules:["block","inline"]},block:{rules:["blockquote","code","heading","list","paragraph","list"]},inline:{rules:["backticks","strikethrough","link","emphasis","strikethrough","newline","text"]}}};var l=n(3346);const a=(0,i.iY)("enriched-text");class h extends((0,l.s)({componentName:a,baseSelector:":host > div"})){#e;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\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"]}attributeChangedCallback(e,t,n){super.attributeChangedCallback?.(e,t,n),n!==t&&"readonly"===e&&this.onReadOnlyChange("true"===n)}#o(){if(!this.processor)return;const e=c;this.processor.configure(e||{}),e?.custom?.includes("image")&&(this.processor.renderer.rules.image=this.#e)}#r(){this.#o()}#t(){this.processor=new o.Z,this.#r()}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,r.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,r.yk)({componentNameOverride:(0,i.iY)("link")}),r.e4,r.Ae)(h);customElements.define(a,d)}}]);
+"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{212:(e,t,n)=>{n.r(t),n.d(t,{EnrichedTextClass:()=>d});var r=n(4569),o=n(4978),s=n(2061),i=n(4567);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 a=n(3346);const h=(0,i.iY)("enriched-text");class c extends((0,a.s)({componentName:h,baseSelector:":host > div"})){#e;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n    <style>\n      :host {\n        display: inline-block;\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(h,d)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.305",
+  "version": "1.0.306",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -8,7 +8,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 export const componentName = getComponentName('enriched-text');
 
 class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
-  #origImageRenderer;
+  #origLinkRenderer;
 
   constructor() {
     super();
@@ -57,7 +57,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
   }
 
   static get observedAttributes() {
-    return ['readonly'];
+    return ['readonly', 'link-target-blank'];
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -67,6 +67,23 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
       if (attrName === 'readonly') {
         this.onReadOnlyChange(newValue === 'true');
       }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
+    }
+  }
+
+  #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;
     }
   }
 
@@ -77,19 +94,27 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
 
     const customRuleSet = textRuleSet;
     this.processor.configure(customRuleSet || {});
-
-    if (customRuleSet?.custom?.includes('image')) {
-      this.processor.renderer.rules.image = this.#origImageRenderer;
-    }
   }
 
   #updateProcessorRules() {
     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 MarkdownIt();
+    this.#storeOrigRenderers();
     this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
   }
 
   get contentNode() {