@descope-ui/descope-enriched-text 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.0.1 (2025-07-03)
+
+### Dependency Updates
+
+* `e2e-utils` updated to version `0.0.1`
+* `@descope-ui/common` updated to version `0.0.16`
+* `@descope-ui/theme-globals` updated to version `0.0.17`
+* `@descope-ui/descope-text` updated to version `0.0.17`
+* `@descope-ui/descope-link` updated to version `0.0.1`
+# Changelog

package/e2e/descope-enriched-text.spec.ts

@@ -0,0 +1,65 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig } from 'e2e-utils';
+
+const componentAttributes = {
+  mode: ['primary', 'secondary', 'success', 'error'],
+  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
+  'text-align': ['left', 'center', 'right'],
+  'hide-when-empty': ['true', 'false'],
+  'full-width': ['true', 'false'],
+  direction: ['ltr'],
+  readonly: ['true', 'false'],
+  textSample: [
+    'headings',
+    'horizontal-rules',
+    'emphasis',
+    'blockquotes',
+    'lists',
+    'code',
+    'tables',
+    'links',
+    'images',
+    'mixedContent',
+    'escaping',
+    'escapedMarkdown',
+  ],
+};
+
+const storyName = 'descope-enriched-text';
+const componentName = 'descope-enriched-text';
+
+test.describe('theme', () => {
+  test('simple text', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { text: 'Simple Text Test' }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+
+  loopConfig(componentAttributes, (attr, value) => {
+    test(`${attr}: ${value}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { textSample: 'mix', [attr]: value }), {
+        waitUntil: 'networkidle',
+      });
+      const component = page.locator(componentName);
+      expect(await component.screenshot()).toMatchSnapshot();
+    });
+  });
+
+  test('direction: rtl', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World' }), {
+      waitUntil: 'networkidle',
+    });
+    const component = page.locator(componentName);
+    expect(await component.screenshot()).toMatchSnapshot();
+  });
+});
+
+test.describe('logic', () => {
+  test('support title tooltip', async ({ page }) => {
+    await page.goto(getStoryUrl(storyName, { textSample: 'links' }), { waitUntil: 'networkidle' });
+    const component = page.locator('a').last();
+    await expect(component).toHaveAttribute('title', 'title text!');
+  });
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-enriched-text",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/EnrichedTextClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "markdown-it": "14.1.0",
+    "@descope-ui/common": "0.0.16",
+    "@descope-ui/theme-globals": "0.0.17",
+    "@descope-ui/descope-text": "0.0.17",
+    "@descope-ui/descope-link": "0.0.1"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,17 @@
+{
+  "name": "@descope-ui/descope-enriched-text",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-enriched-text/src",
+  "projectType": "library",
+  "targets": {
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "trackDeps": true,
+        "push": false,
+        "preset": "conventional"
+      }
+    }
+  },
+  "tags": []
+}

package/src/component/EnrichedTextClass.js

@@ -0,0 +1,208 @@
+/* eslint-disable no-param-reassign */
+
+import MarkdownIt from 'markdown-it';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } 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';
+
+export const componentName = getComponentName('enriched-text');
+
+class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #origLinkRenderer;
+
+  #origEmRenderer;
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
+      :host {
+        line-height: 1em;
+        word-break: break-word;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        cursor: pointer;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
+        `,
+      this
+    );
+
+    this.#initProcessor();
+
+    observeChildren(this, this.#parseChildren.bind(this));
+  }
+
+  static get observedAttributes() {
+    return ['readonly', 'link-target-blank'];
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnlyChange(newValue === 'true');
+      }
+
+      if (attrName === 'link-target-blank') {
+        this.#initProcessor();
+      }
+    }
+  }
+
+  // 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) => {
+        // 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;
+    }
+  }
+
+  #disableCustomRules() {
+    if (!this.processor) {
+      return;
+    }
+    this.processor.disable(disableRules);
+  }
+
+  #updateProcessorRules() {
+    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() {
+    this.processor = new MarkdownIt('commonmark', { html: true });
+    this.#storeOrigRenderers();
+    this.#updateProcessorRules();
+    this.#customizeLinkRenderer();
+    this.customUnderlineRenderer();
+  }
+
+  get linkTargetBlank() {
+    return this.getAttribute('link-target-blank') === 'true';
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector('.content');
+  }
+
+  #parseChildren() {
+    if (!this.processor) {
+      return;
+    }
+
+    let html = decodeHTML(this.innerHTML);
+
+    if (!html?.trim() && this.isConnected) {
+      this.setAttribute('empty', 'true');
+    } else {
+      this.removeAttribute('empty');
+    }
+
+    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
+      console.warn('Not parsing invalid markdown token');
+    }
+
+    this.contentNode.innerHTML = html;
+  }
+
+  onReadOnlyChange(isReadOnly) {
+    if (isReadOnly) {
+      this.contentNode.setAttribute('inert', isReadOnly);
+    } else {
+      this.contentNode.removeAttribute('inert');
+    }
+  }
+}
+
+export const EnrichedTextClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { selector: () => ':host', property: 'width' },
+      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      fontWeight: {},
+      fontWeightBold: [
+        { selector: () => ':host strong', property: 'font-weight' },
+        { selector: () => ':host b', property: 'font-weight' },
+      ],
+      textColor: { property: 'color' },
+      textLineHeight: { property: 'line-height' },
+      textAlign: {},
+      linkColor: { selector: 'a', property: 'color' },
+      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+      minHeight: {},
+      minWidth: {},
+    },
+  }),
+  createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
+  draggableMixin,
+  componentNameValidationMixin
+)(EnrichedText);

package/src/component/consts.js

@@ -0,0 +1,14 @@
+export const disableRules = [
+  'blockquote',
+  'list',
+  'image',
+  'table',
+  'code',
+  'hr',
+  'backticks',
+  'fence',
+  'reference',
+  'heading',
+  'lheading',
+  'html_block',
+];

package/src/component/helpers.js

@@ -0,0 +1,5 @@
+export const decodeHTML = (html) => {
+  const textArea = document.createElement('textarea');
+  textArea.innerHTML = html;
+  return textArea.value;
+};

package/src/component/index.js

@@ -0,0 +1,7 @@
+import '@descope-ui/descope-link';
+
+import { componentName, EnrichedTextClass } from './EnrichedTextClass';
+
+customElements.define(componentName, EnrichedTextClass);
+
+export { EnrichedTextClass, componentName };

package/src/theme.js

@@ -0,0 +1,40 @@
+import globals from '@descope-ui/theme-globals';
+import { getThemeRefs, useVar } from '@descope-ui/common/theme-helpers';
+import { EnrichedTextClass } from './component/EnrichedTextClass';
+import { vars as textCompVars } from '@descope-ui/descope-text/theme';
+import { vars as linkCompVars } from '@descope-ui/descope-link/theme';
+
+const globalRefs = getThemeRefs(globals);
+const vars = EnrichedTextClass.cssVarList;
+
+const enrichedText = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.hostWidth]: useVar(textCompVars.hostWidth),
+
+  [vars.textLineHeight]: useVar(textCompVars.textLineHeight),
+  [vars.textColor]: useVar(textCompVars.textColor),
+  [vars.textAlign]: useVar(textCompVars.textAlign),
+
+  [vars.fontSize]: useVar(textCompVars.fontSize),
+  [vars.fontWeight]: useVar(textCompVars.fontWeight),
+  [vars.fontFamily]: useVar(textCompVars.fontFamily),
+
+  [vars.linkColor]: useVar(linkCompVars.textColor),
+  [vars.linkTextDecoration]: 'none',
+  [vars.linkHoverTextDecoration]: 'underline',
+
+  [vars.fontWeightBold]: '900',
+  [vars.minWidth]: '0.25em',
+  [vars.minHeight]: '1.35em',
+
+  [vars.hostDisplay]: 'inline-block',
+
+  _empty: {
+    _hideWhenEmpty: {
+      [vars.hostDisplay]: 'none',
+    },
+  },
+};
+
+export default enrichedText;
+export { vars };

package/stories/descope-enriched-text.stories.js

@@ -0,0 +1,245 @@
+import { componentName } from '../src/component';
+import {
+  textContentControl,
+  textAlignControl,
+  modeControl,
+  fullWidthControl,
+  directionControl,
+  typographyVariantControl,
+  readOnlyControl,
+} from '@descope-ui/common/sb-controls';
+
+const textSamples = {
+  mix: `
+## H2 Heading
+
+regular text
+regular text with \\*\\*native\\*\\* asterisks
+
+**This is bold text**
+
+*This is italic text*
+
+_This is underline text_
+
+
++ list item 1
++ list item 2
+
+[link text](https://descope.com)
+  `,
+  markdownParsingIssues: `**}**abc\n**{**abc to be cleared with HTML: <b>}}</b>abc`,
+  escapedMarkdown: `***\\*text\\**** **\\*text\\*** _\\_text\\__ __\\_\\_text\\_\\___ <u><s><b>\\~\\~text\\~\\~</b></s></u>`,
+  escaping:
+    'Multiple Slashes: ///\nSingle backslash: \\ \\ \\ \n Multiple backslashes: \\\\\\\\\\\\\\\\ \n\\*single asterisk\\*\n\\*\\*double asterisk\\*\\*\n\\*\\*\\*triple asterisk\\*\\*\\*\n\\_underscore\\_\n\\_\\_double underscore\\_\\_\n\\_underline (single underscore)\\_\n\\~\\~strikethrough\\~\\~\n\\[link\\](url)\nLine-break: \\n',
+  headings: `
+# H1 Heading
+# H1 **Heading with bold**
+## H2 Heading
+## H2 **Heading with bold**
+### H3 Heading
+### H3 **Heading with bold**
+#### H4 Heading
+#### H4 **Heading with bold**
+##### H5 Heading
+###### H6 Heading
+
+regular text
+
+# sep
+
+**regular text**
+  `,
+  'horizontal-rules': `
+## Horizontal Rules
+
+___
+
+---
+
+***
+  `,
+  emphasis: `
+## Emphasis
+
+<b>This is bold text</b>
+
+__This is bold text__
+
+*This is italic text*
+
+<i>This is italic text</i>
+
+_This is underline text_
+
+<u>This is underline text</u>
+
+<u><s><b><i>[This is a text with multiple formats](http://example)</i></b></s></u>
+
+
+\~\~\*This is single slash escaping\*\~\~
+\\~\\~\\*This is double slash escaping\\*\\~\\~
+
+<s>Strikethrough</s>
+  `,
+  blockquotes: `
+## Blockquotes
+
+
+> Blockquotes can also be nested...
+>> ...by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+  `,
+  lists: `
+  ## Lists
+
+  Unordered
+
+  + Create a list by starting a line with "+", "-", or "*"
+  + Sub-lists are made by indenting 2 spaces:
+    - Marker character change forces new list start:
+      * Ac tristique libero volutpat at
+      + Facilisis in pretium nisl aliquet
+      - Nulla volutpat aliquam velit
+  + Very easy!
+
+  Ordered
+
+  1. Lorem ipsum dolor sit amet
+  2. Consectetur adipiscing elit
+  3. Integer molestie lorem at massa
+
+  1. You can use sequential numbers...
+  1. ...or keep all the numbers as 1.
+
+  Start numbering with offset:
+
+  57. foo
+  1. bar
+    `,
+  code: `
+  ## Code
+
+  Inline \`code\`
+
+  Indented code
+
+      // Some comments
+      line 1 of code
+      line 2 of code
+      line 3 of code
+
+
+  Block code "fences"
+
+  \`\`\`
+  Sample text here...
+  \`\`\`
+  `,
+  tables: `
+## Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
+Right aligned columns
+
+| Option | Description |
+| ------:| -----------:|
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+  `,
+  links: `
+## Links
+
+regular text with [link text](https://descope.com)
+
+regular text with [link with title](https://descope.com "title text!")
+  `,
+  images: `
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+  `,
+  mixedContent: `
+  ## heading <s>[with strikedthrough link](#)</s> and more content with asterisk* and a {{dynamic.value}}
+
+  #### Another paragraph, with --- three dashes and the following hashes ## should not render as heading
+  `,
+};
+
+const Template = ({
+  mode,
+  variant,
+  'text-align': textAlign,
+  'full-width': fullWidth,
+  'link-target-blank': linkTargetBlank,
+  text,
+  readonly,
+  direction,
+  textSample,
+  'hide-when-empty': hideWhenEmpty,
+}) =>
+  `
+    <descope-enriched-text
+      mode="${mode || ''}"
+      variant="${variant || ''}"
+      full-width="${fullWidth || false}"
+      text-align="${textAlign}"
+      st-host-direction="${direction ?? ''}"
+      readonly="${readonly || false}"
+      link-target-blank="${linkTargetBlank || false}"
+      hide-when-empty="${hideWhenEmpty || false}"
+    >${textSample === 'none' ? text : textSamples[textSample]}</descope-enriched-text>
+  `;
+
+export default {
+  component: componentName,
+  title: 'descope-enriched-text',
+  argTypes: {
+    ...textContentControl,
+    textSample: {
+      name: 'Content Samples',
+      options: [
+        'none',
+        'mix',
+        'escaping',
+        'markdownParsingIssues',
+        'escapedMarkdown',
+        'headings',
+        'horizontal-rules',
+        'emphasis',
+        'blockquotes',
+        'lists',
+        'code',
+        'tables',
+        'links',
+        'images',
+        'mixedContent',
+      ],
+      control: { type: 'select' },
+    },
+    ...modeControl,
+    ...typographyVariantControl,
+    ...textAlignControl,
+    ...fullWidthControl,
+    ...directionControl,
+    ...readOnlyControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Lorem Ipsum [link](https://descope.com)',
+  mode: 'primary',
+  readonly: false,
+  'full-width': true, // full-width is true by default for test purposes, which expect this as default and test the FALSE override only
+  'link-target-blank': true,
+  textSample: 'none',
+  'hide-when-empty': false,
+};