@limetech/lime-elements 37.26.0 → 37.26.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -2
- package/dist/cjs/limel-markdown.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +4 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/collection/components/markdown/allowed-css-properties.js +0 -1
- package/dist/collection/components/markdown/allowed-css-properties.js.map +1 -1
- package/dist/collection/components/markdown/markdown-parser.js +1 -1
- package/dist/collection/components/markdown/markdown-parser.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.css +88 -0
- package/dist/collection/components/text-editor/text-editor.js +3 -0
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -2
- package/dist/esm/limel-markdown.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +4 -1
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-6ebde4a2.entry.js +2 -0
- package/dist/lime-elements/p-6ebde4a2.entry.js.map +1 -0
- package/dist/lime-elements/{p-a8b9ae53.entry.js → p-b6e238b6.entry.js} +2 -2
- package/dist/lime-elements/{p-a8b9ae53.entry.js.map → p-b6e238b6.entry.js.map} +1 -1
- package/package.json +2 -2
- package/dist/lime-elements/p-f1e1f867.entry.js +0 -2
- package/dist/lime-elements/p-f1e1f867.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-d1052409.js');
|
|
6
6
|
|
|
7
|
-
const textEditorCss = "@charset \"UTF-8\";:host(limel-text-editor){display:flex;flex-direction:column;width:100
|
|
7
|
+
const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}:host(limel-text-editor){display:flex;flex-direction:column;width:100%;position:relative}fieldset{min-width:0;min-height:0}:host(limel-text-editor[readonly]) fieldset{padding-block-start:0.75rem}:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}fieldset{box-sizing:border-box;transition:border-color 0.2s ease, background-color 0.2s ease;border:1px solid;border-radius:0.25rem;margin-inline-start:0;margin-inline-end:0;padding-block-start:0;padding-inline-start:0.75rem;padding-inline-end:0.75rem;padding-block-end:0.75rem}fieldset:not([disabled]){border-color:rgba(var(--contrast-700), 0.65);background-color:rgba(var(--contrast-200), 0.5)}fieldset:not([disabled]):hover{border-color:rgba(var(--contrast-700), 1);background-color:rgba(var(--contrast-200), 1)}fieldset:not([disabled]):focus-within{border-color:var(--mdc-theme-primary)}fieldset[disabled]{border-color:transparent}fieldset:has(legend){margin-top:calc((-0.75rem / 2) + (1px / 2))}legend{box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:rgba(var(--contrast-1200), 1);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);padding-inline-start:0.25rem;padding-inline-end:0.25rem}";
|
|
8
8
|
|
|
9
9
|
const TextEditor = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -26,6 +26,9 @@ const TextEditor = class {
|
|
|
26
26
|
return (index.h("fieldset", { disabled: this.readonly || this.disabled }, this.renderLabel(), this.renderEditor()));
|
|
27
27
|
}
|
|
28
28
|
renderEditor() {
|
|
29
|
+
if (this.readonly && !this.value) {
|
|
30
|
+
return (index.h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
|
|
31
|
+
}
|
|
29
32
|
if (this.readonly) {
|
|
30
33
|
return index.h("limel-markdown", { value: this.value });
|
|
31
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+
|
|
1
|
+
{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+0HAA+0H;;MCsBx1H,UAAU;;;;IAkGX,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;;;EAzCK,MAAM;IACT,QACIA,sBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAC7C,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,YAAY,EAAE,CACb,EACb;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,QACIA,kBAAM,KAAK,EAAC,2DAA2D,aAEhE,EACT;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAOA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,QACIA,uCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,EACJ;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAOA,wBAAS,IAAI,CAAC,KAAK,CAAU,CAAC;GACxC;;;;;;","names":["h"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n:host(limel-text-editor) {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n}\n\nfieldset {\n min-width: 0;\n min-height: 0;\n\n :host(limel-text-editor[readonly]) & {\n padding-block-start: 0.75rem;\n }\n}\n\n@import '../../style/internal/fieldset.scss';\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return (\n <fieldset disabled={this.readonly || this.disabled}>\n {this.renderLabel()}\n {this.renderEditor()}\n </fieldset>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <legend>{this.label}</legend>;\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"allowed-css-properties.js","sourceRoot":"","sources":["../../../src/components/markdown/allowed-css-properties.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;EAChC,kBAAkB;EAClB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,
|
|
1
|
+
{"version":3,"file":"allowed-css-properties.js","sourceRoot":"","sources":["../../../src/components/markdown/allowed-css-properties.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG;EAChC,kBAAkB;EAClB,OAAO;EACP,YAAY;EACZ,aAAa;EACb,uBAAuB;EACvB,sBAAsB;EACtB,0BAA0B;EAC1B,uBAAuB;EACvB,2BAA2B;EAC3B,iBAAiB;EACjB,OAAO;CACV,CAAC","sourcesContent":["export const allowedCssProperties = [\n 'background-color',\n 'color',\n 'font-style',\n 'font-weight',\n 'text-decoration-color',\n 'text-decoration-line',\n 'text-decoration-skip-ink',\n 'text-decoration-style',\n 'text-decoration-thickness',\n 'text-decoration',\n 'width',\n];\n"]}
|
|
@@ -34,7 +34,7 @@ export async function markdownToHTML(text, options) {
|
|
|
34
34
|
.use(rehypeRaw)
|
|
35
35
|
.use(rehypeSanitize, Object.assign(Object.assign({}, defaultSchema), {
|
|
36
36
|
// Allow the `style` attribute on all elements
|
|
37
|
-
attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { '*': ['
|
|
37
|
+
attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { '*': ['style', 'width'] })
|
|
38
38
|
}))
|
|
39
39
|
.use(() => {
|
|
40
40
|
return (tree) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAChC,IAAY,EACZ,OAA+B;EAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,EAAE;IAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;GAC5C;EAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;KACvB,GAAG,CAAC,WAAW,CAAC;KAChB,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;KAC/C,GAAG,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KAC9C,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,cAAc,kCACZ,aAAa;IAChB,8CAA8C;IAC9C,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,GAAG,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"markdown-parser.js","sourceRoot":"","sources":["../../../src/components/markdown/markdown-parser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,cAAc,EAAE,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAC/C,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,KAAK,UAAU,cAAc,CAChC,IAAY,EACZ,OAA+B;EAE/B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,mBAAmB,EAAE;IAC9B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;GAC5C;EAED,MAAM,IAAI,GAAG,MAAM,OAAO,EAAE;KACvB,GAAG,CAAC,WAAW,CAAC;KAChB,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,YAAY,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;KAC/C,GAAG,CAAC,mBAAmB,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KAC9C,GAAG,CAAC,SAAS,CAAC;KACd,GAAG,CAAC,cAAc,kCACZ,aAAa;IAChB,8CAA8C;IAC9C,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,OAE7B;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAS,EAAE,EAAE;MACjB,8DAA8D;MAC9D,uDAAuD;MACvD,KAAK,CAAC,IAAI,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;IAC1C,CAAC,CAAC;EACN,CAAC,CAAC;KACD,GAAG,CAAC,eAAe,CAAC;KACpB,OAAO,CAAC,IAAI,CAAC,CAAC;EAEnB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC3B,CAAC","sourcesContent":["import { unified } from 'unified';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport remarkGfm from 'remark-gfm';\nimport rehypeExternalLinks from 'rehype-external-links';\nimport rehypeSanitize, { defaultSchema } from 'rehype-sanitize';\nimport rehypeStringify from 'rehype-stringify';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport { sanitizeStyle } from './sanitize-style';\n\n/**\n * Takes a string as input and returns a new string\n * where the text has been converted to HTML.\n *\n * If the text is formatted with .md markdown, it will\n * be transformed to HTML.\n *\n * If the text already is in HTML it will be sanitized and\n * \"dangerous\" tags such as <script> will be removed.\n *\n * @param text - The string to convert.\n * @param options - Options for the conversions.\n * @returns The resulting HTML.\n */\nexport async function markdownToHTML(\n text: string,\n options?: markdownToHTMLOptions,\n): Promise<string> {\n if (options?.forceHardLineBreaks) {\n text = text.replace(/([\\n\\r])/g, ' $1');\n }\n\n const file = await unified()\n .use(remarkParse)\n .use(remarkGfm)\n .use(remarkRehype, { allowDangerousHtml: true })\n .use(rehypeExternalLinks, { target: '_blank' })\n .use(rehypeRaw)\n .use(rehypeSanitize, {\n ...defaultSchema,\n // Allow the `style` attribute on all elements\n attributes: {\n ...defaultSchema.attributes,\n '*': ['style', 'width'],\n },\n })\n .use(() => {\n return (tree: any) => {\n // Run the sanitizeStyle function on all elements, to sanitize\n // the value of the `style` attribute, if there is one.\n visit(tree, 'element', sanitizeStyle);\n };\n })\n .use(rehypeStringify)\n .process(text);\n\n return file.toString();\n}\n\n/**\n * Options for markdownToHTML.\n */\nexport interface markdownToHTMLOptions {\n /**\n * Set to `true` to convert all soft line breaks to hard line breaks.\n */\n forceHardLineBreaks?: boolean;\n}\n"]}
|
|
@@ -1,8 +1,96 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
+
/*
|
|
3
|
+
* This file is imported into every component!
|
|
4
|
+
*
|
|
5
|
+
* Nothing in this file may output any CSS
|
|
6
|
+
* without being explicitly called by outside code.
|
|
7
|
+
*/
|
|
8
|
+
/*
|
|
9
|
+
* This file is imported into every component that uses MDC!
|
|
10
|
+
*
|
|
11
|
+
* Anything in this file that generates CSS output on its own,
|
|
12
|
+
* without being explicitly used, will output that CSS in every
|
|
13
|
+
* single component, increasing the size of the production build.
|
|
14
|
+
* Avoid that unless there's very good reason for it!
|
|
15
|
+
*/
|
|
16
|
+
/*
|
|
17
|
+
* This file is imported into every component that uses MDC!
|
|
18
|
+
*
|
|
19
|
+
* Anything in this file that generates CSS output on its own,
|
|
20
|
+
* without being explicitly used, will output that CSS in every
|
|
21
|
+
* single component, increasing the size of the production build.
|
|
22
|
+
* Avoid that unless there's very good reason for it!
|
|
23
|
+
*/
|
|
24
|
+
:host {
|
|
25
|
+
--mdc-theme-primary: var(
|
|
26
|
+
--lime-primary-color,
|
|
27
|
+
rgb(var(--color-teal-default))
|
|
28
|
+
);
|
|
29
|
+
--mdc-theme-secondary: var(
|
|
30
|
+
--lime-secondary-color,
|
|
31
|
+
rgb(var(--contrast-1100))
|
|
32
|
+
);
|
|
33
|
+
--mdc-theme-on-primary: var(
|
|
34
|
+
--lime-on-primary-color,
|
|
35
|
+
rgb(var(--contrast-100))
|
|
36
|
+
);
|
|
37
|
+
--mdc-theme-on-secondary: var(
|
|
38
|
+
--lime-on-secondary-color,
|
|
39
|
+
rgb(var(--contrast-100))
|
|
40
|
+
);
|
|
41
|
+
--mdc-theme-text-disabled-on-background: var(
|
|
42
|
+
--lime-text-disabled-on-background-color,
|
|
43
|
+
rgba(var(--contrast-1700), 0.38)
|
|
44
|
+
);
|
|
45
|
+
--mdc-theme-text-primary-on-background: var(
|
|
46
|
+
--lime-text-primary-on-background-color,
|
|
47
|
+
rgba(var(--contrast-1700), 0.87)
|
|
48
|
+
);
|
|
49
|
+
--mdc-theme-text-secondary-on-background: var(
|
|
50
|
+
--lime-text-secondary-on-background-color,
|
|
51
|
+
rgba(var(--contrast-1700), 0.54)
|
|
52
|
+
);
|
|
53
|
+
--mdc-theme-error: var(
|
|
54
|
+
--lime-error-background-color,
|
|
55
|
+
rgb(var(--color-red-dark))
|
|
56
|
+
);
|
|
57
|
+
--lime-error-text-color: rgb(var(--color-red-darker));
|
|
58
|
+
--mdc-theme-surface: var(
|
|
59
|
+
--lime-surface-background-color,
|
|
60
|
+
rgb(var(--contrast-100))
|
|
61
|
+
);
|
|
62
|
+
--mdc-theme-on-surface: var(
|
|
63
|
+
--lime-on-surface-color,
|
|
64
|
+
rgb(var(--contrast-1500))
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.lime-empty-value-for-readonly {
|
|
69
|
+
z-index: 1;
|
|
70
|
+
position: absolute;
|
|
71
|
+
top: 0.875rem;
|
|
72
|
+
left: 1rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.lime-looks-like-input-value {
|
|
76
|
+
line-height: 1.75rem;
|
|
77
|
+
-moz-osx-font-smoothing: grayscale;
|
|
78
|
+
-webkit-font-smoothing: antialiased;
|
|
79
|
+
color: rgba(var(--contrast-1400), 1);
|
|
80
|
+
font-size: 0.875rem;
|
|
81
|
+
font-weight: 400;
|
|
82
|
+
letter-spacing: 0.009375em;
|
|
83
|
+
}
|
|
84
|
+
.mdc-text-field--disabled .lime-looks-like-input-value {
|
|
85
|
+
cursor: not-allowed;
|
|
86
|
+
opacity: 0.4;
|
|
87
|
+
}
|
|
88
|
+
|
|
2
89
|
:host(limel-text-editor) {
|
|
3
90
|
display: flex;
|
|
4
91
|
flex-direction: column;
|
|
5
92
|
width: 100%;
|
|
93
|
+
position: relative;
|
|
6
94
|
}
|
|
7
95
|
|
|
8
96
|
fieldset {
|
|
@@ -32,6 +32,9 @@ export class TextEditor {
|
|
|
32
32
|
return (h("fieldset", { disabled: this.readonly || this.disabled }, this.renderLabel(), this.renderEditor()));
|
|
33
33
|
}
|
|
34
34
|
renderEditor() {
|
|
35
|
+
if (this.readonly && !this.value) {
|
|
36
|
+
return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
|
|
37
|
+
}
|
|
35
38
|
if (this.readonly) {
|
|
36
39
|
return h("limel-markdown", { value: this.value });
|
|
37
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,UAAU;;
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,UAAU;;IAkGX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EAzCK,MAAM;IACT,OAAO,CACH,gBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MAC7C,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,YAAY,EAAE,CACb,CACd,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,kBAAS,IAAI,CAAC,KAAK,CAAU,CAAC;EACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return (\n <fieldset disabled={this.readonly || this.disabled}>\n {this.renderLabel()}\n {this.renderEditor()}\n </fieldset>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <legend>{this.label}</legend>;\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -43600,7 +43600,6 @@ const allowedCssProperties = [
|
|
|
43600
43600
|
'color',
|
|
43601
43601
|
'font-style',
|
|
43602
43602
|
'font-weight',
|
|
43603
|
-
'height',
|
|
43604
43603
|
'text-decoration-color',
|
|
43605
43604
|
'text-decoration-line',
|
|
43606
43605
|
'text-decoration-skip-ink',
|
|
@@ -43698,7 +43697,7 @@ async function markdownToHTML(text, options) {
|
|
|
43698
43697
|
.use(rehypeRaw)
|
|
43699
43698
|
.use(rehypeSanitize, Object.assign(Object.assign({}, defaultSchema), {
|
|
43700
43699
|
// Allow the `style` attribute on all elements
|
|
43701
|
-
attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { '*': ['
|
|
43700
|
+
attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { '*': ['style', 'width'] }) }))
|
|
43702
43701
|
.use(() => {
|
|
43703
43702
|
return (tree) => {
|
|
43704
43703
|
// Run the sanitizeStyle function on all elements, to sanitize
|