From e2aa43e946bf3d6d51770b363523c5d696cd1c3e Mon Sep 17 00:00:00 2001
From: Ruhan <ruhan@coderabbit.ai>
Date: Thu, 8 Aug 2024 14:22:32 +0530
Subject: [PATCH 1/4] added yaml editor

---
 docs/configure-coderabbit.md             |  10 ++
 package-lock.json                        |  42 +++++++++
 package.json                             |   1 +
 src/components/YamlEditor/YamlEditor.jsx | 111 +++++++++++++++++++++++
 4 files changed, 164 insertions(+)
 create mode 100644 src/components/YamlEditor/YamlEditor.jsx

diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md
index a2b35f10..0b6d4165 100644
--- a/docs/configure-coderabbit.md
+++ b/docs/configure-coderabbit.md
@@ -12,6 +12,10 @@ sidebar_position: 3
 import SchemaViewer from "@site/src/components/SchemaViewer";
 ```
 
+```mdx-code-block
+import YamlEditor from "/src/components/YamlEditor/YamlEditor";
+```
+
 CodeRabbit offers various configuration options to tailor the reviews to your
 requirements. Configuration can be made using one of the below options, in order
 of precedence:
@@ -56,6 +60,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
diff --git a/package-lock.json b/package-lock.json
index b7c323c4..a0f1c019 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,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"
       },
@@ -3988,6 +3989,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.35.4",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.35.4.tgz",
+      "integrity": "sha512-r0KQclhZ/uk5a4zOqRYQkJuQuu4vFMiA6VTj54Tk4nI1TUR3iEMMppZkWbNoWEgWwv4ciDloObb9Rf4V55Qgjw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/acorn": {
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
@@ -5747,6 +5754,12 @@
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -8316,6 +8329,18 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12216,6 +12241,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-ace": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-12.0.0.tgz",
+      "integrity": "sha512-PstU6CSMfYIJknb4su2Fa0WgLXzq2ufQgR6fjcSWuGT1hGTHkBzuKw+SncV8PuLCdSJBJc1VehPhyeXlWByG/g==",
+      "license": "MIT",
+      "dependencies": {
+        "ace-builds": "^1.32.8",
+        "diff-match-patch": "^1.0.5",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
diff --git a/package.json b/package.json
index 3c82d516..4f257c51 100644
--- a/package.json
+++ b/package.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"
   },
diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx
new file mode 100644
index 00000000..6818ceb5
--- /dev/null
+++ b/src/components/YamlEditor/YamlEditor.jsx
@@ -0,0 +1,111 @@
+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);
+      console.log("Validation result:", valid);
+      console.log("Validation errors:", validate.errors);
+
+      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) {
+      console.error("Error:", err);
+      console.log({
+        errorMessage: err.reason,
+        column: err.mark?.column,
+        line: err.mark?.line,
+      });
+      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="UNIQUE_ID_OF_DIV"
+      editorProps={{ $blockScrolling: true }}
+      setOptions={{
+        useWorker: false,
+        showPrintMargin: false,
+        showGutter: true,
+      }}
+      annotations={annotations}
+      width="100%"
+      height="400px"
+    />
+  );
+}

From 88a5b714a0a220d5df40730f4f357e74ab4688ec Mon Sep 17 00:00:00 2001
From: Ruhan <ruhan@coderabbit.ai>
Date: Thu, 8 Aug 2024 14:25:09 +0530
Subject: [PATCH 2/4] name fix

---
 src/components/YamlEditor/YamlEditor.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx
index 6818ceb5..e699fe2c 100644
--- a/src/components/YamlEditor/YamlEditor.jsx
+++ b/src/components/YamlEditor/YamlEditor.jsx
@@ -96,7 +96,7 @@ export default function YamlEditor() {
       theme="github"
       onChange={onChange}
       value={value}
-      name="UNIQUE_ID_OF_DIV"
+      name="yaml-editor"
       editorProps={{ $blockScrolling: true }}
       setOptions={{
         useWorker: false,

From 6540733a1b1abf9f1bc02b93e05f4ccbeaed79ed Mon Sep 17 00:00:00 2001
From: Ruhan <ruhan@coderabbit.ai>
Date: Fri, 9 Aug 2024 11:33:58 +0530
Subject: [PATCH 3/4] moved component to one code block

---
 docs/configure-coderabbit.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/docs/configure-coderabbit.md b/docs/configure-coderabbit.md
index 0b6d4165..e44c3936 100644
--- a/docs/configure-coderabbit.md
+++ b/docs/configure-coderabbit.md
@@ -10,9 +10,6 @@ sidebar_position: 3
 
 ```mdx-code-block
 import SchemaViewer from "@site/src/components/SchemaViewer";
-```
-
-```mdx-code-block
 import YamlEditor from "/src/components/YamlEditor/YamlEditor";
 ```
 

From 8e2c75c5351a85c84b872d77d2f75825c588cdc2 Mon Sep 17 00:00:00 2001
From: Ruhan <ruhan@coderabbit.ai>
Date: Fri, 9 Aug 2024 11:35:25 +0530
Subject: [PATCH 4/4] removed logs

---
 src/components/YamlEditor/YamlEditor.jsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/YamlEditor/YamlEditor.jsx b/src/components/YamlEditor/YamlEditor.jsx
index e699fe2c..a60564ba 100644
--- a/src/components/YamlEditor/YamlEditor.jsx
+++ b/src/components/YamlEditor/YamlEditor.jsx
@@ -47,8 +47,6 @@ export default function YamlEditor() {
     try {
       const doc = jsYaml.load(newValue, { strict: true });
       const valid = validate(doc);
-      console.log("Validation result:", valid);
-      console.log("Validation errors:", validate.errors);
 
       if (!valid && validate.errors) {
         setAnnotations(
@@ -69,12 +67,6 @@ export default function YamlEditor() {
         setAnnotations([]);
       }
     } catch (err) {
-      console.error("Error:", err);
-      console.log({
-        errorMessage: err.reason,
-        column: err.mark?.column,
-        line: err.mark?.line,
-      });
       setAnnotations([
         {
           row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0,

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coderabbitai/coderabbit-docs/pull/74.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coderabbitai/coderabbit-docs/pull/74.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coderabbitai/coderabbit-docs/pull/74.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coderabbitai/coderabbit-docs/pull/74.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>