Pe 11 12 18 (#5)

* ready to tackle the height issue

* height adjusts, but requires some more testing

* removed fullscreen

* height now works

* set font family to  "JetBrains Mono"

src/linecomps.tsx

@@ -704,7 +704,7 @@ class LineCmd extends React.Component<
                     <div
                         key="minimise"
                         title={`${this.isMinimised.get() ? "Maximise" : "Minimise"}`}
-                        className={cn("line-icon", "line-minimise")}
+                        className={cn("line-icon", "line-minimise", this.isMinimised.get() ? "line-icon-show" : "")}
                         onClick={this.clickMinimise}
                     >
                         <i

src/lines.less

@@ -53,6 +53,10 @@
             font-size: 1.5rem;
         }
 
+        .line-icon-show {
+            visibility: visible;
+        }
+
         .line-bookmark:hover {
             color: white;
         }

src/plugins.ts

@@ -1,7 +1,6 @@
 import { RendererPluginType } from "./types";
 import { SimpleImageRenderer } from "./view/image";
 import { SimpleMarkdownRenderer } from "./view/markdown";
-import { SimpleJsonRenderer } from "./view/json";
 import { SourceCodeRenderer } from "./view/code";
 import { OpenAIRenderer, OpenAIRendererModel } from "./view/openai";
 import { isBlank } from "./util";
@@ -29,17 +28,6 @@ const MarkdownPlugin: RendererPluginType = {
     simpleComponent: SimpleMarkdownRenderer,
 };
 
-const JsonPlugin: RendererPluginType = {
-    name: "json",
-    rendererType: "simple",
-    heightType: "pixels",
-    dataType: "blob",
-    collapseType: "hide",
-    globalCss: null,
-    mimeTypes: ["application/json"],
-    simpleComponent: SimpleJsonRenderer,
-};
-
 const CodePlugin: RendererPluginType = {
     name: "code",
     rendererType: "simple",
@@ -97,7 +85,6 @@ if ((window as any).PluginModel == null) {
     PluginModel = new PluginModelClass();
     PluginModel.registerRendererPlugin(ImagePlugin);
     PluginModel.registerRendererPlugin(MarkdownPlugin);
-    PluginModel.registerRendererPlugin(JsonPlugin);
     PluginModel.registerRendererPlugin(CodePlugin);
     PluginModel.registerRendererPlugin(OpenAIPlugin);
     (window as any).PluginModel = PluginModel;

src/types.ts

@@ -354,6 +354,7 @@ type RendererOpts = {
     idealSize: WindowSize;
     termOpts: TermOptsType;
     termFontSize: number;
+    readOnly: boolean;
 };
 
 type RendererOptsUpdate = {
@@ -411,13 +412,6 @@ type SimpleBlobRendererComponent = React.ComponentType<{
     opts: RendererOpts;
     savedHeight: number;
 }>;
-// @mike - I guess we can remove SimpleJsonRendererComponent - its doesnt have any references
-type SimpleJsonRendererComponent = React.ComponentType<{
-    data: any;
-    context: RendererContext;
-    opts: RendererOpts;
-    savedHeight: number;
-}>;
 type FullRendererComponent = React.ComponentType<{ model: any }>;
 
 type WindowSize = {

src/view/code.tsx

@@ -3,6 +3,7 @@ import * as mobx from "mobx";
 import * as mobxReact from "mobx-react";
 import { RendererContext, RendererOpts } from "../types";
 import Editor from "@monaco-editor/react";
+import { GlobalModel } from "../model";
 
 type OV<V> = mobx.IObservableValue<V>;
 
@@ -18,14 +19,8 @@ class SourceCodeRenderer extends React.Component<
     },
     {}
 > {
-    code: OV<any> = mobx.observable.box(null, {
-        name: "code",
-        deep: false,
-    });
-    language: OV<any> = mobx.observable.box(null, {
-        name: "language",
-        deep: false,
-    });
+    code: OV<string> = mobx.observable.box("");
+    language: OV<string> = mobx.observable.box("");
     languages: OV<string[]> = mobx.observable.box([]);
     selectedLanguage: OV<string> = mobx.observable.box("");
 
@@ -73,26 +68,30 @@ class SourceCodeRenderer extends React.Component<
 
     render() {
         let opts = this.props.opts;
-        let maxWidth = opts.maxSize.width;
-        let minWidth = opts.maxSize.width;
-        if (minWidth > 1000) {
-            minWidth = 1000;
-        }
         let lang = this.language.get();
         let code = this.code.get();
-        if (!code) return <></>;
+        if (!code) {
+            return <div className="renderer-container code-renderer" style={{ height: this.props.savedHeight }} />;
+        }
+        const noOfLines = code.split("\n").length;
+        const editorHeight = Math.min(
+            noOfLines * GlobalModel.termFontSize.get() * 1.5 + 10,
+            parseInt(opts.maxSize.height)
+        );
         return (
             <div className="renderer-container code-renderer">
-                <div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
+                <div className="scroller" style={{ maxHeight: opts.maxSize.height, paddingBottom: "15px" }}>
                     <Editor
-                        height="30vh"
                         theme="hc-black"
+                        height={editorHeight}
                         defaultLanguage={lang}
                         defaultValue={code}
                         onMount={this.handleEditorDidMount}
                         options={{
                             scrollBeyondLastLine: false,
-                            fontSize: "14px",
+                            fontSize: GlobalModel.termFontSize.get(),
+                            fontFamily: "JetBrains Mono",
+                            readOnly: this.props.opts.readOnly,
                         }}
                     />
                 </div>

src/view/json.tsx

@@ -1,86 +0,0 @@
-import * as React from "react";
-import * as mobx from "mobx";
-import * as mobxReact from "mobx-react";
-import cn from "classnames";
-import { If, For, When, Otherwise, Choose } from "tsx-control-statements/components";
-import { WindowSize, RendererContext, TermOptsType, LineType, RendererOpts } from "../types";
-import { sprintf } from "sprintf-js";
-import { Markdown } from "../elements";
-import ReactJson from "react-json-view";
-
-type OV<V> = mobx.IObservableValue<V>;
-
-const MaxJsonSize = 50000;
-
-@mobxReact.observer
-class SimpleJsonRenderer extends React.Component<
-    { data: Blob; context: RendererContext; opts: RendererOpts; savedHeight: number },
-    {}
-> {
-    jsonObj: OV<any> = mobx.observable.box(null, { name: "jsonObj", deep: false });
-    jsonError: OV<string> = mobx.observable.box(null, { name: "jsonError" });
-
-    setJsonError(err: string) {
-        mobx.action(() => {
-            this.jsonError.set(err);
-        })();
-    }
-
-    componentDidMount() {
-        let dataBlob = this.props.data;
-        if (dataBlob.size > MaxJsonSize) {
-            this.setJsonError(sprintf("error: json too large to render size=%d", dataBlob.size));
-            return;
-        }
-        let prtn = dataBlob.text();
-        prtn.then((text) => {
-            if (/[\x00-\x08]/.test(text)) {
-                this.setJsonError(sprintf("error: not rendering json, binary characters detected"));
-                return;
-            }
-            try {
-                let obj = JSON.parse(text);
-                mobx.action(() => {
-                    this.jsonObj.set(obj);
-                })();
-            } catch (e) {
-                this.setJsonError(sprintf("error: JSON parse error: %s", e.message));
-            }
-        });
-    }
-
-    render() {
-        if (this.jsonError.get() != null) {
-            return (
-                <div className="renderer-container json-renderer">
-                    <div className="error-container">{this.jsonError.get()}</div>
-                </div>
-            );
-        }
-        if (this.jsonObj.get() == null) {
-            return <div className="renderer-container json-renderer" style={{ height: this.props.savedHeight }} />;
-        }
-        let opts = this.props.opts;
-        let maxWidth = opts.maxSize.width;
-        let minWidth = opts.maxSize.width;
-        if (minWidth > 1000) {
-            minWidth = 1000;
-        }
-        return (
-            <div className="renderer-container json-renderer">
-                <div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
-                    <ReactJson
-                        src={this.jsonObj.get()}
-                        theme="monokai"
-                        style={{ backgroundColor: "black" }}
-                        displayDataTypes={false}
-                        quotesOnKeys={false}
-                        sortKeys={true}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export { SimpleJsonRenderer };