fix bug with CodeEditor/monaco model, more preview refactoring (#2353)

the primary purpose of this PR is to fix a showstopper bug in the
CodeEditor component by setting "path" to a stable UUID. the bug was
that it started as empty string, so it created a shared model between
all of the codeeditor components. now each will get their own monaco
model.

also took this opportunity to do more more preview view refactoring,
splitting up code, and more tailwind migrations.

Author: sawka

frontend/app/element/markdown-util.ts

@@ -162,7 +162,7 @@ export const resolveRemoteFile = async (filepath: string, resolveOpts: MarkdownR
         const baseDirUri = formatRemoteUri(resolveOpts.baseDir, resolveOpts.connName);
         const fileInfo = await RpcApi.FileJoinCommand(TabRpcClient, [baseDirUri, filepath]);
         const remoteUri = formatRemoteUri(fileInfo.path, resolveOpts.connName);
-        console.log("markdown resolve", resolveOpts, filepath, "=>", baseDirUri, remoteUri);
+        // console.log("markdown resolve", resolveOpts, filepath, "=>", baseDirUri, remoteUri);
         const usp = new URLSearchParams();
         usp.set("path", remoteUri);
         return getWebServerEndpoint() + "/wave/stream-file?" + usp.toString();

frontend/app/element/markdown.tsx

@@ -10,7 +10,7 @@ import {
     transformBlocks,
 } from "@/app/element/markdown-util";
 import remarkMermaidToTag from "@/app/element/remark-mermaid-to-tag";
-import { boundNumber, useAtomValueSafe } from "@/util/util";
+import { boundNumber, useAtomValueSafe, cn } from "@/util/util";
 import clsx from "clsx";
 import { Atom } from "jotai";
 import { OverlayScrollbarsComponent, OverlayScrollbarsComponentRef } from "overlayscrollbars-react";
@@ -297,6 +297,7 @@ type MarkdownProps = {
     showTocAtom?: Atom<boolean>;
     style?: React.CSSProperties;
     className?: string;
+    contentClassName?: string;
     onClickExecute?: (cmd: string) => void;
     resolveOpts?: MarkdownResolveOpts;
     scrollable?: boolean;
@@ -311,6 +312,7 @@ const Markdown = ({
     showTocAtom,
     style,
     className,
+    contentClassName,
     resolveOpts,
     fontSizeOverride,
     fixedFontSizeOverride,
@@ -383,19 +385,30 @@ const Markdown = ({
     };
 
     const toc = useMemo(() => {
-        if (showToc && tocRef.current.length > 0) {
-            return tocRef.current.map((item) => {
+        if (showToc) {
+            if (tocRef.current.length > 0) {
+                return tocRef.current.map((item) => {
+                    return (
+                        <a
+                            key={item.href}
+                            className="toc-item"
+                            style={{ "--indent-factor": item.depth } as React.CSSProperties}
+                            onClick={() => setFocusedHeading(item.href)}
+                        >
+                            {item.value}
+                        </a>
+                    );
+                });
+            } else {
                 return (
-                    <a
-                        key={item.href}
-                        className="toc-item"
-                        style={{ "--indent-factor": item.depth } as React.CSSProperties}
-                        onClick={() => setFocusedHeading(item.href)}
+                    <div
+                        className="toc-item toc-empty text-secondary"
+                        style={{ "--indent-factor": 2 } as React.CSSProperties}
                     >
-                        {item.value}
-                    </a>
+                        No sub-headings found
+                    </div>
                 );
-            });
+            }
         }
     }, [showToc, tocRef]);
 
@@ -444,7 +457,7 @@ const Markdown = ({
         return (
             <OverlayScrollbarsComponent
                 ref={contentsOsRef}
-                className="content"
+                className={cn("content", contentClassName)}
                 options={{ scrollbars: { autoHide: "leave" } }}
             >
                 <ReactMarkdown
@@ -460,7 +473,7 @@ const Markdown = ({
 
     const NonScrollableMarkdown = () => {
         return (
-            <div className="content non-scrollable">
+            <div className={cn("content non-scrollable", contentClassName)}>
                 <ReactMarkdown
                     remarkPlugins={remarkPlugins}
                     rehypePlugins={rehypePlugins}
@@ -483,9 +496,9 @@ const Markdown = ({
         <div className={clsx("markdown", className)} style={mergedStyle}>
             {scrollable ? <ScrollableMarkdown /> : <NonScrollableMarkdown />}
             {toc && (
-                <OverlayScrollbarsComponent className="toc" options={{ scrollbars: { autoHide: "leave" } }}>
+                <OverlayScrollbarsComponent className="toc mt-1" options={{ scrollbars: { autoHide: "leave" } }}>
                     <div className="toc-inner">
-                        <h4>Table of Contents</h4>
+                        <h4 className="font-bold">Table of Contents</h4>
                         {toc}
                     </div>
                 </OverlayScrollbarsComponent>

frontend/app/view/codeeditor/codeeditor.tsx

@@ -8,9 +8,7 @@ import type * as MonacoTypes from "monaco-editor/esm/vs/editor/editor.api";
 import { configureMonacoYaml } from "monaco-yaml";
 import React, { useMemo, useRef } from "react";
 
-import { RpcApi } from "@/app/store/wshclientapi";
-import { TabRpcClient } from "@/app/store/wshrpcutil";
-import { boundNumber, makeConnRoute } from "@/util/util";
+import { boundNumber } from "@/util/util";
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
@@ -19,7 +17,6 @@ import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import { SchemaEndpoints, getSchemaEndpointInfo } from "./schemaendpoints";
 import ymlWorker from "./yamlworker?worker";
 
-
 // there is a global monaco variable (TODO get the correct TS type)
 declare var monaco: Monaco;
 
@@ -109,23 +106,21 @@ function defaultEditorOptions(): MonacoTypes.editor.IEditorOptions {
 interface CodeEditorProps {
     blockId: string;
     text: string;
-    filename: string;
-    fileinfo: FileInfo;
+    readonly: boolean;
     language?: string;
-    meta?: MetaType;
     onChange?: (text: string) => void;
     onMount?: (monacoPtr: MonacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => () => void;
 }
 
-export function CodeEditor({ blockId, text, language, filename, fileinfo, meta, onChange, onMount }: CodeEditorProps) {
+export function CodeEditor({ blockId, text, language, readonly, onChange, onMount }: CodeEditorProps) {
     const divRef = useRef<HTMLDivElement>(null);
     const unmountRef = useRef<() => void>(null);
     const minimapEnabled = useOverrideConfigAtom(blockId, "editor:minimapenabled") ?? false;
     const stickyScrollEnabled = useOverrideConfigAtom(blockId, "editor:stickyscrollenabled") ?? false;
     const wordWrap = useOverrideConfigAtom(blockId, "editor:wordwrap") ?? false;
     const fontSize = boundNumber(useOverrideConfigAtom(blockId, "editor:fontsize"), 6, 64);
     const theme = "wave-theme-dark";
-    const [absPath, setAbsPath] = React.useState("");
+    const editorPath = useRef(crypto.randomUUID()).current;
 
     React.useEffect(() => {
         return () => {
@@ -136,24 +131,6 @@ export function CodeEditor({ blockId, text, language, filename, fileinfo, meta,
         };
     }, []);
 
-    React.useEffect(() => {
-        const inner = async () => {
-            try {
-                const fileInfo = await RpcApi.RemoteFileJoinCommand(TabRpcClient, [filename], {
-                    route: makeConnRoute(meta.connection ?? ""),
-                });
-                setAbsPath(fileInfo.path);
-            } catch (e) {
-                setAbsPath(filename);
-            }
-        };
-        inner();
-    }, [filename]);
-
-    React.useEffect(() => {
-        console.log("abspath is", absPath);
-    }, [absPath]);
-
     function handleEditorChange(text: string, ev: MonacoTypes.editor.IModelContentChangedEvent) {
         if (onChange) {
             onChange(text);
@@ -168,13 +145,13 @@ export function CodeEditor({ blockId, text, language, filename, fileinfo, meta,
 
     const editorOpts = useMemo(() => {
         const opts = defaultEditorOptions();
-        opts.readOnly = fileinfo.readonly;
+        opts.readOnly = readonly;
         opts.minimap.enabled = minimapEnabled;
         opts.stickyScroll.enabled = stickyScrollEnabled;
         opts.wordWrap = wordWrap ? "on" : "off";
         opts.fontSize = fontSize;
         return opts;
-    }, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize, fileinfo.readonly]);
+    }, [minimapEnabled, stickyScrollEnabled, wordWrap, fontSize, readonly]);
 
     return (
         <div className="flex flex-col w-full h-full overflow-hidden items-center justify-center">
@@ -185,7 +162,7 @@ export function CodeEditor({ blockId, text, language, filename, fileinfo, meta,
                     options={editorOpts}
                     onChange={handleEditorChange}
                     onMount={handleEditorOnMount}
-                    path={absPath}
+                    path={editorPath}
                     language={language}
                 />
             </div>

frontend/app/view/preview/directorypreview.scss

@@ -90,16 +90,6 @@
             display: flex;
             flex-direction: column;
             padding: 0 5px 5px 5px;
-            .dir-table-body-search-display {
-                display: flex;
-                border-radius: 3px;
-                padding: 0.25rem 0.5rem;
-                background-color: var(--warning-color);
-
-                .search-display-close-button {
-                    margin-left: auto;
-                }
-            }
 
             .dir-table-body-scroll-box {
                 position: relative;
@@ -185,52 +175,6 @@
             }
         }
     }
-
-    .dir-table-search-line {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.7rem;
-
-        .dir-table-search-box {
-            width: 0;
-            height: 0;
-            opacity: 0;
-            padding: 0;
-            border: none;
-            pointer-events: none;
-        }
-    }
-}
-
-.dir-table-button {
-    background-color: transparent;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    padding: 0.2rem;
-    border-radius: 6px;
-
-    input {
-        width: 0;
-        height: 0;
-        opacity: 0;
-        padding: 0;
-        border: none;
-        pointer-events: none;
-    }
-
-    &:hover {
-        background-color: var(--highlight-bg-color);
-    }
-
-    &:focus {
-        background-color: var(--highlight-bg-color);
-    }
-
-    &:focus-within {
-        background-color: var(--highlight-bg-color);
-    }
 }
 
 .entry-manager-overlay {

frontend/app/view/preview/entry-manager.tsx

@@ -0,0 +1,65 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from "@/app/element/button";
+import { Input } from "@/app/element/input";
+import React, { memo, useState } from "react";
+
+export enum EntryManagerType {
+    NewFile = "New File",
+    NewDirectory = "New Folder",
+    EditName = "Rename",
+}
+
+export type EntryManagerOverlayProps = {
+    forwardRef?: React.Ref<HTMLDivElement>;
+    entryManagerType: EntryManagerType;
+    startingValue?: string;
+    onSave: (newValue: string) => void;
+    onCancel?: () => void;
+    style?: React.CSSProperties;
+    getReferenceProps?: () => any;
+};
+
+export const EntryManagerOverlay = memo(
+    ({
+        entryManagerType,
+        startingValue,
+        onSave,
+        onCancel,
+        forwardRef,
+        style,
+        getReferenceProps,
+    }: EntryManagerOverlayProps) => {
+        const [value, setValue] = useState(startingValue);
+        return (
+            <div className="entry-manager-overlay" ref={forwardRef} style={style} {...(getReferenceProps?.() ?? {})}>
+                <div className="entry-manager-type">{entryManagerType}</div>
+                <div className="entry-manager-input">
+                    <Input
+                        value={value}
+                        onChange={setValue}
+                        autoFocus={true}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onSave(value);
+                            }
+                        }}
+                    />
+                </div>
+                <div className="entry-manager-buttons">
+                    <Button className="vertical-padding-4" onClick={() => onSave(value)}>
+                        Save
+                    </Button>
+                    <Button className="vertical-padding-4 red outlined" onClick={onCancel}>
+                        Cancel
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+);
+
+EntryManagerOverlay.displayName = "EntryManagerOverlay";