@june-ai/june-ui 0.2.6 → 0.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -2
- package/README.md +633 -400
- package/dist/block-automount.js +2 -0
- package/dist/{chunk-VFZI3SEL.js → chunk-27XM6EVX.js} +8 -8
- package/dist/chunk-3NVO336D.cjs +4314 -0
- package/dist/chunk-G6YPSE6J.cjs +520 -0
- package/dist/chunk-H26BMR5S.js +4314 -0
- package/dist/{document-engine-RKD5SLXR.js → document-engine-BUTK73DW.js} +1 -1
- package/dist/document-engine-GXZH2LNW.cjs +12 -0
- package/dist/entry-core.cjs +148 -0
- package/dist/entry-core.d.cts +1005 -0
- package/dist/entry-core.d.ts +1005 -0
- package/dist/entry-core.js +149 -0
- package/dist/index.cjs +173 -4196
- package/dist/index.d.cts +81 -525
- package/dist/index.d.ts +81 -525
- package/dist/index.js +155 -3552
- package/dist/june.css +94 -0
- package/docs/architecture.md +95 -0
- package/docs/component-registration.md +115 -0
- package/docs/custom-features.md +68 -0
- package/docs/streaming.md +76 -0
- package/docs/theming.md +65 -0
- package/docs/troubleshooting.md +59 -0
- package/package.json +23 -6
package/dist/index.js
CHANGED
|
@@ -1,3577 +1,151 @@
|
|
|
1
|
+
import "./block-automount.js";
|
|
2
|
+
import {
|
|
3
|
+
ALL_EXPORT_FORMATS,
|
|
4
|
+
ComponentRegistry,
|
|
5
|
+
DOCUMENT_COMPONENT_DESCRIPTION,
|
|
6
|
+
DocumentBridge,
|
|
7
|
+
DocumentEditor,
|
|
8
|
+
JuneDocumentContext,
|
|
9
|
+
JuneDocumentEditorComponent,
|
|
10
|
+
JuneErrorBoundary,
|
|
11
|
+
JuneRenderer,
|
|
12
|
+
JuneRuntimeContext,
|
|
13
|
+
JuneThemeProvider,
|
|
14
|
+
MarkdownText,
|
|
15
|
+
ToolApproval,
|
|
16
|
+
ToolApprovalList,
|
|
17
|
+
consumeStream,
|
|
18
|
+
copyDocumentToClipboard,
|
|
19
|
+
createActionHandler,
|
|
20
|
+
createComponentRegistry,
|
|
21
|
+
createDocumentStore,
|
|
22
|
+
createJuneLibrary,
|
|
23
|
+
createLangGraphExtractor,
|
|
24
|
+
createTheme,
|
|
25
|
+
darkTheme,
|
|
26
|
+
defaultParseActionEvent,
|
|
27
|
+
defaultToolApprovalLabels,
|
|
28
|
+
defineComponent,
|
|
29
|
+
defineJuneAction,
|
|
30
|
+
defineJuneComponent,
|
|
31
|
+
documentPromptOptions,
|
|
32
|
+
downloadResult,
|
|
33
|
+
exportDocument,
|
|
34
|
+
fetchStream,
|
|
35
|
+
getDefaultDocumentStore,
|
|
36
|
+
getDocumentEditorInstructions,
|
|
37
|
+
getDocumentEditorRules,
|
|
38
|
+
interruptToApprovalRequests,
|
|
39
|
+
isDocumentEcho,
|
|
40
|
+
isJuneComponent,
|
|
41
|
+
isThemeSet,
|
|
42
|
+
jsonFieldExtractor,
|
|
43
|
+
langGraphStreamOptions,
|
|
44
|
+
lightTheme,
|
|
45
|
+
listDocumentExporters,
|
|
46
|
+
mergeDocuments,
|
|
47
|
+
messageContentToText,
|
|
48
|
+
normalizeProgram,
|
|
49
|
+
readDocumentFromProgram,
|
|
50
|
+
readLangGraphInterrupts,
|
|
51
|
+
registerDocumentExporter,
|
|
52
|
+
rememberDocumentEcho,
|
|
53
|
+
resolveMixedContent,
|
|
54
|
+
resolveThemeVars,
|
|
55
|
+
runAction,
|
|
56
|
+
serializeDocumentsForAgent,
|
|
57
|
+
splitResponse,
|
|
58
|
+
sseToText,
|
|
59
|
+
toAsyncIterable,
|
|
60
|
+
updateDocumentInProgram,
|
|
61
|
+
useDocumentBridge,
|
|
62
|
+
useDocumentOptions,
|
|
63
|
+
useJuneRuntime,
|
|
64
|
+
useJuneStream,
|
|
65
|
+
useJuneTheme,
|
|
66
|
+
useRegistryLibrary,
|
|
67
|
+
useResolvedTheme,
|
|
68
|
+
useToolApproval,
|
|
69
|
+
validateComponentDefinition,
|
|
70
|
+
withDocumentEditor
|
|
71
|
+
} from "./chunk-H26BMR5S.js";
|
|
1
72
|
import {
|
|
2
73
|
JuneError,
|
|
3
|
-
createDocumentExtensions,
|
|
4
|
-
debounce,
|
|
5
|
-
docKey,
|
|
6
|
-
docToHtml,
|
|
7
|
-
docToMarkdown,
|
|
8
|
-
emptyDoc,
|
|
9
|
-
getPageCount,
|
|
10
|
-
getSearchState,
|
|
11
|
-
gotoMatch,
|
|
12
74
|
isJuneError,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
replaceAll,
|
|
16
|
-
replaceCurrent,
|
|
17
|
-
sanitizeHref,
|
|
18
|
-
setPaginationConfig,
|
|
19
|
-
setSearch,
|
|
20
|
-
slugify,
|
|
21
|
-
toJuneError,
|
|
22
|
-
wordCountOf
|
|
23
|
-
} from "./chunk-VFZI3SEL.js";
|
|
24
|
-
|
|
25
|
-
// src/renderer/renderer.tsx
|
|
26
|
-
import { Renderer } from "@openuidev/react-lang";
|
|
27
|
-
import {
|
|
28
|
-
Fragment,
|
|
29
|
-
useCallback,
|
|
30
|
-
useEffect,
|
|
31
|
-
useMemo as useMemo2,
|
|
32
|
-
useRef
|
|
33
|
-
} from "react";
|
|
34
|
-
|
|
35
|
-
// src/actions/action-handler.ts
|
|
36
|
-
function firstString(...values) {
|
|
37
|
-
for (const v of values) if (typeof v === "string" && v.length > 0) return v;
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
|
-
var defaultParseActionEvent = (event) => {
|
|
41
|
-
if (!event || typeof event !== "object") return null;
|
|
42
|
-
const e = event;
|
|
43
|
-
const name = firstString(e.type, e.name, e.action);
|
|
44
|
-
if (!name) return null;
|
|
45
|
-
return { name, payload: e.params ?? e.payload ?? e.data };
|
|
46
|
-
};
|
|
47
|
-
async function runAction(event, options) {
|
|
48
|
-
const { actions, parseEvent = defaultParseActionEvent, confirm, onError, onUnhandled } = options;
|
|
49
|
-
const parsed = parseEvent(event);
|
|
50
|
-
const action = parsed && Object.prototype.hasOwnProperty.call(actions, parsed.name) ? actions[parsed.name] : void 0;
|
|
51
|
-
if (!parsed || !action) {
|
|
52
|
-
onUnhandled?.(event);
|
|
53
|
-
return "unhandled";
|
|
54
|
-
}
|
|
55
|
-
const { name } = parsed;
|
|
56
|
-
let payload = parsed.payload;
|
|
57
|
-
if (action.schema) {
|
|
58
|
-
const result = action.schema.safeParse(payload);
|
|
59
|
-
if (!result.success) {
|
|
60
|
-
onError?.(
|
|
61
|
-
new JuneError("ACTION_VALIDATION_ERROR", `Invalid payload for action "${name}"`, {
|
|
62
|
-
details: result.error
|
|
63
|
-
})
|
|
64
|
-
);
|
|
65
|
-
return "failed";
|
|
66
|
-
}
|
|
67
|
-
payload = result.data;
|
|
68
|
-
}
|
|
69
|
-
try {
|
|
70
|
-
if (action.sensitive || action.confirm) {
|
|
71
|
-
const ask = action.confirm ?? confirm;
|
|
72
|
-
if (!ask) {
|
|
73
|
-
onError?.(
|
|
74
|
-
new JuneError(
|
|
75
|
-
"ACTION_REJECTED",
|
|
76
|
-
`Action "${name}" requires confirmation but no confirm handler was provided`
|
|
77
|
-
)
|
|
78
|
-
);
|
|
79
|
-
return "rejected";
|
|
80
|
-
}
|
|
81
|
-
const approved = await ask({ name, payload, description: action.description });
|
|
82
|
-
if (!approved) return "rejected";
|
|
83
|
-
}
|
|
84
|
-
await action.handler(payload, { name, event });
|
|
85
|
-
return "handled";
|
|
86
|
-
} catch (error) {
|
|
87
|
-
onError?.(toJuneError(error, "ACTION_ERROR"));
|
|
88
|
-
return "failed";
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
function createActionHandler(options) {
|
|
92
|
-
return (event) => {
|
|
93
|
-
void runAction(event, options);
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
// src/components/document-editor/document-context.ts
|
|
98
|
-
import { createContext, useContext, useSyncExternalStore } from "react";
|
|
99
|
-
var JuneDocumentContext = createContext({});
|
|
100
|
-
function useDocumentOptions() {
|
|
101
|
-
return useContext(JuneDocumentContext);
|
|
102
|
-
}
|
|
103
|
-
function useDocumentValue(store, id, selector) {
|
|
104
|
-
const read = () => selector(store.get(id));
|
|
105
|
-
return useSyncExternalStore(store.subscribe, read, read);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// src/components/document-editor/document-merge.ts
|
|
109
|
-
var MAX_CELLS = 4e6;
|
|
110
|
-
function matchIndices(a, b) {
|
|
111
|
-
const n = a.length;
|
|
112
|
-
const m = b.length;
|
|
113
|
-
if (n * m > MAX_CELLS) return null;
|
|
114
|
-
const dp = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
|
|
115
|
-
for (let i2 = n - 1; i2 >= 0; i2--) {
|
|
116
|
-
for (let j2 = m - 1; j2 >= 0; j2--) {
|
|
117
|
-
dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
const matches = /* @__PURE__ */ new Map();
|
|
121
|
-
let i = 0;
|
|
122
|
-
let j = 0;
|
|
123
|
-
while (i < n && j < m) {
|
|
124
|
-
if (a[i] === b[j]) {
|
|
125
|
-
matches.set(i, j);
|
|
126
|
-
i++;
|
|
127
|
-
j++;
|
|
128
|
-
} else if (dp[i + 1][j] >= dp[i][j + 1]) i++;
|
|
129
|
-
else j++;
|
|
130
|
-
}
|
|
131
|
-
return matches;
|
|
132
|
-
}
|
|
133
|
-
var same = (x, y) => x.length === y.length && x.every((v, i) => v === y[i]);
|
|
134
|
-
function mergeBlocks(base, local, incoming) {
|
|
135
|
-
if (same(local, base)) return { blocks: incoming, conflicts: 0 };
|
|
136
|
-
if (same(incoming, base) || same(local, incoming)) return { blocks: local, conflicts: 0 };
|
|
137
|
-
const ml = matchIndices(base, local);
|
|
138
|
-
const mn = matchIndices(base, incoming);
|
|
139
|
-
if (!ml || !mn) return { blocks: null, conflicts: 1 };
|
|
140
|
-
const anchors = [...ml.keys()].filter((i) => mn.has(i)).sort((x, y) => x - y);
|
|
141
|
-
const out = [];
|
|
142
|
-
let conflicts = 0;
|
|
143
|
-
let pb = -1;
|
|
144
|
-
let pl = -1;
|
|
145
|
-
let pn = -1;
|
|
146
|
-
const region = (bEnd, lEnd, nEnd) => {
|
|
147
|
-
const B = base.slice(pb + 1, bEnd);
|
|
148
|
-
const L = local.slice(pl + 1, lEnd);
|
|
149
|
-
const N = incoming.slice(pn + 1, nEnd);
|
|
150
|
-
if (B.length === L.length && L.length === N.length) {
|
|
151
|
-
for (let k = 0; k < B.length; k++) {
|
|
152
|
-
if (L[k] === B[k]) out.push(N[k]);
|
|
153
|
-
else if (N[k] === B[k] || N[k] === L[k]) out.push(L[k]);
|
|
154
|
-
else {
|
|
155
|
-
conflicts++;
|
|
156
|
-
out.push(L[k]);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
if (same(L, B)) out.push(...N);
|
|
162
|
-
else if (same(N, B) || same(L, N)) out.push(...L);
|
|
163
|
-
else {
|
|
164
|
-
conflicts++;
|
|
165
|
-
out.push(...L);
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
for (const a of anchors) {
|
|
169
|
-
const la = ml.get(a);
|
|
170
|
-
const na = mn.get(a);
|
|
171
|
-
region(a, la, na);
|
|
172
|
-
out.push(local[la]);
|
|
173
|
-
pb = a;
|
|
174
|
-
pl = la;
|
|
175
|
-
pn = na;
|
|
176
|
-
}
|
|
177
|
-
region(base.length, local.length, incoming.length);
|
|
178
|
-
return { blocks: out, conflicts };
|
|
179
|
-
}
|
|
180
|
-
function mergeDocuments(base, local, incoming) {
|
|
181
|
-
const toBlocks = (d) => (d.content ?? []).map((node) => JSON.stringify(node));
|
|
182
|
-
const { blocks: blocks2, conflicts } = mergeBlocks(toBlocks(base), toBlocks(local), toBlocks(incoming));
|
|
183
|
-
if (!blocks2) return { doc: local, conflicts: Math.max(1, conflicts) };
|
|
184
|
-
if (blocks2.length === 0) return { doc: emptyDoc(), conflicts };
|
|
185
|
-
return { doc: { type: "doc", content: blocks2.map((b) => JSON.parse(b)) }, conflicts };
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
// src/components/document-editor/document-store.ts
|
|
189
|
-
var incomingKey = (doc) => JSON.stringify([doc.title, docKey(doc.json)]);
|
|
190
|
-
function createDocumentStore() {
|
|
191
|
-
const records = /* @__PURE__ */ new Map();
|
|
192
|
-
const listeners = /* @__PURE__ */ new Set();
|
|
193
|
-
const emit = () => listeners.forEach((listener) => listener());
|
|
194
|
-
const put = (record) => {
|
|
195
|
-
records.set(record.id, record);
|
|
196
|
-
emit();
|
|
197
|
-
};
|
|
198
|
-
const fresh2 = (doc) => ({
|
|
199
|
-
id: doc.id,
|
|
200
|
-
title: doc.title,
|
|
201
|
-
documentType: doc.documentType,
|
|
202
|
-
status: doc.status,
|
|
203
|
-
json: doc.json,
|
|
204
|
-
baseJson: doc.json,
|
|
205
|
-
baseTitle: doc.title,
|
|
206
|
-
lastIncomingKey: incomingKey(doc),
|
|
207
|
-
revision: 0,
|
|
208
|
-
origin: "external",
|
|
209
|
-
pending: null,
|
|
210
|
-
updatedAt: Date.now()
|
|
211
|
-
});
|
|
212
|
-
return {
|
|
213
|
-
get: (id) => records.get(id),
|
|
214
|
-
list: () => [...records.values()],
|
|
215
|
-
subscribe: (listener) => {
|
|
216
|
-
listeners.add(listener);
|
|
217
|
-
return () => {
|
|
218
|
-
listeners.delete(listener);
|
|
219
|
-
};
|
|
220
|
-
},
|
|
221
|
-
receive(incoming) {
|
|
222
|
-
const current = records.get(incoming.id);
|
|
223
|
-
if (!current) {
|
|
224
|
-
put(fresh2(incoming));
|
|
225
|
-
return "created";
|
|
226
|
-
}
|
|
227
|
-
const key = incomingKey(incoming);
|
|
228
|
-
if (current.lastIncomingKey === key) return "unchanged";
|
|
229
|
-
const userEditedBody = docKey(current.json) !== docKey(current.baseJson);
|
|
230
|
-
const userEditedTitle = current.title !== current.baseTitle;
|
|
231
|
-
const title = userEditedTitle ? current.title : incoming.title;
|
|
232
|
-
const meta = {
|
|
233
|
-
documentType: incoming.documentType ?? current.documentType,
|
|
234
|
-
status: incoming.status ?? current.status
|
|
235
|
-
};
|
|
236
|
-
if (!userEditedBody) {
|
|
237
|
-
put({
|
|
238
|
-
...current,
|
|
239
|
-
...meta,
|
|
240
|
-
title,
|
|
241
|
-
baseTitle: incoming.title,
|
|
242
|
-
json: incoming.json,
|
|
243
|
-
baseJson: incoming.json,
|
|
244
|
-
lastIncomingKey: key,
|
|
245
|
-
revision: current.revision + 1,
|
|
246
|
-
origin: "external",
|
|
247
|
-
pending: null,
|
|
248
|
-
updatedAt: Date.now()
|
|
249
|
-
});
|
|
250
|
-
return "applied";
|
|
251
|
-
}
|
|
252
|
-
const { doc, conflicts } = mergeDocuments(current.baseJson, current.json, incoming.json);
|
|
253
|
-
if (conflicts === 0) {
|
|
254
|
-
put({
|
|
255
|
-
...current,
|
|
256
|
-
...meta,
|
|
257
|
-
title,
|
|
258
|
-
baseTitle: incoming.title,
|
|
259
|
-
json: doc,
|
|
260
|
-
baseJson: incoming.json,
|
|
261
|
-
lastIncomingKey: key,
|
|
262
|
-
revision: current.revision + 1,
|
|
263
|
-
origin: "external",
|
|
264
|
-
pending: null,
|
|
265
|
-
updatedAt: Date.now()
|
|
266
|
-
});
|
|
267
|
-
return "merged";
|
|
268
|
-
}
|
|
269
|
-
put({
|
|
270
|
-
...current,
|
|
271
|
-
...meta,
|
|
272
|
-
lastIncomingKey: key,
|
|
273
|
-
pending: { json: incoming.json, title: incoming.title, merged: doc, conflicts }
|
|
274
|
-
});
|
|
275
|
-
return "conflict";
|
|
276
|
-
},
|
|
277
|
-
hydrate(doc) {
|
|
278
|
-
put(fresh2(doc));
|
|
279
|
-
},
|
|
280
|
-
edit(id, json, origin) {
|
|
281
|
-
const current = records.get(id);
|
|
282
|
-
if (!current || docKey(current.json) === docKey(json)) return;
|
|
283
|
-
put({ ...current, json, origin, revision: current.revision + 1, updatedAt: Date.now() });
|
|
284
|
-
},
|
|
285
|
-
setTitle(id, title) {
|
|
286
|
-
const current = records.get(id);
|
|
287
|
-
if (!current || current.title === title) return;
|
|
288
|
-
put({ ...current, title, updatedAt: Date.now() });
|
|
289
|
-
},
|
|
290
|
-
resolve(id, choice) {
|
|
291
|
-
const current = records.get(id);
|
|
292
|
-
const pending = current?.pending;
|
|
293
|
-
if (!current || !pending) return;
|
|
294
|
-
if (choice === "keep") {
|
|
295
|
-
put({ ...current, baseJson: pending.json, baseTitle: pending.title, pending: null });
|
|
296
|
-
return;
|
|
297
|
-
}
|
|
298
|
-
const json = choice === "merge" ? pending.merged : pending.json;
|
|
299
|
-
const title = choice === "merge" ? current.title : pending.title;
|
|
300
|
-
put({
|
|
301
|
-
...current,
|
|
302
|
-
title,
|
|
303
|
-
json,
|
|
304
|
-
baseJson: pending.json,
|
|
305
|
-
baseTitle: pending.title,
|
|
306
|
-
revision: current.revision + 1,
|
|
307
|
-
origin: "external",
|
|
308
|
-
pending: null,
|
|
309
|
-
updatedAt: Date.now()
|
|
310
|
-
});
|
|
311
|
-
},
|
|
312
|
-
remove(id) {
|
|
313
|
-
if (records.delete(id)) emit();
|
|
314
|
-
}
|
|
315
|
-
};
|
|
316
|
-
}
|
|
317
|
-
var echoes = /* @__PURE__ */ new WeakMap();
|
|
318
|
-
var ECHO_MEMORY = 8;
|
|
319
|
-
function rememberDocumentEcho(store, id, content) {
|
|
320
|
-
let byId = echoes.get(store);
|
|
321
|
-
if (!byId) echoes.set(store, byId = /* @__PURE__ */ new Map());
|
|
322
|
-
const list2 = byId.get(id) ?? [];
|
|
323
|
-
list2.push(content);
|
|
324
|
-
if (list2.length > ECHO_MEMORY) list2.shift();
|
|
325
|
-
byId.set(id, list2);
|
|
326
|
-
}
|
|
327
|
-
function isDocumentEcho(store, id, content) {
|
|
328
|
-
return !!content && !!echoes.get(store)?.get(id)?.includes(content);
|
|
329
|
-
}
|
|
330
|
-
var defaultStore = null;
|
|
331
|
-
function getDefaultDocumentStore() {
|
|
332
|
-
if (!defaultStore) defaultStore = createDocumentStore();
|
|
333
|
-
return defaultStore;
|
|
334
|
-
}
|
|
75
|
+
toJuneError
|
|
76
|
+
} from "./chunk-27XM6EVX.js";
|
|
335
77
|
|
|
336
|
-
// src/
|
|
337
|
-
function
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
const ch = src[j];
|
|
343
|
-
if (ch === '"') return { start: i, end: j + 1, value };
|
|
344
|
-
if (ch === "\\") {
|
|
345
|
-
const next = src[j + 1];
|
|
346
|
-
if (next === void 0) return null;
|
|
347
|
-
if (next === "u" && /^[0-9a-fA-F]{4}$/.test(src.slice(j + 2, j + 6))) {
|
|
348
|
-
value += String.fromCharCode(parseInt(src.slice(j + 2, j + 6), 16));
|
|
349
|
-
j += 6;
|
|
350
|
-
continue;
|
|
351
|
-
}
|
|
352
|
-
value += next === "n" ? "\n" : next === "t" ? " " : next === "r" ? "\r" : next === "b" ? "\b" : next === "f" ? "\f" : next;
|
|
353
|
-
j += 2;
|
|
354
|
-
continue;
|
|
355
|
-
}
|
|
356
|
-
value += ch;
|
|
357
|
-
j++;
|
|
358
|
-
}
|
|
359
|
-
return null;
|
|
360
|
-
}
|
|
361
|
-
var skipSpace = (src, i) => {
|
|
362
|
-
while (i < src.length && /\s/.test(src[i])) i++;
|
|
363
|
-
return i;
|
|
364
|
-
};
|
|
365
|
-
var toLangString = (value) => JSON.stringify(value);
|
|
366
|
-
function updateDocumentInProgram(program, documentId, update, componentName = "DocumentEditor") {
|
|
367
|
-
const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
|
|
368
|
-
let match;
|
|
369
|
-
while (match = re.exec(program)) {
|
|
370
|
-
const args = [];
|
|
371
|
-
let i = match.index + match[0].length;
|
|
372
|
-
for (let n = 0; n < 3; n++) {
|
|
373
|
-
i = skipSpace(program, i);
|
|
374
|
-
const tok = readString(program, i);
|
|
375
|
-
if (!tok) break;
|
|
376
|
-
args.push(tok);
|
|
377
|
-
i = skipSpace(program, tok.end);
|
|
378
|
-
if (program[i] === ",") i++;
|
|
379
|
-
else break;
|
|
380
|
-
}
|
|
381
|
-
if (args[0]?.value !== documentId) continue;
|
|
382
|
-
const edits = [];
|
|
383
|
-
if (update.title !== void 0 && args[1] && args[1].value !== update.title) {
|
|
384
|
-
edits.push({ start: args[1].start, end: args[1].end, text: toLangString(update.title) });
|
|
385
|
-
}
|
|
386
|
-
if (update.content !== void 0 && args[2] && args[2].value !== update.content) {
|
|
387
|
-
edits.push({ start: args[2].start, end: args[2].end, text: toLangString(update.content) });
|
|
388
|
-
}
|
|
389
|
-
if (!args[2] && update.content !== void 0) return null;
|
|
390
|
-
let out = program;
|
|
391
|
-
for (const e of edits.sort((a, b) => b.start - a.start)) {
|
|
392
|
-
out = out.slice(0, e.start) + e.text + out.slice(e.end);
|
|
393
|
-
}
|
|
394
|
-
return out;
|
|
78
|
+
// src/core/config.ts
|
|
79
|
+
function mergeDefined(...sources) {
|
|
80
|
+
const out = {};
|
|
81
|
+
for (const source of sources) {
|
|
82
|
+
if (!source) continue;
|
|
83
|
+
for (const [key, value] of Object.entries(source)) if (value !== void 0) out[key] = value;
|
|
395
84
|
}
|
|
396
|
-
return
|
|
397
|
-
}
|
|
398
|
-
function readDocumentFromProgram(program, documentId, componentName = "DocumentEditor") {
|
|
399
|
-
const re = new RegExp(`\\b${componentName}\\s*\\(`, "g");
|
|
400
|
-
let match;
|
|
401
|
-
while (match = re.exec(program)) {
|
|
402
|
-
const args = [];
|
|
403
|
-
let i = match.index + match[0].length;
|
|
404
|
-
for (let n = 0; n < 3; n++) {
|
|
405
|
-
i = skipSpace(program, i);
|
|
406
|
-
const tok = readString(program, i);
|
|
407
|
-
if (!tok) break;
|
|
408
|
-
args.push(tok);
|
|
409
|
-
i = skipSpace(program, tok.end);
|
|
410
|
-
if (program[i] === ",") i++;
|
|
411
|
-
else break;
|
|
412
|
-
}
|
|
413
|
-
if (args[0]?.value === documentId && args[1] && args[2]) return { title: args[1].value, content: args[2].value };
|
|
414
|
-
}
|
|
415
|
-
return null;
|
|
85
|
+
return out;
|
|
416
86
|
}
|
|
417
87
|
|
|
418
|
-
// src/core/
|
|
419
|
-
import {
|
|
420
|
-
var
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
function useJuneTheme() {
|
|
425
|
-
return useContext2(JuneContext);
|
|
88
|
+
// src/core/default-library.ts
|
|
89
|
+
import { openuiLibrary } from "@openuidev/react-ui";
|
|
90
|
+
var juneLibrary = withDocumentEditor(openuiLibrary);
|
|
91
|
+
var defaultRegistry = createComponentRegistry({ base: juneLibrary });
|
|
92
|
+
function registerComponent(components, options) {
|
|
93
|
+
return defaultRegistry.register(components, options);
|
|
426
94
|
}
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
return useContext2(JuneRuntimeContext);
|
|
95
|
+
function unregisterComponent(name) {
|
|
96
|
+
return defaultRegistry.unregister(name);
|
|
430
97
|
}
|
|
431
98
|
|
|
432
|
-
// src/
|
|
433
|
-
import {
|
|
434
|
-
useMemo,
|
|
435
|
-
useSyncExternalStore as useSyncExternalStore2
|
|
436
|
-
} from "react";
|
|
437
|
-
|
|
438
|
-
// src/themes/dark.ts
|
|
439
|
-
var darkTheme = {
|
|
440
|
-
"--june-foreground": "#f3f4f6",
|
|
441
|
-
"--june-muted": "#9ca3af",
|
|
442
|
-
"--june-border": "#1f2937",
|
|
443
|
-
"--june-accent": "#818cf8",
|
|
444
|
-
"--june-danger": "#f87171"
|
|
445
|
-
};
|
|
446
|
-
|
|
447
|
-
// src/themes/light.ts
|
|
448
|
-
var lightTheme = {
|
|
449
|
-
"--june-foreground": "#111827",
|
|
450
|
-
"--june-muted": "#6b7280",
|
|
451
|
-
"--june-border": "#e5e7eb",
|
|
452
|
-
"--june-accent": "#4f46e5",
|
|
453
|
-
"--june-danger": "#b91c1c"
|
|
454
|
-
};
|
|
455
|
-
|
|
456
|
-
// src/themes/theme-provider.tsx
|
|
99
|
+
// src/core/june-ui-provider.tsx
|
|
100
|
+
import { createContext, useContext, useMemo } from "react";
|
|
457
101
|
import { jsx } from "react/jsx-runtime";
|
|
458
|
-
var
|
|
459
|
-
function
|
|
460
|
-
|
|
461
|
-
};
|
|
462
|
-
const mq = window.matchMedia(QUERY);
|
|
463
|
-
mq.addEventListener("change", onChange);
|
|
464
|
-
return () => mq.removeEventListener("change", onChange);
|
|
465
|
-
}
|
|
466
|
-
function getSnapshot() {
|
|
467
|
-
if (typeof window === "undefined") return "light";
|
|
468
|
-
return window.matchMedia?.(QUERY)?.matches ? "dark" : "light";
|
|
469
|
-
}
|
|
470
|
-
function getServerSnapshot() {
|
|
471
|
-
return "light";
|
|
472
|
-
}
|
|
473
|
-
function useResolvedTheme(mode) {
|
|
474
|
-
const system = useSyncExternalStore2(subscribe, getSnapshot, getServerSnapshot);
|
|
475
|
-
return mode === "system" ? system : mode;
|
|
476
|
-
}
|
|
477
|
-
function JuneThemeProvider({
|
|
478
|
-
mode,
|
|
479
|
-
vars,
|
|
480
|
-
className,
|
|
481
|
-
style,
|
|
482
|
-
children
|
|
483
|
-
}) {
|
|
484
|
-
const explicit = mode !== void 0;
|
|
485
|
-
const resolved = useResolvedTheme(mode ?? "system");
|
|
486
|
-
const mergedStyle = useMemo(() => {
|
|
487
|
-
if (!explicit && !vars && !style) return void 0;
|
|
488
|
-
const base = explicit ? resolved === "dark" ? darkTheme : lightTheme : void 0;
|
|
489
|
-
return {
|
|
490
|
-
...base,
|
|
491
|
-
...vars,
|
|
492
|
-
...explicit ? { colorScheme: resolved } : {},
|
|
493
|
-
...style
|
|
494
|
-
};
|
|
495
|
-
}, [explicit, resolved, vars, style]);
|
|
496
|
-
const context = useMemo(
|
|
497
|
-
() => ({ mode: mode ?? "system", theme: resolved }),
|
|
498
|
-
[mode, resolved]
|
|
499
|
-
);
|
|
500
|
-
return /* @__PURE__ */ jsx(JuneContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
|
|
501
|
-
"div",
|
|
502
|
-
{
|
|
503
|
-
className: className ? `june-ui-root ${className}` : "june-ui-root",
|
|
504
|
-
"data-june-theme": explicit ? resolved : void 0,
|
|
505
|
-
style: mergedStyle,
|
|
506
|
-
children
|
|
507
|
-
}
|
|
508
|
-
) });
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
// src/utils/normalize-program.ts
|
|
512
|
-
var ATTACHABLE = /* @__PURE__ */ new Set([
|
|
513
|
-
"Accordion",
|
|
514
|
-
"AreaChart",
|
|
515
|
-
"BarChart",
|
|
516
|
-
"Buttons",
|
|
517
|
-
"Button",
|
|
518
|
-
"Callout",
|
|
519
|
-
"Card",
|
|
520
|
-
"CardHeader",
|
|
521
|
-
"Carousel",
|
|
522
|
-
"CodeBlock",
|
|
523
|
-
"CompositeCardBlock",
|
|
524
|
-
"ContextCardBlock",
|
|
525
|
-
"DocumentEditor",
|
|
526
|
-
"EditableTable",
|
|
527
|
-
"EntityList",
|
|
528
|
-
"Form",
|
|
529
|
-
"HorizontalBarChart",
|
|
530
|
-
"IconButton",
|
|
531
|
-
"Image",
|
|
532
|
-
"ImageBlock",
|
|
533
|
-
"ImageGallery",
|
|
534
|
-
"InlineHeader",
|
|
535
|
-
"LineChart",
|
|
536
|
-
"ListBlock",
|
|
537
|
-
"MarkDownRenderer",
|
|
538
|
-
"Modal",
|
|
539
|
-
"OverviewCardBlock",
|
|
540
|
-
"PieChart",
|
|
541
|
-
"RadarChart",
|
|
542
|
-
"RadialChart",
|
|
543
|
-
"ScatterChart",
|
|
544
|
-
"Separator",
|
|
545
|
-
"SingleStackedBarChart",
|
|
546
|
-
"SnippetCardBlock",
|
|
547
|
-
"Stack",
|
|
548
|
-
"Steps",
|
|
549
|
-
"Table",
|
|
550
|
-
"Tabs",
|
|
551
|
-
"TagBlock",
|
|
552
|
-
"TextCallout",
|
|
553
|
-
"TextContent",
|
|
554
|
-
"VisualCardBlock"
|
|
555
|
-
]);
|
|
556
|
-
function normalizeProgram(source) {
|
|
557
|
-
const rewritten = rewriteCalls(source);
|
|
558
|
-
return attachOrphans(rewritten);
|
|
559
|
-
}
|
|
560
|
-
function rewriteCalls(source) {
|
|
561
|
-
let out = "";
|
|
562
|
-
let i = 0;
|
|
563
|
-
let quote = false;
|
|
564
|
-
while (i < source.length) {
|
|
565
|
-
const ch = source[i];
|
|
566
|
-
if (quote) {
|
|
567
|
-
out += ch;
|
|
568
|
-
if (ch === "\\") {
|
|
569
|
-
i += 1;
|
|
570
|
-
if (i < source.length) out += source[i];
|
|
571
|
-
} else if (ch === '"') {
|
|
572
|
-
quote = false;
|
|
573
|
-
}
|
|
574
|
-
i += 1;
|
|
575
|
-
continue;
|
|
576
|
-
}
|
|
577
|
-
if (ch === '"') {
|
|
578
|
-
quote = true;
|
|
579
|
-
out += ch;
|
|
580
|
-
i += 1;
|
|
581
|
-
continue;
|
|
582
|
-
}
|
|
583
|
-
const call = readCall(source, i);
|
|
584
|
-
if (call) {
|
|
585
|
-
const next = rewriteKnownCall(call);
|
|
586
|
-
if (next !== null) {
|
|
587
|
-
out += next;
|
|
588
|
-
i = call.end;
|
|
589
|
-
continue;
|
|
590
|
-
}
|
|
591
|
-
}
|
|
592
|
-
out += ch;
|
|
593
|
-
i += 1;
|
|
594
|
-
}
|
|
595
|
-
return out === source ? source : out;
|
|
596
|
-
}
|
|
597
|
-
function rewriteKnownCall(call) {
|
|
598
|
-
if (call.callee === "Grid") {
|
|
599
|
-
const args = call.args.map((arg) => rewriteCalls(arg));
|
|
600
|
-
const children = args.length === 0 ? "[]" : args.length === 1 ? args[0] : null;
|
|
601
|
-
if (children !== null) {
|
|
602
|
-
return `Stack(${children}, "row", "m", "stretch", "start", true)`;
|
|
603
|
-
}
|
|
604
|
-
return `Stack(${args.join(", ")})`;
|
|
605
|
-
}
|
|
606
|
-
if (call.callee === "Card") {
|
|
607
|
-
const args = call.args.map((arg) => rewriteCalls(arg));
|
|
608
|
-
if (args.length >= 2 && isStringLiteral(args[0]) && isStringLiteral(args[1])) {
|
|
609
|
-
const children = `[TextContent(${args[0]}, "small"), TextContent(${args[1]}, "large-heavy")]`;
|
|
610
|
-
return `Card(${[children, ...args.slice(2)].join(", ")})`;
|
|
611
|
-
}
|
|
612
|
-
if (args.some((arg, index) => arg !== call.args[index])) {
|
|
613
|
-
return `Card(${args.join(", ")})`;
|
|
614
|
-
}
|
|
615
|
-
}
|
|
616
|
-
return null;
|
|
617
|
-
}
|
|
618
|
-
function readCall(source, index) {
|
|
619
|
-
if (index > 0 && /[A-Za-z0-9_$]/.test(source[index - 1])) return null;
|
|
620
|
-
const match = /^(Grid|Card)\s*\(/.exec(source.slice(index));
|
|
621
|
-
if (!match) return null;
|
|
622
|
-
const open = index + match[0].length - 1;
|
|
623
|
-
const close = findMatchingParen(source, open);
|
|
624
|
-
if (close < 0) return null;
|
|
625
|
-
const args = splitArgs(source.slice(open + 1, close));
|
|
626
|
-
if (!args) return null;
|
|
627
|
-
return { callee: match[1], args, end: close + 1 };
|
|
628
|
-
}
|
|
629
|
-
function findMatchingParen(source, open) {
|
|
630
|
-
let depth = 0;
|
|
631
|
-
let quote = false;
|
|
632
|
-
for (let i = open; i < source.length; i += 1) {
|
|
633
|
-
const ch = source[i];
|
|
634
|
-
if (quote) {
|
|
635
|
-
if (ch === "\\") i += 1;
|
|
636
|
-
else if (ch === '"') quote = false;
|
|
637
|
-
continue;
|
|
638
|
-
}
|
|
639
|
-
if (ch === '"') quote = true;
|
|
640
|
-
else if (ch === "(") depth += 1;
|
|
641
|
-
else if (ch === ")") {
|
|
642
|
-
depth -= 1;
|
|
643
|
-
if (depth === 0) return i;
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
return -1;
|
|
647
|
-
}
|
|
648
|
-
function splitArgs(inner) {
|
|
649
|
-
const args = [];
|
|
650
|
-
let start = 0;
|
|
651
|
-
let depth = 0;
|
|
652
|
-
let quote = false;
|
|
653
|
-
for (let i = 0; i < inner.length; i += 1) {
|
|
654
|
-
const ch = inner[i];
|
|
655
|
-
if (quote) {
|
|
656
|
-
if (ch === "\\") i += 1;
|
|
657
|
-
else if (ch === '"') quote = false;
|
|
658
|
-
continue;
|
|
659
|
-
}
|
|
660
|
-
if (ch === '"') quote = true;
|
|
661
|
-
else if (ch === "(" || ch === "[" || ch === "{") depth += 1;
|
|
662
|
-
else if (ch === ")" || ch === "]" || ch === "}") depth -= 1;
|
|
663
|
-
else if (ch === "," && depth === 0) {
|
|
664
|
-
args.push(inner.slice(start, i).trim());
|
|
665
|
-
start = i + 1;
|
|
666
|
-
}
|
|
667
|
-
}
|
|
668
|
-
if (quote || depth !== 0) return null;
|
|
669
|
-
const last = inner.slice(start).trim();
|
|
670
|
-
if (last) args.push(last);
|
|
671
|
-
return args;
|
|
672
|
-
}
|
|
673
|
-
function isStringLiteral(value) {
|
|
674
|
-
return /^"(?:\\.|[^"\\])*"$/.test(value.trim());
|
|
675
|
-
}
|
|
676
|
-
function attachOrphans(source) {
|
|
677
|
-
let text = source;
|
|
678
|
-
let stmts = parseStatements(text);
|
|
679
|
-
if (!stmts) return source;
|
|
680
|
-
const taken = new Set(stmts.map((stmt) => stmt.name));
|
|
681
|
-
const extraRoots = stmts.filter((stmt) => stmt.name === "root").slice(1);
|
|
682
|
-
if (extraRoots.length > 0) {
|
|
683
|
-
const edits = extraRoots.map((stmt) => {
|
|
684
|
-
const body2 = fresh(taken, "rootBlock");
|
|
685
|
-
const stmtText = text.slice(stmt.start, stmt.end);
|
|
686
|
-
return {
|
|
687
|
-
start: stmt.start,
|
|
688
|
-
end: stmt.end,
|
|
689
|
-
text: stmtText.replace(/^(\s*)root\b/, `$1${body2}`)
|
|
690
|
-
};
|
|
691
|
-
});
|
|
692
|
-
text = applyEdits(text, edits);
|
|
693
|
-
stmts = parseStatements(text);
|
|
694
|
-
if (!stmts) return source;
|
|
695
|
-
}
|
|
696
|
-
const orphans = stmts.filter(
|
|
697
|
-
(stmt) => stmt.name !== "root" && ATTACHABLE.has(calleeOf(stmt.rhs) ?? "") && !referencedByOther(stmt.name, stmts)
|
|
698
|
-
);
|
|
699
|
-
if (orphans.length === 0) return source;
|
|
700
|
-
const names = orphans.map((stmt) => stmt.name);
|
|
701
|
-
const root = stmts.find((stmt) => stmt.name === "root");
|
|
702
|
-
if (!root) return `root = Stack([${names.join(", ")}])
|
|
703
|
-
${text}`;
|
|
704
|
-
const rawRhs = text.slice(root.rhsStart, root.end);
|
|
705
|
-
const lead = /^\s*/.exec(rawRhs)?.[0] ?? "";
|
|
706
|
-
const spliced = spliceFirstArray(rawRhs.trim(), names);
|
|
707
|
-
if (spliced !== null) {
|
|
708
|
-
return text.slice(0, root.rhsStart) + lead + spliced + text.slice(root.end);
|
|
709
|
-
}
|
|
710
|
-
const body = fresh(new Set(stmts.map((stmt) => stmt.name)), "rootBody");
|
|
711
|
-
const wrapped = `root = Stack([${body}, ${names.join(", ")}])
|
|
712
|
-
${body} = ${rawRhs.trim()}`;
|
|
713
|
-
return text.slice(0, root.start) + wrapped + text.slice(root.end);
|
|
714
|
-
}
|
|
715
|
-
function spliceFirstArray(rhs, names) {
|
|
716
|
-
const match = /^([A-Za-z_]\w*)\s*\(/.exec(rhs);
|
|
717
|
-
if (!match || match[1] !== "Stack" && match[1] !== "Card") return null;
|
|
718
|
-
const openParen = match[0].length - 1;
|
|
719
|
-
let paren = 0;
|
|
720
|
-
let quote = false;
|
|
721
|
-
let arrayStart = -1;
|
|
722
|
-
let arrayDepth = 0;
|
|
723
|
-
let arrayEnd = -1;
|
|
724
|
-
for (let i = openParen; i < rhs.length; i += 1) {
|
|
725
|
-
const ch = rhs[i];
|
|
726
|
-
if (quote) {
|
|
727
|
-
if (ch === "\\") i += 1;
|
|
728
|
-
else if (ch === '"') quote = false;
|
|
729
|
-
continue;
|
|
730
|
-
}
|
|
731
|
-
if (ch === '"') quote = true;
|
|
732
|
-
else if (ch === "(") paren += 1;
|
|
733
|
-
else if (ch === ")") {
|
|
734
|
-
paren -= 1;
|
|
735
|
-
if (paren === 0) break;
|
|
736
|
-
} else if (ch === "[") {
|
|
737
|
-
if (paren === 1 && arrayStart < 0) {
|
|
738
|
-
arrayStart = i;
|
|
739
|
-
arrayDepth = 1;
|
|
740
|
-
} else if (arrayStart >= 0 && arrayEnd < 0) {
|
|
741
|
-
arrayDepth += 1;
|
|
742
|
-
}
|
|
743
|
-
} else if (ch === "]" && arrayStart >= 0 && arrayEnd < 0) {
|
|
744
|
-
arrayDepth -= 1;
|
|
745
|
-
if (arrayDepth === 0) arrayEnd = i;
|
|
746
|
-
}
|
|
747
|
-
}
|
|
748
|
-
if (arrayStart < 0 || arrayEnd < 0) return null;
|
|
749
|
-
const inner = rhs.slice(arrayStart + 1, arrayEnd).trim();
|
|
750
|
-
const merged = inner === "" ? names.join(", ") : `${inner.replace(/,\s*$/, "")}, ${names.join(", ")}`;
|
|
751
|
-
return rhs.slice(0, arrayStart + 1) + merged + rhs.slice(arrayEnd);
|
|
102
|
+
var JuneUIContext = createContext(null);
|
|
103
|
+
function JuneUIProvider({ june, defaults, children }) {
|
|
104
|
+
const value = useMemo(() => ({ june, defaults }), [june, defaults]);
|
|
105
|
+
return /* @__PURE__ */ jsx(JuneUIContext.Provider, { value, children });
|
|
752
106
|
}
|
|
753
|
-
function
|
|
754
|
-
|
|
755
|
-
`(?<![A-Za-z0-9_$.])${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![A-Za-z0-9_])`
|
|
756
|
-
);
|
|
757
|
-
return stmts.some((stmt) => stmt.name !== name && pattern.test(stripStrings(stmt.rhs)));
|
|
758
|
-
}
|
|
759
|
-
function calleeOf(rhs) {
|
|
760
|
-
const match = /^([A-Za-z_]\w*)\s*\(/.exec(rhs.trim());
|
|
761
|
-
return match ? match[1] : null;
|
|
762
|
-
}
|
|
763
|
-
function stripStrings(text) {
|
|
764
|
-
return text.replace(/"(?:\\.|[^"\\])*"/g, '""');
|
|
765
|
-
}
|
|
766
|
-
function fresh(taken, base) {
|
|
767
|
-
let name = base;
|
|
768
|
-
let n = 2;
|
|
769
|
-
while (taken.has(name)) {
|
|
770
|
-
name = `${base}${n}`;
|
|
771
|
-
n += 1;
|
|
772
|
-
}
|
|
773
|
-
taken.add(name);
|
|
774
|
-
return name;
|
|
775
|
-
}
|
|
776
|
-
function applyEdits(source, edits) {
|
|
777
|
-
const ordered = [...edits].sort((a, b) => b.start - a.start);
|
|
778
|
-
let text = source;
|
|
779
|
-
for (const edit of ordered) {
|
|
780
|
-
text = text.slice(0, edit.start) + edit.text + text.slice(edit.end);
|
|
781
|
-
}
|
|
782
|
-
return text;
|
|
783
|
-
}
|
|
784
|
-
function parseStatements(source) {
|
|
785
|
-
const lines = source.split("\n");
|
|
786
|
-
const stmts = [];
|
|
787
|
-
let offset = 0;
|
|
788
|
-
let depth = 0;
|
|
789
|
-
let quote = false;
|
|
790
|
-
let current = null;
|
|
791
|
-
const scan2 = (line) => {
|
|
792
|
-
for (let i = 0; i < line.length; i += 1) {
|
|
793
|
-
const ch = line[i];
|
|
794
|
-
if (quote) {
|
|
795
|
-
if (ch === "\\") i += 1;
|
|
796
|
-
else if (ch === '"') quote = false;
|
|
797
|
-
} else if (ch === '"') {
|
|
798
|
-
quote = true;
|
|
799
|
-
} else if (ch === "(" || ch === "[" || ch === "{") {
|
|
800
|
-
depth += 1;
|
|
801
|
-
} else if (ch === ")" || ch === "]" || ch === "}") {
|
|
802
|
-
depth = Math.max(0, depth - 1);
|
|
803
|
-
}
|
|
804
|
-
}
|
|
805
|
-
};
|
|
806
|
-
for (let li = 0; li < lines.length; li += 1) {
|
|
807
|
-
const line = lines[li];
|
|
808
|
-
const lineStart = offset;
|
|
809
|
-
const lineEnd = offset + line.length;
|
|
810
|
-
offset = lineEnd + (li < lines.length - 1 ? 1 : 0);
|
|
811
|
-
if (current && depth > 0) {
|
|
812
|
-
scan2(line);
|
|
813
|
-
if (depth === 0) {
|
|
814
|
-
stmts.push({
|
|
815
|
-
name: current.name,
|
|
816
|
-
rhs: source.slice(current.rhsStart, lineEnd).trim(),
|
|
817
|
-
start: current.start,
|
|
818
|
-
end: lineEnd,
|
|
819
|
-
rhsStart: current.rhsStart
|
|
820
|
-
});
|
|
821
|
-
current = null;
|
|
822
|
-
}
|
|
823
|
-
continue;
|
|
824
|
-
}
|
|
825
|
-
const trimmed = line.trim();
|
|
826
|
-
if (trimmed === "" || trimmed.startsWith("```")) continue;
|
|
827
|
-
const match = /^(\s*)(\$?[A-Za-z_]\w*)\s*=/.exec(line);
|
|
828
|
-
if (!match) return null;
|
|
829
|
-
const eq = line.indexOf("=");
|
|
830
|
-
const rhsStart = lineStart + eq + 1;
|
|
831
|
-
depth = 0;
|
|
832
|
-
quote = false;
|
|
833
|
-
scan2(line);
|
|
834
|
-
if (depth === 0) {
|
|
835
|
-
stmts.push({
|
|
836
|
-
name: match[2],
|
|
837
|
-
rhs: line.slice(eq + 1).trim(),
|
|
838
|
-
start: lineStart,
|
|
839
|
-
end: lineEnd,
|
|
840
|
-
rhsStart
|
|
841
|
-
});
|
|
842
|
-
} else {
|
|
843
|
-
current = { name: match[2], start: lineStart, rhsStart };
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
if (current || depth !== 0) return null;
|
|
847
|
-
return stmts;
|
|
848
|
-
}
|
|
849
|
-
|
|
850
|
-
// src/utils/split-response.ts
|
|
851
|
-
var STATEMENT_START = /^\$?[A-Za-z_]\w*\s*=/;
|
|
852
|
-
var PENDING_IDENTIFIER = /^\s*\$?[A-Za-z_]\w*\s*$/;
|
|
853
|
-
function scan(line, state) {
|
|
854
|
-
for (let i = 0; i < line.length; i++) {
|
|
855
|
-
const ch = line[i];
|
|
856
|
-
if (state.quote) {
|
|
857
|
-
if (ch === "\\") i++;
|
|
858
|
-
else if (ch === state.quote) state.quote = null;
|
|
859
|
-
} else if (ch === '"') {
|
|
860
|
-
state.quote = ch;
|
|
861
|
-
} else if (ch === "(" || ch === "[" || ch === "{") {
|
|
862
|
-
state.depth++;
|
|
863
|
-
} else if (ch === ")" || ch === "]" || ch === "}") {
|
|
864
|
-
state.depth = Math.max(0, state.depth - 1);
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
state.quote = null;
|
|
868
|
-
}
|
|
869
|
-
function splitResponse(source, options = {}) {
|
|
870
|
-
let input = source;
|
|
871
|
-
if (options.streaming && !input.endsWith("\n")) {
|
|
872
|
-
const cut = input.lastIndexOf("\n");
|
|
873
|
-
if (PENDING_IDENTIFIER.test(input.slice(cut + 1))) input = input.slice(0, cut + 1);
|
|
874
|
-
}
|
|
875
|
-
const before = [];
|
|
876
|
-
const after = [];
|
|
877
|
-
const ui = [];
|
|
878
|
-
const state = { depth: 0, quote: null };
|
|
879
|
-
let text = [];
|
|
880
|
-
let seenUi = false;
|
|
881
|
-
let sawFence = false;
|
|
882
|
-
const flushText = () => {
|
|
883
|
-
const joined = text.join(" ").trim();
|
|
884
|
-
text = [];
|
|
885
|
-
if (joined) (seenUi ? after : before).push(joined);
|
|
886
|
-
};
|
|
887
|
-
for (const line of input.split(/\r?\n/)) {
|
|
888
|
-
const trimmed = line.trim();
|
|
889
|
-
if (trimmed.startsWith("```")) {
|
|
890
|
-
sawFence = true;
|
|
891
|
-
continue;
|
|
892
|
-
}
|
|
893
|
-
if (state.depth > 0) {
|
|
894
|
-
ui.push(line);
|
|
895
|
-
scan(line, state);
|
|
896
|
-
continue;
|
|
897
|
-
}
|
|
898
|
-
if (STATEMENT_START.test(trimmed)) {
|
|
899
|
-
flushText();
|
|
900
|
-
seenUi = true;
|
|
901
|
-
ui.push(line);
|
|
902
|
-
scan(line, state);
|
|
903
|
-
continue;
|
|
904
|
-
}
|
|
905
|
-
if (trimmed === "") {
|
|
906
|
-
flushText();
|
|
907
|
-
continue;
|
|
908
|
-
}
|
|
909
|
-
text.push(trimmed);
|
|
910
|
-
}
|
|
911
|
-
flushText();
|
|
912
|
-
return {
|
|
913
|
-
before,
|
|
914
|
-
ui: ui.join("\n"),
|
|
915
|
-
after,
|
|
916
|
-
pure: !sawFence && before.length === 0 && after.length === 0
|
|
917
|
-
};
|
|
107
|
+
function useJuneUIContext() {
|
|
108
|
+
return useContext(JuneUIContext);
|
|
918
109
|
}
|
|
919
110
|
|
|
920
|
-
// src/
|
|
921
|
-
import { Component } from "react";
|
|
111
|
+
// src/core/june-ui.tsx
|
|
922
112
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
923
|
-
function
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
this.props.onError?.(error, info);
|
|
939
|
-
}
|
|
940
|
-
componentDidUpdate(prev) {
|
|
941
|
-
if (this.state.error && keysChanged(prev.resetKeys, this.props.resetKeys)) {
|
|
942
|
-
this.reset();
|
|
943
|
-
}
|
|
944
|
-
}
|
|
945
|
-
render() {
|
|
946
|
-
const { error } = this.state;
|
|
947
|
-
if (!error) return this.props.children;
|
|
948
|
-
const { fallback } = this.props;
|
|
949
|
-
if (typeof fallback === "function") return fallback({ error, reset: this.reset });
|
|
950
|
-
if (fallback !== void 0) return fallback;
|
|
951
|
-
return /* @__PURE__ */ jsx2("div", { role: "alert", "data-june-error": "", children: "Something went wrong while rendering this UI." });
|
|
952
|
-
}
|
|
953
|
-
};
|
|
954
|
-
|
|
955
|
-
// src/renderer/renderer.tsx
|
|
956
|
-
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
|
|
957
|
-
function JuneRenderer(props) {
|
|
958
|
-
const {
|
|
959
|
-
library,
|
|
960
|
-
response,
|
|
961
|
-
isStreaming = false,
|
|
962
|
-
mixedContent = true,
|
|
963
|
-
renderText,
|
|
964
|
-
repair = true,
|
|
965
|
-
theme,
|
|
966
|
-
themeVars,
|
|
967
|
-
className,
|
|
968
|
-
style,
|
|
969
|
-
actions,
|
|
970
|
-
confirmAction,
|
|
971
|
-
parseActionEvent,
|
|
972
|
-
onAction,
|
|
973
|
-
onError,
|
|
974
|
-
onJuneError,
|
|
975
|
-
documents,
|
|
976
|
-
onResponseChange,
|
|
977
|
-
responseChangeDelay = 300,
|
|
978
|
-
loadingFallback = null,
|
|
979
|
-
emptyFallback = null,
|
|
980
|
-
errorFallback,
|
|
981
|
-
resetKeys,
|
|
982
|
-
...rendererProps
|
|
983
|
-
} = props;
|
|
984
|
-
const latest = useRef({ actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response });
|
|
985
|
-
latest.current = { actions, confirmAction, parseActionEvent, onAction, onError, onJuneError, onResponseChange, responseChangeDelay, response };
|
|
986
|
-
const syncTimers = useRef(/* @__PURE__ */ new Map());
|
|
987
|
-
useEffect(() => {
|
|
988
|
-
const timers = syncTimers.current;
|
|
989
|
-
return () => {
|
|
990
|
-
timers.forEach(clearTimeout);
|
|
991
|
-
timers.clear();
|
|
992
|
-
};
|
|
993
|
-
}, []);
|
|
994
|
-
const syncProgram = useCallback(async (change, store) => {
|
|
995
|
-
const l = latest.current;
|
|
996
|
-
if (!l.onResponseChange || typeof l.response !== "string") return;
|
|
997
|
-
const record = store.get(change.documentId);
|
|
998
|
-
const title = record?.title ?? change.title;
|
|
999
|
-
const json = record?.json ?? change.json;
|
|
1000
|
-
try {
|
|
1001
|
-
const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
|
|
1002
|
-
const markdown = docToMarkdown2(json);
|
|
1003
|
-
const program = latest.current.response;
|
|
1004
|
-
if (typeof program !== "string") return;
|
|
1005
|
-
const next = updateDocumentInProgram(program, change.documentId, { title, content: markdown });
|
|
1006
|
-
if (next === null || next === program) return;
|
|
1007
|
-
rememberDocumentEcho(store, change.documentId, markdown);
|
|
1008
|
-
latest.current.onResponseChange?.(next, { documentId: change.documentId, title, markdown, source: change.source });
|
|
1009
|
-
} catch (error) {
|
|
1010
|
-
latest.current.onJuneError?.(toJuneError(error, "DOCUMENT_ERROR", "Updating the program failed"));
|
|
1011
|
-
}
|
|
1012
|
-
}, []);
|
|
1013
|
-
const handleAction = useCallback((event) => {
|
|
1014
|
-
const l = latest.current;
|
|
1015
|
-
l.onAction?.(event);
|
|
1016
|
-
if (l.actions) {
|
|
1017
|
-
void runAction(event, {
|
|
1018
|
-
actions: l.actions,
|
|
1019
|
-
parseEvent: l.parseActionEvent,
|
|
1020
|
-
confirm: l.confirmAction,
|
|
1021
|
-
onError: (e) => l.onJuneError?.(e)
|
|
1022
|
-
});
|
|
1023
|
-
}
|
|
1024
|
-
}, []);
|
|
1025
|
-
const handleParserErrors = useCallback((errors) => {
|
|
1026
|
-
const list2 = Array.isArray(errors) ? errors : [];
|
|
1027
|
-
const l = latest.current;
|
|
1028
|
-
l.onError?.(list2);
|
|
1029
|
-
const real = list2.filter((e) => e?.severity !== "warning");
|
|
1030
|
-
if (real.length > 0) {
|
|
1031
|
-
l.onJuneError?.(
|
|
1032
|
-
new JuneError("PARSE_ERROR", `OpenUI reported ${real.length} error(s)`, { details: real })
|
|
1033
|
-
);
|
|
1034
|
-
}
|
|
1035
|
-
if (list2.length > 0 && !l.onError && !l.onJuneError) {
|
|
1036
|
-
console.warn("[june-ui] OpenUI reported errors:", list2);
|
|
1037
|
-
}
|
|
1038
|
-
}, []);
|
|
1039
|
-
const handleBoundaryError = useCallback((error, info) => {
|
|
1040
|
-
latest.current.onJuneError?.(
|
|
1041
|
-
new JuneError("RENDER_ERROR", error.message, {
|
|
1042
|
-
cause: error,
|
|
1043
|
-
details: { componentStack: info.componentStack }
|
|
1044
|
-
})
|
|
1045
|
-
);
|
|
1046
|
-
}, []);
|
|
1047
|
-
const runtime = useMemo2(() => ({ isStreaming }), [isStreaming]);
|
|
1048
|
-
const documentOptions = useMemo2(
|
|
1049
|
-
() => ({
|
|
1050
|
-
...documents,
|
|
1051
|
-
onDocumentChange: (change) => {
|
|
1052
|
-
documents?.onDocumentChange?.(change);
|
|
1053
|
-
if (!latest.current.onResponseChange || change.source === "ai") return;
|
|
1054
|
-
const store = documents?.store ?? getDefaultDocumentStore();
|
|
1055
|
-
const timers = syncTimers.current;
|
|
1056
|
-
const prev = timers.get(change.documentId);
|
|
1057
|
-
if (prev) clearTimeout(prev);
|
|
1058
|
-
timers.set(
|
|
1059
|
-
change.documentId,
|
|
1060
|
-
setTimeout(() => {
|
|
1061
|
-
timers.delete(change.documentId);
|
|
1062
|
-
void syncProgram(change, store);
|
|
1063
|
-
}, Math.max(0, latest.current.responseChangeDelay))
|
|
1064
|
-
);
|
|
1065
|
-
},
|
|
1066
|
-
onError: (error) => {
|
|
1067
|
-
documents?.onError?.(error);
|
|
1068
|
-
latest.current.onJuneError?.(error);
|
|
1069
|
-
}
|
|
1070
|
-
}),
|
|
1071
|
-
[documents, syncProgram]
|
|
1072
|
-
);
|
|
1073
|
-
const parts = useMemo2(
|
|
1074
|
-
() => mixedContent && response ? splitResponse(response, { streaming: isStreaming }) : null,
|
|
1075
|
-
[mixedContent, response, isStreaming]
|
|
1076
|
-
);
|
|
1077
|
-
const uiText = useMemo2(() => {
|
|
1078
|
-
const raw = parts && !parts.pure ? parts.ui : response;
|
|
1079
|
-
if (!repair || !mixedContent || isStreaming || typeof raw !== "string" || raw.length === 0) return raw;
|
|
1080
|
-
return normalizeProgram(raw);
|
|
1081
|
-
}, [parts, response, mixedContent, isStreaming, repair]);
|
|
1082
|
-
const hasUi = typeof uiText === "string" && uiText.trim().length > 0;
|
|
1083
|
-
const before = parts?.before ?? [];
|
|
1084
|
-
const after = parts?.after ?? [];
|
|
1085
|
-
const hasText = before.length + after.length > 0;
|
|
1086
|
-
const text = (value, index, key) => /* @__PURE__ */ jsx3(Fragment, { children: renderText ? renderText(value, index) : /* @__PURE__ */ jsx3("p", { className: "june-text", children: value }) }, key);
|
|
1087
|
-
return /* @__PURE__ */ jsx3(JuneThemeProvider, { mode: theme, vars: themeVars, className, style, children: /* @__PURE__ */ jsx3(JuneRuntimeContext.Provider, { value: runtime, children: /* @__PURE__ */ jsx3(JuneDocumentContext.Provider, { value: documentOptions, children: /* @__PURE__ */ jsxs(
|
|
1088
|
-
JuneErrorBoundary,
|
|
1089
|
-
{
|
|
1090
|
-
fallback: errorFallback,
|
|
1091
|
-
onError: handleBoundaryError,
|
|
1092
|
-
resetKeys: resetKeys ?? [response],
|
|
1093
|
-
children: [
|
|
1094
|
-
before.map((t, i) => text(t, i, `b${i}`)),
|
|
1095
|
-
hasUi && /* @__PURE__ */ jsx3(
|
|
1096
|
-
Renderer,
|
|
1097
|
-
{
|
|
1098
|
-
...rendererProps,
|
|
1099
|
-
library,
|
|
1100
|
-
response: uiText,
|
|
1101
|
-
isStreaming,
|
|
1102
|
-
onAction: handleAction,
|
|
1103
|
-
onError: handleParserErrors
|
|
1104
|
-
}
|
|
1105
|
-
),
|
|
1106
|
-
after.map((t, i) => text(t, before.length + i, `a${i}`)),
|
|
1107
|
-
!hasUi && !hasText && (isStreaming ? loadingFallback : emptyFallback)
|
|
1108
|
-
]
|
|
1109
|
-
}
|
|
1110
|
-
) }) }) });
|
|
1111
|
-
}
|
|
1112
|
-
|
|
1113
|
-
// src/components/library.ts
|
|
1114
|
-
import { createLibrary, defineComponent } from "@openuidev/react-lang";
|
|
1115
|
-
var defineJuneComponent = defineComponent;
|
|
1116
|
-
function createJuneLibrary(options) {
|
|
1117
|
-
const { allow, deny, ...rest } = options;
|
|
1118
|
-
const input = rest;
|
|
1119
|
-
const raw = input;
|
|
1120
|
-
const components = raw.components ?? [];
|
|
1121
|
-
const names = /* @__PURE__ */ new Set();
|
|
1122
|
-
for (const component of components) {
|
|
1123
|
-
if (typeof component?.name !== "string" || component.name.length === 0) {
|
|
1124
|
-
throw new JuneError("LIBRARY_ERROR", "Every component needs a non-empty string name");
|
|
1125
|
-
}
|
|
1126
|
-
if (names.has(component.name)) {
|
|
1127
|
-
throw new JuneError("LIBRARY_ERROR", `Duplicate component name "${component.name}"`);
|
|
1128
|
-
}
|
|
1129
|
-
names.add(component.name);
|
|
1130
|
-
}
|
|
1131
|
-
const allowSet = allow ? new Set(allow) : null;
|
|
1132
|
-
const denySet = deny ? new Set(deny) : null;
|
|
1133
|
-
if (allowSet) {
|
|
1134
|
-
for (const n of allowSet) {
|
|
1135
|
-
if (!names.has(n)) throw new JuneError("LIBRARY_ERROR", `Allowed component "${n}" is not registered`);
|
|
1136
|
-
}
|
|
1137
|
-
}
|
|
1138
|
-
const keep = components.filter((c) => {
|
|
1139
|
-
const n = c.name;
|
|
1140
|
-
return (!allowSet || allowSet.has(n)) && !(denySet && denySet.has(n));
|
|
113
|
+
function JuneUI({ library, june, ...props }) {
|
|
114
|
+
const context = useJuneUIContext();
|
|
115
|
+
const instance = june ?? context?.june;
|
|
116
|
+
const registryLibrary = useRegistryLibrary(instance?.registry ?? defaultRegistry);
|
|
117
|
+
const merged = mergeDefined(instance?.defaults, context?.defaults, props);
|
|
118
|
+
return /* @__PURE__ */ jsx2(JuneRenderer, { ...merged, library: library ?? registryLibrary });
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// src/core/create-june-ui.ts
|
|
122
|
+
function createJuneUI(options = {}) {
|
|
123
|
+
const registry = createComponentRegistry({
|
|
124
|
+
base: options.baseLibrary ?? juneLibrary,
|
|
125
|
+
components: options.components,
|
|
126
|
+
overrides: options.overrides,
|
|
127
|
+
remove: options.remove
|
|
1141
128
|
});
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
return createLibrary(
|
|
1148
|
-
unfiltered ? input : { ...input, components: keep }
|
|
1149
|
-
);
|
|
1150
|
-
} catch (error) {
|
|
1151
|
-
throw new JuneError("LIBRARY_ERROR", "OpenUI rejected the component library", { cause: error });
|
|
1152
|
-
}
|
|
1153
|
-
}
|
|
1154
|
-
|
|
1155
|
-
// src/actions/define-action.ts
|
|
1156
|
-
function defineJuneAction(definition) {
|
|
1157
|
-
if (typeof definition.handler !== "function") {
|
|
1158
|
-
throw new JuneError("ACTION_VALIDATION_ERROR", "defineJuneAction requires a handler function");
|
|
1159
|
-
}
|
|
1160
|
-
return Object.freeze({ ...definition, __june: "action" });
|
|
1161
|
-
}
|
|
1162
|
-
|
|
1163
|
-
// src/streaming/use-june-stream.ts
|
|
1164
|
-
import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState } from "react";
|
|
1165
|
-
|
|
1166
|
-
// src/streaming/stream-handler.ts
|
|
1167
|
-
function isReadableStream(source) {
|
|
1168
|
-
return typeof source.getReader === "function";
|
|
1169
|
-
}
|
|
1170
|
-
async function* iterateReadable(stream, signal) {
|
|
1171
|
-
const reader = stream.getReader();
|
|
1172
|
-
const onAbort = () => {
|
|
1173
|
-
void reader.cancel().catch(() => {
|
|
1174
|
-
});
|
|
1175
|
-
};
|
|
1176
|
-
signal?.addEventListener("abort", onAbort, { once: true });
|
|
1177
|
-
try {
|
|
1178
|
-
while (true) {
|
|
1179
|
-
const { done, value } = await reader.read();
|
|
1180
|
-
if (done) return;
|
|
1181
|
-
yield value;
|
|
1182
|
-
}
|
|
1183
|
-
} finally {
|
|
1184
|
-
signal?.removeEventListener("abort", onAbort);
|
|
1185
|
-
try {
|
|
1186
|
-
reader.releaseLock();
|
|
1187
|
-
} catch {
|
|
1188
|
-
}
|
|
1189
|
-
}
|
|
1190
|
-
}
|
|
1191
|
-
function toAsyncIterable(source, signal) {
|
|
1192
|
-
return isReadableStream(source) ? iterateReadable(source, signal) : source;
|
|
1193
|
-
}
|
|
1194
|
-
function abortedError(partial) {
|
|
1195
|
-
return new JuneError("STREAM_ABORTED", "Stream was aborted", { details: { partial } });
|
|
1196
|
-
}
|
|
1197
|
-
async function consumeStream(source, options = {}) {
|
|
1198
|
-
const { signal, onText, allowEmpty = false } = options;
|
|
1199
|
-
if (signal?.aborted) throw abortedError("");
|
|
1200
|
-
const decoder = new TextDecoder();
|
|
1201
|
-
let text = "";
|
|
1202
|
-
let received = false;
|
|
1203
|
-
const push = (delta) => {
|
|
1204
|
-
if (!delta) return;
|
|
1205
|
-
received = true;
|
|
1206
|
-
text += delta;
|
|
1207
|
-
onText?.(delta, text);
|
|
1208
|
-
};
|
|
1209
|
-
try {
|
|
1210
|
-
for await (const chunk of toAsyncIterable(source, signal)) {
|
|
1211
|
-
if (signal?.aborted) break;
|
|
1212
|
-
push(typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true }));
|
|
1213
|
-
}
|
|
1214
|
-
push(decoder.decode());
|
|
1215
|
-
} catch (error) {
|
|
1216
|
-
if (signal?.aborted) throw abortedError(text);
|
|
1217
|
-
if (error instanceof JuneError) throw error;
|
|
1218
|
-
throw new JuneError("STREAM_ERROR", "Stream was interrupted", {
|
|
1219
|
-
cause: error,
|
|
1220
|
-
details: { partial: text }
|
|
1221
|
-
});
|
|
1222
|
-
}
|
|
1223
|
-
if (signal?.aborted) throw abortedError(text);
|
|
1224
|
-
if (!received && !allowEmpty) {
|
|
1225
|
-
throw new JuneError("STREAM_EMPTY", "Stream completed without any content");
|
|
1226
|
-
}
|
|
1227
|
-
return text;
|
|
1228
|
-
}
|
|
1229
|
-
|
|
1230
|
-
// src/streaming/sse-adapter.ts
|
|
1231
|
-
var BOUNDARY = /\r\n\r\n|\n\n|\r\r/;
|
|
1232
|
-
function parseFrame(raw) {
|
|
1233
|
-
let event = "message";
|
|
1234
|
-
const data = [];
|
|
1235
|
-
for (const line of raw.split(/\r\n|\n|\r/)) {
|
|
1236
|
-
if (!line || line.startsWith(":")) continue;
|
|
1237
|
-
const i = line.indexOf(":");
|
|
1238
|
-
const field = i === -1 ? line : line.slice(0, i);
|
|
1239
|
-
let value = i === -1 ? "" : line.slice(i + 1);
|
|
1240
|
-
if (value.startsWith(" ")) value = value.slice(1);
|
|
1241
|
-
if (field === "event") event = value;
|
|
1242
|
-
else if (field === "data") data.push(value);
|
|
1243
|
-
}
|
|
1244
|
-
if (data.length === 0 && event === "message") return null;
|
|
1245
|
-
return { event, data: data.join("\n") };
|
|
1246
|
-
}
|
|
1247
|
-
async function* sseToText(source, options = {}) {
|
|
1248
|
-
const { extract, doneSentinel = "[DONE]", signal } = options;
|
|
1249
|
-
const decoder = new TextDecoder();
|
|
1250
|
-
let buffer = "";
|
|
1251
|
-
const handle = (raw) => {
|
|
1252
|
-
const frame = parseFrame(raw);
|
|
1253
|
-
if (!frame) return { done: false, text: null };
|
|
1254
|
-
if (frame.event === "error") {
|
|
1255
|
-
throw new JuneError("STREAM_ERROR", frame.data || "Server sent an error event", {
|
|
1256
|
-
details: frame
|
|
1257
|
-
});
|
|
1258
|
-
}
|
|
1259
|
-
if (doneSentinel !== null && frame.data === doneSentinel) {
|
|
1260
|
-
return { done: true, text: null };
|
|
1261
|
-
}
|
|
1262
|
-
const text = extract ? extract(frame.data, frame.event) : frame.data;
|
|
1263
|
-
return { done: false, text: text ? text : null };
|
|
1264
|
-
};
|
|
1265
|
-
for await (const chunk of toAsyncIterable(source, signal)) {
|
|
1266
|
-
buffer += typeof chunk === "string" ? chunk : decoder.decode(chunk, { stream: true });
|
|
1267
|
-
let match;
|
|
1268
|
-
while ((match = BOUNDARY.exec(buffer)) !== null) {
|
|
1269
|
-
const raw = buffer.slice(0, match.index);
|
|
1270
|
-
buffer = buffer.slice(match.index + match[0].length);
|
|
1271
|
-
const result = handle(raw);
|
|
1272
|
-
if (result.done) return;
|
|
1273
|
-
if (result.text) yield result.text;
|
|
1274
|
-
}
|
|
1275
|
-
}
|
|
1276
|
-
buffer += decoder.decode();
|
|
1277
|
-
if (buffer.trim()) {
|
|
1278
|
-
const result = handle(buffer);
|
|
1279
|
-
if (!result.done && result.text) yield result.text;
|
|
1280
|
-
}
|
|
1281
|
-
}
|
|
1282
|
-
function jsonFieldExtractor(path) {
|
|
1283
|
-
const keys = path.split(".");
|
|
1284
|
-
return (data) => {
|
|
1285
|
-
try {
|
|
1286
|
-
let current = JSON.parse(data);
|
|
1287
|
-
for (const key of keys) {
|
|
1288
|
-
if (current === null || typeof current !== "object") return null;
|
|
1289
|
-
current = current[key];
|
|
1290
|
-
}
|
|
1291
|
-
return typeof current === "string" ? current : null;
|
|
1292
|
-
} catch {
|
|
1293
|
-
return null;
|
|
1294
|
-
}
|
|
1295
|
-
};
|
|
1296
|
-
}
|
|
1297
|
-
|
|
1298
|
-
// src/streaming/fetch-adapter.ts
|
|
1299
|
-
async function fetchStream(input, options = {}) {
|
|
1300
|
-
const { sse, ...init } = options;
|
|
1301
|
-
let response;
|
|
1302
|
-
try {
|
|
1303
|
-
response = await fetch(input, init);
|
|
1304
|
-
} catch (error) {
|
|
1305
|
-
if (init.signal?.aborted) {
|
|
1306
|
-
throw new JuneError("STREAM_ABORTED", "Request was aborted", { cause: error });
|
|
1307
|
-
}
|
|
1308
|
-
throw new JuneError("NETWORK_ERROR", "Network request failed", { cause: error });
|
|
1309
|
-
}
|
|
1310
|
-
if (!response.ok) {
|
|
1311
|
-
throw new JuneError("NETWORK_ERROR", `Request failed with status ${response.status}`, {
|
|
1312
|
-
details: { status: response.status, statusText: response.statusText }
|
|
1313
|
-
});
|
|
1314
|
-
}
|
|
1315
|
-
if (!response.body) {
|
|
1316
|
-
throw new JuneError("STREAM_EMPTY", "Response has no body");
|
|
1317
|
-
}
|
|
1318
|
-
const body = response.body;
|
|
1319
|
-
if (sse) {
|
|
1320
|
-
return sseToText(body, {
|
|
1321
|
-
...sse === true ? {} : sse,
|
|
1322
|
-
signal: init.signal ?? void 0
|
|
1323
|
-
});
|
|
1324
|
-
}
|
|
1325
|
-
return body;
|
|
1326
|
-
}
|
|
1327
|
-
|
|
1328
|
-
// src/streaming/use-june-stream.ts
|
|
1329
|
-
var FLUSH_MS = 16;
|
|
1330
|
-
var INITIAL = {
|
|
1331
|
-
response: "",
|
|
1332
|
-
isStreaming: false,
|
|
1333
|
-
status: "idle",
|
|
1334
|
-
error: null
|
|
1335
|
-
};
|
|
1336
|
-
function useJuneStream(options = {}) {
|
|
1337
|
-
const [state, setState] = useState(INITIAL);
|
|
1338
|
-
const optionsRef = useRef2(options);
|
|
1339
|
-
optionsRef.current = options;
|
|
1340
|
-
const controllerRef = useRef2(null);
|
|
1341
|
-
const runIdRef = useRef2(0);
|
|
1342
|
-
const textRef = useRef2("");
|
|
1343
|
-
const timerRef = useRef2(null);
|
|
1344
|
-
const clearTimer = useCallback2(() => {
|
|
1345
|
-
if (timerRef.current !== null) {
|
|
1346
|
-
clearTimeout(timerRef.current);
|
|
1347
|
-
timerRef.current = null;
|
|
1348
|
-
}
|
|
1349
|
-
}, []);
|
|
1350
|
-
const schedule = useCallback2(() => {
|
|
1351
|
-
if (timerRef.current !== null) return;
|
|
1352
|
-
timerRef.current = setTimeout(() => {
|
|
1353
|
-
timerRef.current = null;
|
|
1354
|
-
const text = textRef.current;
|
|
1355
|
-
setState(
|
|
1356
|
-
(s) => s.status !== "streaming" || s.response === text ? s : { ...s, response: text }
|
|
1357
|
-
);
|
|
1358
|
-
}, FLUSH_MS);
|
|
1359
|
-
}, []);
|
|
1360
|
-
const start = useCallback2(
|
|
1361
|
-
async (input) => {
|
|
1362
|
-
controllerRef.current?.abort();
|
|
1363
|
-
const controller = new AbortController();
|
|
1364
|
-
controllerRef.current = controller;
|
|
1365
|
-
const runId = ++runIdRef.current;
|
|
1366
|
-
const stale = () => runId !== runIdRef.current;
|
|
1367
|
-
textRef.current = "";
|
|
1368
|
-
clearTimer();
|
|
1369
|
-
setState({ response: "", isStreaming: true, status: "streaming", error: null });
|
|
1370
|
-
try {
|
|
1371
|
-
const source = typeof input === "function" ? await input(controller.signal) : input;
|
|
1372
|
-
if (stale()) return null;
|
|
1373
|
-
const text = await consumeStream(source, {
|
|
1374
|
-
signal: controller.signal,
|
|
1375
|
-
allowEmpty: optionsRef.current.allowEmpty,
|
|
1376
|
-
onText: (_delta, full) => {
|
|
1377
|
-
if (stale()) return;
|
|
1378
|
-
textRef.current = full;
|
|
1379
|
-
schedule();
|
|
1380
|
-
}
|
|
1381
|
-
});
|
|
1382
|
-
if (stale()) return null;
|
|
1383
|
-
clearTimer();
|
|
1384
|
-
setState({ response: text, isStreaming: false, status: "done", error: null });
|
|
1385
|
-
optionsRef.current.onComplete?.(text);
|
|
1386
|
-
return text;
|
|
1387
|
-
} catch (caught) {
|
|
1388
|
-
if (stale()) return null;
|
|
1389
|
-
clearTimer();
|
|
1390
|
-
const error = toJuneError(caught, "STREAM_ERROR");
|
|
1391
|
-
const aborted = controller.signal.aborted || error.code === "STREAM_ABORTED";
|
|
1392
|
-
setState({
|
|
1393
|
-
response: textRef.current,
|
|
1394
|
-
// keep partial output
|
|
1395
|
-
isStreaming: false,
|
|
1396
|
-
status: aborted ? "aborted" : "error",
|
|
1397
|
-
error: aborted ? null : error
|
|
1398
|
-
});
|
|
1399
|
-
if (!aborted) optionsRef.current.onError?.(error);
|
|
1400
|
-
return null;
|
|
1401
|
-
}
|
|
129
|
+
const defaults = Object.freeze({ ...options.defaults });
|
|
130
|
+
const instance = {
|
|
131
|
+
registry,
|
|
132
|
+
get library() {
|
|
133
|
+
return registry.library;
|
|
1402
134
|
},
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
[start]
|
|
1408
|
-
);
|
|
1409
|
-
const abort = useCallback2(() => {
|
|
1410
|
-
controllerRef.current?.abort();
|
|
1411
|
-
}, []);
|
|
1412
|
-
const reset = useCallback2(() => {
|
|
1413
|
-
controllerRef.current?.abort();
|
|
1414
|
-
runIdRef.current++;
|
|
1415
|
-
textRef.current = "";
|
|
1416
|
-
clearTimer();
|
|
1417
|
-
setState(INITIAL);
|
|
1418
|
-
}, [clearTimer]);
|
|
1419
|
-
useEffect2(
|
|
1420
|
-
() => () => {
|
|
1421
|
-
runIdRef.current++;
|
|
1422
|
-
controllerRef.current?.abort();
|
|
1423
|
-
clearTimer();
|
|
135
|
+
defaults,
|
|
136
|
+
register(components, registerOptions) {
|
|
137
|
+
registry.register(components, registerOptions);
|
|
138
|
+
return instance;
|
|
1424
139
|
},
|
|
1425
|
-
|
|
1426
|
-
);
|
|
1427
|
-
return useMemo3(
|
|
1428
|
-
() => ({ ...state, start, startFetch, abort, reset }),
|
|
1429
|
-
[state, start, startFetch, abort, reset]
|
|
1430
|
-
);
|
|
1431
|
-
}
|
|
1432
|
-
|
|
1433
|
-
// src/components/document-editor/document-component.tsx
|
|
1434
|
-
import { defineComponent as defineComponent2 } from "@openuidev/react-lang";
|
|
1435
|
-
import { z } from "zod/v4";
|
|
1436
|
-
|
|
1437
|
-
// src/components/document-editor/document-draft.tsx
|
|
1438
|
-
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
1439
|
-
function DocumentDraft({ title, words, state }) {
|
|
1440
|
-
if (state === "empty") {
|
|
1441
|
-
return /* @__PURE__ */ jsx4("div", { className: "june-doc june-doc--draft", role: "alert", children: /* @__PURE__ */ jsx4("p", { className: "june-doc__draft-text", children: "No document content was received." }) });
|
|
1442
|
-
}
|
|
1443
|
-
return /* @__PURE__ */ jsxs2("div", { className: "june-doc june-doc--draft", role: "status", "aria-live": "polite", children: [
|
|
1444
|
-
title ? /* @__PURE__ */ jsx4("p", { className: "june-doc__draft-title", children: title }) : null,
|
|
1445
|
-
/* @__PURE__ */ jsx4("p", { className: "june-doc__draft-text", children: state === "drafting" ? `Drafting document\u2026${words ? ` ${words} words so far` : ""}` : "Loading editor\u2026" }),
|
|
1446
|
-
/* @__PURE__ */ jsxs2("div", { className: "june-doc__pulse", "aria-hidden": "true", children: [
|
|
1447
|
-
/* @__PURE__ */ jsx4("span", {}),
|
|
1448
|
-
/* @__PURE__ */ jsx4("span", {}),
|
|
1449
|
-
/* @__PURE__ */ jsx4("span", {})
|
|
1450
|
-
] })
|
|
1451
|
-
] });
|
|
1452
|
-
}
|
|
1453
|
-
|
|
1454
|
-
// src/components/document-editor/document-editor.tsx
|
|
1455
|
-
import { useEditor } from "@tiptap/react";
|
|
1456
|
-
import { useCallback as useCallback3, useEffect as useEffect6, useId, useMemo as useMemo4, useRef as useRef7, useState as useState6 } from "react";
|
|
1457
|
-
|
|
1458
|
-
// src/components/document-editor/document-bubble.tsx
|
|
1459
|
-
import { useEditorState as useEditorState2 } from "@tiptap/react";
|
|
1460
|
-
import { BubbleMenu } from "@tiptap/react/menus";
|
|
1461
|
-
|
|
1462
|
-
// src/components/document-editor/document-toolbar.tsx
|
|
1463
|
-
import { useEditorState } from "@tiptap/react";
|
|
1464
|
-
import { useRef as useRef4, useState as useState3 } from "react";
|
|
1465
|
-
|
|
1466
|
-
// src/components/document-editor/document-icons.tsx
|
|
1467
|
-
import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1468
|
-
var PATHS = {
|
|
1469
|
-
undo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1470
|
-
/* @__PURE__ */ jsx5("path", { d: "M9 14 4 9l5-5" }),
|
|
1471
|
-
/* @__PURE__ */ jsx5("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" })
|
|
1472
|
-
] }),
|
|
1473
|
-
redo: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1474
|
-
/* @__PURE__ */ jsx5("path", { d: "m15 14 5-5-5-5" }),
|
|
1475
|
-
/* @__PURE__ */ jsx5("path", { d: "M20 9H9.5a5.5 5.5 0 0 0 0 11H13" })
|
|
1476
|
-
] }),
|
|
1477
|
-
bold: /* @__PURE__ */ jsx5("path", { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" }),
|
|
1478
|
-
italic: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1479
|
-
/* @__PURE__ */ jsx5("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
|
|
1480
|
-
/* @__PURE__ */ jsx5("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
|
|
1481
|
-
/* @__PURE__ */ jsx5("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
|
|
1482
|
-
] }),
|
|
1483
|
-
underline: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1484
|
-
/* @__PURE__ */ jsx5("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
|
|
1485
|
-
/* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
|
|
1486
|
-
] }),
|
|
1487
|
-
strike: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1488
|
-
/* @__PURE__ */ jsx5("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
|
|
1489
|
-
/* @__PURE__ */ jsx5("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
|
|
1490
|
-
/* @__PURE__ */ jsx5("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
|
|
1491
|
-
] }),
|
|
1492
|
-
code: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1493
|
-
/* @__PURE__ */ jsx5("path", { d: "m16 18 6-6-6-6" }),
|
|
1494
|
-
/* @__PURE__ */ jsx5("path", { d: "m8 6-6 6 6 6" })
|
|
1495
|
-
] }),
|
|
1496
|
-
codeBlock: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1497
|
-
/* @__PURE__ */ jsx5("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
|
|
1498
|
-
/* @__PURE__ */ jsx5("path", { d: "m10 9-3 3 3 3" }),
|
|
1499
|
-
/* @__PURE__ */ jsx5("path", { d: "m14 15 3-3-3-3" })
|
|
1500
|
-
] }),
|
|
1501
|
-
superscript: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1502
|
-
/* @__PURE__ */ jsx5("path", { d: "m4 19 8-8" }),
|
|
1503
|
-
/* @__PURE__ */ jsx5("path", { d: "m12 19-8-8" }),
|
|
1504
|
-
/* @__PURE__ */ jsx5("path", { d: "M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
|
|
1505
|
-
] }),
|
|
1506
|
-
subscript: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1507
|
-
/* @__PURE__ */ jsx5("path", { d: "m4 5 8 8" }),
|
|
1508
|
-
/* @__PURE__ */ jsx5("path", { d: "m12 5-8 8" }),
|
|
1509
|
-
/* @__PURE__ */ jsx5("path", { d: "M20 19h-4c0-1.5.44-2 1.5-2.5S20 15.33 20 14c0-.47-.17-.93-.48-1.29a2.11 2.11 0 0 0-2.62-.44c-.42.24-.74.62-.9 1.07" })
|
|
1510
|
-
] }),
|
|
1511
|
-
alignLeft: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1512
|
-
/* @__PURE__ */ jsx5("path", { d: "M15 12H3" }),
|
|
1513
|
-
/* @__PURE__ */ jsx5("path", { d: "M17 18H3" }),
|
|
1514
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
|
|
1515
|
-
] }),
|
|
1516
|
-
alignCenter: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1517
|
-
/* @__PURE__ */ jsx5("path", { d: "M17 12H7" }),
|
|
1518
|
-
/* @__PURE__ */ jsx5("path", { d: "M19 18H5" }),
|
|
1519
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
|
|
1520
|
-
] }),
|
|
1521
|
-
alignRight: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1522
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 12H9" }),
|
|
1523
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 18H7" }),
|
|
1524
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 6H3" })
|
|
1525
|
-
] }),
|
|
1526
|
-
alignJustify: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1527
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
|
|
1528
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 18h18" }),
|
|
1529
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 6h18" })
|
|
1530
|
-
] }),
|
|
1531
|
-
list: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1532
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 12h.01" }),
|
|
1533
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 18h.01" }),
|
|
1534
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 6h.01" }),
|
|
1535
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 12h13" }),
|
|
1536
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 18h13" }),
|
|
1537
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 6h13" })
|
|
1538
|
-
] }),
|
|
1539
|
-
listOrdered: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1540
|
-
/* @__PURE__ */ jsx5("path", { d: "M10 12h11" }),
|
|
1541
|
-
/* @__PURE__ */ jsx5("path", { d: "M10 18h11" }),
|
|
1542
|
-
/* @__PURE__ */ jsx5("path", { d: "M10 6h11" }),
|
|
1543
|
-
/* @__PURE__ */ jsx5("path", { d: "M4 10h2" }),
|
|
1544
|
-
/* @__PURE__ */ jsx5("path", { d: "M4 6h1v4" }),
|
|
1545
|
-
/* @__PURE__ */ jsx5("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
|
|
1546
|
-
] }),
|
|
1547
|
-
outdent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1548
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
|
|
1549
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
|
|
1550
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
|
|
1551
|
-
/* @__PURE__ */ jsx5("path", { d: "m7 8-4 4 4 4" })
|
|
1552
|
-
] }),
|
|
1553
|
-
indent: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1554
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 12H11" }),
|
|
1555
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 18H11" }),
|
|
1556
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 6H11" }),
|
|
1557
|
-
/* @__PURE__ */ jsx5("path", { d: "m3 8 4 4-4 4" })
|
|
1558
|
-
] }),
|
|
1559
|
-
quote: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1560
|
-
/* @__PURE__ */ jsx5("path", { d: "M17 6H3" }),
|
|
1561
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 12H8" }),
|
|
1562
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 18H8" }),
|
|
1563
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 12v6" })
|
|
1564
|
-
] }),
|
|
1565
|
-
pilcrow: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1566
|
-
/* @__PURE__ */ jsx5("path", { d: "M13 4v16" }),
|
|
1567
|
-
/* @__PURE__ */ jsx5("path", { d: "M17 4v16" }),
|
|
1568
|
-
/* @__PURE__ */ jsx5("path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" })
|
|
1569
|
-
] }),
|
|
1570
|
-
pageBreak: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1571
|
-
/* @__PURE__ */ jsx5("line", { x1: "3", x2: "21", y1: "12", y2: "12" }),
|
|
1572
|
-
/* @__PURE__ */ jsx5("polyline", { points: "8 8 12 4 16 8" }),
|
|
1573
|
-
/* @__PURE__ */ jsx5("polyline", { points: "16 16 12 20 8 16" })
|
|
1574
|
-
] }),
|
|
1575
|
-
divider: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1576
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 12h18" }),
|
|
1577
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 6h8", opacity: ".45" }),
|
|
1578
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 18h8", opacity: ".45" })
|
|
1579
|
-
] }),
|
|
1580
|
-
layout: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1581
|
-
/* @__PURE__ */ jsx5("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
|
|
1582
|
-
/* @__PURE__ */ jsx5("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
|
|
1583
|
-
/* @__PURE__ */ jsx5("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
|
|
1584
|
-
] }),
|
|
1585
|
-
search: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1586
|
-
/* @__PURE__ */ jsx5("circle", { cx: "11", cy: "11", r: "8" }),
|
|
1587
|
-
/* @__PURE__ */ jsx5("path", { d: "m21 21-4.3-4.3" })
|
|
1588
|
-
] }),
|
|
1589
|
-
palette: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1590
|
-
/* @__PURE__ */ jsx5("circle", { cx: "13.5", cy: "6.5", r: ".5", fill: "currentColor" }),
|
|
1591
|
-
/* @__PURE__ */ jsx5("circle", { cx: "17.5", cy: "10.5", r: ".5", fill: "currentColor" }),
|
|
1592
|
-
/* @__PURE__ */ jsx5("circle", { cx: "8.5", cy: "7.5", r: ".5", fill: "currentColor" }),
|
|
1593
|
-
/* @__PURE__ */ jsx5("circle", { cx: "6.5", cy: "12.5", r: ".5", fill: "currentColor" }),
|
|
1594
|
-
/* @__PURE__ */ jsx5("path", { d: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.65-.75 1.65-1.69 0-.44-.18-.84-.44-1.13-.29-.29-.44-.65-.44-1.13a1.64 1.64 0 0 1 1.67-1.67h2c3.05 0 5.55-2.5 5.55-5.55C21.97 6.01 17.46 2 12 2z" })
|
|
1595
|
-
] }),
|
|
1596
|
-
highlighter: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1597
|
-
/* @__PURE__ */ jsx5("path", { d: "m9 11-6 6v3h9l3-3" }),
|
|
1598
|
-
/* @__PURE__ */ jsx5("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
|
|
1599
|
-
] }),
|
|
1600
|
-
link: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1601
|
-
/* @__PURE__ */ jsx5("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
|
|
1602
|
-
/* @__PURE__ */ jsx5("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
|
|
1603
|
-
] }),
|
|
1604
|
-
image: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1605
|
-
/* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
|
|
1606
|
-
/* @__PURE__ */ jsx5("circle", { cx: "9", cy: "9", r: "2" }),
|
|
1607
|
-
/* @__PURE__ */ jsx5("path", { d: "m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21" })
|
|
1608
|
-
] }),
|
|
1609
|
-
table: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1610
|
-
/* @__PURE__ */ jsx5("path", { d: "M12 3v18" }),
|
|
1611
|
-
/* @__PURE__ */ jsx5("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
|
|
1612
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 9h18" }),
|
|
1613
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 15h18" })
|
|
1614
|
-
] }),
|
|
1615
|
-
eraser: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1616
|
-
/* @__PURE__ */ jsx5("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21" }),
|
|
1617
|
-
/* @__PURE__ */ jsx5("path", { d: "M22 21H7" }),
|
|
1618
|
-
/* @__PURE__ */ jsx5("path", { d: "m5 11 9 9" })
|
|
1619
|
-
] }),
|
|
1620
|
-
save: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1621
|
-
/* @__PURE__ */ jsx5("path", { d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" }),
|
|
1622
|
-
/* @__PURE__ */ jsx5("path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" }),
|
|
1623
|
-
/* @__PURE__ */ jsx5("path", { d: "M7 3v4a1 1 0 0 0 1 1h7" })
|
|
1624
|
-
] }),
|
|
1625
|
-
download: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1626
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
1627
|
-
/* @__PURE__ */ jsx5("polyline", { points: "7 10 12 15 17 10" }),
|
|
1628
|
-
/* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
|
|
1629
|
-
] }),
|
|
1630
|
-
chevronDown: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" }),
|
|
1631
|
-
chevronUp: /* @__PURE__ */ jsx5("path", { d: "m18 15-6-6-6 6" }),
|
|
1632
|
-
close: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1633
|
-
/* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
|
|
1634
|
-
/* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
|
|
1635
|
-
] }),
|
|
1636
|
-
maximize: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1637
|
-
/* @__PURE__ */ jsx5("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
|
|
1638
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
|
|
1639
|
-
/* @__PURE__ */ jsx5("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
|
|
1640
|
-
/* @__PURE__ */ jsx5("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
|
|
1641
|
-
] }),
|
|
1642
|
-
copy: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1643
|
-
/* @__PURE__ */ jsx5("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
|
|
1644
|
-
/* @__PURE__ */ jsx5("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
|
|
1645
|
-
] }),
|
|
1646
|
-
file: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1647
|
-
/* @__PURE__ */ jsx5("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
|
|
1648
|
-
/* @__PURE__ */ jsx5("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
|
|
1649
|
-
] }),
|
|
1650
|
-
plus: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1651
|
-
/* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
|
|
1652
|
-
/* @__PURE__ */ jsx5("path", { d: "M12 5v14" })
|
|
1653
|
-
] }),
|
|
1654
|
-
minus: /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
|
|
1655
|
-
check: /* @__PURE__ */ jsx5("path", { d: "M20 6 9 17l-5-5" }),
|
|
1656
|
-
sparkles: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1657
|
-
/* @__PURE__ */ jsx5("path", { d: "M9.94 14.06 8 20l-1.94-5.94L0 12l6.06-1.94L8 4l1.94 6.06L16 12z", transform: "translate(3 -1) scale(.85)" }),
|
|
1658
|
-
/* @__PURE__ */ jsx5("path", { d: "M20 3v4" }),
|
|
1659
|
-
/* @__PURE__ */ jsx5("path", { d: "M22 5h-4" })
|
|
1660
|
-
] }),
|
|
1661
|
-
upload: /* @__PURE__ */ jsxs3(Fragment2, { children: [
|
|
1662
|
-
/* @__PURE__ */ jsx5("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
|
|
1663
|
-
/* @__PURE__ */ jsx5("polyline", { points: "17 8 12 3 7 8" }),
|
|
1664
|
-
/* @__PURE__ */ jsx5("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
|
|
1665
|
-
] })
|
|
1666
|
-
};
|
|
1667
|
-
function Icon({ name, size = 16 }) {
|
|
1668
|
-
return /* @__PURE__ */ jsx5(
|
|
1669
|
-
"svg",
|
|
1670
|
-
{
|
|
1671
|
-
className: "june-doc__icon",
|
|
1672
|
-
width: size,
|
|
1673
|
-
height: size,
|
|
1674
|
-
viewBox: "0 0 24 24",
|
|
1675
|
-
fill: "none",
|
|
1676
|
-
stroke: "currentColor",
|
|
1677
|
-
strokeWidth: 2,
|
|
1678
|
-
strokeLinecap: "round",
|
|
1679
|
-
strokeLinejoin: "round",
|
|
1680
|
-
"aria-hidden": "true",
|
|
1681
|
-
focusable: "false",
|
|
1682
|
-
children: PATHS[name]
|
|
1683
|
-
}
|
|
1684
|
-
);
|
|
1685
|
-
}
|
|
1686
|
-
|
|
1687
|
-
// src/components/document-editor/document-popover.tsx
|
|
1688
|
-
import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
|
|
1689
|
-
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1690
|
-
function Dropdown({ trigger, children, align = "start", className, onOpen }) {
|
|
1691
|
-
const [open, setOpen] = useState2(false);
|
|
1692
|
-
const anchor = useRef3(null);
|
|
1693
|
-
useEffect3(() => {
|
|
1694
|
-
if (!open) return;
|
|
1695
|
-
const onDown = (e) => {
|
|
1696
|
-
if (anchor.current && !anchor.current.contains(e.target)) setOpen(false);
|
|
1697
|
-
};
|
|
1698
|
-
document.addEventListener("mousedown", onDown);
|
|
1699
|
-
return () => document.removeEventListener("mousedown", onDown);
|
|
1700
|
-
}, [open]);
|
|
1701
|
-
const toggle = () => setOpen((v) => {
|
|
1702
|
-
if (!v) onOpen?.();
|
|
1703
|
-
return !v;
|
|
1704
|
-
});
|
|
1705
|
-
const close = () => setOpen(false);
|
|
1706
|
-
return /* @__PURE__ */ jsxs4(
|
|
1707
|
-
"div",
|
|
1708
|
-
{
|
|
1709
|
-
ref: anchor,
|
|
1710
|
-
className: "june-doc__anchor",
|
|
1711
|
-
onKeyDown: (e) => {
|
|
1712
|
-
if (e.key === "Escape" && open) {
|
|
1713
|
-
e.stopPropagation();
|
|
1714
|
-
close();
|
|
1715
|
-
}
|
|
1716
|
-
},
|
|
1717
|
-
children: [
|
|
1718
|
-
trigger({ open, toggle }),
|
|
1719
|
-
open ? /* @__PURE__ */ jsx6("div", { className: `june-doc__pop june-doc__pop--${align}${className ? ` ${className}` : ""}`, children: children(close) }) : null
|
|
1720
|
-
]
|
|
1721
|
-
}
|
|
1722
|
-
);
|
|
1723
|
-
}
|
|
1724
|
-
|
|
1725
|
-
// src/components/document-editor/document-toolbar.tsx
|
|
1726
|
-
import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1727
|
-
var FONT_FAMILIES = [
|
|
1728
|
-
{ label: "Default", value: "" },
|
|
1729
|
-
{ label: "Arial", value: "Arial, Helvetica, sans-serif" },
|
|
1730
|
-
{ label: "Calibri", value: "Calibri, Carlito, sans-serif" },
|
|
1731
|
-
{ label: "Georgia", value: "Georgia, serif" },
|
|
1732
|
-
{ label: "Garamond", value: "Garamond, 'EB Garamond', serif" },
|
|
1733
|
-
{ label: "Times New Roman", value: "'Times New Roman', Times, serif" },
|
|
1734
|
-
{ label: "Verdana", value: "Verdana, Geneva, sans-serif" },
|
|
1735
|
-
{ label: "Trebuchet MS", value: "'Trebuchet MS', sans-serif" },
|
|
1736
|
-
{ label: "Courier New", value: "'Courier New', Courier, monospace" }
|
|
1737
|
-
];
|
|
1738
|
-
var FONT_SIZES = [8, 9, 10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 32, 36, 48, 60, 72];
|
|
1739
|
-
var TEXT_COLORS = [
|
|
1740
|
-
"#111827",
|
|
1741
|
-
"#374151",
|
|
1742
|
-
"#6b7280",
|
|
1743
|
-
"#9ca3af",
|
|
1744
|
-
"#dc2626",
|
|
1745
|
-
"#ea580c",
|
|
1746
|
-
"#ca8a04",
|
|
1747
|
-
"#16a34a",
|
|
1748
|
-
"#0d9488",
|
|
1749
|
-
"#0284c7",
|
|
1750
|
-
"#2563eb",
|
|
1751
|
-
"#4f46e5",
|
|
1752
|
-
"#9333ea",
|
|
1753
|
-
"#db2777",
|
|
1754
|
-
"#7f1d1d",
|
|
1755
|
-
"#1e3a8a"
|
|
1756
|
-
];
|
|
1757
|
-
var HIGHLIGHT_COLORS = [
|
|
1758
|
-
"#fef08a",
|
|
1759
|
-
"#fde68a",
|
|
1760
|
-
"#fed7aa",
|
|
1761
|
-
"#fecaca",
|
|
1762
|
-
"#fbcfe8",
|
|
1763
|
-
"#e9d5ff",
|
|
1764
|
-
"#c7d2fe",
|
|
1765
|
-
"#bfdbfe",
|
|
1766
|
-
"#a5f3fc",
|
|
1767
|
-
"#bbf7d0",
|
|
1768
|
-
"#d9f99d",
|
|
1769
|
-
"#e5e7eb"
|
|
1770
|
-
];
|
|
1771
|
-
var MAX_IMAGE_BYTES = 8 * 1024 * 1024;
|
|
1772
|
-
function Btn({ label, icon, active, disabled, toggle, onClick, children, className, text }) {
|
|
1773
|
-
return /* @__PURE__ */ jsxs5(
|
|
1774
|
-
"button",
|
|
1775
|
-
{
|
|
1776
|
-
type: "button",
|
|
1777
|
-
className: `june-doc__btn${icon && !text && !children ? " june-doc__btn--icon" : ""}${className ? ` ${className}` : ""}`,
|
|
1778
|
-
"aria-label": label,
|
|
1779
|
-
title: label,
|
|
1780
|
-
"aria-pressed": toggle ? !!active : void 0,
|
|
1781
|
-
"data-active": active || void 0,
|
|
1782
|
-
disabled,
|
|
1783
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
1784
|
-
onClick,
|
|
1785
|
-
children: [
|
|
1786
|
-
icon ? /* @__PURE__ */ jsx7(Icon, { name: icon }) : null,
|
|
1787
|
-
children ?? (text ? /* @__PURE__ */ jsx7("span", { children: label }) : null)
|
|
1788
|
-
]
|
|
1789
|
-
}
|
|
1790
|
-
);
|
|
1791
|
-
}
|
|
1792
|
-
function Group({ label, children }) {
|
|
1793
|
-
return /* @__PURE__ */ jsxs5("div", { className: "june-doc__group", role: "group", "aria-label": label, children: [
|
|
1794
|
-
label ? /* @__PURE__ */ jsx7("span", { className: "june-doc__group-label", "aria-hidden": "true", children: label }) : null,
|
|
1795
|
-
children
|
|
1796
|
-
] });
|
|
1797
|
-
}
|
|
1798
|
-
function Field({ label, children }) {
|
|
1799
|
-
return /* @__PURE__ */ jsxs5("label", { className: "june-doc__field", children: [
|
|
1800
|
-
/* @__PURE__ */ jsx7("span", { className: "june-doc__field-label", children: label }),
|
|
1801
|
-
children
|
|
1802
|
-
] });
|
|
1803
|
-
}
|
|
1804
|
-
function ColorPicker({ label, icon, colors, current, disabled, resetLabel, onPick, onReset }) {
|
|
1805
|
-
return /* @__PURE__ */ jsx7(
|
|
1806
|
-
Dropdown,
|
|
1807
|
-
{
|
|
1808
|
-
trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs5(
|
|
1809
|
-
"button",
|
|
1810
|
-
{
|
|
1811
|
-
type: "button",
|
|
1812
|
-
className: "june-doc__btn june-doc__btn--icon june-doc__btn--color",
|
|
1813
|
-
"aria-label": label,
|
|
1814
|
-
title: label,
|
|
1815
|
-
"aria-expanded": open,
|
|
1816
|
-
"aria-haspopup": "dialog",
|
|
1817
|
-
disabled,
|
|
1818
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
1819
|
-
onClick: toggle,
|
|
1820
|
-
children: [
|
|
1821
|
-
/* @__PURE__ */ jsx7(Icon, { name: icon }),
|
|
1822
|
-
/* @__PURE__ */ jsx7("span", { className: "june-doc__color-bar", style: { background: current ?? "transparent" } })
|
|
1823
|
-
]
|
|
1824
|
-
}
|
|
1825
|
-
),
|
|
1826
|
-
children: (close) => /* @__PURE__ */ jsxs5("div", { className: "june-doc__swatches-wrap", role: "dialog", "aria-label": label, children: [
|
|
1827
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: label }),
|
|
1828
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__swatches", children: colors.map((c) => /* @__PURE__ */ jsx7(
|
|
1829
|
-
"button",
|
|
1830
|
-
{
|
|
1831
|
-
type: "button",
|
|
1832
|
-
className: "june-doc__swatch",
|
|
1833
|
-
style: { background: c },
|
|
1834
|
-
"aria-label": c,
|
|
1835
|
-
title: c,
|
|
1836
|
-
"data-active": current?.toLowerCase() === c ? true : void 0,
|
|
1837
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
1838
|
-
onClick: () => {
|
|
1839
|
-
onPick(c);
|
|
1840
|
-
close();
|
|
1841
|
-
}
|
|
1842
|
-
},
|
|
1843
|
-
c
|
|
1844
|
-
)) }),
|
|
1845
|
-
/* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row", children: [
|
|
1846
|
-
/* @__PURE__ */ jsx7(
|
|
1847
|
-
"button",
|
|
1848
|
-
{
|
|
1849
|
-
type: "button",
|
|
1850
|
-
className: "june-doc__btn june-doc__btn--ghost",
|
|
1851
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
1852
|
-
onClick: () => {
|
|
1853
|
-
onReset();
|
|
1854
|
-
close();
|
|
1855
|
-
},
|
|
1856
|
-
children: resetLabel
|
|
1857
|
-
}
|
|
1858
|
-
),
|
|
1859
|
-
/* @__PURE__ */ jsxs5("label", { className: "june-doc__custom-color", title: "Custom color", children: [
|
|
1860
|
-
/* @__PURE__ */ jsx7("span", { children: "Custom" }),
|
|
1861
|
-
/* @__PURE__ */ jsx7(
|
|
1862
|
-
"input",
|
|
1863
|
-
{
|
|
1864
|
-
type: "color",
|
|
1865
|
-
"aria-label": `${label}: custom`,
|
|
1866
|
-
defaultValue: current && /^#[0-9a-f]{6}$/i.test(current) ? current : "#000000",
|
|
1867
|
-
onChange: (e) => onPick(e.target.value)
|
|
1868
|
-
}
|
|
1869
|
-
)
|
|
1870
|
-
] })
|
|
1871
|
-
] })
|
|
1872
|
-
] })
|
|
1873
|
-
}
|
|
1874
|
-
);
|
|
1875
|
-
}
|
|
1876
|
-
function LinkPanel({
|
|
1877
|
-
editor,
|
|
1878
|
-
href,
|
|
1879
|
-
isLink,
|
|
1880
|
-
close
|
|
1881
|
-
}) {
|
|
1882
|
-
const [value, setValue] = useState3(href);
|
|
1883
|
-
const apply = () => {
|
|
1884
|
-
const safe = sanitizeHref(value);
|
|
1885
|
-
if (safe) editor.chain().focus().extendMarkRange("link").setLink({ href: safe }).run();
|
|
1886
|
-
close();
|
|
1887
|
-
};
|
|
1888
|
-
const remove = () => {
|
|
1889
|
-
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
|
1890
|
-
close();
|
|
1891
|
-
};
|
|
1892
|
-
return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Edit link", children: [
|
|
1893
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Link" }),
|
|
1894
|
-
/* @__PURE__ */ jsx7(
|
|
1895
|
-
"input",
|
|
1896
|
-
{
|
|
1897
|
-
"aria-label": "Link address",
|
|
1898
|
-
className: "june-doc__input",
|
|
1899
|
-
placeholder: "https://example.com",
|
|
1900
|
-
value,
|
|
1901
|
-
autoFocus: true,
|
|
1902
|
-
onChange: (e) => setValue(e.target.value),
|
|
1903
|
-
onKeyDown: (e) => {
|
|
1904
|
-
if (e.key === "Enter") {
|
|
1905
|
-
e.preventDefault();
|
|
1906
|
-
apply();
|
|
1907
|
-
}
|
|
1908
|
-
}
|
|
1909
|
-
}
|
|
1910
|
-
),
|
|
1911
|
-
/* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
|
|
1912
|
-
isLink ? /* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--ghost", onClick: remove, children: "Remove" }) : null,
|
|
1913
|
-
/* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
|
|
1914
|
-
/* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", onClick: apply, children: "Apply" })
|
|
1915
|
-
] })
|
|
1916
|
-
] });
|
|
1917
|
-
}
|
|
1918
|
-
function ImagePanel({ editor, close, onNotice }) {
|
|
1919
|
-
const [url, setUrl] = useState3("");
|
|
1920
|
-
const [alt, setAlt] = useState3("");
|
|
1921
|
-
const file = useRef4(null);
|
|
1922
|
-
const insert = (src) => {
|
|
1923
|
-
editor.chain().focus().setImage({ src, alt: alt || void 0 }).run();
|
|
1924
|
-
close();
|
|
1925
|
-
};
|
|
1926
|
-
const fromUrl = () => {
|
|
1927
|
-
const safe = sanitizeHref(url);
|
|
1928
|
-
if (!safe || !/^https?:/i.test(safe)) {
|
|
1929
|
-
onNotice("Enter an http(s) image address");
|
|
1930
|
-
return;
|
|
1931
|
-
}
|
|
1932
|
-
insert(safe);
|
|
1933
|
-
};
|
|
1934
|
-
const fromFile = (f) => {
|
|
1935
|
-
if (!f) return;
|
|
1936
|
-
if (!f.type.startsWith("image/")) return onNotice("That file is not an image");
|
|
1937
|
-
if (f.size > MAX_IMAGE_BYTES) return onNotice("Images must be 8 MB or smaller");
|
|
1938
|
-
const reader = new FileReader();
|
|
1939
|
-
reader.onload = () => typeof reader.result === "string" && insert(reader.result);
|
|
1940
|
-
reader.onerror = () => onNotice("The image could not be read");
|
|
1941
|
-
reader.readAsDataURL(f);
|
|
140
|
+
prompt: (promptOptions) => registry.prompt(promptOptions)
|
|
1942
141
|
};
|
|
1943
|
-
return
|
|
1944
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__pop-title", children: "Image" }),
|
|
1945
|
-
/* @__PURE__ */ jsxs5(
|
|
1946
|
-
"button",
|
|
1947
|
-
{
|
|
1948
|
-
type: "button",
|
|
1949
|
-
className: "june-doc__dropzone",
|
|
1950
|
-
onClick: () => file.current?.click(),
|
|
1951
|
-
onDragOver: (e) => e.preventDefault(),
|
|
1952
|
-
onDrop: (e) => {
|
|
1953
|
-
e.preventDefault();
|
|
1954
|
-
fromFile(e.dataTransfer.files[0]);
|
|
1955
|
-
},
|
|
1956
|
-
children: [
|
|
1957
|
-
/* @__PURE__ */ jsx7(Icon, { name: "upload", size: 18 }),
|
|
1958
|
-
/* @__PURE__ */ jsx7("span", { children: "Upload or drop an image" })
|
|
1959
|
-
]
|
|
1960
|
-
}
|
|
1961
|
-
),
|
|
1962
|
-
/* @__PURE__ */ jsx7(
|
|
1963
|
-
"input",
|
|
1964
|
-
{
|
|
1965
|
-
ref: file,
|
|
1966
|
-
type: "file",
|
|
1967
|
-
accept: "image/*",
|
|
1968
|
-
hidden: true,
|
|
1969
|
-
onChange: (e) => fromFile(e.target.files?.[0])
|
|
1970
|
-
}
|
|
1971
|
-
),
|
|
1972
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__or", children: "or" }),
|
|
1973
|
-
/* @__PURE__ */ jsx7(
|
|
1974
|
-
"input",
|
|
1975
|
-
{
|
|
1976
|
-
"aria-label": "Image address",
|
|
1977
|
-
className: "june-doc__input",
|
|
1978
|
-
placeholder: "https://example.com/image.png",
|
|
1979
|
-
value: url,
|
|
1980
|
-
onChange: (e) => setUrl(e.target.value),
|
|
1981
|
-
onKeyDown: (e) => e.key === "Enter" && fromUrl()
|
|
1982
|
-
}
|
|
1983
|
-
),
|
|
1984
|
-
/* @__PURE__ */ jsx7(
|
|
1985
|
-
"input",
|
|
1986
|
-
{
|
|
1987
|
-
"aria-label": "Alternative text",
|
|
1988
|
-
className: "june-doc__input",
|
|
1989
|
-
placeholder: "Alt text (optional)",
|
|
1990
|
-
value: alt,
|
|
1991
|
-
onChange: (e) => setAlt(e.target.value)
|
|
1992
|
-
}
|
|
1993
|
-
),
|
|
1994
|
-
/* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-row june-doc__pop-row--end", children: [
|
|
1995
|
-
/* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn", onClick: close, children: "Cancel" }),
|
|
1996
|
-
/* @__PURE__ */ jsx7("button", { type: "button", className: "june-doc__btn june-doc__btn--primary", disabled: !url.trim(), onClick: fromUrl, children: "Insert" })
|
|
1997
|
-
] })
|
|
1998
|
-
] });
|
|
1999
|
-
}
|
|
2000
|
-
function TablePanel({ editor, close }) {
|
|
2001
|
-
const [hover, setHover] = useState3([0, 0]);
|
|
2002
|
-
const N = 8;
|
|
2003
|
-
return /* @__PURE__ */ jsxs5("div", { className: "june-doc__form", role: "dialog", "aria-label": "Insert table", children: [
|
|
2004
|
-
/* @__PURE__ */ jsxs5("div", { className: "june-doc__pop-title", children: [
|
|
2005
|
-
"Table ",
|
|
2006
|
-
hover[0] ? `${hover[0]} \xD7 ${hover[1]}` : ""
|
|
2007
|
-
] }),
|
|
2008
|
-
/* @__PURE__ */ jsx7("div", { className: "june-doc__grid", onMouseLeave: () => setHover([0, 0]), children: Array.from({ length: N * N }, (_, i) => {
|
|
2009
|
-
const r = Math.floor(i / N) + 1;
|
|
2010
|
-
const c = i % N + 1;
|
|
2011
|
-
return /* @__PURE__ */ jsx7(
|
|
2012
|
-
"button",
|
|
2013
|
-
{
|
|
2014
|
-
type: "button",
|
|
2015
|
-
className: "june-doc__cell",
|
|
2016
|
-
"aria-label": `${r} by ${c} table`,
|
|
2017
|
-
"data-active": r <= hover[0] && c <= hover[1] ? true : void 0,
|
|
2018
|
-
onMouseEnter: () => setHover([r, c]),
|
|
2019
|
-
onFocus: () => setHover([r, c]),
|
|
2020
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
2021
|
-
onClick: () => {
|
|
2022
|
-
editor.chain().focus().insertTable({ rows: r, cols: c, withHeaderRow: true }).run();
|
|
2023
|
-
close();
|
|
2024
|
-
}
|
|
2025
|
-
},
|
|
2026
|
-
i
|
|
2027
|
-
);
|
|
2028
|
-
}) })
|
|
2029
|
-
] });
|
|
2030
|
-
}
|
|
2031
|
-
var px = (v) => typeof v === "string" ? v.replace(/px$/, "") : "";
|
|
2032
|
-
function DocumentToolbar(props) {
|
|
2033
|
-
const { editor, editable, expanded, onToggleExpanded, showMarks, onToggleMarks, layout, onToggleLayout, findOpen, onToggleFind, onNotice } = props;
|
|
2034
|
-
const s = useEditorState({
|
|
2035
|
-
editor,
|
|
2036
|
-
selector: ({ editor: ed }) => {
|
|
2037
|
-
if (!ed) return null;
|
|
2038
|
-
const ts = ed.getAttributes("textStyle");
|
|
2039
|
-
return {
|
|
2040
|
-
bold: ed.isActive("bold"),
|
|
2041
|
-
italic: ed.isActive("italic"),
|
|
2042
|
-
underline: ed.isActive("underline"),
|
|
2043
|
-
strike: ed.isActive("strike"),
|
|
2044
|
-
code: ed.isActive("code"),
|
|
2045
|
-
sup: ed.isActive("superscript"),
|
|
2046
|
-
sub: ed.isActive("subscript"),
|
|
2047
|
-
bullet: ed.isActive("bulletList"),
|
|
2048
|
-
ordered: ed.isActive("orderedList"),
|
|
2049
|
-
quote: ed.isActive("blockquote"),
|
|
2050
|
-
codeBlock: ed.isActive("codeBlock"),
|
|
2051
|
-
link: ed.isActive("link"),
|
|
2052
|
-
linkHref: ed.getAttributes("link").href ?? "",
|
|
2053
|
-
h1: ed.isActive("heading", { level: 1 }),
|
|
2054
|
-
h2: ed.isActive("heading", { level: 2 }),
|
|
2055
|
-
h3: ed.isActive("heading", { level: 3 }),
|
|
2056
|
-
left: ed.isActive({ textAlign: "left" }),
|
|
2057
|
-
center: ed.isActive({ textAlign: "center" }),
|
|
2058
|
-
right: ed.isActive({ textAlign: "right" }),
|
|
2059
|
-
justify: ed.isActive({ textAlign: "justify" }),
|
|
2060
|
-
inTable: ed.isActive("table"),
|
|
2061
|
-
color: ts.color ?? null,
|
|
2062
|
-
fontFamily: ts.fontFamily ?? "",
|
|
2063
|
-
fontSize: px(ts.fontSize),
|
|
2064
|
-
highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null,
|
|
2065
|
-
canUndo: ed.can().undo(),
|
|
2066
|
-
canRedo: ed.can().redo(),
|
|
2067
|
-
canSink: ed.can().sinkListItem("listItem"),
|
|
2068
|
-
canLift: ed.can().liftListItem("listItem"),
|
|
2069
|
-
canMerge: ed.can().mergeCells(),
|
|
2070
|
-
canSplit: ed.can().splitCell()
|
|
2071
|
-
};
|
|
2072
|
-
}
|
|
2073
|
-
});
|
|
2074
|
-
const run = () => editor?.chain().focus();
|
|
2075
|
-
const off = !editor || !editable;
|
|
2076
|
-
const style = s?.codeBlock ? "code" : s?.h1 ? "1" : s?.h2 ? "2" : s?.h3 ? "3" : s?.quote ? "quote" : "p";
|
|
2077
|
-
const setStyle = (v) => {
|
|
2078
|
-
if (!editor || !s) return;
|
|
2079
|
-
let c = editor.chain().focus();
|
|
2080
|
-
if (v === "quote") {
|
|
2081
|
-
if (!s.quote) c = c.setParagraph().toggleBlockquote();
|
|
2082
|
-
} else if (v === "code") {
|
|
2083
|
-
if (!s.codeBlock) c = c.toggleCodeBlock();
|
|
2084
|
-
} else {
|
|
2085
|
-
if (s.quote) c = c.lift("blockquote");
|
|
2086
|
-
c = v === "p" ? c.setParagraph() : c.setHeading({ level: Number(v) });
|
|
2087
|
-
}
|
|
2088
|
-
c.run();
|
|
2089
|
-
};
|
|
2090
|
-
const fontKnown = FONT_FAMILIES.some((f) => f.value === s?.fontFamily);
|
|
2091
|
-
const sizes = s?.fontSize && !FONT_SIZES.includes(Number(s.fontSize)) ? [...FONT_SIZES, Number(s.fontSize)].sort((a, b) => a - b) : FONT_SIZES;
|
|
2092
|
-
if (!editable) return null;
|
|
2093
|
-
return /* @__PURE__ */ jsxs5("div", { className: "june-doc__ribbon", role: "toolbar", "aria-label": "Document formatting", children: [
|
|
2094
|
-
/* @__PURE__ */ jsxs5("div", { className: "june-doc__row", children: [
|
|
2095
|
-
/* @__PURE__ */ jsxs5(Group, { label: "History", children: [
|
|
2096
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Undo", icon: "undo", disabled: off || !s?.canUndo, onClick: () => run()?.undo().run() }),
|
|
2097
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Redo", icon: "redo", disabled: off || !s?.canRedo, onClick: () => run()?.redo().run() })
|
|
2098
|
-
] }),
|
|
2099
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Format", children: [
|
|
2100
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Bold", icon: "bold", toggle: true, active: s?.bold, disabled: off, onClick: () => run()?.toggleBold().run() }),
|
|
2101
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Italic", icon: "italic", toggle: true, active: s?.italic, disabled: off, onClick: () => run()?.toggleItalic().run() }),
|
|
2102
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Underline", icon: "underline", toggle: true, active: s?.underline, disabled: off, onClick: () => run()?.toggleUnderline().run() }),
|
|
2103
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s?.strike, disabled: off, onClick: () => run()?.toggleStrike().run() }),
|
|
2104
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Inline code", icon: "code", toggle: true, active: s?.code, disabled: off, onClick: () => run()?.toggleCode().run() }),
|
|
2105
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Superscript", icon: "superscript", toggle: true, active: s?.sup, disabled: off, onClick: () => run()?.toggleSuperscript().run() }),
|
|
2106
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Subscript", icon: "subscript", toggle: true, active: s?.sub, disabled: off, onClick: () => run()?.toggleSubscript().run() })
|
|
2107
|
-
] }),
|
|
2108
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Align", children: [
|
|
2109
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Align left", icon: "alignLeft", toggle: true, active: s?.left, disabled: off, onClick: () => run()?.setTextAlign("left").run() }),
|
|
2110
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Align center", icon: "alignCenter", toggle: true, active: s?.center, disabled: off, onClick: () => run()?.setTextAlign("center").run() }),
|
|
2111
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Align right", icon: "alignRight", toggle: true, active: s?.right, disabled: off, onClick: () => run()?.setTextAlign("right").run() }),
|
|
2112
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Justify", icon: "alignJustify", toggle: true, active: s?.justify, disabled: off, onClick: () => run()?.setTextAlign("justify").run() })
|
|
2113
|
-
] }),
|
|
2114
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Lists", children: [
|
|
2115
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Bullet list", icon: "list", toggle: true, active: s?.bullet, disabled: off, onClick: () => run()?.toggleBulletList().run() }),
|
|
2116
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Numbered list", icon: "listOrdered", toggle: true, active: s?.ordered, disabled: off, onClick: () => run()?.toggleOrderedList().run() }),
|
|
2117
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Decrease indent", icon: "outdent", disabled: off || !s?.canLift, onClick: () => run()?.liftListItem("listItem").run() }),
|
|
2118
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Increase indent", icon: "indent", disabled: off || !s?.canSink, onClick: () => run()?.sinkListItem("listItem").run() })
|
|
2119
|
-
] }),
|
|
2120
|
-
/* @__PURE__ */ jsxs5(
|
|
2121
|
-
"button",
|
|
2122
|
-
{
|
|
2123
|
-
type: "button",
|
|
2124
|
-
className: "june-doc__btn june-doc__more",
|
|
2125
|
-
"aria-expanded": expanded,
|
|
2126
|
-
"aria-label": expanded ? "Show fewer tools" : "Show more tools",
|
|
2127
|
-
onMouseDown: (e) => e.preventDefault(),
|
|
2128
|
-
onClick: onToggleExpanded,
|
|
2129
|
-
children: [
|
|
2130
|
-
expanded ? "Less" : "More",
|
|
2131
|
-
/* @__PURE__ */ jsx7(Icon, { name: expanded ? "chevronUp" : "chevronDown", size: 14 })
|
|
2132
|
-
]
|
|
2133
|
-
}
|
|
2134
|
-
)
|
|
2135
|
-
] }),
|
|
2136
|
-
expanded ? /* @__PURE__ */ jsxs5("div", { className: "june-doc__row june-doc__row--secondary", children: [
|
|
2137
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Style", children: [
|
|
2138
|
-
/* @__PURE__ */ jsx7(Field, { label: "Style", children: /* @__PURE__ */ jsxs5("select", { className: "june-doc__select", "aria-label": "Text style", disabled: off, value: style, onChange: (e) => setStyle(e.target.value), children: [
|
|
2139
|
-
/* @__PURE__ */ jsx7("option", { value: "p", children: "Paragraph" }),
|
|
2140
|
-
/* @__PURE__ */ jsx7("option", { value: "1", children: "Heading 1" }),
|
|
2141
|
-
/* @__PURE__ */ jsx7("option", { value: "2", children: "Heading 2" }),
|
|
2142
|
-
/* @__PURE__ */ jsx7("option", { value: "3", children: "Heading 3" }),
|
|
2143
|
-
/* @__PURE__ */ jsx7("option", { value: "quote", children: "Quote" }),
|
|
2144
|
-
/* @__PURE__ */ jsx7("option", { value: "code", children: "Code block" })
|
|
2145
|
-
] }) }),
|
|
2146
|
-
/* @__PURE__ */ jsx7(Field, { label: "Font", children: /* @__PURE__ */ jsxs5(
|
|
2147
|
-
"select",
|
|
2148
|
-
{
|
|
2149
|
-
className: "june-doc__select june-doc__select--font",
|
|
2150
|
-
"aria-label": "Font family",
|
|
2151
|
-
disabled: off,
|
|
2152
|
-
value: s?.fontFamily ?? "",
|
|
2153
|
-
onChange: (e) => {
|
|
2154
|
-
const v = e.target.value;
|
|
2155
|
-
if (v) run()?.setFontFamily(v).run();
|
|
2156
|
-
else run()?.unsetFontFamily().run();
|
|
2157
|
-
},
|
|
2158
|
-
children: [
|
|
2159
|
-
FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx7("option", { value: f.value, style: { fontFamily: f.value || void 0 }, children: f.label }, f.label)),
|
|
2160
|
-
!fontKnown && s?.fontFamily ? /* @__PURE__ */ jsx7("option", { value: s.fontFamily, children: s.fontFamily.split(",")[0].replace(/['"]/g, "") }) : null
|
|
2161
|
-
]
|
|
2162
|
-
}
|
|
2163
|
-
) }),
|
|
2164
|
-
/* @__PURE__ */ jsx7(Field, { label: "Size", children: /* @__PURE__ */ jsxs5(
|
|
2165
|
-
"select",
|
|
2166
|
-
{
|
|
2167
|
-
className: "june-doc__select june-doc__select--size",
|
|
2168
|
-
"aria-label": "Font size",
|
|
2169
|
-
disabled: off,
|
|
2170
|
-
value: s?.fontSize ?? "",
|
|
2171
|
-
onChange: (e) => {
|
|
2172
|
-
const v = e.target.value;
|
|
2173
|
-
if (v) run()?.setFontSize(`${v}px`).run();
|
|
2174
|
-
else run()?.unsetFontSize().run();
|
|
2175
|
-
},
|
|
2176
|
-
children: [
|
|
2177
|
-
/* @__PURE__ */ jsx7("option", { value: "", children: "Auto" }),
|
|
2178
|
-
sizes.map((n) => /* @__PURE__ */ jsx7("option", { value: String(n), children: n }, n))
|
|
2179
|
-
]
|
|
2180
|
-
}
|
|
2181
|
-
) })
|
|
2182
|
-
] }),
|
|
2183
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Show formatting marks", icon: "pilcrow", toggle: true, active: showMarks, onClick: onToggleMarks, text: true, className: "june-doc__btn--marks", children: /* @__PURE__ */ jsx7("span", { children: "Paragraph" }) }),
|
|
2184
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Document", children: [
|
|
2185
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Insert page break", icon: "pageBreak", disabled: off, onClick: () => run()?.setPageBreak().run() }),
|
|
2186
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Insert divider", icon: "divider", disabled: off, onClick: () => run()?.setHorizontalRule().run() }),
|
|
2187
|
-
/* @__PURE__ */ jsx7(Btn, { label: layout === "page" ? "Switch to full-width layout" : "Switch to page layout", icon: "layout", toggle: true, active: layout === "fluid", onClick: onToggleLayout }),
|
|
2188
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Find and replace", icon: "search", toggle: true, active: findOpen, onClick: onToggleFind })
|
|
2189
|
-
] }),
|
|
2190
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Color", children: [
|
|
2191
|
-
/* @__PURE__ */ jsx7(
|
|
2192
|
-
ColorPicker,
|
|
2193
|
-
{
|
|
2194
|
-
label: "Text color",
|
|
2195
|
-
icon: "palette",
|
|
2196
|
-
colors: TEXT_COLORS,
|
|
2197
|
-
current: s?.color ?? null,
|
|
2198
|
-
disabled: off,
|
|
2199
|
-
resetLabel: "Default color",
|
|
2200
|
-
onPick: (c) => run()?.setColor(c).run(),
|
|
2201
|
-
onReset: () => run()?.unsetColor().run()
|
|
2202
|
-
}
|
|
2203
|
-
),
|
|
2204
|
-
/* @__PURE__ */ jsx7(
|
|
2205
|
-
ColorPicker,
|
|
2206
|
-
{
|
|
2207
|
-
label: "Highlight",
|
|
2208
|
-
icon: "highlighter",
|
|
2209
|
-
colors: HIGHLIGHT_COLORS,
|
|
2210
|
-
current: s?.highlight ?? null,
|
|
2211
|
-
disabled: off,
|
|
2212
|
-
resetLabel: "No highlight",
|
|
2213
|
-
onPick: (c) => run()?.setHighlight({ color: c }).run(),
|
|
2214
|
-
onReset: () => run()?.unsetHighlight().run()
|
|
2215
|
-
}
|
|
2216
|
-
)
|
|
2217
|
-
] }),
|
|
2218
|
-
/* @__PURE__ */ jsxs5(Group, { label: "Insert", children: [
|
|
2219
|
-
editor ? /* @__PURE__ */ jsx7(
|
|
2220
|
-
Dropdown,
|
|
2221
|
-
{
|
|
2222
|
-
trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Link", icon: "link", toggle: true, active: s?.link || open, disabled: off, onClick: toggle }),
|
|
2223
|
-
children: (close) => /* @__PURE__ */ jsx7(LinkPanel, { editor, href: s?.linkHref ?? "", isLink: !!s?.link, close })
|
|
2224
|
-
}
|
|
2225
|
-
) : null,
|
|
2226
|
-
editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert image", icon: "image", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(ImagePanel, { editor, close, onNotice }) }) : null,
|
|
2227
|
-
editor ? /* @__PURE__ */ jsx7(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx7(Btn, { label: "Insert table", icon: "table", active: open, disabled: off, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx7(TablePanel, { editor, close }) }) : null
|
|
2228
|
-
] }),
|
|
2229
|
-
/* @__PURE__ */ jsx7(Group, { label: "Actions", children: /* @__PURE__ */ jsx7(Btn, { label: "Clear formatting", icon: "eraser", disabled: off, onClick: () => run()?.unsetAllMarks().clearNodes().run() }) })
|
|
2230
|
-
] }) : null,
|
|
2231
|
-
s?.inTable ? /* @__PURE__ */ jsx7("div", { className: "june-doc__row june-doc__row--context", children: /* @__PURE__ */ jsxs5(Group, { label: "Table", children: [
|
|
2232
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Add row below", disabled: off, onClick: () => run()?.addRowAfter().run(), children: "+ Row" }),
|
|
2233
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Add column right", disabled: off, onClick: () => run()?.addColumnAfter().run(), children: "+ Column" }),
|
|
2234
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Delete row", disabled: off, onClick: () => run()?.deleteRow().run(), children: "\u2212 Row" }),
|
|
2235
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Delete column", disabled: off, onClick: () => run()?.deleteColumn().run(), children: "\u2212 Column" }),
|
|
2236
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Merge cells", disabled: off || !s?.canMerge, onClick: () => run()?.mergeCells().run(), children: "Merge" }),
|
|
2237
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Split cell", disabled: off || !s?.canSplit, onClick: () => run()?.splitCell().run(), children: "Split" }),
|
|
2238
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Toggle header row", disabled: off, onClick: () => run()?.toggleHeaderRow().run(), children: "Header row" }),
|
|
2239
|
-
/* @__PURE__ */ jsx7(Btn, { label: "Delete table", disabled: off, onClick: () => run()?.deleteTable().run(), className: "june-doc__btn--danger", children: "Delete table" })
|
|
2240
|
-
] }) }) : null
|
|
2241
|
-
] });
|
|
2242
|
-
}
|
|
2243
|
-
|
|
2244
|
-
// src/components/document-editor/document-bubble.tsx
|
|
2245
|
-
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
2246
|
-
function DocumentBubbleMenu({ editor }) {
|
|
2247
|
-
const s = useEditorState2({
|
|
2248
|
-
editor,
|
|
2249
|
-
selector: ({ editor: ed }) => ({
|
|
2250
|
-
bold: ed.isActive("bold"),
|
|
2251
|
-
italic: ed.isActive("italic"),
|
|
2252
|
-
underline: ed.isActive("underline"),
|
|
2253
|
-
strike: ed.isActive("strike"),
|
|
2254
|
-
link: ed.isActive("link"),
|
|
2255
|
-
linkHref: ed.getAttributes("link").href ?? "",
|
|
2256
|
-
color: ed.getAttributes("textStyle").color ?? null,
|
|
2257
|
-
highlight: ed.isActive("highlight") ? ed.getAttributes("highlight").color ?? "#fef08a" : null
|
|
2258
|
-
})
|
|
2259
|
-
});
|
|
2260
|
-
const run = () => editor.chain().focus();
|
|
2261
|
-
return /* @__PURE__ */ jsxs6(
|
|
2262
|
-
BubbleMenu,
|
|
2263
|
-
{
|
|
2264
|
-
editor,
|
|
2265
|
-
className: "june-doc__bubble",
|
|
2266
|
-
options: { placement: "top", offset: 8 },
|
|
2267
|
-
shouldShow: ({ editor: ed, state }) => {
|
|
2268
|
-
const { empty } = state.selection;
|
|
2269
|
-
if (empty || !ed.isEditable) return false;
|
|
2270
|
-
if (ed.isActive("image") || ed.isActive("pageBreak") || ed.isActive("codeBlock")) return false;
|
|
2271
|
-
return state.doc.textBetween(state.selection.from, state.selection.to).trim().length > 0;
|
|
2272
|
-
},
|
|
2273
|
-
children: [
|
|
2274
|
-
/* @__PURE__ */ jsx8(Btn, { label: "Bold", icon: "bold", toggle: true, active: s.bold, onClick: () => run().toggleBold().run() }),
|
|
2275
|
-
/* @__PURE__ */ jsx8(Btn, { label: "Italic", icon: "italic", toggle: true, active: s.italic, onClick: () => run().toggleItalic().run() }),
|
|
2276
|
-
/* @__PURE__ */ jsx8(Btn, { label: "Underline", icon: "underline", toggle: true, active: s.underline, onClick: () => run().toggleUnderline().run() }),
|
|
2277
|
-
/* @__PURE__ */ jsx8(Btn, { label: "Strikethrough", icon: "strike", toggle: true, active: s.strike, onClick: () => run().toggleStrike().run() }),
|
|
2278
|
-
/* @__PURE__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
|
|
2279
|
-
/* @__PURE__ */ jsx8(Dropdown, { trigger: ({ open, toggle }) => /* @__PURE__ */ jsx8(Btn, { label: "Link", icon: "link", toggle: true, active: s.link || open, onClick: toggle }), children: (close) => /* @__PURE__ */ jsx8(LinkPanel, { editor, href: s.linkHref, isLink: s.link, close }) }),
|
|
2280
|
-
/* @__PURE__ */ jsx8(
|
|
2281
|
-
ColorPicker,
|
|
2282
|
-
{
|
|
2283
|
-
label: "Text color",
|
|
2284
|
-
icon: "palette",
|
|
2285
|
-
colors: TEXT_COLORS,
|
|
2286
|
-
current: s.color,
|
|
2287
|
-
resetLabel: "Default color",
|
|
2288
|
-
onPick: (c) => run().setColor(c).run(),
|
|
2289
|
-
onReset: () => run().unsetColor().run()
|
|
2290
|
-
}
|
|
2291
|
-
),
|
|
2292
|
-
/* @__PURE__ */ jsx8(
|
|
2293
|
-
ColorPicker,
|
|
2294
|
-
{
|
|
2295
|
-
label: "Highlight",
|
|
2296
|
-
icon: "highlighter",
|
|
2297
|
-
colors: HIGHLIGHT_COLORS,
|
|
2298
|
-
current: s.highlight,
|
|
2299
|
-
resetLabel: "No highlight",
|
|
2300
|
-
onPick: (c) => run().setHighlight({ color: c }).run(),
|
|
2301
|
-
onReset: () => run().unsetHighlight().run()
|
|
2302
|
-
}
|
|
2303
|
-
),
|
|
2304
|
-
/* @__PURE__ */ jsx8("span", { className: "june-doc__bubble-sep", "aria-hidden": "true" }),
|
|
2305
|
-
/* @__PURE__ */ jsx8(Btn, { label: "Clear formatting", icon: "eraser", onClick: () => run().unsetAllMarks().run() })
|
|
2306
|
-
]
|
|
2307
|
-
}
|
|
2308
|
-
);
|
|
2309
|
-
}
|
|
2310
|
-
|
|
2311
|
-
// src/components/document-editor/document-content.tsx
|
|
2312
|
-
import { EditorContent } from "@tiptap/react";
|
|
2313
|
-
import { useEffect as useEffect4, useLayoutEffect, useRef as useRef5, useState as useState4 } from "react";
|
|
2314
|
-
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
2315
|
-
var PAGE_WIDTH = 794;
|
|
2316
|
-
var PAGE_HEIGHT = 1123;
|
|
2317
|
-
var PAGE_GAP = 28;
|
|
2318
|
-
var CANVAS_PAD_X = 24;
|
|
2319
|
-
var useIsoLayoutEffect = typeof window === "undefined" ? useEffect4 : useLayoutEffect;
|
|
2320
|
-
function geometry(width) {
|
|
2321
|
-
const ratio = width / PAGE_WIDTH;
|
|
2322
|
-
const height = Math.round(PAGE_HEIGHT * ratio);
|
|
2323
|
-
const padX = Math.round(Math.min(96, Math.max(20, width * 0.12)));
|
|
2324
|
-
const padY = Math.round(Math.min(96, Math.max(36, 96 * ratio)));
|
|
2325
|
-
return { width, height, padX, padY };
|
|
2326
|
-
}
|
|
2327
|
-
function DocumentContent({ editor, layout = "page", zoom = 1, showMarks = false, onMetrics }) {
|
|
2328
|
-
const canvas = useRef5(null);
|
|
2329
|
-
const sheet = useRef5(null);
|
|
2330
|
-
const [avail, setAvail] = useState4(PAGE_WIDTH);
|
|
2331
|
-
const [sheetH, setSheetH] = useState4(0);
|
|
2332
|
-
const [pages, setPages] = useState4(1);
|
|
2333
|
-
const metricsRef = useRef5(onMetrics);
|
|
2334
|
-
metricsRef.current = onMetrics;
|
|
2335
|
-
const last = useRef5({ page: 0, pages: 0 });
|
|
2336
|
-
const paged = layout === "page";
|
|
2337
|
-
const width = paged ? Math.max(260, Math.min(PAGE_WIDTH, Math.floor(avail / zoom))) : Math.max(260, Math.floor(avail / zoom));
|
|
2338
|
-
const g = geometry(width);
|
|
2339
|
-
const stride = g.height + PAGE_GAP;
|
|
2340
|
-
useIsoLayoutEffect(() => {
|
|
2341
|
-
const c = canvas.current;
|
|
2342
|
-
if (!c) return;
|
|
2343
|
-
const read = () => {
|
|
2344
|
-
const cs = typeof getComputedStyle === "function" ? getComputedStyle(c) : null;
|
|
2345
|
-
const padX = cs ? (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0) : CANVAS_PAD_X * 2;
|
|
2346
|
-
const w = c.clientWidth - padX;
|
|
2347
|
-
if (w > 0) setAvail(w);
|
|
2348
|
-
};
|
|
2349
|
-
read();
|
|
2350
|
-
if (typeof ResizeObserver === "undefined") return;
|
|
2351
|
-
const ro = new ResizeObserver(read);
|
|
2352
|
-
ro.observe(c);
|
|
2353
|
-
return () => ro.disconnect();
|
|
2354
|
-
}, []);
|
|
2355
|
-
useEffect4(() => {
|
|
2356
|
-
if (!editor) return;
|
|
2357
|
-
setPaginationConfig(editor, {
|
|
2358
|
-
enabled: paged,
|
|
2359
|
-
pageHeight: g.height,
|
|
2360
|
-
gap: PAGE_GAP,
|
|
2361
|
-
padTop: g.padY,
|
|
2362
|
-
padBottom: g.padY
|
|
2363
|
-
});
|
|
2364
|
-
}, [editor, paged, g.height, g.padY, width]);
|
|
2365
|
-
useEffect4(() => {
|
|
2366
|
-
const c = canvas.current;
|
|
2367
|
-
const s = sheet.current;
|
|
2368
|
-
if (!editor || !c || !s) return;
|
|
2369
|
-
const prose = editor.view.dom;
|
|
2370
|
-
const report = () => {
|
|
2371
|
-
const total = paged ? getPageCount(editor) : 1;
|
|
2372
|
-
setPages(total);
|
|
2373
|
-
setSheetH(s.offsetHeight);
|
|
2374
|
-
const cRect = c.getBoundingClientRect();
|
|
2375
|
-
const sRect = s.getBoundingClientRect();
|
|
2376
|
-
const y = (cRect.top + c.clientHeight * 0.35 - sRect.top) / zoom;
|
|
2377
|
-
const page = paged ? Math.min(total, Math.max(1, Math.floor(y / stride) + 1)) : 1;
|
|
2378
|
-
if (last.current.page !== page || last.current.pages !== total) {
|
|
2379
|
-
last.current = { page, pages: total };
|
|
2380
|
-
metricsRef.current?.({ page, pages: total });
|
|
2381
|
-
}
|
|
2382
|
-
};
|
|
2383
|
-
report();
|
|
2384
|
-
editor.on("transaction", report);
|
|
2385
|
-
c.addEventListener("scroll", report, { passive: true });
|
|
2386
|
-
const onLoad = () => remeasurePagination(editor);
|
|
2387
|
-
prose.addEventListener("load", onLoad, true);
|
|
2388
|
-
const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(report) : null;
|
|
2389
|
-
ro?.observe(s);
|
|
2390
|
-
return () => {
|
|
2391
|
-
editor.off("transaction", report);
|
|
2392
|
-
c.removeEventListener("scroll", report);
|
|
2393
|
-
prose.removeEventListener("load", onLoad, true);
|
|
2394
|
-
ro?.disconnect();
|
|
2395
|
-
};
|
|
2396
|
-
}, [editor, paged, zoom, stride]);
|
|
2397
|
-
const minHeight = paged ? pages * g.height + (pages - 1) * PAGE_GAP : void 0;
|
|
2398
|
-
const sheetStyle = {
|
|
2399
|
-
width,
|
|
2400
|
-
minHeight,
|
|
2401
|
-
transform: zoom === 1 ? void 0 : `scale(${zoom})`,
|
|
2402
|
-
"--jd-pad-x": `${g.padX}px`,
|
|
2403
|
-
"--jd-pad-y": `${g.padY}px`
|
|
2404
|
-
};
|
|
2405
|
-
const zoomerStyle = {
|
|
2406
|
-
width: width * zoom,
|
|
2407
|
-
height: zoom === 1 ? void 0 : Math.max(sheetH, minHeight ?? 0) * zoom
|
|
2408
|
-
};
|
|
2409
|
-
return /* @__PURE__ */ jsx9("div", { ref: canvas, className: "june-doc__content june-doc__canvas", "data-layout": layout, "data-marks": showMarks || void 0, children: /* @__PURE__ */ jsx9("div", { className: "june-doc__zoomer", style: zoomerStyle, children: /* @__PURE__ */ jsxs7("div", { ref: sheet, className: "june-doc__sheet", style: sheetStyle, children: [
|
|
2410
|
-
paged ? /* @__PURE__ */ jsx9("div", { className: "june-doc__pages", "aria-hidden": "true", children: Array.from({ length: pages }, (_, i) => /* @__PURE__ */ jsx9("div", { className: "june-doc__page", style: { top: i * stride, height: g.height }, children: /* @__PURE__ */ jsxs7("span", { className: "june-doc__page-num", children: [
|
|
2411
|
-
i + 1,
|
|
2412
|
-
" / ",
|
|
2413
|
-
pages
|
|
2414
|
-
] }) }, i)) }) : null,
|
|
2415
|
-
/* @__PURE__ */ jsx9(EditorContent, { editor })
|
|
2416
|
-
] }) }) });
|
|
2417
|
-
}
|
|
2418
|
-
|
|
2419
|
-
// src/components/document-editor/document-findbar.tsx
|
|
2420
|
-
import { useEditorState as useEditorState3 } from "@tiptap/react";
|
|
2421
|
-
import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
|
|
2422
|
-
import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2423
|
-
function DocumentFindBar({ editor, editable, onClose, onNotice }) {
|
|
2424
|
-
const [term, setTerm] = useState5(() => {
|
|
2425
|
-
const { from, to, empty } = editor.state.selection;
|
|
2426
|
-
return empty ? "" : editor.state.doc.textBetween(from, to, " ").slice(0, 100);
|
|
2427
|
-
});
|
|
2428
|
-
const [replacement, setReplacement] = useState5("");
|
|
2429
|
-
const [caseSensitive, setCaseSensitive] = useState5(false);
|
|
2430
|
-
const input = useRef6(null);
|
|
2431
|
-
const info = useEditorState3({
|
|
2432
|
-
editor,
|
|
2433
|
-
selector: ({ editor: ed }) => {
|
|
2434
|
-
const s = getSearchState(ed);
|
|
2435
|
-
return { count: s?.matches.length ?? 0, current: s?.current ?? -1 };
|
|
2436
|
-
}
|
|
2437
|
-
});
|
|
2438
|
-
useEffect5(() => {
|
|
2439
|
-
input.current?.focus();
|
|
2440
|
-
input.current?.select();
|
|
2441
|
-
}, []);
|
|
2442
|
-
useEffect5(() => {
|
|
2443
|
-
setSearch(editor, { term, caseSensitive, current: 0 });
|
|
2444
|
-
}, [editor, term, caseSensitive]);
|
|
2445
|
-
useEffect5(() => () => {
|
|
2446
|
-
if (!editor.isDestroyed) setSearch(editor, { term: "" });
|
|
2447
|
-
}, [editor]);
|
|
2448
|
-
const count = info?.count ?? 0;
|
|
2449
|
-
const current = info?.current ?? -1;
|
|
2450
|
-
return /* @__PURE__ */ jsxs8(
|
|
2451
|
-
"div",
|
|
2452
|
-
{
|
|
2453
|
-
className: "june-doc__findbar",
|
|
2454
|
-
role: "search",
|
|
2455
|
-
onKeyDown: (e) => {
|
|
2456
|
-
if (e.key === "Escape") {
|
|
2457
|
-
e.stopPropagation();
|
|
2458
|
-
onClose();
|
|
2459
|
-
editor.commands.focus();
|
|
2460
|
-
}
|
|
2461
|
-
},
|
|
2462
|
-
children: [
|
|
2463
|
-
/* @__PURE__ */ jsxs8("div", { className: "june-doc__find-field", children: [
|
|
2464
|
-
/* @__PURE__ */ jsx10(Icon, { name: "search", size: 14 }),
|
|
2465
|
-
/* @__PURE__ */ jsx10(
|
|
2466
|
-
"input",
|
|
2467
|
-
{
|
|
2468
|
-
ref: input,
|
|
2469
|
-
className: "june-doc__find-input",
|
|
2470
|
-
"aria-label": "Find in document",
|
|
2471
|
-
placeholder: "Find in document",
|
|
2472
|
-
value: term,
|
|
2473
|
-
onChange: (e) => setTerm(e.target.value),
|
|
2474
|
-
onKeyDown: (e) => {
|
|
2475
|
-
if (e.key === "Enter") {
|
|
2476
|
-
e.preventDefault();
|
|
2477
|
-
gotoMatch(editor, e.shiftKey ? -1 : 1);
|
|
2478
|
-
}
|
|
2479
|
-
}
|
|
2480
|
-
}
|
|
2481
|
-
),
|
|
2482
|
-
/* @__PURE__ */ jsx10("span", { className: "june-doc__find-count", "aria-live": "polite", children: term ? count ? `${current + 1} of ${count}` : "No results" : "" })
|
|
2483
|
-
] }),
|
|
2484
|
-
/* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Previous match", title: "Previous (Shift+Enter)", disabled: !count, onClick: () => gotoMatch(editor, -1), children: /* @__PURE__ */ jsx10(Icon, { name: "chevronUp" }) }),
|
|
2485
|
-
/* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon", "aria-label": "Next match", title: "Next (Enter)", disabled: !count, onClick: () => gotoMatch(editor, 1), children: /* @__PURE__ */ jsx10(Icon, { name: "chevronDown" }) }),
|
|
2486
|
-
/* @__PURE__ */ jsx10(
|
|
2487
|
-
"button",
|
|
2488
|
-
{
|
|
2489
|
-
type: "button",
|
|
2490
|
-
className: "june-doc__btn june-doc__btn--icon june-doc__btn--case",
|
|
2491
|
-
"aria-label": "Match case",
|
|
2492
|
-
title: "Match case",
|
|
2493
|
-
"aria-pressed": caseSensitive,
|
|
2494
|
-
"data-active": caseSensitive || void 0,
|
|
2495
|
-
onClick: () => setCaseSensitive((v) => !v),
|
|
2496
|
-
children: "Aa"
|
|
2497
|
-
}
|
|
2498
|
-
),
|
|
2499
|
-
editable ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
2500
|
-
/* @__PURE__ */ jsx10("span", { className: "june-doc__find-sep", "aria-hidden": "true" }),
|
|
2501
|
-
/* @__PURE__ */ jsx10(
|
|
2502
|
-
"input",
|
|
2503
|
-
{
|
|
2504
|
-
className: "june-doc__input june-doc__replace-input",
|
|
2505
|
-
"aria-label": "Replace with",
|
|
2506
|
-
placeholder: "Replace with",
|
|
2507
|
-
value: replacement,
|
|
2508
|
-
onChange: (e) => setReplacement(e.target.value),
|
|
2509
|
-
onKeyDown: (e) => {
|
|
2510
|
-
if (e.key === "Enter") {
|
|
2511
|
-
e.preventDefault();
|
|
2512
|
-
replaceCurrent(editor, replacement);
|
|
2513
|
-
}
|
|
2514
|
-
}
|
|
2515
|
-
}
|
|
2516
|
-
),
|
|
2517
|
-
/* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn", disabled: !count, onClick: () => replaceCurrent(editor, replacement), children: "Replace" }),
|
|
2518
|
-
/* @__PURE__ */ jsx10(
|
|
2519
|
-
"button",
|
|
2520
|
-
{
|
|
2521
|
-
type: "button",
|
|
2522
|
-
className: "june-doc__btn",
|
|
2523
|
-
disabled: !count,
|
|
2524
|
-
onClick: () => {
|
|
2525
|
-
const n = replaceAll(editor, replacement);
|
|
2526
|
-
onNotice(`Replaced ${n} ${n === 1 ? "match" : "matches"}`);
|
|
2527
|
-
},
|
|
2528
|
-
children: "Replace all"
|
|
2529
|
-
}
|
|
2530
|
-
)
|
|
2531
|
-
] }) : null,
|
|
2532
|
-
/* @__PURE__ */ jsx10("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost june-doc__find-close", "aria-label": "Close find", onClick: onClose, children: /* @__PURE__ */ jsx10(Icon, { name: "close" }) })
|
|
2533
|
-
]
|
|
2534
|
-
}
|
|
2535
|
-
);
|
|
2536
|
-
}
|
|
2537
|
-
|
|
2538
|
-
// src/components/document-editor/document-title.tsx
|
|
2539
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
2540
|
-
function DocumentTitle({ value, disabled, onChange }) {
|
|
2541
|
-
return /* @__PURE__ */ jsx11(
|
|
2542
|
-
"input",
|
|
2543
|
-
{
|
|
2544
|
-
className: "june-doc__title",
|
|
2545
|
-
"aria-label": "Document title",
|
|
2546
|
-
value,
|
|
2547
|
-
disabled,
|
|
2548
|
-
placeholder: "Untitled document",
|
|
2549
|
-
onChange: (e) => onChange(e.target.value)
|
|
2550
|
-
}
|
|
2551
|
-
);
|
|
2552
|
-
}
|
|
2553
|
-
|
|
2554
|
-
// src/components/document-editor/document-header.tsx
|
|
2555
|
-
import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2556
|
-
var FORMATS = {
|
|
2557
|
-
docx: { label: "Word document", hint: ".docx", icon: "file" },
|
|
2558
|
-
pdf: { label: "PDF", hint: "Print / Save as PDF", icon: "file" },
|
|
2559
|
-
html: { label: "Web page", hint: ".html", icon: "code" },
|
|
2560
|
-
markdown: { label: "Markdown", hint: ".md", icon: "file" },
|
|
2561
|
-
txt: { label: "Plain text", hint: ".txt", icon: "file" }
|
|
2562
|
-
};
|
|
2563
|
-
function DocumentHeader(props) {
|
|
2564
|
-
const { title, editable, isDraft, fullscreen, onToggleFullscreen, onTitle, exportFormats, canSave, showSave = canSave, saveState, onExport, onCopy, onSave } = props;
|
|
2565
|
-
return /* @__PURE__ */ jsxs9("div", { className: "june-doc__header", children: [
|
|
2566
|
-
fullscreen ? /* @__PURE__ */ jsx12("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Close full screen", title: "Close (Esc)", onClick: onToggleFullscreen, children: /* @__PURE__ */ jsx12(Icon, { name: "close", size: 18 }) }) : /* @__PURE__ */ jsx12("span", { className: "june-doc__doc-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(Icon, { name: "file", size: 16 }) }),
|
|
2567
|
-
/* @__PURE__ */ jsx12(DocumentTitle, { value: title, disabled: !editable, onChange: onTitle }),
|
|
2568
|
-
isDraft ? /* @__PURE__ */ jsxs9("span", { className: "june-doc__badge", children: [
|
|
2569
|
-
/* @__PURE__ */ jsx12(Icon, { name: "sparkles", size: 12 }),
|
|
2570
|
-
"AI draft"
|
|
2571
|
-
] }) : null,
|
|
2572
|
-
/* @__PURE__ */ jsxs9("div", { className: "june-doc__header-actions", children: [
|
|
2573
|
-
showSave ? /* @__PURE__ */ jsxs9(
|
|
2574
|
-
"button",
|
|
2575
|
-
{
|
|
2576
|
-
type: "button",
|
|
2577
|
-
className: "june-doc__btn june-doc__btn--outline june-doc__save",
|
|
2578
|
-
"data-state": saveState,
|
|
2579
|
-
"aria-label": "Save",
|
|
2580
|
-
title: "Save (Ctrl+S)",
|
|
2581
|
-
disabled: saveState === "saving" || saveState === "saved" || saveState === "idle",
|
|
2582
|
-
onClick: onSave,
|
|
2583
|
-
children: [
|
|
2584
|
-
/* @__PURE__ */ jsx12(Icon, { name: saveState === "saved" ? "check" : "save" }),
|
|
2585
|
-
/* @__PURE__ */ jsx12("span", { children: saveState === "saving" ? "Saving\u2026" : saveState === "saved" ? "Saved" : "Save" })
|
|
2586
|
-
]
|
|
2587
|
-
}
|
|
2588
|
-
) : null,
|
|
2589
|
-
/* @__PURE__ */ jsx12(
|
|
2590
|
-
Dropdown,
|
|
2591
|
-
{
|
|
2592
|
-
align: "end",
|
|
2593
|
-
className: "june-doc__menu",
|
|
2594
|
-
trigger: ({ open, toggle }) => /* @__PURE__ */ jsxs9(
|
|
2595
|
-
"button",
|
|
2596
|
-
{
|
|
2597
|
-
type: "button",
|
|
2598
|
-
className: "june-doc__btn june-doc__btn--solid",
|
|
2599
|
-
"aria-label": "Download",
|
|
2600
|
-
"aria-haspopup": "menu",
|
|
2601
|
-
"aria-expanded": open,
|
|
2602
|
-
onClick: toggle,
|
|
2603
|
-
children: [
|
|
2604
|
-
/* @__PURE__ */ jsx12("span", { children: "Download" }),
|
|
2605
|
-
/* @__PURE__ */ jsx12(Icon, { name: "chevronDown", size: 14 })
|
|
2606
|
-
]
|
|
2607
|
-
}
|
|
2608
|
-
),
|
|
2609
|
-
children: (close) => /* @__PURE__ */ jsxs9("div", { role: "menu", "aria-label": "Download options", children: [
|
|
2610
|
-
exportFormats.map((f) => {
|
|
2611
|
-
const meta = FORMATS[f] ?? { label: f.toUpperCase(), hint: "", icon: "file" };
|
|
2612
|
-
return /* @__PURE__ */ jsxs9(
|
|
2613
|
-
"button",
|
|
2614
|
-
{
|
|
2615
|
-
type: "button",
|
|
2616
|
-
role: "menuitem",
|
|
2617
|
-
className: "june-doc__menu-item",
|
|
2618
|
-
onClick: () => {
|
|
2619
|
-
close();
|
|
2620
|
-
onExport(f);
|
|
2621
|
-
},
|
|
2622
|
-
children: [
|
|
2623
|
-
/* @__PURE__ */ jsx12(Icon, { name: meta.icon }),
|
|
2624
|
-
/* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: meta.label }),
|
|
2625
|
-
/* @__PURE__ */ jsx12("span", { className: "june-doc__menu-hint", children: meta.hint })
|
|
2626
|
-
]
|
|
2627
|
-
},
|
|
2628
|
-
f
|
|
2629
|
-
);
|
|
2630
|
-
}),
|
|
2631
|
-
exportFormats.length ? /* @__PURE__ */ jsx12("div", { className: "june-doc__menu-sep", role: "separator" }) : null,
|
|
2632
|
-
/* @__PURE__ */ jsxs9(
|
|
2633
|
-
"button",
|
|
2634
|
-
{
|
|
2635
|
-
type: "button",
|
|
2636
|
-
role: "menuitem",
|
|
2637
|
-
className: "june-doc__menu-item",
|
|
2638
|
-
"aria-label": "Copy document",
|
|
2639
|
-
onClick: () => {
|
|
2640
|
-
close();
|
|
2641
|
-
onCopy();
|
|
2642
|
-
},
|
|
2643
|
-
children: [
|
|
2644
|
-
/* @__PURE__ */ jsx12(Icon, { name: "copy" }),
|
|
2645
|
-
/* @__PURE__ */ jsx12("span", { className: "june-doc__menu-label", children: "Copy to clipboard" })
|
|
2646
|
-
]
|
|
2647
|
-
}
|
|
2648
|
-
)
|
|
2649
|
-
] })
|
|
2650
|
-
}
|
|
2651
|
-
),
|
|
2652
|
-
/* @__PURE__ */ jsx12(
|
|
2653
|
-
"button",
|
|
2654
|
-
{
|
|
2655
|
-
type: "button",
|
|
2656
|
-
className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost",
|
|
2657
|
-
"aria-label": fullscreen ? "Exit full screen" : "Open full screen",
|
|
2658
|
-
title: fullscreen ? "Exit full screen" : "Open full screen",
|
|
2659
|
-
"aria-pressed": fullscreen,
|
|
2660
|
-
onClick: onToggleFullscreen,
|
|
2661
|
-
children: /* @__PURE__ */ jsx12(Icon, { name: "maximize" })
|
|
2662
|
-
}
|
|
2663
|
-
)
|
|
2664
|
-
] })
|
|
2665
|
-
] });
|
|
2666
|
-
}
|
|
2667
|
-
|
|
2668
|
-
// src/components/document-editor/document-export.ts
|
|
2669
|
-
var escapeHtml = (value) => value.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
2670
|
-
var PRINT_CSS = 'body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:#111827;max-width:780px;margin:32px auto;padding:0 20px}h1,h2,h3{line-height:1.25}table{border-collapse:collapse;width:100%}th,td{border:1px solid #d1d5db;padding:6px 10px;text-align:left}blockquote{border-left:4px solid #d1d5db;margin:1em 0;padding-left:1em;color:#4b5563}pre,code{font-family:ui-monospace,Menlo,monospace;background:#f3f4f6}pre{padding:12px;overflow:auto}img{max-width:100%;height:auto}mark{padding:0 .1em;border-radius:2px}div[data-page-break]{break-after:page;page-break-after:always;height:0}@media screen{div[data-page-break]{border-top:1px dashed #d1d5db;margin:24px 0}}@media print{body{margin:0;max-width:none}}';
|
|
2671
|
-
function buildHtmlDocument(title, bodyHtml) {
|
|
2672
|
-
return `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${escapeHtml(
|
|
2673
|
-
title
|
|
2674
|
-
)}</title><style>${PRINT_CSS}</style></head><body><h1>${escapeHtml(title)}</h1>${bodyHtml}</body></html>`;
|
|
2675
|
-
}
|
|
2676
|
-
var textResult = (text, filename, mimeType) => ({
|
|
2677
|
-
filename,
|
|
2678
|
-
mimeType,
|
|
2679
|
-
text,
|
|
2680
|
-
blob: new Blob([text], { type: `${mimeType};charset=utf-8` })
|
|
2681
|
-
});
|
|
2682
|
-
var exportHtml = async (ctx) => {
|
|
2683
|
-
const { docToHtml: docToHtml2 } = await import("./document-engine-RKD5SLXR.js");
|
|
2684
|
-
return textResult(
|
|
2685
|
-
buildHtmlDocument(ctx.title, docToHtml2(ctx.json)),
|
|
2686
|
-
`${ctx.basename}.html`,
|
|
2687
|
-
"text/html"
|
|
2688
|
-
);
|
|
2689
|
-
};
|
|
2690
|
-
var exportMarkdown = async (ctx) => {
|
|
2691
|
-
const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
|
|
2692
|
-
return textResult(
|
|
2693
|
-
`# ${ctx.title}
|
|
2694
|
-
|
|
2695
|
-
${docToMarkdown2(ctx.json)}
|
|
2696
|
-
`,
|
|
2697
|
-
`${ctx.basename}.md`,
|
|
2698
|
-
"text/markdown"
|
|
2699
|
-
);
|
|
2700
|
-
};
|
|
2701
|
-
var exportTxt = async (ctx) => {
|
|
2702
|
-
const { docToText } = await import("./document-engine-RKD5SLXR.js");
|
|
2703
|
-
return textResult(`${ctx.title}
|
|
2704
|
-
|
|
2705
|
-
${docToText(ctx.json)}
|
|
2706
|
-
`, `${ctx.basename}.txt`, "text/plain");
|
|
2707
|
-
};
|
|
2708
|
-
function toDocxColor(value) {
|
|
2709
|
-
if (typeof value !== "string") return void 0;
|
|
2710
|
-
const v = value.trim();
|
|
2711
|
-
let m = /^#([0-9a-f]{3})$/i.exec(v);
|
|
2712
|
-
if (m) return m[1].split("").map((c) => c + c).join("").toUpperCase();
|
|
2713
|
-
m = /^#([0-9a-f]{6})$/i.exec(v);
|
|
2714
|
-
if (m) return m[1].toUpperCase();
|
|
2715
|
-
m = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i.exec(v);
|
|
2716
|
-
if (m) {
|
|
2717
|
-
return [m[1], m[2], m[3]].map((n) => Math.min(255, Number(n)).toString(16).padStart(2, "0")).join("").toUpperCase();
|
|
2718
|
-
}
|
|
2719
|
-
return void 0;
|
|
2720
|
-
}
|
|
2721
|
-
function toHalfPoints(value) {
|
|
2722
|
-
if (typeof value !== "string") return void 0;
|
|
2723
|
-
const m = /^([\d.]+)\s*(px|pt)?$/i.exec(value.trim());
|
|
2724
|
-
if (!m) return void 0;
|
|
2725
|
-
const n = Number(m[1]);
|
|
2726
|
-
if (!Number.isFinite(n) || n <= 0) return void 0;
|
|
2727
|
-
const pt = m[2]?.toLowerCase() === "pt" ? n : n * 0.75;
|
|
2728
|
-
return Math.round(pt * 2);
|
|
2729
|
-
}
|
|
2730
|
-
function firstFontFamily(value) {
|
|
2731
|
-
if (typeof value !== "string") return void 0;
|
|
2732
|
-
const first = value.split(",")[0]?.trim().replace(/^['"]|['"]$/g, "");
|
|
2733
|
-
return first || void 0;
|
|
2734
|
-
}
|
|
2735
|
-
var ORDERED_REF = "june-ordered";
|
|
2736
|
-
var DOCX_MIME = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
|
|
2737
|
-
function runs(d, node, fmt) {
|
|
2738
|
-
const out = [];
|
|
2739
|
-
for (const child of node.content ?? []) {
|
|
2740
|
-
if (child.type === "hardBreak") {
|
|
2741
|
-
out.push(new d.TextRun({ break: 1 }));
|
|
2742
|
-
continue;
|
|
2743
|
-
}
|
|
2744
|
-
if (child.type !== "text" || !child.text) continue;
|
|
2745
|
-
const marks = child.marks ?? [];
|
|
2746
|
-
const has = (type) => marks.some((m) => m.type === type);
|
|
2747
|
-
const link = marks.find((m) => m.type === "link");
|
|
2748
|
-
const style = marks.find((m) => m.type === "textStyle")?.attrs ?? {};
|
|
2749
|
-
const highlight = marks.find((m) => m.type === "highlight");
|
|
2750
|
-
const fill = highlight ? toDocxColor(highlight.attrs?.color) ?? "FFF59D" : void 0;
|
|
2751
|
-
const run = new d.TextRun({
|
|
2752
|
-
text: child.text,
|
|
2753
|
-
bold: fmt.bold || has("bold") || void 0,
|
|
2754
|
-
italics: has("italic") || void 0,
|
|
2755
|
-
underline: has("underline") || link ? {} : void 0,
|
|
2756
|
-
strike: has("strike") || void 0,
|
|
2757
|
-
superScript: has("superscript") || void 0,
|
|
2758
|
-
subScript: has("subscript") || void 0,
|
|
2759
|
-
font: has("code") ? "Courier New" : firstFontFamily(style.fontFamily),
|
|
2760
|
-
size: toHalfPoints(style.fontSize),
|
|
2761
|
-
color: toDocxColor(style.color) ?? (link ? "0563C1" : void 0),
|
|
2762
|
-
shading: fill ? { type: d.ShadingType.CLEAR, fill, color: "auto" } : void 0
|
|
2763
|
-
});
|
|
2764
|
-
const href = typeof link?.attrs?.href === "string" ? sanitizeHref(link.attrs.href) : null;
|
|
2765
|
-
out.push(href ? new d.ExternalHyperlink({ link: href, children: [run] }) : run);
|
|
2766
|
-
}
|
|
2767
|
-
return out;
|
|
2768
|
-
}
|
|
2769
|
-
function paragraph(d, node, fmt, extra = {}) {
|
|
2770
|
-
const align = node.attrs?.textAlign;
|
|
2771
|
-
return new d.Paragraph({
|
|
2772
|
-
children: runs(d, node, fmt),
|
|
2773
|
-
alignment: align === "center" ? d.AlignmentType.CENTER : align === "right" ? d.AlignmentType.RIGHT : align === "justify" ? d.AlignmentType.JUSTIFIED : void 0,
|
|
2774
|
-
indent: fmt.indent ? { left: fmt.indent } : void 0,
|
|
2775
|
-
border: fmt.quote ? { left: { color: "9CA3AF", space: 8, style: d.BorderStyle.SINGLE, size: 12 } } : void 0,
|
|
2776
|
-
spacing: { after: 120 },
|
|
2777
|
-
...extra
|
|
2778
|
-
});
|
|
2779
|
-
}
|
|
2780
|
-
function list(d, node, fmt, level, state) {
|
|
2781
|
-
const ordered = node.type === "orderedList";
|
|
2782
|
-
const instance = ordered ? ++state.instance : 0;
|
|
2783
|
-
const out = [];
|
|
2784
|
-
for (const item of node.content ?? []) {
|
|
2785
|
-
let first = true;
|
|
2786
|
-
for (const child of item.content ?? []) {
|
|
2787
|
-
if (child.type === "bulletList" || child.type === "orderedList") {
|
|
2788
|
-
out.push(...list(d, child, fmt, level + 1, state));
|
|
2789
|
-
} else if (child.type === "paragraph" && first) {
|
|
2790
|
-
first = false;
|
|
2791
|
-
const lvl = Math.min(level, 2);
|
|
2792
|
-
out.push(
|
|
2793
|
-
paragraph(
|
|
2794
|
-
d,
|
|
2795
|
-
child,
|
|
2796
|
-
fmt,
|
|
2797
|
-
ordered ? { numbering: { reference: ORDERED_REF, level: lvl, instance } } : { bullet: { level: lvl } }
|
|
2798
|
-
)
|
|
2799
|
-
);
|
|
2800
|
-
} else {
|
|
2801
|
-
out.push(...blocks(d, [child], { ...fmt, indent: (fmt.indent ?? 0) + 720 * (level + 1) }, state));
|
|
2802
|
-
}
|
|
2803
|
-
}
|
|
2804
|
-
}
|
|
2805
|
-
return out;
|
|
2806
|
-
}
|
|
2807
|
-
function code(d, node) {
|
|
2808
|
-
const lines = (node.content ?? []).map((c) => c.text ?? "").join("").split("\n");
|
|
2809
|
-
return new d.Paragraph({
|
|
2810
|
-
children: lines.map((line, i) => new d.TextRun({ text: line, font: "Courier New", break: i ? 1 : void 0 })),
|
|
2811
|
-
spacing: { after: 120 },
|
|
2812
|
-
shading: { type: d.ShadingType.CLEAR, fill: "F3F4F6" }
|
|
2813
|
-
});
|
|
2814
|
-
}
|
|
2815
|
-
function table(d, node, state) {
|
|
2816
|
-
const rows = (node.content ?? []).map(
|
|
2817
|
-
(row) => new d.TableRow({
|
|
2818
|
-
children: (row.content ?? []).map((cell) => {
|
|
2819
|
-
const header = cell.type === "tableHeader";
|
|
2820
|
-
const children = blocks(d, cell.content, { bold: header }, state);
|
|
2821
|
-
return new d.TableCell({
|
|
2822
|
-
children: children.length ? children : [new d.Paragraph("")],
|
|
2823
|
-
shading: header ? { type: d.ShadingType.CLEAR, fill: "F3F4F6" } : void 0
|
|
2824
|
-
});
|
|
2825
|
-
})
|
|
2826
|
-
})
|
|
2827
|
-
);
|
|
2828
|
-
if (rows.length === 0) return new d.Paragraph("");
|
|
2829
|
-
return new d.Table({ rows, width: { size: 100, type: d.WidthType.PERCENTAGE } });
|
|
2830
|
-
}
|
|
2831
|
-
function image(d, node, state) {
|
|
2832
|
-
const src = typeof node.attrs?.src === "string" ? node.attrs.src : "";
|
|
2833
|
-
const alt = typeof node.attrs?.alt === "string" ? node.attrs.alt : "";
|
|
2834
|
-
const img = state.images.get(src);
|
|
2835
|
-
if (img) {
|
|
2836
|
-
return [
|
|
2837
|
-
new d.Paragraph({
|
|
2838
|
-
children: [
|
|
2839
|
-
new d.ImageRun({
|
|
2840
|
-
type: img.type,
|
|
2841
|
-
data: img.data,
|
|
2842
|
-
transformation: { width: img.width, height: img.height },
|
|
2843
|
-
altText: alt ? { name: alt, description: alt, title: alt } : void 0
|
|
2844
|
-
})
|
|
2845
|
-
],
|
|
2846
|
-
spacing: { after: 120 }
|
|
2847
|
-
})
|
|
2848
|
-
];
|
|
2849
|
-
}
|
|
2850
|
-
const href = src && !src.startsWith("data:") ? sanitizeHref(src) : null;
|
|
2851
|
-
if (!href) return [];
|
|
2852
|
-
return [
|
|
2853
|
-
new d.Paragraph({
|
|
2854
|
-
children: [
|
|
2855
|
-
new d.ExternalHyperlink({
|
|
2856
|
-
link: href,
|
|
2857
|
-
children: [new d.TextRun({ text: alt || href, color: "0563C1", underline: {} })]
|
|
2858
|
-
})
|
|
2859
|
-
]
|
|
2860
|
-
})
|
|
2861
|
-
];
|
|
2862
|
-
}
|
|
2863
|
-
function collectImages(nodes, out) {
|
|
2864
|
-
for (const node of nodes ?? []) {
|
|
2865
|
-
const src = node.attrs?.src;
|
|
2866
|
-
if (node.type === "image" && typeof src === "string" && src && !out.has(src)) out.set(src, node.attrs);
|
|
2867
|
-
if (node.content) collectImages(node.content, out);
|
|
2868
|
-
}
|
|
2869
|
-
return out;
|
|
2870
|
-
}
|
|
2871
|
-
var IMAGE_TYPES = {
|
|
2872
|
-
"image/png": "png",
|
|
2873
|
-
"image/jpeg": "jpg",
|
|
2874
|
-
"image/jpg": "jpg",
|
|
2875
|
-
"image/gif": "gif",
|
|
2876
|
-
"image/bmp": "bmp"
|
|
2877
|
-
};
|
|
2878
|
-
var MAX_IMAGE_WIDTH = 600;
|
|
2879
|
-
function naturalSize(blob) {
|
|
2880
|
-
const fallback = { width: 400, height: 300 };
|
|
2881
|
-
return new Promise((resolve) => {
|
|
2882
|
-
if (typeof Image === "undefined" || typeof URL.createObjectURL !== "function") return resolve(fallback);
|
|
2883
|
-
const url = URL.createObjectURL(blob);
|
|
2884
|
-
const img = new Image();
|
|
2885
|
-
const done = (size) => {
|
|
2886
|
-
URL.revokeObjectURL(url);
|
|
2887
|
-
resolve(size);
|
|
2888
|
-
};
|
|
2889
|
-
img.onload = () => done({ width: img.naturalWidth || 400, height: img.naturalHeight || 300 });
|
|
2890
|
-
img.onerror = () => done(fallback);
|
|
2891
|
-
img.src = url;
|
|
2892
|
-
});
|
|
2893
|
-
}
|
|
2894
|
-
async function loadImage(src, attrs) {
|
|
2895
|
-
try {
|
|
2896
|
-
const res = await fetch(src);
|
|
2897
|
-
if (!res.ok) return null;
|
|
2898
|
-
const blob = await res.blob();
|
|
2899
|
-
const type = IMAGE_TYPES[blob.type.toLowerCase()];
|
|
2900
|
-
if (!type) return null;
|
|
2901
|
-
const natural = await naturalSize(blob);
|
|
2902
|
-
let width = Number(attrs?.width) || natural.width;
|
|
2903
|
-
let height = Number(attrs?.height) || natural.height * width / natural.width;
|
|
2904
|
-
if (width > MAX_IMAGE_WIDTH) {
|
|
2905
|
-
height = height * MAX_IMAGE_WIDTH / width;
|
|
2906
|
-
width = MAX_IMAGE_WIDTH;
|
|
2907
|
-
}
|
|
2908
|
-
return { data: new Uint8Array(await blob.arrayBuffer()), type, width: Math.round(width), height: Math.round(height) };
|
|
2909
|
-
} catch {
|
|
2910
|
-
return null;
|
|
2911
|
-
}
|
|
2912
|
-
}
|
|
2913
|
-
async function resolveImages(doc) {
|
|
2914
|
-
const map = /* @__PURE__ */ new Map();
|
|
2915
|
-
if (typeof fetch !== "function") return map;
|
|
2916
|
-
const found = collectImages(doc.content, /* @__PURE__ */ new Map());
|
|
2917
|
-
await Promise.all(
|
|
2918
|
-
[...found].map(async ([src, attrs]) => {
|
|
2919
|
-
const info = await loadImage(src, attrs);
|
|
2920
|
-
if (info) map.set(src, info);
|
|
2921
|
-
})
|
|
2922
|
-
);
|
|
2923
|
-
return map;
|
|
2924
|
-
}
|
|
2925
|
-
function blocks(d, nodes, fmt, state) {
|
|
2926
|
-
const headings = [d.HeadingLevel.HEADING_1, d.HeadingLevel.HEADING_2, d.HeadingLevel.HEADING_3];
|
|
2927
|
-
const out = [];
|
|
2928
|
-
for (const node of nodes ?? []) {
|
|
2929
|
-
switch (node.type) {
|
|
2930
|
-
case "paragraph":
|
|
2931
|
-
out.push(paragraph(d, node, fmt));
|
|
2932
|
-
break;
|
|
2933
|
-
case "heading": {
|
|
2934
|
-
const level = Math.min(Math.max(Number(node.attrs?.level) || 1, 1), 3);
|
|
2935
|
-
out.push(paragraph(d, node, fmt, { heading: headings[level - 1] }));
|
|
2936
|
-
break;
|
|
2937
|
-
}
|
|
2938
|
-
case "bulletList":
|
|
2939
|
-
case "orderedList":
|
|
2940
|
-
out.push(...list(d, node, fmt, 0, state));
|
|
2941
|
-
break;
|
|
2942
|
-
case "blockquote":
|
|
2943
|
-
out.push(...blocks(d, node.content, { ...fmt, quote: true, indent: (fmt.indent ?? 0) + 360 }, state));
|
|
2944
|
-
break;
|
|
2945
|
-
case "codeBlock":
|
|
2946
|
-
out.push(code(d, node));
|
|
2947
|
-
break;
|
|
2948
|
-
case "horizontalRule":
|
|
2949
|
-
out.push(
|
|
2950
|
-
new d.Paragraph({
|
|
2951
|
-
border: { bottom: { color: "9CA3AF", space: 1, style: d.BorderStyle.SINGLE, size: 6 } },
|
|
2952
|
-
spacing: { after: 120 }
|
|
2953
|
-
})
|
|
2954
|
-
);
|
|
2955
|
-
break;
|
|
2956
|
-
case "table":
|
|
2957
|
-
out.push(table(d, node, state));
|
|
2958
|
-
break;
|
|
2959
|
-
case "pageBreak":
|
|
2960
|
-
out.push(new d.Paragraph({ children: [new d.PageBreak()] }));
|
|
2961
|
-
break;
|
|
2962
|
-
case "image":
|
|
2963
|
-
out.push(...image(d, node, state));
|
|
2964
|
-
break;
|
|
2965
|
-
default:
|
|
2966
|
-
if (node.content) out.push(...blocks(d, node.content, fmt, state));
|
|
2967
|
-
}
|
|
2968
|
-
}
|
|
2969
|
-
return out;
|
|
2970
|
-
}
|
|
2971
|
-
var exportDocx = async (ctx) => {
|
|
2972
|
-
const d = await import("docx");
|
|
2973
|
-
const state = { instance: 0, images: await resolveImages(ctx.json) };
|
|
2974
|
-
const children = [
|
|
2975
|
-
new d.Paragraph({ text: ctx.title, heading: d.HeadingLevel.TITLE }),
|
|
2976
|
-
...blocks(d, ctx.json.content, {}, state)
|
|
2977
|
-
];
|
|
2978
|
-
const doc = new d.Document({
|
|
2979
|
-
title: ctx.title,
|
|
2980
|
-
numbering: {
|
|
2981
|
-
config: [
|
|
2982
|
-
{
|
|
2983
|
-
reference: ORDERED_REF,
|
|
2984
|
-
levels: [0, 1, 2].map((level) => ({
|
|
2985
|
-
level,
|
|
2986
|
-
format: d.LevelFormat.DECIMAL,
|
|
2987
|
-
text: `%${level + 1}.`,
|
|
2988
|
-
alignment: d.AlignmentType.START,
|
|
2989
|
-
style: { paragraph: { indent: { left: 720 * (level + 1), hanging: 360 } } }
|
|
2990
|
-
}))
|
|
2991
|
-
}
|
|
2992
|
-
]
|
|
2993
|
-
},
|
|
2994
|
-
sections: [{ children }]
|
|
2995
|
-
});
|
|
2996
|
-
const blob = await d.Packer.toBlob(doc);
|
|
2997
|
-
return { filename: `${ctx.basename}.docx`, mimeType: DOCX_MIME, blob };
|
|
2998
|
-
};
|
|
2999
|
-
function printHtml(html) {
|
|
3000
|
-
return new Promise((resolve, reject) => {
|
|
3001
|
-
const frame = document.createElement("iframe");
|
|
3002
|
-
frame.setAttribute("aria-hidden", "true");
|
|
3003
|
-
frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;";
|
|
3004
|
-
const cleanup = () => setTimeout(() => frame.remove(), 500);
|
|
3005
|
-
frame.onload = () => {
|
|
3006
|
-
try {
|
|
3007
|
-
const win = frame.contentWindow;
|
|
3008
|
-
if (!win) throw new Error("The print frame is unavailable");
|
|
3009
|
-
win.addEventListener("afterprint", cleanup);
|
|
3010
|
-
win.focus();
|
|
3011
|
-
win.print();
|
|
3012
|
-
setTimeout(cleanup, 12e4);
|
|
3013
|
-
resolve();
|
|
3014
|
-
} catch (error) {
|
|
3015
|
-
cleanup();
|
|
3016
|
-
reject(error);
|
|
3017
|
-
}
|
|
3018
|
-
};
|
|
3019
|
-
frame.srcdoc = html;
|
|
3020
|
-
document.body.appendChild(frame);
|
|
3021
|
-
});
|
|
3022
|
-
}
|
|
3023
|
-
var exportPdf = async (ctx) => {
|
|
3024
|
-
const { docToHtml: docToHtml2 } = await import("./document-engine-RKD5SLXR.js");
|
|
3025
|
-
await printHtml(buildHtmlDocument(ctx.title, docToHtml2(ctx.json)));
|
|
3026
|
-
return { filename: `${ctx.basename}.pdf`, mimeType: "application/pdf", handled: true };
|
|
3027
|
-
};
|
|
3028
|
-
var registry = /* @__PURE__ */ new Map([
|
|
3029
|
-
["html", exportHtml],
|
|
3030
|
-
["markdown", exportMarkdown],
|
|
3031
|
-
["txt", exportTxt],
|
|
3032
|
-
["docx", exportDocx],
|
|
3033
|
-
["pdf", exportPdf]
|
|
3034
|
-
]);
|
|
3035
|
-
function registerDocumentExporter(format, exporter) {
|
|
3036
|
-
registry.set(format, exporter);
|
|
3037
|
-
}
|
|
3038
|
-
function listDocumentExporters() {
|
|
3039
|
-
return [...registry.keys()];
|
|
3040
|
-
}
|
|
3041
|
-
async function exportDocument(format, doc) {
|
|
3042
|
-
const exporter = registry.get(format);
|
|
3043
|
-
if (!exporter) throw new JuneError("EXPORT_ERROR", `No exporter is registered for "${format}"`);
|
|
3044
|
-
try {
|
|
3045
|
-
return await exporter({ ...doc, basename: slugify(doc.title) || "document" });
|
|
3046
|
-
} catch (error) {
|
|
3047
|
-
throw toJuneError(error, "EXPORT_ERROR", `Exporting ${format} failed`);
|
|
3048
|
-
}
|
|
3049
|
-
}
|
|
3050
|
-
function downloadResult(result) {
|
|
3051
|
-
if (!result.blob) return;
|
|
3052
|
-
const url = URL.createObjectURL(result.blob);
|
|
3053
|
-
const link = document.createElement("a");
|
|
3054
|
-
link.href = url;
|
|
3055
|
-
link.download = result.filename;
|
|
3056
|
-
document.body.appendChild(link);
|
|
3057
|
-
link.click();
|
|
3058
|
-
link.remove();
|
|
3059
|
-
setTimeout(() => URL.revokeObjectURL(url), 1e3);
|
|
3060
|
-
}
|
|
3061
|
-
async function copyDocumentToClipboard(doc) {
|
|
3062
|
-
const { docToHtml: docToHtml2, docToText } = await import("./document-engine-RKD5SLXR.js");
|
|
3063
|
-
const html = docToHtml2(doc.json);
|
|
3064
|
-
const text = `${doc.title}
|
|
3065
|
-
|
|
3066
|
-
${docToText(doc.json)}`;
|
|
3067
|
-
try {
|
|
3068
|
-
if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
|
|
3069
|
-
await navigator.clipboard.write([
|
|
3070
|
-
new ClipboardItem({
|
|
3071
|
-
"text/html": new Blob([html], { type: "text/html" }),
|
|
3072
|
-
"text/plain": new Blob([text], { type: "text/plain" })
|
|
3073
|
-
})
|
|
3074
|
-
]);
|
|
3075
|
-
return true;
|
|
3076
|
-
}
|
|
3077
|
-
await navigator.clipboard.writeText(text);
|
|
3078
|
-
return true;
|
|
3079
|
-
} catch {
|
|
3080
|
-
return false;
|
|
3081
|
-
}
|
|
3082
|
-
}
|
|
3083
|
-
|
|
3084
|
-
// src/components/document-editor/document-types.ts
|
|
3085
|
-
var ALL_EXPORT_FORMATS = [
|
|
3086
|
-
"html",
|
|
3087
|
-
"markdown",
|
|
3088
|
-
"txt",
|
|
3089
|
-
"docx",
|
|
3090
|
-
"pdf"
|
|
3091
|
-
];
|
|
3092
|
-
|
|
3093
|
-
// src/components/document-editor/document-editor.tsx
|
|
3094
|
-
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3095
|
-
var snapshotOf = (r) => ({
|
|
3096
|
-
documentId: r.id,
|
|
3097
|
-
title: r.title,
|
|
3098
|
-
documentType: r.documentType,
|
|
3099
|
-
status: r.status,
|
|
3100
|
-
json: r.json
|
|
3101
|
-
});
|
|
3102
|
-
var SAVE_LABEL = {
|
|
3103
|
-
idle: "",
|
|
3104
|
-
dirty: "Unsaved changes",
|
|
3105
|
-
saving: "Saving\u2026",
|
|
3106
|
-
saved: "Saved",
|
|
3107
|
-
error: "Save failed"
|
|
3108
|
-
};
|
|
3109
|
-
var ZOOM_STEPS = [0.5, 0.67, 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2];
|
|
3110
|
-
var stepZoom = (z2, dir) => dir > 0 ? ZOOM_STEPS.find((s) => s > z2 + 1e-3) ?? z2 : [...ZOOM_STEPS].reverse().find((s) => s < z2 - 1e-3) ?? z2;
|
|
3111
|
-
function DocumentEditorImpl(props) {
|
|
3112
|
-
const {
|
|
3113
|
-
documentId,
|
|
3114
|
-
title: titleProp = "Untitled document",
|
|
3115
|
-
content,
|
|
3116
|
-
documentType,
|
|
3117
|
-
status = "draft",
|
|
3118
|
-
editable = true,
|
|
3119
|
-
exportFormats,
|
|
3120
|
-
theme = "auto",
|
|
3121
|
-
className
|
|
3122
|
-
} = props;
|
|
3123
|
-
const ctxOptions = useDocumentOptions();
|
|
3124
|
-
const options = useMemo4(() => ({ ...ctxOptions, ...props.options }), [ctxOptions, props.options]);
|
|
3125
|
-
const optionsRef = useRef7(options);
|
|
3126
|
-
optionsRef.current = options;
|
|
3127
|
-
const store = useMemo4(() => options.store ?? getDefaultDocumentStore(), [options.store]);
|
|
3128
|
-
const instanceId = useId();
|
|
3129
|
-
const { theme: contextTheme } = useJuneTheme();
|
|
3130
|
-
const resolvedTheme = theme === "auto" ? contextTheme : theme;
|
|
3131
|
-
const contentKey = typeof content === "string" ? content : content ? JSON.stringify(content) : "";
|
|
3132
|
-
const parsed = useMemo4(() => {
|
|
3133
|
-
if (!contentKey) return { json: null, error: null };
|
|
3134
|
-
try {
|
|
3135
|
-
return { json: parseDocumentContent(contentKey), error: null };
|
|
3136
|
-
} catch (e) {
|
|
3137
|
-
return { json: null, error: toJuneError(e, "DOCUMENT_ERROR") };
|
|
3138
|
-
}
|
|
3139
|
-
}, [contentKey]);
|
|
3140
|
-
useEffect6(() => {
|
|
3141
|
-
if (parsed.error) optionsRef.current.onError?.(parsed.error);
|
|
3142
|
-
}, [parsed.error]);
|
|
3143
|
-
const title = useDocumentValue(store, documentId, (r) => r?.title ?? titleProp);
|
|
3144
|
-
const pending = useDocumentValue(store, documentId, (r) => r?.pending ?? null);
|
|
3145
|
-
const words = useDocumentValue(store, documentId, (r) => r ? wordCountOf(r.json) : 0);
|
|
3146
|
-
const recordStatus = useDocumentValue(store, documentId, (r) => r?.status ?? status);
|
|
3147
|
-
const [saveState, setSaveState] = useState6("idle");
|
|
3148
|
-
const [notice, setNotice] = useState6(null);
|
|
3149
|
-
const [fullscreen, setFullscreen] = useState6(false);
|
|
3150
|
-
const [expanded, setExpanded] = useState6(true);
|
|
3151
|
-
const [showMarks, setShowMarks] = useState6(false);
|
|
3152
|
-
const [layout, setLayout] = useState6("page");
|
|
3153
|
-
const [findOpen, setFindOpen] = useState6(false);
|
|
3154
|
-
const [zoom, setZoom] = useState6(1);
|
|
3155
|
-
const [metrics, setMetrics] = useState6({ page: 1, pages: 1 });
|
|
3156
|
-
useEffect6(() => {
|
|
3157
|
-
if (!fullscreen || typeof document === "undefined") return;
|
|
3158
|
-
const prev = document.body.style.overflow;
|
|
3159
|
-
document.body.style.overflow = "hidden";
|
|
3160
|
-
return () => {
|
|
3161
|
-
document.body.style.overflow = prev;
|
|
3162
|
-
};
|
|
3163
|
-
}, [fullscreen]);
|
|
3164
|
-
const lastSavedKey = useRef7("");
|
|
3165
|
-
const seenRevision = useRef7(store.get(documentId)?.revision ?? 0);
|
|
3166
|
-
const readyRef = useRef7(false);
|
|
3167
|
-
const flash = useCallback3((message) => {
|
|
3168
|
-
setNotice(message);
|
|
3169
|
-
}, []);
|
|
3170
|
-
useEffect6(() => {
|
|
3171
|
-
if (!notice) return;
|
|
3172
|
-
const t = setTimeout(() => setNotice(null), 3e3);
|
|
3173
|
-
return () => clearTimeout(t);
|
|
3174
|
-
}, [notice]);
|
|
3175
|
-
const emitChange = useCallback3(
|
|
3176
|
-
(source) => {
|
|
3177
|
-
const record = store.get(documentId);
|
|
3178
|
-
if (record) optionsRef.current.onDocumentChange?.({ ...snapshotOf(record), source });
|
|
3179
|
-
},
|
|
3180
|
-
[store, documentId]
|
|
3181
|
-
);
|
|
3182
|
-
const saveRef = useRef7(async () => {
|
|
3183
|
-
});
|
|
3184
|
-
const autosave = useMemo4(() => {
|
|
3185
|
-
const delay = options.autosaveDelay ?? 1500;
|
|
3186
|
-
return delay > 0 ? debounce(() => void saveRef.current(), delay) : null;
|
|
3187
|
-
}, [options.autosaveDelay]);
|
|
3188
|
-
useEffect6(() => () => autosave?.flush(), [autosave]);
|
|
3189
|
-
saveRef.current = async () => {
|
|
3190
|
-
const record = store.get(documentId);
|
|
3191
|
-
const onSave = optionsRef.current.onSave;
|
|
3192
|
-
if (!record) return;
|
|
3193
|
-
const key = JSON.stringify([record.title, docKey(record.json)]);
|
|
3194
|
-
if (!onSave) {
|
|
3195
|
-
lastSavedKey.current = key;
|
|
3196
|
-
setSaveState("saved");
|
|
3197
|
-
return;
|
|
3198
|
-
}
|
|
3199
|
-
if (key === lastSavedKey.current) {
|
|
3200
|
-
setSaveState("saved");
|
|
3201
|
-
return;
|
|
3202
|
-
}
|
|
3203
|
-
setSaveState("saving");
|
|
3204
|
-
try {
|
|
3205
|
-
await onSave({
|
|
3206
|
-
...snapshotOf(record),
|
|
3207
|
-
html: docToHtml(record.json),
|
|
3208
|
-
markdown: docToMarkdown(record.json)
|
|
3209
|
-
});
|
|
3210
|
-
lastSavedKey.current = key;
|
|
3211
|
-
const latest = store.get(documentId);
|
|
3212
|
-
const latestKey = latest ? JSON.stringify([latest.title, docKey(latest.json)]) : key;
|
|
3213
|
-
setSaveState(latestKey === key ? "saved" : "dirty");
|
|
3214
|
-
} catch (error) {
|
|
3215
|
-
setSaveState("error");
|
|
3216
|
-
optionsRef.current.onError?.(toJuneError(error, "DOCUMENT_ERROR", "Saving the document failed"));
|
|
3217
|
-
}
|
|
3218
|
-
};
|
|
3219
|
-
const markDirty = useCallback3(
|
|
3220
|
-
(userEdit = true) => {
|
|
3221
|
-
if (!optionsRef.current.onSave) {
|
|
3222
|
-
if (userEdit) setSaveState("dirty");
|
|
3223
|
-
return;
|
|
3224
|
-
}
|
|
3225
|
-
setSaveState("dirty");
|
|
3226
|
-
autosave?.();
|
|
3227
|
-
},
|
|
3228
|
-
[autosave]
|
|
3229
|
-
);
|
|
3230
|
-
useEffect6(() => {
|
|
3231
|
-
if (saveState !== "saved" || options.onSave) return;
|
|
3232
|
-
const t = setTimeout(() => setSaveState((s) => s === "saved" ? "idle" : s), 2500);
|
|
3233
|
-
return () => clearTimeout(t);
|
|
3234
|
-
}, [saveState, options.onSave]);
|
|
3235
|
-
const [initialJson] = useState6(() => store.get(documentId)?.json ?? parsed.json ?? emptyDoc());
|
|
3236
|
-
const extensions = useMemo4(() => createDocumentExtensions(), []);
|
|
3237
|
-
const onUpdateRef = useRef7(() => {
|
|
3238
|
-
});
|
|
3239
|
-
onUpdateRef.current = (json) => {
|
|
3240
|
-
store.edit(documentId, json, instanceId);
|
|
3241
|
-
emitChange("user");
|
|
3242
|
-
markDirty();
|
|
3243
|
-
};
|
|
3244
|
-
const editor = useEditor({
|
|
3245
|
-
extensions,
|
|
3246
|
-
content: initialJson,
|
|
3247
|
-
editable,
|
|
3248
|
-
immediatelyRender: false,
|
|
3249
|
-
editorProps: {
|
|
3250
|
-
attributes: {
|
|
3251
|
-
class: "june-doc__prose",
|
|
3252
|
-
role: "textbox",
|
|
3253
|
-
"aria-multiline": "true",
|
|
3254
|
-
"aria-label": "Document content"
|
|
3255
|
-
}
|
|
3256
|
-
},
|
|
3257
|
-
onUpdate: ({ editor: ed }) => onUpdateRef.current(ed.getJSON())
|
|
3258
|
-
});
|
|
3259
|
-
useEffect6(() => {
|
|
3260
|
-
if (!editor || editor.isEditable === editable) return;
|
|
3261
|
-
editor.setEditable(editable);
|
|
3262
|
-
}, [editor, editable]);
|
|
3263
|
-
useEffect6(() => {
|
|
3264
|
-
if (!parsed.json) return;
|
|
3265
|
-
if (isDocumentEcho(store, documentId, contentKey)) return;
|
|
3266
|
-
const outcome = store.receive({
|
|
3267
|
-
id: documentId,
|
|
3268
|
-
title: titleProp,
|
|
3269
|
-
json: parsed.json,
|
|
3270
|
-
documentType,
|
|
3271
|
-
status
|
|
3272
|
-
});
|
|
3273
|
-
if (outcome === "applied" || outcome === "merged") {
|
|
3274
|
-
emitChange(outcome === "applied" ? "ai" : "merge");
|
|
3275
|
-
markDirty(false);
|
|
3276
|
-
} else if (outcome === "conflict") {
|
|
3277
|
-
const record = store.get(documentId);
|
|
3278
|
-
optionsRef.current.onConflict?.({
|
|
3279
|
-
documentId,
|
|
3280
|
-
title: record?.title ?? titleProp,
|
|
3281
|
-
conflicts: record?.pending?.conflicts ?? 1
|
|
3282
|
-
});
|
|
3283
|
-
}
|
|
3284
|
-
}, [store, documentId, titleProp, parsed.json, documentType, status, emitChange, markDirty]);
|
|
3285
|
-
useEffect6(() => {
|
|
3286
|
-
if (!editor) return;
|
|
3287
|
-
const apply = () => {
|
|
3288
|
-
const record = store.get(documentId);
|
|
3289
|
-
if (!record || record.revision === seenRevision.current) return;
|
|
3290
|
-
seenRevision.current = record.revision;
|
|
3291
|
-
if (record.origin === instanceId) return;
|
|
3292
|
-
const { from, to } = editor.state.selection;
|
|
3293
|
-
editor.commands.setContent(record.json, { emitUpdate: false });
|
|
3294
|
-
if (editor.isFocused) {
|
|
3295
|
-
const size = editor.state.doc.content.size;
|
|
3296
|
-
editor.commands.setTextSelection({ from: Math.min(from, size), to: Math.min(to, size) });
|
|
3297
|
-
}
|
|
3298
|
-
};
|
|
3299
|
-
apply();
|
|
3300
|
-
return store.subscribe(apply);
|
|
3301
|
-
}, [editor, store, documentId, instanceId]);
|
|
3302
|
-
useEffect6(() => {
|
|
3303
|
-
if (!editor || readyRef.current) return;
|
|
3304
|
-
const record = store.get(documentId);
|
|
3305
|
-
if (!record) return;
|
|
3306
|
-
readyRef.current = true;
|
|
3307
|
-
lastSavedKey.current = JSON.stringify([record.title, docKey(record.json)]);
|
|
3308
|
-
optionsRef.current.onDocumentReady?.(snapshotOf(record));
|
|
3309
|
-
}, [editor, store, documentId, title]);
|
|
3310
|
-
const handleTitle = (value) => {
|
|
3311
|
-
store.setTitle(documentId, value);
|
|
3312
|
-
emitChange("user");
|
|
3313
|
-
markDirty();
|
|
3314
|
-
};
|
|
3315
|
-
const resolve = (choice) => {
|
|
3316
|
-
store.resolve(documentId, choice);
|
|
3317
|
-
if (choice !== "keep") {
|
|
3318
|
-
emitChange(choice === "merge" ? "merge" : "resolve");
|
|
3319
|
-
markDirty();
|
|
3320
|
-
}
|
|
3321
|
-
};
|
|
3322
|
-
const handleExport = async (format) => {
|
|
3323
|
-
const record = store.get(documentId);
|
|
3324
|
-
if (!record) return;
|
|
3325
|
-
try {
|
|
3326
|
-
const result = await exportDocument(format, {
|
|
3327
|
-
documentId,
|
|
3328
|
-
title: record.title,
|
|
3329
|
-
json: record.json
|
|
3330
|
-
// always the latest editor content
|
|
3331
|
-
});
|
|
3332
|
-
if (result.blob) downloadResult(result);
|
|
3333
|
-
optionsRef.current.onExport?.({ documentId, format, ...result });
|
|
3334
|
-
} catch (error) {
|
|
3335
|
-
optionsRef.current.onError?.(toJuneError(error, "EXPORT_ERROR"));
|
|
3336
|
-
flash("Export failed");
|
|
3337
|
-
}
|
|
3338
|
-
};
|
|
3339
|
-
const handleCopy = async () => {
|
|
3340
|
-
const record = store.get(documentId);
|
|
3341
|
-
if (!record) return;
|
|
3342
|
-
flash(await copyDocumentToClipboard({ title: record.title, json: record.json }) ? "Copied" : "Copy failed");
|
|
3343
|
-
};
|
|
3344
|
-
const formats = (exportFormats ?? [...ALL_EXPORT_FORMATS]).filter((f) => listDocumentExporters().includes(f));
|
|
3345
|
-
if (parsed.error && !store.get(documentId)) {
|
|
3346
|
-
return /* @__PURE__ */ jsxs10("div", { className: "june-doc june-doc--error", "data-theme": resolvedTheme, role: "alert", children: [
|
|
3347
|
-
/* @__PURE__ */ jsx13("p", { className: "june-doc__draft-text", children: "This document could not be displayed." }),
|
|
3348
|
-
/* @__PURE__ */ jsxs10("details", { children: [
|
|
3349
|
-
/* @__PURE__ */ jsx13("summary", { children: "Show raw content" }),
|
|
3350
|
-
/* @__PURE__ */ jsx13("pre", { className: "june-doc__raw", children: contentKey })
|
|
3351
|
-
] })
|
|
3352
|
-
] });
|
|
3353
|
-
}
|
|
3354
|
-
if (!editor) return /* @__PURE__ */ jsx13(DocumentDraft, { title, state: "loading" });
|
|
3355
|
-
const isDraft = recordStatus === "draft";
|
|
3356
|
-
const classes = ["june-doc", fullscreen ? "june-doc--fullscreen" : "", className ?? ""].filter(Boolean).join(" ");
|
|
3357
|
-
return /* @__PURE__ */ jsxs10(
|
|
3358
|
-
"div",
|
|
3359
|
-
{
|
|
3360
|
-
className: classes,
|
|
3361
|
-
"data-theme": resolvedTheme,
|
|
3362
|
-
"data-status": recordStatus,
|
|
3363
|
-
role: fullscreen ? "dialog" : void 0,
|
|
3364
|
-
"aria-modal": fullscreen || void 0,
|
|
3365
|
-
"aria-label": fullscreen ? title : void 0,
|
|
3366
|
-
onKeyDown: (e) => {
|
|
3367
|
-
const mod = e.ctrlKey || e.metaKey;
|
|
3368
|
-
if (mod && e.key.toLowerCase() === "s" && options.onSave) {
|
|
3369
|
-
e.preventDefault();
|
|
3370
|
-
void saveRef.current();
|
|
3371
|
-
} else if (mod && e.key.toLowerCase() === "f") {
|
|
3372
|
-
e.preventDefault();
|
|
3373
|
-
setFindOpen(true);
|
|
3374
|
-
} else if (e.key === "Escape" && fullscreen && !e.defaultPrevented) {
|
|
3375
|
-
setFullscreen(false);
|
|
3376
|
-
}
|
|
3377
|
-
},
|
|
3378
|
-
children: [
|
|
3379
|
-
/* @__PURE__ */ jsx13(
|
|
3380
|
-
DocumentHeader,
|
|
3381
|
-
{
|
|
3382
|
-
title,
|
|
3383
|
-
editable,
|
|
3384
|
-
isDraft,
|
|
3385
|
-
fullscreen,
|
|
3386
|
-
onToggleFullscreen: () => setFullscreen((v) => !v),
|
|
3387
|
-
onTitle: handleTitle,
|
|
3388
|
-
exportFormats: formats,
|
|
3389
|
-
canSave: !!options.onSave,
|
|
3390
|
-
showSave: !!options.onSave || editable && saveState !== "idle",
|
|
3391
|
-
saveState,
|
|
3392
|
-
onExport: (f) => void handleExport(f),
|
|
3393
|
-
onCopy: () => void handleCopy(),
|
|
3394
|
-
onSave: () => void saveRef.current()
|
|
3395
|
-
}
|
|
3396
|
-
),
|
|
3397
|
-
pending ? /* @__PURE__ */ jsxs10("div", { className: "june-doc__banner", role: "status", children: [
|
|
3398
|
-
/* @__PURE__ */ jsxs10("span", { children: [
|
|
3399
|
-
"The assistant suggested changes that overlap your edits (",
|
|
3400
|
-
pending.conflicts,
|
|
3401
|
-
" ",
|
|
3402
|
-
pending.conflicts === 1 ? "section" : "sections",
|
|
3403
|
-
")."
|
|
3404
|
-
] }),
|
|
3405
|
-
/* @__PURE__ */ jsxs10("span", { className: "june-doc__banner-actions", children: [
|
|
3406
|
-
/* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("merge"), children: "Merge, keep my edits" }),
|
|
3407
|
-
/* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("replace"), children: "Use AI version" }),
|
|
3408
|
-
/* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn", onClick: () => resolve("keep"), children: "Keep mine" })
|
|
3409
|
-
] })
|
|
3410
|
-
] }) : null,
|
|
3411
|
-
/* @__PURE__ */ jsx13(
|
|
3412
|
-
DocumentToolbar,
|
|
3413
|
-
{
|
|
3414
|
-
editor,
|
|
3415
|
-
editable,
|
|
3416
|
-
expanded,
|
|
3417
|
-
onToggleExpanded: () => setExpanded((v) => !v),
|
|
3418
|
-
showMarks,
|
|
3419
|
-
onToggleMarks: () => setShowMarks((v) => !v),
|
|
3420
|
-
layout,
|
|
3421
|
-
onToggleLayout: () => setLayout((v) => v === "page" ? "fluid" : "page"),
|
|
3422
|
-
findOpen,
|
|
3423
|
-
onToggleFind: () => setFindOpen((v) => !v),
|
|
3424
|
-
onNotice: flash
|
|
3425
|
-
}
|
|
3426
|
-
),
|
|
3427
|
-
findOpen ? /* @__PURE__ */ jsx13(DocumentFindBar, { editor, editable, onClose: () => setFindOpen(false), onNotice: flash }) : null,
|
|
3428
|
-
editable ? /* @__PURE__ */ jsx13(DocumentBubbleMenu, { editor }) : null,
|
|
3429
|
-
/* @__PURE__ */ jsx13(DocumentContent, { editor, layout, zoom, showMarks, onMetrics: setMetrics }),
|
|
3430
|
-
/* @__PURE__ */ jsxs10("div", { className: "june-doc__footer", children: [
|
|
3431
|
-
/* @__PURE__ */ jsxs10("div", { className: "june-doc__stats", children: [
|
|
3432
|
-
layout === "page" ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
|
|
3433
|
-
/* @__PURE__ */ jsxs10("span", { children: [
|
|
3434
|
-
"Page ",
|
|
3435
|
-
metrics.page,
|
|
3436
|
-
" of ",
|
|
3437
|
-
metrics.pages
|
|
3438
|
-
] }),
|
|
3439
|
-
/* @__PURE__ */ jsx13("span", { className: "june-doc__stats-sep", "aria-hidden": "true" })
|
|
3440
|
-
] }) : null,
|
|
3441
|
-
/* @__PURE__ */ jsxs10("span", { children: [
|
|
3442
|
-
words,
|
|
3443
|
-
" words"
|
|
3444
|
-
] })
|
|
3445
|
-
] }),
|
|
3446
|
-
/* @__PURE__ */ jsx13("span", { className: "june-doc__status", "aria-live": "polite", "data-state": notice ? "notice" : saveState, children: notice ?? SAVE_LABEL[saveState] }),
|
|
3447
|
-
/* @__PURE__ */ jsxs10("div", { className: "june-doc__zoom", role: "group", "aria-label": "Zoom", children: [
|
|
3448
|
-
/* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom out", disabled: zoom <= ZOOM_STEPS[0], onClick: () => setZoom(stepZoom(zoom, -1)), children: /* @__PURE__ */ jsx13(Icon, { name: "minus", size: 14 }) }),
|
|
3449
|
-
/* @__PURE__ */ jsxs10("button", { type: "button", className: "june-doc__zoom-value", "aria-label": "Reset zoom", title: "Reset zoom", onClick: () => setZoom(1), children: [
|
|
3450
|
-
Math.round(zoom * 100),
|
|
3451
|
-
"%"
|
|
3452
|
-
] }),
|
|
3453
|
-
/* @__PURE__ */ jsx13("button", { type: "button", className: "june-doc__btn june-doc__btn--icon june-doc__btn--ghost", "aria-label": "Zoom in", disabled: zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1], onClick: () => setZoom(stepZoom(zoom, 1)), children: /* @__PURE__ */ jsx13(Icon, { name: "plus", size: 14 }) })
|
|
3454
|
-
] })
|
|
3455
|
-
] })
|
|
3456
|
-
]
|
|
3457
|
-
}
|
|
3458
|
-
);
|
|
3459
|
-
}
|
|
3460
|
-
|
|
3461
|
-
// src/components/document-editor/document-component.tsx
|
|
3462
|
-
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
3463
|
-
var DOCUMENT_COMPONENT_DESCRIPTION = 'Custom component. An editable document. DocumentEditor(documentId, title, content, documentType?, status?, editable?, exportFormats?). Place it in the root container (Card or Stack). "content" is the full document body as one Markdown string. Reuse documentId when revising the same document. Use it only when the user asks to create or revise a document.';
|
|
3464
|
-
var documentProps = z.object({
|
|
3465
|
-
documentId: z.string().describe("Stable id. Reuse it when revising the same document."),
|
|
3466
|
-
title: z.string().describe("Document title. Do not repeat it as a heading in content."),
|
|
3467
|
-
content: z.string().describe("The whole document body as Markdown."),
|
|
3468
|
-
documentType: z.string().optional().describe("Kind of document, such as proposal, contract or invoice."),
|
|
3469
|
-
status: z.string().optional().describe('Use "draft" for generated documents.'),
|
|
3470
|
-
editable: z.boolean().optional().describe("Whether the user can edit. Defaults to true."),
|
|
3471
|
-
exportFormats: z.array(z.string()).optional().describe("Export formats to offer, such as html, markdown, docx.")
|
|
3472
|
-
});
|
|
3473
|
-
function DocumentEditor(props) {
|
|
3474
|
-
const { isStreaming } = useJuneRuntime();
|
|
3475
|
-
if (props.generating || isStreaming) {
|
|
3476
|
-
return /* @__PURE__ */ jsx14(DocumentDraft, { title: props.title, state: "drafting" });
|
|
3477
|
-
}
|
|
3478
|
-
return /* @__PURE__ */ jsx14(DocumentEditorImpl, { ...props });
|
|
3479
|
-
}
|
|
3480
|
-
function OpenUIDocument({ props }) {
|
|
3481
|
-
return /* @__PURE__ */ jsx14(
|
|
3482
|
-
DocumentEditor,
|
|
3483
|
-
{
|
|
3484
|
-
documentId: props.documentId,
|
|
3485
|
-
title: props.title,
|
|
3486
|
-
content: props.content,
|
|
3487
|
-
documentType: props.documentType,
|
|
3488
|
-
status: props.status,
|
|
3489
|
-
editable: props.editable,
|
|
3490
|
-
exportFormats: props.exportFormats
|
|
3491
|
-
}
|
|
3492
|
-
);
|
|
3493
|
-
}
|
|
3494
|
-
var JuneDocumentEditorComponent = defineComponent2({
|
|
3495
|
-
name: "DocumentEditor",
|
|
3496
|
-
description: DOCUMENT_COMPONENT_DESCRIPTION,
|
|
3497
|
-
props: documentProps,
|
|
3498
|
-
component: OpenUIDocument
|
|
3499
|
-
});
|
|
3500
|
-
function withDocumentEditor(library) {
|
|
3501
|
-
try {
|
|
3502
|
-
return library.extend({
|
|
3503
|
-
components: {
|
|
3504
|
-
add: [{ component: JuneDocumentEditorComponent, slots: ["Card"] }]
|
|
3505
|
-
}
|
|
3506
|
-
});
|
|
3507
|
-
} catch {
|
|
3508
|
-
return library.extend({ components: { add: [JuneDocumentEditorComponent] } });
|
|
3509
|
-
}
|
|
3510
|
-
}
|
|
3511
|
-
|
|
3512
|
-
// src/components/document-editor/document-instructions.ts
|
|
3513
|
-
var DEFAULT_TYPES = [
|
|
3514
|
-
"proposal",
|
|
3515
|
-
"report",
|
|
3516
|
-
"email",
|
|
3517
|
-
"letter",
|
|
3518
|
-
"invoice",
|
|
3519
|
-
"contract",
|
|
3520
|
-
"NDA",
|
|
3521
|
-
"memo",
|
|
3522
|
-
"meeting notes"
|
|
3523
|
-
];
|
|
3524
|
-
function getDocumentEditorRules(options = {}) {
|
|
3525
|
-
const name = options.componentName ?? "DocumentEditor";
|
|
3526
|
-
const types = (options.documentTypes ?? DEFAULT_TYPES).join(", ");
|
|
3527
|
-
return [
|
|
3528
|
-
`WHEN TO USE ${name}: use it only when the user asks you to create, draft, write, prepare, generate or revise an editable document (${types}, or similar). Put the finished document inside ${name}.`,
|
|
3529
|
-
`WHEN NOT TO USE ${name}: for explanations ("explain what an NDA is"), factual answers, comparisons, brainstorming and general questions, answer with normal text and the other components. Never open ${name} for those.`,
|
|
3530
|
-
`${name}(documentId, title, content, documentType?, status?, editable?, exportFormats?): "content" is the whole document body as Markdown inside ONE double-quoted string. Write line breaks as \\n and escape double quotes as \\". Supported Markdown: headings (#, ##, ###), paragraphs, **bold**, *italic*, lists, > quotes, [links](https://...), and tables.`,
|
|
3531
|
-
`Do not repeat the title as a heading inside "content"; the title is shown separately. Structure the document with headings, short paragraphs and tables where useful. Keep a professional tone.`,
|
|
3532
|
-
`EDITING: when the user asks to change an existing document (add a section, rewrite a part, change the title), write ${name} again with the SAME documentId and the COMPLETE updated content, starting from the current document text you were given. Copy every unchanged section exactly as it was. Change only what was requested. The app merges your version with the user's own edits.`,
|
|
3533
|
-
`If the user asks for a document but leaves out details, write the document anyway and use clear placeholders such as [CLIENT NAME], [DATE], [AMOUNT]. Do not stop to ask unless the request is impossible to interpret.`,
|
|
3534
|
-
`Never invent legal, financial or business facts, prices, dates, names or figures. Use placeholders instead. Set status to "draft" for generated documents, and for legal or financial documents say in one short sentence outside the component that the document is a draft that should be reviewed by a professional.`,
|
|
3535
|
-
`You may add one short sentence before or after the component. Do not repeat the document text outside the component.`,
|
|
3536
|
-
...options.extraRules ?? []
|
|
3537
|
-
];
|
|
3538
|
-
}
|
|
3539
|
-
function getDocumentEditorInstructions(options = {}) {
|
|
3540
|
-
const rules = getDocumentEditorRules(options);
|
|
3541
|
-
return ["Document drafting:", ...rules.map((rule, i) => `${i + 1}. ${rule}`)].join("\n");
|
|
3542
|
-
}
|
|
3543
|
-
var EXAMPLE_NEW = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |", "proposal", "draft")';
|
|
3544
|
-
var EXAMPLE_EDIT = 'root = Stack([doc])\ndoc = DocumentEditor("business-proposal", "Business Proposal", "## Executive Summary\\n\\nThis proposal outlines [SERVICE] for [CLIENT NAME].\\n\\n## Scope of Work\\n\\n- Discovery\\n- Delivery\\n\\n## Pricing\\n\\n| Item | Cost |\\n| --- | --- |\\n| Discovery | [AMOUNT] |\\n| Delivery | [AMOUNT] |", "proposal", "draft")';
|
|
3545
|
-
function documentPromptOptions(options = {}) {
|
|
3546
|
-
return {
|
|
3547
|
-
additionalRules: getDocumentEditorRules(options),
|
|
3548
|
-
examples: [EXAMPLE_NEW, EXAMPLE_EDIT]
|
|
3549
|
-
};
|
|
3550
|
-
}
|
|
3551
|
-
|
|
3552
|
-
// src/components/document-editor/document-agent.ts
|
|
3553
|
-
var attr = (value) => value.replace(/"/g, """);
|
|
3554
|
-
async function serializeDocumentsForAgent(options = {}) {
|
|
3555
|
-
const store = options.store ?? getDefaultDocumentStore();
|
|
3556
|
-
const { docToMarkdown: docToMarkdown2 } = await import("./document-engine-RKD5SLXR.js");
|
|
3557
|
-
return store.list().filter((r) => !options.ids || options.ids.includes(r.id)).map(
|
|
3558
|
-
(r) => `<document id="${attr(r.id)}" title="${attr(r.title)}"${r.documentType ? ` type="${attr(r.documentType)}"` : ""}>
|
|
3559
|
-
${docToMarkdown2(r.json)}
|
|
3560
|
-
</document>`
|
|
3561
|
-
).join("\n\n");
|
|
3562
|
-
}
|
|
3563
|
-
|
|
3564
|
-
// src/components/june-library.ts
|
|
3565
|
-
import { openuiLibrary } from "@openuidev/react-ui";
|
|
3566
|
-
var juneLibrary = withDocumentEditor(openuiLibrary);
|
|
3567
|
-
|
|
3568
|
-
// src/core/JuneUI.tsx
|
|
3569
|
-
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
3570
|
-
function JuneUI({ library = juneLibrary, ...props }) {
|
|
3571
|
-
return /* @__PURE__ */ jsx15(JuneRenderer, { library, ...props });
|
|
142
|
+
return Object.freeze(instance);
|
|
3572
143
|
}
|
|
3573
144
|
export {
|
|
3574
145
|
ALL_EXPORT_FORMATS,
|
|
146
|
+
ComponentRegistry,
|
|
147
|
+
DOCUMENT_COMPONENT_DESCRIPTION,
|
|
148
|
+
DocumentBridge,
|
|
3575
149
|
DocumentEditor,
|
|
3576
150
|
JuneDocumentContext,
|
|
3577
151
|
JuneDocumentEditorComponent,
|
|
@@ -3581,13 +155,24 @@ export {
|
|
|
3581
155
|
JuneRuntimeContext,
|
|
3582
156
|
JuneThemeProvider,
|
|
3583
157
|
JuneUI,
|
|
158
|
+
JuneUIProvider,
|
|
159
|
+
MarkdownText,
|
|
160
|
+
ToolApproval,
|
|
161
|
+
ToolApprovalList,
|
|
3584
162
|
consumeStream,
|
|
3585
163
|
copyDocumentToClipboard,
|
|
3586
164
|
createActionHandler,
|
|
165
|
+
createComponentRegistry,
|
|
3587
166
|
createDocumentStore,
|
|
3588
167
|
createJuneLibrary,
|
|
168
|
+
createJuneUI,
|
|
169
|
+
createLangGraphExtractor,
|
|
170
|
+
createTheme,
|
|
3589
171
|
darkTheme,
|
|
3590
172
|
defaultParseActionEvent,
|
|
173
|
+
defaultRegistry,
|
|
174
|
+
defaultToolApprovalLabels,
|
|
175
|
+
defineComponent,
|
|
3591
176
|
defineJuneAction,
|
|
3592
177
|
defineJuneComponent,
|
|
3593
178
|
documentPromptOptions,
|
|
@@ -3597,25 +182,43 @@ export {
|
|
|
3597
182
|
getDefaultDocumentStore,
|
|
3598
183
|
getDocumentEditorInstructions,
|
|
3599
184
|
getDocumentEditorRules,
|
|
185
|
+
interruptToApprovalRequests,
|
|
3600
186
|
isDocumentEcho,
|
|
187
|
+
isJuneComponent,
|
|
3601
188
|
isJuneError,
|
|
189
|
+
isThemeSet,
|
|
3602
190
|
jsonFieldExtractor,
|
|
3603
191
|
juneLibrary,
|
|
192
|
+
langGraphStreamOptions,
|
|
3604
193
|
lightTheme,
|
|
3605
194
|
listDocumentExporters,
|
|
3606
195
|
mergeDocuments,
|
|
196
|
+
messageContentToText,
|
|
197
|
+
normalizeProgram,
|
|
3607
198
|
readDocumentFromProgram,
|
|
199
|
+
readLangGraphInterrupts,
|
|
200
|
+
registerComponent,
|
|
3608
201
|
registerDocumentExporter,
|
|
3609
202
|
rememberDocumentEcho,
|
|
203
|
+
resolveMixedContent,
|
|
204
|
+
resolveThemeVars,
|
|
3610
205
|
runAction,
|
|
3611
206
|
serializeDocumentsForAgent,
|
|
207
|
+
splitResponse,
|
|
3612
208
|
sseToText,
|
|
209
|
+
toAsyncIterable,
|
|
3613
210
|
toJuneError,
|
|
211
|
+
unregisterComponent,
|
|
3614
212
|
updateDocumentInProgram,
|
|
213
|
+
useDocumentBridge,
|
|
3615
214
|
useDocumentOptions,
|
|
3616
215
|
useJuneRuntime,
|
|
3617
216
|
useJuneStream,
|
|
3618
217
|
useJuneTheme,
|
|
218
|
+
useJuneUIContext,
|
|
219
|
+
useRegistryLibrary,
|
|
3619
220
|
useResolvedTheme,
|
|
221
|
+
useToolApproval,
|
|
222
|
+
validateComponentDefinition,
|
|
3620
223
|
withDocumentEditor
|
|
3621
224
|
};
|