small changes to work on textwrapping in textarea

src/main.tsx

@@ -12,7 +12,7 @@ import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType
 import type * as T from "./types";
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import {GlobalModel, GlobalCommandRunner, Session, Cmd, ScreenLines, Screen, riToRPtr, TabColors, RemoteColors} from "./model";
-import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./textmeasure";
+import {windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols, getMonoFontSize} from "./textmeasure";
 import {isModKeyPress, boundInt, sortAndFilterRemotes} from "./util";
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -116,6 +116,21 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         }
     }
 
+    getTextAreaMaxCols() : number {
+        let taElem = this.mainInputRef.current;
+        if (taElem == null) {
+            return 0;
+        }
+        let cs = window.getComputedStyle(taElem);
+        let padding = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+        let borders = parseFloat(cs.borderLeft) + parseFloat(cs.borderRight);
+        let contentWidth = taElem.clientWidth - padding - borders;
+        let fontSize = getMonoFontSize(parseInt(cs.fontSize));
+        let maxCols = Math.floor(contentWidth / fontSize.width);
+        console.log("getareamaxcols", contentWidth, fontSize, maxCols);
+        return maxCols;
+    }
+
     checkHeight(shouldFire : boolean) : void {
         let elem = this.controlRef.current;
         if (elem == null) {
@@ -559,9 +574,10 @@ class TextAreaInput extends React.Component<{onHeightChange : () => void}, {}> {
         if (activeScreen != null) {
             activeScreen.focusType.get(); // for reaction
         }
+        let computedHeight = (displayLines*24)+14;
         return (
             <div className="control cmd-input-control is-expanded" ref={this.controlRef}>
-                <textarea ref={this.mainInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" id="main-cmd-input" onFocus={this.handleMainFocus} onBlur={this.handleMainBlur} rows={displayLines} value={curLine} onKeyDown={this.onKeyDown} onChange={this.onChange} className={cn("textarea", {"display-disabled": disabled})}></textarea>
+                <textarea ref={this.mainInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" id="main-cmd-input" onFocus={this.handleMainFocus} onBlur={this.handleMainBlur} style={{height: computedHeight, minHeight: computedHeight}} value={curLine} onKeyDown={this.onKeyDown} onChange={this.onChange} className={cn("textarea", {"display-disabled": disabled})}></textarea>
                 <input ref={this.historyInputRef} spellCheck="false" autoComplete="off" autoCorrect="off" className="history-input" type="text" onFocus={this.handleHistoryFocus} onKeyDown={this.onHistoryKeyDown} onChange={this.handleHistoryInput} value={inputModel.historyQueryOpts.get().queryStr}/>
             </div>
         );

src/model.ts

@@ -272,7 +272,7 @@ class Screen {
             return null;
         }
         if (GlobalModel.isDev) {
-            return sprintf("http://devtest.getprompt.com:9001/static/index.html?screenid=%s&viewkey=%s", this.screenId, viewKey);
+            return sprintf("http://devtest.getprompt.com:9001/static/index-dev.html?screenid=%s&viewkey=%s", this.screenId, viewKey);
         }
         return sprintf("https://share.getprompt.dev/s/%s?viewkey=%s", this.screenId, viewKey);
     }

src/sh2.less

@@ -1894,6 +1894,7 @@ body .xterm .xterm-viewport {
             padding-bottom: calc(0.5em - 1px);
             padding-top: calc(0.5em - 1px);
             resize: none;
+            overflow-wrap: anywhere;
 
             &:active, &:focus {
                 border-color: white !important;

src/textmeasure.ts

@@ -13,6 +13,7 @@ MonoFontSizes[12] = {height: 16, width: 7.203};
 MonoFontSizes[13] = {height: 18, width: 7.797};
 MonoFontSizes[14] = {height: 19, width: 8.398};
 MonoFontSizes[15] = {height: 20, width: 9};
+MonoFontSizes[16] = {height: 22, width: 9.594};
 
 function getMonoFontSize(fontSize : number) : {height : number, width : number} {
     return MonoFontSizes[fontSize];