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"

Author: anandamarsh

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>