@domternal/vue 0.6.2 → 0.7.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/README.md +12 -10
- package/dist/Domternal.d.ts +34 -0
- package/dist/Domternal.d.ts.map +1 -0
- package/dist/DomternalEditor.d.ts +224 -0
- package/dist/DomternalEditor.d.ts.map +1 -0
- package/dist/DomternalFloatingMenu.d.ts +94 -0
- package/dist/DomternalFloatingMenu.d.ts.map +1 -0
- package/dist/EditorContent.d.ts +44 -0
- package/dist/EditorContent.d.ts.map +1 -0
- package/dist/EditorContext.d.ts +38 -0
- package/dist/EditorContext.d.ts.map +1 -0
- package/dist/bubble-menu/DomternalBubbleMenu.d.ts +87 -0
- package/dist/bubble-menu/DomternalBubbleMenu.d.ts.map +1 -0
- package/dist/bubble-menu/useBubbleMenu.d.ts +56 -0
- package/dist/bubble-menu/useBubbleMenu.d.ts.map +1 -0
- package/dist/emoji-picker/DomternalEmojiPicker.d.ts +31 -0
- package/dist/emoji-picker/DomternalEmojiPicker.d.ts.map +1 -0
- package/dist/emoji-picker/useEmojiPicker.d.ts +24 -0
- package/dist/emoji-picker/useEmojiPicker.d.ts.map +1 -0
- package/dist/index.d.ts +145 -33
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +962 -103
- package/dist/index.js.map +1 -1
- package/dist/node-views/NodeViewContent.d.ts +30 -0
- package/dist/node-views/NodeViewContent.d.ts.map +1 -0
- package/dist/node-views/NodeViewWrapper.d.ts +29 -0
- package/dist/node-views/NodeViewWrapper.d.ts.map +1 -0
- package/dist/node-views/VueNodeViewContext.d.ts +27 -0
- package/dist/node-views/VueNodeViewContext.d.ts.map +1 -0
- package/dist/node-views/VueNodeViewRenderer.d.ts +88 -0
- package/dist/node-views/VueNodeViewRenderer.d.ts.map +1 -0
- package/dist/notion-color-picker/DomternalNotionColorPicker.d.ts +22 -0
- package/dist/notion-color-picker/DomternalNotionColorPicker.d.ts.map +1 -0
- package/dist/notion-color-picker/index.d.ts +5 -0
- package/dist/notion-color-picker/index.d.ts.map +1 -0
- package/dist/notion-color-picker/useNotionColorPicker.d.ts +35 -0
- package/dist/notion-color-picker/useNotionColorPicker.d.ts.map +1 -0
- package/dist/toolbar/DomternalToolbar.d.ts +41 -0
- package/dist/toolbar/DomternalToolbar.d.ts.map +1 -0
- package/dist/toolbar/ToolbarButton.d.ts +72 -0
- package/dist/toolbar/ToolbarButton.d.ts.map +1 -0
- package/dist/toolbar/ToolbarDropdown.d.ts +76 -0
- package/dist/toolbar/ToolbarDropdown.d.ts.map +1 -0
- package/dist/toolbar/ToolbarDropdownPanel.d.ts +34 -0
- package/dist/toolbar/ToolbarDropdownPanel.d.ts.map +1 -0
- package/dist/toolbar/useComputedStyle.d.ts +12 -0
- package/dist/toolbar/useComputedStyle.d.ts.map +1 -0
- package/dist/toolbar/useKeyboardNav.d.ts +9 -0
- package/dist/toolbar/useKeyboardNav.d.ts.map +1 -0
- package/dist/toolbar/useToolbarController.d.ts +24 -0
- package/dist/toolbar/useToolbarController.d.ts.map +1 -0
- package/dist/toolbar/useToolbarIcons.d.ts +12 -0
- package/dist/toolbar/useToolbarIcons.d.ts.map +1 -0
- package/dist/toolbar/useTooltip.d.ts +5 -0
- package/dist/toolbar/useTooltip.d.ts.map +1 -0
- package/dist/useEditor.d.ts +63 -0
- package/dist/useEditor.d.ts.map +1 -0
- package/dist/useEditorState.d.ts +28 -0
- package/dist/useEditorState.d.ts.map +1 -0
- package/dist/utils.d.ts +39 -0
- package/dist/utils.d.ts.map +1 -0
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -3,29 +3,31 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@domternal/vue)
|
|
4
4
|
[](https://github.com/domternal/domternal/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular, React, and
|
|
6
|
+
A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular, React, Vue, and Vanilla wrappers.
|
|
7
7
|
Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made framework components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
|
|
8
8
|
|
|
9
9
|
## Links
|
|
10
10
|
|
|
11
|
-
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/introduction)</u>
|
|
12
|
-
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
11
|
+
<u>[Website](https://domternal.dev)</u> • <u>[Documentation](https://domternal.dev/v1/introduction)</u>
|
|
12
|
+
<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> • <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> • <u>[StackBlitz (Vue)](https://stackblitz.com/edit/domternal-vue-full-example)</u> • <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u>
|
|
13
13
|
|
|
14
14
|
## Features
|
|
15
15
|
|
|
16
16
|
See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a full breakdown of all packages and what each one includes.
|
|
17
17
|
|
|
18
18
|
- **Headless core** - use with any framework or vanilla JS/TS
|
|
19
|
-
- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
|
|
20
|
-
- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, custom node views (React 18+)
|
|
21
|
-
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, custom node views (Vue 3.3+)
|
|
22
|
-
- **
|
|
23
|
-
- **
|
|
19
|
+
- **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker (signals, OnPush, zoneless-ready)
|
|
20
|
+
- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (React 18+)
|
|
21
|
+
- **Vue components** - composable `Domternal` component, `useEditor`/`useEditorState` composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+)
|
|
22
|
+
- **Vanilla wrapper** - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
|
|
23
|
+
- **Notion-style block UX** - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
|
|
24
|
+
- **65+ extensions across 15 packages** - nodes, marks, and behavior extensions
|
|
25
|
+
- **120+ chainable commands** - `editor.chain().focus().toggleBold().run()`
|
|
24
26
|
- **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
|
|
25
27
|
- **Tree-shakeable** - import only what you use, your bundler strips the rest
|
|
26
|
-
- **~
|
|
28
|
+
- **~44 KB gzipped** (own code), <u>[see Packages](https://domternal.dev/v1/packages)</u> for full bundle breakdown with ProseMirror
|
|
27
29
|
- **TypeScript first** - 100% typed, zero `any`
|
|
28
|
-
- **
|
|
30
|
+
- **15,000+ tests** - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
|
|
29
31
|
- **Light and dark theme** - 70+ CSS custom properties for full visual control
|
|
30
32
|
- **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
|
|
31
33
|
- **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { Component } from 'vue';
|
|
2
|
+
import { type UseEditorOptions } from './useEditor.js';
|
|
3
|
+
export interface DomternalProps extends UseEditorOptions {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Composable root component that creates an editor and provides it to all
|
|
7
|
+
* subcomponents via inject. No need to pass `editor` prop to children.
|
|
8
|
+
*
|
|
9
|
+
* Supports namespaced subcomponents in `<script setup>` templates:
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```vue
|
|
13
|
+
* <script setup>
|
|
14
|
+
* import { Domternal } from '@domternal/vue';
|
|
15
|
+
* </script>
|
|
16
|
+
* <template>
|
|
17
|
+
* <Domternal :extensions="extensions" :content="content">
|
|
18
|
+
* <Domternal.Toolbar />
|
|
19
|
+
* <Domternal.Content />
|
|
20
|
+
* <Domternal.BubbleMenu :contexts="{ text: ['bold', 'italic'] }" />
|
|
21
|
+
* <Domternal.EmojiPicker :emojis="emojis" />
|
|
22
|
+
* </Domternal>
|
|
23
|
+
* </template>
|
|
24
|
+
* ```
|
|
25
|
+
*/
|
|
26
|
+
export declare const Domternal: Component & {
|
|
27
|
+
Content: Component;
|
|
28
|
+
Loading: Component;
|
|
29
|
+
Toolbar: Component;
|
|
30
|
+
BubbleMenu: Component;
|
|
31
|
+
FloatingMenu: Component;
|
|
32
|
+
EmojiPicker: Component;
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=Domternal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Domternal.d.ts","sourceRoot":"","sources":["../src/Domternal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAY,MAAM,KAAK,CAAC;AAE/C,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlE,MAAM,WAAW,cAAe,SAAQ,gBAAgB;CAEvD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,EA4CL,SAAS,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,SAAS,CAAC;IACxB,WAAW,EAAE,SAAS,CAAC;CACxB,CAAC"}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import type { Content, AnyExtension, FocusPosition, JSONContent, Editor } from '@domternal/core';
|
|
3
|
+
export interface DomternalEditorProps {
|
|
4
|
+
extensions?: AnyExtension[];
|
|
5
|
+
content?: Content;
|
|
6
|
+
editable?: boolean;
|
|
7
|
+
autofocus?: FocusPosition;
|
|
8
|
+
immediatelyRender?: boolean;
|
|
9
|
+
outputFormat?: 'html' | 'json';
|
|
10
|
+
modelValue?: Content;
|
|
11
|
+
class?: string;
|
|
12
|
+
onCreate?: (editor: Editor) => void;
|
|
13
|
+
onUpdate?: (props: {
|
|
14
|
+
editor: Editor;
|
|
15
|
+
}) => void;
|
|
16
|
+
onSelectionChange?: (props: {
|
|
17
|
+
editor: Editor;
|
|
18
|
+
}) => void;
|
|
19
|
+
onFocus?: (props: {
|
|
20
|
+
editor: Editor;
|
|
21
|
+
event: FocusEvent;
|
|
22
|
+
}) => void;
|
|
23
|
+
onBlur?: (props: {
|
|
24
|
+
editor: Editor;
|
|
25
|
+
event: FocusEvent;
|
|
26
|
+
}) => void;
|
|
27
|
+
onDestroy?: () => void;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* All-in-one editor component with v-model support and integrated context.
|
|
31
|
+
*
|
|
32
|
+
* Wraps children with provideEditor automatically, so toolbar, bubble menu,
|
|
33
|
+
* and emoji picker components can access the editor via inject.
|
|
34
|
+
*
|
|
35
|
+
* @example Basic usage
|
|
36
|
+
* ```vue
|
|
37
|
+
* <DomternalEditor
|
|
38
|
+
* :extensions="[Bold, Italic, Heading]"
|
|
39
|
+
* content="<p>Hello</p>"
|
|
40
|
+
* />
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* @example v-model (two-way binding)
|
|
44
|
+
* ```vue
|
|
45
|
+
* <DomternalEditor v-model="content" :extensions="extensions" />
|
|
46
|
+
* ```
|
|
47
|
+
*
|
|
48
|
+
* @example With children (toolbar, bubble menu)
|
|
49
|
+
* ```vue
|
|
50
|
+
* <DomternalEditor :extensions="extensions" v-model="content">
|
|
51
|
+
* <DomternalToolbar />
|
|
52
|
+
* <DomternalBubbleMenu :contexts="{ text: ['bold', 'italic'] }" />
|
|
53
|
+
* </DomternalEditor>
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare const DomternalEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
57
|
+
extensions: {
|
|
58
|
+
type: PropType<AnyExtension[]>;
|
|
59
|
+
default: undefined;
|
|
60
|
+
};
|
|
61
|
+
content: {
|
|
62
|
+
type: PropType<Content>;
|
|
63
|
+
default: undefined;
|
|
64
|
+
};
|
|
65
|
+
editable: {
|
|
66
|
+
type: BooleanConstructor;
|
|
67
|
+
default: boolean;
|
|
68
|
+
};
|
|
69
|
+
autofocus: {
|
|
70
|
+
type: PropType<FocusPosition>;
|
|
71
|
+
default: boolean;
|
|
72
|
+
};
|
|
73
|
+
immediatelyRender: {
|
|
74
|
+
type: BooleanConstructor;
|
|
75
|
+
default: boolean;
|
|
76
|
+
};
|
|
77
|
+
outputFormat: {
|
|
78
|
+
type: PropType<"html" | "json">;
|
|
79
|
+
default: string;
|
|
80
|
+
};
|
|
81
|
+
modelValue: {
|
|
82
|
+
type: PropType<Content>;
|
|
83
|
+
default: undefined;
|
|
84
|
+
};
|
|
85
|
+
class: {
|
|
86
|
+
type: StringConstructor;
|
|
87
|
+
default: undefined;
|
|
88
|
+
};
|
|
89
|
+
onCreate: {
|
|
90
|
+
type: PropType<(editor: Editor) => void>;
|
|
91
|
+
default: undefined;
|
|
92
|
+
};
|
|
93
|
+
onUpdate: {
|
|
94
|
+
type: PropType<(props: {
|
|
95
|
+
editor: Editor;
|
|
96
|
+
}) => void>;
|
|
97
|
+
default: undefined;
|
|
98
|
+
};
|
|
99
|
+
onSelectionChange: {
|
|
100
|
+
type: PropType<(props: {
|
|
101
|
+
editor: Editor;
|
|
102
|
+
}) => void>;
|
|
103
|
+
default: undefined;
|
|
104
|
+
};
|
|
105
|
+
onFocus: {
|
|
106
|
+
type: PropType<(props: {
|
|
107
|
+
editor: Editor;
|
|
108
|
+
event: FocusEvent;
|
|
109
|
+
}) => void>;
|
|
110
|
+
default: undefined;
|
|
111
|
+
};
|
|
112
|
+
onBlur: {
|
|
113
|
+
type: PropType<(props: {
|
|
114
|
+
editor: Editor;
|
|
115
|
+
event: FocusEvent;
|
|
116
|
+
}) => void>;
|
|
117
|
+
default: undefined;
|
|
118
|
+
};
|
|
119
|
+
onDestroy: {
|
|
120
|
+
type: PropType<() => void>;
|
|
121
|
+
default: undefined;
|
|
122
|
+
};
|
|
123
|
+
}>, () => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
124
|
+
[key: string]: any;
|
|
125
|
+
}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
126
|
+
[key: string]: any;
|
|
127
|
+
}>[] | undefined)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
128
|
+
'update:modelValue': (_value: Content | JSONContent) => true;
|
|
129
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
130
|
+
extensions: {
|
|
131
|
+
type: PropType<AnyExtension[]>;
|
|
132
|
+
default: undefined;
|
|
133
|
+
};
|
|
134
|
+
content: {
|
|
135
|
+
type: PropType<Content>;
|
|
136
|
+
default: undefined;
|
|
137
|
+
};
|
|
138
|
+
editable: {
|
|
139
|
+
type: BooleanConstructor;
|
|
140
|
+
default: boolean;
|
|
141
|
+
};
|
|
142
|
+
autofocus: {
|
|
143
|
+
type: PropType<FocusPosition>;
|
|
144
|
+
default: boolean;
|
|
145
|
+
};
|
|
146
|
+
immediatelyRender: {
|
|
147
|
+
type: BooleanConstructor;
|
|
148
|
+
default: boolean;
|
|
149
|
+
};
|
|
150
|
+
outputFormat: {
|
|
151
|
+
type: PropType<"html" | "json">;
|
|
152
|
+
default: string;
|
|
153
|
+
};
|
|
154
|
+
modelValue: {
|
|
155
|
+
type: PropType<Content>;
|
|
156
|
+
default: undefined;
|
|
157
|
+
};
|
|
158
|
+
class: {
|
|
159
|
+
type: StringConstructor;
|
|
160
|
+
default: undefined;
|
|
161
|
+
};
|
|
162
|
+
onCreate: {
|
|
163
|
+
type: PropType<(editor: Editor) => void>;
|
|
164
|
+
default: undefined;
|
|
165
|
+
};
|
|
166
|
+
onUpdate: {
|
|
167
|
+
type: PropType<(props: {
|
|
168
|
+
editor: Editor;
|
|
169
|
+
}) => void>;
|
|
170
|
+
default: undefined;
|
|
171
|
+
};
|
|
172
|
+
onSelectionChange: {
|
|
173
|
+
type: PropType<(props: {
|
|
174
|
+
editor: Editor;
|
|
175
|
+
}) => void>;
|
|
176
|
+
default: undefined;
|
|
177
|
+
};
|
|
178
|
+
onFocus: {
|
|
179
|
+
type: PropType<(props: {
|
|
180
|
+
editor: Editor;
|
|
181
|
+
event: FocusEvent;
|
|
182
|
+
}) => void>;
|
|
183
|
+
default: undefined;
|
|
184
|
+
};
|
|
185
|
+
onBlur: {
|
|
186
|
+
type: PropType<(props: {
|
|
187
|
+
editor: Editor;
|
|
188
|
+
event: FocusEvent;
|
|
189
|
+
}) => void>;
|
|
190
|
+
default: undefined;
|
|
191
|
+
};
|
|
192
|
+
onDestroy: {
|
|
193
|
+
type: PropType<() => void>;
|
|
194
|
+
default: undefined;
|
|
195
|
+
};
|
|
196
|
+
}>> & Readonly<{
|
|
197
|
+
"onUpdate:modelValue"?: (_value: Content) => any;
|
|
198
|
+
}>, {
|
|
199
|
+
onFocus: (props: {
|
|
200
|
+
editor: Editor;
|
|
201
|
+
event: FocusEvent;
|
|
202
|
+
}) => void;
|
|
203
|
+
class: string;
|
|
204
|
+
onBlur: (props: {
|
|
205
|
+
editor: Editor;
|
|
206
|
+
event: FocusEvent;
|
|
207
|
+
}) => void;
|
|
208
|
+
content: Content;
|
|
209
|
+
onCreate: (editor: Editor) => void;
|
|
210
|
+
onUpdate: (props: {
|
|
211
|
+
editor: Editor;
|
|
212
|
+
}) => void;
|
|
213
|
+
onSelectionChange: (props: {
|
|
214
|
+
editor: Editor;
|
|
215
|
+
}) => void;
|
|
216
|
+
onDestroy: () => void;
|
|
217
|
+
extensions: AnyExtension[];
|
|
218
|
+
editable: boolean;
|
|
219
|
+
autofocus: FocusPosition;
|
|
220
|
+
outputFormat: "html" | "json";
|
|
221
|
+
immediatelyRender: boolean;
|
|
222
|
+
modelValue: Content;
|
|
223
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
224
|
+
//# sourceMappingURL=DomternalEditor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DomternalEditor.d.ts","sourceRoot":"","sources":["../src/DomternalEditor.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import type { Editor, FloatingMenuItemsOverride, IconSet } from '@domternal/core';
|
|
3
|
+
import type { FloatingMenuKeymap, FloatingMenuOptions } from '@domternal/extension-block-menu';
|
|
4
|
+
export interface DomternalFloatingMenuProps {
|
|
5
|
+
editor?: Editor;
|
|
6
|
+
shouldShow?: FloatingMenuOptions['shouldShow'];
|
|
7
|
+
offset?: number;
|
|
8
|
+
items?: FloatingMenuItemsOverride;
|
|
9
|
+
keymap?: FloatingMenuKeymap;
|
|
10
|
+
icons?: IconSet;
|
|
11
|
+
/**
|
|
12
|
+
* When true, the menu does NOT auto-show on every empty paragraph;
|
|
13
|
+
* it only opens when the BlockHandle `+` button (or any caller of
|
|
14
|
+
* `showFloatingMenu`) explicitly triggers it. Notion-style behaviour
|
|
15
|
+
* - empty rows show a placeholder, the slash menu is the keyboard
|
|
16
|
+
* trigger, the `+` button is the gutter trigger.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
requireExplicitTrigger?: boolean;
|
|
20
|
+
}
|
|
21
|
+
export declare const DomternalFloatingMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
22
|
+
editor: {
|
|
23
|
+
type: PropType<Editor>;
|
|
24
|
+
default: undefined;
|
|
25
|
+
};
|
|
26
|
+
shouldShow: {
|
|
27
|
+
type: PropType<FloatingMenuOptions["shouldShow"]>;
|
|
28
|
+
default: undefined;
|
|
29
|
+
};
|
|
30
|
+
offset: {
|
|
31
|
+
type: NumberConstructor;
|
|
32
|
+
default: number;
|
|
33
|
+
};
|
|
34
|
+
items: {
|
|
35
|
+
type: PropType<FloatingMenuItemsOverride>;
|
|
36
|
+
default: undefined;
|
|
37
|
+
};
|
|
38
|
+
keymap: {
|
|
39
|
+
type: PropType<FloatingMenuKeymap>;
|
|
40
|
+
default: undefined;
|
|
41
|
+
};
|
|
42
|
+
icons: {
|
|
43
|
+
type: PropType<IconSet>;
|
|
44
|
+
default: undefined;
|
|
45
|
+
};
|
|
46
|
+
requireExplicitTrigger: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
default: boolean;
|
|
49
|
+
};
|
|
50
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
51
|
+
[key: string]: any;
|
|
52
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
53
|
+
editor: {
|
|
54
|
+
type: PropType<Editor>;
|
|
55
|
+
default: undefined;
|
|
56
|
+
};
|
|
57
|
+
shouldShow: {
|
|
58
|
+
type: PropType<FloatingMenuOptions["shouldShow"]>;
|
|
59
|
+
default: undefined;
|
|
60
|
+
};
|
|
61
|
+
offset: {
|
|
62
|
+
type: NumberConstructor;
|
|
63
|
+
default: number;
|
|
64
|
+
};
|
|
65
|
+
items: {
|
|
66
|
+
type: PropType<FloatingMenuItemsOverride>;
|
|
67
|
+
default: undefined;
|
|
68
|
+
};
|
|
69
|
+
keymap: {
|
|
70
|
+
type: PropType<FloatingMenuKeymap>;
|
|
71
|
+
default: undefined;
|
|
72
|
+
};
|
|
73
|
+
icons: {
|
|
74
|
+
type: PropType<IconSet>;
|
|
75
|
+
default: undefined;
|
|
76
|
+
};
|
|
77
|
+
requireExplicitTrigger: {
|
|
78
|
+
type: BooleanConstructor;
|
|
79
|
+
default: boolean;
|
|
80
|
+
};
|
|
81
|
+
}>> & Readonly<{}>, {
|
|
82
|
+
editor: Editor;
|
|
83
|
+
icons: IconSet;
|
|
84
|
+
shouldShow: (props: {
|
|
85
|
+
editor: Editor;
|
|
86
|
+
view: import("prosemirror-view").EditorView;
|
|
87
|
+
state: import("prosemirror-state").EditorState;
|
|
88
|
+
}) => boolean;
|
|
89
|
+
offset: number;
|
|
90
|
+
items: FloatingMenuItemsOverride;
|
|
91
|
+
keymap: FloatingMenuKeymap;
|
|
92
|
+
requireExplicitTrigger: boolean;
|
|
93
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
94
|
+
//# sourceMappingURL=DomternalFloatingMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DomternalFloatingMenu.d.ts","sourceRoot":"","sources":["../src/DomternalFloatingMenu.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAMpC,OAAO,KAAK,EACV,MAAM,EAEN,yBAAyB,EACzB,OAAO,EACR,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,iCAAiC,CAAC;AAGzC,MAAM,WAAW,0BAA0B;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,qBAAqB;;cAGJ,QAAQ,CAAC,MAAM,CAAC;;;;cACV,QAAQ,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;;;;;;;;cAG9C,QAAQ,CAAC,yBAAyB,CAAC;;;;cAGtC,QAAQ,CAAC,kBAAkB,CAAC;;;;cAC7B,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;cARhB,QAAQ,CAAC,MAAM,CAAC;;;;cACV,QAAQ,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;;;;;;;;cAG9C,QAAQ,CAAC,yBAAyB,CAAC;;;;cAGtC,QAAQ,CAAC,kBAAkB,CAAC;;;;cAC7B,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;;;;;4EAsO5C,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { PropType } from 'vue';
|
|
2
|
+
import type { Editor } from '@domternal/core';
|
|
3
|
+
/**
|
|
4
|
+
* Renders the ProseMirror editor view into a div element.
|
|
5
|
+
*
|
|
6
|
+
* Use this with `useEditor` for a flexible, decoupled pattern where the
|
|
7
|
+
* editor composable and rendering are separated.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```vue
|
|
11
|
+
* <script setup>
|
|
12
|
+
* import { useEditor, EditorContent } from '@domternal/vue';
|
|
13
|
+
* const { editor } = useEditor({ extensions, content });
|
|
14
|
+
* </script>
|
|
15
|
+
* <template>
|
|
16
|
+
* <EditorContent :editor="editor" class="my-editor" />
|
|
17
|
+
* </template>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare const EditorContent: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
21
|
+
editor: {
|
|
22
|
+
type: PropType<Editor | null>;
|
|
23
|
+
default: null;
|
|
24
|
+
};
|
|
25
|
+
class: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
default: undefined;
|
|
28
|
+
};
|
|
29
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
30
|
+
[key: string]: any;
|
|
31
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
32
|
+
editor: {
|
|
33
|
+
type: PropType<Editor | null>;
|
|
34
|
+
default: null;
|
|
35
|
+
};
|
|
36
|
+
class: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
default: undefined;
|
|
39
|
+
};
|
|
40
|
+
}>> & Readonly<{}>, {
|
|
41
|
+
class: string;
|
|
42
|
+
editor: Editor | null;
|
|
43
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
44
|
+
//# sourceMappingURL=EditorContent.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../src/EditorContent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,aAAa;;cAIJ,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;;;;;;;cAAvB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;;;;;;;4EA6B3C,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { InjectionKey, ShallowRef } from 'vue';
|
|
2
|
+
import type { Editor } from '@domternal/core';
|
|
3
|
+
/**
|
|
4
|
+
* Typed injection key for the editor instance.
|
|
5
|
+
* Components use this via provide/inject to share the editor
|
|
6
|
+
* without prop drilling.
|
|
7
|
+
*/
|
|
8
|
+
export declare const EDITOR_KEY: InjectionKey<ShallowRef<Editor | null>>;
|
|
9
|
+
/**
|
|
10
|
+
* Provides an editor instance to all descendant components via Vue's
|
|
11
|
+
* provide/inject system. Also stores the appContext in the WeakMap
|
|
12
|
+
* for VueNodeViewRenderer to forward the provide/inject chain.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```ts
|
|
16
|
+
* const { editor } = useEditor({ extensions, content });
|
|
17
|
+
* provideEditor(editor);
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare function provideEditor(editor: ShallowRef<Editor | null>): void;
|
|
21
|
+
/**
|
|
22
|
+
* Access the editor instance from the nearest provider.
|
|
23
|
+
*
|
|
24
|
+
* @returns `{ editor }` where editor is a ShallowRef that may be null
|
|
25
|
+
* if the provider has no editor yet or if used outside a provider.
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```ts
|
|
29
|
+
* const { editor } = useCurrentEditor();
|
|
30
|
+
* if (editor.value) {
|
|
31
|
+
* editor.value.commands.toggleBold();
|
|
32
|
+
* }
|
|
33
|
+
* ```
|
|
34
|
+
*/
|
|
35
|
+
export declare function useCurrentEditor(): {
|
|
36
|
+
editor: ShallowRef<Editor | null>;
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=EditorContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditorContext.d.ts","sourceRoot":"","sources":["../src/EditorContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,CAA8B,CAAC;AAE9F;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,CA8BrE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,IAAI;IAAE,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,CAAA;CAAE,CAGxE"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import type { PropType, VNode } from 'vue';
|
|
2
|
+
import type { Editor, BubbleMenuOptions } from '@domternal/core';
|
|
3
|
+
export interface DomternalBubbleMenuProps {
|
|
4
|
+
editor?: Editor;
|
|
5
|
+
shouldShow?: BubbleMenuOptions['shouldShow'];
|
|
6
|
+
placement?: 'top' | 'bottom';
|
|
7
|
+
offset?: number;
|
|
8
|
+
updateDelay?: number;
|
|
9
|
+
items?: string[];
|
|
10
|
+
contexts?: Record<string, string[] | true | null>;
|
|
11
|
+
}
|
|
12
|
+
export declare const DomternalBubbleMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
13
|
+
editor: {
|
|
14
|
+
type: PropType<Editor>;
|
|
15
|
+
default: undefined;
|
|
16
|
+
};
|
|
17
|
+
shouldShow: {
|
|
18
|
+
type: PropType<BubbleMenuOptions["shouldShow"]>;
|
|
19
|
+
default: undefined;
|
|
20
|
+
};
|
|
21
|
+
placement: {
|
|
22
|
+
type: PropType<"top" | "bottom">;
|
|
23
|
+
default: string;
|
|
24
|
+
};
|
|
25
|
+
offset: {
|
|
26
|
+
type: NumberConstructor;
|
|
27
|
+
default: number;
|
|
28
|
+
};
|
|
29
|
+
updateDelay: {
|
|
30
|
+
type: NumberConstructor;
|
|
31
|
+
default: number;
|
|
32
|
+
};
|
|
33
|
+
items: {
|
|
34
|
+
type: PropType<string[]>;
|
|
35
|
+
default: undefined;
|
|
36
|
+
};
|
|
37
|
+
contexts: {
|
|
38
|
+
type: PropType<Record<string, string[] | true | null>>;
|
|
39
|
+
default: undefined;
|
|
40
|
+
};
|
|
41
|
+
}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
42
|
+
[key: string]: any;
|
|
43
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
44
|
+
editor: {
|
|
45
|
+
type: PropType<Editor>;
|
|
46
|
+
default: undefined;
|
|
47
|
+
};
|
|
48
|
+
shouldShow: {
|
|
49
|
+
type: PropType<BubbleMenuOptions["shouldShow"]>;
|
|
50
|
+
default: undefined;
|
|
51
|
+
};
|
|
52
|
+
placement: {
|
|
53
|
+
type: PropType<"top" | "bottom">;
|
|
54
|
+
default: string;
|
|
55
|
+
};
|
|
56
|
+
offset: {
|
|
57
|
+
type: NumberConstructor;
|
|
58
|
+
default: number;
|
|
59
|
+
};
|
|
60
|
+
updateDelay: {
|
|
61
|
+
type: NumberConstructor;
|
|
62
|
+
default: number;
|
|
63
|
+
};
|
|
64
|
+
items: {
|
|
65
|
+
type: PropType<string[]>;
|
|
66
|
+
default: undefined;
|
|
67
|
+
};
|
|
68
|
+
contexts: {
|
|
69
|
+
type: PropType<Record<string, string[] | true | null>>;
|
|
70
|
+
default: undefined;
|
|
71
|
+
};
|
|
72
|
+
}>> & Readonly<{}>, {
|
|
73
|
+
placement: "bottom" | "top";
|
|
74
|
+
editor: Editor;
|
|
75
|
+
shouldShow: (props: {
|
|
76
|
+
editor: Editor;
|
|
77
|
+
view: import("prosemirror-view").EditorView;
|
|
78
|
+
state: import("prosemirror-state").EditorState;
|
|
79
|
+
from: number;
|
|
80
|
+
to: number;
|
|
81
|
+
}) => boolean;
|
|
82
|
+
offset: number;
|
|
83
|
+
updateDelay: number;
|
|
84
|
+
items: string[];
|
|
85
|
+
contexts: Record<string, true | string[] | null>;
|
|
86
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
87
|
+
//# sourceMappingURL=DomternalBubbleMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DomternalBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/DomternalBubbleMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAc,KAAK,EAAE,MAAM,KAAK,CAAC;AAMvD,OAAO,KAAK,EAAE,MAAM,EAAkC,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQjG,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,mBAAmB;;cAGF,QAAQ,CAAC,MAAM,CAAC;;;;cACV,QAAQ,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;;;;cAC5C,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;;;;;;;;;;;;cAG/B,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;cACd,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;;;;;;;cANlD,QAAQ,CAAC,MAAM,CAAC;;;;cACV,QAAQ,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;;;;cAC5C,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC;;;;;;;;;;;;cAG/B,QAAQ,CAAC,MAAM,EAAE,CAAC;;;;cACd,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;;;;;;;;;;;;;;;;;4EAsJ9E,CAAC"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import type { Ref, ShallowRef } from 'vue';
|
|
2
|
+
import type { Editor, ToolbarButton, ToolbarDropdown, BubbleMenuOptions } from '@domternal/core';
|
|
3
|
+
interface BubbleMenuSeparator {
|
|
4
|
+
type: 'separator';
|
|
5
|
+
name: string;
|
|
6
|
+
}
|
|
7
|
+
export type BubbleMenuItem = ToolbarButton | ToolbarDropdown | BubbleMenuSeparator;
|
|
8
|
+
/**
|
|
9
|
+
* Live state for the bubble-menu trailing buttons. Mirrors Angular's
|
|
10
|
+
* `syncTrailingButtonsState` output. Computed per editor transaction and
|
|
11
|
+
* coalesced into a single object so each transaction triggers at most one
|
|
12
|
+
* re-render.
|
|
13
|
+
*/
|
|
14
|
+
export interface BubbleMenuTrailingState {
|
|
15
|
+
/** True when current selection is a NodeSelection (image, HR, ...). Trailing buttons hide in that case. */
|
|
16
|
+
isNodeSelection: boolean;
|
|
17
|
+
/** True when the `notionColorPicker` extension is loaded on this editor (cached once per editor). */
|
|
18
|
+
showColorPickerButton: boolean;
|
|
19
|
+
/** True when the `blockContextMenu` extension is loaded on this editor (cached once per editor). */
|
|
20
|
+
showBlockMenuButton: boolean;
|
|
21
|
+
/** True when the selection spans more than one top-level block (multi-block "..." disable). */
|
|
22
|
+
blockMenuButtonDisabled: boolean;
|
|
23
|
+
/** CSS color value for the "A" trigger glyph (e.g. `var(--dm-block-text-yellow)`), or null. */
|
|
24
|
+
currentTextColorVar: string | null;
|
|
25
|
+
/** CSS color value for the "A" trigger underline, or null. */
|
|
26
|
+
currentBgColorVar: string | null;
|
|
27
|
+
/** True when any token-based text or background color is applied at the cursor. */
|
|
28
|
+
hasAnyColor: boolean;
|
|
29
|
+
}
|
|
30
|
+
export interface UseBubbleMenuOptions {
|
|
31
|
+
editor: ShallowRef<Editor | null>;
|
|
32
|
+
shouldShow?: BubbleMenuOptions['shouldShow'] | undefined;
|
|
33
|
+
placement?: 'top' | 'bottom' | undefined;
|
|
34
|
+
offset?: number | undefined;
|
|
35
|
+
updateDelay?: number | undefined;
|
|
36
|
+
items?: string[] | undefined;
|
|
37
|
+
contexts?: Record<string, string[] | true | null> | undefined;
|
|
38
|
+
}
|
|
39
|
+
export interface UseBubbleMenuResult {
|
|
40
|
+
menuRef: Ref<HTMLDivElement | undefined>;
|
|
41
|
+
resolvedItems: ShallowRef<BubbleMenuItem[]>;
|
|
42
|
+
isItemActive: (item: ToolbarButton) => boolean;
|
|
43
|
+
isItemDisabled: (item: ToolbarButton) => boolean;
|
|
44
|
+
executeCommand: (item: ToolbarButton, event?: Event) => void;
|
|
45
|
+
activeVersion: Ref<number>;
|
|
46
|
+
getCachedIcon: (name: string) => string;
|
|
47
|
+
/** Live trailing-button state (color preview, node-selection gate, multi-block disable). */
|
|
48
|
+
trailing: ShallowRef<BubbleMenuTrailingState>;
|
|
49
|
+
/** Open the Notion color picker by emitting `notionColorOpen` with the trigger as anchor. */
|
|
50
|
+
openColorPicker: (anchor: HTMLElement) => void;
|
|
51
|
+
/** Open the block context menu by dispatching `dm:block-context-menu-open` on `.dm-editor`. */
|
|
52
|
+
openBlockContextMenu: (anchor: HTMLElement) => void;
|
|
53
|
+
}
|
|
54
|
+
export declare function useBubbleMenu(options: UseBubbleMenuOptions): UseBubbleMenuResult;
|
|
55
|
+
export {};
|
|
56
|
+
//# sourceMappingURL=useBubbleMenu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBubbleMenu.d.ts","sourceRoot":"","sources":["../../src/bubble-menu/useBubbleMenu.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3C,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAuBjG,UAAU,mBAAmB;IAAG,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AACjE,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,mBAAmB,CAAC;AAEnF;;;;;GAKG;AACH,MAAM,WAAW,uBAAuB;IACtC,2GAA2G;IAC3G,eAAe,EAAE,OAAO,CAAC;IACzB,qGAAqG;IACrG,qBAAqB,EAAE,OAAO,CAAC;IAC/B,oGAAoG;IACpG,mBAAmB,EAAE,OAAO,CAAC;IAC7B,+FAA+F;IAC/F,uBAAuB,EAAE,OAAO,CAAC;IACjC,+FAA+F;IAC/F,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,8DAA8D;IAC9D,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,mFAAmF;IACnF,WAAW,EAAE,OAAO,CAAC;CACtB;AA8BD,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,iBAAiB,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC;IACzD,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;CAC/D;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,GAAG,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;IACzC,aAAa,EAAE,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,CAAC;IAC/C,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,CAAC;IACjD,cAAc,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,4FAA4F;IAC5F,QAAQ,EAAE,UAAU,CAAC,uBAAuB,CAAC,CAAC;IAC9C,6FAA6F;IAC7F,eAAe,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,+FAA+F;IAC/F,oBAAoB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CAgchF"}
|