@descope-ui/descope-enriched-text 3.11.1 → 3.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-enriched-text",
-  "version": "3.11.1",
+  "version": "3.11.3",
   "files": [
     "src",
     "stories"
@@ -18,14 +18,14 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.11.1"
+    "e2e-utils": "3.11.3"
   },
   "dependencies": {
     "markdown-it": "14.1.1",
-    "@descope-ui/common": "3.11.1",
-    "@descope-ui/theme-globals": "3.11.1",
-    "@descope-ui/descope-link": "3.11.1",
-    "@descope-ui/descope-text": "3.11.1"
+    "@descope-ui/common": "3.11.3",
+    "@descope-ui/theme-globals": "3.11.3",
+    "@descope-ui/descope-text": "3.11.3",
+    "@descope-ui/descope-link": "3.11.3"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/EnrichedTextClass.js

@@ -1,16 +1,26 @@
-/* eslint-disable no-param-reassign */
-
 import MarkdownIt from 'markdown-it';
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '@descope-ui/common/components-mixins';
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  stretchMixin,
+} from '@descope-ui/common/components-mixins';
 import { compose } from '@descope-ui/common/utils';
 import { disableRules } from './consts';
 import { createBaseClass } from '@descope-ui/common/base-classes';
 import { decodeHTML } from './helpers';
-import { getComponentName, injectStyle, observeChildren } from '@descope-ui/common/components-helpers';
+import {
+  getComponentName,
+  injectStyle,
+  observeChildren,
+} from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('enriched-text');
 
-class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+}) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -57,7 +67,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
         color: currentColor;
       }
         `,
-      this
+      this,
     );
 
     this.#initProcessor();
@@ -92,11 +102,23 @@ 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) => {
+    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) => {
+    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);
     };
@@ -104,7 +126,13 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
 
   #customizeLinkRenderer() {
     if (this.linkTargetBlank) {
-      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+      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.
@@ -129,11 +157,13 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
   #storeOrigRenderers() {
     const defaultLinkRenderer = (tokens, idx, options, _, self) =>
       self.renderToken(tokens, idx, options);
-    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+    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;
+    this.#origEmRenderer =
+      this.processor.renderer.rules.em_open || defaultStrongRenderer;
   }
 
   #initProcessor() {
@@ -167,9 +197,11 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
 
     try {
       const tokens = this.processor.parse(html, { references: undefined });
-      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
-    } catch (e) {
-      // eslint-disable-next-line no-console
+      html = this.processor.renderer.render(tokens, {
+        html: true,
+        breaks: true,
+      });
+    } catch {
       console.warn('Not parsing invalid markdown token');
     }
 
@@ -190,7 +222,11 @@ export const EnrichedTextClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: { selector: () => ':host', property: 'width' },
-      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+      hostDisplay: {
+        selector: () => ':host',
+        property: 'display',
+        fallback: 'inline-block',
+      },
       hostDirection: { selector: () => ':host', property: 'direction' },
       fontSize: {},
       fontFamily: {},
@@ -204,13 +240,17 @@ export const EnrichedTextClass = compose(
       textAlign: {},
       linkColor: { selector: 'a', property: 'color' },
       linkTextDecoration: { selector: 'a', property: 'text-decoration' },
-      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+      linkHoverTextDecoration: {
+        selector: 'a:hover',
+        property: 'text-decoration',
+      },
       minHeight: {},
       minWidth: {},
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
   createStyleMixin({ componentNameOverride: getComponentName('text') }),
+  stretchMixin({ triggers: [{ attr: 'full-width', value: 'true' }] }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
 )(EnrichedText);