@haklex/rich-ext-code-snippet 0.4.0 → 0.5.0

package/dist/edit-BpfJ1A_-.js

@@ -0,0 +1,416 @@
+import { C as modalSidebar, D as semanticClassNames, E as renameInput, O as sidebarAddButton, S as modalIconButton, T as modalTitlebar, _ as fileList, a as breadcrumbLeft, b as modalBody, c as dragOverlay, d as editOverlay, f as editorContainer, g as fileItem, h as fileIcon, k as sidebarHeader, l as editContainer, m as fileDragHandle, n as getLanguageFromFilename, r as breadcrumb, s as codeSnippetDialogPopup, t as CodeSnippetRenderer, u as editLabel, v as fileName, w as modalTitle, x as modalEditor, y as modal } from "./CodeSnippetRenderer-BNGQYBtp.js";
+import { i as _defineProperty, n as $isCodeSnippetNode, r as CodeSnippetNode } from "./CodeSnippetNode-DD50J5NW.js";
+import { $getNodeByKey, $insertNodes } from "lexical";
+import { FileCode, GripVertical, Pencil, Plus, Trash2, X } from "lucide-react";
+import { createContext, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useColorScheme } from "@haklex/rich-editor";
+import { presentDialog } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { getThemeExtensions, loadLanguageExtension } from "@haklex/cm-editor";
+import { normalizeLanguage } from "@haklex/rich-renderer-codeblock/constants";
+import { FileIcon } from "@haklex/rich-renderer-codeblock/icons";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region ../../node_modules/.pnpm/@lexical+react@0.44.0_react-dom@19.2.5_react@19.2.5__react@19.2.5_yjs@13.6.29/node_modules/@lexical/react/LexicalComposerContext.prod.mjs
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+var r = createContext(null);
+function o() {
+	const n = useContext(r);
+	return n ?? function(n, ...e) {
+		const r = new URL("https://lexical.dev/docs/error"), t = new URLSearchParams();
+		t.append("code", n);
+		for (const n of e) t.append("v", n);
+		throw r.search = t.toString(), Error(`Minified Lexical error #${n}; visit ${r.toString()} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`);
+	}(8), n;
+}
+//#endregion
+//#region src/CodeEditorModal.tsx
+var SortableFileItem = ({ file, isActive, isEditing, editValue, canDelete, onSelect, onStartRename, onEditChange, onCommitRename, onCancelRename, onDelete }) => {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: file.filename });
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${fileItem({
+			active: isActive,
+			dragging: isDragging
+		})} ${semanticClassNames.fileItem} ${isActive ? semanticClassNames.fileItemActive : ""} ${isDragging ? semanticClassNames.fileItemDragging : ""}`.trim(),
+		ref: setNodeRef,
+		style,
+		onClick: onSelect,
+		onDoubleClick: onStartRename,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: `${fileDragHandle} ${semanticClassNames.fileDragHandle}`,
+				...attributes,
+				...listeners,
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(GripVertical, { size: 12 })
+			}),
+			/* @__PURE__ */ jsx(FileIcon, {
+				className: `${fileIcon} ${semanticClassNames.fileIcon}`,
+				filename: file.filename,
+				size: 14
+			}),
+			isEditing ? /* @__PURE__ */ jsx("input", {
+				autoFocus: true,
+				className: `${renameInput} ${semanticClassNames.renameInput}`,
+				value: editValue,
+				onBlur: onCommitRename,
+				onChange: (e) => onEditChange(e.target.value),
+				onClick: (e) => e.stopPropagation(),
+				onKeyDown: (e) => {
+					if (e.key === "Enter") onCommitRename();
+					if (e.key === "Escape") onCancelRename();
+				}
+			}) : /* @__PURE__ */ jsx("span", {
+				className: `${fileName} ${semanticClassNames.fileName}`,
+				children: file.filename
+			}),
+			canDelete && /* @__PURE__ */ jsx("button", {
+				"aria-label": `Delete ${file.filename}`,
+				className: `hjkryc11 ${semanticClassNames.fileDelete}`,
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					onDelete();
+				},
+				children: /* @__PURE__ */ jsx(Trash2, { size: 12 })
+			})
+		]
+	});
+};
+var CodeEditorModal = ({ files: initialFiles, onFilesChange, dismiss, colorScheme }) => {
+	const [editFiles, setEditFiles] = useState(() => initialFiles.map((f) => ({ ...f })));
+	const [activeFilename, setActiveFilename] = useState(initialFiles[0]?.filename ?? "");
+	const [editingFilename, setEditingFilename] = useState(null);
+	const [newFilenameInput, setNewFilenameInput] = useState("");
+	const [dragActiveId, setDragActiveId] = useState(null);
+	const containerRef = useRef(null);
+	const editorRef = useRef(null);
+	const languageCompartmentRef = useRef(null);
+	const themeCompartmentRef = useRef(null);
+	if (!languageCompartmentRef.current) languageCompartmentRef.current = new Compartment();
+	if (!themeCompartmentRef.current) themeCompartmentRef.current = new Compartment();
+	const onCodeChangeRef = useRef(void 0);
+	const editFilesRef = useRef(editFiles);
+	editFilesRef.current = editFiles;
+	const activeFile = editFiles.find((f) => f.filename === activeFilename) ?? editFiles[0];
+	onCodeChangeRef.current = (code) => {
+		setEditFiles((prev) => prev.map((f) => f.filename === activeFilename ? {
+			...f,
+			code
+		} : f));
+	};
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const file = editFilesRef.current.find((f) => f.filename === activeFilename);
+		if (!file) return;
+		let cancelled = false;
+		const lang = normalizeLanguage(file.language ?? getLanguageFromFilename(file.filename));
+		const editor = new EditorView({
+			parent: container,
+			state: EditorState.create({
+				doc: file.code,
+				extensions: [
+					history(),
+					keymap.of([
+						...defaultKeymap,
+						...historyKeymap,
+						indentWithTab
+					]),
+					EditorView.updateListener.of((update) => {
+						if (!update.docChanged) return;
+						onCodeChangeRef.current?.(update.state.doc.toString());
+					}),
+					lineNumbers(),
+					themeCompartmentRef.current.of(getThemeExtensions(colorScheme)),
+					languageCompartmentRef.current.of([])
+				]
+			})
+		});
+		editorRef.current = editor;
+		(async () => {
+			const extension = await loadLanguageExtension(lang);
+			if (cancelled) return;
+			editor.dispatch({ effects: languageCompartmentRef.current.reconfigure(extension) });
+		})();
+		return () => {
+			cancelled = true;
+			editor.destroy();
+			editorRef.current = null;
+		};
+	}, [activeFilename]);
+	useEffect(() => {
+		const editor = editorRef.current;
+		if (!editor) return;
+		editor.dispatch({ effects: themeCompartmentRef.current.reconfigure(getThemeExtensions(colorScheme)) });
+	}, [colorScheme]);
+	const handleDismiss = useCallback(() => {
+		onFilesChange?.(editFiles);
+		dismiss();
+	}, [
+		editFiles,
+		onFilesChange,
+		dismiss
+	]);
+	const handleAddFile = useCallback(() => {
+		const name = `untitled-${editFiles.length + 1}.ts`;
+		const newFile = {
+			filename: name,
+			code: "",
+			language: "typescript"
+		};
+		setEditFiles((prev) => [...prev, newFile]);
+		setActiveFilename(name);
+	}, [editFiles.length]);
+	const handleDeleteFile = useCallback((filename) => {
+		if (editFiles.length <= 1) return;
+		const newFiles = editFiles.filter((f) => f.filename !== filename);
+		setEditFiles(newFiles);
+		if (activeFilename === filename) setActiveFilename(newFiles[0]?.filename ?? "");
+	}, [editFiles, activeFilename]);
+	const handleRenameFile = useCallback((oldName, newName) => {
+		if (!newName.trim() || editFiles.some((f) => f.filename === newName && f.filename !== oldName)) {
+			setEditingFilename(null);
+			return;
+		}
+		setEditFiles((prev) => prev.map((f) => f.filename === oldName ? {
+			...f,
+			filename: newName,
+			language: void 0
+		} : f));
+		if (activeFilename === oldName) setActiveFilename(newName);
+		setEditingFilename(null);
+	}, [editFiles, activeFilename]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const fileIds = useMemo(() => editFiles.map((f) => f.filename), [editFiles]);
+	const handleDragEnd = useCallback((event) => {
+		const { active, over } = event;
+		setDragActiveId(null);
+		if (!over || active.id === over.id) return;
+		const oldIndex = editFiles.findIndex((f) => f.filename === active.id);
+		const newIndex = editFiles.findIndex((f) => f.filename === over.id);
+		if (oldIndex === -1 || newIndex === -1) return;
+		setEditFiles(arrayMove(editFiles, oldIndex, newIndex));
+	}, [editFiles]);
+	const dragActiveFile = dragActiveId ? editFiles.find((f) => f.filename === dragActiveId) : null;
+	const { className: portalThemeClassName } = usePortalTheme();
+	const language = activeFile ? activeFile.language ?? getLanguageFromFilename(activeFile.filename) : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${modal} ${semanticClassNames.modal}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: `${modalTitlebar} ${semanticClassNames.modalTitlebar}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `${modalTitle} ${semanticClassNames.modalTitle}`,
+				children: "Code Snippet"
+			}), /* @__PURE__ */ jsx("button", {
+				className: `${modalIconButton} ${semanticClassNames.modalIconButton}`,
+				type: "button",
+				onClick: handleDismiss,
+				children: /* @__PURE__ */ jsx(X, { size: 14 })
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: `${modalBody} ${semanticClassNames.modalBody}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: `${modalSidebar} ${semanticClassNames.modalSidebar}`,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: `${sidebarHeader} ${semanticClassNames.sidebarHeader}`,
+					children: [/* @__PURE__ */ jsx("span", { children: "Files" }), /* @__PURE__ */ jsx("button", {
+						"aria-label": "Add file",
+						className: `${sidebarAddButton} ${semanticClassNames.sidebarAddButton}`,
+						type: "button",
+						onClick: handleAddFile,
+						children: /* @__PURE__ */ jsx(Plus, { size: 14 })
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: `${fileList} ${semanticClassNames.fileList}`,
+					children: /* @__PURE__ */ jsxs(DndContext, {
+						collisionDetection: closestCenter,
+						sensors,
+						onDragCancel: () => setDragActiveId(null),
+						onDragEnd: handleDragEnd,
+						onDragStart: (event) => setDragActiveId(event.active.id),
+						children: [/* @__PURE__ */ jsx(SortableContext, {
+							items: fileIds,
+							strategy: verticalListSortingStrategy,
+							children: editFiles.map((file) => /* @__PURE__ */ jsx(SortableFileItem, {
+								canDelete: editFiles.length > 1,
+								editValue: newFilenameInput,
+								file,
+								isActive: file.filename === activeFilename,
+								isEditing: editingFilename === file.filename,
+								onCancelRename: () => setEditingFilename(null),
+								onCommitRename: () => handleRenameFile(file.filename, newFilenameInput),
+								onDelete: () => handleDeleteFile(file.filename),
+								onEditChange: setNewFilenameInput,
+								onSelect: () => setActiveFilename(file.filename),
+								onStartRename: () => {
+									setEditingFilename(file.filename);
+									setNewFilenameInput(file.filename);
+								}
+							}, file.filename))
+						}), typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx(DragOverlay, { children: /* @__PURE__ */ jsx("div", {
+							className: portalThemeClassName,
+							style: { display: "contents" },
+							children: dragActiveFile ? /* @__PURE__ */ jsxs("div", {
+								className: `${fileItem()} ${semanticClassNames.fileItem} ${dragOverlay} ${semanticClassNames.dragOverlay}`,
+								children: [/* @__PURE__ */ jsx(FileIcon, {
+									className: `${fileIcon} ${semanticClassNames.fileIcon}`,
+									filename: dragActiveFile.filename,
+									size: 14
+								}), /* @__PURE__ */ jsx("span", {
+									className: `${fileName} ${semanticClassNames.fileName}`,
+									children: dragActiveFile.filename
+								})]
+							}) : null
+						}) }), document.body) : null]
+					})
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: `${modalEditor} ${semanticClassNames.modalEditor}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `${breadcrumb} ${semanticClassNames.breadcrumb}`,
+					children: /* @__PURE__ */ jsx("div", {
+						className: `${breadcrumbLeft} ${semanticClassNames.breadcrumbLeft}`,
+						children: activeFile && /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx(FileIcon, {
+								className: `hjkrycf ${semanticClassNames.fileIcon}`,
+								filename: activeFile.filename,
+								size: 14
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: `hjkryc16 ${semanticClassNames.breadcrumbName}`,
+								children: activeFile.filename
+							}),
+							language && /* @__PURE__ */ jsx("span", {
+								className: `hjkryc17 ${semanticClassNames.breadcrumbLang}`,
+								children: language
+							})
+						] })
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: `${editorContainer} ${semanticClassNames.editorContainer}`,
+					ref: containerRef
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+//#region src/CodeSnippetEditRenderer.tsx
+var CodeSnippetEditRenderer = ({ files, onFilesChange }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const colorScheme = useColorScheme();
+	const handleEdit = useCallback(() => {
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(CodeEditorModal, {
+				colorScheme,
+				dismiss,
+				files,
+				onFilesChange
+			}),
+			className: codeSnippetDialogPopup,
+			portalClassName,
+			theme: colorScheme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		files,
+		onFilesChange,
+		portalClassName,
+		colorScheme
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `${editContainer} ${semanticClassNames.editContainer}`,
+		children: [/* @__PURE__ */ jsx(CodeSnippetRenderer, { files }), /* @__PURE__ */ jsx("button", {
+			"aria-label": "Edit code snippet",
+			className: `${editOverlay} ${semanticClassNames.editOverlay}`,
+			type: "button",
+			onClick: handleEdit,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: `${editLabel} ${semanticClassNames.editLabel}`,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 14 }), "Edit"]
+			})
+		})]
+	});
+};
+//#endregion
+//#region src/CodeSnippetEditDecorator.tsx
+var CodeSnippetEditDecorator = ({ nodeKey, files }) => {
+	const [editor] = o();
+	return /* @__PURE__ */ jsx(CodeSnippetEditRenderer, {
+		files,
+		onFilesChange: useCallback((newFiles) => {
+			editor.update(() => {
+				const node = $getNodeByKey(nodeKey);
+				if ($isCodeSnippetNode(node)) node.setFiles(newFiles);
+			});
+		}, [editor, nodeKey])
+	});
+};
+//#endregion
+//#region src/nodes/CodeSnippetEditNode.ts
+var CodeSnippetEditNode = class CodeSnippetEditNode extends CodeSnippetNode {
+	static clone(node) {
+		return new CodeSnippetEditNode(node.__files, node.__key);
+	}
+	static importJSON(serializedNode) {
+		return new CodeSnippetEditNode(serializedNode.files);
+	}
+	decorate(_editor, _config) {
+		return createElement(CodeSnippetEditDecorator, {
+			nodeKey: this.__key,
+			files: this.__files
+		});
+	}
+};
+_defineProperty(CodeSnippetEditNode, "commandItems", [{
+	title: "Code Snippet",
+	icon: createElement(FileCode, { size: 20 }),
+	description: "Multi-file code snippet with tabs",
+	keywords: [
+		"code",
+		"snippet",
+		"files",
+		"tabs"
+	],
+	section: "MEDIA",
+	placement: ["slash", "toolbar"],
+	group: "insert",
+	onSelect: (editor) => {
+		editor.update(() => {
+			$insertNodes([$createCodeSnippetEditNode([{
+				filename: "index.ts",
+				code: "",
+				language: "typescript"
+			}])]);
+		});
+	}
+}]);
+function $createCodeSnippetEditNode(files) {
+	return new CodeSnippetEditNode(files);
+}
+function $isCodeSnippetEditNode(node) {
+	return node instanceof CodeSnippetEditNode;
+}
+//#endregion
+//#region src/edit.ts
+var codeSnippetEditNodes = [CodeSnippetEditNode];
+//#endregion
+export { CodeSnippetEditRenderer as a, CodeSnippetEditNode as i, $createCodeSnippetEditNode as n, $isCodeSnippetEditNode as r, codeSnippetEditNodes as t };

package/dist/edit.d.ts

@@ -0,0 +1,6 @@
+import { Klass, LexicalNode } from 'lexical';
+export type { CodeSnippetEditRendererProps } from './CodeSnippetEditRenderer';
+export { CodeSnippetEditRenderer } from './CodeSnippetEditRenderer';
+export { $createCodeSnippetEditNode, $isCodeSnippetEditNode, CodeSnippetEditNode, } from './nodes/CodeSnippetEditNode';
+export declare const codeSnippetEditNodes: Array<Klass<LexicalNode>>;
+//# sourceMappingURL=edit.d.ts.map

package/dist/edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../src/edit.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAIjD,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,6BAA6B,CAAA;AAEpC,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAyB,CAAA"}

package/dist/edit.mjs

@@ -0,0 +1,2 @@
+import { a as CodeSnippetEditRenderer, i as CodeSnippetEditNode, n as $createCodeSnippetEditNode, r as $isCodeSnippetEditNode, t as codeSnippetEditNodes } from "./edit-BpfJ1A_-.js";
+export { $createCodeSnippetEditNode, $isCodeSnippetEditNode, CodeSnippetEditNode, CodeSnippetEditRenderer, codeSnippetEditNodes };

package/dist/index.d.ts

@@ -1,9 +1,4 @@
-export type { CodeSnippetEditRendererProps } from './CodeSnippetEditRenderer';
-export { CodeSnippetEditRenderer } from './CodeSnippetEditRenderer';
-export { CodeSnippetRenderer } from './CodeSnippetRenderer';
-export { codeSnippetEditNodes, codeSnippetNodes } from './nodes';
-export { $createCodeSnippetEditNode, $isCodeSnippetEditNode, CodeSnippetEditNode, } from './nodes/CodeSnippetEditNode';
-export type { SerializedCodeSnippetNode } from './nodes/CodeSnippetNode';
-export { $createCodeSnippetNode, $isCodeSnippetNode, CodeSnippetNode, } from './nodes/CodeSnippetNode';
-export { CODE_SNIPPET_BLOCK_TRANSFORMER } from './transformer';
+export * from './edit';
+export * from './node';
+export * from './renderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,YAAY,EAAE,4BAA4B,EAAE,MAAM,2BAA2B,CAAA;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAChE,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,6BAA6B,CAAA;AACpC,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AACxE,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,GAChB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA"}