Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

update monaco editor to 4.1.0

Browse Source
This commit is contained in:
Bobby
2021-03-18 21:17:44 +11:00
parent 0fae1eb6fe
commit 17f242bfa9
4 changed files with 161 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
www/package.json
View File

@@ -16,7 +16,7 @@
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",
"@mdi/js": "^5.8.55",
"@monaco-editor/react": "^3.5.5",
"@monaco-editor/react": "^4.1.0",
"@tinymce/tinymce-react": "^3.4.0",
"algoliasearch": "^4.8.6",
"chroma-js": "^2.1.0",

71
www/src/components/CodeEditor.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef, useMemo, useState } from "react";
import clsx from "clsx";
import Editor, { monaco } from "@monaco-editor/react";
import Editor, { useMonaco } from "@monaco-editor/react";
import { useTheme, createStyles, makeStyles } from "@material-ui/core/styles";
@@ -42,6 +42,7 @@ export default function CodeEditor({
const [initialEditorValue] = useState(value ?? "");
const { tableState } = useFiretableContext();
const classes = useStyles();
const monacoInstance = useMonaco();
const editorRef = useRef<any>();
@@ -49,39 +50,42 @@ export default function CodeEditor({
editorRef.current = editor;
}
function listenEditorChanges() {
setTimeout(() => {
editorRef.current?.onDidChangeModelContent((ev) => {
onChange(editorRef.current.getValue());
});
}, 2000);
}
const themeTransformer = (theme: string) => {
switch (theme) {
case "dark":
return "vs-dark";
default:
return theme;
}
};
useMemo(async () => {
monaco
.init()
.then((monacoInstance) => {
monacoInstance.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
{
noSemanticValidation: true,
noSyntaxValidation: false,
}
);
// compiler options
monacoInstance.languages.typescript.javascriptDefaults.setCompilerOptions(
{
target: monacoInstance.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
}
);
})
.catch((error) =>
console.error(
"An error occurred during initialization of Monaco: ",
error
)
if (!monacoInstance) {
// useMonaco returns a monaco instance but initialisation is done asynchronously
// dont execute the logic until the instance is initialised
return;
}
try {
monacoInstance.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
{
noSemanticValidation: true,
noSyntaxValidation: false,
}
);
listenEditorChanges();
// compiler options
monacoInstance.languages.typescript.javascriptDefaults.setCompilerOptions(
{
target: monacoInstance.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
}
);
} catch (error) {
console.error(
"An error occurred during initialization of Monaco: ",
error
);
}
}, [tableState?.columns]);
return (
@@ -90,9 +94,9 @@ export default function CodeEditor({
className={clsx(classes.editorWrapper, wrapperProps?.className)}
>
<Editor
theme={theme.palette.type}
theme={themeTransformer(theme.palette.type)}
height={height}
editorDidMount={handleEditorDidMount}
onMount={handleEditorDidMount}
language="javascript"
value={initialEditorValue}
options={{
@@ -100,6 +104,7 @@ export default function CodeEditor({
fontFamily: theme.typography.fontFamilyMono,
...editorOptions,
}}
onChange={onChange as any}
/>
</div>
);

198
www/src/components/Table/editors/CodeEditor.tsx
View File

@@ -1,6 +1,6 @@
import React, { useRef, useMemo, useState } from "react";
import { useTheme, createStyles, makeStyles } from "@material-ui/core/styles";
import Editor, { monaco } from "@monaco-editor/react";
import Editor, { useMonaco } from "@monaco-editor/react";
import { useFiretableContext } from "contexts/FiretableContext";
import { FieldType } from "constants/fields";
import { setTimeout } from "timers";
@@ -24,6 +24,7 @@ const useStyles = makeStyles((theme) =>
export default function CodeEditor(props: any) {
const { handleChange, extraLibs, script, height = 400 } = props;
const theme = useTheme();
const monacoInstance = useMonaco();
const [initialEditorValue] = useState(script ?? "");
const { tableState } = useFiretableContext();
@@ -35,15 +36,22 @@ export default function CodeEditor(props: any) {
editorRef.current = editor;
}
function listenEditorChanges() {
setTimeout(() => {
editorRef.current?.onDidChangeModelContent((ev) => {
handleChange(editorRef.current.getValue());
});
}, 2000);
}
const themeTransformer = (theme: string) => {
switch (theme) {
case "dark":
return "vs-dark";
default:
return theme;
}
};
useMemo(async () => {
if (!monacoInstance) {
// useMonaco returns a monaco instance but initialisation is done asynchronously
// dont execute the logic until the instance is initialised
return;
}
const firestoreDefsFile = await fetch(
`${process.env.PUBLIC_URL}/firestore.d.ts`
);
@@ -53,107 +61,107 @@ export default function CodeEditor(props: any) {
const firestoreDefs = await firestoreDefsFile.text();
// const firebaseAuthDefs = await firebaseAuthDefsFile.text();
// console.timeLog(firebaseAuthDefs);
monaco
.init()
.then((monacoInstance) => {
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
firestoreDefs
);
// monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
// firebaseAuthDefs
// );
monacoInstance.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
{
noSemanticValidation: true,
noSyntaxValidation: false,
}
);
// compiler options
monacoInstance.languages.typescript.javascriptDefaults.setCompilerOptions(
{
target: monacoInstance.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
}
);
if (extraLibs) {
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
extraLibs.join("\n"),
"ts:filename/extraLibs.d.ts"
);
// monaco
// .init()
// .then((monacoInstance) => {
try {
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
firestoreDefs
);
// monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
// firebaseAuthDefs
// );
monacoInstance.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
{
noSemanticValidation: true,
noSyntaxValidation: false,
}
);
// compiler options
monacoInstance.languages.typescript.javascriptDefaults.setCompilerOptions(
{
target: monacoInstance.languages.typescript.ScriptTarget.ES5,
allowNonTsExtensions: true,
}
);
if (extraLibs) {
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
[
" /**",
" * utility functions",
" */",
"declare namespace utilFns {",
" /**",
" * Sends out an email through sendGrid",
" */",
`function sendEmail(msg:{from: string,
extraLibs.join("\n"),
"ts:filename/extraLibs.d.ts"
);
}
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
[
" /**",
" * utility functions",
" */",
"declare namespace utilFns {",
" /**",
" * Sends out an email through sendGrid",
" */",
`function sendEmail(msg:{from: string,
templateId:string,
personalizations:{to:string,dynamic_template_data:any}[]}):void {
}`,
"}",
].join("\n"),
"ts:filename/utils.d.ts"
);
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
[
" const db:FirebaseFirestore.Firestore;",
// " const auth:admin.auth;",
"declare class row {",
" /**",
" * Returns the row fields",
" */",
...Object.keys(tableState?.columns!).map((columnKey: string) => {
const column = tableState?.columns[columnKey];
switch (column.type) {
case FieldType.shortText:
case FieldType.longText:
case FieldType.email:
case FieldType.phone:
case FieldType.code:
return `static ${columnKey}:string`;
case FieldType.singleSelect:
const typeString = [
...column.config.options.map((opt) => `"${opt}"`),
// "string",
].join(" | ");
return `static ${columnKey}:${typeString}`;
case FieldType.multiSelect:
return `static ${columnKey}:string[]`;
case FieldType.checkbox:
return `static ${columnKey}:boolean`;
default:
return `static ${columnKey}:any`;
}
}),
"}",
].join("\n"),
"ts:filename/rowFields.d.ts"
);
// monacoInstance.editor.create(wrapper, properties);
})
.catch((error) =>
console.error(
"An error occurred during initialization of Monaco: ",
error
)
"}",
].join("\n"),
"ts:filename/utils.d.ts"
);
listenEditorChanges();
}, [tableState?.columns]);
monacoInstance.languages.typescript.javascriptDefaults.addExtraLib(
[
" const db:FirebaseFirestore.Firestore;",
// " const auth:admin.auth;",
"declare class row {",
" /**",
" * Returns the row fields",
" */",
...Object.keys(tableState?.columns!).map((columnKey: string) => {
const column = tableState?.columns[columnKey];
switch (column.type) {
case FieldType.shortText:
case FieldType.longText:
case FieldType.email:
case FieldType.phone:
case FieldType.code:
return `static ${columnKey}:string`;
case FieldType.singleSelect:
const typeString = [
...column.config.options.map((opt) => `"${opt}"`),
// "string",
].join(" | ");
return `static ${columnKey}:${typeString}`;
case FieldType.multiSelect:
return `static ${columnKey}:string[]`;
case FieldType.checkbox:
return `static ${columnKey}:boolean`;
default:
return `static ${columnKey}:any`;
}
}),
"}",
].join("\n"),
"ts:filename/rowFields.d.ts"
);
} catch (error) {
console.error(
"An error occurred during initialization of Monaco: ",
error
);
}
}, [tableState?.columns, monacoInstance]);
return (
<>
<div className={classes.editorWrapper}>
<Editor
theme={theme.palette.type}
theme={themeTransformer(theme.palette.type)}
height={height}
editorDidMount={handleEditorDidMount}
onMount={handleEditorDidMount}
language="javascript"
value={initialEditorValue}
onChange={handleChange}
/>
</div>
</>

31
www/yarn.lock
View File

@@ -1493,13 +1493,6 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.11.0":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.8.3":
version "7.10.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.5.tgz#303d8bd440ecd5a491eae6117fd3367698674c5c"
@@ -2224,12 +2217,21 @@
resolved "https://registry.yarnpkg.com/@mdi/js/-/js-5.8.55.tgz#630bc5fafd8b1d2f6e63489a9ab170177559e41b"
integrity sha512-2bvln56SW6V/nSDC/0/NTu1bMF/CgSyZox8mcWbAPWElBN3UYIrukKDUckEER8ifr8X2YJl1RLKQqi7T7qLzmg==
"@monaco-editor/react@^3.5.5":
version "3.5.5"
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-3.5.5.tgz#7ebef1903bf7e7925084f16efb6550a83a7efed6"
integrity sha512-2/j9KFMu0Lr1DKX6ZqPwiCbhfv47yD8849Cyi8BTlGGRIzCcrF2pIQPbsZrsO+A+uG/352BfOsSF3zKQT84NQQ==
"@monaco-editor/loader@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.0.1.tgz#7068c9b07bbc65387c0e7a4df6dac0a326155905"
integrity sha512-hycGOhLqLYjnD0A/FHs56covEQWnDFrSnm/qLKkB/yoeayQ7ju+Vaj4SdTojGrXeY6jhMDx59map0+Jqwquh1Q==
dependencies:
"@babel/runtime" "^7.11.0"
state-local "^1.0.6"
"@monaco-editor/react@^4.1.0":
version "4.1.0"
resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.1.0.tgz#9a362a4e0973c9958574551984a3c3eeeff06e5f"
integrity sha512-Hh895v/KfGgckDLXq8sdDGT4xS89+2hbQOP1l57sLd2XlJycChdzPiCj02nQDIduLmUIVHittjaj1/xmy94C3A==
dependencies:
"@monaco-editor/loader" "^1.0.1"
prop-types "^15.7.2"
state-local "^1.0.7"
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
@@ -13814,6 +13816,11 @@ stack-utils@^1.0.1:
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
state-local@^1.0.6, state-local@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
static-extend@^0.1.1:
version "0.1.2"
resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"