@openeditor/ui 0.0.4

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.
Files changed (7) hide show
  1. package/README.md +23 -0
  2. package/dist/index.css +334 -0
  3. package/dist/index.css.map +1 -0
  4. package/dist/index.d.ts +25 -0
  5. package/dist/index.js +88 -0
  6. package/dist/index.js.map +1 -0
  7. package/package.json +38 -0
package/README.md ADDED
@@ -0,0 +1,23 @@
1
+ # `@openeditor/ui`
2
+
3
+ Optional styled UI components for OpenEditor.
4
+
5
+ ## Public Surface
6
+
7
+ - `OpenEditor` for a composed editor surface
8
+ - `OpenEditorSlashMenu` for the default slash menu UI
9
+ - `OpenEditorSelectionBubble` for inline formatting UI
10
+ - `OpenEditorContent` and `useOpenEditorController` re-exported from `@openeditor/react`
11
+
12
+ The UI package owns the default CSS and overlay rendering. Menus portal to `document.body` by default so app-shell transforms and filters do not distort viewport-based positioning.
13
+
14
+ ## Quick Start
15
+
16
+ ```tsx
17
+ import "@openeditor/ui/styles.css";
18
+ import { OpenEditor } from "@openeditor/ui";
19
+
20
+ export function Example() {
21
+ return <OpenEditor />;
22
+ }
23
+ ```
package/dist/index.css ADDED
@@ -0,0 +1,334 @@
1
+ /* src/styles.css */
2
+ .oe-editor-surface {
3
+ display: grid;
4
+ gap: 12px;
5
+ position: relative;
6
+ }
7
+ .oe-canvas {
8
+ min-height: calc(100vh - 96px);
9
+ }
10
+ .oe-prosemirror,
11
+ .oe-viewer {
12
+ color: var(--oe-text, #171717);
13
+ }
14
+ .oe-prosemirror {
15
+ min-height: calc(100vh - 96px);
16
+ outline: none;
17
+ }
18
+ .oe-prosemirror > *:first-child,
19
+ .oe-viewer > *:first-child {
20
+ margin-top: 0;
21
+ }
22
+ .oe-prosemirror > *:last-child,
23
+ .oe-viewer > *:last-child {
24
+ margin-bottom: 0;
25
+ }
26
+ .oe-prosemirror p.is-editor-empty:first-child::before {
27
+ color: var(--oe-placeholder, #a3a3a3);
28
+ content: attr(data-placeholder);
29
+ float: left;
30
+ height: 0;
31
+ pointer-events: none;
32
+ }
33
+ .oe-prosemirror img,
34
+ .oe-viewer img {
35
+ border-radius: 8px;
36
+ display: block;
37
+ margin: 16px 0;
38
+ max-width: 100%;
39
+ }
40
+ .oe-prosemirror blockquote,
41
+ .oe-viewer blockquote {
42
+ border-left: 3px solid var(--oe-accent, #f5f5f5);
43
+ margin: 18px 0;
44
+ padding-left: 16px;
45
+ }
46
+ .oe-prosemirror pre,
47
+ .oe-viewer pre {
48
+ background: var(--oe-code-bg, #f5f5f5);
49
+ border-radius: 8px;
50
+ color: var(--oe-code-text, #171717);
51
+ overflow: auto;
52
+ padding: 14px;
53
+ }
54
+ .oe-prosemirror code,
55
+ .oe-viewer code {
56
+ font-family:
57
+ "SFMono-Regular",
58
+ Consolas,
59
+ "Liberation Mono",
60
+ monospace;
61
+ }
62
+ .oe-prosemirror p,
63
+ .oe-prosemirror ul,
64
+ .oe-prosemirror ol,
65
+ .oe-viewer p,
66
+ .oe-viewer ul,
67
+ .oe-viewer ol {
68
+ color: var(--oe-text-soft, #262626);
69
+ font-size: 16px;
70
+ line-height: 1.6;
71
+ }
72
+ .oe-prosemirror h1,
73
+ .oe-prosemirror h2,
74
+ .oe-prosemirror h3,
75
+ .oe-prosemirror h4,
76
+ .oe-prosemirror h5,
77
+ .oe-prosemirror h6,
78
+ .oe-viewer h1,
79
+ .oe-viewer h2,
80
+ .oe-viewer h3,
81
+ .oe-viewer h4,
82
+ .oe-viewer h5,
83
+ .oe-viewer h6 {
84
+ color: var(--oe-heading, var(--oe-text, #171717));
85
+ font-weight: 700;
86
+ line-height: 1.2;
87
+ margin: 24px 0 10px;
88
+ }
89
+ .oe-prosemirror h1,
90
+ .oe-viewer h1 {
91
+ font-size: 2em;
92
+ }
93
+ .oe-prosemirror h2,
94
+ .oe-viewer h2 {
95
+ font-size: 1.5em;
96
+ }
97
+ .oe-prosemirror h3,
98
+ .oe-viewer h3 {
99
+ font-size: 1.25em;
100
+ }
101
+ .oe-prosemirror h4,
102
+ .oe-viewer h4 {
103
+ font-size: 1.125em;
104
+ }
105
+ .oe-prosemirror h5,
106
+ .oe-prosemirror h6,
107
+ .oe-viewer h5,
108
+ .oe-viewer h6 {
109
+ font-size: 1em;
110
+ }
111
+ .oe-prosemirror ul:not([data-type=taskList]),
112
+ .oe-viewer ul:not([data-type=taskList]) {
113
+ list-style: disc;
114
+ padding-left: 1.5em;
115
+ }
116
+ .oe-prosemirror ol,
117
+ .oe-viewer ol {
118
+ list-style: decimal;
119
+ padding-left: 1.5em;
120
+ }
121
+ .oe-prosemirror li,
122
+ .oe-viewer li {
123
+ margin: 4px 0;
124
+ }
125
+ .oe-prosemirror hr,
126
+ .oe-divider,
127
+ .oe-viewer hr {
128
+ border: 0;
129
+ cursor: pointer;
130
+ height: 1px;
131
+ margin: 18px 0;
132
+ padding: 10px 0;
133
+ position: relative;
134
+ }
135
+ .oe-prosemirror hr::after,
136
+ .oe-divider::after,
137
+ .oe-viewer hr::after {
138
+ background: var(--oe-border, #e5e5e5);
139
+ content: "";
140
+ display: block;
141
+ height: 1px;
142
+ left: 0;
143
+ pointer-events: none;
144
+ position: absolute;
145
+ right: 0;
146
+ top: 10px;
147
+ }
148
+ .oe-prosemirror hr.ProseMirror-selectednode,
149
+ .oe-divider.ProseMirror-selectednode {
150
+ outline: none;
151
+ }
152
+ .oe-prosemirror hr.ProseMirror-selectednode::after,
153
+ .oe-divider.ProseMirror-selectednode::after {
154
+ background: var(--oe-border-strong, #d4d4d4);
155
+ box-shadow: 0 0 0 6px var(--oe-accent, #f5f5f5);
156
+ }
157
+ .oe-columns {
158
+ display: grid;
159
+ gap: 12px;
160
+ grid-template-columns: repeat(2, minmax(0, 1fr));
161
+ }
162
+ .oe-column,
163
+ .oe-prosemirror [data-openeditor-column],
164
+ .oe-viewer [data-openeditor-column] {
165
+ border-radius: 8px;
166
+ padding: 4px 6px;
167
+ }
168
+ .oe-prosemirror [data-openeditor-column] > :first-child,
169
+ .oe-viewer [data-openeditor-column] > :first-child {
170
+ margin-top: 0;
171
+ }
172
+ .oe-prosemirror [data-openeditor-column] > :last-child,
173
+ .oe-viewer [data-openeditor-column] > :last-child {
174
+ margin-bottom: 0;
175
+ }
176
+ .oe-prosemirror ul[data-type=taskList],
177
+ .oe-viewer ul[data-type=taskList] {
178
+ list-style: none;
179
+ padding-left: 0;
180
+ }
181
+ .oe-prosemirror ul[data-type=taskList] li,
182
+ .oe-viewer li[data-checked] {
183
+ align-items: flex-start;
184
+ display: flex;
185
+ gap: 8px;
186
+ }
187
+ .oe-prosemirror ul[data-type=taskList] li > label,
188
+ .oe-viewer li[data-checked] > label {
189
+ align-items: center;
190
+ display: inline-flex;
191
+ flex: 0 0 auto;
192
+ line-height: 1.6;
193
+ margin-top: 2px;
194
+ }
195
+ .oe-prosemirror ul[data-type=taskList] li > label > input[type=checkbox],
196
+ .oe-viewer li[data-checked] > label > input[type=checkbox] {
197
+ appearance: none;
198
+ background: var(--oe-surface, #ffffff);
199
+ border: 1.5px solid var(--oe-border-strong, #d4d4d4);
200
+ border-radius: 4px;
201
+ cursor: pointer;
202
+ display: inline-grid;
203
+ height: 20px;
204
+ margin: 0;
205
+ place-items: center;
206
+ width: 20px;
207
+ }
208
+ .oe-prosemirror ul[data-type=taskList] li > label > input[type=checkbox]::after,
209
+ .oe-viewer li[data-checked] > label > input[type=checkbox]::after {
210
+ border-bottom: 2px solid var(--oe-button-text, #ffffff);
211
+ border-right: 2px solid var(--oe-button-text, #ffffff);
212
+ content: "";
213
+ height: 9px;
214
+ opacity: 0;
215
+ transform: translateY(-1px) rotate(45deg);
216
+ width: 5px;
217
+ }
218
+ .oe-prosemirror ul[data-type=taskList] li > label > input[type=checkbox]:checked,
219
+ .oe-viewer li[data-checked=true] > label > input[type=checkbox] {
220
+ background: var(--oe-accent-strong, #171717);
221
+ border-color: var(--oe-accent-strong, #171717);
222
+ }
223
+ .oe-prosemirror ul[data-type=taskList] li > label > input[type=checkbox]:checked::after,
224
+ .oe-viewer li[data-checked=true] > label > input[type=checkbox]::after {
225
+ opacity: 1;
226
+ }
227
+ .oe-prosemirror ul[data-type=taskList] li > label > input[type=checkbox]:focus-visible {
228
+ outline: 2px solid var(--oe-accent, #f5f5f5);
229
+ outline-offset: 2px;
230
+ }
231
+ .oe-prosemirror ul[data-type=taskList] li > div,
232
+ .oe-viewer li[data-checked] > div {
233
+ flex: 1 1 auto;
234
+ min-width: 0;
235
+ }
236
+ .oe-prosemirror ul[data-type=taskList] li > div > p,
237
+ .oe-viewer li[data-checked] > div > p {
238
+ margin: 0;
239
+ min-height: 1.6em;
240
+ }
241
+ .oe-prosemirror table,
242
+ .oe-viewer table {
243
+ border-collapse: collapse;
244
+ margin: 18px 0;
245
+ table-layout: fixed;
246
+ width: 100%;
247
+ }
248
+ .oe-prosemirror th,
249
+ .oe-prosemirror td,
250
+ .oe-viewer th,
251
+ .oe-viewer td {
252
+ border: 1px solid var(--oe-border-strong, #d4d4d4);
253
+ min-width: 96px;
254
+ padding: 10px;
255
+ vertical-align: top;
256
+ }
257
+ .oe-prosemirror td,
258
+ .oe-viewer td {
259
+ background: var(--oe-surface, #ffffff);
260
+ }
261
+ .oe-prosemirror th,
262
+ .oe-viewer th {
263
+ background: var(--oe-surface-muted, #f5f5f5);
264
+ font-weight: 700;
265
+ }
266
+ .oe-slash-menu {
267
+ background: var(--oe-surface, #ffffff);
268
+ border: 1px solid var(--oe-border-strong, #d4d4d4);
269
+ border-radius: 8px;
270
+ box-shadow: 0 18px 48px var(--oe-shadow, rgb(0 0 0 / 12%));
271
+ display: grid;
272
+ gap: 4px;
273
+ max-height: 320px;
274
+ overflow: auto;
275
+ padding: 6px;
276
+ position: fixed;
277
+ width: min(280px, calc(100vw - 24px));
278
+ z-index: 1000;
279
+ }
280
+ .oe-slash-menu button {
281
+ align-items: center;
282
+ background: transparent;
283
+ border: 0;
284
+ color: var(--oe-text, #171717);
285
+ cursor: pointer;
286
+ display: flex;
287
+ justify-content: space-between;
288
+ min-height: 40px;
289
+ padding: 0 10px;
290
+ text-align: left;
291
+ }
292
+ .oe-slash-menu button:hover,
293
+ .oe-slash-menu button:focus-visible {
294
+ background: var(--oe-surface-muted, #f5f5f5);
295
+ }
296
+ .oe-slash-menu span {
297
+ font-weight: 650;
298
+ }
299
+ .oe-slash-menu small {
300
+ color: var(--oe-muted, #737373);
301
+ font-size: 11px;
302
+ text-transform: uppercase;
303
+ }
304
+ .oe-bubble-menu {
305
+ align-items: center;
306
+ background: var(--oe-surface, #ffffff);
307
+ border: 1px solid var(--oe-border-strong, #d4d4d4);
308
+ border-radius: 8px;
309
+ box-shadow: 0 12px 30px var(--oe-shadow, rgb(0 0 0 / 12%));
310
+ display: flex;
311
+ gap: 4px;
312
+ padding: 5px;
313
+ position: fixed;
314
+ transform: translate(-50%, -100%);
315
+ z-index: 1000;
316
+ }
317
+ .oe-bubble-menu button {
318
+ background: transparent;
319
+ border: 0;
320
+ color: var(--oe-text, #171717);
321
+ cursor: pointer;
322
+ font-size: 13px;
323
+ font-weight: 700;
324
+ min-height: 30px;
325
+ min-width: 30px;
326
+ padding: 0 8px;
327
+ }
328
+ .oe-bubble-menu button:hover,
329
+ .oe-bubble-menu button:focus-visible,
330
+ .oe-bubble-menu button.is-active {
331
+ background: var(--oe-surface-muted, #f5f5f5);
332
+ color: var(--oe-accent-strong, #171717);
333
+ }
334
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/styles.css"],"sourcesContent":[".oe-editor-surface {\n display: grid;\n gap: 12px;\n position: relative;\n}\n\n.oe-canvas {\n min-height: calc(100vh - 96px);\n}\n\n.oe-prosemirror,\n.oe-viewer {\n color: var(--oe-text, #171717);\n}\n\n.oe-prosemirror {\n min-height: calc(100vh - 96px);\n outline: none;\n}\n\n.oe-prosemirror > *:first-child,\n.oe-viewer > *:first-child {\n margin-top: 0;\n}\n\n.oe-prosemirror > *:last-child,\n.oe-viewer > *:last-child {\n margin-bottom: 0;\n}\n\n.oe-prosemirror p.is-editor-empty:first-child::before {\n color: var(--oe-placeholder, #a3a3a3);\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n}\n\n.oe-prosemirror img,\n.oe-viewer img {\n border-radius: 8px;\n display: block;\n margin: 16px 0;\n max-width: 100%;\n}\n\n.oe-prosemirror blockquote,\n.oe-viewer blockquote {\n border-left: 3px solid var(--oe-accent, #f5f5f5);\n margin: 18px 0;\n padding-left: 16px;\n}\n\n.oe-prosemirror pre,\n.oe-viewer pre {\n background: var(--oe-code-bg, #f5f5f5);\n border-radius: 8px;\n color: var(--oe-code-text, #171717);\n overflow: auto;\n padding: 14px;\n}\n\n.oe-prosemirror code,\n.oe-viewer code {\n font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", monospace;\n}\n\n.oe-prosemirror p,\n.oe-prosemirror ul,\n.oe-prosemirror ol,\n.oe-viewer p,\n.oe-viewer ul,\n.oe-viewer ol {\n color: var(--oe-text-soft, #262626);\n font-size: 16px;\n line-height: 1.6;\n}\n\n.oe-prosemirror h1,\n.oe-prosemirror h2,\n.oe-prosemirror h3,\n.oe-prosemirror h4,\n.oe-prosemirror h5,\n.oe-prosemirror h6,\n.oe-viewer h1,\n.oe-viewer h2,\n.oe-viewer h3,\n.oe-viewer h4,\n.oe-viewer h5,\n.oe-viewer h6 {\n color: var(--oe-heading, var(--oe-text, #171717));\n font-weight: 700;\n line-height: 1.2;\n margin: 24px 0 10px;\n}\n\n.oe-prosemirror h1,\n.oe-viewer h1 {\n font-size: 2em;\n}\n\n.oe-prosemirror h2,\n.oe-viewer h2 {\n font-size: 1.5em;\n}\n\n.oe-prosemirror h3,\n.oe-viewer h3 {\n font-size: 1.25em;\n}\n\n.oe-prosemirror h4,\n.oe-viewer h4 {\n font-size: 1.125em;\n}\n\n.oe-prosemirror h5,\n.oe-prosemirror h6,\n.oe-viewer h5,\n.oe-viewer h6 {\n font-size: 1em;\n}\n\n.oe-prosemirror ul:not([data-type=\"taskList\"]),\n.oe-viewer ul:not([data-type=\"taskList\"]) {\n list-style: disc;\n padding-left: 1.5em;\n}\n\n.oe-prosemirror ol,\n.oe-viewer ol {\n list-style: decimal;\n padding-left: 1.5em;\n}\n\n.oe-prosemirror li,\n.oe-viewer li {\n margin: 4px 0;\n}\n\n.oe-prosemirror hr,\n.oe-divider,\n.oe-viewer hr {\n border: 0;\n cursor: pointer;\n height: 1px;\n margin: 18px 0;\n padding: 10px 0;\n position: relative;\n}\n\n.oe-prosemirror hr::after,\n.oe-divider::after,\n.oe-viewer hr::after {\n background: var(--oe-border, #e5e5e5);\n content: \"\";\n display: block;\n height: 1px;\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 10px;\n}\n\n.oe-prosemirror hr.ProseMirror-selectednode,\n.oe-divider.ProseMirror-selectednode {\n outline: none;\n}\n\n.oe-prosemirror hr.ProseMirror-selectednode::after,\n.oe-divider.ProseMirror-selectednode::after {\n background: var(--oe-border-strong, #d4d4d4);\n box-shadow: 0 0 0 6px var(--oe-accent, #f5f5f5);\n}\n\n.oe-columns {\n display: grid;\n gap: 12px;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.oe-column,\n.oe-prosemirror [data-openeditor-column],\n.oe-viewer [data-openeditor-column] {\n border-radius: 8px;\n padding: 4px 6px;\n}\n\n.oe-prosemirror [data-openeditor-column] > :first-child,\n.oe-viewer [data-openeditor-column] > :first-child {\n margin-top: 0;\n}\n\n.oe-prosemirror [data-openeditor-column] > :last-child,\n.oe-viewer [data-openeditor-column] > :last-child {\n margin-bottom: 0;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"],\n.oe-viewer ul[data-type=\"taskList\"] {\n list-style: none;\n padding-left: 0;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li,\n.oe-viewer li[data-checked] {\n align-items: flex-start;\n display: flex;\n gap: 8px;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label,\n.oe-viewer li[data-checked] > label {\n align-items: center;\n display: inline-flex;\n flex: 0 0 auto;\n line-height: 1.6;\n margin-top: 2px;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label > input[type=\"checkbox\"],\n.oe-viewer li[data-checked] > label > input[type=\"checkbox\"] {\n appearance: none;\n background: var(--oe-surface, #ffffff);\n border: 1.5px solid var(--oe-border-strong, #d4d4d4);\n border-radius: 4px;\n cursor: pointer;\n display: inline-grid;\n height: 20px;\n margin: 0;\n place-items: center;\n width: 20px;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label > input[type=\"checkbox\"]::after,\n.oe-viewer li[data-checked] > label > input[type=\"checkbox\"]::after {\n border-bottom: 2px solid var(--oe-button-text, #ffffff);\n border-right: 2px solid var(--oe-button-text, #ffffff);\n content: \"\";\n height: 9px;\n opacity: 0;\n transform: translateY(-1px) rotate(45deg);\n width: 5px;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label > input[type=\"checkbox\"]:checked,\n.oe-viewer li[data-checked=\"true\"] > label > input[type=\"checkbox\"] {\n background: var(--oe-accent-strong, #171717);\n border-color: var(--oe-accent-strong, #171717);\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label > input[type=\"checkbox\"]:checked::after,\n.oe-viewer li[data-checked=\"true\"] > label > input[type=\"checkbox\"]::after {\n opacity: 1;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > label > input[type=\"checkbox\"]:focus-visible {\n outline: 2px solid var(--oe-accent, #f5f5f5);\n outline-offset: 2px;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > div,\n.oe-viewer li[data-checked] > div {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.oe-prosemirror ul[data-type=\"taskList\"] li > div > p,\n.oe-viewer li[data-checked] > div > p {\n margin: 0;\n min-height: 1.6em;\n}\n\n.oe-prosemirror table,\n.oe-viewer table {\n border-collapse: collapse;\n margin: 18px 0;\n table-layout: fixed;\n width: 100%;\n}\n\n.oe-prosemirror th,\n.oe-prosemirror td,\n.oe-viewer th,\n.oe-viewer td {\n border: 1px solid var(--oe-border-strong, #d4d4d4);\n min-width: 96px;\n padding: 10px;\n vertical-align: top;\n}\n\n.oe-prosemirror td,\n.oe-viewer td {\n background: var(--oe-surface, #ffffff);\n}\n\n.oe-prosemirror th,\n.oe-viewer th {\n background: var(--oe-surface-muted, #f5f5f5);\n font-weight: 700;\n}\n\n.oe-slash-menu {\n background: var(--oe-surface, #ffffff);\n border: 1px solid var(--oe-border-strong, #d4d4d4);\n border-radius: 8px;\n box-shadow: 0 18px 48px var(--oe-shadow, rgb(0 0 0 / 12%));\n display: grid;\n gap: 4px;\n max-height: 320px;\n overflow: auto;\n padding: 6px;\n position: fixed;\n width: min(280px, calc(100vw - 24px));\n z-index: 1000;\n}\n\n.oe-slash-menu button {\n align-items: center;\n background: transparent;\n border: 0;\n color: var(--oe-text, #171717);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n min-height: 40px;\n padding: 0 10px;\n text-align: left;\n}\n\n.oe-slash-menu button:hover,\n.oe-slash-menu button:focus-visible {\n background: var(--oe-surface-muted, #f5f5f5);\n}\n\n.oe-slash-menu span {\n font-weight: 650;\n}\n\n.oe-slash-menu small {\n color: var(--oe-muted, #737373);\n font-size: 11px;\n text-transform: uppercase;\n}\n\n.oe-bubble-menu {\n align-items: center;\n background: var(--oe-surface, #ffffff);\n border: 1px solid var(--oe-border-strong, #d4d4d4);\n border-radius: 8px;\n box-shadow: 0 12px 30px var(--oe-shadow, rgb(0 0 0 / 12%));\n display: flex;\n gap: 4px;\n padding: 5px;\n position: fixed;\n transform: translate(-50%, -100%);\n z-index: 1000;\n}\n\n.oe-bubble-menu button {\n background: transparent;\n border: 0;\n color: var(--oe-text, #171717);\n cursor: pointer;\n font-size: 13px;\n font-weight: 700;\n min-height: 30px;\n min-width: 30px;\n padding: 0 8px;\n}\n\n.oe-bubble-menu button:hover,\n.oe-bubble-menu button:focus-visible,\n.oe-bubble-menu button.is-active {\n background: var(--oe-surface-muted, #f5f5f5);\n color: var(--oe-accent-strong, #171717);\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import * as react from 'react';
2
+ import { OpenEditorReactProps, OpenEditorController, OpenEditorSlashMenuItem } from '@openeditor/react';
3
+ export { OpenEditorContent, OpenEditorController, OpenEditorReactProps, OpenEditorSlashMenuItem, useOpenEditorController } from '@openeditor/react';
4
+
5
+ type OpenEditorSlashMenuProps = {
6
+ controller: OpenEditorController;
7
+ className?: string;
8
+ items?: readonly OpenEditorSlashMenuItem[];
9
+ container?: HTMLElement | null;
10
+ };
11
+ type OpenEditorSelectionBubbleProps = {
12
+ controller: OpenEditorController;
13
+ className?: string;
14
+ container?: HTMLElement | null;
15
+ };
16
+ type OpenEditorProps = OpenEditorReactProps & {
17
+ className?: string;
18
+ contentClassName?: string;
19
+ overlayContainer?: HTMLElement | null;
20
+ };
21
+ declare const OpenEditorSelectionBubble: ({ controller, className, container, }: OpenEditorSelectionBubbleProps) => react.ReactPortal | null;
22
+ declare const OpenEditorSlashMenu: ({ controller, className, items, container, }: OpenEditorSlashMenuProps) => react.ReactPortal | null;
23
+ declare const OpenEditor: ({ className, contentClassName, overlayContainer, ...props }: OpenEditorProps) => react.JSX.Element;
24
+
25
+ export { OpenEditor, type OpenEditorProps, OpenEditorSelectionBubble, type OpenEditorSelectionBubbleProps, OpenEditorSlashMenu, type OpenEditorSlashMenuProps };
package/dist/index.js ADDED
@@ -0,0 +1,88 @@
1
+ import { getDefaultSlashMenuItems, useOpenEditorController, OpenEditorContent } from '@openeditor/react';
2
+ export { OpenEditorContent, useOpenEditorController } from '@openeditor/react';
3
+ import { createPortal } from 'react-dom';
4
+ import { jsxs, jsx } from 'react/jsx-runtime';
5
+
6
+ // src/index.tsx
7
+ var getOverlayContainer = (container) => container ?? (typeof document === "undefined" ? null : document.body);
8
+ var OpenEditorSelectionBubble = ({
9
+ controller,
10
+ className = "oe-bubble-menu",
11
+ container
12
+ }) => {
13
+ const { editor, selectionBubbleState } = controller;
14
+ const overlayContainer = getOverlayContainer(container);
15
+ if (!editor || !selectionBubbleState || !overlayContainer) {
16
+ return null;
17
+ }
18
+ return createPortal(
19
+ /* @__PURE__ */ jsxs(
20
+ "div",
21
+ {
22
+ className,
23
+ style: { left: selectionBubbleState.left, top: selectionBubbleState.top },
24
+ onMouseDown: (event) => event.preventDefault(),
25
+ children: [
26
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("bold") ? "is-active" : "", onClick: () => controller.toggleBold(), children: "B" }),
27
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("italic") ? "is-active" : "", onClick: () => controller.toggleItalic(), children: "I" }),
28
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("underline") ? "is-active" : "", onClick: () => controller.toggleUnderline(), children: "U" }),
29
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("strike") ? "is-active" : "", onClick: () => controller.toggleStrike(), children: "S" }),
30
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("code") ? "is-active" : "", onClick: () => controller.toggleInlineCode(), children: "</>" }),
31
+ /* @__PURE__ */ jsx("button", { type: "button", className: editor.isActive("link") ? "is-active" : "", onClick: () => controller.setLink(), children: "Link" })
32
+ ]
33
+ }
34
+ ),
35
+ overlayContainer
36
+ );
37
+ };
38
+ var OpenEditorSlashMenu = ({
39
+ controller,
40
+ className = "oe-slash-menu",
41
+ items,
42
+ container
43
+ }) => {
44
+ const slashMenuItems = items ?? getDefaultSlashMenuItems(controller);
45
+ const slashState = controller.slashState;
46
+ const overlayContainer = getOverlayContainer(container);
47
+ if (!slashState || !overlayContainer) {
48
+ return null;
49
+ }
50
+ return createPortal(
51
+ /* @__PURE__ */ jsx("div", { className, style: { left: slashState.left, top: slashState.top }, children: slashMenuItems.filter((item) => {
52
+ const haystack = `${item.label} ${item.group} ${item.keywords?.join(" ") ?? ""}`.toLowerCase();
53
+ return haystack.includes(slashState.query.toLowerCase());
54
+ }).map((item) => /* @__PURE__ */ jsxs(
55
+ "button",
56
+ {
57
+ type: "button",
58
+ onMouseDown: (event) => {
59
+ event.preventDefault();
60
+ item.run({ controller, range: { from: slashState.from, to: slashState.to } });
61
+ },
62
+ children: [
63
+ /* @__PURE__ */ jsx("span", { children: item.label }),
64
+ /* @__PURE__ */ jsx("small", { children: item.group })
65
+ ]
66
+ },
67
+ item.key
68
+ )) }),
69
+ overlayContainer
70
+ );
71
+ };
72
+ var OpenEditor = ({
73
+ className = "oe-editor-surface",
74
+ contentClassName,
75
+ overlayContainer,
76
+ ...props
77
+ }) => {
78
+ const controller = useOpenEditorController(props);
79
+ return /* @__PURE__ */ jsxs("div", { className, children: [
80
+ /* @__PURE__ */ jsx(OpenEditorContent, { controller, className: contentClassName }),
81
+ /* @__PURE__ */ jsx(OpenEditorSelectionBubble, { controller, container: overlayContainer }),
82
+ /* @__PURE__ */ jsx(OpenEditorSlashMenu, { controller, container: overlayContainer })
83
+ ] });
84
+ };
85
+
86
+ export { OpenEditor, OpenEditorSelectionBubble, OpenEditorSlashMenu };
87
+ //# sourceMappingURL=index.js.map
88
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import \"./styles.css\";\nimport {\n getDefaultSlashMenuItems,\n OpenEditorContent,\n useOpenEditorController,\n type OpenEditorController,\n type OpenEditorReactProps,\n type OpenEditorSlashMenuItem,\n} from \"@openeditor/react\";\nimport { createPortal } from \"react-dom\";\n\nexport type OpenEditorSlashMenuProps = {\n controller: OpenEditorController;\n className?: string;\n items?: readonly OpenEditorSlashMenuItem[];\n container?: HTMLElement | null;\n};\n\nexport type OpenEditorSelectionBubbleProps = {\n controller: OpenEditorController;\n className?: string;\n container?: HTMLElement | null;\n};\n\nexport type OpenEditorProps = OpenEditorReactProps & {\n className?: string;\n contentClassName?: string;\n overlayContainer?: HTMLElement | null;\n};\n\nconst getOverlayContainer = (container?: HTMLElement | null) =>\n container ?? (typeof document === \"undefined\" ? null : document.body);\n\nexport const OpenEditorSelectionBubble = ({\n controller,\n className = \"oe-bubble-menu\",\n container,\n}: OpenEditorSelectionBubbleProps) => {\n const { editor, selectionBubbleState } = controller;\n const overlayContainer = getOverlayContainer(container);\n\n if (!editor || !selectionBubbleState || !overlayContainer) {\n return null;\n }\n\n return createPortal(\n <div\n className={className}\n style={{ left: selectionBubbleState.left, top: selectionBubbleState.top }}\n onMouseDown={(event) => event.preventDefault()}\n >\n <button type=\"button\" className={editor.isActive(\"bold\") ? \"is-active\" : \"\"} onClick={() => controller.toggleBold()}>B</button>\n <button type=\"button\" className={editor.isActive(\"italic\") ? \"is-active\" : \"\"} onClick={() => controller.toggleItalic()}>I</button>\n <button type=\"button\" className={editor.isActive(\"underline\") ? \"is-active\" : \"\"} onClick={() => controller.toggleUnderline()}>U</button>\n <button type=\"button\" className={editor.isActive(\"strike\") ? \"is-active\" : \"\"} onClick={() => controller.toggleStrike()}>S</button>\n <button type=\"button\" className={editor.isActive(\"code\") ? \"is-active\" : \"\"} onClick={() => controller.toggleInlineCode()}>{\"</>\"}</button>\n <button type=\"button\" className={editor.isActive(\"link\") ? \"is-active\" : \"\"} onClick={() => controller.setLink()}>Link</button>\n </div>,\n overlayContainer,\n );\n};\n\nexport const OpenEditorSlashMenu = ({\n controller,\n className = \"oe-slash-menu\",\n items,\n container,\n}: OpenEditorSlashMenuProps) => {\n const slashMenuItems = items ?? getDefaultSlashMenuItems(controller);\n const slashState = controller.slashState;\n const overlayContainer = getOverlayContainer(container);\n\n if (!slashState || !overlayContainer) {\n return null;\n }\n\n return createPortal(\n <div className={className} style={{ left: slashState.left, top: slashState.top }}>\n {slashMenuItems\n .filter((item) => {\n const haystack = `${item.label} ${item.group} ${item.keywords?.join(\" \") ?? \"\"}`.toLowerCase();\n return haystack.includes(slashState.query.toLowerCase());\n })\n .map((item) => (\n <button\n key={item.key}\n type=\"button\"\n onMouseDown={(event) => {\n event.preventDefault();\n item.run({ controller, range: { from: slashState.from, to: slashState.to } });\n }}\n >\n <span>{item.label}</span>\n <small>{item.group}</small>\n </button>\n ))}\n </div>,\n overlayContainer,\n );\n};\n\nexport const OpenEditor = ({\n className = \"oe-editor-surface\",\n contentClassName,\n overlayContainer,\n ...props\n}: OpenEditorProps) => {\n const controller = useOpenEditorController(props);\n\n return (\n <div className={className}>\n <OpenEditorContent controller={controller} className={contentClassName} />\n <OpenEditorSelectionBubble controller={controller} container={overlayContainer} />\n <OpenEditorSlashMenu controller={controller} container={overlayContainer} />\n </div>\n );\n};\n\nexport { OpenEditorContent, useOpenEditorController };\nexport type { OpenEditorController, OpenEditorReactProps, OpenEditorSlashMenuItem };\n"]}
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@openeditor/ui",
3
+ "version": "0.0.4",
4
+ "type": "module",
5
+ "sideEffects": [
6
+ "**/*.css"
7
+ ],
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/EasyLink-HQ/openeditor.git",
11
+ "directory": "packages/ui"
12
+ },
13
+ "main": "./dist/index.js",
14
+ "types": "./dist/index.d.ts",
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "files": [
19
+ "dist"
20
+ ],
21
+ "exports": {
22
+ ".": {
23
+ "types": "./dist/index.d.ts",
24
+ "import": "./dist/index.js"
25
+ },
26
+ "./styles.css": "./dist/index.css",
27
+ "./package.json": "./package.json"
28
+ },
29
+ "dependencies": {
30
+ "@openeditor/react": "0.0.4",
31
+ "react": "19.2.7",
32
+ "react-dom": "19.2.7"
33
+ },
34
+ "peerDependencies": {
35
+ "react": ">=19",
36
+ "react-dom": ">=19"
37
+ }
38
+ }