@limetech/lime-elements 37.64.0 → 37.64.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 +17 -0
- package/dist/cjs/limel-action-bar_4.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-dialog.cjs.entry.js +2 -6
- package/dist/cjs/limel-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-markdown.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +1 -1
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/cjs/{markdown-parser-4b5e23e2.js → markdown-parser-ba7cc71e.js} +8 -3
- package/dist/cjs/{markdown-parser-4b5e23e2.js.map → markdown-parser-ba7cc71e.js.map} +1 -1
- package/dist/collection/components/action-bar/action-bar.js +1 -1
- package/dist/collection/components/action-bar/action-bar.js.map +1 -1
- package/dist/collection/components/dialog/dialog.css +5 -0
- package/dist/collection/components/dialog/dialog.js +1 -5
- package/dist/collection/components/dialog/dialog.js.map +1 -1
- package/dist/collection/components/markdown/markdown-parser.js +7 -2
- package/dist/collection/components/markdown/markdown-parser.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js +5 -2
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.js +5 -2
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-action-bar_4.entry.js.map +1 -1
- package/dist/esm/limel-dialog.entry.js +2 -6
- package/dist/esm/limel-dialog.entry.js.map +1 -1
- package/dist/esm/limel-markdown.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/esm/{markdown-parser-18863266.js → markdown-parser-3c0af898.js} +8 -3
- package/dist/esm/{markdown-parser-18863266.js.map → markdown-parser-3c0af898.js.map} +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-ca3ddffb.js → p-086509a5.js} +2 -2
- package/dist/lime-elements/p-086509a5.js.map +1 -0
- package/dist/lime-elements/{p-65ddae59.entry.js → p-2ab02bd9.entry.js} +2 -2
- package/dist/lime-elements/{p-65ddae59.entry.js.map → p-2ab02bd9.entry.js.map} +1 -1
- package/dist/lime-elements/{p-02e9b8ce.entry.js → p-4b7ea1b9.entry.js} +2 -2
- package/dist/lime-elements/p-4b7ea1b9.entry.js.map +1 -0
- package/dist/lime-elements/p-6c1c51bd.entry.js.map +1 -1
- package/dist/lime-elements/p-d9b7a208.entry.js.map +1 -1
- package/dist/lime-elements/{p-6b5743be.entry.js → p-da20ff72.entry.js} +2 -2
- package/dist/types/components/action-bar/action-bar.d.ts +1 -1
- package/dist/types/components/dialog/dialog.d.ts +0 -1
- package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts +3 -1
- package/dist/types/components/text-editor/text-editor.d.ts +3 -1
- package/dist/types/components.d.ts +16 -8
- package/package.json +2 -2
- package/dist/lime-elements/p-02e9b8ce.entry.js.map +0 -1
- package/dist/lime-elements/p-ca3ddffb.js.map +0 -1
- /package/dist/lime-elements/{p-6b5743be.entry.js.map → p-da20ff72.entry.js.map} +0 -0
|
@@ -18,7 +18,7 @@ import { isItem } from './isItem';
|
|
|
18
18
|
* but its primary goal remains consistent—to
|
|
19
19
|
* empower users to interact with the software and perform desired actions effortlessly.
|
|
20
20
|
*
|
|
21
|
-
* @exampleComponent limel-example-action-bar
|
|
21
|
+
* @exampleComponent limel-example-action-bar-basic
|
|
22
22
|
* @exampleComponent limel-example-action-bar-overflow-menu
|
|
23
23
|
* @exampleComponent limel-example-action-bar-selected-item
|
|
24
24
|
* @exampleComponent limel-example-action-bar-colors
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.firstRender = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n"]}
|
|
@@ -794,6 +794,11 @@ slot[name=button] {
|
|
|
794
794
|
justify-content: flex-end;
|
|
795
795
|
}
|
|
796
796
|
|
|
797
|
+
footer.mdc-dialog__actions {
|
|
798
|
+
min-height: unset;
|
|
799
|
+
padding: 0.375rem;
|
|
800
|
+
}
|
|
801
|
+
|
|
797
802
|
@media screen and (max-width: 760px) {
|
|
798
803
|
slot[name=button] {
|
|
799
804
|
flex-direction: column-reverse;
|
|
@@ -35,7 +35,6 @@ import { createRandomString } from '../../util/random-string';
|
|
|
35
35
|
*/
|
|
36
36
|
export class Dialog {
|
|
37
37
|
constructor() {
|
|
38
|
-
this.showFooter = true;
|
|
39
38
|
this.heading = undefined;
|
|
40
39
|
this.fullscreen = false;
|
|
41
40
|
this.open = false;
|
|
@@ -52,7 +51,6 @@ export class Dialog {
|
|
|
52
51
|
}
|
|
53
52
|
componentWillLoad() {
|
|
54
53
|
this.id = createRandomString();
|
|
55
|
-
this.showFooter = !!this.host.querySelector('[slot="button"]');
|
|
56
54
|
}
|
|
57
55
|
componentDidLoad() {
|
|
58
56
|
this.initialize();
|
|
@@ -134,9 +132,7 @@ export class Dialog {
|
|
|
134
132
|
return null;
|
|
135
133
|
}
|
|
136
134
|
renderFooter() {
|
|
137
|
-
|
|
138
|
-
return (h("footer", { class: "mdc-dialog__actions" }, h("slot", { name: "button" })));
|
|
139
|
-
}
|
|
135
|
+
return (h("footer", { class: "mdc-dialog__actions" }, h("slot", { name: "button" })));
|
|
140
136
|
}
|
|
141
137
|
setClosingActions() {
|
|
142
138
|
this.mdcDialog.scrimClickAction = '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DialogHeading, ClosingActions } from './dialog.types';\nimport { MDCDialog } from '@material/dialog';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n *\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-heading-actions\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot header-actions - The dialog header buttons\n * @slot button - The dialog buttons\n */\n@Component({\n tag: 'limel-dialog',\n shadow: true,\n styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n /**\n * The heading for the dialog, if any.\n */\n @Prop()\n public heading: string | DialogHeading;\n\n /**\n * Set to `true` to make the dialog \"fullscreen\".\n */\n @Prop({ reflect: true })\n public fullscreen = false;\n\n /**\n * `true` if the dialog is open, `false` otherwise.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines which action triggers a close-event.\n */\n @Prop({ reflect: true })\n public closingActions: ClosingActions = {\n escapeKey: true,\n scrimClick: true,\n };\n /**\n * Emitted when the dialog is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when the dialog is in the process of being closed.\n */\n @Event()\n private closing: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelDialogElement;\n\n private mdcDialog: MDCDialog;\n\n private id: string;\n\n private showFooter = true;\n\n constructor() {\n this.handleMdcOpened = this.handleMdcOpened.bind(this);\n this.handleMdcClosed = this.handleMdcClosed.bind(this);\n this.handleMdcClosing = this.handleMdcClosing.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.id = createRandomString();\n this.showFooter = !!this.host.querySelector('[slot=\"button\"]');\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n if (!element) {\n return;\n }\n\n this.mdcDialog = new MDCDialog(element);\n if (this.open) {\n this.mdcDialog.open();\n }\n\n this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n this.setClosingActions();\n }\n\n public disconnectedCallback() {\n this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n this.mdcDialog.destroy();\n }\n\n public render() {\n return (\n <div\n class={{\n 'mdc-dialog': true,\n 'full-screen': !!this.fullscreen,\n }}\n role=\"alertdialog\"\n aria-modal=\"true\"\n aria-labelledby={'limel-dialog-title-' + this.id}\n aria-describedby={'limel-dialog-content-' + this.id}\n >\n <input hidden={true} id=\"initialFocusEl\" />\n <div class=\"mdc-dialog__container\">\n <div class=\"mdc-dialog__surface\">\n {/*\n The `initialFocusElement` below is needed to make\n focus trapping work. At the time of writing, the\n focusable elements inside the slots are not\n detected, so we supply our own hidden element for\n the focus trap to use. Read more here:\n https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n */}\n <input type=\"button\" id=\"initialFocusElement\" />\n {this.renderHeading()}\n <div\n class=\"mdc-dialog__content\"\n id={'limel-dialog-content-' + this.id}\n >\n <slot />\n </div>\n {this.renderFooter()}\n </div>\n </div>\n <div class=\"mdc-dialog__scrim\" />\n </div>\n );\n }\n\n @Watch('open')\n protected watchHandler(newValue: boolean, oldValue: boolean) {\n if (oldValue === newValue) {\n return;\n }\n\n if (!this.mdcDialog) {\n return;\n }\n\n if (newValue) {\n this.mdcDialog.open();\n } else {\n this.mdcDialog.close();\n }\n }\n\n @Watch('closingActions')\n protected closingActionsChanged(\n newValue: ClosingActions,\n oldValue: ClosingActions,\n ) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.setClosingActions();\n }\n\n private handleMdcOpened() {\n // When the opening-animation has completed, dispatch a\n // resize-event so that any content that depends on\n // javascript for layout has a chance to update to the\n // final layout of the dialog. /Ads\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n }\n\n private handleMdcClosed() {\n if (this.open) {\n this.close.emit();\n }\n\n this.open = false;\n }\n\n private handleMdcClosing() {\n this.closing.emit();\n }\n\n private isBadgeHeading(\n heading: string | DialogHeading,\n ): heading is DialogHeading {\n return typeof heading === 'object' && !!heading.title && !!heading.icon;\n }\n\n private renderHeading() {\n if (this.isBadgeHeading(this.heading)) {\n const { title, subtitle, supportingText, icon } = this.heading;\n\n return (\n <limel-header\n icon={icon}\n heading={title}\n subheading={subtitle}\n supportingText={supportingText}\n >\n <slot name=\"header-actions\" slot=\"actions\" />\n </limel-header>\n );\n } else if (typeof this.heading === 'string') {\n return <limel-header heading={this.heading}></limel-header>;\n }\n\n return null;\n }\n\n private renderFooter() {\n if (this.showFooter) {\n return (\n <footer class=\"mdc-dialog__actions\">\n <slot name=\"button\" />\n </footer>\n );\n }\n }\n\n private setClosingActions() {\n this.mdcDialog.scrimClickAction = '';\n if (this.closingActions.scrimClick) {\n this.mdcDialog.scrimClickAction = 'close';\n }\n\n this.mdcDialog.escapeKeyAction = '';\n if (this.closingActions.escapeKey) {\n this.mdcDialog.escapeKeyAction = 'close';\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,MAAM;EA+Cf;;sBApCoB,KAAK;gBAMX,KAAK;0BAMqB;MACpC,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;KACnB;IAsBG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5D;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;EACnC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAClE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;IAED,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAElE,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAClE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACpE,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,CACH,WACI,KAAK,EAAE;QACH,YAAY,EAAE,IAAI;QAClB,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACnC,EACD,IAAI,EAAC,aAAa,gBACP,MAAM,qBACA,qBAAqB,GAAG,IAAI,CAAC,EAAE,sBAC9B,uBAAuB,GAAG,IAAI,CAAC,EAAE;MAEnD,aAAO,MAAM,EAAE,IAAI,EAAE,EAAE,EAAC,gBAAgB,GAAG;MAC3C,WAAK,KAAK,EAAC,uBAAuB;QAC9B,WAAK,KAAK,EAAC,qBAAqB;UAS5B,aAAO,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,qBAAqB,GAAG;UAC/C,IAAI,CAAC,aAAa,EAAE;UACrB,WACI,KAAK,EAAC,qBAAqB,EAC3B,EAAE,EAAE,uBAAuB,GAAG,IAAI,CAAC,EAAE;YAErC,eAAQ,CACN;UACL,IAAI,CAAC,YAAY,EAAE,CAClB,CACJ;MACN,WAAK,KAAK,EAAC,mBAAmB,GAAG,CAC/B,CACT,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB,EAAE,QAAiB;IACvD,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACvB,OAAO;KACV;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,QAAQ,EAAE;MACV,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACzB;SAAM;MACH,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;KAC1B;EACL,CAAC;EAGS,qBAAqB,CAC3B,QAAwB,EACxB,QAAwB;IAExB,IAAI,OAAO,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAE;MAC7B,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEO,eAAe;IACnB,uDAAuD;IACvD,mDAAmD;IACnD,sDAAsD;IACtD,mCAAmC;IACnC,MAAM,iBAAiB,GAAG,GAAG,CAAC;IAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;EACvD,CAAC;EAEO,eAAe;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;IAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;EACtB,CAAC;EAEO,gBAAgB;IACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACxB,CAAC;EAEO,cAAc,CAClB,OAA+B;IAE/B,OAAO,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;EAC5E,CAAC;EAEO,aAAa;IACjB,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACnC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;MAE/D,OAAO,CACH,oBACI,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,cAAc;QAE9B,YAAM,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,SAAS,GAAG,CAClC,CAClB,CAAC;KACL;SAAM,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;MACzC,OAAO,oBAAc,OAAO,EAAE,IAAI,CAAC,OAAO,GAAiB,CAAC;KAC/D;IAED,OAAO,IAAI,CAAC;EAChB,CAAC;EAEO,YAAY;IAChB,OAAO,CACH,cAAQ,KAAK,EAAC,qBAAqB;MAC/B,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,CACZ,CAAC;EACN,CAAC;EAEO,iBAAiB;IACrB,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,EAAE,CAAC;IACrC,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;MAChC,IAAI,CAAC,SAAS,CAAC,gBAAgB,GAAG,OAAO,CAAC;KAC7C;IAED,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,EAAE,CAAC;IACpC,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;MAC/B,IAAI,CAAC,SAAS,CAAC,eAAe,GAAG,OAAO,CAAC;KAC5C;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { DialogHeading, ClosingActions } from './dialog.types';\nimport { MDCDialog } from '@material/dialog';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n *\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-heading-actions\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot header-actions - The dialog header buttons\n * @slot button - The dialog buttons\n */\n@Component({\n tag: 'limel-dialog',\n shadow: true,\n styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n /**\n * The heading for the dialog, if any.\n */\n @Prop()\n public heading: string | DialogHeading;\n\n /**\n * Set to `true` to make the dialog \"fullscreen\".\n */\n @Prop({ reflect: true })\n public fullscreen = false;\n\n /**\n * `true` if the dialog is open, `false` otherwise.\n */\n @Prop({ mutable: true, reflect: true })\n public open = false;\n\n /**\n * Defines which action triggers a close-event.\n */\n @Prop({ reflect: true })\n public closingActions: ClosingActions = {\n escapeKey: true,\n scrimClick: true,\n };\n /**\n * Emitted when the dialog is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private close: EventEmitter<void>;\n\n /**\n * Emitted when the dialog is in the process of being closed.\n */\n @Event()\n private closing: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelDialogElement;\n\n private mdcDialog: MDCDialog;\n\n private id: string;\n\n constructor() {\n this.handleMdcOpened = this.handleMdcOpened.bind(this);\n this.handleMdcClosed = this.handleMdcClosed.bind(this);\n this.handleMdcClosing = this.handleMdcClosing.bind(this);\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n this.id = createRandomString();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n if (!element) {\n return;\n }\n\n this.mdcDialog = new MDCDialog(element);\n if (this.open) {\n this.mdcDialog.open();\n }\n\n this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n this.setClosingActions();\n }\n\n public disconnectedCallback() {\n this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n this.mdcDialog.destroy();\n }\n\n public render() {\n return (\n <div\n class={{\n 'mdc-dialog': true,\n 'full-screen': !!this.fullscreen,\n }}\n role=\"alertdialog\"\n aria-modal=\"true\"\n aria-labelledby={'limel-dialog-title-' + this.id}\n aria-describedby={'limel-dialog-content-' + this.id}\n >\n <input hidden={true} id=\"initialFocusEl\" />\n <div class=\"mdc-dialog__container\">\n <div class=\"mdc-dialog__surface\">\n {/*\n The `initialFocusElement` below is needed to make\n focus trapping work. At the time of writing, the\n focusable elements inside the slots are not\n detected, so we supply our own hidden element for\n the focus trap to use. Read more here:\n https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n */}\n <input type=\"button\" id=\"initialFocusElement\" />\n {this.renderHeading()}\n <div\n class=\"mdc-dialog__content\"\n id={'limel-dialog-content-' + this.id}\n >\n <slot />\n </div>\n {this.renderFooter()}\n </div>\n </div>\n <div class=\"mdc-dialog__scrim\" />\n </div>\n );\n }\n\n @Watch('open')\n protected watchHandler(newValue: boolean, oldValue: boolean) {\n if (oldValue === newValue) {\n return;\n }\n\n if (!this.mdcDialog) {\n return;\n }\n\n if (newValue) {\n this.mdcDialog.open();\n } else {\n this.mdcDialog.close();\n }\n }\n\n @Watch('closingActions')\n protected closingActionsChanged(\n newValue: ClosingActions,\n oldValue: ClosingActions,\n ) {\n if (isEqual(newValue, oldValue)) {\n return;\n }\n\n this.setClosingActions();\n }\n\n private handleMdcOpened() {\n // When the opening-animation has completed, dispatch a\n // resize-event so that any content that depends on\n // javascript for layout has a chance to update to the\n // final layout of the dialog. /Ads\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n }\n\n private handleMdcClosed() {\n if (this.open) {\n this.close.emit();\n }\n\n this.open = false;\n }\n\n private handleMdcClosing() {\n this.closing.emit();\n }\n\n private isBadgeHeading(\n heading: string | DialogHeading,\n ): heading is DialogHeading {\n return typeof heading === 'object' && !!heading.title && !!heading.icon;\n }\n\n private renderHeading() {\n if (this.isBadgeHeading(this.heading)) {\n const { title, subtitle, supportingText, icon } = this.heading;\n\n return (\n <limel-header\n icon={icon}\n heading={title}\n subheading={subtitle}\n supportingText={supportingText}\n >\n <slot name=\"header-actions\" slot=\"actions\" />\n </limel-header>\n );\n } else if (typeof this.heading === 'string') {\n return <limel-header heading={this.heading}></limel-header>;\n }\n\n return null;\n }\n\n private renderFooter() {\n return (\n <footer class=\"mdc-dialog__actions\">\n <slot name=\"button\" />\n </footer>\n );\n }\n\n private setClosingActions() {\n this.mdcDialog.scrimClickAction = '';\n if (this.closingActions.scrimClick) {\n this.mdcDialog.scrimClickAction = 'close';\n }\n\n this.mdcDialog.escapeKeyAction = '';\n if (this.closingActions.escapeKey) {\n this.mdcDialog.escapeKeyAction = 'close';\n }\n }\n}\n"]}
|
|
@@ -47,13 +47,18 @@ export async function markdownToHTML(text, options) {
|
|
|
47
47
|
}
|
|
48
48
|
function getWhiteList(allowedComponents) {
|
|
49
49
|
var _a, _b;
|
|
50
|
+
const defaultSchemaClone = [...((_a = defaultSchema.attributes['*']) !== null && _a !== void 0 ? _a : [])];
|
|
51
|
+
const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {
|
|
52
|
+
return attr !== 'height';
|
|
53
|
+
});
|
|
54
|
+
asteriskAttributeWhitelist.push('style');
|
|
50
55
|
const whitelist = Object.assign(Object.assign({}, defaultSchema), { tagNames: [
|
|
51
56
|
...(defaultSchema.tagNames || []),
|
|
52
57
|
...allowedComponents.map((component) => component.tagName),
|
|
53
58
|
], attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { p: [
|
|
54
|
-
...((
|
|
59
|
+
...((_b = defaultSchema.attributes.p) !== null && _b !== void 0 ? _b : []),
|
|
55
60
|
['className', 'MsoNormal'],
|
|
56
|
-
], '*':
|
|
61
|
+
], '*': asteriskAttributeWhitelist }) });
|
|
57
62
|
for (const component of allowedComponents) {
|
|
58
63
|
whitelist.attributes[component.tagName] = component.attributes;
|
|
59
64
|
}
|
|
@@ -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;AAKjD;;;;;;;;;;;;;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,kBAAkB,EAAE,MAAM,CAAC,CAAC;GACnD;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,oBACZ,YAAY,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,EAAE,CAAC,EAC3C;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,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;AAED,SAAS,YAAY,CAAC,iBAAkC;;EACpD,MAAM,SAAS,mCACR,aAAa,KAChB,QAAQ,EAAE;MACN,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;MACjC,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;KAC7D,EACD,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,CAAC,EAAE;QACC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE,CAAC;QACrC,CAAC,WAAW,EAAE,WAAW,CAAC;OAC7B,EACD,GAAG,EAAE,
|
|
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;AAKjD;;;;;;;;;;;;;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,kBAAkB,EAAE,MAAM,CAAC,CAAC;GACnD;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,oBACZ,YAAY,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,mCAAI,EAAE,CAAC,EAC3C;KACD,GAAG,CAAC,GAAG,EAAE;IACN,OAAO,CAAC,IAAU,EAAE,EAAE;MAClB,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;AAED,SAAS,YAAY,CAAC,iBAAkC;;EACpD,MAAM,kBAAkB,GAAG,CAAC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC,mCAAI,EAAE,CAAC,CAAC,CAAC;EACtE,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;IAClE,OAAO,IAAI,KAAK,QAAQ,CAAC;EAC7B,CAAC,CAAC,CAAC;EACH,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAEzC,MAAM,SAAS,mCACR,aAAa,KAChB,QAAQ,EAAE;MACN,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;MACjC,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC;KAC7D,EACD,UAAU,kCACH,aAAa,CAAC,UAAU,KAC3B,CAAC,EAAE;QACC,GAAG,CAAC,MAAA,aAAa,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE,CAAC;QACrC,CAAC,WAAW,EAAE,WAAW,CAAC;OAC7B,EACD,GAAG,EAAE,0BAA0B,MAEtC,CAAC;EAEF,KAAK,MAAM,SAAS,IAAI,iBAAiB,EAAE;IACvC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC;GAClE;EAED,OAAO,SAAS,CAAC;AACrB,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';\nimport { Node } from 'unist';\nimport { Schema } from 'rehype-sanitize/lib';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\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 ...getWhiteList(options?.whitelist ?? []),\n })\n .use(() => {\n return (tree: Node) => {\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\nfunction getWhiteList(allowedComponents: CustomElement[]): Schema {\n const defaultSchemaClone = [...(defaultSchema.attributes['*'] ?? [])];\n const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {\n return attr !== 'height';\n });\n asteriskAttributeWhitelist.push('style');\n\n const whitelist: Schema = {\n ...defaultSchema,\n tagNames: [\n ...(defaultSchema.tagNames || []),\n ...allowedComponents.map((component) => component.tagName),\n ],\n attributes: {\n ...defaultSchema.attributes,\n p: [\n ...(defaultSchema.attributes.p ?? []),\n ['className', 'MsoNormal'],\n ], // Allow the class 'MsoNormal' on <p> elements\n '*': asteriskAttributeWhitelist,\n },\n };\n\n for (const component of allowedComponents) {\n whitelist.attributes[component.tagName] = component.attributes;\n }\n\n return whitelist;\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 whitelist?: CustomElement[];\n}\n"]}
|
|
@@ -355,9 +355,12 @@ export class ProsemirrorAdapter {
|
|
|
355
355
|
"docs": {
|
|
356
356
|
"tags": [{
|
|
357
357
|
"name": "private",
|
|
358
|
-
"text":
|
|
358
|
+
"text": undefined
|
|
359
|
+
}, {
|
|
360
|
+
"name": "alpha",
|
|
361
|
+
"text": undefined
|
|
359
362
|
}],
|
|
360
|
-
"text": ""
|
|
363
|
+
"text": "set to private to avoid usage while under development"
|
|
361
364
|
},
|
|
362
365
|
"defaultValue": "[]"
|
|
363
366
|
}
|
package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { EditorState, Transaction } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { keymap } from 'prosemirror-keymap';\nimport { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { MenuCommandFactory } from './menu/menu-commands';\nimport { menuTranslationIDs, getTextEditorMenuItems } from './menu/menu-items';\nimport { ContentTypeConverter } from '../utils/content-type-converter';\nimport { MarkdownConverter } from '../utils/markdown-converter';\nimport { HTMLConverter } from '../utils/html-converter';\nimport {\n EditorMenuTypes,\n EditorTextLink,\n editorMenuTypesArray,\n} from './menu/types';\nimport translate from 'src/global/translations';\nimport { createRandomString } from 'src/util/random-string';\nimport { isItem } from 'src/components/action-bar/isItem';\nimport { cloneDeep, debounce } from 'lodash-es';\nimport { Languages } from '../../date-picker/date.types';\nimport { strikethrough } from './menu/menu-schema-extender';\nimport {\n EditorLinkMenuEventDetail,\n createLinkPlugin,\n} from './plugins/link-plugin';\nimport { createImageRemoverPlugin } from './plugins/image-remover-plugin';\nimport { createMenuStateTrackingPlugin } from './plugins/menu-state-tracking-plugin';\nimport { createActionBarInteractionPlugin } from './plugins/menu-action-interaction-plugin';\nimport { CustomElement } from '../../../global/shared-types/custom-element.types';\nimport { createNodeSpec } from '../utils/plugin-factory';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-prosemirror-adapter',\n shadow: true,\n styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n /**\n * The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * The value of the editor, expected to be markdown\n */\n @Prop()\n public value: string;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages;\n\n /**\n * @private\n * set to private to avoid usage while under development\n */\n @Prop()\n plugins: CustomElement[] = [];\n\n @Element()\n private host: HTMLLimelTextEditorElement;\n\n private portalId: string;\n\n @State()\n private view: EditorView;\n\n @State()\n private actionBarItems: Array<\n ActionBarItem<EditorMenuTypes> | ListSeparator\n > = [];\n\n @State()\n private link: EditorTextLink = { href: '' };\n\n /**\n * Open state of the dialog\n */\n @State()\n public isLinkMenuOpen: boolean = false;\n\n private menuCommandFactory: MenuCommandFactory;\n private schema: Schema;\n private contentConverter: ContentTypeConverter;\n private actionBarElement: HTMLElement;\n private lastEmittedValue: string;\n private changeWaiting = false;\n\n /**\n * Used to stop change event emitting as result of getting updated value from consumer\n */\n private suppressChangeEvent = false;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n private change: EventEmitter<string>;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n @Watch('value')\n protected watchValue(newValue: string) {\n if (!this.view) {\n return;\n }\n\n if (this.changeWaiting) {\n // A change is pending; do not update the editor's content\n return;\n }\n\n const currentContent = this.contentConverter.serialize(\n this.view,\n this.schema,\n );\n\n // If the new value is the same as the current content, do nothing\n if (newValue === currentContent) {\n return;\n }\n\n // Update the editor's content with the new value\n this.updateView(newValue);\n }\n\n public componentWillLoad() {\n this.getActionBarItems();\n this.setupContentConverter();\n }\n\n public componentDidLoad() {\n // Stencil complains loudly about triggering rerenders in\n // componentDidLoad, but we have to, so we're using setTimeout to\n // suppress the warning. /Ads\n setTimeout(() => {\n this.initializeTextEditor();\n }, 0);\n }\n\n public connectedCallback() {\n if (this.view) {\n this.initializeTextEditor();\n }\n\n this.host.addEventListener(\n 'open-editor-link-menu',\n this.handleOpenLinkMenu,\n );\n }\n\n public disconnectedCallback() {\n this.host.removeEventListener(\n 'open-editor-link-menu',\n this.handleOpenLinkMenu,\n );\n this.view?.dom?.removeEventListener('blur', this.handleBlur);\n this.view?.destroy();\n }\n\n public render() {\n return [\n <div id=\"editor\" />,\n <div class=\"toolbar\">\n <limel-action-bar\n ref={(el) => (this.actionBarElement = el)}\n accessibleLabel=\"Toolbar\"\n actions={this.actionBarItems}\n onItemSelected={this.handleActionBarItem}\n />\n </div>,\n this.renderLinkMenu(),\n ];\n }\n\n renderLinkMenu() {\n if (!this.isLinkMenuOpen) {\n return;\n }\n\n return (\n <limel-portal\n containerId={this.portalId}\n visible={this.isLinkMenuOpen}\n openDirection=\"top\"\n inheritParentWidth={true}\n anchor={this.actionBarElement}\n >\n <limel-text-editor-link-menu\n link={this.link}\n isOpen={this.isLinkMenuOpen}\n onLinkChange={this.handleLinkChange}\n onCancel={this.handleCancelLinkMenu}\n onSave={this.handleSaveLinkMenu}\n />\n </limel-portal>\n );\n }\n\n private setupContentConverter() {\n if (this.contentType === 'markdown') {\n this.contentConverter = new MarkdownConverter(this.plugins);\n } else if (this.contentType === 'html') {\n this.contentConverter = new HTMLConverter();\n } else {\n throw new Error(\n `Unsupported content type: ${this.contentType}. Only 'markdown' and 'html' are supported.`,\n );\n }\n }\n\n private getActionBarItems = () => {\n this.actionBarItems = getTextEditorMenuItems().map(\n this.getTranslatedItem,\n );\n };\n\n private getTranslatedItem = (item) => {\n const newItem = cloneDeep(item);\n\n if (isItem(item)) {\n const translationId = menuTranslationIDs[item.value];\n\n if (translationId) {\n newItem.text = translate.get(translationId, this.language);\n }\n }\n\n return newItem;\n };\n\n private async initializeTextEditor() {\n this.schema = this.initializeSchema();\n const initialDoc = await this.parseInitialContent();\n this.menuCommandFactory = new MenuCommandFactory(this.schema);\n this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: this.createEditorState(initialDoc),\n dispatchTransaction: this.handleTransaction,\n },\n );\n\n this.view.dom.addEventListener('blur', this.handleBlur);\n\n if (this.value) {\n this.updateView(this.value);\n }\n }\n\n private initializeSchema() {\n let nodes = schema.spec.nodes;\n\n this.plugins.forEach((plugin) => {\n const newNodeSpec = createNodeSpec(plugin);\n const nodeName = plugin.tagName;\n\n nodes = nodes.append({ [nodeName]: newNodeSpec });\n });\n nodes = addListNodes(nodes, 'paragraph block*', 'block');\n\n return new Schema({\n nodes: nodes,\n marks: schema.spec.marks.append({\n strikethrough: strikethrough,\n }),\n });\n }\n\n private async parseInitialContent() {\n const initialContentElement = document.createElement('div');\n\n if (this.value) {\n initialContentElement.innerHTML =\n await this.contentConverter.parseAsHTML(\n this.value,\n this.schema,\n );\n } else {\n initialContentElement.innerHTML = '<p></p>';\n }\n\n return DOMParser.fromSchema(this.schema).parse(initialContentElement);\n }\n\n private createEditorState(initialDoc) {\n return EditorState.create({\n doc: initialDoc,\n plugins: [\n ...exampleSetup({ schema: this.schema, menuBar: false }),\n keymap(this.menuCommandFactory.buildKeymap()),\n createLinkPlugin(this.handleNewLinkSelection),\n createImageRemoverPlugin(),\n createMenuStateTrackingPlugin(\n editorMenuTypesArray,\n this.menuCommandFactory,\n this.updateActiveActionBarItems,\n ),\n createActionBarInteractionPlugin(this.menuCommandFactory),\n ],\n });\n }\n\n private updateActiveActionBarItems = (\n activeTypes: Record<EditorMenuTypes, boolean>,\n ) => {\n const newItems = getTextEditorMenuItems().map((item) => {\n if (isItem(item)) {\n return {\n ...item,\n selected: activeTypes[item.value],\n };\n }\n\n return item;\n });\n\n this.actionBarItems = newItems;\n };\n\n private async updateView(content: string) {\n this.suppressChangeEvent = true;\n const html = await this.contentConverter.parseAsHTML(\n content,\n this.schema,\n );\n const prosemirrorDOMparser = DOMParser.fromSchema(\n this.view.state.schema,\n );\n const domParser = new window.DOMParser();\n const doc = domParser.parseFromString(html, 'text/html');\n const prosemirrorDoc = prosemirrorDOMparser.parse(doc.body);\n const tr = this.view.state.tr;\n tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);\n this.view.dispatch(tr);\n this.suppressChangeEvent = false;\n }\n\n private handleTransaction = (transaction: Transaction) => {\n const newState = this.view.state.apply(transaction);\n this.view.updateState(newState);\n\n if (this.suppressChangeEvent || transaction.getMeta('pointer')) {\n return;\n }\n\n const content = this.contentConverter.serialize(this.view, this.schema);\n\n if (content === this.lastEmittedValue) {\n return;\n }\n\n this.lastEmittedValue = content;\n this.changeWaiting = true;\n this.changeEmitter(content);\n };\n\n private handleActionBarItem = (\n event: CustomEvent<ActionBarItem<EditorMenuTypes>>,\n ) => {\n event.preventDefault();\n event.stopImmediatePropagation();\n const { value } = event.detail;\n\n if (value === EditorMenuTypes.Link) {\n this.isLinkMenuOpen = true;\n\n return;\n }\n\n const actionBarEvent = new CustomEvent('actionBarItemClick', {\n detail: event.detail,\n });\n this.view.dom.dispatchEvent(actionBarEvent);\n };\n\n private handleCancelLinkMenu = (event: CustomEvent<void>) => {\n event.preventDefault();\n event.stopPropagation();\n\n this.isLinkMenuOpen = false;\n this.link = { text: '', href: '' };\n };\n\n private handleSaveLinkMenu = () => {\n this.isLinkMenuOpen = false;\n\n const saveLinkEvent = new CustomEvent('saveLinkMenu', {\n detail: {\n type: EditorMenuTypes.Link,\n link: this.link,\n },\n });\n this.view.dom.dispatchEvent(saveLinkEvent);\n\n this.link = { href: '' };\n };\n\n private handleLinkChange = (event: CustomEvent<EditorTextLink>) => {\n this.link = event.detail;\n };\n\n public setFocus() {\n this.view?.focus();\n }\n\n private handleNewLinkSelection = (text: string, href: string) => {\n this.link.text = text;\n this.link.href = href;\n };\n\n private handleOpenLinkMenu = (\n event: CustomEvent<EditorLinkMenuEventDetail>,\n ) => {\n event.stopImmediatePropagation();\n const { href, text } = event.detail;\n this.link = { href: href, text: text };\n this.isLinkMenuOpen = true;\n };\n\n private changeEmitter = debounce((value: string) => {\n this.change.emit(value);\n this.changeWaiting = false;\n }, DEBOUNCE_TIMEOUT);\n\n private handleBlur = () => {\n this.changeEmitter.flush();\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"prosemirror-adapter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAe,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EACH,eAAe,EAEf,oBAAoB,GACvB,MAAM,cAAc,CAAC;AACtB,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAEH,gBAAgB,GACnB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAE,6BAA6B,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,EAAE,gCAAgC,EAAE,MAAM,0CAA0C,CAAC;AAE5F,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;;;;;;;;GAQG;AAMH,MAAM,OAAO,kBAAkB;EAsE3B;IAbQ,kBAAa,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACK,wBAAmB,GAAG,KAAK,CAAC;IA0H5B,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,sBAAsB,EAAE,CAAC,GAAG,CAC9C,IAAI,CAAC,iBAAiB,CACzB,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,IAAI,EAAE,EAAE;MACjC,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC;MAEhC,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;QACd,MAAM,aAAa,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErD,IAAI,aAAa,EAAE;UACf,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC9D;OACJ;MAED,OAAO,OAAO,CAAC;IACnB,CAAC,CAAC;IA0EM,+BAA0B,GAAG,CACjC,WAA6C,EAC/C,EAAE;MACA,MAAM,QAAQ,GAAG,sBAAsB,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACnD,IAAI,MAAM,CAAC,IAAI,CAAC,EAAE;UACd,uCACO,IAAI,KACP,QAAQ,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IACnC;SACL;QAED,OAAO,IAAI,CAAC;MAChB,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACnC,CAAC,CAAC;IAoBM,sBAAiB,GAAG,CAAC,WAAwB,EAAE,EAAE;MACrD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;MACpD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;MAEhC,IAAI,IAAI,CAAC,mBAAmB,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;QAC5D,OAAO;OACV;MAED,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;MAExE,IAAI,OAAO,KAAK,IAAI,CAAC,gBAAgB,EAAE;QACnC,OAAO;OACV;MAED,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAC1B,KAAkD,EACpD,EAAE;MACA,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;MAE/B,IAAI,KAAK,KAAK,eAAe,CAAC,IAAI,EAAE;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAE3B,OAAO;OACV;MAED,MAAM,cAAc,GAAG,IAAI,WAAW,CAAC,oBAAoB,EAAE;QACzD,MAAM,EAAE,KAAK,CAAC,MAAM;OACvB,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAChD,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,KAAwB,EAAE,EAAE;MACxD,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAC5B,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IACvC,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAE5B,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE;QAClD,MAAM,EAAE;UACJ,IAAI,EAAE,eAAe,CAAC,IAAI;UAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;SAClB;OACJ,CAAC,CAAC;MACH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;MAE3C,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAkC,EAAE,EAAE;MAC9D,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;IAMM,2BAAsB,GAAG,CAAC,IAAY,EAAE,IAAY,EAAE,EAAE;MAC5D,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IAC1B,CAAC,CAAC;IAEM,uBAAkB,GAAG,CACzB,KAA6C,EAC/C,EAAE;MACA,KAAK,CAAC,wBAAwB,EAAE,CAAC;MACjC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;MACpC,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;MACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC,CAAC;IAEM,kBAAa,GAAG,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE;MAC/C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,gBAAgB,CAAC,CAAC;IAEb,eAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;IAC/B,CAAC,CAAC;uBAzYwC,UAAU;;;mBAqBzB,EAAE;;0BAazB,EAAE;gBAGyB,EAAE,IAAI,EAAE,EAAE,EAAE;0BAMV,KAAK;IAqBlC,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAGS,UAAU,CAAC,QAAgB;IACjC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO;KACV;IAED,IAAI,IAAI,CAAC,aAAa,EAAE;MACpB,0DAA0D;MAC1D,OAAO;KACV;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAClD,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,MAAM,CACd,CAAC;IAEF,kEAAkE;IAClE,IAAI,QAAQ,KAAK,cAAc,EAAE;MAC7B,OAAO;KACV;IAED,iDAAiD;IACjD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,qBAAqB,EAAE,CAAC;EACjC,CAAC;EAEM,gBAAgB;IACnB,yDAAyD;IACzD,iEAAiE;IACjE,6BAA6B;IAC7B,UAAU,CAAC,GAAG,EAAE;MACZ,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChC,CAAC,EAAE,CAAC,CAAC,CAAC;EACV,CAAC;EAEM,iBAAiB;IACpB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;IAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACtB,uBAAuB,EACvB,IAAI,CAAC,kBAAkB,CAC1B,CAAC;EACN,CAAC;EAEM,oBAAoB;;IACvB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CACzB,uBAAuB,EACvB,IAAI,CAAC,kBAAkB,CAC1B,CAAC;IACF,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,0CAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC7D,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,EAAE,CAAC;EACzB,CAAC;EAEM,MAAM;IACT,OAAO;MACH,WAAK,EAAE,EAAC,QAAQ,GAAG;MACnB,WAAK,KAAK,EAAC,SAAS;QAChB,wBACI,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,eAAe,EAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,cAAc,EAAE,IAAI,CAAC,mBAAmB,GAC1C,CACA;MACN,IAAI,CAAC,cAAc,EAAE;KACxB,CAAC;EACN,CAAC;EAED,cAAc;IACV,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,oBACI,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAC,KAAK,EACnB,kBAAkB,EAAE,IAAI,EACxB,MAAM,EAAE,IAAI,CAAC,gBAAgB;MAE7B,mCACI,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,MAAM,EAAE,IAAI,CAAC,kBAAkB,GACjC,CACS,CAClB,CAAC;EACN,CAAC;EAEO,qBAAqB;IACzB,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;MACjC,IAAI,CAAC,gBAAgB,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/D;SAAM,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE;MACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,aAAa,EAAE,CAAC;KAC/C;SAAM;MACH,MAAM,IAAI,KAAK,CACX,6BAA6B,IAAI,CAAC,WAAW,6CAA6C,CAC7F,CAAC;KACL;EACL,CAAC;EAsBO,KAAK,CAAC,oBAAoB;IAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACtC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,GAAG,IAAI,UAAU,CACtB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAC7C;MACI,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;MACzC,mBAAmB,EAAE,IAAI,CAAC,iBAAiB;KAC9C,CACJ,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAExD,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B;EACL,CAAC;EAEO,gBAAgB;IACpB,IAAI,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;IAE9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;MAC5B,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;MAC3C,MAAM,QAAQ,GAAG,MAAM,CAAC,OAAO,CAAC;MAEhC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IACH,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,CAAC,CAAC;IAEzD,OAAO,IAAI,MAAM,CAAC;MACd,KAAK,EAAE,KAAK;MACZ,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC5B,aAAa,EAAE,aAAa;OAC/B,CAAC;KACL,CAAC,CAAC;EACP,CAAC;EAEO,KAAK,CAAC,mBAAmB;IAC7B,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE5D,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,qBAAqB,CAAC,SAAS;QAC3B,MAAM,IAAI,CAAC,gBAAgB,CAAC,WAAW,CACnC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,MAAM,CACd,CAAC;KACT;SAAM;MACH,qBAAqB,CAAC,SAAS,GAAG,SAAS,CAAC;KAC/C;IAED,OAAO,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC;EAC1E,CAAC;EAEO,iBAAiB,CAAC,UAAU;IAChC,OAAO,WAAW,CAAC,MAAM,CAAC;MACtB,GAAG,EAAE,UAAU;MACf,OAAO,EAAE;QACL,GAAG,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;QAC7C,gBAAgB,CAAC,IAAI,CAAC,sBAAsB,CAAC;QAC7C,wBAAwB,EAAE;QAC1B,6BAA6B,CACzB,oBAAoB,EACpB,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,0BAA0B,CAClC;QACD,gCAAgC,CAAC,IAAI,CAAC,kBAAkB,CAAC;OAC5D;KACJ,CAAC,CAAC;EACP,CAAC;EAmBO,KAAK,CAAC,UAAU,CAAC,OAAe;IACpC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;IAChC,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAChD,OAAO,EACP,IAAI,CAAC,MAAM,CACd,CAAC;IACF,MAAM,oBAAoB,GAAG,SAAS,CAAC,UAAU,CAC7C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CACzB,CAAC;IACF,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;IACzC,MAAM,GAAG,GAAG,SAAS,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACzD,MAAM,cAAc,GAAG,oBAAoB,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,EAAE,CAAC,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvB,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;EACrC,CAAC;EAkEM,QAAQ;;IACX,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EAAE,CAAC;EACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { EditorState, Transaction } from 'prosemirror-state';\nimport { EditorView } from 'prosemirror-view';\nimport { Schema, DOMParser } from 'prosemirror-model';\nimport { schema } from 'prosemirror-schema-basic';\nimport { addListNodes } from 'prosemirror-schema-list';\nimport { exampleSetup } from 'prosemirror-example-setup';\nimport { keymap } from 'prosemirror-keymap';\nimport { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { MenuCommandFactory } from './menu/menu-commands';\nimport { menuTranslationIDs, getTextEditorMenuItems } from './menu/menu-items';\nimport { ContentTypeConverter } from '../utils/content-type-converter';\nimport { MarkdownConverter } from '../utils/markdown-converter';\nimport { HTMLConverter } from '../utils/html-converter';\nimport {\n EditorMenuTypes,\n EditorTextLink,\n editorMenuTypesArray,\n} from './menu/types';\nimport translate from 'src/global/translations';\nimport { createRandomString } from 'src/util/random-string';\nimport { isItem } from 'src/components/action-bar/isItem';\nimport { cloneDeep, debounce } from 'lodash-es';\nimport { Languages } from '../../date-picker/date.types';\nimport { strikethrough } from './menu/menu-schema-extender';\nimport {\n EditorLinkMenuEventDetail,\n createLinkPlugin,\n} from './plugins/link-plugin';\nimport { createImageRemoverPlugin } from './plugins/image-remover-plugin';\nimport { createMenuStateTrackingPlugin } from './plugins/menu-state-tracking-plugin';\nimport { createActionBarInteractionPlugin } from './plugins/menu-action-interaction-plugin';\nimport { CustomElement } from '../../../global/shared-types/custom-element.types';\nimport { createNodeSpec } from '../utils/plugin-factory';\n\nconst DEBOUNCE_TIMEOUT = 300;\n\n/**\n * The ProseMirror adapter offers a rich text editing experience with markdown support.\n * [Read more...](https://prosemirror.net/)\n *\n * @exampleComponent limel-example-prosemirror-adapter-basic\n * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-prosemirror-adapter',\n shadow: true,\n styleUrl: 'prosemirror-adapter.scss',\n})\nexport class ProsemirrorAdapter {\n /**\n * The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * The value of the editor, expected to be markdown\n */\n @Prop()\n public value: string;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages;\n\n /**\n * set to private to avoid usage while under development\n *\n * @private\n * @alpha\n */\n @Prop()\n plugins: CustomElement[] = [];\n\n @Element()\n private host: HTMLLimelTextEditorElement;\n\n private portalId: string;\n\n @State()\n private view: EditorView;\n\n @State()\n private actionBarItems: Array<\n ActionBarItem<EditorMenuTypes> | ListSeparator\n > = [];\n\n @State()\n private link: EditorTextLink = { href: '' };\n\n /**\n * Open state of the dialog\n */\n @State()\n public isLinkMenuOpen: boolean = false;\n\n private menuCommandFactory: MenuCommandFactory;\n private schema: Schema;\n private contentConverter: ContentTypeConverter;\n private actionBarElement: HTMLElement;\n private lastEmittedValue: string;\n private changeWaiting = false;\n\n /**\n * Used to stop change event emitting as result of getting updated value from consumer\n */\n private suppressChangeEvent = false;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n private change: EventEmitter<string>;\n\n constructor() {\n this.portalId = createRandomString();\n }\n\n @Watch('value')\n protected watchValue(newValue: string) {\n if (!this.view) {\n return;\n }\n\n if (this.changeWaiting) {\n // A change is pending; do not update the editor's content\n return;\n }\n\n const currentContent = this.contentConverter.serialize(\n this.view,\n this.schema,\n );\n\n // If the new value is the same as the current content, do nothing\n if (newValue === currentContent) {\n return;\n }\n\n // Update the editor's content with the new value\n this.updateView(newValue);\n }\n\n public componentWillLoad() {\n this.getActionBarItems();\n this.setupContentConverter();\n }\n\n public componentDidLoad() {\n // Stencil complains loudly about triggering rerenders in\n // componentDidLoad, but we have to, so we're using setTimeout to\n // suppress the warning. /Ads\n setTimeout(() => {\n this.initializeTextEditor();\n }, 0);\n }\n\n public connectedCallback() {\n if (this.view) {\n this.initializeTextEditor();\n }\n\n this.host.addEventListener(\n 'open-editor-link-menu',\n this.handleOpenLinkMenu,\n );\n }\n\n public disconnectedCallback() {\n this.host.removeEventListener(\n 'open-editor-link-menu',\n this.handleOpenLinkMenu,\n );\n this.view?.dom?.removeEventListener('blur', this.handleBlur);\n this.view?.destroy();\n }\n\n public render() {\n return [\n <div id=\"editor\" />,\n <div class=\"toolbar\">\n <limel-action-bar\n ref={(el) => (this.actionBarElement = el)}\n accessibleLabel=\"Toolbar\"\n actions={this.actionBarItems}\n onItemSelected={this.handleActionBarItem}\n />\n </div>,\n this.renderLinkMenu(),\n ];\n }\n\n renderLinkMenu() {\n if (!this.isLinkMenuOpen) {\n return;\n }\n\n return (\n <limel-portal\n containerId={this.portalId}\n visible={this.isLinkMenuOpen}\n openDirection=\"top\"\n inheritParentWidth={true}\n anchor={this.actionBarElement}\n >\n <limel-text-editor-link-menu\n link={this.link}\n isOpen={this.isLinkMenuOpen}\n onLinkChange={this.handleLinkChange}\n onCancel={this.handleCancelLinkMenu}\n onSave={this.handleSaveLinkMenu}\n />\n </limel-portal>\n );\n }\n\n private setupContentConverter() {\n if (this.contentType === 'markdown') {\n this.contentConverter = new MarkdownConverter(this.plugins);\n } else if (this.contentType === 'html') {\n this.contentConverter = new HTMLConverter();\n } else {\n throw new Error(\n `Unsupported content type: ${this.contentType}. Only 'markdown' and 'html' are supported.`,\n );\n }\n }\n\n private getActionBarItems = () => {\n this.actionBarItems = getTextEditorMenuItems().map(\n this.getTranslatedItem,\n );\n };\n\n private getTranslatedItem = (item) => {\n const newItem = cloneDeep(item);\n\n if (isItem(item)) {\n const translationId = menuTranslationIDs[item.value];\n\n if (translationId) {\n newItem.text = translate.get(translationId, this.language);\n }\n }\n\n return newItem;\n };\n\n private async initializeTextEditor() {\n this.schema = this.initializeSchema();\n const initialDoc = await this.parseInitialContent();\n this.menuCommandFactory = new MenuCommandFactory(this.schema);\n this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: this.createEditorState(initialDoc),\n dispatchTransaction: this.handleTransaction,\n },\n );\n\n this.view.dom.addEventListener('blur', this.handleBlur);\n\n if (this.value) {\n this.updateView(this.value);\n }\n }\n\n private initializeSchema() {\n let nodes = schema.spec.nodes;\n\n this.plugins.forEach((plugin) => {\n const newNodeSpec = createNodeSpec(plugin);\n const nodeName = plugin.tagName;\n\n nodes = nodes.append({ [nodeName]: newNodeSpec });\n });\n nodes = addListNodes(nodes, 'paragraph block*', 'block');\n\n return new Schema({\n nodes: nodes,\n marks: schema.spec.marks.append({\n strikethrough: strikethrough,\n }),\n });\n }\n\n private async parseInitialContent() {\n const initialContentElement = document.createElement('div');\n\n if (this.value) {\n initialContentElement.innerHTML =\n await this.contentConverter.parseAsHTML(\n this.value,\n this.schema,\n );\n } else {\n initialContentElement.innerHTML = '<p></p>';\n }\n\n return DOMParser.fromSchema(this.schema).parse(initialContentElement);\n }\n\n private createEditorState(initialDoc) {\n return EditorState.create({\n doc: initialDoc,\n plugins: [\n ...exampleSetup({ schema: this.schema, menuBar: false }),\n keymap(this.menuCommandFactory.buildKeymap()),\n createLinkPlugin(this.handleNewLinkSelection),\n createImageRemoverPlugin(),\n createMenuStateTrackingPlugin(\n editorMenuTypesArray,\n this.menuCommandFactory,\n this.updateActiveActionBarItems,\n ),\n createActionBarInteractionPlugin(this.menuCommandFactory),\n ],\n });\n }\n\n private updateActiveActionBarItems = (\n activeTypes: Record<EditorMenuTypes, boolean>,\n ) => {\n const newItems = getTextEditorMenuItems().map((item) => {\n if (isItem(item)) {\n return {\n ...item,\n selected: activeTypes[item.value],\n };\n }\n\n return item;\n });\n\n this.actionBarItems = newItems;\n };\n\n private async updateView(content: string) {\n this.suppressChangeEvent = true;\n const html = await this.contentConverter.parseAsHTML(\n content,\n this.schema,\n );\n const prosemirrorDOMparser = DOMParser.fromSchema(\n this.view.state.schema,\n );\n const domParser = new window.DOMParser();\n const doc = domParser.parseFromString(html, 'text/html');\n const prosemirrorDoc = prosemirrorDOMparser.parse(doc.body);\n const tr = this.view.state.tr;\n tr.replaceWith(0, tr.doc.content.size, prosemirrorDoc.content);\n this.view.dispatch(tr);\n this.suppressChangeEvent = false;\n }\n\n private handleTransaction = (transaction: Transaction) => {\n const newState = this.view.state.apply(transaction);\n this.view.updateState(newState);\n\n if (this.suppressChangeEvent || transaction.getMeta('pointer')) {\n return;\n }\n\n const content = this.contentConverter.serialize(this.view, this.schema);\n\n if (content === this.lastEmittedValue) {\n return;\n }\n\n this.lastEmittedValue = content;\n this.changeWaiting = true;\n this.changeEmitter(content);\n };\n\n private handleActionBarItem = (\n event: CustomEvent<ActionBarItem<EditorMenuTypes>>,\n ) => {\n event.preventDefault();\n event.stopImmediatePropagation();\n const { value } = event.detail;\n\n if (value === EditorMenuTypes.Link) {\n this.isLinkMenuOpen = true;\n\n return;\n }\n\n const actionBarEvent = new CustomEvent('actionBarItemClick', {\n detail: event.detail,\n });\n this.view.dom.dispatchEvent(actionBarEvent);\n };\n\n private handleCancelLinkMenu = (event: CustomEvent<void>) => {\n event.preventDefault();\n event.stopPropagation();\n\n this.isLinkMenuOpen = false;\n this.link = { text: '', href: '' };\n };\n\n private handleSaveLinkMenu = () => {\n this.isLinkMenuOpen = false;\n\n const saveLinkEvent = new CustomEvent('saveLinkMenu', {\n detail: {\n type: EditorMenuTypes.Link,\n link: this.link,\n },\n });\n this.view.dom.dispatchEvent(saveLinkEvent);\n\n this.link = { href: '' };\n };\n\n private handleLinkChange = (event: CustomEvent<EditorTextLink>) => {\n this.link = event.detail;\n };\n\n public setFocus() {\n this.view?.focus();\n }\n\n private handleNewLinkSelection = (text: string, href: string) => {\n this.link.text = text;\n this.link.href = href;\n };\n\n private handleOpenLinkMenu = (\n event: CustomEvent<EditorLinkMenuEventDetail>,\n ) => {\n event.stopImmediatePropagation();\n const { href, text } = event.detail;\n this.link = { href: href, text: text };\n this.isLinkMenuOpen = true;\n };\n\n private changeEmitter = debounce((value: string) => {\n this.change.emit(value);\n this.changeWaiting = false;\n }, DEBOUNCE_TIMEOUT);\n\n private handleBlur = () => {\n this.changeEmitter.flush();\n };\n}\n"]}
|
|
@@ -289,9 +289,12 @@ export class TextEditor {
|
|
|
289
289
|
"docs": {
|
|
290
290
|
"tags": [{
|
|
291
291
|
"name": "private",
|
|
292
|
-
"text":
|
|
292
|
+
"text": undefined
|
|
293
|
+
}, {
|
|
294
|
+
"name": "alpha",
|
|
295
|
+
"text": undefined
|
|
293
296
|
}],
|
|
294
|
-
"text": ""
|
|
297
|
+
"text": "set to private to avoid usage while under development"
|
|
295
298
|
},
|
|
296
299
|
"defaultValue": "[]"
|
|
297
300
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\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-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\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 = false;\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 = false;\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 = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * @private\n * set to private to avoid usage while under development\n */\n @Prop()\n public plugins: CustomElement[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: 'standard' | 'minimal' = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\nimport { CustomElement } from '../../global/shared-types/custom-element.types';\n\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-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-ui\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-custom-element\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\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 = false;\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 = false;\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 = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * set to private to avoid usage while under development\n *\n * @private\n * @alpha\n */\n @Prop()\n public plugins: CustomElement[] = [];\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Specifies the visual appearance of the editor.\n *\n * - `standard`: The default editor appearance with a full toolbar and\n * standard layout.\n * - `minimal`: A compact editor appearance, ideal for limited space\n * scenarios such as mobile devices. In this mode, the toolbar is hidden\n * until the editor is focused.\n */\n @Prop({ reflect: true })\n public ui?: 'standard' | 'minimal' = 'standard';\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n plugins={this.plugins}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : undefined}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|