@descope/web-components-ui 1.0.341 → 1.0.343

Sign up to get free protection for your applications and to get access to all the features.
@@ -1 +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)}}]);
1
+ "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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.0.341",
3
+ "version": "1.0.343",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -61,7 +61,6 @@
61
61
  "@storybook/addon-links": "^6.4.9",
62
62
  "@storybook/html": "^6.4.9",
63
63
  "@storybook/manager-api": "^7.4.6",
64
- "@types/markdown-it": "^14.1.1",
65
64
  "@types/node": "^20.8.0",
66
65
  "eslint": "^8.48.0",
67
66
  "eslint-config-airbnb-base": "^15.0.0",
@@ -106,7 +105,7 @@
106
105
  "highlight.js": "^11.9.0",
107
106
  "lint-staged": "^15.0.0",
108
107
  "lodash.merge": "4.6.2",
109
- "markdown-it": "^14.1.0"
108
+ "markdown-it": "14.1.0"
110
109
  },
111
110
  "overrides": {
112
111
  "@vaadin/avatar": "24.3.4",
@@ -1,8 +1,10 @@
1
+ /* eslint-disable no-param-reassign */
2
+
1
3
  import MarkdownIt from 'markdown-it';
2
4
  import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
3
5
  import { compose } from '../../helpers';
4
6
  import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
5
- import { textRuleSet } from './consts';
7
+ import { disableRules } from './consts';
6
8
  import { createBaseClass } from '../../baseClasses/createBaseClass';
7
9
 
8
10
  export const componentName = getComponentName('enriched-text');
@@ -10,6 +12,8 @@ export const componentName = getComponentName('enriched-text');
10
12
  class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
11
13
  #origLinkRenderer;
12
14
 
15
+ #origEmRenderer;
16
+
13
17
  constructor() {
14
18
  super();
15
19
 
@@ -18,6 +22,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
18
22
  :host {
19
23
  display: inline-block;
20
24
  line-height: 1em;
25
+ word-break: break-all;
21
26
  }
22
27
  :host > slot {
23
28
  width: 100%;
@@ -45,6 +50,12 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
45
50
  blockquote {
46
51
  padding: 0 2em;
47
52
  }
53
+ u {
54
+ text-decoration: underline
55
+ }
56
+ s {
57
+ color: currentColor;
58
+ }
48
59
  </style>
49
60
  <slot part="text-wrapper" style="display:none"></slot>
50
61
  <div class="content"></div>
@@ -75,6 +86,18 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
75
86
  }
76
87
  }
77
88
 
89
+ // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
90
+ customUnderlineRenderer() {
91
+ this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
92
+ if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
93
+ return this.#origEmRenderer(tokens, idx, options, env, self);
94
+ };
95
+ this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
96
+ if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
97
+ return this.#origEmRenderer(tokens, idx, options, env, self);
98
+ };
99
+ }
100
+
78
101
  #customizeLinkRenderer() {
79
102
  if (this.linkTargetBlank) {
80
103
  this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
@@ -88,23 +111,25 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
88
111
  }
89
112
  }
90
113
 
91
- #enableCustomRules() {
114
+ #disableCustomRules() {
92
115
  if (!this.processor) {
93
116
  return;
94
117
  }
95
-
96
- const customRuleSet = textRuleSet;
97
- this.processor.configure(customRuleSet || {});
118
+ this.processor.disable(disableRules);
98
119
  }
99
120
 
100
121
  #updateProcessorRules() {
101
- this.#enableCustomRules();
122
+ this.#disableCustomRules();
102
123
  }
103
124
 
104
125
  #storeOrigRenderers() {
105
126
  const defaultLinkRenderer = (tokens, idx, options, _, self) =>
106
127
  self.renderToken(tokens, idx, options);
107
128
  this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
129
+
130
+ const defaultStrongRenderer = (tokens, idx, options, _, self) =>
131
+ self.renderToken(tokens, idx, options);
132
+ this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
108
133
  }
109
134
 
110
135
  #initProcessor() {
@@ -112,6 +137,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
112
137
  this.#storeOrigRenderers();
113
138
  this.#updateProcessorRules();
114
139
  this.#customizeLinkRenderer();
140
+ this.customUnderlineRenderer();
115
141
  }
116
142
 
117
143
  get linkTargetBlank() {
@@ -130,7 +156,7 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
130
156
  let html = this.textContent;
131
157
 
132
158
  try {
133
- const tokens = this.processor.parse(this.textContent, { references: undefined });
159
+ const tokens = this.processor.parse(html, { references: undefined });
134
160
  html = this.processor.renderer.render(tokens, { breaks: true });
135
161
  } catch (e) {
136
162
  // eslint-disable-next-line no-console
@@ -157,10 +183,13 @@ export const EnrichedTextClass = compose(
157
183
  fontSize: {},
158
184
  fontFamily: {},
159
185
  fontWeight: {},
186
+ fontWeightBold: { selector: () => ':host strong', property: 'font-weight' },
160
187
  textColor: { property: 'color' },
161
188
  textLineHeight: { property: 'line-height' },
162
189
  textAlign: {},
163
190
  linkColor: { selector: 'a', property: 'color' },
191
+ minHeight: {},
192
+ minWidth: {},
164
193
  },
165
194
  }),
166
195
  createStyleMixin({ componentNameOverride: getComponentName('link') }),
@@ -1,13 +1,14 @@
1
- export const textRuleSet = {
2
- components: {
3
- core: {
4
- rules: ['block', 'inline'],
5
- },
6
- block: {
7
- rules: ['blockquote', 'code', 'heading', 'list', 'paragraph', 'list'],
8
- },
9
- inline: {
10
- rules: ['backticks', 'strikethrough', 'link', 'emphasis', 'strikethrough', 'newline', 'text'],
11
- },
12
- },
13
- };
1
+ export const disableRules = [
2
+ 'blockquote',
3
+ 'list',
4
+ 'image',
5
+ 'table',
6
+ 'code',
7
+ 'hr',
8
+ 'backticks',
9
+ 'fence',
10
+ 'reference',
11
+ 'heading',
12
+ 'lheading',
13
+ 'html_block',
14
+ ];
@@ -11,6 +11,7 @@ const EnrichedText = {
11
11
 
12
12
  [vars.fontSize]: globalRefs.typography.body1.size,
13
13
  [vars.fontWeight]: globalRefs.typography.body1.weight,
14
+ [vars.fontWeightBold]: '900',
14
15
  [vars.fontFamily]: globalRefs.typography.body1.font,
15
16
 
16
17
  [vars.textLineHeight]: '1.35em',
@@ -19,6 +20,9 @@ const EnrichedText = {
19
20
 
20
21
  [vars.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
21
22
 
23
+ [vars.minWidth]: '0.25em',
24
+ [vars.minHeight]: '1.35em',
25
+
22
26
  mode: {
23
27
  primary: {
24
28
  [vars.textColor]: globalRefs.colors.surface.contrast,