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, and this component is available in both module environments.

1. 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>,
);

2. Then, you can use Editor Component under Provider.

// App.tsx
import Editor from "@smartmind-team/thanosql-editor";
import { useEditorContext, setWorkers } from "@smartmind-team/thanosql-editor";

// on vite
import path from "@smartmind-team/thanosql-editor/thanosql-worker?worker&url";

// other platforms
const path = await import.meta.resolve("../node_modules/@smartmind-team/thanosql-editor/thanosql/thanos.worker.js");

// worker setting
setWorkers({
  default: {
    url: path,
    base: import.meta.url,
  },
});

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

1. Before running the code below, you must run the development setting part first.
2. 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

Current ThanoSQL is based on antlr4 PostgreSQL grammer. Please check this page. https://github.com/antlr/grammars-v4/tree/master/sql/postgresql

1. Update .antlr/*.g4 files.
2. Convert .g4 file to JavaScirpt and put in src/ANTLR/:

npm run antlr4

[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