diff --git a/src/prompt.less b/src/prompt.less index cfcd82de..d156d536 100644 --- a/src/prompt.less +++ b/src/prompt.less @@ -279,6 +279,18 @@ input[type="checkbox"] { .save-disabled:hover { background-color: #aaaea7; } + .close-enabled { + color: white; + background-color: #9e0000; + } + .close-disabled { + color: rgb(52, 52, 52); + background-color: #aaaea7; + cursor: default !important; + } + .close-disabled:hover { + background-color: #aaaea7; + } .message { color: white; border-radius: 6px; diff --git a/src/view/code.tsx b/src/view/code.tsx index 43c96596..36472dba 100644 --- a/src/view/code.tsx +++ b/src/view/code.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { RendererContext, RendererOpts, LineStateType } from "../types"; import Editor from "@monaco-editor/react"; -import { GlobalModel } from "../model"; +import { GlobalModel, GlobalCommandRunner } from "../model"; function renderCmdText(text: string): any { return ⌘{text}; @@ -34,28 +34,28 @@ class SourceCodeRenderer extends React.Component< super(props); this.editorRef = React.createRef(); this.state = { - code: "", + code: null, language: "", languages: [], selectedLanguage: "", isSave: false, + isClosed: false, editorHeight: props.savedHeight, message: null, }; } componentDidMount(): void { - console.dir(this.props); this.filePath = this.props.lineState["prompt:file"]; const { screenId, lineId } = this.props.context; this.cacheKey = `${screenId}-${lineId}-${this.filePath}`; const code = SourceCodeRenderer.codeCache.get(this.cacheKey); if (code) { - this.setState({ code }); + this.setState({ code, isClosed: this.props.lineState["prompt:closed"] }); } else this.props.data.text().then((code) => { this.originalData = code; - this.setState({ code }); + this.setState({ code, isClosed: this.props.lineState["prompt:closed"] }); SourceCodeRenderer.codeCache.set(this.cacheKey, code); }); } @@ -79,10 +79,14 @@ class SourceCodeRenderer extends React.Component< } this.setEditorHeight(); editor.onKeyDown((e) => { - if (e.code === "KeyS" && (e.ctrlKey || e.metaKey)) { + if (e.code === "KeyS" && (e.ctrlKey || e.metaKey) && this.state.isSave) { e.preventDefault(); this.doSave(); } + if (e.code === "KeyD" && (e.ctrlKey || e.metaKey) && !this.state.isSave) { + e.preventDefault(); + this.doClose(); + } }); }; @@ -99,9 +103,9 @@ class SourceCodeRenderer extends React.Component< }; doSave = () => { + if (!this.state.isSave) return; const { screenId, lineId } = this.props.context; const encodedCode = new TextEncoder().encode(this.state.code); - debugger; GlobalModel.writeRemoteFile(screenId, lineId, this.filePath, encodedCode, { useTemp: true }) .then(() => { this.originalData = this.state.code; @@ -117,6 +121,31 @@ class SourceCodeRenderer extends React.Component< }); }; + doClose = () => { + if (this.state.isSave) return; + const { screenId, lineId } = this.props.context; + GlobalCommandRunner.setLineState(screenId, lineId, { ...this.props.lineState, "prompt:closed": true }, false) + .then(() => { + this.setState({ + isClosed: true, + message: { status: "success", text: `Closed. This editor is now read-only` }, + }); + setTimeout(() => { + this.setEditorHeight(); + }, 100); + setTimeout(() => { + this.setState({ message: null }); + }, 3000); + }) + .catch((e) => { + this.setState({ message: { status: "error", text: e.message } }); + + setTimeout(() => { + this.setState({ message: null }); + }, 3000); + }); + }; + handleEditorChange = (code) => { SourceCodeRenderer.codeCache.set(this.cacheKey, code); this.setState({ code }, () => { @@ -128,18 +157,18 @@ class SourceCodeRenderer extends React.Component< setEditorHeight = () => { const fullWindowHeight = parseInt(this.props.opts.maxSize.height); let _editorHeight = fullWindowHeight; - if (this.props.readOnly) { - const noOfLines = this.state.code.split("\n").length; + if (this.props.readOnly || this.state.isClosed) { + const noOfLines = Math.max(this.state.code.split("\n").length, 5); _editorHeight = Math.min(noOfLines * GlobalModel.termFontSize.get() * 1.5 + 10, fullWindowHeight); } this.setState({ editorHeight: _editorHeight }, () => this.props.scrollToBringIntoViewport()); }; render() { - const { opts, exitcode } = this.props; - const { lang, code, isSave } = this.state; + const { opts, exitcode, readOnly } = this.props; + const { lang, code, isSave, isClosed } = this.state; - if (!code) + if (code == null) return
; if (exitcode === 1) @@ -169,7 +198,7 @@ class SourceCodeRenderer extends React.Component< scrollBeyondLastLine: false, fontSize: GlobalModel.termFontSize.get(), fontFamily: "JetBrains Mono", - readOnly: this.props.readOnly, + readOnly: readOnly || isClosed, keybindings: [ { key: "ctrl+s", @@ -197,13 +226,27 @@ class SourceCodeRenderer extends React.Component< ))} - {!this.props.readOnly && ( + {!readOnly && !isClosed && (
- {`save`} {renderCmdText("S")} + {`save (`} + {renderCmdText("S")} + {`)`} +
+
+ )} + {!readOnly && !isClosed && ( +
+
+ {`close (`} + {renderCmdText("D")} + {`)`}
)} diff --git a/src/view/code_mobx.tsx b/src/view/code_mobx.tsx deleted file mode 100644 index 41a0c350..00000000 --- a/src/view/code_mobx.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import * as React from "react"; -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 = mobx.IObservableValue; - -@mobxReact.observer -class SourceCodeRenderer extends React.Component< - { - data: Blob; - cmdstr: String; - cwd: String; - context: RendererContext; - opts: RendererOpts; - savedHeight: number; - scrollToBringIntoViewport: () => void; - }, - {} -> { - code: OV = mobx.observable.box(""); - language: OV = mobx.observable.box(""); - languages: OV = mobx.observable.box([]); - selectedLanguage: OV = mobx.observable.box(""); - isFullWindow: OV = mobx.observable.box(false); // load this from opts - editorHeight: OV = mobx.observable.box(this.props.savedHeight); // load this from opts - editorRef; - resizeObserver; - constructor(props) { - super(props); - this.editorRef = React.createRef(); - console.log(`resetting the code`); - this.props.data.text().then((text) => this.code.set(text)); - } - - componentDidMount() {} - - componentWillUnmount(): void { - console.log(`will unmount`); - } - - handleEditorDidMount = (editor, monaco) => { - // Use a regular expression to match a filename with an extension - const extension = this.props.cmdstr.match(/(?:[^\\\/:*?"<>|\r\n]+\.)([a-zA-Z0-9]+)\b/)?.[1] || ""; - const detectedLanguage = monaco.languages - .getLanguages() - .find((lang) => lang.extensions && lang.extensions.includes("." + extension)); - const languages = monaco.languages.getLanguages().map((lang) => lang.id); - this.languages.set(languages); - if (detectedLanguage) { - this.selectedLanguage.set(detectedLanguage.id); - this.editorRef.current = editor; - const model = editor.getModel(); - if (model) { - monaco.editor.setModelLanguage(model, detectedLanguage.id); - this.language.set(detectedLanguage.id); - } - } - this.setEditorHeight(); - }; - - handleLanguageChange = (event) => { - const selectedLanguage = event.target.value; - this.selectedLanguage.set(selectedLanguage); - if (this.editorRef.current) { - const model = this.editorRef.current.getModel(); - if (model) { - monaco.editor.setModelLanguage(model, selectedLanguage); - this.language.set(selectedLanguage); - } - } - }; - - toggleFit = () => { - this.isFullWindow.set(!this.isFullWindow.get()); - this.setEditorHeight(); - setTimeout(() => this.props.scrollToBringIntoViewport(), 350); - }; - - handleEditorChange = (value, event) => { - // editing will always be in fullscreen - this.isFullWindow.set(true); - this.code.set(value); - this.setEditorHeight(); - setTimeout(() => this.props.scrollToBringIntoViewport(), 350); - }; - - setEditorHeight = () => { - const fullWindowHeight = parseInt(this.props.opts.maxSize.height); - let _editorHeight = fullWindowHeight; - if (!this.isFullWindow.get()) { - const noOfLines = this.code.get().split("\n").length; - _editorHeight = Math.min(noOfLines * GlobalModel.termFontSize.get() * 1.5 + 10, fullWindowHeight); - } - this.editorHeight.set(_editorHeight); - }; - - render() { - let opts = this.props.opts; - let lang = this.language.get(); - let code = this.code.get(); - if (!code) { - return
; - } - return ( -
-
- -
-
- -
-
- {this.isFullWindow.get() ? `shrink` : `expand`} -
-
-
-
- ); - } -} - -export { SourceCodeRenderer };