@haklex/rich-ext-code-snippet 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CodeEditorModal.d.ts.map +1 -1
- package/dist/CodeSnippetRenderer.d.ts.map +1 -1
- package/dist/FileIcon.d.ts.map +1 -1
- package/dist/index.mjs +384 -146
- package/dist/rich-ext-code-snippet.css +82 -78
- package/dist/styles.css.d.ts +98 -0
- package/dist/styles.css.d.ts.map +1 -1
- package/package.json +6 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditorModal.d.ts","sourceRoot":"","sources":["../src/CodeEditorModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAQhE,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CodeEditorModal.d.ts","sourceRoot":"","sources":["../src/CodeEditorModal.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAQhE,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAA;AAQ9C,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,EAAE,WAAW,CAAA;CACzB;AA+FD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmUpD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAQnE,OAAO,KAAK,EAAE,aAAa,EAAM,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"CodeSnippetRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAQnE,OAAO,KAAK,EAAE,aAAa,EAAM,MAAM,OAAO,CAAA;AA8B9C,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,wBAAwB,CA+HvE,CAAA"}
|
package/dist/FileIcon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileIcon.d.ts","sourceRoot":"","sources":["../src/FileIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"FileIcon.d.ts","sourceRoot":"","sources":["../src/FileIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAgD/B,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAmC5D,CAAA"}
|
package/dist/index.mjs
CHANGED
|
@@ -16,7 +16,147 @@ import { createPortal } from "react-dom";
|
|
|
16
16
|
import { getIconData, iconToSVG, iconToHTML } from "@iconify/utils";
|
|
17
17
|
import { icons } from "@iconify-json/material-icon-theme";
|
|
18
18
|
import { DecoratorNode, $getNodeByKey, $insertNodes } from "lexical";
|
|
19
|
-
|
|
19
|
+
function toPrimitive(t, r2) {
|
|
20
|
+
if ("object" != typeof t || !t) return t;
|
|
21
|
+
var e = t[Symbol.toPrimitive];
|
|
22
|
+
if (void 0 !== e) {
|
|
23
|
+
var i = e.call(t, r2);
|
|
24
|
+
if ("object" != typeof i) return i;
|
|
25
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
26
|
+
}
|
|
27
|
+
return ("string" === r2 ? String : Number)(t);
|
|
28
|
+
}
|
|
29
|
+
function toPropertyKey(t) {
|
|
30
|
+
var i = toPrimitive(t, "string");
|
|
31
|
+
return "symbol" == typeof i ? i : String(i);
|
|
32
|
+
}
|
|
33
|
+
function _defineProperty(obj, key, value) {
|
|
34
|
+
key = toPropertyKey(key);
|
|
35
|
+
if (key in obj) {
|
|
36
|
+
Object.defineProperty(obj, key, {
|
|
37
|
+
value,
|
|
38
|
+
enumerable: true,
|
|
39
|
+
configurable: true,
|
|
40
|
+
writable: true
|
|
41
|
+
});
|
|
42
|
+
} else {
|
|
43
|
+
obj[key] = value;
|
|
44
|
+
}
|
|
45
|
+
return obj;
|
|
46
|
+
}
|
|
47
|
+
function ownKeys(e, r2) {
|
|
48
|
+
var t = Object.keys(e);
|
|
49
|
+
if (Object.getOwnPropertySymbols) {
|
|
50
|
+
var o2 = Object.getOwnPropertySymbols(e);
|
|
51
|
+
r2 && (o2 = o2.filter(function(r3) {
|
|
52
|
+
return Object.getOwnPropertyDescriptor(e, r3).enumerable;
|
|
53
|
+
})), t.push.apply(t, o2);
|
|
54
|
+
}
|
|
55
|
+
return t;
|
|
56
|
+
}
|
|
57
|
+
function _objectSpread2(e) {
|
|
58
|
+
for (var r2 = 1; r2 < arguments.length; r2++) {
|
|
59
|
+
var t = null != arguments[r2] ? arguments[r2] : {};
|
|
60
|
+
r2 % 2 ? ownKeys(Object(t), true).forEach(function(r3) {
|
|
61
|
+
_defineProperty(e, r3, t[r3]);
|
|
62
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r3) {
|
|
63
|
+
Object.defineProperty(e, r3, Object.getOwnPropertyDescriptor(t, r3));
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
return e;
|
|
67
|
+
}
|
|
68
|
+
function mapValues(input, fn) {
|
|
69
|
+
var result = {};
|
|
70
|
+
for (var _key in input) {
|
|
71
|
+
result[_key] = fn(input[_key], _key);
|
|
72
|
+
}
|
|
73
|
+
return result;
|
|
74
|
+
}
|
|
75
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
76
|
+
for (var key of Object.keys(compoundCheck)) {
|
|
77
|
+
var _selections$key;
|
|
78
|
+
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
79
|
+
return false;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
return true;
|
|
83
|
+
};
|
|
84
|
+
var createRuntimeFn = (config) => {
|
|
85
|
+
var runtimeFn = (options) => {
|
|
86
|
+
var className = config.defaultClassName;
|
|
87
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
88
|
+
for (var variantName in selections) {
|
|
89
|
+
var _selections$variantNa;
|
|
90
|
+
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
91
|
+
if (variantSelection != null) {
|
|
92
|
+
var selection = variantSelection;
|
|
93
|
+
if (typeof selection === "boolean") {
|
|
94
|
+
selection = selection === true ? "true" : "false";
|
|
95
|
+
}
|
|
96
|
+
var selectionClassName = (
|
|
97
|
+
// @ts-expect-error
|
|
98
|
+
config.variantClassNames[variantName][selection]
|
|
99
|
+
);
|
|
100
|
+
if (selectionClassName) {
|
|
101
|
+
className += " " + selectionClassName;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
106
|
+
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
107
|
+
className += " " + compoundClassName;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
return className;
|
|
111
|
+
};
|
|
112
|
+
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
113
|
+
runtimeFn.classNames = {
|
|
114
|
+
get base() {
|
|
115
|
+
return config.defaultClassName.split(" ")[0];
|
|
116
|
+
},
|
|
117
|
+
get variants() {
|
|
118
|
+
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
return runtimeFn;
|
|
122
|
+
};
|
|
123
|
+
var semanticClassNames = { container: "rcs-container", header: "rcs-header", tabs: "rcs-tabs", tab: "rcs-tab", tabActive: "rcs-tab-active", titleBar: "rcs-title-bar", headerActions: "rcs-header-actions", copyButton: "rcs-copy-btn", separator: "rcs-separator", codePanel: "rcs-code-panel", codeScroll: "rcs-code-scroll", codeBody: "rcs-code-body", fileIcon: "rcs-file-icon", editContainer: "rcs-edit-container", editOverlay: "rcs-edit-overlay", editLabel: "rcs-edit-label", modal: "rcs-modal", modalTitlebar: "rcs-modal-titlebar", modalTitle: "rcs-modal-title", modalIconButton: "rcs-modal-icon-btn", modalBody: "rcs-modal-body", modalSidebar: "rcs-modal-sidebar", sidebarHeader: "rcs-sidebar-header", sidebarAddButton: "rcs-sidebar-add-btn", fileList: "rcs-file-list", fileItem: "rcs-file-item", fileItemActive: "rcs-file-item-active", fileItemDragging: "rcs-file-item-dragging", fileDragHandle: "rcs-file-drag-handle", fileName: "rcs-file-name", fileDelete: "rcs-file-delete", renameInput: "rcs-rename-input", modalEditor: "rcs-modal-editor", breadcrumb: "rcs-breadcrumb", breadcrumbLeft: "rcs-breadcrumb-left", breadcrumbName: "rcs-breadcrumb-name", breadcrumbLang: "rcs-breadcrumb-lang", editorContainer: "rcs-editor-container", dragOverlay: "rcs-drag-overlay" };
|
|
124
|
+
var container = "hjkryc0";
|
|
125
|
+
var header = "hjkryc1";
|
|
126
|
+
var tabs = "hjkryc2";
|
|
127
|
+
var tab = createRuntimeFn({ defaultClassName: "hjkryc4 hjkryc3", variantClassNames: { active: { true: "hjkryc5", false: "hjkryc6" } }, defaultVariants: { active: false }, compoundVariants: [] });
|
|
128
|
+
var titleBar = "hjkryc7";
|
|
129
|
+
var headerActions = "hjkryc8";
|
|
130
|
+
var copyButton = "hjkryc9";
|
|
131
|
+
var separator = "hjkryca";
|
|
132
|
+
var codeScroll = "hjkrycb";
|
|
133
|
+
var codeBody = "hjkrycc";
|
|
134
|
+
var fileIcon = "hjkrycd";
|
|
135
|
+
var editContainer = "hjkryce";
|
|
136
|
+
var editOverlay = "hjkrycf";
|
|
137
|
+
var editLabel = "hjkrycg";
|
|
138
|
+
var codeSnippetDialogPopup = "hjkrych";
|
|
139
|
+
var modal = "hjkryci";
|
|
140
|
+
var modalTitlebar = "hjkrycj";
|
|
141
|
+
var modalTitle = "hjkryck";
|
|
142
|
+
var modalIconButton = "hjkrycl";
|
|
143
|
+
var modalBody = "hjkrycm";
|
|
144
|
+
var modalSidebar = "hjkrycn";
|
|
145
|
+
var sidebarHeader = "hjkryco";
|
|
146
|
+
var sidebarAddButton = "hjkrycp";
|
|
147
|
+
var fileList = "hjkrycq";
|
|
148
|
+
var fileItem = createRuntimeFn({ defaultClassName: "hjkrycs hjkrycr", variantClassNames: { active: { true: "hjkryct", false: "hjkrycu" }, dragging: { true: "hjkrycv", false: "hjkrycw" } }, defaultVariants: { active: false, dragging: false }, compoundVariants: [] });
|
|
149
|
+
var fileDragHandle = "hjkrycx";
|
|
150
|
+
var fileName = "hjkrycy";
|
|
151
|
+
var fileDelete = "hjkrycz";
|
|
152
|
+
var renameInput = "hjkryc10";
|
|
153
|
+
var modalEditor = "hjkryc11";
|
|
154
|
+
var breadcrumb = "hjkryc12";
|
|
155
|
+
var breadcrumbLeft = "hjkryc13";
|
|
156
|
+
var breadcrumbName = "hjkryc14";
|
|
157
|
+
var breadcrumbLang = "hjkryc15";
|
|
158
|
+
var editorContainer = "hjkryc16";
|
|
159
|
+
var dragOverlay = "hjkryc17";
|
|
20
160
|
const EXT_TO_ICON = {
|
|
21
161
|
ts: "typescript",
|
|
22
162
|
js: "javascript",
|
|
@@ -67,7 +207,7 @@ const FileIcon = ({
|
|
|
67
207
|
return /* @__PURE__ */ jsx(
|
|
68
208
|
"span",
|
|
69
209
|
{
|
|
70
|
-
className:
|
|
210
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
71
211
|
style: {
|
|
72
212
|
width: size,
|
|
73
213
|
height: size,
|
|
@@ -84,12 +224,10 @@ const FileIcon = ({
|
|
|
84
224
|
return /* @__PURE__ */ jsx(
|
|
85
225
|
"span",
|
|
86
226
|
{
|
|
87
|
-
className:
|
|
227
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
88
228
|
style: {
|
|
89
229
|
width: size,
|
|
90
|
-
height: size
|
|
91
|
-
display: "inline-flex",
|
|
92
|
-
flexShrink: 0
|
|
230
|
+
height: size
|
|
93
231
|
},
|
|
94
232
|
dangerouslySetInnerHTML: { __html: html }
|
|
95
233
|
}
|
|
@@ -163,14 +301,14 @@ const SortableFileItem = ({
|
|
|
163
301
|
{
|
|
164
302
|
ref: setNodeRef,
|
|
165
303
|
style,
|
|
166
|
-
className:
|
|
304
|
+
className: `${fileItem({ active: isActive, dragging: isDragging })} ${semanticClassNames.fileItem} ${isActive ? semanticClassNames.fileItemActive : ""} ${isDragging ? semanticClassNames.fileItemDragging : ""}`.trim(),
|
|
167
305
|
onClick: onSelect,
|
|
168
306
|
onDoubleClick: onStartRename,
|
|
169
307
|
children: [
|
|
170
308
|
/* @__PURE__ */ jsx(
|
|
171
309
|
"span",
|
|
172
310
|
{
|
|
173
|
-
className:
|
|
311
|
+
className: `${fileDragHandle} ${semanticClassNames.fileDragHandle}`,
|
|
174
312
|
...attributes,
|
|
175
313
|
...listeners,
|
|
176
314
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -181,7 +319,7 @@ const SortableFileItem = ({
|
|
|
181
319
|
isEditing ? /* @__PURE__ */ jsx(
|
|
182
320
|
"input",
|
|
183
321
|
{
|
|
184
|
-
className:
|
|
322
|
+
className: `${renameInput} ${semanticClassNames.renameInput}`,
|
|
185
323
|
value: editValue,
|
|
186
324
|
onChange: (e) => onEditChange(e.target.value),
|
|
187
325
|
onBlur: onCommitRename,
|
|
@@ -192,12 +330,12 @@ const SortableFileItem = ({
|
|
|
192
330
|
autoFocus: true,
|
|
193
331
|
onClick: (e) => e.stopPropagation()
|
|
194
332
|
}
|
|
195
|
-
) : /* @__PURE__ */ jsx("span", { className:
|
|
333
|
+
) : /* @__PURE__ */ jsx("span", { className: `${fileName} ${semanticClassNames.fileName}`, children: file.filename }),
|
|
196
334
|
canDelete && /* @__PURE__ */ jsx(
|
|
197
335
|
"button",
|
|
198
336
|
{
|
|
199
337
|
type: "button",
|
|
200
|
-
className:
|
|
338
|
+
className: `${fileDelete} ${semanticClassNames.fileDelete}`,
|
|
201
339
|
onClick: (e) => {
|
|
202
340
|
e.stopPropagation();
|
|
203
341
|
onDelete();
|
|
@@ -237,8 +375,8 @@ const CodeEditorModal = ({
|
|
|
237
375
|
);
|
|
238
376
|
};
|
|
239
377
|
useEffect(() => {
|
|
240
|
-
const
|
|
241
|
-
if (!
|
|
378
|
+
const container2 = containerRef.current;
|
|
379
|
+
if (!container2) return;
|
|
242
380
|
const file = editFilesRef.current.find((f) => f.filename === activeFilename);
|
|
243
381
|
if (!file) return;
|
|
244
382
|
let disposed = false;
|
|
@@ -258,7 +396,7 @@ const CodeEditorModal = ({
|
|
|
258
396
|
const editor = shikiCode().withOptions({
|
|
259
397
|
readOnly: false,
|
|
260
398
|
lineNumbers: "on"
|
|
261
|
-
}).create(
|
|
399
|
+
}).create(container2, highlighter, {
|
|
262
400
|
value: file.code,
|
|
263
401
|
language: resolvedLang,
|
|
264
402
|
theme
|
|
@@ -346,102 +484,162 @@ const CodeEditorModal = ({
|
|
|
346
484
|
const dragActiveFile = dragActiveId ? editFiles.find((f) => f.filename === dragActiveId) : null;
|
|
347
485
|
const { className: portalThemeClassName } = usePortalTheme();
|
|
348
486
|
const language = activeFile ? activeFile.language ?? getLanguageFromFilename(activeFile.filename) : "";
|
|
349
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
350
|
-
/* @__PURE__ */ jsxs(
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
className: "rcs-modal-icon-btn",
|
|
357
|
-
onClick: handleDismiss,
|
|
358
|
-
children: /* @__PURE__ */ jsx(X, { size: 14 })
|
|
359
|
-
}
|
|
360
|
-
)
|
|
361
|
-
] }),
|
|
362
|
-
/* @__PURE__ */ jsxs("div", { className: "rcs-modal-body", children: [
|
|
363
|
-
/* @__PURE__ */ jsxs("div", { className: "rcs-modal-sidebar", children: [
|
|
364
|
-
/* @__PURE__ */ jsxs("div", { className: "rcs-sidebar-header", children: [
|
|
365
|
-
/* @__PURE__ */ jsx("span", { children: "Files" }),
|
|
487
|
+
return /* @__PURE__ */ jsxs("div", { className: `${modal} ${semanticClassNames.modal}`, children: [
|
|
488
|
+
/* @__PURE__ */ jsxs(
|
|
489
|
+
"div",
|
|
490
|
+
{
|
|
491
|
+
className: `${modalTitlebar} ${semanticClassNames.modalTitlebar}`,
|
|
492
|
+
children: [
|
|
493
|
+
/* @__PURE__ */ jsx("span", { className: `${modalTitle} ${semanticClassNames.modalTitle}`, children: "Code Snippet" }),
|
|
366
494
|
/* @__PURE__ */ jsx(
|
|
367
495
|
"button",
|
|
368
496
|
{
|
|
369
497
|
type: "button",
|
|
370
|
-
className:
|
|
371
|
-
onClick:
|
|
372
|
-
|
|
373
|
-
children: /* @__PURE__ */ jsx(Plus, { size: 14 })
|
|
498
|
+
className: `${modalIconButton} ${semanticClassNames.modalIconButton}`,
|
|
499
|
+
onClick: handleDismiss,
|
|
500
|
+
children: /* @__PURE__ */ jsx(X, { size: 14 })
|
|
374
501
|
}
|
|
375
502
|
)
|
|
376
|
-
]
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
{
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
503
|
+
]
|
|
504
|
+
}
|
|
505
|
+
),
|
|
506
|
+
/* @__PURE__ */ jsxs("div", { className: `${modalBody} ${semanticClassNames.modalBody}`, children: [
|
|
507
|
+
/* @__PURE__ */ jsxs(
|
|
508
|
+
"div",
|
|
509
|
+
{
|
|
510
|
+
className: `${modalSidebar} ${semanticClassNames.modalSidebar}`,
|
|
511
|
+
children: [
|
|
512
|
+
/* @__PURE__ */ jsxs(
|
|
513
|
+
"div",
|
|
514
|
+
{
|
|
515
|
+
className: `${sidebarHeader} ${semanticClassNames.sidebarHeader}`,
|
|
516
|
+
children: [
|
|
517
|
+
/* @__PURE__ */ jsx("span", { children: "Files" }),
|
|
518
|
+
/* @__PURE__ */ jsx(
|
|
519
|
+
"button",
|
|
393
520
|
{
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
/* @__PURE__ */ jsx(
|
|
421
|
-
FileIcon,
|
|
521
|
+
type: "button",
|
|
522
|
+
className: `${sidebarAddButton} ${semanticClassNames.sidebarAddButton}`,
|
|
523
|
+
onClick: handleAddFile,
|
|
524
|
+
"aria-label": "Add file",
|
|
525
|
+
children: /* @__PURE__ */ jsx(Plus, { size: 14 })
|
|
526
|
+
}
|
|
527
|
+
)
|
|
528
|
+
]
|
|
529
|
+
}
|
|
530
|
+
),
|
|
531
|
+
/* @__PURE__ */ jsx("div", { className: `${fileList} ${semanticClassNames.fileList}`, children: /* @__PURE__ */ jsxs(
|
|
532
|
+
DndContext,
|
|
533
|
+
{
|
|
534
|
+
sensors,
|
|
535
|
+
collisionDetection: closestCenter,
|
|
536
|
+
onDragStart: (event) => setDragActiveId(event.active.id),
|
|
537
|
+
onDragEnd: handleDragEnd,
|
|
538
|
+
onDragCancel: () => setDragActiveId(null),
|
|
539
|
+
children: [
|
|
540
|
+
/* @__PURE__ */ jsx(
|
|
541
|
+
SortableContext,
|
|
542
|
+
{
|
|
543
|
+
items: fileIds,
|
|
544
|
+
strategy: verticalListSortingStrategy,
|
|
545
|
+
children: editFiles.map((file) => /* @__PURE__ */ jsx(
|
|
546
|
+
SortableFileItem,
|
|
422
547
|
{
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
548
|
+
file,
|
|
549
|
+
isActive: file.filename === activeFilename,
|
|
550
|
+
isEditing: editingFilename === file.filename,
|
|
551
|
+
editValue: newFilenameInput,
|
|
552
|
+
canDelete: editFiles.length > 1,
|
|
553
|
+
onSelect: () => setActiveFilename(file.filename),
|
|
554
|
+
onStartRename: () => {
|
|
555
|
+
setEditingFilename(file.filename);
|
|
556
|
+
setNewFilenameInput(file.filename);
|
|
557
|
+
},
|
|
558
|
+
onEditChange: setNewFilenameInput,
|
|
559
|
+
onCommitRename: () => handleRenameFile(file.filename, newFilenameInput),
|
|
560
|
+
onCancelRename: () => setEditingFilename(null),
|
|
561
|
+
onDelete: () => handleDeleteFile(file.filename)
|
|
562
|
+
},
|
|
563
|
+
file.filename
|
|
564
|
+
))
|
|
565
|
+
}
|
|
566
|
+
),
|
|
567
|
+
typeof document !== "undefined" ? createPortal(
|
|
568
|
+
/* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(
|
|
569
|
+
"div",
|
|
570
|
+
{
|
|
571
|
+
className: portalThemeClassName,
|
|
572
|
+
style: { display: "contents" },
|
|
573
|
+
children: dragActiveFile ? /* @__PURE__ */ jsxs(
|
|
574
|
+
"div",
|
|
575
|
+
{
|
|
576
|
+
className: `${fileItem()} ${semanticClassNames.fileItem} ${dragOverlay} ${semanticClassNames.dragOverlay}`,
|
|
577
|
+
children: [
|
|
578
|
+
/* @__PURE__ */ jsx(
|
|
579
|
+
FileIcon,
|
|
580
|
+
{
|
|
581
|
+
filename: dragActiveFile.filename,
|
|
582
|
+
size: 14
|
|
583
|
+
}
|
|
584
|
+
),
|
|
585
|
+
/* @__PURE__ */ jsx(
|
|
586
|
+
"span",
|
|
587
|
+
{
|
|
588
|
+
className: `${fileName} ${semanticClassNames.fileName}`,
|
|
589
|
+
children: dragActiveFile.filename
|
|
590
|
+
}
|
|
591
|
+
)
|
|
592
|
+
]
|
|
593
|
+
}
|
|
594
|
+
) : null
|
|
595
|
+
}
|
|
596
|
+
) }),
|
|
597
|
+
document.body
|
|
598
|
+
) : null
|
|
599
|
+
]
|
|
600
|
+
}
|
|
601
|
+
) })
|
|
602
|
+
]
|
|
603
|
+
}
|
|
604
|
+
),
|
|
605
|
+
/* @__PURE__ */ jsxs(
|
|
606
|
+
"div",
|
|
607
|
+
{
|
|
608
|
+
className: `${modalEditor} ${semanticClassNames.modalEditor}`,
|
|
609
|
+
children: [
|
|
610
|
+
/* @__PURE__ */ jsx("div", { className: `${breadcrumb} ${semanticClassNames.breadcrumb}`, children: /* @__PURE__ */ jsx(
|
|
611
|
+
"div",
|
|
612
|
+
{
|
|
613
|
+
className: `${breadcrumbLeft} ${semanticClassNames.breadcrumbLeft}`,
|
|
614
|
+
children: activeFile && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
615
|
+
/* @__PURE__ */ jsx(FileIcon, { filename: activeFile.filename, size: 14 }),
|
|
616
|
+
/* @__PURE__ */ jsx(
|
|
617
|
+
"span",
|
|
618
|
+
{
|
|
619
|
+
className: `${breadcrumbName} ${semanticClassNames.breadcrumbName}`,
|
|
620
|
+
children: activeFile.filename
|
|
621
|
+
}
|
|
622
|
+
),
|
|
623
|
+
language && /* @__PURE__ */ jsx(
|
|
624
|
+
"span",
|
|
625
|
+
{
|
|
626
|
+
className: `${breadcrumbLang} ${semanticClassNames.breadcrumbLang}`,
|
|
627
|
+
children: language
|
|
628
|
+
}
|
|
629
|
+
)
|
|
630
|
+
] })
|
|
631
|
+
}
|
|
632
|
+
) }),
|
|
633
|
+
/* @__PURE__ */ jsx(
|
|
634
|
+
"div",
|
|
635
|
+
{
|
|
636
|
+
ref: containerRef,
|
|
637
|
+
className: `${editorContainer} ${semanticClassNames.editorContainer}`
|
|
638
|
+
}
|
|
639
|
+
)
|
|
640
|
+
]
|
|
641
|
+
}
|
|
642
|
+
)
|
|
445
643
|
] })
|
|
446
644
|
] });
|
|
447
645
|
};
|
|
@@ -458,7 +656,7 @@ const CopyButton = ({ text }) => {
|
|
|
458
656
|
"button",
|
|
459
657
|
{
|
|
460
658
|
type: "button",
|
|
461
|
-
className:
|
|
659
|
+
className: `${copyButton} ${semanticClassNames.copyButton}`,
|
|
462
660
|
onClick: handleCopy,
|
|
463
661
|
"aria-label": copied ? "Copied" : "Copy code",
|
|
464
662
|
children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
|
|
@@ -497,49 +695,89 @@ const CodeSnippetRenderer = ({
|
|
|
497
695
|
};
|
|
498
696
|
}, [files, colorScheme]);
|
|
499
697
|
if (!activeFile) return null;
|
|
500
|
-
return /* @__PURE__ */ jsxs(
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
className: `rcs-tab ${index === activeIndex ? "rcs-tab-active" : ""}`,
|
|
510
|
-
children: [
|
|
511
|
-
/* @__PURE__ */ jsx(FileIcon, { filename: file.filename, size: 14 }),
|
|
512
|
-
/* @__PURE__ */ jsx("span", { children: file.filename })
|
|
513
|
-
]
|
|
514
|
-
},
|
|
515
|
-
file.filename
|
|
516
|
-
)) }) : /* @__PURE__ */ jsxs("div", { className: "rcs-title-bar", children: [
|
|
517
|
-
/* @__PURE__ */ jsx(FileIcon, { filename: activeFile.filename, size: 14 }),
|
|
518
|
-
/* @__PURE__ */ jsx("span", { children: activeFile.filename })
|
|
519
|
-
] }),
|
|
520
|
-
/* @__PURE__ */ jsx("div", { className: "rcs-header-actions", children: /* @__PURE__ */ jsx(CopyButton, { text: activeFile.code }) })
|
|
521
|
-
] }),
|
|
522
|
-
/* @__PURE__ */ jsx("div", { className: "rcs-separator" }),
|
|
523
|
-
files.map((file, index) => {
|
|
524
|
-
const html = htmlMap[file.filename];
|
|
525
|
-
return /* @__PURE__ */ jsx(
|
|
526
|
-
"div",
|
|
527
|
-
{
|
|
528
|
-
role: isMultiFile ? "tabpanel" : void 0,
|
|
529
|
-
className: "rcs-code-panel",
|
|
530
|
-
style: { display: index === activeIndex ? "block" : "none" },
|
|
531
|
-
children: /* @__PURE__ */ jsx("div", { className: "rcs-code-scroll", children: html ? /* @__PURE__ */ jsx(
|
|
698
|
+
return /* @__PURE__ */ jsxs(
|
|
699
|
+
"div",
|
|
700
|
+
{
|
|
701
|
+
className: `${container} ${semanticClassNames.container}`,
|
|
702
|
+
role: "region",
|
|
703
|
+
"aria-label": "Code snippet",
|
|
704
|
+
children: [
|
|
705
|
+
/* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
|
|
706
|
+
isMultiFile ? /* @__PURE__ */ jsx(
|
|
532
707
|
"div",
|
|
533
708
|
{
|
|
534
|
-
className:
|
|
535
|
-
|
|
709
|
+
className: `${tabs} ${semanticClassNames.tabs}`,
|
|
710
|
+
role: "tablist",
|
|
711
|
+
"aria-label": "Code file tabs",
|
|
712
|
+
children: files.map((file, index) => /* @__PURE__ */ jsxs(
|
|
713
|
+
"button",
|
|
714
|
+
{
|
|
715
|
+
type: "button",
|
|
716
|
+
role: "tab",
|
|
717
|
+
"aria-selected": index === activeIndex,
|
|
718
|
+
onClick: () => setActiveIndex(index),
|
|
719
|
+
className: `${tab({ active: index === activeIndex })} ${semanticClassNames.tab} ${index === activeIndex ? semanticClassNames.tabActive : ""}`.trim(),
|
|
720
|
+
children: [
|
|
721
|
+
/* @__PURE__ */ jsx(FileIcon, { filename: file.filename, size: 14 }),
|
|
722
|
+
/* @__PURE__ */ jsx("span", { children: file.filename })
|
|
723
|
+
]
|
|
724
|
+
},
|
|
725
|
+
file.filename
|
|
726
|
+
))
|
|
536
727
|
}
|
|
537
|
-
) : /* @__PURE__ */
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
728
|
+
) : /* @__PURE__ */ jsxs(
|
|
729
|
+
"div",
|
|
730
|
+
{
|
|
731
|
+
className: `${titleBar} ${semanticClassNames.titleBar}`,
|
|
732
|
+
children: [
|
|
733
|
+
/* @__PURE__ */ jsx(FileIcon, { filename: activeFile.filename, size: 14 }),
|
|
734
|
+
/* @__PURE__ */ jsx("span", { children: activeFile.filename })
|
|
735
|
+
]
|
|
736
|
+
}
|
|
737
|
+
),
|
|
738
|
+
/* @__PURE__ */ jsx(
|
|
739
|
+
"div",
|
|
740
|
+
{
|
|
741
|
+
className: `${headerActions} ${semanticClassNames.headerActions}`,
|
|
742
|
+
children: /* @__PURE__ */ jsx(CopyButton, { text: activeFile.code })
|
|
743
|
+
}
|
|
744
|
+
)
|
|
745
|
+
] }),
|
|
746
|
+
/* @__PURE__ */ jsx("div", { className: `${separator} ${semanticClassNames.separator}` }),
|
|
747
|
+
files.map((file, index) => {
|
|
748
|
+
const html = htmlMap[file.filename];
|
|
749
|
+
return /* @__PURE__ */ jsx(
|
|
750
|
+
"div",
|
|
751
|
+
{
|
|
752
|
+
role: isMultiFile ? "tabpanel" : void 0,
|
|
753
|
+
className: semanticClassNames.codePanel,
|
|
754
|
+
style: { display: index === activeIndex ? "block" : "none" },
|
|
755
|
+
children: /* @__PURE__ */ jsx(
|
|
756
|
+
"div",
|
|
757
|
+
{
|
|
758
|
+
className: `${codeScroll} ${semanticClassNames.codeScroll}`,
|
|
759
|
+
children: html ? /* @__PURE__ */ jsx(
|
|
760
|
+
"div",
|
|
761
|
+
{
|
|
762
|
+
className: `${codeBody} ${semanticClassNames.codeBody}`,
|
|
763
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
764
|
+
}
|
|
765
|
+
) : /* @__PURE__ */ jsx(
|
|
766
|
+
"pre",
|
|
767
|
+
{
|
|
768
|
+
className: `${codeBody} ${semanticClassNames.codeBody}`,
|
|
769
|
+
children: /* @__PURE__ */ jsx("code", { children: file.code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) })
|
|
770
|
+
}
|
|
771
|
+
)
|
|
772
|
+
}
|
|
773
|
+
)
|
|
774
|
+
},
|
|
775
|
+
file.filename
|
|
776
|
+
);
|
|
777
|
+
})
|
|
778
|
+
]
|
|
779
|
+
}
|
|
780
|
+
);
|
|
543
781
|
};
|
|
544
782
|
const CodeSnippetEditRenderer = ({
|
|
545
783
|
files,
|
|
@@ -564,16 +802,16 @@ const CodeSnippetEditRenderer = ({
|
|
|
564
802
|
clickOutsideToDismiss: false
|
|
565
803
|
});
|
|
566
804
|
}, [files, onFilesChange, portalClassName, colorScheme]);
|
|
567
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
805
|
+
return /* @__PURE__ */ jsxs("div", { className: `${editContainer} ${semanticClassNames.editContainer}`, children: [
|
|
568
806
|
/* @__PURE__ */ jsx(CodeSnippetRenderer, { files }),
|
|
569
807
|
/* @__PURE__ */ jsx(
|
|
570
808
|
"button",
|
|
571
809
|
{
|
|
572
810
|
type: "button",
|
|
573
|
-
className:
|
|
811
|
+
className: `${editOverlay} ${semanticClassNames.editOverlay}`,
|
|
574
812
|
onClick: handleEdit,
|
|
575
813
|
"aria-label": "Edit code snippet",
|
|
576
|
-
children: /* @__PURE__ */ jsxs("span", { className:
|
|
814
|
+
children: /* @__PURE__ */ jsxs("span", { className: `${editLabel} ${semanticClassNames.editLabel}`, children: [
|
|
577
815
|
/* @__PURE__ */ jsx(Pencil, { size: 14 }),
|
|
578
816
|
"Edit"
|
|
579
817
|
] })
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.hjkryc0 {
|
|
2
2
|
position: relative;
|
|
3
3
|
border-radius: 0.5rem;
|
|
4
4
|
overflow: hidden;
|
|
@@ -6,24 +6,24 @@
|
|
|
6
6
|
background: var(--rc-code-bg);
|
|
7
7
|
font-size: 0.875rem;
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
.hjkryc1 {
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
12
|
justify-content: space-between;
|
|
13
13
|
padding: 0 12px;
|
|
14
14
|
min-height: 40px;
|
|
15
15
|
}
|
|
16
|
-
.
|
|
16
|
+
.hjkryc2 {
|
|
17
17
|
display: flex;
|
|
18
18
|
align-items: center;
|
|
19
19
|
gap: 2px;
|
|
20
20
|
overflow-x: auto;
|
|
21
21
|
scrollbar-width: none;
|
|
22
22
|
}
|
|
23
|
-
.
|
|
23
|
+
.hjkryc2::-webkit-scrollbar {
|
|
24
24
|
display: none;
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
.hjkryc3 {
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
29
29
|
gap: 6px;
|
|
@@ -40,15 +40,15 @@
|
|
|
40
40
|
flex-shrink: 0;
|
|
41
41
|
transition: color 0.15s, background 0.15s;
|
|
42
42
|
}
|
|
43
|
-
.
|
|
43
|
+
.hjkryc3:hover {
|
|
44
44
|
color: var(--rc-text);
|
|
45
45
|
background: color-mix(in srgb, var(--rc-text) 5%, transparent);
|
|
46
46
|
}
|
|
47
|
-
.
|
|
47
|
+
.hjkryc5 {
|
|
48
48
|
color: var(--rc-text);
|
|
49
49
|
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
50
50
|
}
|
|
51
|
-
.
|
|
51
|
+
.hjkryc7 {
|
|
52
52
|
display: flex;
|
|
53
53
|
align-items: center;
|
|
54
54
|
gap: 6px;
|
|
@@ -58,16 +58,16 @@
|
|
|
58
58
|
font-weight: 500;
|
|
59
59
|
color: var(--rc-text-secondary);
|
|
60
60
|
}
|
|
61
|
-
.
|
|
61
|
+
.hjkryc8 {
|
|
62
62
|
display: flex;
|
|
63
63
|
align-items: center;
|
|
64
64
|
opacity: 0;
|
|
65
65
|
transition: opacity 0.15s;
|
|
66
66
|
}
|
|
67
|
-
.
|
|
67
|
+
.hjkryc0:hover .hjkryc8 {
|
|
68
68
|
opacity: 1;
|
|
69
69
|
}
|
|
70
|
-
.
|
|
70
|
+
.hjkryc9 {
|
|
71
71
|
display: inline-flex;
|
|
72
72
|
align-items: center;
|
|
73
73
|
justify-content: center;
|
|
@@ -80,44 +80,44 @@
|
|
|
80
80
|
cursor: pointer;
|
|
81
81
|
transition: background 0.15s, color 0.15s;
|
|
82
82
|
}
|
|
83
|
-
.
|
|
83
|
+
.hjkryc9:hover {
|
|
84
84
|
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
85
85
|
color: var(--rc-text);
|
|
86
86
|
}
|
|
87
|
-
.
|
|
87
|
+
.hjkryca {
|
|
88
88
|
height: 1px;
|
|
89
89
|
background: var(--rc-border);
|
|
90
90
|
opacity: 0.6;
|
|
91
91
|
}
|
|
92
|
-
.
|
|
92
|
+
.hjkrycb {
|
|
93
93
|
overflow-x: auto;
|
|
94
94
|
}
|
|
95
|
-
.
|
|
95
|
+
.hjkrycc {
|
|
96
96
|
padding: 12px 16px;
|
|
97
97
|
margin: 0;
|
|
98
98
|
font-size: 0.8125rem;
|
|
99
99
|
line-height: 1.7;
|
|
100
100
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
101
101
|
}
|
|
102
|
-
.
|
|
102
|
+
.hjkrycc pre {
|
|
103
103
|
margin: 0;
|
|
104
104
|
background: transparent !important;
|
|
105
105
|
}
|
|
106
|
-
.
|
|
106
|
+
.hjkrycc code {
|
|
107
107
|
font-family: inherit;
|
|
108
108
|
}
|
|
109
|
-
.
|
|
110
|
-
display: flex;
|
|
111
|
-
flex-
|
|
109
|
+
.hjkrycd {
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
flex-shrink: 0;
|
|
112
112
|
}
|
|
113
|
-
.
|
|
113
|
+
.hjkrycd svg {
|
|
114
114
|
width: 100%;
|
|
115
115
|
height: 100%;
|
|
116
116
|
}
|
|
117
|
-
.
|
|
117
|
+
.hjkryce {
|
|
118
118
|
position: relative;
|
|
119
119
|
}
|
|
120
|
-
.
|
|
120
|
+
.hjkrycf {
|
|
121
121
|
position: absolute;
|
|
122
122
|
inset: 0;
|
|
123
123
|
z-index: 5;
|
|
@@ -128,10 +128,10 @@
|
|
|
128
128
|
background: transparent;
|
|
129
129
|
border: none;
|
|
130
130
|
}
|
|
131
|
-
.
|
|
131
|
+
.hjkrycf:hover {
|
|
132
132
|
background: color-mix(in srgb, currentColor 6%, transparent);
|
|
133
133
|
}
|
|
134
|
-
.
|
|
134
|
+
.hjkrycg {
|
|
135
135
|
display: flex;
|
|
136
136
|
align-items: center;
|
|
137
137
|
gap: 6px;
|
|
@@ -145,10 +145,10 @@
|
|
|
145
145
|
opacity: 0;
|
|
146
146
|
transition: opacity 0.2s;
|
|
147
147
|
}
|
|
148
|
-
.
|
|
148
|
+
.hjkryce:hover .hjkrycg {
|
|
149
149
|
opacity: 1;
|
|
150
150
|
}
|
|
151
|
-
.
|
|
151
|
+
.hjkrych.hjkrych {
|
|
152
152
|
padding: 0;
|
|
153
153
|
gap: 0;
|
|
154
154
|
display: flex;
|
|
@@ -158,20 +158,20 @@
|
|
|
158
158
|
height: min(720px, 80vh);
|
|
159
159
|
border-radius: 0.75rem;
|
|
160
160
|
}
|
|
161
|
-
.
|
|
161
|
+
.hjkrych.hjkrych[data-open] {
|
|
162
162
|
animation: none;
|
|
163
163
|
}
|
|
164
|
-
.
|
|
164
|
+
.hjkrych.hjkrych[data-closed] {
|
|
165
165
|
animation: none;
|
|
166
166
|
}
|
|
167
|
-
.
|
|
167
|
+
.hjkryci {
|
|
168
168
|
display: flex;
|
|
169
169
|
flex-direction: column;
|
|
170
170
|
flex: 1;
|
|
171
171
|
min-height: 0;
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
}
|
|
174
|
-
.
|
|
174
|
+
.hjkrycj {
|
|
175
175
|
display: flex;
|
|
176
176
|
align-items: center;
|
|
177
177
|
justify-content: space-between;
|
|
@@ -180,12 +180,12 @@
|
|
|
180
180
|
border-bottom: 1px solid var(--rc-border);
|
|
181
181
|
flex-shrink: 0;
|
|
182
182
|
}
|
|
183
|
-
.
|
|
183
|
+
.hjkryck {
|
|
184
184
|
font-size: 0.75rem;
|
|
185
185
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
186
186
|
color: var(--rc-text-secondary);
|
|
187
187
|
}
|
|
188
|
-
.
|
|
188
|
+
.hjkrycl {
|
|
189
189
|
display: inline-flex;
|
|
190
190
|
align-items: center;
|
|
191
191
|
justify-content: center;
|
|
@@ -198,16 +198,16 @@
|
|
|
198
198
|
cursor: pointer;
|
|
199
199
|
transition: background 0.15s, color 0.15s;
|
|
200
200
|
}
|
|
201
|
-
.
|
|
201
|
+
.hjkrycl:hover {
|
|
202
202
|
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
203
203
|
color: var(--rc-text);
|
|
204
204
|
}
|
|
205
|
-
.
|
|
205
|
+
.hjkrycm {
|
|
206
206
|
display: flex;
|
|
207
207
|
flex: 1;
|
|
208
208
|
min-height: 0;
|
|
209
209
|
}
|
|
210
|
-
.
|
|
210
|
+
.hjkrycn {
|
|
211
211
|
width: 224px;
|
|
212
212
|
flex-shrink: 0;
|
|
213
213
|
border-right: 1px solid var(--rc-border);
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
flex-direction: column;
|
|
216
216
|
overflow: hidden;
|
|
217
217
|
}
|
|
218
|
-
.
|
|
218
|
+
.hjkryco {
|
|
219
219
|
display: flex;
|
|
220
220
|
align-items: center;
|
|
221
221
|
justify-content: space-between;
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
letter-spacing: 0.05em;
|
|
227
227
|
color: color-mix(in srgb, var(--rc-text-secondary) 60%, transparent);
|
|
228
228
|
}
|
|
229
|
-
.
|
|
229
|
+
.hjkrycp {
|
|
230
230
|
display: inline-flex;
|
|
231
231
|
align-items: center;
|
|
232
232
|
justify-content: center;
|
|
@@ -239,16 +239,16 @@
|
|
|
239
239
|
cursor: pointer;
|
|
240
240
|
transition: background 0.15s, color 0.15s;
|
|
241
241
|
}
|
|
242
|
-
.
|
|
242
|
+
.hjkrycp:hover {
|
|
243
243
|
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
244
244
|
color: var(--rc-text);
|
|
245
245
|
}
|
|
246
|
-
.
|
|
246
|
+
.hjkrycq {
|
|
247
247
|
flex: 1;
|
|
248
248
|
overflow-y: auto;
|
|
249
249
|
padding: 0 6px 8px;
|
|
250
250
|
}
|
|
251
|
-
.
|
|
251
|
+
.hjkrycr {
|
|
252
252
|
display: flex;
|
|
253
253
|
align-items: center;
|
|
254
254
|
gap: 4px;
|
|
@@ -261,7 +261,18 @@
|
|
|
261
261
|
color: var(--rc-text-secondary);
|
|
262
262
|
transition: background 0.15s, color 0.15s;
|
|
263
263
|
}
|
|
264
|
-
.
|
|
264
|
+
.hjkrycr:hover {
|
|
265
|
+
background: color-mix(in srgb, var(--rc-text) 5%, transparent);
|
|
266
|
+
color: var(--rc-text);
|
|
267
|
+
}
|
|
268
|
+
.hjkryct {
|
|
269
|
+
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
270
|
+
color: var(--rc-text);
|
|
271
|
+
}
|
|
272
|
+
.hjkrycv {
|
|
273
|
+
opacity: 0.4;
|
|
274
|
+
}
|
|
275
|
+
.hjkrycx {
|
|
265
276
|
display: inline-flex;
|
|
266
277
|
align-items: center;
|
|
267
278
|
cursor: grab;
|
|
@@ -269,24 +280,16 @@
|
|
|
269
280
|
flex-shrink: 0;
|
|
270
281
|
touch-action: none;
|
|
271
282
|
}
|
|
272
|
-
.
|
|
283
|
+
.hjkrycx:active {
|
|
273
284
|
cursor: grabbing;
|
|
274
285
|
}
|
|
275
|
-
.
|
|
276
|
-
background: color-mix(in srgb, var(--rc-text) 5%, transparent);
|
|
277
|
-
color: var(--rc-text);
|
|
278
|
-
}
|
|
279
|
-
.rcs-file-item-active {
|
|
280
|
-
background: color-mix(in srgb, var(--rc-text) 8%, transparent);
|
|
281
|
-
color: var(--rc-text);
|
|
282
|
-
}
|
|
283
|
-
.rcs-file-name {
|
|
286
|
+
.hjkrycy {
|
|
284
287
|
flex: 1;
|
|
285
288
|
overflow: hidden;
|
|
286
289
|
text-overflow: ellipsis;
|
|
287
290
|
white-space: nowrap;
|
|
288
291
|
}
|
|
289
|
-
.
|
|
292
|
+
.hjkrycz {
|
|
290
293
|
display: none;
|
|
291
294
|
align-items: center;
|
|
292
295
|
justify-content: center;
|
|
@@ -299,14 +302,14 @@
|
|
|
299
302
|
cursor: pointer;
|
|
300
303
|
flex-shrink: 0;
|
|
301
304
|
}
|
|
302
|
-
.
|
|
305
|
+
.hjkrycr:hover .hjkrycz {
|
|
303
306
|
display: inline-flex;
|
|
304
307
|
}
|
|
305
|
-
.
|
|
308
|
+
.hjkrycz:hover {
|
|
306
309
|
color: var(--rc-alert-caution);
|
|
307
310
|
background: color-mix(in srgb, var(--rc-alert-caution) 10%, transparent);
|
|
308
311
|
}
|
|
309
|
-
.
|
|
312
|
+
.hjkryc10 {
|
|
310
313
|
flex: 1;
|
|
311
314
|
min-width: 0;
|
|
312
315
|
padding: 1px 4px;
|
|
@@ -318,16 +321,16 @@
|
|
|
318
321
|
color: var(--rc-text);
|
|
319
322
|
outline: none;
|
|
320
323
|
}
|
|
321
|
-
.
|
|
324
|
+
.hjkryc10:focus {
|
|
322
325
|
border-color: color-mix(in srgb, var(--rc-text) 30%, transparent);
|
|
323
326
|
}
|
|
324
|
-
.
|
|
327
|
+
.hjkryc11 {
|
|
325
328
|
flex: 1;
|
|
326
329
|
display: flex;
|
|
327
330
|
flex-direction: column;
|
|
328
331
|
min-width: 0;
|
|
329
332
|
}
|
|
330
|
-
.
|
|
333
|
+
.hjkryc12 {
|
|
331
334
|
display: flex;
|
|
332
335
|
align-items: center;
|
|
333
336
|
justify-content: space-between;
|
|
@@ -336,7 +339,7 @@
|
|
|
336
339
|
border-bottom: 1px solid color-mix(in srgb, var(--rc-border) 50%, transparent);
|
|
337
340
|
flex-shrink: 0;
|
|
338
341
|
}
|
|
339
|
-
.
|
|
342
|
+
.hjkryc13 {
|
|
340
343
|
display: flex;
|
|
341
344
|
align-items: center;
|
|
342
345
|
gap: 6px;
|
|
@@ -345,67 +348,68 @@
|
|
|
345
348
|
color: var(--rc-text-secondary);
|
|
346
349
|
overflow: hidden;
|
|
347
350
|
}
|
|
348
|
-
.
|
|
351
|
+
.hjkryc14 {
|
|
349
352
|
color: var(--rc-text);
|
|
350
353
|
white-space: nowrap;
|
|
351
354
|
overflow: hidden;
|
|
352
355
|
text-overflow: ellipsis;
|
|
353
356
|
}
|
|
354
|
-
.
|
|
357
|
+
.hjkryc15 {
|
|
355
358
|
opacity: 0.5;
|
|
356
359
|
}
|
|
357
|
-
.
|
|
360
|
+
.hjkryc16 {
|
|
358
361
|
flex: 1;
|
|
359
362
|
min-height: 0;
|
|
360
363
|
position: relative;
|
|
361
364
|
overflow: auto;
|
|
362
365
|
background-color: transparent !important;
|
|
363
366
|
}
|
|
364
|
-
.
|
|
367
|
+
.hjkryc16 pre code {
|
|
368
|
+
display: flex;
|
|
369
|
+
flex-direction: column;
|
|
370
|
+
}
|
|
371
|
+
.hjkryc16 > .shikicode.output {
|
|
365
372
|
position: static !important;
|
|
366
373
|
inset: auto !important;
|
|
367
374
|
}
|
|
368
|
-
.
|
|
375
|
+
.hjkryc16 .shikicode {
|
|
369
376
|
height: 100%;
|
|
370
377
|
font-size: 0.8125rem;
|
|
371
378
|
line-height: 1.7;
|
|
372
379
|
}
|
|
373
|
-
.
|
|
380
|
+
.hjkryc16 .shiki, .hjkryc16 code, .hjkryc16 pre {
|
|
374
381
|
background: transparent !important;
|
|
375
382
|
}
|
|
376
|
-
.
|
|
383
|
+
.hjkryc16 pre {
|
|
377
384
|
margin: 0 !important;
|
|
378
385
|
padding: 0 !important;
|
|
379
386
|
}
|
|
380
|
-
.
|
|
387
|
+
.hjkryc16 .shikicode.output .line::before {
|
|
381
388
|
background-color: transparent !important;
|
|
382
389
|
}
|
|
383
|
-
.
|
|
390
|
+
.hjkryc16 .line {
|
|
384
391
|
display: block;
|
|
385
392
|
padding: 0 1rem;
|
|
386
393
|
}
|
|
387
|
-
.
|
|
394
|
+
.hjkryc16 .shikicode.input.line-numbers {
|
|
388
395
|
padding-left: calc(5em + 1rem);
|
|
389
396
|
}
|
|
390
|
-
.
|
|
397
|
+
.hjkryc16 .shikicode.input:not(.line-numbers) {
|
|
391
398
|
padding-left: 1rem;
|
|
392
399
|
}
|
|
393
|
-
.
|
|
400
|
+
.hjkryc16 .line > span:last-child {
|
|
394
401
|
margin-right: 1rem;
|
|
395
402
|
}
|
|
396
|
-
.
|
|
403
|
+
.hjkryc16 .line::after {
|
|
397
404
|
content: ' ';
|
|
398
405
|
}
|
|
399
|
-
.
|
|
400
|
-
opacity: 0.4;
|
|
401
|
-
}
|
|
402
|
-
.rcs-drag-overlay {
|
|
406
|
+
.hjkryc17 {
|
|
403
407
|
background: var(--rc-bg-secondary);
|
|
404
408
|
border-radius: 6px;
|
|
405
409
|
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
|
406
410
|
}
|
|
407
411
|
@media (min-width: 640px) {
|
|
408
|
-
.
|
|
412
|
+
.hjkrych.hjkrych {
|
|
409
413
|
max-width: 64rem;
|
|
410
414
|
}
|
|
411
415
|
}
|
package/dist/styles.css.d.ts
CHANGED
|
@@ -1,3 +1,101 @@
|
|
|
1
|
+
export declare const semanticClassNames: {
|
|
2
|
+
readonly container: "rcs-container";
|
|
3
|
+
readonly header: "rcs-header";
|
|
4
|
+
readonly tabs: "rcs-tabs";
|
|
5
|
+
readonly tab: "rcs-tab";
|
|
6
|
+
readonly tabActive: "rcs-tab-active";
|
|
7
|
+
readonly titleBar: "rcs-title-bar";
|
|
8
|
+
readonly headerActions: "rcs-header-actions";
|
|
9
|
+
readonly copyButton: "rcs-copy-btn";
|
|
10
|
+
readonly separator: "rcs-separator";
|
|
11
|
+
readonly codePanel: "rcs-code-panel";
|
|
12
|
+
readonly codeScroll: "rcs-code-scroll";
|
|
13
|
+
readonly codeBody: "rcs-code-body";
|
|
14
|
+
readonly fileIcon: "rcs-file-icon";
|
|
15
|
+
readonly editContainer: "rcs-edit-container";
|
|
16
|
+
readonly editOverlay: "rcs-edit-overlay";
|
|
17
|
+
readonly editLabel: "rcs-edit-label";
|
|
18
|
+
readonly modal: "rcs-modal";
|
|
19
|
+
readonly modalTitlebar: "rcs-modal-titlebar";
|
|
20
|
+
readonly modalTitle: "rcs-modal-title";
|
|
21
|
+
readonly modalIconButton: "rcs-modal-icon-btn";
|
|
22
|
+
readonly modalBody: "rcs-modal-body";
|
|
23
|
+
readonly modalSidebar: "rcs-modal-sidebar";
|
|
24
|
+
readonly sidebarHeader: "rcs-sidebar-header";
|
|
25
|
+
readonly sidebarAddButton: "rcs-sidebar-add-btn";
|
|
26
|
+
readonly fileList: "rcs-file-list";
|
|
27
|
+
readonly fileItem: "rcs-file-item";
|
|
28
|
+
readonly fileItemActive: "rcs-file-item-active";
|
|
29
|
+
readonly fileItemDragging: "rcs-file-item-dragging";
|
|
30
|
+
readonly fileDragHandle: "rcs-file-drag-handle";
|
|
31
|
+
readonly fileName: "rcs-file-name";
|
|
32
|
+
readonly fileDelete: "rcs-file-delete";
|
|
33
|
+
readonly renameInput: "rcs-rename-input";
|
|
34
|
+
readonly modalEditor: "rcs-modal-editor";
|
|
35
|
+
readonly breadcrumb: "rcs-breadcrumb";
|
|
36
|
+
readonly breadcrumbLeft: "rcs-breadcrumb-left";
|
|
37
|
+
readonly breadcrumbName: "rcs-breadcrumb-name";
|
|
38
|
+
readonly breadcrumbLang: "rcs-breadcrumb-lang";
|
|
39
|
+
readonly editorContainer: "rcs-editor-container";
|
|
40
|
+
readonly dragOverlay: "rcs-drag-overlay";
|
|
41
|
+
};
|
|
42
|
+
export declare const container: string;
|
|
43
|
+
export declare const header: string;
|
|
44
|
+
export declare const tabs: string;
|
|
45
|
+
export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
46
|
+
active: {
|
|
47
|
+
true: {
|
|
48
|
+
color: `var(--${string})`;
|
|
49
|
+
background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
|
|
50
|
+
};
|
|
51
|
+
false: {};
|
|
52
|
+
};
|
|
53
|
+
}>;
|
|
54
|
+
export declare const titleBar: string;
|
|
55
|
+
export declare const headerActions: string;
|
|
56
|
+
export declare const copyButton: string;
|
|
57
|
+
export declare const separator: string;
|
|
58
|
+
export declare const codeScroll: string;
|
|
59
|
+
export declare const codeBody: string;
|
|
60
|
+
export declare const fileIcon: string;
|
|
61
|
+
export declare const editContainer: string;
|
|
62
|
+
export declare const editOverlay: string;
|
|
63
|
+
export declare const editLabel: string;
|
|
1
64
|
declare const _codeSnippetDialogPopup: string;
|
|
2
65
|
export { _codeSnippetDialogPopup as codeSnippetDialogPopup };
|
|
66
|
+
export declare const modal: string;
|
|
67
|
+
export declare const modalTitlebar: string;
|
|
68
|
+
export declare const modalTitle: string;
|
|
69
|
+
export declare const modalIconButton: string;
|
|
70
|
+
export declare const modalBody: string;
|
|
71
|
+
export declare const modalSidebar: string;
|
|
72
|
+
export declare const sidebarHeader: string;
|
|
73
|
+
export declare const sidebarAddButton: string;
|
|
74
|
+
export declare const fileList: string;
|
|
75
|
+
export declare const fileItem: import('@vanilla-extract/recipes').RuntimeFn<{
|
|
76
|
+
active: {
|
|
77
|
+
true: {
|
|
78
|
+
background: `color-mix(in srgb, var(--${string}) 8%, transparent)`;
|
|
79
|
+
color: `var(--${string})`;
|
|
80
|
+
};
|
|
81
|
+
false: {};
|
|
82
|
+
};
|
|
83
|
+
dragging: {
|
|
84
|
+
true: {
|
|
85
|
+
opacity: number;
|
|
86
|
+
};
|
|
87
|
+
false: {};
|
|
88
|
+
};
|
|
89
|
+
}>;
|
|
90
|
+
export declare const fileDragHandle: string;
|
|
91
|
+
export declare const fileName: string;
|
|
92
|
+
export declare const fileDelete: string;
|
|
93
|
+
export declare const renameInput: string;
|
|
94
|
+
export declare const modalEditor: string;
|
|
95
|
+
export declare const breadcrumb: string;
|
|
96
|
+
export declare const breadcrumbLeft: string;
|
|
97
|
+
export declare const breadcrumbName: string;
|
|
98
|
+
export declare const breadcrumbLang: string;
|
|
99
|
+
export declare const editorContainer: string;
|
|
100
|
+
export declare const dragOverlay: string;
|
|
3
101
|
//# sourceMappingURL=styles.css.d.ts.map
|
package/dist/styles.css.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCrB,CAAA;AAEV,eAAO,MAAM,SAAS,QAOpB,CAAA;AAEF,eAAO,MAAM,MAAM,QAMjB,CAAA;AAEF,eAAO,MAAM,IAAI,QAWf,CAAA;AA0BF,eAAO,MAAM,GAAG;;;;;;;;EAcd,CAAA;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,aAAa,QAUxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAkBrB,CAAA;AAEF,eAAO,MAAM,SAAS,QAIpB,CAAA;AAEF,eAAO,MAAM,UAAU,QAErB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAMnB,CAAA;AAWF,eAAO,MAAM,QAAQ,QAGnB,CAAA;AAOF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,WAAW,QAetB,CAAA;AAEF,eAAO,MAAM,SAAS,QAkBpB,CAAA;AAEF,QAAA,MAAM,uBAAuB,QAAY,CAAA;AAsBzC,OAAO,EAAE,uBAAuB,IAAI,sBAAsB,EAAE,CAAA;AAE5D,eAAO,MAAM,KAAK,QAMhB,CAAA;AAEF,eAAO,MAAM,aAAa,QAQxB,CAAA;AAEF,eAAO,MAAM,UAAU,QAIrB,CAAA;AAEF,eAAO,MAAM,eAAe,QAkB1B,CAAA;AAEF,eAAO,MAAM,SAAS,QAIpB,CAAA;AAEF,eAAO,MAAM,YAAY,QAOvB,CAAA;AAEF,eAAO,MAAM,aAAa,QAUxB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAkB3B,CAAA;AAEF,eAAO,MAAM,QAAQ,QAInB,CAAA;AAsBF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;EAqBnB,CAAA;AAEF,eAAO,MAAM,cAAc,QAYzB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAKnB,CAAA;AAEF,eAAO,MAAM,UAAU,QAqBrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAgBtB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA;AAEF,eAAO,MAAM,UAAU,QAQrB,CAAA;AAEF,eAAO,MAAM,cAAc,QAQzB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,cAAc,QAEzB,CAAA;AAEF,eAAO,MAAM,eAAe,QAM1B,CAAA;AAoDF,eAAO,MAAM,WAAW,QAItB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-ext-code-snippet",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "Multi-file code snippet extension",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -23,16 +23,17 @@
|
|
|
23
23
|
"@iconify/utils": "^2.3.0",
|
|
24
24
|
"lucide-react": "^0.574.0",
|
|
25
25
|
"shikicode": "*",
|
|
26
|
-
"@haklex/rich-editor": "0.0.
|
|
27
|
-
"@haklex/rich-editor-ui": "0.0.
|
|
28
|
-
"@haklex/rich-
|
|
29
|
-
"@haklex/rich-
|
|
26
|
+
"@haklex/rich-editor": "0.0.4",
|
|
27
|
+
"@haklex/rich-editor-ui": "0.0.4",
|
|
28
|
+
"@haklex/rich-style-token": "0.0.4",
|
|
29
|
+
"@haklex/rich-renderer-codeblock": "0.0.4"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@lexical/react": "^0.39.0",
|
|
33
33
|
"@types/react": "^19.0.0",
|
|
34
34
|
"@types/react-dom": "^19.0.0",
|
|
35
35
|
"@vanilla-extract/css": "^1.17.1",
|
|
36
|
+
"@vanilla-extract/recipes": "^0.5.7",
|
|
36
37
|
"@vanilla-extract/vite-plugin": "^4.0.20",
|
|
37
38
|
"lexical": "^0.39.0",
|
|
38
39
|
"react": "19.2.4",
|