From 2ab0f4af4ce11d8431badc859ecc3d89cef0fc42 Mon Sep 17 00:00:00 2001 From: Amarsh Anand Date: Sun, 20 Aug 2023 11:27:52 -0700 Subject: [PATCH] created CodeRenderer with hardcoded js as lang --- src/plugins.ts | 169 +++++---- src/types.ts | 897 +++++++++++++++++++++++++--------------------- src/view/code.tsx | 73 ++++ 3 files changed, 660 insertions(+), 479 deletions(-) create mode 100644 src/view/code.tsx diff --git a/src/plugins.ts b/src/plugins.ts index bd6223cc..5bd9bd89 100644 --- a/src/plugins.ts +++ b/src/plugins.ts @@ -1,93 +1,110 @@ -import {RendererPluginType} from "./types"; -import {SimpleImageRenderer} from "./view/image"; -import {SimpleMarkdownRenderer} from "./view/markdown"; -import {SimpleJsonRenderer} from "./view/json"; -import {OpenAIRenderer, OpenAIRendererModel} from "./view/openai"; -import {isBlank} from "./util"; -import {sprintf} from "sprintf-js"; +import { RendererPluginType } from "./types"; +import { SimpleImageRenderer } from "./view/image"; +import { SimpleMarkdownRenderer } from "./view/markdown"; +import { SimpleJsonRenderer } from "./view/json"; +import { CodeRenderer } from "./view/code"; +import { OpenAIRenderer, OpenAIRendererModel } from "./view/openai"; +import { isBlank } from "./util"; +import { sprintf } from "sprintf-js"; -const ImagePlugin : RendererPluginType = { - name: "image", - rendererType: "simple", - heightType: "pixels", - dataType: "blob", - collapseType: "hide", - globalCss: null, - mimeTypes: ["image/*"], - simpleComponent: SimpleImageRenderer, +const ImagePlugin: RendererPluginType = { + name: "image", + rendererType: "simple", + heightType: "pixels", + dataType: "blob", + collapseType: "hide", + globalCss: null, + mimeTypes: ["image/*"], + simpleComponent: SimpleImageRenderer, }; -const MarkdownPlugin : RendererPluginType = { - name: "markdown", - rendererType: "simple", - heightType: "pixels", - dataType: "blob", - collapseType: "hide", - globalCss: null, - mimeTypes: ["text/markdown"], - simpleComponent: SimpleMarkdownRenderer, +const MarkdownPlugin: RendererPluginType = { + name: "markdown", + rendererType: "simple", + heightType: "pixels", + dataType: "blob", + collapseType: "hide", + globalCss: null, + mimeTypes: ["text/markdown"], + simpleComponent: SimpleMarkdownRenderer, }; -const JsonPlugin : RendererPluginType = { - name: "json", - rendererType: "simple", - heightType: "pixels", - dataType: "blob", - collapseType: "hide", - globalCss: null, - mimeTypes: ["application/json"], - simpleComponent: SimpleJsonRenderer, +const JsonPlugin: RendererPluginType = { + name: "json", + rendererType: "simple", + heightType: "pixels", + dataType: "blob", + collapseType: "hide", + globalCss: null, + mimeTypes: ["application/json"], + simpleComponent: SimpleJsonRenderer, }; -const OpenAIPlugin : RendererPluginType = { - name: "openai", - rendererType: "full", - heightType: "pixels", - dataType: "model", - collapseType: "remove", - hidePrompt: true, - globalCss: null, - mimeTypes: ["application/json"], - fullComponent: OpenAIRenderer, - modelCtor: () => new OpenAIRendererModel(), +const CodePlugin: RendererPluginType = { + name: "code", + rendererType: "simple", + heightType: "pixels", + dataType: "blob", + collapseType: "hide", + globalCss: null, + mimeTypes: ["text/plain"], + simpleComponent: CodeRenderer, +}; + +const OpenAIPlugin: RendererPluginType = { + name: "openai", + rendererType: "full", + heightType: "pixels", + dataType: "model", + collapseType: "remove", + hidePrompt: true, + globalCss: null, + mimeTypes: ["application/json"], + fullComponent: OpenAIRenderer, + modelCtor: () => new OpenAIRendererModel(), }; class PluginModelClass { - rendererPlugins : RendererPluginType[] = []; - - registerRendererPlugin(plugin : RendererPluginType) { - if (isBlank(plugin.name)) { - throw new Error("invalid plugin, no name"); - } - if (plugin.name == "terminal" || plugin.name == "none") { - throw new Error(sprintf("invalid plugin, name '%s' is reserved", plugin.name)); - } - let existingPlugin = this.getRendererPluginByName(plugin.name); - if (existingPlugin != null) { - throw new Error(sprintf("plugin with name %s already registered", plugin.name)); - } - this.rendererPlugins.push(plugin); - } + rendererPlugins: RendererPluginType[] = []; - getRendererPluginByName(name : string) : RendererPluginType { - for (let i=0; i = mobx.IObservableValue; type SessionDataType = { - sessionid : string, - name : string, - notifynum : number, - activescreenid : string, - sessionidx : number, - sharemode : ShareModeType, - archived? : boolean, - remotes : RemoteInstanceType[], + sessionid: string; + name: string; + notifynum: number; + activescreenid: string; + sessionidx: number; + sharemode: ShareModeType; + archived?: boolean; + remotes: RemoteInstanceType[]; - // for updates - remove? : boolean, - full? : boolean, + // for updates + remove?: boolean; + full?: boolean; }; type LineType = { - screenid : string, - userid : string, - lineid : string, - ts : number, - linenum : number, - linenumtemp : boolean, - linelocal : boolean, - linetype : string, - text : string, - renderer : string, - contentheight? : number, - star? : number, - archived? : boolean, - pinned? : boolean, - ephemeral? : boolean, - remove? : boolean, + screenid: string; + userid: string; + lineid: string; + ts: number; + linenum: number; + linenumtemp: boolean; + linelocal: boolean; + linetype: string; + text: string; + renderer: string; + contentheight?: number; + star?: number; + archived?: boolean; + pinned?: boolean; + ephemeral?: boolean; + remove?: boolean; }; type ScreenOptsType = { - tabcolor? : string, - pterm? : string, -} + tabcolor?: string; + pterm?: string; +}; type WebShareOpts = { - sharename : string, - viewkey : string, + sharename: string; + viewkey: string; }; type ScreenDataType = { - sessionid : string, - screenid : string, - screenidx : number, - name : string, - sharemode : ShareModeType, - webshareopts? : WebShareOpts, - archived? : boolean, - screenopts : ScreenOptsType, - curremote : RemotePtrType, - nextlinenum : number, - selectedline : number, - focustype : FocusTypeStrs, - anchor : {anchorline : number, anchoroffset : number}, + sessionid: string; + screenid: string; + screenidx: number; + name: string; + sharemode: ShareModeType; + webshareopts?: WebShareOpts; + archived?: boolean; + screenopts: ScreenOptsType; + curremote: RemotePtrType; + nextlinenum: number; + selectedline: number; + focustype: FocusTypeStrs; + anchor: { anchorline: number; anchoroffset: number }; - // for updates - full? : boolean, - remove? : boolean, + // for updates + full?: boolean; + remove?: boolean; }; type RemoteOptsType = { - color : string, + color: string; }; type RemoteType = { - remotetype : string, - remoteid : string, - remotealias : string, - remotecanonicalname : string, - remotevars : Record, - status : RemoteStatusTypeStrs, - connecttimeout : number, - errorstr : string, - installstatus : string, - installerrorstr : string, - defaultfestate : Record, - connectmode : string, - autoinstall : boolean, - remoteidx : number, - archived : boolean, - uname : string, - mshellversion : string, - needsmshellupgrade : boolean, - noinitpk : boolean, - authtype : string, - waitingforpassword : boolean, - remoteopts? : RemoteOptsType, - local : boolean, - remove? : boolean, + remotetype: string; + remoteid: string; + remotealias: string; + remotecanonicalname: string; + remotevars: Record; + status: RemoteStatusTypeStrs; + connecttimeout: number; + errorstr: string; + installstatus: string; + installerrorstr: string; + defaultfestate: Record; + connectmode: string; + autoinstall: boolean; + remoteidx: number; + archived: boolean; + uname: string; + mshellversion: string; + needsmshellupgrade: boolean; + noinitpk: boolean; + authtype: string; + waitingforpassword: boolean; + remoteopts?: RemoteOptsType; + local: boolean; + remove?: boolean; }; type RemoteStateType = { - cwd : string, - env0 : string, // in base64 "env -0" form + cwd: string; + env0: string; // in base64 "env -0" form }; type RemoteInstanceType = { - riid : string, - name : string, - sessionid : string, - screenid : string, - remoteownerid : string, - remoteid : string, - festate : Record, + riid: string; + name: string; + sessionid: string; + screenid: string; + remoteownerid: string; + remoteid: string; + festate: Record; - remove? : boolean, -} + remove?: boolean; +}; type RemotePtrType = { - remoteid : string, - ownerid? : string, - name? : string, + remoteid: string; + ownerid?: string; + name?: string; }; type HistoryItem = { - historyid : string, - ts : number, - userid : string, - sessionid : string, - screenid : string, - lineid : string, - haderror : boolean, - cmdstr : string, - remove : boolean, - remote : RemotePtrType, - ismetacmd : boolean, - historynum : string, - linenum : number, + historyid: string; + ts: number; + userid: string; + sessionid: string; + screenid: string; + lineid: string; + haderror: boolean; + cmdstr: string; + remove: boolean; + remote: RemotePtrType; + ismetacmd: boolean; + historynum: string; + linenum: number; }; type CmdRemoteStateType = { - remoteid : string - remotename : string, - cwd : string, + remoteid: string; + remotename: string; + cwd: string; }; type UIContextType = { - sessionid : string, - screenid : string, - remote : RemotePtrType, - winsize : TermWinSize, - linenum : number, - build : string, + sessionid: string; + screenid: string; + remote: RemotePtrType; + winsize: TermWinSize; + linenum: number; + build: string; }; type FeCmdPacketType = { - type : string, - metacmd : string, - metasubcmd? : string, - args : string[], - kwargs : Record; - rawstr? : string, - uicontext : UIContextType, - interactive : boolean, + type: string; + metacmd: string; + metasubcmd?: string; + args: string[]; + kwargs: Record; + rawstr?: string; + uicontext: UIContextType; + interactive: boolean; }; type FeInputPacketType = { - type : string, - ck : string, - remote : RemotePtrType, - inputdata64? : string, - signame? : string, - winsize? : TermWinSize, + type: string; + ck: string; + remote: RemotePtrType; + inputdata64?: string; + signame?: string; + winsize?: TermWinSize; }; type RemoteInputPacketType = { - type : string, - remoteid : string, - inputdata64 : string, + type: string; + remoteid: string; + inputdata64: string; }; type WatchScreenPacketType = { - type : string, - sessionid : string, - screenid : string, - connect : boolean, - authkey : string, + type: string; + sessionid: string; + screenid: string; + connect: boolean; + authkey: string; }; type TermWinSize = { - rows : number, - cols : number, -} + rows: number; + cols: number; +}; type TermOptsType = { - rows : number, - cols : number, - flexrows? : boolean, - maxptysize? : number, + rows: number; + cols: number; + flexrows?: boolean; + maxptysize?: number; }; type CmdDataType = { - screenid : string, - lineid : string, - remote : RemotePtrType, - cmdstr : string, - rawcmdstr : string, - festate : Record, - termopts : TermOptsType, - origtermopts : TermOptsType, - status : string, - cmdpid : number, - remotepid : number, - donets : number, - exitcode : number, - durationms : number, - runout : any[], - rtnstate : boolean, - remove? : boolean, + screenid: string; + lineid: string; + remote: RemotePtrType; + cmdstr: string; + rawcmdstr: string; + festate: Record; + termopts: TermOptsType; + origtermopts: TermOptsType; + status: string; + cmdpid: number; + remotepid: number; + donets: number; + exitcode: number; + durationms: number; + runout: any[]; + rtnstate: boolean; + remove?: boolean; }; type PtyDataUpdateType = { - screenid : string, - lineid : string, - remoteid : string, - ptypos : number, - ptydata64 : string, - ptydatalen : number, + screenid: string; + lineid: string; + remoteid: string; + ptypos: number; + ptydata64: string; + ptydatalen: number; }; type ScreenLinesType = { - screenid : string, - lines : LineType[], - cmds : CmdDataType[], + screenid: string; + lines: LineType[]; + cmds: CmdDataType[]; }; type ModelUpdateType = { - interactive : boolean, - sessions? : SessionDataType[], - activesessionid? : string, - screens? : ScreenDataType[], - screenlines? : ScreenLinesType, - line? : LineType, - lines? : LineType[], - cmd? : CmdDataType, - info? : InfoType, - cmdline? : CmdLineUpdateType, - remotes? : RemoteType[], - history? : HistoryInfoType, - connect? : boolean, - mainview? : string, - bookmarks? : BookmarkType[], - selectedbookmark? : string, - clientdata? : ClientDataType, - historyviewdata? : HistoryViewDataType, - remoteview? : RemoteViewType, + interactive: boolean; + sessions?: SessionDataType[]; + activesessionid?: string; + screens?: ScreenDataType[]; + screenlines?: ScreenLinesType; + line?: LineType; + lines?: LineType[]; + cmd?: CmdDataType; + info?: InfoType; + cmdline?: CmdLineUpdateType; + remotes?: RemoteType[]; + history?: HistoryInfoType; + connect?: boolean; + mainview?: string; + bookmarks?: BookmarkType[]; + selectedbookmark?: string; + clientdata?: ClientDataType; + historyviewdata?: HistoryViewDataType; + remoteview?: RemoteViewType; }; type HistoryViewDataType = { - items : HistoryItem[], - offset : number, - rawoffset : number, - nextrawoffset : number, - hasmore : boolean, - lines : LineType[], - cmds : CmdDataType[], + items: HistoryItem[]; + offset: number; + rawoffset: number; + nextrawoffset: number; + hasmore: boolean; + lines: LineType[]; + cmds: CmdDataType[]; }; type BookmarkType = { - bookmarkid : string, - createdts : number, - cmdstr : string, - alias : string, - tags : string[], - description : string, - cmds : string[], - orderidx : number, - remove? : boolean, + bookmarkid: string; + createdts: number; + cmdstr: string; + alias: string; + tags: string[]; + description: string; + cmds: string[]; + orderidx: number; + remove?: boolean; }; type HistoryInfoType = { - historytype : HistoryTypeStrs, - sessionid : string, - screenid : string, - items : HistoryItem[], - show : boolean, + historytype: HistoryTypeStrs; + sessionid: string; + screenid: string; + items: HistoryItem[]; + show: boolean; }; type CmdLineUpdateType = { - cmdline : string, - cursorpos : number, + cmdline: string; + cursorpos: number; }; type RemoteEditType = { - remoteedit : boolean, - remoteid? : string, - errorstr? : string, - infostr? : string, - keystr? : string, - haspassword? : boolean, + remoteedit: boolean; + remoteid?: string; + errorstr?: string; + infostr?: string; + keystr?: string; + haspassword?: boolean; }; type InfoType = { - infotitle? : string, - infomsg? : string, - infomsghtml? : boolean, - websharelink? : boolean, - infoerror? : string, - infolines? : string[], - infocomps? : string[], - infocompsmore? : boolean, - timeoutms? : number, + infotitle?: string; + infomsg?: string; + infomsghtml?: boolean; + websharelink?: boolean; + infoerror?: string; + infolines?: string[]; + infocomps?: string[]; + infocompsmore?: boolean; + timeoutms?: number; }; type RemoteViewType = { - ptyremoteid? : string, - remoteedit? : RemoteEditType, - remoteshowall? : boolean, + ptyremoteid?: string; + remoteedit?: RemoteEditType; + remoteshowall?: boolean; }; type HistoryQueryOpts = { - queryType : "global" | "session" | "screen"; - limitRemote : boolean, - limitRemoteInstance : boolean, - limitUser : boolean, - queryStr : string, - maxItems : number, - includeMeta : boolean, - fromTs : number, + queryType: "global" | "session" | "screen"; + limitRemote: boolean; + limitRemoteInstance: boolean; + limitUser: boolean; + queryStr: string; + maxItems: number; + includeMeta: boolean; + fromTs: number; }; type ContextMenuOpts = { - showCut? : boolean, + showCut?: boolean; }; type UpdateMessage = PtyDataUpdateType | ModelUpdateType; type RendererContext = { - screenId : string, - lineId : string, - lineNum : number, + screenId: string; + lineId: string; + lineNum: number; }; -type RemoteTermContext = {remoteId : string}; +type RemoteTermContext = { remoteId: string }; type TermContextUnion = RendererContext | RemoteTermContext; type RendererOpts = { - maxSize : WindowSize, - idealSize : WindowSize, - termOpts : TermOptsType, - termFontSize : number, + maxSize: WindowSize; + idealSize: WindowSize; + termOpts: TermOptsType; + termFontSize: number; }; type RendererOptsUpdate = { - maxSize? : WindowSize, - idealSize? : WindowSize, - termOpts? : TermOptsType, - termFontSize? : number, + maxSize?: WindowSize; + idealSize?: WindowSize; + termOpts?: TermOptsType; + termFontSize?: number; }; type RendererPluginType = { - name : string, - rendererType : "simple" | "full", - heightType : "rows" | "pixels", - dataType : "json" | "blob" | "model", - collapseType : "hide" | "remove", - hidePrompt? : boolean, - globalCss? : string, - mimeTypes? : string[], - modelCtor? : () => RendererModel, - simpleComponent? : SimpleBlobRendererComponent, - fullComponent? : FullRendererComponent, -} + name: string; + rendererType: "simple" | "full"; + heightType: "rows" | "pixels"; + dataType: "json" | "blob" | "model"; + collapseType: "hide" | "remove"; + hidePrompt?: boolean; + globalCss?: string; + mimeTypes?: string[]; + modelCtor?: () => RendererModel; + simpleComponent?: SimpleBlobRendererComponent; + fullComponent?: FullRendererComponent; +}; type RendererModelContainerApi = { - onFocusChanged : (focus : boolean) => void, - saveHeight : (height : number) => void, - dataHandler : (data : string, model : RendererModel) => void, + onFocusChanged: (focus: boolean) => void; + saveHeight: (height: number) => void; + dataHandler: (data: string, model: RendererModel) => void; }; type RendererModelInitializeParams = { - context : RendererContext, - isDone : boolean, - rawCmd : WebCmd, - savedHeight : number, - opts : RendererOpts, - api : RendererModelContainerApi, - ptyDataSource: (termContext : TermContextUnion) => Promise, + context: RendererContext; + isDone: boolean; + rawCmd: WebCmd; + savedHeight: number; + opts: RendererOpts; + api: RendererModelContainerApi; + ptyDataSource: (termContext: TermContextUnion) => Promise; }; type RendererModel = { - initialize : (params : RendererModelInitializeParams) => void, - dispose : () => void, - reload : (delayMs : number) => void, - giveFocus : () => void, - updateOpts : (opts : RendererOptsUpdate) => void, - setIsDone : () => void, - receiveData : (pos : number, data : Uint8Array, reason? : string) => void, - updateHeight : (newHeight : number) => void, - }; + initialize: (params: RendererModelInitializeParams) => void; + dispose: () => void; + reload: (delayMs: number) => void; + giveFocus: () => void; + updateOpts: (opts: RendererOptsUpdate) => void; + setIsDone: () => void; + receiveData: (pos: number, data: Uint8Array, reason?: string) => void; + updateHeight: (newHeight: number) => void; +}; -type SimpleBlobRendererComponent = React.ComponentType<{data : Blob, context : RendererContext, opts : RendererOpts, savedHeight : number}>; -type SimpleJsonRendererComponent = React.ComponentType<{data : any, context : RendererContext, opts : RendererOpts, savedHeight : number}>; -type FullRendererComponent = React.ComponentType<{model : any}>; +type SimpleBlobRendererComponent = React.ComponentType<{ + data: Blob; + context: RendererContext; + opts: RendererOpts; + savedHeight: number; +}>; +type SimpleJsonRendererComponent = React.ComponentType<{ + data: any; + context: RendererContext; + opts: RendererOpts; + savedHeight: number; +}>; +type SimpleCodeRendererComponent = React.ComponentType<{ + data: any; + context: RendererContext; + opts: RendererOpts; + savedHeight: number; +}>; +type FullRendererComponent = React.ComponentType<{ model: any }>; type WindowSize = { - height : number, - width: number, + height: number; + width: number; }; type PtyDataType = { - pos : number, - data : Uint8Array, + pos: number; + data: Uint8Array; }; type FeOptsType = { - termfontsize : number, + termfontsize: number; }; type ClientOptsType = { - notelemetry : boolean, - acceptedtos : number, + notelemetry: boolean; + acceptedtos: number; }; type ClientDataType = { - clientid : string, - userid : string, - feopts : FeOptsType; - clientopts : ClientOptsType, - cmdstoretype : "session" | "screen"; - dbversion : number, - openaiopts? : OpenAIOptsType, + clientid: string; + userid: string; + feopts: FeOptsType; + clientopts: ClientOptsType; + cmdstoretype: "session" | "screen"; + dbversion: number; + openaiopts?: OpenAIOptsType; }; type OpenAIOptsType = { - model? : string, - apitoken? : string, - maxtokens? : number, - maxchoices? : number, + model?: string; + apitoken?: string; + maxtokens?: number; + maxchoices?: number; }; type PlaybookType = { - playbookid : string, - playbookname : string, - description : string, - entryids : string[], - entries : PlaybookEntryType[], + playbookid: string; + playbookname: string; + description: string; + entryids: string[]; + entries: PlaybookEntryType[]; }; type PlaybookEntryType = { - entryid : string, - playbookid : string, - alias : string, - cmdstr : string, - description : string, - createdts : number, - updatedts : number, - remove : boolean, + entryid: string; + playbookid: string; + alias: string; + cmdstr: string; + description: string; + createdts: number; + updatedts: number; + remove: boolean; }; type AlertMessageType = { - title? : string, - message : string, - confirm? : boolean, - markdown? : boolean, + title?: string; + message: string; + confirm?: boolean; + markdown?: boolean; }; type HistorySearchParams = { - offset : number, - rawOffset : number, - searchText? : string, - searchSessionId? : string, - searchRemoteId? : string, - fromTs? : number, - noMeta? : boolean, - filterCmds? : boolean, + offset: number; + rawOffset: number; + searchText?: string; + searchSessionId?: string; + searchRemoteId?: string; + fromTs?: number; + noMeta?: boolean; + filterCmds?: boolean; }; type RenderModeType = "normal" | "collapsed" | "expanded"; type WebScreen = { - screenid : string, - sharename : string, - vts : number, - selectedline : number, + screenid: string; + sharename: string; + vts: number; + selectedline: number; }; type WebLine = { - screenid : string, - lineid : string, - ts : number, - linenum : number, - linetype : string, - text : string, - contentheight : number, - renderer : string, - archived : boolean, - vts : number, + screenid: string; + lineid: string; + ts: number; + linenum: number; + linetype: string; + text: string; + contentheight: number; + renderer: string; + archived: boolean; + vts: number; }; type WebRemote = { - remoteid : string, - alias : string, - canonicalname : string, - name : string, - homedir : string, - isroot : boolean, + remoteid: string; + alias: string; + canonicalname: string; + name: string; + homedir: string; + isroot: boolean; }; type WebCmd = { - screenid : string, - lineid : string, - remote : WebRemote, - cmdstr : string, - rawcmdstr : string, - festate : Record, - termopts : TermOptsType, - status : string, - cmdpid : number, - remotepid : number, - donets : number, - exitcode : number, - durationms : number, - rtnstate : boolean, - rtnstatestr : string, - vts : number, + screenid: string; + lineid: string; + remote: WebRemote; + cmdstr: string; + rawcmdstr: string; + festate: Record; + termopts: TermOptsType; + status: string; + cmdpid: number; + remotepid: number; + donets: number; + exitcode: number; + durationms: number; + rtnstate: boolean; + rtnstatestr: string; + vts: number; }; type WebFullScreen = { - screenid : string, - screen : WebScreen, - lines : WebLine[], - cmds : WebCmd[], - cmdptymap : Record, - vts : number, -} + screenid: string; + screen: WebScreen; + lines: WebLine[]; + cmds: WebCmd[]; + cmdptymap: Record; + vts: number; +}; type PtyDataUpdate = { - screenid : string, - lineid : string, - ptypos : number, - data : string, + screenid: string; + lineid: string; + ptypos: number; + data: string; }; type WebShareWSMessage = { - type : string, - screenid : string, - viewkey : string, -} + type: string; + screenid: string; + viewkey: string; +}; type LineInterface = { - lineid : string, - linenum : number, - ts : number, -} + lineid: string; + linenum: number; + ts: number; +}; type LineFactoryProps = { - line : LineInterface, - width : number, - visible : OV, - staticRender : boolean, - onHeightChange : LineHeightChangeCallbackType, - overrideCollapsed : OV, - topBorder : boolean, - renderMode : RenderModeType, - noSelect? : boolean, -} + line: LineInterface; + width: number; + visible: OV; + staticRender: boolean; + onHeightChange: LineHeightChangeCallbackType; + overrideCollapsed: OV; + topBorder: boolean; + renderMode: RenderModeType; + noSelect?: boolean; +}; type RendererContainerType = { - registerRenderer : (lineId : string, model : RendererModel) => void, - unloadRenderer : (lineId : string) => void, + registerRenderer: (lineId: string, model: RendererModel) => void; + unloadRenderer: (lineId: string) => void; }; type CommandRtnType = { - success : boolean, - error? : string, + success: boolean; + error?: string; }; -type LineHeightChangeCallbackType = (lineNum : number, newHeight : number, oldHeight : number) => void; +type LineHeightChangeCallbackType = ( + lineNum: number, + newHeight: number, + oldHeight: number +) => void; type OpenAIPacketType = { - type : string, - model : string, - created : number, - finish_reason : string, - usage : Record, - index : number, - text : string, - error : string, + type: string; + model: string; + created: number; + finish_reason: string; + usage: Record; + index: number; + text: string; + error: string; }; -export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdDataType, ScreenDataType, ScreenOptsType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType, HistorySearchParams, ScreenLinesType, FocusTypeStrs, HistoryTypeStrs, RendererOpts, RendererPluginType, SimpleBlobRendererComponent, RendererModelContainerApi, RendererModelInitializeParams, RendererOptsUpdate, WebShareOpts, RemoteStatusTypeStrs, WebFullScreen, WebScreen, WebLine, WebCmd, RemoteTermContext, TermContextUnion, WebRemote, PtyDataUpdate, WebShareWSMessage, LineHeightChangeCallbackType, LineFactoryProps, LineInterface, RendererContainerType, RemoteViewType, CommandRtnType, OpenAIPacketType}; +export type { + SessionDataType, + LineType, + RemoteType, + RemoteStateType, + RemoteInstanceType, + HistoryItem, + CmdRemoteStateType, + FeCmdPacketType, + TermOptsType, + CmdDataType, + ScreenDataType, + ScreenOptsType, + PtyDataUpdateType, + ModelUpdateType, + UpdateMessage, + InfoType, + CmdLineUpdateType, + RemotePtrType, + UIContextType, + HistoryInfoType, + HistoryQueryOpts, + WatchScreenPacketType, + TermWinSize, + FeInputPacketType, + RemoteInputPacketType, + RemoteEditType, + ContextMenuOpts, + RendererContext, + WindowSize, + RendererModel, + PtyDataType, + BookmarkType, + ClientDataType, + PlaybookType, + PlaybookEntryType, + HistoryViewDataType, + RenderModeType, + AlertMessageType, + HistorySearchParams, + ScreenLinesType, + FocusTypeStrs, + HistoryTypeStrs, + RendererOpts, + RendererPluginType, + SimpleBlobRendererComponent, + RendererModelContainerApi, + RendererModelInitializeParams, + RendererOptsUpdate, + WebShareOpts, + RemoteStatusTypeStrs, + WebFullScreen, + WebScreen, + WebLine, + WebCmd, + RemoteTermContext, + TermContextUnion, + WebRemote, + PtyDataUpdate, + WebShareWSMessage, + LineHeightChangeCallbackType, + LineFactoryProps, + LineInterface, + RendererContainerType, + RemoteViewType, + CommandRtnType, + OpenAIPacketType, +}; diff --git a/src/view/code.tsx b/src/view/code.tsx new file mode 100644 index 00000000..838300f6 --- /dev/null +++ b/src/view/code.tsx @@ -0,0 +1,73 @@ +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"; + +/** + * Note: As mentioned in https://www.npmjs.com/package/@monaco-editor/react#for-electron-users, + * Monaco gets loaded from CDN. This may be problematic if we are behind a firewall etc. If this happens, + * We need to serve Monaco from node_modules instead + */ + +type OV = mobx.IObservableValue; + +const MaxJsonSize = 50000; + +@mobxReact.observer +class CodeRenderer extends React.Component< + { + data: Blob; + context: RendererContext; + opts: RendererOpts; + savedHeight: number; + }, + {} +> { + code: OV = mobx.observable.box(null, { + name: "code", + deep: false, + }); + language: OV = mobx.observable.box(null, { + name: "language", + deep: false, + }); + + componentDidMount() { + let dataBlob = this.props.data; + let prtn = dataBlob.text(); + prtn.then((text) => { + this.code.set(text); + const detectedLanguage = `javascript`; + this.language.set(detectedLanguage); + console.log(`1. ${detectedLanguage}\n\n${text}\n\n`); + }); + } + + 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(); + console.log(`2. ${lang}\n\n${code}\n\n`); + if (!lang) return <>; + return ( +
+
+ +
+
+ ); + } +} + +export { CodeRenderer };