preview edit (#302)

Author: adred

frontend/app/block/block.less

@@ -1,6 +1,8 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+@import "../mixins.less";
+
 .block {
     display: flex;
     flex-direction: column;
@@ -111,12 +113,23 @@
                 }
 
                 .block-frame-text {
+                    .ellipsis();
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
                     overflow-x: hidden;
-                    text-wrap: nowrap;
-                    text-overflow: ellipsis;
+                    flex-grow: 1;
+
+                    &.preview-filename {
+                        span {
+                            height: 100%;
+                            cursor: pointer;
+
+                            &:hover {
+                                background: var(--highlight-bg-color);
+                            }
+                        }
+                    }
                 }
 
                 .iconbutton {

frontend/app/block/blockframe.tsx

@@ -217,8 +217,10 @@ const HeaderTextElem = React.memo(({ elem, preview }: { elem: HeaderElem; previe
         return <Input decl={elem} className={clsx("block-frame-input", elem.className)} preview={preview} />;
     } else if (elem.elemtype == "text") {
         return (
-            <div ref={preview ? null : elem.ref} className="block-frame-text">
-                {elem.text}
+            <div className={clsx("block-frame-text", elem.className)}>
+                <span ref={preview ? null : elem.ref} onClick={() => elem?.onClick()}>
+                    {elem.text}
+                </span>
             </div>
         );
     } else if (elem.elemtype == "textbutton") {

frontend/app/element/button.less

@@ -100,4 +100,12 @@
         padding-left: 10px;
         padding-right: 10px;
     }
+
+    .font-size-11 {
+        font-size: 11px;
+    }
+
+    .font-weight-500 {
+        font-weight: 500;
+    }
 }

frontend/app/view/codeeditor/codeeditor.tsx

@@ -64,7 +64,6 @@ interface CodeEditorProps {
     parentRef: React.MutableRefObject<HTMLDivElement>;
     text: string;
     filename: string;
-    readonly: boolean;
     language?: string;
     onChange?: (text: string) => void;
     onSave?: () => void;
@@ -73,7 +72,6 @@ interface CodeEditorProps {
 }
 
 export function CodeEditor({
-    readonly = false,
     parentRef,
     text,
     language,
@@ -150,7 +148,6 @@ export function CodeEditor({
     }
 
     const editorOpts = defaultEditorOptions();
-    editorOpts.readOnly = readonly;
 
     return (
         <div className="code-editor-wrapper">