@prosekit/lit 0.0.0-next-20230627094841 → 0.0.1

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.
@@ -1,108 +0,0 @@
1
- import {
2
- __decorateClass,
3
- blockComponentStyles
4
- } from "./chunk-43BFWKM2.js";
5
-
6
- // src/elements/popover.ts
7
- import {
8
- autoUpdate,
9
- computePosition
10
- } from "@floating-ui/dom";
11
- import { LitElement, html } from "lit";
12
- import { customElement, property, query, state } from "lit/decorators.js";
13
- import { styleMap } from "lit/directives/style-map.js";
14
- var Popover = class extends LitElement {
15
- constructor() {
16
- super(...arguments);
17
- this.active = false;
18
- this.reference = null;
19
- this.autoUpdate = false;
20
- }
21
- disconnectedCallback() {
22
- this.cleanup();
23
- }
24
- updated(changed) {
25
- if (!changed.has("computed")) {
26
- this.start();
27
- }
28
- }
29
- start() {
30
- this.cleanup();
31
- const reference = this.reference;
32
- const floating = this.floating;
33
- if (!reference)
34
- return;
35
- if (this.autoUpdate) {
36
- this.cleanupAutoUpdate = autoUpdate(
37
- reference,
38
- floating,
39
- () => void this.compute(),
40
- this.autoUpdateOptions
41
- );
42
- } else {
43
- void this.compute();
44
- }
45
- }
46
- async compute() {
47
- const reference = this.reference;
48
- const floating = this.floating;
49
- if (!reference)
50
- return;
51
- const options = this.options;
52
- this.computed = await computePosition(reference, floating, options);
53
- }
54
- render() {
55
- var _a;
56
- const { x, y, strategy } = (_a = this.computed) != null ? _a : {
57
- x: 0,
58
- y: 0,
59
- strategy: "absolute"
60
- };
61
- const style = {
62
- top: "0",
63
- left: "0",
64
- position: strategy,
65
- transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
66
- display: this.active ? void 0 : "none"
67
- };
68
- return html`<div class="floating" style="${styleMap(style)}"><slot></slot></div>`;
69
- }
70
- cleanup() {
71
- var _a;
72
- (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
73
- this.cleanupAutoUpdate = void 0;
74
- }
75
- };
76
- Popover.styles = blockComponentStyles;
77
- __decorateClass([
78
- property({ type: Boolean, reflect: true })
79
- ], Popover.prototype, "active", 2);
80
- __decorateClass([
81
- query(".floating")
82
- ], Popover.prototype, "floating", 2);
83
- __decorateClass([
84
- property()
85
- ], Popover.prototype, "reference", 2);
86
- __decorateClass([
87
- property({ type: Object })
88
- ], Popover.prototype, "options", 2);
89
- __decorateClass([
90
- property({ type: Boolean, reflect: true })
91
- ], Popover.prototype, "autoUpdate", 2);
92
- __decorateClass([
93
- property({ type: Object })
94
- ], Popover.prototype, "autoUpdateOptions", 2);
95
- __decorateClass([
96
- state()
97
- ], Popover.prototype, "computed", 2);
98
- Popover = __decorateClass([
99
- customElement("prosekit-popover")
100
- ], Popover);
101
- function roundByDPR(value) {
102
- const dpr = window.devicePixelRatio || 1;
103
- return Math.round(value * dpr) / dpr;
104
- }
105
-
106
- export {
107
- Popover
108
- };
@@ -1,109 +0,0 @@
1
- import {
2
- __decorateClass,
3
- blockComponentStyles
4
- } from "./chunk-43BFWKM2.js";
5
-
6
- // src/elements/popover/popover.ts
7
- import {
8
- autoUpdate,
9
- computePosition
10
- } from "@floating-ui/dom";
11
- import "@shoelace-style/shoelace/dist/components/popup/popup.js";
12
- import { LitElement, html } from "lit";
13
- import { customElement, property, query, state } from "lit/decorators.js";
14
- import { styleMap } from "lit/directives/style-map.js";
15
- var Popover = class extends LitElement {
16
- constructor() {
17
- super(...arguments);
18
- this.active = false;
19
- this.reference = null;
20
- this.autoUpdate = false;
21
- }
22
- disconnectedCallback() {
23
- this.cleanup();
24
- }
25
- updated(changed) {
26
- if (!changed.has("computed")) {
27
- this.start();
28
- }
29
- }
30
- start() {
31
- this.cleanup();
32
- const reference = this.reference;
33
- const floating = this.floating;
34
- if (!reference)
35
- return;
36
- if (this.autoUpdate) {
37
- this.cleanupAutoUpdate = autoUpdate(
38
- reference,
39
- floating,
40
- () => void this.compute(),
41
- this.autoUpdateOptions
42
- );
43
- } else {
44
- void this.compute();
45
- }
46
- }
47
- async compute() {
48
- const reference = this.reference;
49
- const floating = this.floating;
50
- if (!reference)
51
- return;
52
- const options = this.options;
53
- this.computed = await computePosition(reference, floating, options);
54
- }
55
- render() {
56
- var _a;
57
- const { x, y, strategy } = (_a = this.computed) != null ? _a : {
58
- x: 0,
59
- y: 0,
60
- strategy: "absolute"
61
- };
62
- const style = {
63
- top: "0",
64
- left: "0",
65
- position: strategy,
66
- transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
67
- display: this.active ? void 0 : "none"
68
- };
69
- return html`<div class="floating" style="${styleMap(style)}"><slot></slot></div>`;
70
- }
71
- cleanup() {
72
- var _a;
73
- (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
74
- this.cleanupAutoUpdate = void 0;
75
- }
76
- };
77
- Popover.styles = blockComponentStyles;
78
- __decorateClass([
79
- property({ type: Boolean, reflect: true })
80
- ], Popover.prototype, "active", 2);
81
- __decorateClass([
82
- query(".floating")
83
- ], Popover.prototype, "floating", 2);
84
- __decorateClass([
85
- property()
86
- ], Popover.prototype, "reference", 2);
87
- __decorateClass([
88
- property({ type: Object })
89
- ], Popover.prototype, "options", 2);
90
- __decorateClass([
91
- property({ type: Boolean, reflect: true })
92
- ], Popover.prototype, "autoUpdate", 2);
93
- __decorateClass([
94
- property({ type: Object })
95
- ], Popover.prototype, "autoUpdateOptions", 2);
96
- __decorateClass([
97
- state()
98
- ], Popover.prototype, "computed", 2);
99
- Popover = __decorateClass([
100
- customElement("prosekit-popover")
101
- ], Popover);
102
- function roundByDPR(value) {
103
- const dpr = window.devicePixelRatio || 1;
104
- return Math.round(value * dpr) / dpr;
105
- }
106
-
107
- export {
108
- Popover
109
- };
@@ -1,189 +0,0 @@
1
- import {
2
- createVisibilityFilter
3
- } from "./chunk-Y34HGIIF.js";
4
- import {
5
- __decorateClass,
6
- blockComponentStyles
7
- } from "./chunk-43BFWKM2.js";
8
-
9
- // src/elements/picker/picker.ts
10
- import {
11
- flip,
12
- inline,
13
- offset,
14
- shift,
15
- size
16
- } from "@floating-ui/dom";
17
- import { ProseKitError } from "@prosekit/core";
18
- import { addSuggestion } from "@prosekit/extension-suggestion";
19
- import { LitElement, html } from "lit";
20
- import { customElement, property, query, state } from "lit/decorators.js";
21
-
22
- // src/elements/menu/is-menu.ts
23
- function isMenu(element) {
24
- var _a, _b;
25
- return ((_a = element == null ? void 0 : element.tagName) == null ? void 0 : _a.toLowerCase()) === "prosekit-menu" || ["menu"].includes((_b = element == null ? void 0 : element.getAttribute("role")) != null ? _b : "");
26
- }
27
-
28
- // src/elements/picker/picker.ts
29
- var Picker = class extends LitElement {
30
- constructor() {
31
- super(...arguments);
32
- this.popoverOptions = defaultPopoverOptions;
33
- }
34
- render() {
35
- return html`<prosekit-popover .active="${this.active}" .reference="${this.reference}" .options="${this.popoverOptions}"><slot @menu-dismiss="${() => {
36
- var _a;
37
- return (_a = this.handleDismiss) == null ? void 0 : _a.call(this);
38
- }}" @menu-select="${() => {
39
- var _a;
40
- return (_a = this.handleSubmit) == null ? void 0 : _a.call(this);
41
- }}"></slot></prosekit-popover>`;
42
- }
43
- firstUpdated(_changedProperties) {
44
- setTimeout(() => {
45
- const editor = this.editor;
46
- if (!editor) {
47
- throw new ProseKitError("Missing 'editor' property");
48
- }
49
- if (!this.rules) {
50
- throw new ProseKitError("Missing 'rules' property");
51
- }
52
- const extension = addSuggestion({
53
- rules: this.rules,
54
- onMatch: ({ dismiss, deleteMatch, match, matchAfter }) => {
55
- var _a;
56
- if (!this.editor)
57
- return;
58
- const editor2 = this.editor;
59
- const span = editor2.view.dom.querySelector(
60
- ".prosemirror-prediction-match"
61
- );
62
- if (span) {
63
- this.reference = span;
64
- }
65
- const matchText = match[0] + ((_a = matchAfter == null ? void 0 : matchAfter[0]) != null ? _a : "");
66
- console.log("matchText:", matchText);
67
- const menu = this.queryMenu();
68
- console.log("menu:", menu);
69
- if (menu)
70
- menu.query = matchText;
71
- this.handleDismiss = () => {
72
- console.log("this.handleDismiss");
73
- dismiss();
74
- };
75
- this.handleSubmit = () => {
76
- console.log("this.handleSubmit");
77
- deleteMatch();
78
- };
79
- },
80
- onDeactivate: () => {
81
- console.log("onDeactivate");
82
- this.reference = void 0;
83
- }
84
- });
85
- this.removeExtension = editor.use(extension);
86
- }, 0);
87
- }
88
- disconnectedCallback() {
89
- super.disconnectedCallback();
90
- this.reference = void 0;
91
- if (this.removeExtension) {
92
- this.removeExtension();
93
- this.removeExtension = void 0;
94
- }
95
- }
96
- updated() {
97
- const menu = this.queryMenu();
98
- if (menu) {
99
- console.log("set active to ", this.active);
100
- menu.active = this.active;
101
- }
102
- }
103
- get active() {
104
- return !!this.reference;
105
- }
106
- queryMenu({
107
- visible = null
108
- } = {}) {
109
- var _a, _b, _c, _d;
110
- const menus = (_c = (_b = (_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) == null ? void 0 : _b.filter(isMenu)) == null ? void 0 : _c.filter(createVisibilityFilter(visible));
111
- return (_d = menus == null ? void 0 : menus[0]) != null ? _d : null;
112
- }
113
- };
114
- Picker.styles = blockComponentStyles;
115
- __decorateClass([
116
- property()
117
- ], Picker.prototype, "editor", 2);
118
- __decorateClass([
119
- property()
120
- ], Picker.prototype, "rules", 2);
121
- __decorateClass([
122
- property({ type: Object })
123
- ], Picker.prototype, "popoverOptions", 2);
124
- __decorateClass([
125
- state()
126
- ], Picker.prototype, "reference", 2);
127
- __decorateClass([
128
- state()
129
- ], Picker.prototype, "removeExtension", 2);
130
- __decorateClass([
131
- state()
132
- ], Picker.prototype, "handleDismiss", 2);
133
- __decorateClass([
134
- state()
135
- ], Picker.prototype, "handleSubmit", 2);
136
- __decorateClass([
137
- query("slot")
138
- ], Picker.prototype, "defaultSlot", 2);
139
- __decorateClass([
140
- query("popover")
141
- ], Picker.prototype, "popover", 2);
142
- Picker = __decorateClass([
143
- customElement("prosekit-picker")
144
- ], Picker);
145
- var defaultDetectOverflowOptions = {
146
- // Make sure the popover is always at least 8px away from the boundary
147
- padding: 8
148
- // boundary: document.body,
149
- };
150
- var defaultPopoverOptions = {
151
- placement: "bottom-end",
152
- middleware: [
153
- offset(({ rects }) => ({
154
- // Put the popover at the bottom right corner
155
- alignmentAxis: -rects.floating.width,
156
- // Move down the popover by 4px
157
- mainAxis: 4
158
- })),
159
- size({
160
- apply: ({ availableHeight, elements }) => {
161
- const style = {
162
- // Minimum acceptable height is 100px.
163
- // `flip` will then take over.....v2
164
- maxHeight: `${Math.max(100, availableHeight)}px`,
165
- overflowY: "auto"
166
- };
167
- Object.assign(elements.floating.style, style);
168
- },
169
- ...defaultDetectOverflowOptions
170
- }),
171
- // Flip the popover to the top if it's overflowing the viewport
172
- flip({
173
- fallbackStrategy: "initialPlacement",
174
- fallbackAxisSideDirection: "start",
175
- crossAxis: false,
176
- ...defaultDetectOverflowOptions
177
- }),
178
- shift({
179
- ...defaultDetectOverflowOptions
180
- }),
181
- // Use the text caret as the reference point
182
- inline()
183
- ]
184
- };
185
-
186
- export {
187
- Picker,
188
- defaultPopoverOptions
189
- };
@@ -1,9 +0,0 @@
1
- // src/contexts/popover-suggestion-context.ts
2
- import { createContext } from "@lit-labs/context";
3
- var popoverSuggestionContext = createContext(
4
- "PROSEKIT_POPOVER_SUGGESTION"
5
- );
6
-
7
- export {
8
- popoverSuggestionContext
9
- };
@@ -1,120 +0,0 @@
1
- import {
2
- blockComponentStyles
3
- } from "./chunk-XEV4EE3R.js";
4
- import {
5
- __decorateClass
6
- } from "./chunk-S65R2BUY.js";
7
-
8
- // src/elements/popover.ts
9
- import {
10
- autoUpdate,
11
- computePosition
12
- } from "@floating-ui/dom";
13
- import { LitElement, html } from "lit";
14
- import { customElement, property, query, state } from "lit/decorators.js";
15
- import { styleMap } from "lit/directives/style-map.js";
16
- var Popover = class extends LitElement {
17
- /** @hidden */
18
- constructor() {
19
- super();
20
- this.active = false;
21
- this.autoUpdate = false;
22
- }
23
- /** @hidden */
24
- disconnectedCallback() {
25
- this.cleanup();
26
- }
27
- /** @hidden */
28
- updated(changed) {
29
- if (!changed.has("computed")) {
30
- this.start();
31
- }
32
- }
33
- /** @hidden */
34
- start() {
35
- this.cleanup();
36
- const reference = this.reference;
37
- const floating = this.floating;
38
- if (!reference)
39
- return;
40
- if (this.autoUpdate) {
41
- this.cleanupAutoUpdate = autoUpdate(
42
- reference,
43
- floating,
44
- () => void this.compute(),
45
- this.autoUpdateOptions
46
- );
47
- } else {
48
- void this.compute();
49
- }
50
- }
51
- /** @hidden */
52
- async compute() {
53
- const reference = this.reference;
54
- const floating = this.floating;
55
- if (!reference)
56
- return;
57
- const options = this.options;
58
- this.computed = await computePosition(reference, floating, options);
59
- }
60
- /** @hidden */
61
- cleanup() {
62
- var _a;
63
- (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
64
- this.cleanupAutoUpdate = void 0;
65
- }
66
- /** @hidden */
67
- render() {
68
- var _a;
69
- const { x, y, strategy } = (_a = this.computed) != null ? _a : {
70
- x: 0,
71
- y: 0,
72
- strategy: "absolute"
73
- };
74
- const style = {
75
- top: "0",
76
- left: "0",
77
- position: strategy,
78
- transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
79
- display: this.active ? void 0 : "none"
80
- };
81
- return html`<div class="floating" style="${styleMap(style)}"><slot></slot></div>`;
82
- }
83
- };
84
- /** @hidden */
85
- Popover.styles = blockComponentStyles;
86
- __decorateClass([
87
- property({ type: Boolean, reflect: true })
88
- ], Popover.prototype, "active", 2);
89
- __decorateClass([
90
- query(".floating")
91
- ], Popover.prototype, "floating", 2);
92
- __decorateClass([
93
- property()
94
- ], Popover.prototype, "reference", 2);
95
- __decorateClass([
96
- property()
97
- ], Popover.prototype, "options", 2);
98
- __decorateClass([
99
- property({
100
- type: Boolean,
101
- reflect: true
102
- })
103
- ], Popover.prototype, "autoUpdate", 2);
104
- __decorateClass([
105
- property({ type: Object })
106
- ], Popover.prototype, "autoUpdateOptions", 2);
107
- __decorateClass([
108
- state()
109
- ], Popover.prototype, "computed", 2);
110
- Popover = __decorateClass([
111
- customElement("prosekit-popover")
112
- ], Popover);
113
- function roundByDPR(value) {
114
- const dpr = window.devicePixelRatio || 1;
115
- return Math.round(value * dpr) / dpr;
116
- }
117
-
118
- export {
119
- Popover
120
- };
@@ -1,108 +0,0 @@
1
- import {
2
- __decorateClass,
3
- blockComponentStyles
4
- } from "./chunk-43BFWKM2.js";
5
-
6
- // src/elements/popover/popover.ts
7
- import {
8
- autoUpdate,
9
- computePosition
10
- } from "@floating-ui/dom";
11
- import { LitElement, html } from "lit";
12
- import { customElement, property, query, state } from "lit/decorators.js";
13
- import { styleMap } from "lit/directives/style-map.js";
14
- var Popover = class extends LitElement {
15
- constructor() {
16
- super(...arguments);
17
- this.active = false;
18
- this.reference = null;
19
- this.autoUpdate = false;
20
- }
21
- disconnectedCallback() {
22
- this.cleanup();
23
- }
24
- updated(changed) {
25
- if (!changed.has("computed")) {
26
- this.start();
27
- }
28
- }
29
- start() {
30
- this.cleanup();
31
- const reference = this.reference;
32
- const floating = this.floating;
33
- if (!reference)
34
- return;
35
- if (this.autoUpdate) {
36
- this.cleanupAutoUpdate = autoUpdate(
37
- reference,
38
- floating,
39
- () => void this.compute(),
40
- this.autoUpdateOptions
41
- );
42
- } else {
43
- void this.compute();
44
- }
45
- }
46
- async compute() {
47
- const reference = this.reference;
48
- const floating = this.floating;
49
- if (!reference)
50
- return;
51
- const options = this.options;
52
- this.computed = await computePosition(reference, floating, options);
53
- }
54
- render() {
55
- var _a;
56
- const { x, y, strategy } = (_a = this.computed) != null ? _a : {
57
- x: 0,
58
- y: 0,
59
- strategy: "absolute"
60
- };
61
- const style = {
62
- top: "0",
63
- left: "0",
64
- position: strategy,
65
- transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
66
- display: this.active ? void 0 : "none"
67
- };
68
- return html`<div class="floating" style="${styleMap(style)}"><slot></slot></div>`;
69
- }
70
- cleanup() {
71
- var _a;
72
- (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
73
- this.cleanupAutoUpdate = void 0;
74
- }
75
- };
76
- Popover.styles = blockComponentStyles;
77
- __decorateClass([
78
- property({ type: Boolean, reflect: true })
79
- ], Popover.prototype, "active", 2);
80
- __decorateClass([
81
- query(".floating")
82
- ], Popover.prototype, "floating", 2);
83
- __decorateClass([
84
- property()
85
- ], Popover.prototype, "reference", 2);
86
- __decorateClass([
87
- property({ type: Object })
88
- ], Popover.prototype, "options", 2);
89
- __decorateClass([
90
- property({ type: Boolean, reflect: true })
91
- ], Popover.prototype, "autoUpdate", 2);
92
- __decorateClass([
93
- property({ type: Object })
94
- ], Popover.prototype, "autoUpdateOptions", 2);
95
- __decorateClass([
96
- state()
97
- ], Popover.prototype, "computed", 2);
98
- Popover = __decorateClass([
99
- customElement("prosekit-popover")
100
- ], Popover);
101
- function roundByDPR(value) {
102
- const dpr = window.devicePixelRatio || 1;
103
- return Math.round(value * dpr) / dpr;
104
- }
105
-
106
- export {
107
- Popover
108
- };
@@ -1,13 +0,0 @@
1
- // src/styles/block-component.styles.ts
2
- import { css as css2 } from "lit";
3
-
4
- // src/styles/component.styles.ts
5
- import { css } from "lit";
6
- var componentStyles = css`:host{box-sizing:border-box}:host *,:host ::after,:host ::before{box-sizing:inherit}`;
7
-
8
- // src/styles/block-component.styles.ts
9
- var blockComponentStyles = css2`${componentStyles}:host{display:block}`;
10
-
11
- export {
12
- blockComponentStyles
13
- };
@@ -1,20 +0,0 @@
1
- // src/utils/visibility.ts
2
- function isVisibleElement(element) {
3
- return !element.hidden;
4
- }
5
- function isHiddenElement(element) {
6
- return element.hidden;
7
- }
8
- function createVisibilityFilter(visible) {
9
- if (visible === true)
10
- return isVisibleElement;
11
- if (visible === false)
12
- return isHiddenElement;
13
- return () => true;
14
- }
15
-
16
- export {
17
- isVisibleElement,
18
- isHiddenElement,
19
- createVisibilityFilter
20
- };
@@ -1,11 +0,0 @@
1
- import {
2
- Picker,
3
- defaultPopoverOptions
4
- } from "./chunk-NMFTOM6J.js";
5
- import "./chunk-Y34HGIIF.js";
6
- import "./chunk-JFOZX34E.js";
7
- import "./chunk-43BFWKM2.js";
8
- export {
9
- Picker,
10
- defaultPopoverOptions
11
- };