@limetech/lime-elements 37.28.0 → 37.29.0
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 +21 -0
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +30 -30
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +20 -7
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js +30 -30
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.css +5 -1
- package/dist/collection/components/text-editor/text-editor.js +20 -7
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +30 -30
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +21 -8
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-357a0c67.entry.js +2 -0
- package/dist/lime-elements/p-357a0c67.entry.js.map +1 -0
- package/dist/lime-elements/{p-3619d8ca.entry.js → p-b4669729.entry.js} +2 -2
- package/dist/lime-elements/{p-3619d8ca.entry.js.map → p-b4669729.entry.js.map} +1 -1
- package/dist/types/components/text-editor/text-editor.d.ts +4 -1
- package/package.json +1 -1
- package/dist/lime-elements/p-e9d2525d.entry.js +0 -2
- package/dist/lime-elements/p-e9d2525d.entry.js.map +0 -1
|
@@ -3,13 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-d1052409.js');
|
|
6
|
+
const randomString = require('./random-string-c8445652.js');
|
|
6
7
|
|
|
7
|
-
const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor[readonly]){--limel-text-editor-outline-color:transparent;min-height:2.5rem}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{position:absolute;inset:0;display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}";
|
|
8
|
+
const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:4rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor[readonly]){--limel-text-editor-outline-color:transparent;min-height:2.5rem}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}:host(limel-text-editor.has-helper-text) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}.leading-outline,.notch,.trailing-outline{border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}";
|
|
8
9
|
|
|
9
10
|
const TextEditor = class {
|
|
10
11
|
constructor(hostRef) {
|
|
11
12
|
index.registerInstance(this, hostRef);
|
|
12
13
|
this.change = index.createEvent(this, "change", 7);
|
|
14
|
+
this.renderHelperLine = () => {
|
|
15
|
+
if (!this.helperText) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
return (index.h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
|
|
19
|
+
};
|
|
13
20
|
this.handleChange = () => (event) => {
|
|
14
21
|
event.stopPropagation();
|
|
15
22
|
this.change.emit(event.detail);
|
|
@@ -22,21 +29,27 @@ const TextEditor = class {
|
|
|
22
29
|
this.label = undefined;
|
|
23
30
|
this.invalid = undefined;
|
|
24
31
|
this.value = undefined;
|
|
32
|
+
this.helperTextId = randomString.createRandomString();
|
|
25
33
|
}
|
|
26
34
|
render() {
|
|
27
|
-
return
|
|
28
|
-
|
|
29
|
-
this.renderEditor()
|
|
30
|
-
];
|
|
35
|
+
return (index.h(index.Host, { class: {
|
|
36
|
+
'has-helper-text': !!this.helperText,
|
|
37
|
+
} }, index.h("span", { class: "notched-outline" }, index.h("span", { class: "leading-outline" }), this.renderLabel(), index.h("span", { class: "trailing-outline" })), this.renderEditor()));
|
|
31
38
|
}
|
|
32
39
|
renderEditor() {
|
|
33
40
|
if (this.readonly && !this.value) {
|
|
34
41
|
return (index.h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
|
|
35
42
|
}
|
|
36
43
|
if (this.readonly) {
|
|
37
|
-
return
|
|
44
|
+
return [
|
|
45
|
+
index.h("limel-markdown", { value: this.value, "aria-controls": this.helperTextId }),
|
|
46
|
+
this.renderHelperLine(),
|
|
47
|
+
];
|
|
38
48
|
}
|
|
39
|
-
return
|
|
49
|
+
return [
|
|
50
|
+
index.h("limel-prosemirror-adapter", { contentType: this.contentType, onChange: this.handleChange, value: this.value, "aria-controls": this.helperTextId }),
|
|
51
|
+
this.renderHelperLine(),
|
|
52
|
+
];
|
|
40
53
|
}
|
|
41
54
|
renderLabel() {
|
|
42
55
|
if (!this.label) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-text-editor.entry.cjs.js","mappings":"
|
|
1
|
+
{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,i0GAAi0G;;MC0B10G,UAAU;EAqEnB;;;IA+DQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,+BACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,EACJ;KACL,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBA9IwC,UAAU;;;;;;;;IAgEhD,IAAI,CAAC,YAAY,GAAGC,+BAAkB,EAAE,CAAC;GAC5C;EAEM,MAAM;IACT,QACID,QAACE,UAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAEDF,kBAAM,KAAK,EAAC,iBAAiB,IACzBA,kBAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,QACIA,kBAAM,KAAK,EAAC,2DAA2D,aAEhE,EACT;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACHA,4BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,GAClC;QACF,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACHA,uCACI,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,GAClC;MACF,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,OAAO,IACfA,uBAAQ,IAAI,CAAC,KAAK,CAAS,CACxB,EACT;GACL;;;;;;","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../../src/style/mixins.scss';\n\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 4rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor[readonly]) {\n --limel-text-editor-outline-color: transparent;\n min-height: shared_input-select-picker.$height-of-mdc-text-field;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n\n :host(limel-text-editor.has-helper-text) & {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** 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 * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n\n public constructor() {\n this.helperTextId = 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-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n />,\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>{this.label}</label>\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 />\n );\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
|
|
@@ -20,6 +20,36 @@ import { HTMLConverter } from '../utils/html-converter';
|
|
|
20
20
|
*/
|
|
21
21
|
export class ProsemirrorAdapter {
|
|
22
22
|
constructor() {
|
|
23
|
+
this.initializeTextEditor = async () => {
|
|
24
|
+
this.actionBarItems = textEditorMenuItems;
|
|
25
|
+
const mySchema = new Schema({
|
|
26
|
+
nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
|
|
27
|
+
marks: schema.spec.marks,
|
|
28
|
+
});
|
|
29
|
+
// Parse initial content directly if 'value' is provided
|
|
30
|
+
const initialContentElement = document.createElement('div');
|
|
31
|
+
initialContentElement.innerHTML = '<p></p>';
|
|
32
|
+
if (this.value) {
|
|
33
|
+
initialContentElement.innerHTML =
|
|
34
|
+
await this.contentConverter.parseAsHTML(this.value, schema);
|
|
35
|
+
}
|
|
36
|
+
const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
|
|
37
|
+
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
38
|
+
state: EditorState.create({
|
|
39
|
+
doc: initialDoc,
|
|
40
|
+
plugins: exampleSetup({
|
|
41
|
+
schema: mySchema,
|
|
42
|
+
menuBar: false,
|
|
43
|
+
}),
|
|
44
|
+
}),
|
|
45
|
+
dispatchTransaction: (transaction) => {
|
|
46
|
+
const newState = this.view.state.apply(transaction);
|
|
47
|
+
this.view.updateState(newState);
|
|
48
|
+
this.change.emit(this.contentConverter.serialize(this.view, schema));
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
52
|
+
};
|
|
23
53
|
this.handleActionBarItem = (event) => {
|
|
24
54
|
event.preventDefault();
|
|
25
55
|
const { text } = event.detail;
|
|
@@ -57,36 +87,6 @@ export class ProsemirrorAdapter {
|
|
|
57
87
|
h("div", { id: "editor" }),
|
|
58
88
|
];
|
|
59
89
|
}
|
|
60
|
-
async initializeTextEditor() {
|
|
61
|
-
this.actionBarItems = textEditorMenuItems;
|
|
62
|
-
const mySchema = new Schema({
|
|
63
|
-
nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
|
|
64
|
-
marks: schema.spec.marks,
|
|
65
|
-
});
|
|
66
|
-
// Parse initial content directly if 'value' is provided
|
|
67
|
-
const initialContentElement = document.createElement('div');
|
|
68
|
-
initialContentElement.innerHTML = '<p></p>';
|
|
69
|
-
if (this.value) {
|
|
70
|
-
initialContentElement.innerHTML =
|
|
71
|
-
await this.contentConverter.parseAsHTML(this.value, schema);
|
|
72
|
-
}
|
|
73
|
-
const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
|
|
74
|
-
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
75
|
-
state: EditorState.create({
|
|
76
|
-
doc: initialDoc,
|
|
77
|
-
plugins: exampleSetup({
|
|
78
|
-
schema: mySchema,
|
|
79
|
-
menuBar: false,
|
|
80
|
-
}),
|
|
81
|
-
}),
|
|
82
|
-
dispatchTransaction: (transaction) => {
|
|
83
|
-
const newState = this.view.state.apply(transaction);
|
|
84
|
-
this.view.updateState(newState);
|
|
85
|
-
this.change.emit(this.contentConverter.serialize(this.view, schema));
|
|
86
|
-
},
|
|
87
|
-
});
|
|
88
|
-
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
89
|
-
}
|
|
90
90
|
executeCommand(command) {
|
|
91
91
|
const { state } = this.view;
|
|
92
92
|
const selection = state.selection;
|
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":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,CAAC,GACJ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,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;AAGzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD;;;;;;;;GAQG;AAMH,MAAM,OAAO,kBAAkB;;
|
|
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 h,\n} from '@stencil/core';\nimport { EditorState } 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 { 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 { textEditorMenuItems } from './menu/menu-items';\nimport { ContentTypeConverter } from '../utils/content-type-converter';\nimport { markdownConverter } from '../utils/markdown-converter';\nimport { HTMLConverter } from '../utils/html-converter';\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 @Element()\n private host: HTMLLimelTextEditorElement;\n\n @State()\n private view: EditorView;\n\n @State()\n private actionBarItems: Array<ActionBarItem | ListSeparator> = [];\n\n private menuCommandFactory: MenuCommandFactory;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n private change: EventEmitter<string>;\n\n private contentConverter: ContentTypeConverter;\n\n public componentWillLoad() {\n if (this.contentType === 'markdown') {\n this.contentConverter = new markdownConverter();\n } else if (this.contentType === 'html') {\n this.contentConverter = new HTMLConverter();\n }\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(this.initializeTextEditor, 0);\n }\n\n public render() {\n return [\n <limel-action-bar\n accessibleLabel=\"Toolbar\"\n actions={this.actionBarItems}\n onItemSelected={this.handleActionBarItem}\n />,\n <div id=\"editor\" />,\n ];\n }\n\n private initializeTextEditor = async () => {\n this.actionBarItems = textEditorMenuItems;\n\n const mySchema = new Schema({\n nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),\n marks: schema.spec.marks,\n });\n\n // Parse initial content directly if 'value' is provided\n const initialContentElement = document.createElement('div');\n initialContentElement.innerHTML = '<p></p>';\n if (this.value) {\n initialContentElement.innerHTML =\n await this.contentConverter.parseAsHTML(this.value, schema);\n }\n\n const initialDoc = DOMParser.fromSchema(mySchema).parse(\n initialContentElement,\n );\n\n this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: EditorState.create({\n doc: initialDoc,\n plugins: exampleSetup({\n schema: mySchema,\n menuBar: false,\n }),\n }),\n dispatchTransaction: (transaction) => {\n const newState = this.view.state.apply(transaction);\n this.view.updateState(newState);\n\n this.change.emit(\n this.contentConverter.serialize(this.view, schema),\n );\n },\n },\n );\n\n this.menuCommandFactory = new MenuCommandFactory(mySchema);\n };\n\n private handleActionBarItem = (event: CustomEvent<ActionBarItem>) => {\n event.preventDefault();\n\n const { text } = event.detail;\n const mark = text.replace(/\\s/g, '').toLowerCase();\n try {\n const command = this.menuCommandFactory.createCommand(mark);\n this.executeCommand(command);\n } catch (error) {\n throw new Error(`Error executing command: ${error}`);\n }\n };\n\n private executeCommand(command) {\n const { state } = this.view;\n const selection = state.selection;\n\n let transaction = state.tr;\n\n if (!selection.empty) {\n transaction.setSelection(selection);\n }\n\n command(state, (tr) => {\n transaction = tr;\n });\n this.view.dispatch(transaction);\n\n this.view.focus();\n }\n}\n"]}
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
:host(limel-text-editor) {
|
|
147
|
-
--limel-text-editor-padding: 0.75rem;
|
|
147
|
+
--limel-text-editor-padding: 0.75rem 1rem;
|
|
148
148
|
position: relative;
|
|
149
149
|
isolation: isolate;
|
|
150
150
|
display: flex;
|
|
@@ -174,9 +174,13 @@
|
|
|
174
174
|
.notched-outline {
|
|
175
175
|
position: absolute;
|
|
176
176
|
inset: 0;
|
|
177
|
+
bottom: var(--limel-text-editor-notched-outline-bottom, 0);
|
|
177
178
|
display: flex;
|
|
178
179
|
background-color: var(--limel-text-editor-background-color);
|
|
179
180
|
}
|
|
181
|
+
:host(limel-text-editor.has-helper-text) .notched-outline {
|
|
182
|
+
--limel-text-editor-notched-outline-bottom: 1rem;
|
|
183
|
+
}
|
|
180
184
|
|
|
181
185
|
.leading-outline,
|
|
182
186
|
.notch,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { h } from '@stencil/core';
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
import { createRandomString } from 'src/util/random-string';
|
|
2
3
|
/**
|
|
3
4
|
* A rich text editor that offers a rich text editing experience with markdown support,
|
|
4
5
|
* in the sense that you can easily type markdown syntax and see the rendered
|
|
@@ -19,6 +20,12 @@ import { h } from '@stencil/core';
|
|
|
19
20
|
*/
|
|
20
21
|
export class TextEditor {
|
|
21
22
|
constructor() {
|
|
23
|
+
this.renderHelperLine = () => {
|
|
24
|
+
if (!this.helperText) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId }));
|
|
28
|
+
};
|
|
22
29
|
this.handleChange = () => (event) => {
|
|
23
30
|
event.stopPropagation();
|
|
24
31
|
this.change.emit(event.detail);
|
|
@@ -31,21 +38,27 @@ export class TextEditor {
|
|
|
31
38
|
this.label = undefined;
|
|
32
39
|
this.invalid = undefined;
|
|
33
40
|
this.value = undefined;
|
|
41
|
+
this.helperTextId = createRandomString();
|
|
34
42
|
}
|
|
35
43
|
render() {
|
|
36
|
-
return
|
|
37
|
-
|
|
38
|
-
this.renderEditor()
|
|
39
|
-
];
|
|
44
|
+
return (h(Host, { class: {
|
|
45
|
+
'has-helper-text': !!this.helperText,
|
|
46
|
+
} }, h("span", { class: "notched-outline" }, h("span", { class: "leading-outline" }), this.renderLabel(), h("span", { class: "trailing-outline" })), this.renderEditor()));
|
|
40
47
|
}
|
|
41
48
|
renderEditor() {
|
|
42
49
|
if (this.readonly && !this.value) {
|
|
43
50
|
return (h("span", { class: "lime-empty-value-for-readonly lime-looks-like-input-value" }, "\u2013"));
|
|
44
51
|
}
|
|
45
52
|
if (this.readonly) {
|
|
46
|
-
return
|
|
53
|
+
return [
|
|
54
|
+
h("limel-markdown", { value: this.value, "aria-controls": this.helperTextId }),
|
|
55
|
+
this.renderHelperLine(),
|
|
56
|
+
];
|
|
47
57
|
}
|
|
48
|
-
return
|
|
58
|
+
return [
|
|
59
|
+
h("limel-prosemirror-adapter", { contentType: this.contentType, onChange: this.handleChange, value: this.value, "aria-controls": this.helperTextId }),
|
|
60
|
+
this.renderHelperLine(),
|
|
61
|
+
];
|
|
49
62
|
}
|
|
50
63
|
renderLabel() {
|
|
51
64
|
if (!this.label) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,UAAU;EAqEnB;IA+DQ,qBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,OAAO,CACH,yBACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;uBA9IwC,UAAU;;;;;;;;IAgEhD,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAE,CAAC;GAC5C;EAEM,MAAM;IACT,OAAO,CACH,EAAC,IAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC;MAED,YAAM,KAAK,EAAC,iBAAiB;QACzB,YAAM,KAAK,EAAC,iBAAiB,GAAG;QAC/B,IAAI,CAAC,WAAW,EAAE;QACnB,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B;MACN,IAAI,CAAC,YAAY,EAAE,CACjB,CACV,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACH,sBACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,GAClC;QACF,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACH,iCACI,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,GAClC;MACF,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,OAAO;MACf,iBAAQ,IAAI,CAAC,KAAK,CAAS,CACxB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBJ","sourcesContent":["import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-height\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** 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 * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n\n public constructor() {\n this.helperTextId = 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-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n />,\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>{this.label}</label>\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 />\n );\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -24714,6 +24714,36 @@ const ProsemirrorAdapter = class {
|
|
|
24714
24714
|
constructor(hostRef) {
|
|
24715
24715
|
registerInstance(this, hostRef);
|
|
24716
24716
|
this.change = createEvent(this, "change", 7);
|
|
24717
|
+
this.initializeTextEditor = async () => {
|
|
24718
|
+
this.actionBarItems = textEditorMenuItems;
|
|
24719
|
+
const mySchema = new Schema({
|
|
24720
|
+
nodes: addListNodes(schema$1.spec.nodes, 'paragraph block*', 'block'),
|
|
24721
|
+
marks: schema$1.spec.marks,
|
|
24722
|
+
});
|
|
24723
|
+
// Parse initial content directly if 'value' is provided
|
|
24724
|
+
const initialContentElement = document.createElement('div');
|
|
24725
|
+
initialContentElement.innerHTML = '<p></p>';
|
|
24726
|
+
if (this.value) {
|
|
24727
|
+
initialContentElement.innerHTML =
|
|
24728
|
+
await this.contentConverter.parseAsHTML(this.value, schema$1);
|
|
24729
|
+
}
|
|
24730
|
+
const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
|
|
24731
|
+
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
24732
|
+
state: EditorState.create({
|
|
24733
|
+
doc: initialDoc,
|
|
24734
|
+
plugins: exampleSetup({
|
|
24735
|
+
schema: mySchema,
|
|
24736
|
+
menuBar: false,
|
|
24737
|
+
}),
|
|
24738
|
+
}),
|
|
24739
|
+
dispatchTransaction: (transaction) => {
|
|
24740
|
+
const newState = this.view.state.apply(transaction);
|
|
24741
|
+
this.view.updateState(newState);
|
|
24742
|
+
this.change.emit(this.contentConverter.serialize(this.view, schema$1));
|
|
24743
|
+
},
|
|
24744
|
+
});
|
|
24745
|
+
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
24746
|
+
};
|
|
24717
24747
|
this.handleActionBarItem = (event) => {
|
|
24718
24748
|
event.preventDefault();
|
|
24719
24749
|
const { text } = event.detail;
|
|
@@ -24751,36 +24781,6 @@ const ProsemirrorAdapter = class {
|
|
|
24751
24781
|
h("div", { id: "editor" }),
|
|
24752
24782
|
];
|
|
24753
24783
|
}
|
|
24754
|
-
async initializeTextEditor() {
|
|
24755
|
-
this.actionBarItems = textEditorMenuItems;
|
|
24756
|
-
const mySchema = new Schema({
|
|
24757
|
-
nodes: addListNodes(schema$1.spec.nodes, 'paragraph block*', 'block'),
|
|
24758
|
-
marks: schema$1.spec.marks,
|
|
24759
|
-
});
|
|
24760
|
-
// Parse initial content directly if 'value' is provided
|
|
24761
|
-
const initialContentElement = document.createElement('div');
|
|
24762
|
-
initialContentElement.innerHTML = '<p></p>';
|
|
24763
|
-
if (this.value) {
|
|
24764
|
-
initialContentElement.innerHTML =
|
|
24765
|
-
await this.contentConverter.parseAsHTML(this.value, schema$1);
|
|
24766
|
-
}
|
|
24767
|
-
const initialDoc = DOMParser.fromSchema(mySchema).parse(initialContentElement);
|
|
24768
|
-
this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
|
|
24769
|
-
state: EditorState.create({
|
|
24770
|
-
doc: initialDoc,
|
|
24771
|
-
plugins: exampleSetup({
|
|
24772
|
-
schema: mySchema,
|
|
24773
|
-
menuBar: false,
|
|
24774
|
-
}),
|
|
24775
|
-
}),
|
|
24776
|
-
dispatchTransaction: (transaction) => {
|
|
24777
|
-
const newState = this.view.state.apply(transaction);
|
|
24778
|
-
this.view.updateState(newState);
|
|
24779
|
-
this.change.emit(this.contentConverter.serialize(this.view, schema$1));
|
|
24780
|
-
},
|
|
24781
|
-
});
|
|
24782
|
-
this.menuCommandFactory = new MenuCommandFactory(mySchema);
|
|
24783
|
-
}
|
|
24784
24784
|
executeCommand(command) {
|
|
24785
24785
|
const { state } = this.view;
|
|
24786
24786
|
const selection = state.selection;
|