feat: add raw mode for editor (#152)

* feat: add ModelEditor component and ModelEditorPage

* feat: add model validation and message handling in ModelEditor component

app/components/ModelEditor.tsx

@@ -0,0 +1,77 @@
+'use client';
+import React, { useState, useEffect, useCallback } from 'react';
+import CodeMirror from '@uiw/react-codemirror';
+import { monokai } from '@uiw/codemirror-theme-monokai';
+import { basicSetup } from 'codemirror';
+import { indentUnit } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { CasbinConfSupport } from '@/app/components/editor/casbin-mode/casbin-conf';
+import { linter } from '@codemirror/lint';
+import { casbinLinter } from '@/app/utils/casbinLinter';
+import { newModel } from 'casbin';
+import { setError } from '@/app/utils/errorManager';
+
+export const ModelEditor = ({ initialValue = '' }: { initialValue: string }) => {
+  const [modelText, setModelText] = useState(initialValue);
+
+  const validateModel = useCallback(async (text: string) => {
+    try {
+      await newModel(text);
+      setError(null);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }, []);
+
+  useEffect(() => {
+    validateModel(modelText);
+  }, [modelText, validateModel]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === 'getModelText') {
+        window.parent.postMessage({
+          type: 'modelUpdate',
+          modelText: modelText
+        }, '*');
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [modelText]);
+
+  const handleModelTextChange = (value: string) => {
+    setModelText(value);
+  };
+
+  return (
+    <div className="flex-grow overflow-auto h-full">
+      <div className="flex flex-col h-full">
+        <CodeMirror
+          height="100%"
+          theme={monokai}
+          onChange={handleModelTextChange}
+          basicSetup={{
+            lineNumbers: true,
+            highlightActiveLine: true,
+            bracketMatching: true,
+            indentOnInput: true,
+          }}
+          extensions={[
+            basicSetup,
+            CasbinConfSupport(),
+            indentUnit.of('    '),
+            EditorView.lineWrapping,
+            linter(casbinLinter),
+          ]}
+          className={'function flex-grow h-[300px]'}
+          value={modelText}
+        />
+      </div>
+    </div>
+  );
+};

app/model-editor/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import React from 'react';
+import { ModelEditor } from '../components/ModelEditor';
+
+const ModelEditorPage = ({ searchParams }: { searchParams: { model?: string } }) => {
+  const initialValue = searchParams.model ? decodeURIComponent(searchParams.model) : '';
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <ModelEditor initialValue={initialValue} />
+    </div>
+  );
+};
+
+export default ModelEditorPage;