@parallelworks/ui 0.52.0 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "React UI components: a theme contract, icons, brand logos, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {
@@ -10,7 +10,9 @@
   },
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./src/editor/monacoFeatures.ts",
+    "./dist/editor/monacoFeatures.js"
   ],
   "exports": {
     ".": {
@@ -96,6 +98,7 @@
     "clsx": "^2.1.1",
     "css-tree": "^3.2.1",
     "dequal": "^2.0.3",
+    "katex": "^0.16.27",
     "lucide-react": "1.52.0",
     "luxon": "^3.7.2",
     "react-zoom-pan-pinch": "^4.2.0",

package/dist/file-explorer/FilePreview/CodePreviewEditor.d.ts

@@ -1,6 +0,0 @@
-interface CodePreviewEditorProps {
-    value: string;
-    language: string;
-}
-export default function CodePreviewEditor({ value, language }: CodePreviewEditorProps): import("react").JSX.Element;
-export {};

package/dist/file-explorer/FilePreview/CodePreviewEditor.js

@@ -1,64 +0,0 @@
-import { useCssIsDark } from "../../components/useCssIsDark.js";
-import { defineEditorThemes, followThemeTokens, getThemeName } from "../../editor/themes.js";
-import { setupMonacoWorkers } from "../../editor/workers.js";
-import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import * as monaco from "monaco-editor";
-//#region src/file-explorer/FilePreview/CodePreviewEditor.tsx
-var OPTIONS = {
-	readOnly: true,
-	domReadOnly: true,
-	automaticLayout: true,
-	minimap: { enabled: false },
-	scrollBeyondLastLine: false,
-	renderLineHighlight: "none",
-	overviewRulerLanes: 0,
-	hideCursorInOverviewRuler: true,
-	lineNumbers: "on",
-	wordWrap: "off",
-	fontSize: 12,
-	scrollbar: { alwaysConsumeMouseWheel: false }
-};
-setupMonacoWorkers();
-function CodePreviewEditor({ value, language }) {
-	const isDark = useCssIsDark();
-	const editorRef = useRef(null);
-	useEffect(() => {
-		return () => {
-			editorRef.current?.getModel()?.dispose();
-			editorRef.current?.dispose();
-			editorRef.current = null;
-		};
-	}, []);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model && model.getValue() !== value) model.setValue(value);
-	}, [value]);
-	useEffect(() => {
-		const model = editorRef.current?.getModel();
-		if (model) monaco.editor.setModelLanguage(model, language);
-	}, [language]);
-	useEffect(() => {
-		if (editorRef.current) {
-			defineEditorThemes(monaco.editor);
-			monaco.editor.setTheme(getThemeName(isDark));
-		}
-		return followThemeTokens(monaco.editor, () => getThemeName(isDark));
-	}, [isDark]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "h-full w-full",
-		ref: (container) => {
-			if (container && !editorRef.current) {
-				defineEditorThemes(monaco.editor);
-				const model = monaco.editor.createModel(value, language);
-				editorRef.current = monaco.editor.create(container, {
-					...OPTIONS,
-					model
-				});
-				monaco.editor.setTheme(getThemeName(isDark));
-			}
-		}
-	});
-}
-//#endregion
-export { CodePreviewEditor as default };