diff --git a/playground/package.json b/playground/package.json index e830703..ba1ea59 100644 --- a/playground/package.json +++ b/playground/package.json @@ -17,13 +17,13 @@ "classnames": "^2.2.6", "mobx": "^5.15.4", "mobx-react": "^6.1.8", - "monaco-editor": "^0.20.0", + "monaco-editor": "^0.25.2", "react": "^16.12.0", "react-dom": "^16.12.0", "messagepack": "^1.1.10", "base64-js": "^1.3.1", "lzma": "^2.3.2", - "@hediet/monaco-editor-react": "^0.1.1" + "@hediet/monaco-editor-react": "^0.2.0" }, "devDependencies": { "gh-pages": "^2.2.0", diff --git a/playground/src/visualizations.ts b/playground/src/visualizations.ts index 7e1c6fd..b29fae8 100644 --- a/playground/src/visualizations.ts +++ b/playground/src/visualizations.ts @@ -12,7 +12,7 @@ // import "@hediet/visualization-bundle/dist/visualizers/perspective-table-visualizer" /* // import "@hediet/visualization-bundle/dist/visualizers/plotly-visualizer" /* // import "@hediet/visualization-bundle/dist/visualizers/simple-text-visualizer"; /* -// import "@hediet/visualization-bundle/dist/visualizers/source-visualizer" /* +import "@hediet/visualization-bundle/dist/visualizers/source-visualizer"; /* // import "@hediet/visualization-bundle/dist/visualizers/svg-visualizer" /* // import "@hediet/visualization-bundle/dist/visualizers/tree-visualizer"; /* diff --git a/visualization-bundle/package.json b/visualization-bundle/package.json index 4397bb8..79330bf 100644 --- a/visualization-bundle/package.json +++ b/visualization-bundle/package.json @@ -1,7 +1,7 @@ { "name": "@hediet/visualization-bundle", "description": "Bundles several visualizers", - "version": "0.2.1", + "version": "0.2.3", "license": "MIT", "scripts": { "dev": "tsc --watch", @@ -23,14 +23,14 @@ "@finos/perspective-viewer": "^0.5.2", "@finos/perspective-viewer-d3fc": "^0.5.2", "@finos/perspective-viewer-datagrid": "^0.5.2", - "@hediet/monaco-editor-react": "^0.1.1", + "@hediet/monaco-editor-react": "^0.2.0", "@hediet/semantic-json": "^0.3.15", "@hediet/std": "^0.6.0", "classnames": "^2.2.6", "line-column": "^1.0.2", "mobx": "^5.15.4", "mobx-react": "^6.1.8", - "monaco-editor": "^0.20.0", + "monaco-editor": "^0.25.2", "plotly.js": "^1.54.7", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx b/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx index 1862eaf..242dd85 100644 --- a/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx +++ b/visualization-bundle/src/visualizers/monaco-text-visualizer/MonacoEditor.tsx @@ -17,7 +17,10 @@ export class MonacoEditor extends React.Component<{ theme: Theme; fileName?: string; decorations?: Decoration[]; + jsonSchemas?: { schema: unknown }[]; }> { + public static nextId = 0; + @observable private editor: | monacoTypes.editor.IStandaloneCodeEditor | undefined; @@ -42,9 +45,8 @@ export class MonacoEditor extends React.Component<{ @disposeOnUnmount private _updateText = autorun(() => { if (this.editor) { - const decorations = new Array< - monacoTypes.editor.IModelDeltaDecoration - >(); + const decorations = + new Array(); const propDecorations = this.props.decorations || []; const lines = this.props.text.split("\n"); const mappedLines = lines.map((l, idx) => { @@ -54,7 +56,7 @@ export class MonacoEditor extends React.Component<{ if ( !propDecorations.some( - d => + (d) => ((d.range.endLineNumber === idx + 2 && d.range.endColumn === 1) || (d.range.startLineNumber === idx + 1 && @@ -82,19 +84,48 @@ export class MonacoEditor extends React.Component<{ }); const text = mappedLines.join("\n"); + const modelId = MonacoEditor.nextId++; + const model = getLoadedMonaco().editor.createModel( text, this.languageId, - undefined + getLoadedMonaco().Uri.parse( + `inmemory://inmemory/model${modelId}` + ) ); this.editor.setModel(model); + if (this.props.jsonSchemas) { + const existingSchemas = + getLoadedMonaco().languages.json.jsonDefaults + .diagnosticsOptions.schemas || []; + + getLoadedMonaco().languages.json.jsonDefaults.setDiagnosticsOptions( + { + validate: true, + schemas: [ + ...existingSchemas.filter( + (s) => + !s.uri.startsWith( + "https://example.org/schemas/temp/" + ) + ), + ...this.props.jsonSchemas.map((s, idx) => ({ + uri: "https://example.org/schemas/temp/" + idx, + fileMatch: [`model${modelId}`], + schema: s.schema, + })), + ], + } + ); + } + this.prevDecorations = this.editor.deltaDecorations( [], [ ...decorations, - ...propDecorations.map(d => { + ...propDecorations.map((d) => { const r = getLoadedMonaco().Range.lift(d.range); return { range: r, @@ -143,6 +174,7 @@ export class MonacoEditor extends React.Component<{ readOnly: true, theme: this.props.theme.kind === "dark" ? "vs-dark" : "vs", renderWhitespace: "all", + renderValidationDecorations: "on", }); }; diff --git a/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx b/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx index 5bdb0f2..4e41651 100644 --- a/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx +++ b/visualization-bundle/src/visualizers/monaco-text-visualizer/index.tsx @@ -7,6 +7,7 @@ import { sArrayOf, sNumber, sUnion, + sAny, } from "@hediet/semantic-json"; import * as React from "react"; import { @@ -57,6 +58,20 @@ export const monacoTextVisualizer = createVisualizer({ }) ) ), + jsonSchemas: sOptionalProp( + sArrayOf( + sOpenObject({ + schema: sProp(sAny(), { + description: + "A json schema object that is applied when the fileName indicates a JSON document.", + }), + }) + ), + { + description: + "An array of schemas used to validate JSON documents.", + } + ), fileName: sOptionalProp(sString(), { description: "An optional filename that might be used for chosing a syntax highlighter", @@ -66,9 +81,9 @@ export const monacoTextVisualizer = createVisualizer({ createReactVisualization( self, { priority: 500, preload: MonacoEditorLazyLoadable.preload }, - function({ theme }) { + function ({ theme }) { const decorations = data.decorations - ? data.decorations.map(d => ({ + ? data.decorations.map((d) => ({ label: d.label, range: { startLineNumber: d.range.start.line + 1, @@ -85,6 +100,7 @@ export const monacoTextVisualizer = createVisualizer({ fileName={data.fileName} theme={theme} decorations={decorations} + jsonSchemas={data.jsonSchemas} /> ); } diff --git a/visualization-bundle/src/visualizers/source-visualizer/index.tsx b/visualization-bundle/src/visualizers/source-visualizer/index.tsx index 2ad3aff..b91f21d 100644 --- a/visualization-bundle/src/visualizers/source-visualizer/index.tsx +++ b/visualization-bundle/src/visualizers/source-visualizer/index.tsx @@ -1,4 +1,4 @@ -import { sOpenObject } from "@hediet/semantic-json"; +import { JsonSchemaGenerator, sOpenObject } from "@hediet/semantic-json"; import * as React from "react"; import { createReactVisualization, @@ -15,13 +15,24 @@ export const sourceVisualizer = createVisualizer({ kind: sOpenObject({}), }).defineAs(visualizationNs("SourceVisualizationData")), getVisualization: (data, self) => - createReactVisualization(self, { priority: -100 }, ({ theme }) => ( - - )), + createReactVisualization(self, { priority: -100 }, ({ theme }) => { + const s = new JsonSchemaGenerator(); + + return ( + + ); + }), }); globalVisualizationFactory.addHiddenVisualizer(sourceVisualizer); diff --git a/yarn.lock b/yarn.lock index 7a0d5fd..01c01f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -302,6 +302,11 @@ resolved "https://registry.yarnpkg.com/@hediet/monaco-editor-react/-/monaco-editor-react-0.1.1.tgz#041f805aeb188403c7876f0f364d2a429e706031" integrity sha512-0DZZfLcFNuc3Wrn+2eztnRloCBe6GV8zIrGT3LPdZlWYEigJT+Qh7ANvRHF0tCS5YPAFGQNZJcfzKbBfqRGo4w== +"@hediet/monaco-editor-react@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@hediet/monaco-editor-react/-/monaco-editor-react-0.2.0.tgz#4a98102baf1942f210fc19fd406b6c82da3bf583" + integrity sha512-EA71+iv9sV25+YgBQDJ4Ou17sOJCXQat7r5AOD5STZHcUQdSuQufI2t9ue+wJIm4048P9sQ/ruW3pYmwxF9Amw== + "@hediet/semantic-json@^0.3.14", "@hediet/semantic-json@^0.3.15": version "0.3.15" resolved "https://registry.yarnpkg.com/@hediet/semantic-json/-/semantic-json-0.3.15.tgz#e38f799b1a7dd2624a3ee2e05bca58cfe76cb58d" @@ -5488,6 +5493,11 @@ monaco-editor@^0.20.0: resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.20.0.tgz#5d5009343a550124426cb4d965a4d27a348b4dea" integrity sha512-hkvf4EtPJRMQlPC3UbMoRs0vTAFAYdzFQ+gpMb8A+9znae1c43q8Mab9iVsgTcg/4PNiLGGn3SlDIa8uvK1FIQ== +monaco-editor@^0.25.2: + version "0.25.2" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.25.2.tgz#119e2b15bbd968a1a99c03cac9c329316d7c37e9" + integrity sha512-5iylzSJevCnzJn9UVsW8yOZ3yHjmAs4TfvH3zsbftKiFKmHG0xirGN6DK9Kk04VSWxYCZZAIafYJoNJJMAU1KA== + monotone-convex-hull-2d@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz#47f5daeadf3c4afd37764baa1aa8787a40eee08c"