@limetech/lime-elements 37.26.2 → 37.26.3
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 +9 -0
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js +5 -2
- package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js +1 -1
- package/dist/cjs/limel-text-editor.cjs.entry.js.map +1 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css +62 -267
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js +4 -1
- package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js.map +1 -1
- package/dist/collection/components/text-editor/text-editor.css +19 -3
- package/dist/collection/components/text-editor/text-editor.js +1 -0
- package/dist/collection/components/text-editor/text-editor.js.map +1 -1
- package/dist/esm/limel-prosemirror-adapter.entry.js +5 -2
- package/dist/esm/limel-prosemirror-adapter.entry.js.map +1 -1
- package/dist/esm/limel-text-editor.entry.js +1 -1
- package/dist/esm/limel-text-editor.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-a77a0fa8.entry.js +2 -0
- package/dist/lime-elements/p-a77a0fa8.entry.js.map +1 -0
- package/dist/lime-elements/p-e8a2ebd5.entry.js +2 -0
- package/dist/lime-elements/p-e8a2ebd5.entry.js.map +1 -0
- package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts +1 -1
- package/dist/types/components/text-editor/text-editor.d.ts +1 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-6ebde4a2.entry.js +0 -2
- package/dist/lime-elements/p-6ebde4a2.entry.js.map +0 -1
- package/dist/lime-elements/p-db7ce0f8.entry.js +0 -2
- package/dist/lime-elements/p-db7ce0f8.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-d1052409.js');
|
|
6
6
|
|
|
7
|
-
const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}:host(limel-text-editor){display:flex;flex-direction:column;width:100%;
|
|
7
|
+
const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-empty-value-for-readonly{z-index:1;position:absolute;top:0.875rem;left:1rem}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}:host(limel-text-editor){position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-height:max(4rem, 100%)}fieldset{flex-grow:1;min-width:0;min-height:0;height:100%;max-height:100%;padding-inline-start:0 !important;padding-inline-end:0 !important}legend{position:relative;z-index:2;margin-left:0.75rem;max-width:calc(100% - 1.5rem) !important}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:0.75rem}:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}fieldset{box-sizing:border-box;transition:border-color 0.2s ease, background-color 0.2s ease;border:1px solid;border-radius:0.25rem;margin-inline-start:0;margin-inline-end:0;padding-block-start:0;padding-inline-start:0.75rem;padding-inline-end:0.75rem;padding-block-end:0.75rem}fieldset:not([disabled]){border-color:rgba(var(--contrast-700), 0.65);background-color:rgba(var(--contrast-200), 0.5)}fieldset:not([disabled]):hover{border-color:rgba(var(--contrast-700), 1);background-color:rgba(var(--contrast-200), 1)}fieldset:not([disabled]):focus-within{border-color:var(--mdc-theme-primary)}fieldset[disabled]{border-color:transparent}fieldset:has(legend){margin-top:calc((-0.75rem / 2) + (1px / 2))}legend{box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;color:rgba(var(--contrast-1200), 1);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);padding-inline-start:0.25rem;padding-inline-end:0.25rem}";
|
|
8
8
|
|
|
9
9
|
const TextEditor = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG
|
|
1
|
+
{"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,8kIAA8kI;;MCuBvlI,UAAU;;;;IAkGX,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;;;;;;;;EAzCK,MAAM;IACT,QACIA,sBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAC7C,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,YAAY,EAAE,CACb,EACb;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,QACIA,kBAAM,KAAK,EAAC,2DAA2D,aAEhE,EACT;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAOA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,QACIA,uCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,EACJ;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAOA,wBAAS,IAAI,CAAC,KAAK,CAAU,CAAC;GACxC;;;;;;","names":["h"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n\n@include shared_input-select-picker.lime-empty-value-for-readonly;\n@include shared_input-select-picker.lime-looks-like-input-value;\n\n$_label-margin: 0.75rem;\n\n:host(limel-text-editor) {\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: max(4rem, 100%);\n}\n\nfieldset {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n max-height: 100%;\n\n padding-inline-start: 0 !important;\n padding-inline-end: 0 !important;\n}\n\nlegend {\n position: relative;\n z-index: 2;\n margin-left: $_label-margin;\n max-width: calc(100% - #{$_label-margin * 2}) !important;\n}\n\n:host(limel-text-editor[readonly]) {\n limel-markdown {\n display: block;\n padding: $_label-margin;\n }\n}\n\n@import '../../style/internal/fieldset.scss';\n","import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @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 /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return (\n <fieldset disabled={this.readonly || this.disabled}>\n {this.renderLabel()}\n {this.renderEditor()}\n </fieldset>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <legend>{this.label}</legend>;\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
|
|
@@ -1,132 +1,4 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
-
:host(limel-prosemirror-adapter) {
|
|
3
|
-
isolation: isolate;
|
|
4
|
-
display: block;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
* {
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.ProseMirror-menubar-wrapper {
|
|
12
|
-
display: grid;
|
|
13
|
-
grid-template-rows: auto 1fr;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.ProseMirror-textblock-dropdown {
|
|
17
|
-
min-width: 3em;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.ProseMirror-tooltip .ProseMirror-menu {
|
|
21
|
-
width: -webkit-fit-content;
|
|
22
|
-
width: fit-content;
|
|
23
|
-
white-space: pre;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.ProseMirror {
|
|
27
|
-
position: relative;
|
|
28
|
-
word-wrap: break-word;
|
|
29
|
-
white-space: pre-wrap;
|
|
30
|
-
white-space: break-spaces;
|
|
31
|
-
-webkit-font-variant-ligatures: none;
|
|
32
|
-
font-variant-ligatures: none;
|
|
33
|
-
font-feature-settings: "liga" 0;
|
|
34
|
-
padding-top: 0.75rem;
|
|
35
|
-
}
|
|
36
|
-
.ProseMirror [draggable][contenteditable=false] {
|
|
37
|
-
user-select: text;
|
|
38
|
-
}
|
|
39
|
-
.ProseMirror:focus-visible {
|
|
40
|
-
outline: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.ProseMirror-hideselection {
|
|
44
|
-
caret-color: transparent;
|
|
45
|
-
}
|
|
46
|
-
.ProseMirror-hideselection *::selection {
|
|
47
|
-
background: transparent;
|
|
48
|
-
}
|
|
49
|
-
.ProseMirror-hideselection *::-moz-selection {
|
|
50
|
-
background: transparent;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.ProseMirror-selectednode {
|
|
54
|
-
outline: 0.125rem solid rgb(var(--color-sky-light));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
li.ProseMirror-selectednode {
|
|
58
|
-
outline: none;
|
|
59
|
-
}
|
|
60
|
-
li.ProseMirror-selectednode:after {
|
|
61
|
-
content: "";
|
|
62
|
-
position: absolute;
|
|
63
|
-
left: -2rem;
|
|
64
|
-
right: -0.125rem;
|
|
65
|
-
top: -0.125rem;
|
|
66
|
-
bottom: -0.125rem;
|
|
67
|
-
border: 0.125rem solid rgb(var(--color-sky-light));
|
|
68
|
-
pointer-events: none;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
img.ProseMirror-separator {
|
|
72
|
-
display: inline !important;
|
|
73
|
-
border: none !important;
|
|
74
|
-
margin: 0 !important;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* Note! This file is exported to `dist/scss/` in the published
|
|
79
|
-
* node module, for consumer projects to import.
|
|
80
|
-
* That means this file cannot import from any file that isn't
|
|
81
|
-
* also exported, keeping the same relative path.
|
|
82
|
-
*
|
|
83
|
-
* Or, just don't import anything, that works too.
|
|
84
|
-
*/
|
|
85
|
-
/**
|
|
86
|
-
* This can be used on a trigger element that opens a dropdown menu or a popover.
|
|
87
|
-
*/
|
|
88
|
-
/**
|
|
89
|
-
* This mixin will mask out the content that is close to
|
|
90
|
-
* the edges of a scrollable area.
|
|
91
|
-
* - If the scrollable content has `overflow-y`, use `vertically`
|
|
92
|
-
* as an argument for `$direction`.
|
|
93
|
-
- If the scrollable content has `overflow-x`, use `horizontally`
|
|
94
|
-
* as an argument for `$direction`.
|
|
95
|
-
*
|
|
96
|
-
* For the visual effect to work smoothly, we need to make sure that
|
|
97
|
-
* the size of the fade-out edge effect is the same as the
|
|
98
|
-
* internal paddings of the scrollable area. Otherwise, content of a
|
|
99
|
-
* scrollable area that does not have a padding will fade out before
|
|
100
|
-
* any scrolling has been done.
|
|
101
|
-
* This is why this mixin already adds paddings, which automatically
|
|
102
|
-
* default to the size of the fade-out effect.
|
|
103
|
-
* This size defaults to `1rem`, but to override the size use
|
|
104
|
-
* `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
|
|
105
|
-
* when `vertically` argument is set, and use
|
|
106
|
-
* `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
|
|
107
|
-
* when `horizontally` argument is set.
|
|
108
|
-
* Of course you can also programmatically increase and decrease the
|
|
109
|
-
* size of these variables for each edge, based on the amount of
|
|
110
|
-
* scrolling that has been done by the user. In this case, make sure
|
|
111
|
-
* to add a custom padding where the mixin is used, to override
|
|
112
|
-
* the paddings that are automatically added by the mixin in the
|
|
113
|
-
* compiled CSS code.
|
|
114
|
-
*/
|
|
115
|
-
/**
|
|
116
|
-
* This mixin will add an animated underline to the bottom of an `a` elements.
|
|
117
|
-
* Note that you may need to add `all: unset;` –depending on your use case–
|
|
118
|
-
* before using this mixin.
|
|
119
|
-
*/
|
|
120
|
-
/**
|
|
121
|
-
* This mixin creates a cross-browser font stack.
|
|
122
|
-
* - `sans-serif` can be used for the UI of the components.
|
|
123
|
-
* - `monospace` can be used for code.
|
|
124
|
-
*
|
|
125
|
-
* ⚠️ If we change the font stacks, we need to update
|
|
126
|
-
* 1. the consumer documentation in `README.md`, and
|
|
127
|
-
* 2. the CSS variables of `--kompendium-example-font-family`
|
|
128
|
-
* in the `<style>` tag of `index.html`.
|
|
129
|
-
*/
|
|
130
2
|
/*
|
|
131
3
|
* This file is imported into every component!
|
|
132
4
|
*
|
|
@@ -193,171 +65,94 @@ img.ProseMirror-separator {
|
|
|
193
65
|
);
|
|
194
66
|
}
|
|
195
67
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
z-index: 1;
|
|
199
|
-
top: 0;
|
|
200
|
-
margin-left: -0.75rem;
|
|
201
|
-
margin-right: -0.75rem;
|
|
202
|
-
background-color: rgba(var(--contrast-200), 0.5);
|
|
203
|
-
backdrop-filter: blur(0.25rem);
|
|
204
|
-
-webkit-backdrop-filter: blur(0.25rem);
|
|
205
|
-
}
|
|
206
|
-
div#editor .ProseMirror-menubar[style*="position: fixed"] {
|
|
207
|
-
box-shadow: 0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8);
|
|
208
|
-
}
|
|
209
|
-
div#editor .ProseMirror-menubar-spacer {
|
|
210
|
-
display: none;
|
|
68
|
+
:host(limel-prosemirror-adapter) {
|
|
69
|
+
display: block;
|
|
211
70
|
}
|
|
212
71
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
z-index: 1;
|
|
216
|
-
display: flex;
|
|
217
|
-
flex-wrap: wrap;
|
|
218
|
-
gap: 0.25rem;
|
|
219
|
-
align-items: center;
|
|
220
|
-
padding: 0.125rem;
|
|
221
|
-
border-top-left-radius: 0.5rem;
|
|
222
|
-
border-top-right-radius: 0.5rem;
|
|
72
|
+
* {
|
|
73
|
+
box-sizing: border-box;
|
|
223
74
|
}
|
|
224
75
|
|
|
225
|
-
.ProseMirror-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
display: flex;
|
|
229
|
-
align-items: center;
|
|
230
|
-
justify-content: center;
|
|
231
|
-
white-space: nowrap;
|
|
232
|
-
line-height: 1;
|
|
233
|
-
height: 1.5rem;
|
|
234
|
-
min-width: 1.5rem;
|
|
235
|
-
border-radius: 0.25rem;
|
|
236
|
-
color: rgb(var(--contrast-1100));
|
|
237
|
-
font-size: 0.8125rem;
|
|
238
|
-
}
|
|
239
|
-
.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)) {
|
|
240
|
-
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
|
|
241
|
-
cursor: pointer;
|
|
242
|
-
color: var(--mdc-theme-on-surface);
|
|
243
|
-
background-color: transparent;
|
|
244
|
-
}
|
|
245
|
-
.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover {
|
|
246
|
-
color: var(--mdc-theme-on-surface);
|
|
247
|
-
background-color: var(--lime-elevated-surface-background-color);
|
|
248
|
-
box-shadow: var(--button-shadow-hovered);
|
|
249
|
-
}
|
|
250
|
-
.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active {
|
|
251
|
-
box-shadow: var(--button-shadow-pressed);
|
|
252
|
-
transform: translate3d(0, 0.08rem, 0);
|
|
253
|
-
}
|
|
254
|
-
.ProseMirror-menuitem:has(.ProseMirror-menu-active) {
|
|
255
|
-
box-shadow: var(--button-shadow-inset);
|
|
256
|
-
color: var(--mdc-theme-primary);
|
|
257
|
-
}
|
|
258
|
-
.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg {
|
|
259
|
-
color: var(--mdc-theme-primary);
|
|
260
|
-
}
|
|
261
|
-
.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu) {
|
|
262
|
-
box-shadow: var(--button-shadow-inset);
|
|
263
|
-
}
|
|
264
|
-
.ProseMirror-menuitem svg {
|
|
265
|
-
fill: currentColor;
|
|
266
|
-
height: 1rem;
|
|
267
|
-
color: rgb(var(--contrast-1100));
|
|
76
|
+
.ProseMirror-menubar-wrapper {
|
|
77
|
+
display: grid;
|
|
78
|
+
grid-template-rows: auto 1fr;
|
|
268
79
|
}
|
|
269
80
|
|
|
270
|
-
.ProseMirror-
|
|
271
|
-
|
|
272
|
-
background-color: rgb(var(--contrast-600));
|
|
273
|
-
width: 0.125rem;
|
|
274
|
-
height: 1rem;
|
|
81
|
+
.ProseMirror-textblock-dropdown {
|
|
82
|
+
min-width: 3em;
|
|
275
83
|
}
|
|
276
84
|
|
|
277
|
-
.ProseMirror-menu
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
gap: 0.5rem;
|
|
282
|
-
padding: 0 0.5rem;
|
|
283
|
-
}
|
|
284
|
-
.ProseMirror-menu-dropdown:after {
|
|
285
|
-
content: "";
|
|
286
|
-
border-left: 0.25rem solid transparent;
|
|
287
|
-
border-right: 0.25rem solid transparent;
|
|
288
|
-
border-top: 0.25rem solid currentColor;
|
|
85
|
+
.ProseMirror-tooltip .ProseMirror-menu {
|
|
86
|
+
width: -webkit-fit-content;
|
|
87
|
+
width: fit-content;
|
|
88
|
+
white-space: pre;
|
|
289
89
|
}
|
|
290
90
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
91
|
+
limel-action-bar {
|
|
92
|
+
--action-bar-border-radius: 0.25rem;
|
|
93
|
+
position: sticky;
|
|
94
|
+
z-index: 1;
|
|
95
|
+
top: 0;
|
|
96
|
+
background-color: rgba(var(--contrast-200), 0.5);
|
|
97
|
+
backdrop-filter: blur(0.5rem);
|
|
98
|
+
-webkit-backdrop-filter: blur(0.5rem);
|
|
99
|
+
margin: 1px;
|
|
100
|
+
width: calc(100% - 2px);
|
|
294
101
|
}
|
|
295
102
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
top: 100%;
|
|
299
|
-
background: rgb(var(--contrast-100));
|
|
300
|
-
border-radius: 0.25rem;
|
|
301
|
-
padding: 0.125rem;
|
|
103
|
+
div#editor {
|
|
104
|
+
padding: 0 0.75rem;
|
|
302
105
|
}
|
|
303
106
|
|
|
304
|
-
.ProseMirror
|
|
305
|
-
position:
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
top:
|
|
107
|
+
.ProseMirror {
|
|
108
|
+
position: relative;
|
|
109
|
+
word-wrap: break-word;
|
|
110
|
+
white-space: pre-wrap;
|
|
111
|
+
white-space: break-spaces;
|
|
112
|
+
-webkit-font-variant-ligatures: none;
|
|
113
|
+
font-variant-ligatures: none;
|
|
114
|
+
font-feature-settings: "liga" 0;
|
|
115
|
+
padding-top: 0.75rem;
|
|
116
|
+
}
|
|
117
|
+
.ProseMirror [draggable][contenteditable=false] {
|
|
118
|
+
user-select: text;
|
|
119
|
+
}
|
|
120
|
+
.ProseMirror:focus-visible {
|
|
121
|
+
outline: none;
|
|
313
122
|
}
|
|
314
123
|
|
|
315
|
-
.ProseMirror-
|
|
316
|
-
|
|
317
|
-
cursor: pointer;
|
|
318
|
-
border-radius: 0.375rem;
|
|
319
|
-
min-height: 2.5rem;
|
|
320
|
-
display: flex;
|
|
321
|
-
align-items: center;
|
|
322
|
-
width: 100%;
|
|
124
|
+
.ProseMirror-hideselection {
|
|
125
|
+
caret-color: transparent;
|
|
323
126
|
}
|
|
324
|
-
.ProseMirror-
|
|
325
|
-
|
|
326
|
-
width: 100%;
|
|
127
|
+
.ProseMirror-hideselection *::selection {
|
|
128
|
+
background: transparent;
|
|
327
129
|
}
|
|
328
|
-
.ProseMirror-
|
|
329
|
-
background
|
|
130
|
+
.ProseMirror-hideselection *::-moz-selection {
|
|
131
|
+
background: transparent;
|
|
330
132
|
}
|
|
331
133
|
|
|
332
|
-
.ProseMirror-
|
|
333
|
-
|
|
334
|
-
margin-right: -0.25rem;
|
|
335
|
-
}
|
|
336
|
-
.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu {
|
|
337
|
-
display: block;
|
|
134
|
+
.ProseMirror-selectednode {
|
|
135
|
+
outline: 0.125rem solid rgb(var(--color-sky-light));
|
|
338
136
|
}
|
|
339
137
|
|
|
340
|
-
.ProseMirror-
|
|
341
|
-
|
|
342
|
-
display: flex;
|
|
343
|
-
align-items: center;
|
|
344
|
-
justify-content: space-between;
|
|
345
|
-
gap: 0.5rem;
|
|
138
|
+
li.ProseMirror-selectednode {
|
|
139
|
+
outline: none;
|
|
346
140
|
}
|
|
347
|
-
.ProseMirror-
|
|
141
|
+
li.ProseMirror-selectednode:after {
|
|
348
142
|
content: "";
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
.
|
|
355
|
-
|
|
356
|
-
cursor: default;
|
|
143
|
+
position: absolute;
|
|
144
|
+
left: -2rem;
|
|
145
|
+
right: -0.125rem;
|
|
146
|
+
top: -0.125rem;
|
|
147
|
+
bottom: -0.125rem;
|
|
148
|
+
border: 0.125rem solid rgb(var(--color-sky-light));
|
|
149
|
+
pointer-events: none;
|
|
357
150
|
}
|
|
358
151
|
|
|
359
|
-
.ProseMirror-
|
|
360
|
-
display:
|
|
152
|
+
img.ProseMirror-separator {
|
|
153
|
+
display: inline !important;
|
|
154
|
+
border: none !important;
|
|
155
|
+
margin: 0 !important;
|
|
361
156
|
}
|
|
362
157
|
|
|
363
158
|
blockquote {
|
|
@@ -43,7 +43,10 @@ export class ProsemirrorAdapter {
|
|
|
43
43
|
this.actionBarItems = [];
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return
|
|
46
|
+
return [
|
|
47
|
+
h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, onItemSelected: this.handleActionBarItem }),
|
|
48
|
+
h("div", { id: "editor" }),
|
|
49
|
+
];
|
|
47
50
|
}
|
|
48
51
|
componentDidLoad() {
|
|
49
52
|
this.actionBarItems = textEditorMenuItems;
|
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;;;;;;;;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';\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 value of the editor, expected to be serialised HTML\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 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 public componentDidLoad() {\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 this.view = new EditorView(\n this.host.shadowRoot.querySelector('#editor'),\n {\n state: EditorState.create({\n doc: DOMParser.fromSchema(mySchema).parse(\n this.host.shadowRoot.querySelector('#editor'),\n ),\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(this.getHTML());\n },\n },\n );\n\n this.menuCommandFactory = new MenuCommandFactory(mySchema);\n\n if (this.value) {\n this.view.dom.innerHTML = this.value;\n }\n }\n\n private getHTML = (): string => {\n if (this.view.dom.textContent === '') {\n return '';\n } else {\n return this.view.dom.innerHTML;\n }\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"]}
|
|
@@ -87,18 +87,34 @@
|
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
:host(limel-text-editor) {
|
|
90
|
+
position: relative;
|
|
91
|
+
isolation: isolate;
|
|
90
92
|
display: flex;
|
|
91
93
|
flex-direction: column;
|
|
92
94
|
width: 100%;
|
|
93
|
-
|
|
95
|
+
min-height: max(4rem, 100%);
|
|
94
96
|
}
|
|
95
97
|
|
|
96
98
|
fieldset {
|
|
99
|
+
flex-grow: 1;
|
|
97
100
|
min-width: 0;
|
|
98
101
|
min-height: 0;
|
|
102
|
+
height: 100%;
|
|
103
|
+
max-height: 100%;
|
|
104
|
+
padding-inline-start: 0 !important;
|
|
105
|
+
padding-inline-end: 0 !important;
|
|
99
106
|
}
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
|
|
108
|
+
legend {
|
|
109
|
+
position: relative;
|
|
110
|
+
z-index: 2;
|
|
111
|
+
margin-left: 0.75rem;
|
|
112
|
+
max-width: calc(100% - 1.5rem) !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
:host(limel-text-editor[readonly]) limel-markdown {
|
|
116
|
+
display: block;
|
|
117
|
+
padding: 0.75rem;
|
|
102
118
|
}
|
|
103
119
|
|
|
104
120
|
/*
|
|
@@ -11,6 +11,7 @@ import { h } from '@stencil/core';
|
|
|
11
11
|
* @exampleComponent limel-example-text-editor-basic
|
|
12
12
|
* @exampleComponent limel-example-text-editor-as-form-component
|
|
13
13
|
* @exampleComponent limel-example-text-editor-composite
|
|
14
|
+
* @exampleComponent limel-example-text-editor-height
|
|
14
15
|
* @beta
|
|
15
16
|
* @private
|
|
16
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE
|
|
1
|
+
{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/text-editor/text-editor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;;IAkGX,iBAAY,GAAG,GAAG,EAAE,CAAC,CAAC,KAA0B,EAAE,EAAE;MACxD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;;;EAzCK,MAAM;IACT,OAAO,CACH,gBAAU,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;MAC7C,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,YAAY,EAAE,CACb,CACd,CAAC;EACN,CAAC;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO,CACH,YAAM,KAAK,EAAC,2DAA2D,aAEhE,CACV,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KAChD;IAED,OAAO,CACH,iCACI,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,GACnB,CACL,CAAC;EACN,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,kBAAS,IAAI,CAAC,KAAK,CAAU,CAAC;EACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ","sourcesContent":["import { Component, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-composite\n * @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 /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean;\n\n /**\n * Description of the text inside the editor as serialised HTML\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n return (\n <fieldset disabled={this.readonly || this.disabled}>\n {this.renderLabel()}\n {this.renderEditor()}\n </fieldset>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return (\n <span class=\"lime-empty-value-for-readonly lime-looks-like-input-value\">\n –\n </span>\n );\n }\n\n if (this.readonly) {\n return <limel-markdown value={this.value} />;\n }\n\n return (\n <limel-prosemirror-adapter\n onChange={this.handleChange}\n value={this.value}\n />\n );\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return <legend>{this.label}</legend>;\n }\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
|
|
@@ -16033,7 +16033,7 @@ const textEditorMenuItems = [
|
|
|
16033
16033
|
},
|
|
16034
16034
|
];
|
|
16035
16035
|
|
|
16036
|
-
const prosemirrorAdapterCss = "@charset \"UTF-8\";:host(limel-prosemirror-adapter){isolation:isolate;display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding-top:0.75rem}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}: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 )}div#editor .ProseMirror-menubar{position:sticky !important;z-index:1;top:0;margin-left:-0.75rem;margin-right:-0.75rem;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}div#editor .ProseMirror-menubar[style*=\"position: fixed\"]{box-shadow:0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8)}div#editor .ProseMirror-menubar-spacer{display:none}.ProseMirror-menubar{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;padding:0.125rem;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}.ProseMirror-menuitem{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1;height:1.5rem;min-width:1.5rem;border-radius:0.25rem;color:rgb(var(--contrast-1100));font-size:0.8125rem}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.ProseMirror-menuitem:has(.ProseMirror-menu-active){box-shadow:var(--button-shadow-inset);color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg{color:var(--mdc-theme-primary)}.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu){box-shadow:var(--button-shadow-inset)}.ProseMirror-menuitem svg{fill:currentColor;height:1rem;color:rgb(var(--contrast-1100))}.ProseMirror-menuseparator{border-radius:1rem;background-color:rgb(var(--contrast-600));width:0.125rem;height:1rem}.ProseMirror-menu-dropdown{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0 0.5rem}.ProseMirror-menu-dropdown:after{content:\"\";border-left:0.25rem solid transparent;border-right:0.25rem solid transparent;border-top:0.25rem solid currentColor}.ProseMirror-menu-dropdown-menu,.ProseMirror-menu-submenu{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.ProseMirror-menu-dropdown-menu{position:absolute;top:100%;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem}.ProseMirror-menu-submenu{position:absolute;background:rgb(var(--contrast-100));border-radius:0.25rem;padding:0.125rem;display:none;min-width:4em;left:100%;top:-0.75rem}.ProseMirror-menu-dropdown-item{transition:background-color 0.2s ease;cursor:pointer;border-radius:0.375rem;min-height:2.5rem;display:flex;align-items:center;width:100%}.ProseMirror-menu-dropdown-item>div{padding:0 1rem;width:100%}.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover{background-color:rgb(var(--contrast-300))}.ProseMirror-menu-submenu-wrap{position:relative;margin-right:-0.25rem}.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu{display:block}.ProseMirror-menu-submenu-label{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.ProseMirror-menu-submenu-label:after{content:\"\";border-top:0.25rem solid transparent;border-bottom:0.25rem solid transparent;border-left:0.25rem solid currentColor}.ProseMirror-menu-disabled{opacity:0.3;cursor:default}.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu{display:block}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
|
|
16036
|
+
const prosemirrorAdapterCss = "@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 )}:host(limel-prosemirror-adapter){display:block}*{box-sizing:border-box}.ProseMirror-menubar-wrapper{display:grid;grid-template-rows:auto 1fr}.ProseMirror-textblock-dropdown{min-width:3em}.ProseMirror-tooltip .ProseMirror-menu{width:-webkit-fit-content;width:fit-content;white-space:pre}limel-action-bar{--action-bar-border-radius:0.25rem;position:sticky;z-index:1;top:0;background-color:rgba(var(--contrast-200), 0.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);margin:1px;width:calc(100% - 2px)}div#editor{padding:0 0.75rem}.ProseMirror{position:relative;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:\"liga\" 0;padding-top:0.75rem}.ProseMirror [draggable][contenteditable=false]{user-select:text}.ProseMirror:focus-visible{outline:none}.ProseMirror-hideselection{caret-color:transparent}.ProseMirror-hideselection *::selection{background:transparent}.ProseMirror-hideselection *::-moz-selection{background:transparent}.ProseMirror-selectednode{outline:0.125rem solid rgb(var(--color-sky-light))}li.ProseMirror-selectednode{outline:none}li.ProseMirror-selectednode:after{content:\"\";position:absolute;left:-2rem;right:-0.125rem;top:-0.125rem;bottom:-0.125rem;border:0.125rem solid rgb(var(--color-sky-light));pointer-events:none}img.ProseMirror-separator{display:inline !important;border:none !important;margin:0 !important}blockquote{position:relative;font-weight:100;font-size:0.875rem;max-width:100%;line-height:1.4;margin:0;padding:0.5rem 1.25rem;border-radius:0.05rem 0.75rem;background-color:rgb(var(--contrast-300))}blockquote:before,blockquote:after{position:absolute;font-size:2.75rem;opacity:0.4}blockquote:before{content:\"“\";left:0;top:-0.75rem}blockquote:after{content:\"”\";right:0;bottom:-2rem}:host(limel-markdown.truncate-paragraphs) p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}p,li{font-size:0.875rem;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}a{word-break:break-all}p{margin-top:0;margin-bottom:0.5rem}p:only-child{margin-bottom:0}a{transition:color 0.2s ease;color:var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));text-decoration:none}a:hover{color:var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)))}hr{margin:1.75rem 0 2rem 0;border-width:0;border-top:1px solid rgb(var(--contrast-500))}dl{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:1fr;margin-bottom:2rem;border:1px solid rgb(var(--contrast-400));border-radius:0.375rem;background-color:rgb(var(--contrast-200))}dl dt,dl dd{padding:0.375rem 0.5rem;font-size:0.875rem;margin:0}dl dt:nth-of-type(even),dl dd:nth-of-type(even){background-color:rgb(var(--contrast-300))}dl dt:first-child{border-top-left-radius:0.375rem}dl dt:last-child{border-bottom-left-radius:0.375rem}dl dd:first-child{border-top-right-radius:0.375rem}dl dd:last-child{border-bottom-right-radius:0.375rem}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.125rem}h4{font-size:1rem}h5{font-size:0.875rem}h6{font-size:0.75rem}h1,h2{margin-top:0.5rem;margin-bottom:0.5rem;letter-spacing:-0.03125rem;font-weight:500}h3,h4{margin-top:0.75rem;margin-bottom:0.25rem;font-weight:600}h5,h6{margin-top:0.5rem;margin-bottom:0.125rem;font-weight:600}h1,h2,h3,h4,h5,h6{word-break:break-word;hyphens:auto;-webkit-hyphens:auto}:not([contenteditable=true]) h1,:not([contenteditable=true]) h2,:not([contenteditable=true]) h3,:not([contenteditable=true]) h4,:not([contenteditable=true]) h5,:not([contenteditable=true]) h6{text-wrap:balance}[contenteditable=true] h1,[contenteditable=true] h2,[contenteditable=true] h3,[contenteditable=true] h4,[contenteditable=true] h5,[contenteditable=true] h6{text-wrap:initial}ul{list-style:none}ul li{position:relative;margin-left:0.75rem}ul li:before{content:\"\";position:absolute;left:-0.5rem;top:0.5rem;width:0.25rem;height:0.25rem;border-radius:50%;background-color:rgb(var(--contrast-700));display:block}ol{margin-top:0.25rem;padding-left:1rem}ul{margin-top:0.25rem;padding-left:0}ul ul,ul ol,ol ol,ol ul{margin-left:0}li{margin-bottom:0.25rem}code{font-family:ui-monospace, \"Cascadia Code\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace;font-size:0.8125rem;letter-spacing:-0.0125rem;color:rgb(var(--contrast-1300));-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;display:inline-block;border-radius:0.25rem;padding:0.03125rem 0.25rem;background-color:rgb(var(--contrast-600))}pre>code{display:block;margin:0.5rem 0;padding:0.5rem 0.75rem;overflow:auto;white-space:pre-wrap}:host(limel-markdown:not(.no-table-styles)) table{table-layout:auto;min-width:100%;border-collapse:collapse;border-spacing:0;background:transparent;margin:0.75rem 0;border:1px solid rgb(var(--contrast-400))}:host(limel-markdown:not(.no-table-styles)) th,:host(limel-markdown:not(.no-table-styles)) td{text-align:left;vertical-align:top;transition:background-color 0.2s ease;font-size:0.875rem}:host(limel-markdown:not(.no-table-styles)) td{padding:0.5rem 0.375rem 0.75rem 0.375rem}:host(limel-markdown:not(.no-table-styles)) tr th{background-color:rgb(var(--contrast-400));padding:0.25rem 0.375rem;font-weight:normal}:host(limel-markdown:not(.no-table-styles)) tr th:only-child{text-align:center}:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td{background-color:rgb(var(--contrast-200))}:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td{background-color:rgb(var(--contrast-300))}";
|
|
16037
16037
|
|
|
16038
16038
|
const ProsemirrorAdapter = class {
|
|
16039
16039
|
constructor(hostRef) {
|
|
@@ -16064,7 +16064,10 @@ const ProsemirrorAdapter = class {
|
|
|
16064
16064
|
this.actionBarItems = [];
|
|
16065
16065
|
}
|
|
16066
16066
|
render() {
|
|
16067
|
-
return
|
|
16067
|
+
return [
|
|
16068
|
+
h("limel-action-bar", { accessibleLabel: "Toolbar", actions: this.actionBarItems, onItemSelected: this.handleActionBarItem }),
|
|
16069
|
+
h("div", { id: "editor" }),
|
|
16070
|
+
];
|
|
16068
16071
|
}
|
|
16069
16072
|
componentDidLoad() {
|
|
16070
16073
|
this.actionBarItems = textEditorMenuItems;
|