diff --git a/src/linecomps.tsx b/src/linecomps.tsx index ea28390b..de2773c5 100644 --- a/src/linecomps.tsx +++ b/src/linecomps.tsx @@ -600,31 +600,34 @@ class LineCmd extends React.Component< }; } - scrollToBringIntoViewport = () => { + scrollToBringIntoViewport = (delay = 1) => { const container = document.getElementsByClassName("lines")[0]; const targetDiv = this.lineRef.current; const targetPosition = targetDiv.getBoundingClientRect(); const containerPosition = container.getBoundingClientRect(); - // Check if the top of the targetDiv is above the container's visible area - if (targetPosition.top < containerPosition.top) { - // Scroll up to make the top of the targetDiv visible - const scrollAmount = container.scrollTop + targetPosition.top - containerPosition.top; - container.scrollTo({ - top: scrollAmount, - behavior: "smooth", - }); - } - // Check if the bottom of the targetDiv is below the container's visible area - else if (targetPosition.bottom > containerPosition.bottom) { - // Scroll down to make the bottom of the targetDiv visible - const scrollAmount = container.scrollTop + targetPosition.bottom - containerPosition.bottom; - container.scrollTo({ - top: scrollAmount, - behavior: "smooth", - }); - } - // If both conditions are false, then targetDiv is already fully visible, no scrolling needed + setTimeout(() => doScroll(), delay); + const doScroll = () => { + // Check if the top of the targetDiv is above the container's visible area + if (targetPosition.top < containerPosition.top) { + // Scroll up to make the top of the targetDiv visible + const scrollAmount = container.scrollTop + targetPosition.top - containerPosition.top; + container.scrollTo({ + top: scrollAmount, + behavior: "smooth", + }); + } + // Check if the bottom of the targetDiv is below the container's visible area + else if (targetPosition.bottom > containerPosition.bottom) { + // Scroll down to make the bottom of the targetDiv visible + const scrollAmount = container.scrollTop + targetPosition.bottom - containerPosition.bottom; + container.scrollTo({ + top: scrollAmount, + behavior: "smooth", + }); + } + // If both conditions are false, then targetDiv is already fully visible, no scrolling needed + }; }; render() { diff --git a/src/prompt.less b/src/prompt.less index 16576e1a..cfcd82de 100644 --- a/src/prompt.less +++ b/src/prompt.less @@ -276,6 +276,9 @@ input[type="checkbox"] { background-color: #aaaea7; cursor: default !important; } + .save-disabled:hover { + background-color: #aaaea7; + } .message { color: white; border-radius: 6px; diff --git a/src/simplerenderer.tsx b/src/simplerenderer.tsx index fa1cba20..52ca1516 100644 --- a/src/simplerenderer.tsx +++ b/src/simplerenderer.tsx @@ -128,7 +128,6 @@ class SimpleBlobRendererModel { rtnp.then((file) => { this.readOnly = file.readOnly; this.dataBlob = file; - console.log("got file", file); mobx.action(() => { this.loading.set(false); this.loadError.set(null); diff --git a/src/view/code.tsx b/src/view/code.tsx index b387c235..43c96596 100644 --- a/src/view/code.tsx +++ b/src/view/code.tsx @@ -3,12 +3,15 @@ import { RendererContext, RendererOpts, LineStateType } from "../types"; import Editor from "@monaco-editor/react"; import { GlobalModel } from "../model"; +function renderCmdText(text: string): any { + return ⌘{text}; +} + class SourceCodeRenderer extends React.Component< { data: Blob; cmdstr: string; cwd: string; - readOnly: boolean; exitcode: number; context: RendererContext; opts: RendererOpts; @@ -35,7 +38,6 @@ class SourceCodeRenderer extends React.Component< language: "", languages: [], selectedLanguage: "", - isFullWindow: false, isSave: false, editorHeight: props.savedHeight, message: null, @@ -43,6 +45,7 @@ class SourceCodeRenderer extends React.Component< } 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}`; @@ -58,8 +61,9 @@ class SourceCodeRenderer extends React.Component< } handleEditorDidMount = (editor, monaco) => { - const extension = - (this.filePath && this.filePath.match(/(?:[^\\\/:*?"<>|\r\n]+\.)([a-zA-Z0-9]+)\b/)?.[1]) || ""; + // we try to grab the filename from with filePath (coming from lineState["prompt:file"]) or cmdstr + const strForFilePath = this.filePath || this.props.cmdstr; + const extension = strForFilePath.match(/(?:[^\\\/:*?"<>|\r\n]+\.)([a-zA-Z0-9]+)\b/)?.[1] || ""; const detectedLanguage = monaco.languages .getLanguages() .find((lang) => lang.extensions?.includes("." + extension)); @@ -94,13 +98,6 @@ class SourceCodeRenderer extends React.Component< } }; - toggleFit = () => { - const isFullWindow = !this.state.isFullWindow; - this.setState({ isFullWindow }); - this.setEditorHeight(); - setTimeout(() => this.props.scrollToBringIntoViewport(), 350); - }; - doSave = () => { const { screenId, lineId } = this.props.context; const encodedCode = new TextEncoder().encode(this.state.code); @@ -121,21 +118,21 @@ class SourceCodeRenderer extends React.Component< }; handleEditorChange = (code) => { - this.setState({ isFullWindow: true, code }); SourceCodeRenderer.codeCache.set(this.cacheKey, code); - this.setEditorHeight(); - setTimeout(() => this.props.scrollToBringIntoViewport(), 350); - this.props.data.text().then((originalCode) => this.setState({ isSave: code !== originalCode })); + this.setState({ code }, () => { + this.setEditorHeight(); + this.props.data.text().then((originalCode) => this.setState({ isSave: code !== originalCode })); + }); }; setEditorHeight = () => { const fullWindowHeight = parseInt(this.props.opts.maxSize.height); let _editorHeight = fullWindowHeight; - if (!this.state.isFullWindow) { + if (this.props.readOnly) { const noOfLines = this.state.code.split("\n").length; _editorHeight = Math.min(noOfLines * GlobalModel.termFontSize.get() * 1.5 + 10, fullWindowHeight); } - this.setState({ editorHeight: _editorHeight }); + this.setState({ editorHeight: _editorHeight }, () => this.props.scrollToBringIntoViewport()); }; render() { @@ -192,7 +189,7 @@ class SourceCodeRenderer extends React.Component< className="dropdown" value={this.state.selectedLanguage} onChange={this.handleLanguageChange} - style={{ minWidth: "6rem", maxWidth: "6rem", marginRight: "8px" }} + style={{ minWidth: "6rem", maxWidth: "6rem", marginRight: "26px" }} > {this.state.languages.map((lang, index) => ( ))} -