added yaml editor (#74)

* added yaml editor

* name fix

* moved component to one code block

* removed logs

Author: cr-ruhanmuzaffar

docs/configure-coderabbit.md

@@ -10,6 +10,7 @@ sidebar_position: 3
 
 ```mdx-code-block
 import SchemaViewer from "@site/src/components/SchemaViewer";
+import YamlEditor from "/src/components/YamlEditor/YamlEditor";
 ```
 
 CodeRabbit offers various configuration options to tailor the reviews to your
@@ -56,6 +57,12 @@ chat:
   auto_reply: true
 ```
 
+Write your configuration file in the below editor to validate:
+
+```mdx-code-block
+<YamlEditor />
+```
+
 The configuration file can be used to set the following options:
 
 ```mdx-code-block

package-lock.json

@@ -27,6 +27,7 @@
     "postcss": "^8.4.32",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
+    "react-ace": "^12.0.0",
     "react-dom": "^18.0.0",
     "tailwindcss": "^3.4.0"
   },

package.json

@@ -0,0 +1,103 @@
+import { React, useState } from "react";
+
+import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/ext-language_tools";
+
+import "ace-builds/webpack-resolver";
+import "ace-builds/src-noconflict/mode-yaml";
+
+import jsYaml from "js-yaml";
+
+import Ajv from "ajv";
+const ajv = new Ajv({ allErrors: true });
+
+import Schema from "../../../static/schema/schema.v2.json";
+
+export default function YamlEditor() {
+  const [annotations, setAnnotations] = useState([]);
+  const [value, setValue] = useState(
+    "# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json\n"
+  );
+  const validate = ajv.compile(Schema.definitions.schema);
+  function getRowFromPath(path) {
+    // Convert path to row number (0-based)
+    return path.split("/").length - 1;
+  }
+  function getLineNumber(yaml, path) {
+    const lines = yaml.split("\n");
+    const pathParts = path.split("/").filter(Boolean);
+    let currentObj = jsYaml.load(yaml);
+    let lineNumber = 0;
+
+    for (const part of pathParts) {
+      for (let i = lineNumber; i < lines.length; i++) {
+        if (lines[i].trim().startsWith(part + ":")) {
+          lineNumber = i;
+          break;
+        }
+      }
+      currentObj = currentObj[part];
+    }
+
+    return lineNumber;
+  }
+  function onChange(newValue) {
+    setValue(newValue);
+    try {
+      const doc = jsYaml.load(newValue, { strict: true });
+      const valid = validate(doc);
+
+      if (!valid && validate.errors) {
+        setAnnotations(
+          validate.errors.map((err) => ({
+            row: err.instancePath
+              ? getLineNumber(newValue, err.instancePath)
+              : 0,
+            column: 0,
+            text: `${err.keyword}: ${err.message} ${
+              err?.params?.allowedValues
+                ? `Allowed values: ${err.params.allowedValues.join(", ")}`
+                : ""
+            }`,
+            type: "error",
+          }))
+        );
+      } else {
+        setAnnotations([]);
+      }
+    } catch (err) {
+      setAnnotations([
+        {
+          row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0,
+          column: 0,
+          text:
+            `${err.keyword}: ${err.message} ${
+              err?.params?.allowedValues
+                ? `Allowed values: ${err.params.allowedValues.join(", ")}`
+                : ""
+            }` || "YAML parsing error",
+          type: "error",
+        },
+      ]);
+    }
+  }
+  return (
+    <AceEditor
+      mode="yaml"
+      theme="github"
+      onChange={onChange}
+      value={value}
+      name="yaml-editor"
+      editorProps={{ $blockScrolling: true }}
+      setOptions={{
+        useWorker: false,
+        showPrintMargin: false,
+        showGutter: true,
+      }}
+      annotations={annotations}
+      width="100%"
+      height="400px"
+    />
+  );
+}