@smartmind-team/thanosql-editor v1.1.4
thanosql-editor
A react library for monaco-editor supporting ThanoSQL.
Introduction
ThanoSQL Editor is a powerful and versatile code editor designed specifically for working with ThanoSQL. Built using the monaco-editor framework, ThanoSQL Editor provides a seamless and intuitive user experience for writing, editing, and executing ThanoSQL queries.
ThanoSQL Editor provides advanced code editing capabilities, including syntax highlighting, autocompletion, and error checking, to ensure clean and efficient query writing.
What is monaco-editor ?
The monaco-editor is the fully featured code editor from VS Code. Check out the VS Code docs to see some of the supported features.
Installation
System Requirement
- node.js >= v16.17.0
- npm >= v8
thanosql-editor
has dependencies on monaco-editor-core package.
| package | version |
| -- | -- |
| monaco-editor-core | ^0.38.0 |
npm install @smartmind-team/thanosql-editor@latest
Usage
It serves esm as well as cjs, and this component is available in both module environments.
!WARNING
thanos.worker.js is not working yet, so you can see the error about workerPath.
- At first, you must set EditorProvider as parent component about Editor Component.
// main.tsx
import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { EditorProvider, EditorStore } from "@smartmind-team/thanosql-editor";
const EditorStoreClient = new EditorStore();
// To set defaultTab on EditorProvider initialization:
import { defaultTab } from "./assets/config.js";
const editorSessionStore = new EditorSessionStore();
editorSessionStore.setTabSession(defaultTab.id, { model: createModel({ value: "-- default session!", language: "thanosql" }), state: null });
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<StrictMode>
// The store will be automatically setted. Use store property only when you want to specify more than one session setting on EditorProvider initialization."
<EditorProvider store={editorSessionStore}>
<App />
</EditorProvider>
</StrictMode>,
);
- Then, you can use Editor Component under Provider.
// App.tsx
import Editor from "@smartmind-team/thanosql-editor";
import { useEditorContext } from "@smartmind-team/thanosql-editor";
function App() {
const { getEditorModule } = useEditorContext();
const { changeTabSession, setIsQueryStarting, isEditorLoading, getEditor, getValue } = getEditorModule("example")! ?? {};
// or
// const modules = getEditorModule("example");
return (
<div
className="App"
style={{
width: "100vw",
height: "100vh",
display: "flex",
flexFlow: "column nowrap",
}}>
<div style={{ fontSize: "1rem", fontWeight: 900 }}>Editor Example</div>
<div style={{ flex: 2 }}>
<Editor
editorId="example"
language="thanosql"
launcherProps={{
onStartQuery: handleStart,
onStopQuery: () => console.log("stop"),
/** You can customize the launcher components for the remaining space in the launcher. **/
children: (
<div style={{ display: "flex", justifyContent: "flex-start", alignItems: "center", height: "100%" }}>
<>test action</>
</div>
),
}}
/**
If you set defaultSessionId, then editor creates and stores editor session(model, state) in EditorStore so that you can access the session with this sessionId.
defaultSession is used when the Editor component has mounted. so if you changes some value in this session and then remount the Editor component (without reloading the window), Editor will not override defaultValue but restore session value.
**/
defaultSessionId="example"
defaultValue={"-- default value"}
/>
</div>
</div>
);
}
export default App;
π΄Editor Props
The Editor component also has HTMLAttributes that are applied to the Editor container div element.
name | type | default | description |
---|---|---|---|
editorId | string | editorId for discriminating editor component | |
language | string | "thanosql" | language Id |
defaultSessionId | string | undefined | editor default session Id |
width | string or number | undefined | editor width |
height | string or number | undefined | editor height |
options | monaco.editor.IStandaloneEditorConstructionOptions | undefined | https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html |
launcherProps | {onStartQuery?: EditorLauncherEventHandler; onStopQuery?: EditorLauncherEventHandler; editor?: monaco.editor.IStandaloneCodeEditor;} | undefined | launcher component props |
launcherDisabled | boolean | false | when you set true, launcher is deactivated |
Development Setting
git clone https://github.com/smartmind-team/thanosql-editor.git
cd thanosql-editor
npm ci
npm run prepare # husky install
# dev build
npm run dev
# build
npm run build
Test for Library (Playground)
Warning
- Before running the code below, you must run the
development setting
part first.- When you change lib code(and run
npm run build
in the root directory), then you must restart(npm run dev) playground for the library change to take effect.
cd playground
npm i
npm run dev # vite server will be run.
Contribution Guide
part 1 Antlr setting
- Update .antlr/*.g4 files.
- Convert .g4 file to JavaScirpt and put in
src/ANTLR/
. Please look up antlr4 javascript guideThese Antlr files, created with TypeScript, are used in files inside 'src/thanosql-service'.
part 2 Monaco setting for ThanoSQL
edit the files in the following directory.
src/thanosql
βββ DiagnosticsAdapter.ts # for operating Monaco Diagnostic
βββ ThanosWorker.ts # ThanoSQL worker
βββ WorkerManager.ts # ThanoSQL worker manager (make proxy for connecting web worker)
βββ config.ts # Monarch config, language config
βββ setup.ts # add or edit monaco setting in function named setupLanguage
βββ thanos.worker.ts # web worker script
10 months ago
6 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
10 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago