@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/components/code-editor/index.js

@@ -2,13 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { SQLDialect, sql } from "@codemirror/lang-sql";
+import { yaml } from "@codemirror/lang-yaml";
 import { bracketMatching, foldGutter, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
 import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-import { EditorState } from "@codemirror/state";
+import { Compartment, EditorState } from "@codemirror/state";
 import { crosshairCursor, drawSelection, dropCursor, EditorView, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import * as React from "react";
+import { http } from "./http/index.js";
 const baseTheme = EditorView.baseTheme({
     "&": {
         backgroundColor: "var(--color-bg-primary)",
@@ -46,6 +49,43 @@ const baseTheme = EditorView.baseTheme({
         backgroundColor: "rgba(255, 255, 255, 0)"
     }
 });
+const readOnlyTheme = EditorView.theme({
+    "&": {
+        backgroundColor: "var(--color-bg-secondary)",
+        height: "100%",
+        width: "100%",
+        fontSize: "14px",
+        paddingTop: "8px",
+        paddingBottom: "8px"
+    },
+    ".cm-scroller": {
+        overflow: "auto"
+    },
+    ".cm-content": {
+        fontFamily: "var(--font-family-mono)",
+        padding: "0"
+    },
+    "&.cm-focused": {
+        outline: "none"
+    },
+    ".cm-gutter": {
+        fontFamily: "var(--font-family-mono)"
+    },
+    ".cm-gutters": {
+        backgroundColor: "var(--color-bg-secondary)",
+        border: "none"
+    },
+    ".cm-lineNumbers": {
+        paddingLeft: "16px"
+    },
+    ".cm-activeLineGutter": {
+        backgroundColor: "var(--color-bg-secondary)",
+        color: "var(--color-text-primary)"
+    },
+    ".cm-activeLine": {
+        backgroundColor: "rgba(255, 255, 255, 0)"
+    }
+});
 const customHighlightStyle = HighlightStyle.define([
     {
         tag: tags.propertyName,
@@ -66,19 +106,181 @@ const customHighlightStyle = HighlightStyle.define([
     {
         tag: tags.null,
         color: "#569cd6"
+    },
+    {
+        tag: tags.keyword,
+        color: "#569cd6"
+    },
+    {
+        tag: tags.operatorKeyword,
+        color: "#405CBF"
+    },
+    {
+        tag: tags.controlKeyword,
+        color: "#EA4A35"
+    },
+    {
+        tag: tags.typeName,
+        color: "#00A984"
+    },
+    {
+        tag: tags.variableName,
+        color: "#EA4A35"
+    },
+    {
+        tag: tags.operator,
+        color: "#405CBF"
+    },
+    {
+        tag: tags.comment,
+        color: "#00A984"
+    },
+    {
+        tag: tags.lineComment,
+        color: "#00A984"
+    },
+    {
+        tag: tags.blockComment,
+        color: "#00A984"
     }
 ]);
-export function CodeEditor({ defaultValue, onChange }) {
-    const editorRef = React.useRef(null);
+const SQL_KEYWORDS = [
+    "select",
+    "from",
+    "where",
+    "and",
+    "or",
+    "not",
+    "in",
+    "between",
+    "like",
+    "insert",
+    "update",
+    "delete",
+    "create",
+    "drop",
+    "alter",
+    "table",
+    "index",
+    "join",
+    "inner",
+    "left",
+    "right",
+    "outer",
+    "on",
+    "as",
+    "order",
+    "by",
+    "group",
+    "having",
+    "limit",
+    "offset",
+    "union",
+    "intersect",
+    "except",
+    "distinct",
+    "all",
+    "exists",
+    "case",
+    "when",
+    "then",
+    "else",
+    "end",
+    "null",
+    "true",
+    "false",
+    "is",
+    "asc",
+    "desc"
+];
+const SQL_BUILTIN = [
+    "varchar",
+    "char",
+    "text",
+    "integer",
+    "int",
+    "bigint",
+    "decimal",
+    "numeric",
+    "float",
+    "real",
+    "boolean",
+    "date",
+    "time",
+    "timestamp",
+    "uuid",
+    "count",
+    "sum",
+    "avg",
+    "min",
+    "max",
+    "coalesce",
+    "concat",
+    "substring",
+    "upper",
+    "lower",
+    "trim",
+    "length",
+    "now",
+    "current_date",
+    "current_time"
+];
+const customSQLDialect = SQLDialect.define({
+    keywords: SQL_KEYWORDS.join(" "),
+    builtin: SQL_BUILTIN.join(" ")
+});
+function languageExtensions(mode) {
+    if (mode === "http") {
+        const jsonLang = json();
+        const yamlLang = yaml();
+        return [
+            http((ct)=>ct === "application/json" ? jsonLang.language : ct === "text/yaml" ? yamlLang.language : null),
+            syntaxHighlighting(customHighlightStyle)
+        ];
+    } else if (mode === "sql") {
+        return [
+            sql({
+                dialect: customSQLDialect
+            }),
+            syntaxHighlighting(customHighlightStyle)
+        ];
+    } else if (mode === "yaml") {
+        return [
+            yaml(),
+            syntaxHighlighting(customHighlightStyle)
+        ];
+    } else {
+        return [
+            json(),
+            linter(jsonParseLinter(), {
+                delay: 300
+            }),
+            syntaxHighlighting(customHighlightStyle)
+        ];
+    }
+}
+export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, viewCallback, readOnly = false, id, mode = "json", isReadOnlyTheme = false }) {
+    const domRef = React.useRef(null);
+    const [view, setView] = React.useState(null);
+    const initialValue = React.useRef(defaultValue ?? "");
+    const onChangeComparment = React.useRef(new Compartment());
+    const onUpdateComparment = React.useRef(new Compartment());
+    const languageCompartment = React.useRef(new Compartment());
+    const readOnlyCompartment = React.useRef(new Compartment());
+    const themeCompartment = React.useRef(new Compartment());
     React.useEffect(()=>{
-        if (!editorRef.current) {
+        if (!domRef.current) {
             return;
         }
         const view = new EditorView({
-            parent: editorRef.current,
+            parent: domRef.current,
             state: EditorState.create({
-                doc: defaultValue ?? "",
+                doc: initialValue.current,
                 extensions: [
+                    EditorView.contentAttributes.of({
+                        "data-gramm": "false"
+                    }),
+                    readOnlyCompartment.current.of(EditorState.readOnly.of(false)),
                     lineNumbers(),
                     foldGutter(),
                     highlightSpecialChars(),
@@ -87,8 +289,7 @@ export function CodeEditor({ defaultValue, onChange }) {
                     dropCursor(),
                     EditorState.allowMultipleSelections.of(true),
                     indentOnInput(),
-                    json(),
-                    syntaxHighlighting(customHighlightStyle),
+                    languageCompartment.current.of([]),
                     bracketMatching(),
                     closeBrackets(),
                     autocompletion(),
@@ -97,7 +298,7 @@ export function CodeEditor({ defaultValue, onChange }) {
                     highlightActiveLine(),
                     highlightActiveLineGutter(),
                     highlightSelectionMatches(),
-                    baseTheme,
+                    themeCompartment.current.of(baseTheme),
                     keymap.of([
                         ...closeBracketsKeymap,
                         ...defaultKeymap,
@@ -107,26 +308,114 @@ export function CodeEditor({ defaultValue, onChange }) {
                         ...completionKeymap,
                         ...lintKeymap
                     ]),
-                    linter(jsonParseLinter(), {
-                        delay: 300
-                    }),
                     lintGutter(),
-                    EditorView.updateListener.of((update)=>{
-                        if (update.docChanged && onChange) {
-                            onChange(update.view.state.doc.toString());
-                        }
-                    })
+                    onChangeComparment.current.of([]),
+                    onUpdateComparment.current.of([])
                 ]
             })
         });
-        return ()=>view.destroy();
+        setView(()=>view);
+        return ()=>{
+            view.destroy();
+            setView(()=>null);
+        };
+    }, []);
+    React.useEffect(()=>{
+        if (viewCallback && view) {
+            viewCallback(view);
+        }
+    }, [
+        view,
+        viewCallback
+    ]);
+    React.useEffect(()=>{
+        view?.dispatch({
+            effects: onChangeComparment.current.reconfigure([
+                EditorView.updateListener.of((update)=>{
+                    if (update.docChanged && onChange) {
+                        onChange(update.view.state.doc.toString());
+                    }
+                })
+            ])
+        });
     }, [
-        defaultValue,
+        view,
         onChange
     ]);
+    React.useEffect(()=>{
+        view?.dispatch({
+            effects: onUpdateComparment.current.reconfigure([
+                EditorView.updateListener.of((update)=>{
+                    if (onUpdate) {
+                        onUpdate(update);
+                    }
+                })
+            ])
+        });
+    }, [
+        view,
+        onUpdate
+    ]);
+    // FIXME: it is probably better to have CM manage its state.
+    React.useEffect(()=>{
+        if (!view || currentValue === undefined) {
+            return;
+        }
+        const currentDoc = view.state.doc.toString();
+        if (currentDoc !== currentValue) {
+            view.dispatch({
+                changes: {
+                    from: 0,
+                    to: currentDoc.length,
+                    insert: currentValue
+                }
+            });
+        }
+    }, [
+        currentValue,
+        view
+    ]);
+    React.useEffect(()=>{
+        if (view === null) {
+            return;
+        }
+        view.dispatch({
+            effects: languageCompartment.current.reconfigure(languageExtensions(mode))
+        });
+    }, [
+        mode,
+        view
+    ]);
+    React.useEffect(()=>{
+        if (view === null) {
+            return;
+        }
+        view.dispatch({
+            effects: [
+                readOnlyCompartment.current.reconfigure(EditorState.readOnly.of(readOnly))
+            ]
+        });
+    }, [
+        readOnly,
+        view
+    ]);
+    React.useEffect(()=>{
+        if (view === null) {
+            return;
+        }
+        view.dispatch({
+            effects: [
+                themeCompartment.current.reconfigure(isReadOnlyTheme ? readOnlyTheme : baseTheme)
+            ]
+        });
+    }, [
+        isReadOnlyTheme,
+        view
+    ]);
     return /*#__PURE__*/ _jsx("div", {
         className: "h-full w-full",
-        ref: editorRef
+        ref: domRef,
+        id: id
     });
 }
 

package/dist/src/components/code-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/index.tsx"],"sourcesContent":["import {\n\tautocompletion,\n\tcloseBrackets,\n\tcloseBracketsKeymap,\n\tcompletionKeymap,\n} from \"@codemirror/autocomplete\";\nimport { defaultKeymap, history, historyKeymap } from \"@codemirror/commands\";\nimport { json, jsonParseLinter } from \"@codemirror/lang-json\";\nimport {\n\tbracketMatching,\n\tfoldGutter,\n\tfoldKeymap,\n\tHighlightStyle,\n\tindentOnInput,\n\tsyntaxHighlighting,\n} from \"@codemirror/language\";\nimport { linter, lintGutter, lintKeymap } from \"@codemirror/lint\";\nimport { highlightSelectionMatches, searchKeymap } from \"@codemirror/search\";\nimport { EditorState } from \"@codemirror/state\";\nimport {\n\tcrosshairCursor,\n\tdrawSelection,\n\tdropCursor,\n\tEditorView,\n\thighlightActiveLine,\n\thighlightActiveLineGutter,\n\thighlightSpecialChars,\n\tkeymap,\n\tlineNumbers,\n\trectangularSelection,\n} from \"@codemirror/view\";\nimport { tags } from \"@lezer/highlight\";\nimport * as React from \"react\";\n\nconst baseTheme = EditorView.baseTheme({\n\t\"&\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\theight: \"100%\",\n\t\twidth: \"100%\",\n\t\tfontSize: \"14px\",\n\t\tpaddingTop: \"8px\",\n\t\tpaddingBottom: \"8px\",\n\t},\n\t\".cm-scroller\": {\n\t\toverflow: \"auto\",\n\t},\n\t\".cm-content\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t\tpadding: \"0\",\n\t},\n\t\"&.cm-focused\": {\n\t\toutline: \"none\",\n\t},\n\t\".cm-gutter\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t},\n\t\".cm-gutters\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\tborder: \"none\",\n\t},\n\t\".cm-lineNumbers\": {\n\t\tpaddingLeft: \"16px\",\n\t},\n\t\".cm-activeLineGutter\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\tcolor: \"var(--color-text-primary)\",\n\t},\n\t\".cm-activeLine\": {\n\t\tbackgroundColor: \"rgba(255, 255, 255, 0)\",\n\t},\n});\n\nconst customHighlightStyle = HighlightStyle.define([\n\t{ tag: tags.propertyName, color: \"#EA4A35\" },\n\t{ tag: tags.string, color: \"#405CBF\" },\n\t{ tag: tags.number, color: \"#00A984\" },\n\t{ tag: tags.bool, color: \"#569cd6\" },\n\t{ tag: tags.null, color: \"#569cd6\" },\n]);\n\nexport function CodeEditor({\n\tdefaultValue,\n\tonChange,\n}: {\n\tdefaultValue?: string;\n\tonChange?: (value: string) => void;\n}) {\n\tconst editorRef = React.useRef(null);\n\n\tReact.useEffect(() => {\n\t\tif (!editorRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst view = new EditorView({\n\t\t\tparent: editorRef.current,\n\t\t\tstate: EditorState.create({\n\t\t\t\tdoc: defaultValue ?? \"\",\n\t\t\t\textensions: [\n\t\t\t\t\tlineNumbers(),\n\t\t\t\t\tfoldGutter(),\n\t\t\t\t\thighlightSpecialChars(),\n\t\t\t\t\thistory(),\n\t\t\t\t\tdrawSelection(),\n\t\t\t\t\tdropCursor(),\n\t\t\t\t\tEditorState.allowMultipleSelections.of(true),\n\t\t\t\t\tindentOnInput(),\n\t\t\t\t\tjson(),\n\t\t\t\t\tsyntaxHighlighting(customHighlightStyle),\n\t\t\t\t\tbracketMatching(),\n\t\t\t\t\tcloseBrackets(),\n\t\t\t\t\tautocompletion(),\n\t\t\t\t\trectangularSelection(),\n\t\t\t\t\tcrosshairCursor(),\n\t\t\t\t\thighlightActiveLine(),\n\t\t\t\t\thighlightActiveLineGutter(),\n\t\t\t\t\thighlightSelectionMatches(),\n\t\t\t\t\tbaseTheme,\n\t\t\t\t\tkeymap.of([\n\t\t\t\t\t\t...closeBracketsKeymap,\n\t\t\t\t\t\t...defaultKeymap,\n\t\t\t\t\t\t...searchKeymap,\n\t\t\t\t\t\t...historyKeymap,\n\t\t\t\t\t\t...foldKeymap,\n\t\t\t\t\t\t...completionKeymap,\n\t\t\t\t\t\t...lintKeymap,\n\t\t\t\t\t]),\n\t\t\t\t\tlinter(jsonParseLinter(), { delay: 300 }),\n\t\t\t\t\tlintGutter(),\n\t\t\t\t\tEditorView.updateListener.of((update) => {\n\t\t\t\t\t\tif (update.docChanged && onChange) {\n\t\t\t\t\t\t\tonChange(update.view.state.doc.toString());\n\t\t\t\t\t\t}\n\t\t\t\t\t}),\n\t\t\t\t],\n\t\t\t}),\n\t\t});\n\n\t\treturn () => view.destroy();\n\t}, [defaultValue, onChange]);\n\n\treturn <div className=\"h-full w-full\" ref={editorRef} />;\n}\n"],"names":["autocompletion","closeBrackets","closeBracketsKeymap","completionKeymap","defaultKeymap","history","historyKeymap","json","jsonParseLinter","bracketMatching","foldGutter","foldKeymap","HighlightStyle","indentOnInput","syntaxHighlighting","linter","lintGutter","lintKeymap","highlightSelectionMatches","searchKeymap","EditorState","crosshairCursor","drawSelection","dropCursor","EditorView","highlightActiveLine","highlightActiveLineGutter","highlightSpecialChars","keymap","lineNumbers","rectangularSelection","tags","React","baseTheme","backgroundColor","height","width","fontSize","paddingTop","paddingBottom","overflow","fontFamily","padding","outline","border","paddingLeft","color","customHighlightStyle","define","tag","propertyName","string","number","bool","null","CodeEditor","defaultValue","onChange","editorRef","useRef","useEffect","current","view","parent","state","create","doc","extensions","allowMultipleSelections","of","delay","updateListener","update","docChanged","toString","destroy","div","className","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/index.tsx"],"sourcesContent":["import {\n\tautocompletion,\n\tcloseBrackets,\n\tcloseBracketsKeymap,\n\tcompletionKeymap,\n} from \"@codemirror/autocomplete\";\nimport { defaultKeymap, history, historyKeymap } from \"@codemirror/commands\";\nimport { json, jsonParseLinter } from \"@codemirror/lang-json\";\nimport { SQLDialect, sql } from \"@codemirror/lang-sql\";\nimport { yaml } from \"@codemirror/lang-yaml\";\nimport {\n\tbracketMatching,\n\tfoldGutter,\n\tfoldKeymap,\n\tHighlightStyle,\n\tindentOnInput,\n\tsyntaxHighlighting,\n} from \"@codemirror/language\";\nimport { linter, lintGutter, lintKeymap } from \"@codemirror/lint\";\nimport { highlightSelectionMatches, searchKeymap } from \"@codemirror/search\";\nimport { Compartment, EditorState } from \"@codemirror/state\";\nimport {\n\tcrosshairCursor,\n\tdrawSelection,\n\tdropCursor,\n\tEditorView,\n\thighlightActiveLine,\n\thighlightActiveLineGutter,\n\thighlightSpecialChars,\n\tkeymap,\n\tlineNumbers,\n\trectangularSelection,\n\ttype ViewUpdate,\n} from \"@codemirror/view\";\nimport { tags } from \"@lezer/highlight\";\nimport * as React from \"react\";\n\nimport { http } from \"./http\";\n\nconst baseTheme = EditorView.baseTheme({\n\t\"&\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\theight: \"100%\",\n\t\twidth: \"100%\",\n\t\tfontSize: \"14px\",\n\t\tpaddingTop: \"8px\",\n\t\tpaddingBottom: \"8px\",\n\t},\n\t\".cm-scroller\": {\n\t\toverflow: \"auto\",\n\t},\n\t\".cm-content\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t\tpadding: \"0\",\n\t},\n\t\"&.cm-focused\": {\n\t\toutline: \"none\",\n\t},\n\t\".cm-gutter\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t},\n\t\".cm-gutters\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\tborder: \"none\",\n\t},\n\t\".cm-lineNumbers\": {\n\t\tpaddingLeft: \"16px\",\n\t},\n\t\".cm-activeLineGutter\": {\n\t\tbackgroundColor: \"var(--color-bg-primary)\",\n\t\tcolor: \"var(--color-text-primary)\",\n\t},\n\t\".cm-activeLine\": {\n\t\tbackgroundColor: \"rgba(255, 255, 255, 0)\",\n\t},\n});\n\nconst readOnlyTheme = EditorView.theme({\n\t\"&\": {\n\t\tbackgroundColor: \"var(--color-bg-secondary)\",\n\t\theight: \"100%\",\n\t\twidth: \"100%\",\n\t\tfontSize: \"14px\",\n\t\tpaddingTop: \"8px\",\n\t\tpaddingBottom: \"8px\",\n\t},\n\t\".cm-scroller\": {\n\t\toverflow: \"auto\",\n\t},\n\t\".cm-content\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t\tpadding: \"0\",\n\t},\n\t\"&.cm-focused\": {\n\t\toutline: \"none\",\n\t},\n\t\".cm-gutter\": {\n\t\tfontFamily: \"var(--font-family-mono)\",\n\t},\n\t\".cm-gutters\": {\n\t\tbackgroundColor: \"var(--color-bg-secondary)\",\n\t\tborder: \"none\",\n\t},\n\t\".cm-lineNumbers\": {\n\t\tpaddingLeft: \"16px\",\n\t},\n\t\".cm-activeLineGutter\": {\n\t\tbackgroundColor: \"var(--color-bg-secondary)\",\n\t\tcolor: \"var(--color-text-primary)\",\n\t},\n\t\".cm-activeLine\": {\n\t\tbackgroundColor: \"rgba(255, 255, 255, 0)\",\n\t},\n});\n\nconst customHighlightStyle = HighlightStyle.define([\n\t{ tag: tags.propertyName, color: \"#EA4A35\" },\n\t{ tag: tags.string, color: \"#405CBF\" },\n\t{ tag: tags.number, color: \"#00A984\" },\n\t{ tag: tags.bool, color: \"#569cd6\" },\n\t{ tag: tags.null, color: \"#569cd6\" },\n\t{ tag: tags.keyword, color: \"#569cd6\" },\n\t{ tag: tags.operatorKeyword, color: \"#405CBF\" },\n\t{ tag: tags.controlKeyword, color: \"#EA4A35\" },\n\t{ tag: tags.typeName, color: \"#00A984\" },\n\t{ tag: tags.variableName, color: \"#EA4A35\" },\n\t{ tag: tags.operator, color: \"#405CBF\" },\n\t{ tag: tags.comment, color: \"#00A984\" },\n\t{ tag: tags.lineComment, color: \"#00A984\" },\n\t{ tag: tags.blockComment, color: \"#00A984\" },\n]);\n\nconst SQL_KEYWORDS = [\n\t\"select\",\n\t\"from\",\n\t\"where\",\n\t\"and\",\n\t\"or\",\n\t\"not\",\n\t\"in\",\n\t\"between\",\n\t\"like\",\n\t\"insert\",\n\t\"update\",\n\t\"delete\",\n\t\"create\",\n\t\"drop\",\n\t\"alter\",\n\t\"table\",\n\t\"index\",\n\t\"join\",\n\t\"inner\",\n\t\"left\",\n\t\"right\",\n\t\"outer\",\n\t\"on\",\n\t\"as\",\n\t\"order\",\n\t\"by\",\n\t\"group\",\n\t\"having\",\n\t\"limit\",\n\t\"offset\",\n\t\"union\",\n\t\"intersect\",\n\t\"except\",\n\t\"distinct\",\n\t\"all\",\n\t\"exists\",\n\t\"case\",\n\t\"when\",\n\t\"then\",\n\t\"else\",\n\t\"end\",\n\t\"null\",\n\t\"true\",\n\t\"false\",\n\t\"is\",\n\t\"asc\",\n\t\"desc\",\n];\n\nconst SQL_BUILTIN = [\n\t\"varchar\",\n\t\"char\",\n\t\"text\",\n\t\"integer\",\n\t\"int\",\n\t\"bigint\",\n\t\"decimal\",\n\t\"numeric\",\n\t\"float\",\n\t\"real\",\n\t\"boolean\",\n\t\"date\",\n\t\"time\",\n\t\"timestamp\",\n\t\"uuid\",\n\t\"count\",\n\t\"sum\",\n\t\"avg\",\n\t\"min\",\n\t\"max\",\n\t\"coalesce\",\n\t\"concat\",\n\t\"substring\",\n\t\"upper\",\n\t\"lower\",\n\t\"trim\",\n\t\"length\",\n\t\"now\",\n\t\"current_date\",\n\t\"current_time\",\n];\n\nconst customSQLDialect = SQLDialect.define({\n\tkeywords: SQL_KEYWORDS.join(\" \"),\n\tbuiltin: SQL_BUILTIN.join(\" \"),\n});\n\ntype LanguageMode = \"json\" | \"http\" | \"sql\" | \"yaml\";\n\nfunction languageExtensions(mode: LanguageMode) {\n\tif (mode === \"http\") {\n\t\tconst jsonLang = json();\n\t\tconst yamlLang = yaml();\n\t\treturn [\n\t\t\thttp((ct) =>\n\t\t\t\tct === \"application/json\"\n\t\t\t\t\t? jsonLang.language\n\t\t\t\t\t: ct === \"text/yaml\"\n\t\t\t\t\t\t? yamlLang.language\n\t\t\t\t\t\t: null,\n\t\t\t),\n\t\t\tsyntaxHighlighting(customHighlightStyle),\n\t\t];\n\t} else if (mode === \"sql\") {\n\t\treturn [\n\t\t\tsql({ dialect: customSQLDialect }),\n\t\t\tsyntaxHighlighting(customHighlightStyle),\n\t\t];\n\t} else if (mode === \"yaml\") {\n\t\treturn [yaml(), syntaxHighlighting(customHighlightStyle)];\n\t} else {\n\t\treturn [\n\t\t\tjson(),\n\t\t\tlinter(jsonParseLinter(), { delay: 300 }),\n\t\t\tsyntaxHighlighting(customHighlightStyle),\n\t\t];\n\t}\n}\n\ntype CodeEditorProps = {\n\treadOnly?: boolean;\n\tisReadOnlyTheme?: boolean;\n\tdefaultValue?: string;\n\tcurrentValue?: string;\n\tonChange?: (value: string) => void;\n\tonUpdate?: (update: ViewUpdate) => void;\n\tid?: string;\n\tmode?: LanguageMode;\n\tviewCallback?: (view: EditorView) => void;\n};\n\nexport type CodeEditorView = EditorView;\n\nexport function CodeEditor({\n\tdefaultValue,\n\tcurrentValue,\n\tonChange,\n\tonUpdate,\n\tviewCallback,\n\treadOnly = false,\n\tid,\n\tmode = \"json\",\n\tisReadOnlyTheme = false,\n}: CodeEditorProps) {\n\tconst domRef = React.useRef(null);\n\tconst [view, setView] = React.useState<EditorView | null>(null);\n\n\tconst initialValue = React.useRef(defaultValue ?? \"\");\n\n\tconst onChangeComparment = React.useRef(new Compartment());\n\tconst onUpdateComparment = React.useRef(new Compartment());\n\tconst languageCompartment = React.useRef(new Compartment());\n\tconst readOnlyCompartment = React.useRef(new Compartment());\n\tconst themeCompartment = React.useRef(new Compartment());\n\n\tReact.useEffect(() => {\n\t\tif (!domRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst view = new EditorView({\n\t\t\tparent: domRef.current,\n\t\t\tstate: EditorState.create({\n\t\t\t\tdoc: initialValue.current,\n\t\t\t\textensions: [\n\t\t\t\t\tEditorView.contentAttributes.of({ \"data-gramm\": \"false\" }),\n\t\t\t\t\treadOnlyCompartment.current.of(EditorState.readOnly.of(false)),\n\t\t\t\t\tlineNumbers(),\n\t\t\t\t\tfoldGutter(),\n\t\t\t\t\thighlightSpecialChars(),\n\t\t\t\t\thistory(),\n\t\t\t\t\tdrawSelection(),\n\t\t\t\t\tdropCursor(),\n\t\t\t\t\tEditorState.allowMultipleSelections.of(true),\n\t\t\t\t\tindentOnInput(),\n\t\t\t\t\tlanguageCompartment.current.of([]),\n\t\t\t\t\tbracketMatching(),\n\t\t\t\t\tcloseBrackets(),\n\t\t\t\t\tautocompletion(),\n\t\t\t\t\trectangularSelection(),\n\t\t\t\t\tcrosshairCursor(),\n\t\t\t\t\thighlightActiveLine(),\n\t\t\t\t\thighlightActiveLineGutter(),\n\t\t\t\t\thighlightSelectionMatches(),\n\t\t\t\t\tthemeCompartment.current.of(baseTheme),\n\t\t\t\t\tkeymap.of([\n\t\t\t\t\t\t...closeBracketsKeymap,\n\t\t\t\t\t\t...defaultKeymap,\n\t\t\t\t\t\t...searchKeymap,\n\t\t\t\t\t\t...historyKeymap,\n\t\t\t\t\t\t...foldKeymap,\n\t\t\t\t\t\t...completionKeymap,\n\t\t\t\t\t\t...lintKeymap,\n\t\t\t\t\t]),\n\t\t\t\t\tlintGutter(),\n\t\t\t\t\tonChangeComparment.current.of([]),\n\t\t\t\t\tonUpdateComparment.current.of([]),\n\t\t\t\t],\n\t\t\t}),\n\t\t});\n\n\t\tsetView(() => view);\n\n\t\treturn () => {\n\t\t\tview.destroy();\n\t\t\tsetView(() => null);\n\t\t};\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\tif (viewCallback && view) {\n\t\t\tviewCallback(view);\n\t\t}\n\t}, [view, viewCallback]);\n\n\tReact.useEffect(() => {\n\t\tview?.dispatch({\n\t\t\teffects: onChangeComparment.current.reconfigure([\n\t\t\t\tEditorView.updateListener.of((update) => {\n\t\t\t\t\tif (update.docChanged && onChange) {\n\t\t\t\t\t\tonChange(update.view.state.doc.toString());\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t]),\n\t\t});\n\t}, [view, onChange]);\n\n\tReact.useEffect(() => {\n\t\tview?.dispatch({\n\t\t\teffects: onUpdateComparment.current.reconfigure([\n\t\t\t\tEditorView.updateListener.of((update) => {\n\t\t\t\t\tif (onUpdate) {\n\t\t\t\t\t\tonUpdate(update);\n\t\t\t\t\t}\n\t\t\t\t}),\n\t\t\t]),\n\t\t});\n\t}, [view, onUpdate]);\n\n\t// FIXME: it is probably better to have CM manage its state.\n\tReact.useEffect(() => {\n\t\tif (!view || currentValue === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentDoc = view.state.doc.toString();\n\t\tif (currentDoc !== currentValue) {\n\t\t\tview.dispatch({\n\t\t\t\tchanges: {\n\t\t\t\t\tfrom: 0,\n\t\t\t\t\tto: currentDoc.length,\n\t\t\t\t\tinsert: currentValue,\n\t\t\t\t},\n\t\t\t});\n\t\t}\n\t}, [currentValue, view]);\n\n\tReact.useEffect(() => {\n\t\tif (view === null) {\n\t\t\treturn;\n\t\t}\n\t\tview.dispatch({\n\t\t\teffects: languageCompartment.current.reconfigure(\n\t\t\t\tlanguageExtensions(mode),\n\t\t\t),\n\t\t});\n\t}, [mode, view]);\n\n\tReact.useEffect(() => {\n\t\tif (view === null) {\n\t\t\treturn;\n\t\t}\n\t\tview.dispatch({\n\t\t\teffects: [\n\t\t\t\treadOnlyCompartment.current.reconfigure(\n\t\t\t\t\tEditorState.readOnly.of(readOnly),\n\t\t\t\t),\n\t\t\t],\n\t\t});\n\t}, [readOnly, view]);\n\n\tReact.useEffect(() => {\n\t\tif (view === null) {\n\t\t\treturn;\n\t\t}\n\t\tview.dispatch({\n\t\t\teffects: [\n\t\t\t\tthemeCompartment.current.reconfigure(\n\t\t\t\t\tisReadOnlyTheme ? readOnlyTheme : baseTheme,\n\t\t\t\t),\n\t\t\t],\n\t\t});\n\t}, [isReadOnlyTheme, view]);\n\n\treturn <div className=\"h-full w-full\" ref={domRef} id={id} />;\n}\n"],"names":["autocompletion","closeBrackets","closeBracketsKeymap","completionKeymap","defaultKeymap","history","historyKeymap","json","jsonParseLinter","SQLDialect","sql","yaml","bracketMatching","foldGutter","foldKeymap","HighlightStyle","indentOnInput","syntaxHighlighting","linter","lintGutter","lintKeymap","highlightSelectionMatches","searchKeymap","Compartment","EditorState","crosshairCursor","drawSelection","dropCursor","EditorView","highlightActiveLine","highlightActiveLineGutter","highlightSpecialChars","keymap","lineNumbers","rectangularSelection","tags","React","http","baseTheme","backgroundColor","height","width","fontSize","paddingTop","paddingBottom","overflow","fontFamily","padding","outline","border","paddingLeft","color","readOnlyTheme","theme","customHighlightStyle","define","tag","propertyName","string","number","bool","null","keyword","operatorKeyword","controlKeyword","typeName","variableName","operator","comment","lineComment","blockComment","SQL_KEYWORDS","SQL_BUILTIN","customSQLDialect","keywords","join","builtin","languageExtensions","mode","jsonLang","yamlLang","ct","language","dialect","delay","CodeEditor","defaultValue","currentValue","onChange","onUpdate","viewCallback","readOnly","id","isReadOnlyTheme","domRef","useRef","view","setView","useState","initialValue","onChangeComparment","onUpdateComparment","languageCompartment","readOnlyCompartment","themeCompartment","useEffect","current","parent","state","create","doc","extensions","contentAttributes","of","allowMultipleSelections","destroy","dispatch","effects","reconfigure","updateListener","update","docChanged","toString","undefined","currentDoc","changes","from","to","length","insert","div","className","ref"],"mappings":"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"}

package/dist/src/components/code-editor.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof CodeEditor>;
 export default meta;
 type Story = StoryObj<typeof CodeEditor>;
 export declare const Default: Story;
+export declare const Complex: Story;
 //# sourceMappingURL=code-editor.stories.d.ts.map

package/dist/src/components/code-editor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-editor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/code-editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC"}
+{"version":3,"file":"code-editor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/code-editor.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAiSF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}