neuphlo-editor 2.5.0 → 2.5.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.
Files changed (49) hide show
  1. package/LICENSE +21 -0
  2. package/dist/highlight.css +83 -1
  3. package/package.json +9 -11
  4. package/dist/chunk-2DWEJI45.js +0 -1296
  5. package/dist/chunk-2DWEJI45.js.map +0 -1
  6. package/dist/chunk-3CLWAYRP.js +0 -1387
  7. package/dist/chunk-3CLWAYRP.js.map +0 -1
  8. package/dist/chunk-457ETWB6.js +0 -1351
  9. package/dist/chunk-457ETWB6.js.map +0 -1
  10. package/dist/chunk-4L7FHW5M.js +0 -1388
  11. package/dist/chunk-4L7FHW5M.js.map +0 -1
  12. package/dist/chunk-4MV3UUZN.js +0 -1073
  13. package/dist/chunk-4MV3UUZN.js.map +0 -1
  14. package/dist/chunk-62DYB7FY.js +0 -1305
  15. package/dist/chunk-62DYB7FY.js.map +0 -1
  16. package/dist/chunk-BVFTQKY7.js +0 -1387
  17. package/dist/chunk-BVFTQKY7.js.map +0 -1
  18. package/dist/chunk-DWGPGRTQ.js +0 -1302
  19. package/dist/chunk-DWGPGRTQ.js.map +0 -1
  20. package/dist/chunk-EG7NQJRA.js +0 -1324
  21. package/dist/chunk-EG7NQJRA.js.map +0 -1
  22. package/dist/chunk-FLLPFFI5.js +0 -1296
  23. package/dist/chunk-FLLPFFI5.js.map +0 -1
  24. package/dist/chunk-FVQHB6VC.js +0 -1128
  25. package/dist/chunk-FVQHB6VC.js.map +0 -1
  26. package/dist/chunk-G5E32MLB.js +0 -1352
  27. package/dist/chunk-G5E32MLB.js.map +0 -1
  28. package/dist/chunk-GXJGZHKR.js +0 -1326
  29. package/dist/chunk-GXJGZHKR.js.map +0 -1
  30. package/dist/chunk-KCPPTLGY.js +0 -1299
  31. package/dist/chunk-KCPPTLGY.js.map +0 -1
  32. package/dist/chunk-LHG2NX6C.js +0 -1123
  33. package/dist/chunk-LHG2NX6C.js.map +0 -1
  34. package/dist/chunk-MSNTVITF.js +0 -1352
  35. package/dist/chunk-MSNTVITF.js.map +0 -1
  36. package/dist/chunk-N4RDYJ5Z.js +0 -1351
  37. package/dist/chunk-N4RDYJ5Z.js.map +0 -1
  38. package/dist/chunk-OCNM37WJ.js +0 -1289
  39. package/dist/chunk-OCNM37WJ.js.map +0 -1
  40. package/dist/chunk-P3YFYEUB.js +0 -1351
  41. package/dist/chunk-P3YFYEUB.js.map +0 -1
  42. package/dist/chunk-RW6QBMJB.js +0 -1300
  43. package/dist/chunk-RW6QBMJB.js.map +0 -1
  44. package/dist/chunk-SJQQVB3M.js +0 -1353
  45. package/dist/chunk-SJQQVB3M.js.map +0 -1
  46. package/dist/chunk-SOXTEP7H.js +0 -6705
  47. package/dist/chunk-SOXTEP7H.js.map +0 -1
  48. package/dist/chunk-VPI26I4P.js +0 -1350
  49. package/dist/chunk-VPI26I4P.js.map +0 -1
@@ -1,1324 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
- var __getOwnPropNames = Object.getOwnPropertyNames;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __export = (target, all2) => {
6
- for (var name in all2)
7
- __defProp(target, name, { get: all2[name], enumerable: true });
8
- };
9
- var __copyProps = (to, from, except, desc) => {
10
- if (from && typeof from === "object" || typeof from === "function") {
11
- for (let key of __getOwnPropNames(from))
12
- if (!__hasOwnProp.call(to, key) && key !== except)
13
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
- }
15
- return to;
16
- };
17
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
18
-
19
- // src/headless/index.ts
20
- import { useCurrentEditor as useCurrentEditor4 } from "@tiptap/react";
21
-
22
- // src/headless/components/editor.tsx
23
- import { EditorProvider } from "@tiptap/react";
24
- import { forwardRef } from "react";
25
- import { Provider } from "jotai";
26
-
27
- // src/headless/utils/store.ts
28
- var store_exports = {};
29
- __export(store_exports, {
30
- novelStore: () => novelStore
31
- });
32
- __reExport(store_exports, jotai_star);
33
- import { createStore } from "jotai";
34
- import * as jotai_star from "jotai";
35
- var novelStore = createStore();
36
-
37
- // src/headless/components/editor.tsx
38
- import { jsx } from "react/jsx-runtime";
39
- var EditorRoot = ({ children }) => {
40
- return /* @__PURE__ */ jsx(Provider, { store: novelStore, children });
41
- };
42
- var EditorContent = forwardRef(
43
- ({ className, children, initialContent, content, ...rest }, ref) => {
44
- const effectiveContent = content ?? initialContent;
45
- return /* @__PURE__ */ jsx("div", { ref, className, children: /* @__PURE__ */ jsx(EditorProvider, { ...rest, content: effectiveContent, children }) });
46
- }
47
- );
48
- EditorContent.displayName = "EditorContent";
49
-
50
- // src/headless/components/editor-bubble.tsx
51
- import { useCurrentEditor } from "@tiptap/react";
52
- import { BubbleMenu as BubbleMenuReact } from "@tiptap/react/menus";
53
- import { jsx as jsx2 } from "react/jsx-runtime";
54
- function EditorBubble({ className, children, ...rest }) {
55
- const { editor } = useCurrentEditor();
56
- if (!editor) return null;
57
- return /* @__PURE__ */ jsx2(BubbleMenuReact, { editor, ...rest, children: /* @__PURE__ */ jsx2("div", { className, children }) });
58
- }
59
-
60
- // src/headless/components/editor-bubble-item.tsx
61
- import { forwardRef as forwardRef2, isValidElement, cloneElement } from "react";
62
- import { useCurrentEditor as useCurrentEditor2 } from "@tiptap/react";
63
- import { jsx as jsx3 } from "react/jsx-runtime";
64
- var EditorBubbleItem = forwardRef2(({ children, asChild, onSelect, ...rest }, ref) => {
65
- const { editor } = useCurrentEditor2();
66
- if (!editor) return null;
67
- const handleClick = (e) => {
68
- e.preventDefault();
69
- onSelect?.(editor);
70
- };
71
- if (asChild && isValidElement(children)) {
72
- const child = children;
73
- const childOnClick = child.props?.onClick;
74
- const mergedOnClick = (e) => {
75
- childOnClick?.(e);
76
- if (!e?.defaultPrevented) onSelect?.(editor);
77
- };
78
- return cloneElement(child, {
79
- ...rest,
80
- ref: child.ref ?? ref,
81
- onClick: mergedOnClick
82
- });
83
- }
84
- return /* @__PURE__ */ jsx3("div", { ref, ...rest, onClick: handleClick, children });
85
- });
86
- EditorBubbleItem.displayName = "EditorBubbleItem";
87
-
88
- // src/headless/components/editor-command.tsx
89
- import { useAtom, useSetAtom, useAtomValue } from "jotai";
90
- import { atom as atom2 } from "jotai";
91
- import { useEffect, forwardRef as forwardRef3, useState } from "react";
92
- import { Command } from "cmdk";
93
-
94
- // src/headless/utils/atoms.ts
95
- import { atom } from "jotai";
96
- var queryAtom = atom("");
97
- var rangeAtom = atom(null);
98
-
99
- // src/headless/components/editor-command.tsx
100
- import { jsx as jsx4, jsxs } from "react/jsx-runtime";
101
- var portalTargetAtom = atom2(null);
102
- var EditorCommandOut = ({
103
- query,
104
- range
105
- }) => {
106
- const setQuery = useSetAtom(queryAtom, { store: novelStore });
107
- const setRange = useSetAtom(rangeAtom, { store: novelStore });
108
- const [target, setTarget] = useState(null);
109
- useEffect(() => {
110
- setQuery(query);
111
- }, [query, setQuery]);
112
- useEffect(() => {
113
- setRange(range);
114
- }, [range, setRange]);
115
- useEffect(() => {
116
- const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
117
- const onKeyDown = (e) => {
118
- if (navigationKeys.includes(e.key)) {
119
- e.preventDefault();
120
- const commandRef = document.querySelector("#slash-command");
121
- if (commandRef)
122
- commandRef.dispatchEvent(
123
- new KeyboardEvent("keydown", {
124
- key: e.key,
125
- cancelable: true,
126
- bubbles: true
127
- })
128
- );
129
- return false;
130
- }
131
- };
132
- document.addEventListener("keydown", onKeyDown);
133
- return () => {
134
- document.removeEventListener("keydown", onKeyDown);
135
- };
136
- }, []);
137
- useEffect(() => {
138
- const unsub = novelStore.sub(portalTargetAtom, () => {
139
- setTarget(novelStore.get(portalTargetAtom));
140
- });
141
- setTarget(novelStore.get(portalTargetAtom));
142
- return unsub;
143
- }, []);
144
- if (!target) return null;
145
- return null;
146
- };
147
- var CommandAny = Command;
148
- var EditorCommand = forwardRef3(
149
- ({ children, className, ...rest }, ref) => {
150
- const [query, setQuery] = useAtom(queryAtom);
151
- const portalTarget = useAtomValue(portalTargetAtom, { store: novelStore });
152
- const setPortalTarget = useSetAtom(portalTargetAtom, { store: novelStore });
153
- const [containerEl] = useState(() => {
154
- if (typeof document !== "undefined") {
155
- const el = document.createElement("div");
156
- return el;
157
- }
158
- return null;
159
- });
160
- useEffect(() => {
161
- if (containerEl) {
162
- setPortalTarget(containerEl);
163
- return () => setPortalTarget(null);
164
- }
165
- }, [containerEl, setPortalTarget]);
166
- return /* @__PURE__ */ jsxs(
167
- CommandAny,
168
- {
169
- ref,
170
- onKeyDown: (e) => {
171
- e.stopPropagation();
172
- },
173
- id: "slash-command",
174
- className,
175
- ...rest,
176
- children: [
177
- /* @__PURE__ */ jsx4(
178
- CommandAny.Input,
179
- {
180
- value: query,
181
- onValueChange: setQuery,
182
- style: { display: "none" }
183
- }
184
- ),
185
- children
186
- ]
187
- }
188
- );
189
- }
190
- );
191
- var EditorCommandList = Command.List;
192
- EditorCommand.displayName = "EditorCommand";
193
-
194
- // src/headless/components/editor-command-item.tsx
195
- import { forwardRef as forwardRef4 } from "react";
196
- import { CommandEmpty, CommandItem } from "cmdk";
197
- import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
198
- import { useAtomValue as useAtomValue2 } from "jotai";
199
- import { jsx as jsx5 } from "react/jsx-runtime";
200
- var CommandItemAny = CommandItem;
201
- var CommandEmptyAny = CommandEmpty;
202
- var EditorCommandItem = forwardRef4(({ children, onCommand, ...rest }, ref) => {
203
- const { editor } = useCurrentEditor3();
204
- const range = useAtomValue2(rangeAtom);
205
- if (!editor || !range) return null;
206
- return /* @__PURE__ */ jsx5(
207
- CommandItemAny,
208
- {
209
- ref,
210
- ...rest,
211
- onSelect: () => onCommand({ editor, range }),
212
- children
213
- }
214
- );
215
- });
216
- EditorCommandItem.displayName = "EditorCommandItem";
217
- var EditorCommandEmpty = CommandEmptyAny;
218
-
219
- // src/headless/extensions/index.ts
220
- import { StarterKit } from "@tiptap/starter-kit";
221
- import { Placeholder } from "@tiptap/extension-placeholder";
222
-
223
- // src/headless/extensions/CodeBlock/CodeBlock.ts
224
- import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
225
- import { all, createLowlight } from "lowlight";
226
- var lowlight = createLowlight(all);
227
- var CodeBlock = CodeBlockLowlight.configure({
228
- lowlight
229
- });
230
-
231
- // src/headless/extensions/Link/Link.ts
232
- import { mergeAttributes } from "@tiptap/core";
233
- import TiptapLink from "@tiptap/extension-link";
234
- import { Plugin } from "@tiptap/pm/state";
235
- var Link = TiptapLink.extend({
236
- inclusive: false,
237
- parseHTML() {
238
- return [
239
- {
240
- tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'
241
- }
242
- ];
243
- },
244
- renderHTML({ HTMLAttributes }) {
245
- return [
246
- "a",
247
- mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
248
- class: "link"
249
- }),
250
- 0
251
- ];
252
- },
253
- addProseMirrorPlugins() {
254
- const { editor } = this;
255
- return [
256
- ...this.parent?.() || [],
257
- new Plugin({
258
- props: {
259
- handleKeyDown: (view, event) => {
260
- const { selection } = editor.state;
261
- if (event.key === "Escape" && selection.empty !== true) {
262
- editor.commands.focus(selection.to, { scrollIntoView: false });
263
- }
264
- return false;
265
- }
266
- }
267
- })
268
- ];
269
- }
270
- }).configure({
271
- openOnClick: false,
272
- autolink: true,
273
- enableClickSelection: true
274
- });
275
-
276
- // src/headless/extensions/ImageBlock/ImageBlock.ts
277
- import { mergeAttributes as mergeAttributes2 } from "@tiptap/core";
278
- import { Image as TiptapImage } from "@tiptap/extension-image";
279
- import { ReactNodeViewRenderer } from "@tiptap/react";
280
- import { Plugin as Plugin2, PluginKey } from "@tiptap/pm/state";
281
- var ImageBlock = TiptapImage.extend({
282
- name: "imageBlock",
283
- group: "block",
284
- defining: true,
285
- isolating: true,
286
- addOptions() {
287
- return {
288
- ...this.parent?.(),
289
- uploadImage: void 0,
290
- inline: false
291
- };
292
- },
293
- addAttributes() {
294
- return {
295
- src: {
296
- default: "",
297
- parseHTML: (element) => element.getAttribute("src"),
298
- renderHTML: (attributes) => ({
299
- src: attributes.src
300
- })
301
- },
302
- width: {
303
- default: "100%",
304
- parseHTML: (element) => element.getAttribute("data-width"),
305
- renderHTML: (attributes) => ({
306
- "data-width": attributes.width
307
- })
308
- },
309
- align: {
310
- default: "center",
311
- parseHTML: (element) => element.getAttribute("data-align"),
312
- renderHTML: (attributes) => ({
313
- "data-align": attributes.align
314
- })
315
- },
316
- alt: {
317
- default: void 0,
318
- parseHTML: (element) => element.getAttribute("alt"),
319
- renderHTML: (attributes) => ({
320
- alt: attributes.alt
321
- })
322
- },
323
- loading: {
324
- default: false,
325
- parseHTML: () => false,
326
- renderHTML: () => ({})
327
- }
328
- };
329
- },
330
- parseHTML() {
331
- return [
332
- {
333
- tag: 'img[src]:not([src^="data:"])',
334
- getAttrs: (element) => {
335
- const el = element;
336
- return {
337
- src: el.getAttribute("src"),
338
- alt: el.getAttribute("alt"),
339
- width: el.getAttribute("data-width") || "100%",
340
- align: el.getAttribute("data-align") || "center"
341
- };
342
- }
343
- }
344
- ];
345
- },
346
- renderHTML({ HTMLAttributes }) {
347
- return ["img", mergeAttributes2(HTMLAttributes)];
348
- },
349
- addCommands() {
350
- return {
351
- setImageBlock: (attrs) => ({ commands }) => {
352
- return commands.insertContent({
353
- type: "imageBlock",
354
- attrs: { src: attrs.src }
355
- });
356
- },
357
- setImageBlockAt: (attrs) => ({ commands }) => {
358
- return commands.insertContentAt(attrs.pos, {
359
- type: "imageBlock",
360
- attrs: { src: attrs.src }
361
- });
362
- },
363
- setImageBlockAlign: (align) => ({ commands }) => commands.updateAttributes("imageBlock", { align }),
364
- setImageBlockWidth: (width) => ({ commands }) => commands.updateAttributes("imageBlock", {
365
- width: `${Math.max(0, Math.min(100, width))}%`
366
- })
367
- };
368
- },
369
- addNodeView() {
370
- if (this.options.nodeView) {
371
- return ReactNodeViewRenderer(this.options.nodeView);
372
- }
373
- return null;
374
- },
375
- addProseMirrorPlugins() {
376
- return [
377
- new Plugin2({
378
- key: new PluginKey("imageBlockDrop"),
379
- props: {
380
- handleDOMEvents: {
381
- drop: (view, event) => {
382
- const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length;
383
- if (!hasFiles) {
384
- return false;
385
- }
386
- const images = Array.from(event.dataTransfer.files).filter(
387
- (file) => /image/i.test(file.type)
388
- );
389
- if (images.length === 0) {
390
- return false;
391
- }
392
- event.preventDefault();
393
- const { schema } = view.state;
394
- const coordinates = view.posAtCoords({
395
- left: event.clientX,
396
- top: event.clientY
397
- });
398
- if (!coordinates) return false;
399
- images.forEach(async (image) => {
400
- if (this.options.uploadImage) {
401
- try {
402
- const placeholderNode = schema.nodes.imageBlock.create({
403
- src: "",
404
- loading: true
405
- });
406
- const placeholderTr = view.state.tr.insert(
407
- coordinates.pos,
408
- placeholderNode
409
- );
410
- view.dispatch(placeholderTr);
411
- const url = await this.options.uploadImage(image);
412
- const node = schema.nodes.imageBlock.create({ src: url });
413
- const currentState = view.state;
414
- let foundPos = -1;
415
- currentState.doc.descendants((node2, pos) => {
416
- if (node2.type.name === "imageBlock" && node2.attrs.loading) {
417
- foundPos = pos;
418
- return false;
419
- }
420
- });
421
- if (foundPos !== -1) {
422
- const transaction = view.state.tr.replaceWith(
423
- foundPos,
424
- foundPos + 1,
425
- node
426
- );
427
- view.dispatch(transaction);
428
- }
429
- } catch (error) {
430
- console.error("Failed to upload image:", error);
431
- const currentState = view.state;
432
- let foundPos = -1;
433
- currentState.doc.descendants((node, pos) => {
434
- if (node.type.name === "imageBlock" && node.attrs.loading) {
435
- foundPos = pos;
436
- return false;
437
- }
438
- });
439
- if (foundPos !== -1) {
440
- const transaction = view.state.tr.delete(
441
- foundPos,
442
- foundPos + 1
443
- );
444
- view.dispatch(transaction);
445
- }
446
- }
447
- }
448
- });
449
- return true;
450
- },
451
- paste: (view, event) => {
452
- const hasFiles = event.clipboardData && event.clipboardData.files && event.clipboardData.files.length;
453
- if (!hasFiles) {
454
- return false;
455
- }
456
- const images = Array.from(event.clipboardData.files).filter(
457
- (file) => /image/i.test(file.type)
458
- );
459
- if (images.length === 0) {
460
- return false;
461
- }
462
- event.preventDefault();
463
- images.forEach(async (image) => {
464
- if (this.options.uploadImage) {
465
- try {
466
- const placeholderNode = view.state.schema.nodes.imageBlock.create({
467
- src: "",
468
- loading: true
469
- });
470
- view.dispatch(
471
- view.state.tr.replaceSelectionWith(placeholderNode)
472
- );
473
- const url = await this.options.uploadImage(image);
474
- const node = view.state.schema.nodes.imageBlock.create({
475
- src: url
476
- });
477
- const currentState = view.state;
478
- let foundPos = -1;
479
- currentState.doc.descendants((node2, pos) => {
480
- if (node2.type.name === "imageBlock" && node2.attrs.loading) {
481
- foundPos = pos;
482
- return false;
483
- }
484
- });
485
- if (foundPos !== -1) {
486
- const transaction = view.state.tr.replaceWith(
487
- foundPos,
488
- foundPos + 1,
489
- node
490
- );
491
- view.dispatch(transaction);
492
- }
493
- } catch (error) {
494
- console.error("Failed to upload image:", error);
495
- const currentState = view.state;
496
- let foundPos = -1;
497
- currentState.doc.descendants((node, pos) => {
498
- if (node.type.name === "imageBlock" && node.attrs.loading) {
499
- foundPos = pos;
500
- return false;
501
- }
502
- });
503
- if (foundPos !== -1) {
504
- const transaction = view.state.tr.delete(
505
- foundPos,
506
- foundPos + 1
507
- );
508
- view.dispatch(transaction);
509
- }
510
- }
511
- }
512
- });
513
- return true;
514
- }
515
- }
516
- }
517
- })
518
- ];
519
- }
520
- });
521
-
522
- // src/headless/extensions/Mention/mention.tsx
523
- import { ReactRenderer, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
524
- import Mention from "@tiptap/extension-mention";
525
-
526
- // src/headless/extensions/Mention/mention-command.tsx
527
- import { forwardRef as forwardRef5, useEffect as useEffect2, useImperativeHandle, useState as useState2 } from "react";
528
- import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
529
- function Avatar({ src, fallback }) {
530
- return /* @__PURE__ */ jsx6("div", { style: {
531
- position: "relative",
532
- display: "flex",
533
- height: "24px",
534
- width: "24px",
535
- flexShrink: 0,
536
- overflow: "hidden",
537
- borderRadius: "9999px"
538
- }, children: src ? /* @__PURE__ */ jsx6(
539
- "img",
540
- {
541
- style: {
542
- aspectRatio: "1",
543
- height: "100%",
544
- width: "100%"
545
- },
546
- src,
547
- alt: fallback
548
- }
549
- ) : /* @__PURE__ */ jsx6("div", { style: {
550
- display: "flex",
551
- height: "100%",
552
- width: "100%",
553
- alignItems: "center",
554
- justifyContent: "center",
555
- borderRadius: "9999px",
556
- backgroundColor: "var(--muted)",
557
- color: "var(--muted-foreground)",
558
- fontSize: "10px",
559
- fontWeight: 600
560
- }, children: fallback }) });
561
- }
562
- function ReferenceIcon({ type }) {
563
- if (type === "node") {
564
- return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
565
- /* @__PURE__ */ jsx6("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }),
566
- /* @__PURE__ */ jsx6("path", { d: "M12 12l8-4.5" }),
567
- /* @__PURE__ */ jsx6("path", { d: "M12 12v9" }),
568
- /* @__PURE__ */ jsx6("path", { d: "M12 12l-8-4.5" })
569
- ] });
570
- }
571
- return /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
572
- /* @__PURE__ */ jsx6("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
573
- /* @__PURE__ */ jsx6("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }),
574
- /* @__PURE__ */ jsx6("path", { d: "M9 9l1 0" }),
575
- /* @__PURE__ */ jsx6("path", { d: "M9 13l6 0" }),
576
- /* @__PURE__ */ jsx6("path", { d: "M9 17l6 0" })
577
- ] });
578
- }
579
- var MentionCommand = forwardRef5((props, ref) => {
580
- const [selectedIndex, setSelectedIndex] = useState2(0);
581
- const selectItem = (index) => {
582
- const item = props.items[index];
583
- if (item) {
584
- props.command(item);
585
- }
586
- };
587
- const upHandler = () => {
588
- setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
589
- };
590
- const downHandler = () => {
591
- setSelectedIndex((selectedIndex + 1) % props.items.length);
592
- };
593
- const enterHandler = () => {
594
- selectItem(selectedIndex);
595
- };
596
- useEffect2(() => setSelectedIndex(0), [props.items]);
597
- useImperativeHandle(ref, () => ({
598
- onKeyDown: ({ event }) => {
599
- if (event.key === "ArrowUp") {
600
- upHandler();
601
- return true;
602
- }
603
- if (event.key === "ArrowDown") {
604
- downHandler();
605
- return true;
606
- }
607
- if (event.key === "Enter") {
608
- enterHandler();
609
- return true;
610
- }
611
- return false;
612
- }
613
- }));
614
- return /* @__PURE__ */ jsx6(
615
- "div",
616
- {
617
- id: "mention-list",
618
- style: {
619
- backgroundColor: "var(--popover)",
620
- color: "var(--foreground)",
621
- maxHeight: "300px",
622
- minWidth: "280px",
623
- overflow: "hidden",
624
- overflowY: "auto",
625
- borderRadius: "12px",
626
- border: "1px solid var(--border)",
627
- padding: "4px",
628
- boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
629
- },
630
- children: props.items.length ? props.items.map((item, index) => /* @__PURE__ */ jsxs2(
631
- "button",
632
- {
633
- type: "button",
634
- onClick: () => selectItem(index),
635
- onMouseEnter: () => setSelectedIndex(index),
636
- style: {
637
- position: "relative",
638
- display: "flex",
639
- width: "100%",
640
- cursor: "default",
641
- userSelect: "none",
642
- alignItems: "center",
643
- gap: "8px",
644
- borderRadius: "4px",
645
- padding: "10px 8px",
646
- fontSize: "14px",
647
- outline: "none",
648
- backgroundColor: index === selectedIndex ? "var(--accent)" : "transparent",
649
- color: index === selectedIndex ? "var(--accent-foreground)" : "inherit",
650
- border: "none",
651
- textAlign: "left"
652
- },
653
- children: [
654
- item.type ? /* @__PURE__ */ jsx6(ReferenceIcon, { type: item.type }) : /* @__PURE__ */ jsx6(
655
- Avatar,
656
- {
657
- src: item.avatar,
658
- fallback: item.label.slice(0, 2).toUpperCase()
659
- }
660
- ),
661
- /* @__PURE__ */ jsx6("span", { style: {
662
- flex: 1,
663
- overflow: "hidden",
664
- textOverflow: "ellipsis",
665
- whiteSpace: "nowrap"
666
- }, children: item.label })
667
- ]
668
- },
669
- item.id
670
- )) : /* @__PURE__ */ jsx6("div", { style: {
671
- padding: "24px 0",
672
- textAlign: "center",
673
- fontSize: "14px",
674
- color: "var(--muted-foreground)"
675
- }, children: "No results found" })
676
- }
677
- );
678
- });
679
- MentionCommand.displayName = "MentionCommand";
680
-
681
- // src/headless/extensions/Mention/mention-node-view.tsx
682
- import { NodeViewWrapper } from "@tiptap/react";
683
- import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
684
- function NodeIcon() {
685
- return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
686
- /* @__PURE__ */ jsx7("path", { d: "M12 3l8 4.5v9l-8 4.5l-8-4.5v-9l8-4.5" }),
687
- /* @__PURE__ */ jsx7("path", { d: "M12 12l8-4.5" }),
688
- /* @__PURE__ */ jsx7("path", { d: "M12 12v9" }),
689
- /* @__PURE__ */ jsx7("path", { d: "M12 12l-8-4.5" })
690
- ] });
691
- }
692
- function ArticleIcon() {
693
- return /* @__PURE__ */ jsxs3("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0 }, children: [
694
- /* @__PURE__ */ jsx7("path", { d: "M14 3v4a1 1 0 0 0 1 1h4" }),
695
- /* @__PURE__ */ jsx7("path", { d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" }),
696
- /* @__PURE__ */ jsx7("path", { d: "M9 9l1 0" }),
697
- /* @__PURE__ */ jsx7("path", { d: "M9 13l6 0" }),
698
- /* @__PURE__ */ jsx7("path", { d: "M9 17l6 0" })
699
- ] });
700
- }
701
- var MentionNodeView = (props) => {
702
- const { node } = props;
703
- const { id, label, avatar, type } = node.attrs;
704
- const isNode = type === "node";
705
- const isArticle = type === "article";
706
- const isReference = isNode || isArticle;
707
- const backgroundColor = isArticle ? "rgba(249, 115, 22, 0.15)" : isNode ? "rgba(107, 114, 128, 0.15)" : "var(--accent)";
708
- const color = isArticle ? "rgb(234, 88, 12)" : isNode ? "rgb(75, 85, 99)" : "var(--accent-foreground)";
709
- const border = isArticle ? "1px solid rgba(249, 115, 22, 0.3)" : isNode ? "1px solid rgba(107, 114, 128, 0.3)" : "none";
710
- return /* @__PURE__ */ jsxs3(
711
- NodeViewWrapper,
712
- {
713
- as: "span",
714
- style: {
715
- display: "inline-flex",
716
- alignItems: "center",
717
- gap: "3px",
718
- backgroundColor,
719
- color,
720
- border,
721
- padding: isReference ? "1px 6px" : "1px 6px 1px 1px",
722
- borderRadius: "12px",
723
- fontSize: "13px",
724
- fontWeight: 500,
725
- verticalAlign: "middle"
726
- },
727
- children: [
728
- isNode && /* @__PURE__ */ jsx7(NodeIcon, {}),
729
- isArticle && /* @__PURE__ */ jsx7(ArticleIcon, {}),
730
- !isReference && avatar && /* @__PURE__ */ jsx7(
731
- "img",
732
- {
733
- src: avatar,
734
- alt: label || id,
735
- style: {
736
- width: "20px",
737
- height: "20px",
738
- borderRadius: "50%",
739
- flexShrink: 0
740
- }
741
- }
742
- ),
743
- !isReference && !avatar && /* @__PURE__ */ jsx7(
744
- "div",
745
- {
746
- style: {
747
- width: "20px",
748
- height: "20px",
749
- borderRadius: "50%",
750
- backgroundColor: "var(--muted)",
751
- color: "var(--muted-foreground)",
752
- display: "flex",
753
- alignItems: "center",
754
- justifyContent: "center",
755
- fontSize: "10px",
756
- fontWeight: 600,
757
- flexShrink: 0
758
- },
759
- children: (label || id).slice(0, 2).toUpperCase()
760
- }
761
- ),
762
- /* @__PURE__ */ jsx7("span", { children: label || id })
763
- ]
764
- }
765
- );
766
- };
767
-
768
- // src/headless/extensions/Mention/mention.tsx
769
- var createMentionExtension = (options) => {
770
- const extensionName = options?.name ?? "mention";
771
- return Mention.extend({
772
- name: extensionName,
773
- addAttributes() {
774
- return {
775
- id: {
776
- default: null,
777
- parseHTML: (element) => element.getAttribute("data-id"),
778
- renderHTML: (attributes) => {
779
- if (!attributes.id) {
780
- return {};
781
- }
782
- return {
783
- "data-id": attributes.id
784
- };
785
- }
786
- },
787
- label: {
788
- default: null,
789
- parseHTML: (element) => element.getAttribute("data-label"),
790
- renderHTML: (attributes) => {
791
- if (!attributes.label) {
792
- return {};
793
- }
794
- return {
795
- "data-label": attributes.label
796
- };
797
- }
798
- },
799
- avatar: {
800
- default: null,
801
- parseHTML: (element) => element.getAttribute("data-avatar"),
802
- renderHTML: (attributes) => {
803
- if (!attributes.avatar) {
804
- return {};
805
- }
806
- return {
807
- "data-avatar": attributes.avatar
808
- };
809
- }
810
- },
811
- type: {
812
- default: null,
813
- parseHTML: (element) => element.getAttribute("data-ref-type"),
814
- renderHTML: (attributes) => {
815
- if (!attributes.type) {
816
- return {};
817
- }
818
- return {
819
- "data-ref-type": attributes.type
820
- };
821
- }
822
- },
823
- nodeId: {
824
- default: null,
825
- parseHTML: (element) => element.getAttribute("data-node-id"),
826
- renderHTML: (attributes) => {
827
- if (!attributes.nodeId) {
828
- return {};
829
- }
830
- return {
831
- "data-node-id": attributes.nodeId
832
- };
833
- }
834
- },
835
- slug: {
836
- default: null,
837
- parseHTML: (element) => element.getAttribute("data-slug"),
838
- renderHTML: (attributes) => {
839
- if (!attributes.slug) {
840
- return {};
841
- }
842
- return {
843
- "data-slug": attributes.slug
844
- };
845
- }
846
- }
847
- };
848
- },
849
- addNodeView() {
850
- return ReactNodeViewRenderer2(MentionNodeView);
851
- }
852
- }).configure({
853
- HTMLAttributes: {
854
- class: "mention"
855
- },
856
- suggestion: {
857
- char: options?.char ?? "@",
858
- items: async ({ query }) => {
859
- if (!options?.items) return [];
860
- const items = await options.items(query);
861
- return items;
862
- },
863
- command: ({ editor, range, props: item }) => {
864
- editor.chain().focus().insertContentAt(range, [
865
- {
866
- type: extensionName,
867
- attrs: {
868
- id: item.id,
869
- label: item.label,
870
- avatar: item.avatar,
871
- type: item.type,
872
- nodeId: item.nodeId,
873
- slug: item.slug
874
- }
875
- }
876
- ]).run();
877
- },
878
- render: renderMentionSuggestion
879
- },
880
- renderLabel: options?.renderLabel ?? ((props) => {
881
- return `@${props.node.attrs.label ?? props.node.attrs.id}`;
882
- })
883
- });
884
- };
885
- var renderMentionSuggestion = () => {
886
- let component = null;
887
- let container = null;
888
- const destroy = () => {
889
- component?.destroy();
890
- component = null;
891
- if (container) {
892
- container.remove();
893
- container = null;
894
- }
895
- };
896
- const updatePosition = (clientRect) => {
897
- if (!container || !clientRect) return;
898
- const gap = 8;
899
- const maxDropdownHeight = 300;
900
- const spaceBelow = window.innerHeight - clientRect.bottom;
901
- const spaceAbove = clientRect.top;
902
- const shouldPositionAbove = spaceBelow < maxDropdownHeight && spaceAbove > spaceBelow;
903
- const left = Math.round(clientRect.left);
904
- if (shouldPositionAbove) {
905
- const bottom = Math.round(window.innerHeight - clientRect.top + gap);
906
- container.style.bottom = `${bottom}px`;
907
- container.style.top = "auto";
908
- } else {
909
- const top = Math.round(clientRect.bottom + gap);
910
- container.style.top = `${top}px`;
911
- container.style.bottom = "auto";
912
- }
913
- container.style.left = `${left}px`;
914
- };
915
- return {
916
- onStart: (props) => {
917
- component = new ReactRenderer(MentionCommand, {
918
- props: {
919
- items: props.items ?? [],
920
- command: props.command ?? (() => {
921
- }),
922
- query: props.query ?? ""
923
- },
924
- editor: props.editor
925
- });
926
- container = document.createElement("div");
927
- container.style.position = "fixed";
928
- container.style.zIndex = "9999";
929
- document.body.appendChild(container);
930
- container.appendChild(component.element);
931
- const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
932
- if (rect) updatePosition(rect);
933
- },
934
- onUpdate: (props) => {
935
- component?.updateProps({
936
- items: props.items ?? [],
937
- command: props.command ?? (() => {
938
- }),
939
- query: props.query ?? ""
940
- });
941
- const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
942
- if (rect) updatePosition(rect);
943
- },
944
- onKeyDown: ({ event }) => {
945
- if (!component) return false;
946
- if (event.key === "Escape") {
947
- event.preventDefault();
948
- event.stopPropagation();
949
- destroy();
950
- return true;
951
- }
952
- if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
953
- event.preventDefault();
954
- event.stopPropagation();
955
- return component.ref?.onKeyDown?.({ event }) ?? false;
956
- }
957
- return false;
958
- },
959
- onExit: () => {
960
- destroy();
961
- }
962
- };
963
- };
964
-
965
- // src/headless/extensions/DragHandle/DragHandle.ts
966
- import BaseDragHandle from "@tiptap/extension-drag-handle";
967
- var currentCallbacks = {};
968
- var currentNode = null;
969
- var currentEditor = null;
970
- function setDragHandleCallbacks(callbacks) {
971
- currentCallbacks = callbacks;
972
- }
973
- function createDragHandleElement() {
974
- const container = document.createElement("div");
975
- container.className = "nph-drag-handle";
976
- const plusBtn = document.createElement("button");
977
- plusBtn.className = "nph-drag-handle__btn";
978
- plusBtn.type = "button";
979
- plusBtn.setAttribute("aria-label", "Add block");
980
- plusBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>`;
981
- plusBtn.addEventListener("click", (e) => {
982
- e.preventDefault();
983
- e.stopPropagation();
984
- if (currentEditor) {
985
- currentCallbacks.onAddBlock?.(currentEditor, currentNode);
986
- }
987
- });
988
- const gripBtn = document.createElement("button");
989
- gripBtn.className = "nph-drag-handle__btn nph-drag-handle__grip";
990
- gripBtn.type = "button";
991
- gripBtn.setAttribute("aria-label", "Drag to reorder");
992
- gripBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>`;
993
- gripBtn.addEventListener("click", (e) => {
994
- e.preventDefault();
995
- e.stopPropagation();
996
- if (currentEditor) {
997
- currentCallbacks.onGripClick?.(currentEditor, currentNode, container);
998
- }
999
- });
1000
- container.appendChild(plusBtn);
1001
- container.appendChild(gripBtn);
1002
- return container;
1003
- }
1004
- var DragHandle = BaseDragHandle.configure({
1005
- render: createDragHandleElement,
1006
- nested: true,
1007
- onNodeChange: ({ node, editor }) => {
1008
- currentNode = node;
1009
- currentEditor = editor;
1010
- }
1011
- });
1012
-
1013
- // src/headless/extensions/Table/index.ts
1014
- import { TableKit } from "@tiptap/extension-table";
1015
- import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
1016
-
1017
- // src/headless/extensions/MarkdownPaste.ts
1018
- import { Extension } from "@tiptap/core";
1019
- import { Plugin as Plugin3, PluginKey as PluginKey2 } from "@tiptap/pm/state";
1020
- import { MarkdownParser, defaultMarkdownParser } from "@tiptap/pm/markdown";
1021
- var markdownPastePluginKey = new PluginKey2("markdownPaste");
1022
- function looksLikeMarkdown(text) {
1023
- const patterns = [
1024
- /^#{1,6}\s/m,
1025
- // headings
1026
- /^\s*[-*+]\s/m,
1027
- // unordered list
1028
- /^\s*\d+\.\s/m,
1029
- // ordered list
1030
- /^\s*>\s/m,
1031
- // blockquote
1032
- /\|.+\|/m,
1033
- // table
1034
- /^```/m,
1035
- // fenced code block
1036
- /\*\*.+\*\*/,
1037
- // bold
1038
- /\*.+\*/,
1039
- // italic
1040
- /~~.+~~/,
1041
- // strikethrough
1042
- /`[^`]+`/,
1043
- // inline code
1044
- /^\s*---\s*$/m,
1045
- // horizontal rule
1046
- /^\s*\*\*\*\s*$/m,
1047
- // horizontal rule alt
1048
- /\[.+\]\(.+\)/,
1049
- // links
1050
- /!\[.*\]\(.+\)/
1051
- // images
1052
- ];
1053
- const hasMarkdown = patterns.some((p) => p.test(text));
1054
- const isHtml = /^<[a-z][\s\S]*>/i.test(text.trim());
1055
- return hasMarkdown && !isHtml;
1056
- }
1057
- function buildParser(schema) {
1058
- const md = defaultMarkdownParser.tokenizer;
1059
- const tokens = {};
1060
- if (schema.nodes.paragraph) tokens.paragraph = { block: "paragraph" };
1061
- if (schema.nodes.heading) {
1062
- tokens.heading = {
1063
- block: "heading",
1064
- getAttrs: (tok) => ({ level: Number(tok.tag.slice(1)) })
1065
- };
1066
- }
1067
- if (schema.nodes.blockquote) tokens.blockquote = { block: "blockquote" };
1068
- if (schema.nodes.bulletList) tokens.bullet_list = { block: "bulletList" };
1069
- if (schema.nodes.orderedList) {
1070
- tokens.ordered_list = {
1071
- block: "orderedList",
1072
- getAttrs: (tok) => ({ start: Number(tok.attrGet("start") || 1) })
1073
- };
1074
- }
1075
- if (schema.nodes.listItem) tokens.list_item = { block: "listItem" };
1076
- if (schema.nodes.codeBlock) {
1077
- tokens.code_block = { block: "codeBlock", noCloseToken: true };
1078
- tokens.fence = {
1079
- block: "codeBlock",
1080
- getAttrs: (tok) => ({ language: tok.info || "" }),
1081
- noCloseToken: true
1082
- };
1083
- }
1084
- if (schema.nodes.horizontalRule) {
1085
- tokens.hr = { node: "horizontalRule" };
1086
- }
1087
- if (schema.nodes.hardBreak) {
1088
- tokens.hardbreak = { node: "hardBreak" };
1089
- }
1090
- if (schema.nodes.image) {
1091
- tokens.image = {
1092
- node: "image",
1093
- getAttrs: (tok) => ({
1094
- src: tok.attrGet("src"),
1095
- title: tok.attrGet("title") || null,
1096
- alt: tok.children?.[0]?.content || null
1097
- })
1098
- };
1099
- }
1100
- if (schema.nodes.table) {
1101
- tokens.table = { block: "table" };
1102
- tokens.thead = { ignore: true };
1103
- tokens.tbody = { ignore: true };
1104
- tokens.tr = { block: "tableRow" };
1105
- tokens.th = { block: "tableHeader" };
1106
- tokens.td = { block: "tableCell" };
1107
- }
1108
- if (schema.marks.bold || schema.marks.strong) {
1109
- tokens.strong = { mark: schema.marks.bold ? "bold" : "strong" };
1110
- }
1111
- if (schema.marks.italic || schema.marks.em) {
1112
- tokens.em = { mark: schema.marks.italic ? "italic" : "em" };
1113
- }
1114
- if (schema.marks.code) {
1115
- tokens.code_inline = { mark: "code", noCloseToken: true };
1116
- }
1117
- if (schema.marks.link) {
1118
- tokens.link = {
1119
- mark: "link",
1120
- getAttrs: (tok) => ({
1121
- href: tok.attrGet("href"),
1122
- title: tok.attrGet("title") || null
1123
- })
1124
- };
1125
- }
1126
- if (schema.marks.strike || schema.marks.strikethrough) {
1127
- tokens.s = { mark: schema.marks.strike ? "strike" : "strikethrough" };
1128
- }
1129
- try {
1130
- return new MarkdownParser(schema, md, tokens);
1131
- } catch {
1132
- return null;
1133
- }
1134
- }
1135
- var MarkdownPaste = Extension.create({
1136
- name: "markdownPaste",
1137
- addProseMirrorPlugins() {
1138
- const schema = this.editor.schema;
1139
- let parser = null;
1140
- return [
1141
- new Plugin3({
1142
- key: markdownPastePluginKey,
1143
- props: {
1144
- handlePaste(view, event) {
1145
- const clipboardData = event.clipboardData;
1146
- if (!clipboardData) return false;
1147
- const html = clipboardData.getData("text/html");
1148
- if (html && html.trim().length > 0) return false;
1149
- const text = clipboardData.getData("text/plain");
1150
- if (!text || !looksLikeMarkdown(text)) return false;
1151
- if (!parser) {
1152
- parser = buildParser(schema);
1153
- }
1154
- if (!parser) return false;
1155
- try {
1156
- const doc = parser.parse(text);
1157
- if (!doc || doc.content.size === 0) return false;
1158
- const { tr } = view.state;
1159
- const slice = doc.slice(0, doc.content.size);
1160
- tr.replaceSelection(slice);
1161
- view.dispatch(tr);
1162
- return true;
1163
- } catch {
1164
- return false;
1165
- }
1166
- }
1167
- }
1168
- })
1169
- ];
1170
- }
1171
- });
1172
-
1173
- // src/headless/extensions/slash-command.tsx
1174
- import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
1175
- import Suggestion from "@tiptap/suggestion";
1176
- import { Extension as Extension2 } from "@tiptap/core";
1177
- var Command2 = Extension2.create({
1178
- name: "slash-command",
1179
- addOptions() {
1180
- return {
1181
- suggestion: {
1182
- char: "/",
1183
- command: (ctx) => {
1184
- ctx.props.command({ editor: ctx.editor, range: ctx.range });
1185
- }
1186
- }
1187
- };
1188
- },
1189
- addProseMirrorPlugins() {
1190
- const base = this.options.suggestion ?? {};
1191
- return [
1192
- Suggestion({
1193
- editor: this.editor,
1194
- char: base.char ?? "/",
1195
- // Only trigger slash command at start of line or after whitespace
1196
- startOfLine: base.startOfLine ?? true,
1197
- items: base.items ?? (() => ["/"]),
1198
- command: (ctx) => {
1199
- if (typeof ctx?.props?.command === "function") {
1200
- ctx.props.command({ editor: ctx.editor, range: ctx.range });
1201
- }
1202
- },
1203
- ...base
1204
- })
1205
- ];
1206
- }
1207
- });
1208
- var renderItems = (elementRef) => {
1209
- let component = null;
1210
- let container = null;
1211
- const destroy = () => {
1212
- component?.destroy();
1213
- component = null;
1214
- if (container) {
1215
- container.remove();
1216
- container = null;
1217
- }
1218
- };
1219
- const updatePosition = (clientRect) => {
1220
- if (!container || !clientRect) return;
1221
- const menuHeight = container.offsetHeight || 360;
1222
- const viewportHeight = window.innerHeight;
1223
- const spaceBelow = viewportHeight - clientRect.bottom;
1224
- const spaceAbove = clientRect.top;
1225
- let top;
1226
- if (spaceBelow < menuHeight + 16 && spaceAbove > spaceBelow) {
1227
- top = Math.round(clientRect.top - menuHeight - 8);
1228
- if (top < 8) top = 8;
1229
- } else {
1230
- top = Math.round(clientRect.bottom + 8);
1231
- }
1232
- let left = Math.round(clientRect.left);
1233
- const menuWidth = container.offsetWidth || 280;
1234
- if (left + menuWidth > window.innerWidth - 8) {
1235
- left = window.innerWidth - menuWidth - 8;
1236
- }
1237
- if (left < 8) left = 8;
1238
- container.style.top = `${top}px`;
1239
- container.style.left = `${left}px`;
1240
- };
1241
- return {
1242
- onStart: (props) => {
1243
- const { selection } = props.editor.state;
1244
- const parentNode = selection.$from.node(selection.$from.depth);
1245
- const blockType = parentNode.type.name;
1246
- if (blockType === "codeBlock") return false;
1247
- const { $from } = selection;
1248
- const marks = $from.marks();
1249
- if (marks.some((mark) => mark.type.name === "code" || mark.type.name === "link")) {
1250
- return false;
1251
- }
1252
- component = new ReactRenderer2(EditorCommandOut, {
1253
- props: {
1254
- query: props.query ?? "",
1255
- range: props.range
1256
- },
1257
- editor: props.editor
1258
- });
1259
- container = document.createElement("div");
1260
- container.style.position = "fixed";
1261
- container.style.zIndex = "9999";
1262
- container.style.minWidth = "240px";
1263
- (elementRef?.current ?? document.body).appendChild(container);
1264
- container.appendChild(component.element);
1265
- const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
1266
- if (rect) updatePosition(rect);
1267
- },
1268
- onUpdate: (props) => {
1269
- component?.updateProps({
1270
- query: props.query ?? "",
1271
- range: props.range
1272
- });
1273
- const rect = typeof props.clientRect === "function" ? props.clientRect() : null;
1274
- if (rect) updatePosition(rect);
1275
- },
1276
- onKeyDown: ({ event }) => {
1277
- if (event.key === "Escape") {
1278
- destroy();
1279
- return true;
1280
- }
1281
- return false;
1282
- },
1283
- onExit: () => {
1284
- destroy();
1285
- }
1286
- };
1287
- };
1288
- var createSuggestionItems = (items) => items;
1289
- var handleCommandNavigation = (event) => {
1290
- if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
1291
- const slashCommand = document.querySelector("#slash-command");
1292
- if (slashCommand) return true;
1293
- }
1294
- };
1295
-
1296
- export {
1297
- EditorRoot,
1298
- EditorContent,
1299
- EditorBubble,
1300
- EditorBubbleItem,
1301
- EditorCommandOut,
1302
- EditorCommand,
1303
- EditorCommandList,
1304
- EditorCommandItem,
1305
- EditorCommandEmpty,
1306
- CodeBlock,
1307
- Link,
1308
- ImageBlock,
1309
- MentionCommand,
1310
- createMentionExtension,
1311
- renderMentionSuggestion,
1312
- setDragHandleCallbacks,
1313
- DragHandle,
1314
- TableKit,
1315
- MarkdownPaste,
1316
- StarterKit,
1317
- Placeholder,
1318
- Command2 as Command,
1319
- renderItems,
1320
- createSuggestionItems,
1321
- handleCommandNavigation,
1322
- useCurrentEditor4 as useCurrentEditor
1323
- };
1324
- //# sourceMappingURL=chunk-EG7NQJRA.js.map