mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-04-02 18:08:19 +02:00
created CodeRenderer with hardcoded js as lang
This commit is contained in:
Amarsh Anand
parent
758671adee
commit
2ab0f4af4c
169
src/plugins.ts
169
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<this.rendererPlugins.length; i++) {
|
||||
let plugin = this.rendererPlugins[i];
|
||||
if (plugin.name == name) {
|
||||
return plugin;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
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);
|
||||
}
|
||||
|
||||
getRendererPluginByName(name: string): RendererPluginType {
|
||||
for (let i = 0; i < this.rendererPlugins.length; i++) {
|
||||
let plugin = this.rendererPlugins[i];
|
||||
if (plugin.name == name) {
|
||||
return plugin;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
let PluginModel : PluginModelClass = null;
|
||||
let PluginModel: PluginModelClass = null;
|
||||
if ((window as any).PluginModel == null) {
|
||||
PluginModel = new PluginModelClass();
|
||||
PluginModel.registerRendererPlugin(ImagePlugin);
|
||||
PluginModel.registerRendererPlugin(MarkdownPlugin);
|
||||
PluginModel.registerRendererPlugin(JsonPlugin);
|
||||
PluginModel.registerRendererPlugin(OpenAIPlugin);
|
||||
(window as any).PluginModel = PluginModel;
|
||||
PluginModel = new PluginModelClass();
|
||||
PluginModel.registerRendererPlugin(ImagePlugin);
|
||||
PluginModel.registerRendererPlugin(MarkdownPlugin);
|
||||
PluginModel.registerRendererPlugin(JsonPlugin);
|
||||
PluginModel.registerRendererPlugin(CodePlugin);
|
||||
PluginModel.registerRendererPlugin(OpenAIPlugin);
|
||||
(window as any).PluginModel = PluginModel;
|
||||
}
|
||||
|
||||
export {PluginModel};
|
||||
export { PluginModel };
|
||||
|
||||
897
src/types.ts
897
src/types.ts
File diff suppressed because it is too large
Load Diff
73
src/view/code.tsx
Normal file
73
src/view/code.tsx
Normal file
@ -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<V> = mobx.IObservableValue<V>;
|
||||
|
||||
const MaxJsonSize = 50000;
|
||||
|
||||
@mobxReact.observer
|
||||
class CodeRenderer extends React.Component<
|
||||
{
|
||||
data: Blob;
|
||||
context: RendererContext;
|
||||
opts: RendererOpts;
|
||||
savedHeight: number;
|
||||
},
|
||||
{}
|
||||
> {
|
||||
code: OV<any> = mobx.observable.box(null, {
|
||||
name: "code",
|
||||
deep: false,
|
||||
});
|
||||
language: OV<any> = 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 (
|
||||
<div className="renderer-container json-renderer">
|
||||
<div className="scroller" style={{ maxHeight: opts.maxSize.height }}>
|
||||
<Editor
|
||||
height="30vh"
|
||||
theme="vs-dark"
|
||||
defaultLanguage={lang}
|
||||
defaultValue={code}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { CodeRenderer };
|
||||
Loading…
Reference in New Issue
Block a user