@haklex/rich-ext-code-snippet 0.0.64 → 0.0.66
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -31
- package/dist/CodeEditorModal.d.ts +4 -3
- package/dist/CodeEditorModal.d.ts.map +1 -1
- package/dist/CodeSnippetEditDecorator.d.ts +2 -2
- package/dist/CodeSnippetEditDecorator.d.ts.map +1 -1
- package/dist/CodeSnippetEditRenderer.d.ts +1 -1
- package/dist/CodeSnippetEditRenderer.d.ts.map +1 -1
- package/dist/{CodeSnippetNode-HfoBhcBz.js → CodeSnippetNode-BmRM_Ma7.js} +41 -80
- package/dist/CodeSnippetRenderer.d.ts +1 -1
- package/dist/CodeSnippetRenderer.d.ts.map +1 -1
- package/dist/index.mjs +129 -225
- package/dist/nodes/CodeSnippetEditNode.d.ts +2 -1
- package/dist/nodes/CodeSnippetEditNode.d.ts.map +1 -1
- package/dist/nodes/CodeSnippetNode.d.ts +1 -1
- package/dist/nodes/CodeSnippetNode.d.ts.map +1 -1
- package/dist/static.mjs +2 -2
- package/package.json +12 -7
- package/LICENSE +0 -28
package/README.md
CHANGED
|
@@ -1,53 +1,98 @@
|
|
|
1
1
|
# @haklex/rich-ext-code-snippet
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Multi-file tabbed code snippet extension with drag-and-drop reordering.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add @haklex/rich-ext-code-snippet
|
|
8
|
+
pnpm add @haklex/rich-ext-code-snippet
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Peer Dependencies
|
|
12
|
+
|
|
13
|
+
| Package | Version |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| `lexical` | `^0.41.0` |
|
|
16
|
+
| `react` | `>= 19` |
|
|
17
|
+
|
|
18
|
+
Key runtime dependencies include `@codemirror/*` (editor engine), `@dnd-kit/*` (drag-and-drop), and `shiki` (syntax highlighting).
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### Register nodes in your editor config
|
|
12
23
|
|
|
13
24
|
```ts
|
|
14
|
-
|
|
15
|
-
export { CodeSnippetNode } from './nodes/CodeSnippetNode'
|
|
16
|
-
export { $createCodeSnippetNode, $isCodeSnippetNode } from './nodes/CodeSnippetNode'
|
|
17
|
-
export type { SerializedCodeSnippetNode } from './nodes/CodeSnippetNode'
|
|
25
|
+
import { codeSnippetEditNodes } from '@haklex/rich-ext-code-snippet'
|
|
18
26
|
|
|
19
|
-
|
|
20
|
-
|
|
27
|
+
// Add to your Lexical editor node list
|
|
28
|
+
const editorConfig = {
|
|
29
|
+
nodes: [...codeSnippetEditNodes],
|
|
30
|
+
}
|
|
31
|
+
```
|
|
21
32
|
|
|
22
|
-
|
|
33
|
+
For static/read-only rendering:
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import { codeSnippetNodes } from '@haklex/rich-ext-code-snippet/static'
|
|
23
37
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
export type { CodeSnippetEditRendererProps } from './CodeSnippetEditRenderer'
|
|
38
|
+
const staticConfig = {
|
|
39
|
+
nodes: [...codeSnippetNodes],
|
|
40
|
+
}
|
|
28
41
|
```
|
|
29
42
|
|
|
30
|
-
|
|
43
|
+
### Use renderers
|
|
31
44
|
|
|
32
45
|
```tsx
|
|
33
|
-
import {
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
import type { RendererConfig } from '@haklex/rich-editor'
|
|
39
|
-
|
|
40
|
-
const config: RendererConfig = {
|
|
41
|
-
CodeSnippet: CodeSnippetRenderer,
|
|
42
|
-
}
|
|
46
|
+
import { CodeSnippetEditRenderer } from '@haklex/rich-ext-code-snippet'
|
|
47
|
+
import { CodeSnippetRenderer } from '@haklex/rich-ext-code-snippet/static'
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Markdown transformer
|
|
43
51
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
52
|
+
```ts
|
|
53
|
+
import { CODE_SNIPPET_BLOCK_TRANSFORMER } from '@haklex/rich-ext-code-snippet'
|
|
54
|
+
|
|
55
|
+
// Add to your Lexical markdown transformers array
|
|
56
|
+
const transformers = [CODE_SNIPPET_BLOCK_TRANSFORMER]
|
|
49
57
|
```
|
|
50
58
|
|
|
59
|
+
### Import styles
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
import '@haklex/rich-ext-code-snippet/style.css'
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Exports
|
|
66
|
+
|
|
67
|
+
### Nodes
|
|
68
|
+
|
|
69
|
+
- `CodeSnippetNode` -- static (read-only) node
|
|
70
|
+
- `CodeSnippetEditNode` -- edit node with interactive UI
|
|
71
|
+
- `$createCodeSnippetNode()` / `$isCodeSnippetNode()` -- Lexical helpers
|
|
72
|
+
- `codeSnippetNodes` -- array of static nodes for config registration
|
|
73
|
+
- `codeSnippetEditNodes` -- array of edit nodes for config registration
|
|
74
|
+
|
|
75
|
+
### Renderers
|
|
76
|
+
|
|
77
|
+
- `CodeSnippetRenderer` -- static renderer (no heavy UI deps)
|
|
78
|
+
- `CodeSnippetEditRenderer` -- edit renderer with CodeMirror, drag-and-drop tabs
|
|
79
|
+
|
|
80
|
+
### Transformers
|
|
81
|
+
|
|
82
|
+
- `CODE_SNIPPET_BLOCK_TRANSFORMER` -- Markdown block transformer
|
|
83
|
+
|
|
84
|
+
### Sub-path Exports
|
|
85
|
+
|
|
86
|
+
| Path | Description |
|
|
87
|
+
| --- | --- |
|
|
88
|
+
| `@haklex/rich-ext-code-snippet` | Full exports (edit + static) |
|
|
89
|
+
| `@haklex/rich-ext-code-snippet/static` | Static-only (no CodeMirror/dnd-kit deps) |
|
|
90
|
+
| `@haklex/rich-ext-code-snippet/style.css` | Stylesheet |
|
|
91
|
+
|
|
92
|
+
## Part of Haklex
|
|
93
|
+
|
|
94
|
+
This package is part of the [Haklex](../../README.md) rich editor ecosystem.
|
|
95
|
+
|
|
51
96
|
## License
|
|
52
97
|
|
|
53
98
|
MIT
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ColorScheme } from '@haklex/rich-editor';
|
|
2
|
+
import { CodeFile } from '@haklex/rich-editor/renderers';
|
|
2
3
|
import { FC } from 'react';
|
|
3
4
|
export interface CodeEditorModalProps {
|
|
5
|
+
colorScheme: ColorScheme;
|
|
6
|
+
dismiss: () => void;
|
|
4
7
|
files: CodeFile[];
|
|
5
8
|
onFilesChange?: (files: CodeFile[]) => void;
|
|
6
|
-
dismiss: () => void;
|
|
7
|
-
colorScheme: ColorScheme;
|
|
8
9
|
}
|
|
9
10
|
export declare const CodeEditorModal: FC<CodeEditorModalProps>;
|
|
10
11
|
//# sourceMappingURL=CodeEditorModal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEditorModal.d.ts","sourceRoot":"","sources":["../src/CodeEditorModal.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeEditorModal.d.ts","sourceRoot":"","sources":["../src/CodeEditorModal.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAK9D,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAO/C,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,WAAW,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC7C;AA8FD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmSpD,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { CodeFile } from '@haklex/rich-editor';
|
|
1
|
+
import { CodeFile } from '@haklex/rich-editor/renderers';
|
|
2
2
|
import { NodeKey } from 'lexical';
|
|
3
3
|
import { FC } from 'react';
|
|
4
4
|
export interface CodeSnippetEditDecoratorProps {
|
|
5
|
-
nodeKey: NodeKey;
|
|
6
5
|
files: CodeFile[];
|
|
6
|
+
nodeKey: NodeKey;
|
|
7
7
|
}
|
|
8
8
|
export declare const CodeSnippetEditDecorator: FC<CodeSnippetEditDecoratorProps>;
|
|
9
9
|
//# sourceMappingURL=CodeSnippetEditDecorator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetEditDecorator.d.ts","sourceRoot":"","sources":["../src/CodeSnippetEditDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"CodeSnippetEditDecorator.d.ts","sourceRoot":"","sources":["../src/CodeSnippetEditDecorator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAMhC,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CAgBtE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetEditRenderer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeSnippetEditRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetEditRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAI9D,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAahC,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAyCpE,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { createRendererDecoration } from "@haklex/rich-editor";
|
|
4
|
+
import { createRendererDecoration } from "@haklex/rich-editor/renderers";
|
|
5
5
|
import { DecoratorNode } from "lexical";
|
|
6
6
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
7
7
|
import { normalizeLanguage } from "@haklex/rich-renderer-codeblock/constants";
|
|
@@ -202,17 +202,15 @@ const CopyButton = ({ text }) => {
|
|
|
202
202
|
return /* @__PURE__ */ jsx(
|
|
203
203
|
"button",
|
|
204
204
|
{
|
|
205
|
-
|
|
205
|
+
"aria-label": copied ? "Copied" : "Copy code",
|
|
206
206
|
className: `${copyButton} ${semanticClassNames.copyButton}`,
|
|
207
|
+
type: "button",
|
|
207
208
|
onClick: handleCopy,
|
|
208
|
-
"aria-label": copied ? "Copied" : "Copy code",
|
|
209
209
|
children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
|
|
210
210
|
}
|
|
211
211
|
);
|
|
212
212
|
};
|
|
213
|
-
const CodeSnippetRenderer = ({
|
|
214
|
-
files
|
|
215
|
-
}) => {
|
|
213
|
+
const CodeSnippetRenderer = ({ files }) => {
|
|
216
214
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
217
215
|
const [htmlMap, setHtmlMap] = useState({});
|
|
218
216
|
const activeFile = files[activeIndex] ?? files[0];
|
|
@@ -222,9 +220,7 @@ const CodeSnippetRenderer = ({
|
|
|
222
220
|
(async () => {
|
|
223
221
|
const newHtmlMap = {};
|
|
224
222
|
for (const file of files) {
|
|
225
|
-
const lang = normalizeLanguage(
|
|
226
|
-
file.language ?? getLanguageFromFilename(file.filename)
|
|
227
|
-
);
|
|
223
|
+
const lang = normalizeLanguage(file.language ?? getLanguageFromFilename(file.filename));
|
|
228
224
|
const highlighter = await getHighlighterWithLang(lang);
|
|
229
225
|
if (cancelled) return;
|
|
230
226
|
const loaded = highlighter.getLoadedLanguages();
|
|
@@ -244,32 +240,32 @@ const CodeSnippetRenderer = ({
|
|
|
244
240
|
return /* @__PURE__ */ jsxs(
|
|
245
241
|
"div",
|
|
246
242
|
{
|
|
243
|
+
"aria-label": "Code snippet",
|
|
247
244
|
className: `${container} ${semanticClassNames.container}`,
|
|
248
245
|
role: "region",
|
|
249
|
-
"aria-label": "Code snippet",
|
|
250
246
|
children: [
|
|
251
247
|
/* @__PURE__ */ jsxs("div", { className: `${header} ${semanticClassNames.header}`, children: [
|
|
252
248
|
isMultiFile ? /* @__PURE__ */ jsx(
|
|
253
249
|
"div",
|
|
254
250
|
{
|
|
251
|
+
"aria-label": "Code file tabs",
|
|
255
252
|
className: `${tabs} ${semanticClassNames.tabs}`,
|
|
256
253
|
role: "tablist",
|
|
257
|
-
"aria-label": "Code file tabs",
|
|
258
254
|
children: files.map((file, index) => /* @__PURE__ */ jsxs(
|
|
259
255
|
"button",
|
|
260
256
|
{
|
|
261
|
-
type: "button",
|
|
262
|
-
role: "tab",
|
|
263
257
|
"aria-selected": index === activeIndex,
|
|
264
|
-
onClick: () => setActiveIndex(index),
|
|
265
258
|
className: `${tab({ active: index === activeIndex })} ${semanticClassNames.tab} ${index === activeIndex ? semanticClassNames.tabActive : ""}`.trim(),
|
|
259
|
+
role: "tab",
|
|
260
|
+
type: "button",
|
|
261
|
+
onClick: () => setActiveIndex(index),
|
|
266
262
|
children: [
|
|
267
263
|
/* @__PURE__ */ jsx(
|
|
268
264
|
FileIcon,
|
|
269
265
|
{
|
|
266
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
270
267
|
filename: file.filename,
|
|
271
|
-
size: 14
|
|
272
|
-
className: `${fileIcon} ${semanticClassNames.fileIcon}`
|
|
268
|
+
size: 14
|
|
273
269
|
}
|
|
274
270
|
),
|
|
275
271
|
/* @__PURE__ */ jsx("span", { children: file.filename })
|
|
@@ -278,74 +274,39 @@ const CodeSnippetRenderer = ({
|
|
|
278
274
|
file.filename
|
|
279
275
|
))
|
|
280
276
|
}
|
|
281
|
-
) : /* @__PURE__ */ jsxs(
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
/* @__PURE__ */ jsx(
|
|
277
|
+
) : /* @__PURE__ */ jsxs("div", { className: `${titleBar} ${semanticClassNames.titleBar}`, children: [
|
|
278
|
+
/* @__PURE__ */ jsx(
|
|
279
|
+
FileIcon,
|
|
280
|
+
{
|
|
281
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
282
|
+
filename: activeFile.filename,
|
|
283
|
+
size: 14
|
|
284
|
+
}
|
|
285
|
+
),
|
|
286
|
+
/* @__PURE__ */ jsx("span", { children: activeFile.filename })
|
|
287
|
+
] }),
|
|
288
|
+
/* @__PURE__ */ jsx("div", { className: `${headerActions} ${semanticClassNames.headerActions}`, children: /* @__PURE__ */ jsx(CopyButton, { text: activeFile.code }) })
|
|
289
|
+
] }),
|
|
290
|
+
/* @__PURE__ */ jsx("div", { className: `${separator} ${semanticClassNames.separator}` }),
|
|
291
|
+
/* @__PURE__ */ jsx("div", { className: `${codePanelsWrapper} ${semanticClassNames.codePanelsWrapper}`, children: files.map((file, index) => {
|
|
292
|
+
const html = htmlMap[file.filename];
|
|
293
|
+
return /* @__PURE__ */ jsx(
|
|
299
294
|
"div",
|
|
300
295
|
{
|
|
301
|
-
className: `${
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
] }),
|
|
306
|
-
/* @__PURE__ */ jsx(
|
|
307
|
-
"div",
|
|
308
|
-
{
|
|
309
|
-
className: `${separator} ${semanticClassNames.separator}`
|
|
310
|
-
}
|
|
311
|
-
),
|
|
312
|
-
/* @__PURE__ */ jsx(
|
|
313
|
-
"div",
|
|
314
|
-
{
|
|
315
|
-
className: `${codePanelsWrapper} ${semanticClassNames.codePanelsWrapper}`,
|
|
316
|
-
children: files.map((file, index) => {
|
|
317
|
-
const html = htmlMap[file.filename];
|
|
318
|
-
return /* @__PURE__ */ jsx(
|
|
296
|
+
className: `${codePanel} ${semanticClassNames.codePanel}`,
|
|
297
|
+
"data-active": index === activeIndex,
|
|
298
|
+
role: isMultiFile ? "tabpanel" : void 0,
|
|
299
|
+
children: /* @__PURE__ */ jsx("div", { className: `${codeScroll} ${semanticClassNames.codeScroll}`, children: html ? /* @__PURE__ */ jsx(
|
|
319
300
|
"div",
|
|
320
301
|
{
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
"div",
|
|
330
|
-
{
|
|
331
|
-
className: `${codeBody} ${semanticClassNames.codeBody}`,
|
|
332
|
-
dangerouslySetInnerHTML: { __html: html }
|
|
333
|
-
}
|
|
334
|
-
) : /* @__PURE__ */ jsx(
|
|
335
|
-
"pre",
|
|
336
|
-
{
|
|
337
|
-
className: `${codeBody} ${semanticClassNames.codeBody}`,
|
|
338
|
-
children: /* @__PURE__ */ jsx("code", { children: file.code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) })
|
|
339
|
-
}
|
|
340
|
-
)
|
|
341
|
-
}
|
|
342
|
-
)
|
|
343
|
-
},
|
|
344
|
-
file.filename
|
|
345
|
-
);
|
|
346
|
-
})
|
|
347
|
-
}
|
|
348
|
-
)
|
|
302
|
+
className: `${codeBody} ${semanticClassNames.codeBody}`,
|
|
303
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
304
|
+
}
|
|
305
|
+
) : /* @__PURE__ */ jsx("pre", { className: `${codeBody} ${semanticClassNames.codeBody}`, children: /* @__PURE__ */ jsx("code", { children: file.code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", { className: "line", children: line }, i)) }) }) })
|
|
306
|
+
},
|
|
307
|
+
file.filename
|
|
308
|
+
);
|
|
309
|
+
}) })
|
|
349
310
|
]
|
|
350
311
|
}
|
|
351
312
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CodeSnippetRendererProps } from '@haklex/rich-editor';
|
|
1
|
+
import { CodeSnippetRendererProps } from '@haklex/rich-editor/renderers';
|
|
2
2
|
import { ComponentType } from 'react';
|
|
3
3
|
export declare const CodeSnippetRenderer: ComponentType<CodeSnippetRendererProps>;
|
|
4
4
|
//# sourceMappingURL=CodeSnippetRenderer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"CodeSnippetRenderer.d.ts","sourceRoot":"","sources":["../src/CodeSnippetRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAK9E,OAAO,KAAK,EAAE,aAAa,EAAM,MAAM,OAAO,CAAC;AA6B/C,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,wBAAwB,CA2HvE,CAAC"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
3
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
4
|
-
import { g as getLanguageFromFilename, m as modal, s as semanticClassNames, a as modalTitlebar, b as modalTitle, c as modalIconButton, d as modalBody, e as modalSidebar, f as sidebarHeader, h as sidebarAddButton, i as fileList, j as dragOverlay, k as fileIcon, l as fileName, n as fileItem, o as modalEditor, p as breadcrumb, q as breadcrumbLeft, r as breadcrumbName, t as breadcrumbLang, u as editorContainer, v as fileDragHandle, w as renameInput, x as fileDelete, y as codeSnippetDialogPopup, z as editContainer, C as CodeSnippetRenderer, A as editOverlay, B as editLabel, $ as $isCodeSnippetNode, D as CodeSnippetNode } from "./CodeSnippetNode-
|
|
5
|
-
import { E } from "./CodeSnippetNode-
|
|
4
|
+
import { g as getLanguageFromFilename, m as modal, s as semanticClassNames, a as modalTitlebar, b as modalTitle, c as modalIconButton, d as modalBody, e as modalSidebar, f as sidebarHeader, h as sidebarAddButton, i as fileList, j as dragOverlay, k as fileIcon, l as fileName, n as fileItem, o as modalEditor, p as breadcrumb, q as breadcrumbLeft, r as breadcrumbName, t as breadcrumbLang, u as editorContainer, v as fileDragHandle, w as renameInput, x as fileDelete, y as codeSnippetDialogPopup, z as editContainer, C as CodeSnippetRenderer, A as editOverlay, B as editLabel, $ as $isCodeSnippetNode, D as CodeSnippetNode } from "./CodeSnippetNode-BmRM_Ma7.js";
|
|
5
|
+
import { E } from "./CodeSnippetNode-BmRM_Ma7.js";
|
|
6
6
|
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
7
7
|
import { useColorScheme } from "@haklex/rich-editor";
|
|
8
8
|
import { presentDialog } from "@haklex/rich-editor-ui";
|
|
@@ -34,14 +34,9 @@ const SortableFileItem = ({
|
|
|
34
34
|
onCancelRename,
|
|
35
35
|
onDelete
|
|
36
36
|
}) => {
|
|
37
|
-
const {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
setNodeRef,
|
|
41
|
-
transform,
|
|
42
|
-
transition,
|
|
43
|
-
isDragging
|
|
44
|
-
} = useSortable({ id: file.filename });
|
|
37
|
+
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
38
|
+
id: file.filename
|
|
39
|
+
});
|
|
45
40
|
const style = {
|
|
46
41
|
transform: CSS.Transform.toString(transform),
|
|
47
42
|
transition
|
|
@@ -49,9 +44,9 @@ const SortableFileItem = ({
|
|
|
49
44
|
return /* @__PURE__ */ jsxs(
|
|
50
45
|
"div",
|
|
51
46
|
{
|
|
47
|
+
className: `${fileItem({ active: isActive, dragging: isDragging })} ${semanticClassNames.fileItem} ${isActive ? semanticClassNames.fileItemActive : ""} ${isDragging ? semanticClassNames.fileItemDragging : ""}`.trim(),
|
|
52
48
|
ref: setNodeRef,
|
|
53
49
|
style,
|
|
54
|
-
className: `${fileItem({ active: isActive, dragging: isDragging })} ${semanticClassNames.fileItem} ${isActive ? semanticClassNames.fileItemActive : ""} ${isDragging ? semanticClassNames.fileItemDragging : ""}`.trim(),
|
|
55
50
|
onClick: onSelect,
|
|
56
51
|
onDoubleClick: onStartRename,
|
|
57
52
|
children: [
|
|
@@ -68,42 +63,36 @@ const SortableFileItem = ({
|
|
|
68
63
|
/* @__PURE__ */ jsx(
|
|
69
64
|
FileIcon,
|
|
70
65
|
{
|
|
66
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
71
67
|
filename: file.filename,
|
|
72
|
-
size: 14
|
|
73
|
-
className: `${fileIcon} ${semanticClassNames.fileIcon}`
|
|
68
|
+
size: 14
|
|
74
69
|
}
|
|
75
70
|
),
|
|
76
71
|
isEditing ? /* @__PURE__ */ jsx(
|
|
77
72
|
"input",
|
|
78
73
|
{
|
|
74
|
+
autoFocus: true,
|
|
79
75
|
className: `${renameInput} ${semanticClassNames.renameInput}`,
|
|
80
76
|
value: editValue,
|
|
81
|
-
onChange: (e) => onEditChange(e.target.value),
|
|
82
77
|
onBlur: onCommitRename,
|
|
78
|
+
onChange: (e) => onEditChange(e.target.value),
|
|
79
|
+
onClick: (e) => e.stopPropagation(),
|
|
83
80
|
onKeyDown: (e) => {
|
|
84
81
|
if (e.key === "Enter") onCommitRename();
|
|
85
82
|
if (e.key === "Escape") onCancelRename();
|
|
86
|
-
}
|
|
87
|
-
autoFocus: true,
|
|
88
|
-
onClick: (e) => e.stopPropagation()
|
|
89
|
-
}
|
|
90
|
-
) : /* @__PURE__ */ jsx(
|
|
91
|
-
"span",
|
|
92
|
-
{
|
|
93
|
-
className: `${fileName} ${semanticClassNames.fileName}`,
|
|
94
|
-
children: file.filename
|
|
83
|
+
}
|
|
95
84
|
}
|
|
96
|
-
),
|
|
85
|
+
) : /* @__PURE__ */ jsx("span", { className: `${fileName} ${semanticClassNames.fileName}`, children: file.filename }),
|
|
97
86
|
canDelete && /* @__PURE__ */ jsx(
|
|
98
87
|
"button",
|
|
99
88
|
{
|
|
100
|
-
|
|
89
|
+
"aria-label": `Delete ${file.filename}`,
|
|
101
90
|
className: `${fileDelete} ${semanticClassNames.fileDelete}`,
|
|
91
|
+
type: "button",
|
|
102
92
|
onClick: (e) => {
|
|
103
93
|
e.stopPropagation();
|
|
104
94
|
onDelete();
|
|
105
95
|
},
|
|
106
|
-
"aria-label": `Delete ${file.filename}`,
|
|
107
96
|
children: /* @__PURE__ */ jsx(Trash2, { size: 12 })
|
|
108
97
|
}
|
|
109
98
|
)
|
|
@@ -117,12 +106,8 @@ const CodeEditorModal = ({
|
|
|
117
106
|
dismiss,
|
|
118
107
|
colorScheme
|
|
119
108
|
}) => {
|
|
120
|
-
const [editFiles, setEditFiles] = useState(
|
|
121
|
-
|
|
122
|
-
);
|
|
123
|
-
const [activeFilename, setActiveFilename] = useState(
|
|
124
|
-
initialFiles[0]?.filename ?? ""
|
|
125
|
-
);
|
|
109
|
+
const [editFiles, setEditFiles] = useState(() => initialFiles.map((f) => ({ ...f })));
|
|
110
|
+
const [activeFilename, setActiveFilename] = useState(initialFiles[0]?.filename ?? "");
|
|
126
111
|
const [editingFilename, setEditingFilename] = useState(null);
|
|
127
112
|
const [newFilenameInput, setNewFilenameInput] = useState("");
|
|
128
113
|
const [dragActiveId, setDragActiveId] = useState(null);
|
|
@@ -130,18 +115,14 @@ const CodeEditorModal = ({
|
|
|
130
115
|
const editorRef = useRef(null);
|
|
131
116
|
const languageCompartmentRef = useRef(null);
|
|
132
117
|
const themeCompartmentRef = useRef(null);
|
|
133
|
-
if (!languageCompartmentRef.current)
|
|
134
|
-
|
|
135
|
-
if (!themeCompartmentRef.current)
|
|
136
|
-
themeCompartmentRef.current = new Compartment();
|
|
118
|
+
if (!languageCompartmentRef.current) languageCompartmentRef.current = new Compartment();
|
|
119
|
+
if (!themeCompartmentRef.current) themeCompartmentRef.current = new Compartment();
|
|
137
120
|
const onCodeChangeRef = useRef(void 0);
|
|
138
121
|
const editFilesRef = useRef(editFiles);
|
|
139
122
|
editFilesRef.current = editFiles;
|
|
140
123
|
const activeFile = editFiles.find((f) => f.filename === activeFilename) ?? editFiles[0];
|
|
141
124
|
onCodeChangeRef.current = (code) => {
|
|
142
|
-
setEditFiles(
|
|
143
|
-
(prev) => prev.map((f) => f.filename === activeFilename ? { ...f, code } : f)
|
|
144
|
-
);
|
|
125
|
+
setEditFiles((prev) => prev.map((f) => f.filename === activeFilename ? { ...f, code } : f));
|
|
145
126
|
};
|
|
146
127
|
useEffect(() => {
|
|
147
128
|
const container = containerRef.current;
|
|
@@ -149,9 +130,7 @@ const CodeEditorModal = ({
|
|
|
149
130
|
const file = editFilesRef.current.find((f) => f.filename === activeFilename);
|
|
150
131
|
if (!file) return;
|
|
151
132
|
let cancelled = false;
|
|
152
|
-
const lang = normalizeLanguage(
|
|
153
|
-
file.language ?? getLanguageFromFilename(file.filename)
|
|
154
|
-
);
|
|
133
|
+
const lang = normalizeLanguage(file.language ?? getLanguageFromFilename(file.filename));
|
|
155
134
|
const editor = new EditorView({
|
|
156
135
|
parent: container,
|
|
157
136
|
state: EditorState.create({
|
|
@@ -187,9 +166,7 @@ const CodeEditorModal = ({
|
|
|
187
166
|
const editor = editorRef.current;
|
|
188
167
|
if (!editor) return;
|
|
189
168
|
editor.dispatch({
|
|
190
|
-
effects: themeCompartmentRef.current.reconfigure(
|
|
191
|
-
getThemeExtensions(colorScheme)
|
|
192
|
-
)
|
|
169
|
+
effects: themeCompartmentRef.current.reconfigure(getThemeExtensions(colorScheme))
|
|
193
170
|
});
|
|
194
171
|
}, [colorScheme]);
|
|
195
172
|
const handleDismiss = useCallback(() => {
|
|
@@ -235,9 +212,7 @@ const CodeEditorModal = ({
|
|
|
235
212
|
},
|
|
236
213
|
[editFiles, activeFilename]
|
|
237
214
|
);
|
|
238
|
-
const sensors = useSensors(
|
|
239
|
-
useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
|
|
240
|
-
);
|
|
215
|
+
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
|
|
241
216
|
const fileIds = useMemo(() => editFiles.map((f) => f.filename), [editFiles]);
|
|
242
217
|
const handleDragEnd = useCallback(
|
|
243
218
|
(event) => {
|
|
@@ -255,194 +230,126 @@ const CodeEditorModal = ({
|
|
|
255
230
|
const { className: portalThemeClassName } = usePortalTheme();
|
|
256
231
|
const language = activeFile ? activeFile.language ?? getLanguageFromFilename(activeFile.filename) : "";
|
|
257
232
|
return /* @__PURE__ */ jsxs("div", { className: `${modal} ${semanticClassNames.modal}`, children: [
|
|
258
|
-
/* @__PURE__ */ jsxs(
|
|
259
|
-
"
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
233
|
+
/* @__PURE__ */ jsxs("div", { className: `${modalTitlebar} ${semanticClassNames.modalTitlebar}`, children: [
|
|
234
|
+
/* @__PURE__ */ jsx("span", { className: `${modalTitle} ${semanticClassNames.modalTitle}`, children: "Code Snippet" }),
|
|
235
|
+
/* @__PURE__ */ jsx(
|
|
236
|
+
"button",
|
|
237
|
+
{
|
|
238
|
+
className: `${modalIconButton} ${semanticClassNames.modalIconButton}`,
|
|
239
|
+
type: "button",
|
|
240
|
+
onClick: handleDismiss,
|
|
241
|
+
children: /* @__PURE__ */ jsx(X, { size: 14 })
|
|
242
|
+
}
|
|
243
|
+
)
|
|
244
|
+
] }),
|
|
245
|
+
/* @__PURE__ */ jsxs("div", { className: `${modalBody} ${semanticClassNames.modalBody}`, children: [
|
|
246
|
+
/* @__PURE__ */ jsxs("div", { className: `${modalSidebar} ${semanticClassNames.modalSidebar}`, children: [
|
|
247
|
+
/* @__PURE__ */ jsxs("div", { className: `${sidebarHeader} ${semanticClassNames.sidebarHeader}`, children: [
|
|
248
|
+
/* @__PURE__ */ jsx("span", { children: "Files" }),
|
|
270
249
|
/* @__PURE__ */ jsx(
|
|
271
250
|
"button",
|
|
272
251
|
{
|
|
252
|
+
"aria-label": "Add file",
|
|
253
|
+
className: `${sidebarAddButton} ${semanticClassNames.sidebarAddButton}`,
|
|
273
254
|
type: "button",
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
children: /* @__PURE__ */ jsx(X, { size: 14 })
|
|
255
|
+
onClick: handleAddFile,
|
|
256
|
+
children: /* @__PURE__ */ jsx(Plus, { size: 14 })
|
|
277
257
|
}
|
|
278
258
|
)
|
|
279
|
-
]
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
259
|
+
] }),
|
|
260
|
+
/* @__PURE__ */ jsx("div", { className: `${fileList} ${semanticClassNames.fileList}`, children: /* @__PURE__ */ jsxs(
|
|
261
|
+
DndContext,
|
|
262
|
+
{
|
|
263
|
+
collisionDetection: closestCenter,
|
|
264
|
+
sensors,
|
|
265
|
+
onDragCancel: () => setDragActiveId(null),
|
|
266
|
+
onDragEnd: handleDragEnd,
|
|
267
|
+
onDragStart: (event) => setDragActiveId(event.active.id),
|
|
268
|
+
children: [
|
|
269
|
+
/* @__PURE__ */ jsx(SortableContext, { items: fileIds, strategy: verticalListSortingStrategy, children: editFiles.map((file) => /* @__PURE__ */ jsx(
|
|
270
|
+
SortableFileItem,
|
|
271
|
+
{
|
|
272
|
+
canDelete: editFiles.length > 1,
|
|
273
|
+
editValue: newFilenameInput,
|
|
274
|
+
file,
|
|
275
|
+
isActive: file.filename === activeFilename,
|
|
276
|
+
isEditing: editingFilename === file.filename,
|
|
277
|
+
onCancelRename: () => setEditingFilename(null),
|
|
278
|
+
onCommitRename: () => handleRenameFile(file.filename, newFilenameInput),
|
|
279
|
+
onDelete: () => handleDeleteFile(file.filename),
|
|
280
|
+
onEditChange: setNewFilenameInput,
|
|
281
|
+
onSelect: () => setActiveFilename(file.filename),
|
|
282
|
+
onStartRename: () => {
|
|
283
|
+
setEditingFilename(file.filename);
|
|
284
|
+
setNewFilenameInput(file.filename);
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
file.filename
|
|
288
|
+
)) }),
|
|
289
|
+
typeof document !== "undefined" ? createPortal(
|
|
290
|
+
/* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx("div", { className: portalThemeClassName, style: { display: "contents" }, children: dragActiveFile ? /* @__PURE__ */ jsxs(
|
|
293
291
|
"div",
|
|
294
292
|
{
|
|
295
|
-
className: `${
|
|
293
|
+
className: `${fileItem()} ${semanticClassNames.fileItem} ${dragOverlay} ${semanticClassNames.dragOverlay}`,
|
|
296
294
|
children: [
|
|
297
|
-
/* @__PURE__ */ jsx("span", { children: "Files" }),
|
|
298
295
|
/* @__PURE__ */ jsx(
|
|
299
|
-
|
|
296
|
+
FileIcon,
|
|
300
297
|
{
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
298
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
299
|
+
filename: dragActiveFile.filename,
|
|
300
|
+
size: 14
|
|
301
|
+
}
|
|
302
|
+
),
|
|
303
|
+
/* @__PURE__ */ jsx(
|
|
304
|
+
"span",
|
|
305
|
+
{
|
|
306
|
+
className: `${fileName} ${semanticClassNames.fileName}`,
|
|
307
|
+
children: dragActiveFile.filename
|
|
306
308
|
}
|
|
307
309
|
)
|
|
308
310
|
]
|
|
309
311
|
}
|
|
310
|
-
),
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
SortableContext,
|
|
326
|
-
{
|
|
327
|
-
items: fileIds,
|
|
328
|
-
strategy: verticalListSortingStrategy,
|
|
329
|
-
children: editFiles.map((file) => /* @__PURE__ */ jsx(
|
|
330
|
-
SortableFileItem,
|
|
331
|
-
{
|
|
332
|
-
file,
|
|
333
|
-
isActive: file.filename === activeFilename,
|
|
334
|
-
isEditing: editingFilename === file.filename,
|
|
335
|
-
editValue: newFilenameInput,
|
|
336
|
-
canDelete: editFiles.length > 1,
|
|
337
|
-
onSelect: () => setActiveFilename(file.filename),
|
|
338
|
-
onStartRename: () => {
|
|
339
|
-
setEditingFilename(file.filename);
|
|
340
|
-
setNewFilenameInput(file.filename);
|
|
341
|
-
},
|
|
342
|
-
onEditChange: setNewFilenameInput,
|
|
343
|
-
onCommitRename: () => handleRenameFile(file.filename, newFilenameInput),
|
|
344
|
-
onCancelRename: () => setEditingFilename(null),
|
|
345
|
-
onDelete: () => handleDeleteFile(file.filename)
|
|
346
|
-
},
|
|
347
|
-
file.filename
|
|
348
|
-
))
|
|
349
|
-
}
|
|
350
|
-
),
|
|
351
|
-
typeof document !== "undefined" ? createPortal(
|
|
352
|
-
/* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx(
|
|
353
|
-
"div",
|
|
354
|
-
{
|
|
355
|
-
className: portalThemeClassName,
|
|
356
|
-
style: { display: "contents" },
|
|
357
|
-
children: dragActiveFile ? /* @__PURE__ */ jsxs(
|
|
358
|
-
"div",
|
|
359
|
-
{
|
|
360
|
-
className: `${fileItem()} ${semanticClassNames.fileItem} ${dragOverlay} ${semanticClassNames.dragOverlay}`,
|
|
361
|
-
children: [
|
|
362
|
-
/* @__PURE__ */ jsx(
|
|
363
|
-
FileIcon,
|
|
364
|
-
{
|
|
365
|
-
filename: dragActiveFile.filename,
|
|
366
|
-
size: 14,
|
|
367
|
-
className: `${fileIcon} ${semanticClassNames.fileIcon}`
|
|
368
|
-
}
|
|
369
|
-
),
|
|
370
|
-
/* @__PURE__ */ jsx(
|
|
371
|
-
"span",
|
|
372
|
-
{
|
|
373
|
-
className: `${fileName} ${semanticClassNames.fileName}`,
|
|
374
|
-
children: dragActiveFile.filename
|
|
375
|
-
}
|
|
376
|
-
)
|
|
377
|
-
]
|
|
378
|
-
}
|
|
379
|
-
) : null
|
|
380
|
-
}
|
|
381
|
-
) }),
|
|
382
|
-
document.body
|
|
383
|
-
) : null
|
|
384
|
-
]
|
|
385
|
-
}
|
|
386
|
-
)
|
|
387
|
-
}
|
|
388
|
-
)
|
|
389
|
-
]
|
|
312
|
+
) : null }) }),
|
|
313
|
+
document.body
|
|
314
|
+
) : null
|
|
315
|
+
]
|
|
316
|
+
}
|
|
317
|
+
) })
|
|
318
|
+
] }),
|
|
319
|
+
/* @__PURE__ */ jsxs("div", { className: `${modalEditor} ${semanticClassNames.modalEditor}`, children: [
|
|
320
|
+
/* @__PURE__ */ jsx("div", { className: `${breadcrumb} ${semanticClassNames.breadcrumb}`, children: /* @__PURE__ */ jsx("div", { className: `${breadcrumbLeft} ${semanticClassNames.breadcrumbLeft}`, children: activeFile && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
321
|
+
/* @__PURE__ */ jsx(
|
|
322
|
+
FileIcon,
|
|
323
|
+
{
|
|
324
|
+
className: `${fileIcon} ${semanticClassNames.fileIcon}`,
|
|
325
|
+
filename: activeFile.filename,
|
|
326
|
+
size: 14
|
|
390
327
|
}
|
|
391
328
|
),
|
|
392
|
-
/* @__PURE__ */
|
|
393
|
-
"
|
|
329
|
+
/* @__PURE__ */ jsx(
|
|
330
|
+
"span",
|
|
394
331
|
{
|
|
395
|
-
className: `${
|
|
396
|
-
children:
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
className: `${breadcrumbLeft} ${semanticClassNames.breadcrumbLeft}`,
|
|
405
|
-
children: activeFile && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
406
|
-
/* @__PURE__ */ jsx(
|
|
407
|
-
FileIcon,
|
|
408
|
-
{
|
|
409
|
-
filename: activeFile.filename,
|
|
410
|
-
size: 14,
|
|
411
|
-
className: `${fileIcon} ${semanticClassNames.fileIcon}`
|
|
412
|
-
}
|
|
413
|
-
),
|
|
414
|
-
/* @__PURE__ */ jsx(
|
|
415
|
-
"span",
|
|
416
|
-
{
|
|
417
|
-
className: `${breadcrumbName} ${semanticClassNames.breadcrumbName}`,
|
|
418
|
-
children: activeFile.filename
|
|
419
|
-
}
|
|
420
|
-
),
|
|
421
|
-
language && /* @__PURE__ */ jsx(
|
|
422
|
-
"span",
|
|
423
|
-
{
|
|
424
|
-
className: `${breadcrumbLang} ${semanticClassNames.breadcrumbLang}`,
|
|
425
|
-
children: language
|
|
426
|
-
}
|
|
427
|
-
)
|
|
428
|
-
] })
|
|
429
|
-
}
|
|
430
|
-
)
|
|
431
|
-
}
|
|
432
|
-
),
|
|
433
|
-
/* @__PURE__ */ jsx(
|
|
434
|
-
"div",
|
|
435
|
-
{
|
|
436
|
-
ref: containerRef,
|
|
437
|
-
className: `${editorContainer} ${semanticClassNames.editorContainer}`
|
|
438
|
-
}
|
|
439
|
-
)
|
|
440
|
-
]
|
|
332
|
+
className: `${breadcrumbName} ${semanticClassNames.breadcrumbName}`,
|
|
333
|
+
children: activeFile.filename
|
|
334
|
+
}
|
|
335
|
+
),
|
|
336
|
+
language && /* @__PURE__ */ jsx(
|
|
337
|
+
"span",
|
|
338
|
+
{
|
|
339
|
+
className: `${breadcrumbLang} ${semanticClassNames.breadcrumbLang}`,
|
|
340
|
+
children: language
|
|
441
341
|
}
|
|
442
342
|
)
|
|
443
|
-
]
|
|
444
|
-
|
|
445
|
-
|
|
343
|
+
] }) }) }),
|
|
344
|
+
/* @__PURE__ */ jsx(
|
|
345
|
+
"div",
|
|
346
|
+
{
|
|
347
|
+
className: `${editorContainer} ${semanticClassNames.editorContainer}`,
|
|
348
|
+
ref: containerRef
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
] })
|
|
352
|
+
] })
|
|
446
353
|
] });
|
|
447
354
|
};
|
|
448
355
|
const CodeSnippetEditRenderer = ({
|
|
@@ -456,10 +363,10 @@ const CodeSnippetEditRenderer = ({
|
|
|
456
363
|
content: ({ dismiss }) => /* @__PURE__ */ jsx(
|
|
457
364
|
CodeEditorModal,
|
|
458
365
|
{
|
|
459
|
-
|
|
460
|
-
onFilesChange,
|
|
366
|
+
colorScheme,
|
|
461
367
|
dismiss,
|
|
462
|
-
|
|
368
|
+
files,
|
|
369
|
+
onFilesChange
|
|
463
370
|
}
|
|
464
371
|
),
|
|
465
372
|
className: codeSnippetDialogPopup,
|
|
@@ -474,10 +381,10 @@ const CodeSnippetEditRenderer = ({
|
|
|
474
381
|
/* @__PURE__ */ jsx(
|
|
475
382
|
"button",
|
|
476
383
|
{
|
|
477
|
-
|
|
384
|
+
"aria-label": "Edit code snippet",
|
|
478
385
|
className: `${editOverlay} ${semanticClassNames.editOverlay}`,
|
|
386
|
+
type: "button",
|
|
479
387
|
onClick: handleEdit,
|
|
480
|
-
"aria-label": "Edit code snippet",
|
|
481
388
|
children: /* @__PURE__ */ jsxs("span", { className: `${editLabel} ${semanticClassNames.editLabel}`, children: [
|
|
482
389
|
/* @__PURE__ */ jsx(Pencil, { size: 14 }),
|
|
483
390
|
"Edit"
|
|
@@ -496,10 +403,7 @@ function o() {
|
|
|
496
403
|
throw r2.search = t.toString(), Error(`Minified Lexical error #${n2}; visit ${r2.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
|
|
497
404
|
})(8), n;
|
|
498
405
|
}
|
|
499
|
-
const CodeSnippetEditDecorator = ({
|
|
500
|
-
nodeKey,
|
|
501
|
-
files
|
|
502
|
-
}) => {
|
|
406
|
+
const CodeSnippetEditDecorator = ({ nodeKey, files }) => {
|
|
503
407
|
const [editor] = o();
|
|
504
408
|
const onFilesChange = useCallback(
|
|
505
409
|
(newFiles) => {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CommandItemConfig } from '@haklex/rich-editor/commands';
|
|
2
|
+
import { CodeFile } from '@haklex/rich-editor/renderers';
|
|
2
3
|
import { EditorConfig, LexicalEditor, LexicalNode } from 'lexical';
|
|
3
4
|
import { ReactElement } from 'react';
|
|
4
5
|
import { CodeSnippetNode, SerializedCodeSnippetNode } from './CodeSnippetNode';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetEditNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"CodeSnippetEditNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAE,eAAe,EAAE,KAAK,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEpF,qBAAa,mBAAoB,SAAQ,eAAe;IACtD,MAAM,CAAC,YAAY,EAAE,iBAAiB,EAAE,CAmBtC;IAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,mBAAmB,GAAG,mBAAmB;IAI5D,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,yBAAyB,GAAG,mBAAmB;IAIjF,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAMtE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAEjF;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,mBAAmB,CAE7B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CodeFile } from '@haklex/rich-editor';
|
|
1
|
+
import { CodeFile } from '@haklex/rich-editor/renderers';
|
|
2
2
|
import { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, DecoratorNode } from 'lexical';
|
|
3
3
|
import { ReactElement } from 'react';
|
|
4
4
|
export type SerializedCodeSnippetNode = Spread<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippetNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"CodeSnippetNode.d.ts","sourceRoot":"","sources":["../../src/nodes/CodeSnippetNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAC5C;IACE,KAAK,EAAE,QAAQ,EAAE,CAAC;CACnB,EACD,qBAAqB,CACtB,CAAC;AAEF,qBAAa,eAAgB,SAAQ,aAAa,CAAC,YAAY,CAAC;IAC9D,OAAO,EAAE,QAAQ,EAAE,CAAC;IAEpB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,eAAe,GAAG,eAAe;gBAIxC,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,CAAC,EAAE,OAAO;IAK5C,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,yBAAyB,GAAG,eAAe;IAI7E,UAAU,IAAI,yBAAyB;IASvC,QAAQ,IAAI,QAAQ,EAAE;IAItB,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI;IAKjC,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAKtE;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,eAAe,CAEzE;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,eAAe,CAEhG"}
|
package/dist/static.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { D as CodeSnippetNode } from "./CodeSnippetNode-
|
|
2
|
-
import { E, $, C } from "./CodeSnippetNode-
|
|
1
|
+
import { D as CodeSnippetNode } from "./CodeSnippetNode-BmRM_Ma7.js";
|
|
2
|
+
import { E, $, C } from "./CodeSnippetNode-BmRM_Ma7.js";
|
|
3
3
|
import { CODE_SNIPPET_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
|
|
4
4
|
const codeSnippetNodes = [CodeSnippetNode];
|
|
5
5
|
export {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-ext-code-snippet",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.66",
|
|
5
5
|
"description": "Multi-file code snippet extension",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"exports": {
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
"@dnd-kit/utilities": "^3.2.2",
|
|
33
33
|
"lucide-react": "^0.577.0",
|
|
34
34
|
"shiki": "^4.0.1",
|
|
35
|
-
"@haklex/
|
|
36
|
-
"@haklex/rich-editor": "0.0.
|
|
37
|
-
"@haklex/
|
|
38
|
-
"@haklex/rich-
|
|
39
|
-
"@haklex/rich-
|
|
40
|
-
"@haklex/rich-
|
|
35
|
+
"@haklex/cm-editor": "0.0.66",
|
|
36
|
+
"@haklex/rich-editor-ui": "0.0.66",
|
|
37
|
+
"@haklex/rich-editor": "0.0.66",
|
|
38
|
+
"@haklex/rich-renderer-codeblock": "0.0.66",
|
|
39
|
+
"@haklex/rich-headless": "0.0.66",
|
|
40
|
+
"@haklex/rich-style-token": "0.0.66"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@lexical/react": "^0.41.0",
|
|
@@ -56,6 +56,11 @@
|
|
|
56
56
|
"publishConfig": {
|
|
57
57
|
"access": "public"
|
|
58
58
|
},
|
|
59
|
+
"repository": {
|
|
60
|
+
"type": "git",
|
|
61
|
+
"url": "https://github.com/Innei/haklex.git",
|
|
62
|
+
"directory": "packages/rich-ext-code-snippet"
|
|
63
|
+
},
|
|
59
64
|
"scripts": {
|
|
60
65
|
"build": "vite build",
|
|
61
66
|
"dev:build": "vite build --watch"
|
package/LICENSE
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 Innei
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
Additional Terms and Conditions
|
|
25
|
-
|
|
26
|
-
----------------
|
|
27
|
-
|
|
28
|
-
Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.
|