fix: yaml editor

Author: cr-ruhanmuzaffar

docs/configure-coderabbit.md

@@ -39,24 +39,6 @@ You can add a `.coderabbit.yaml` configuration file to the root of your
 repositories. Below is a sample YAML file that can be used as a starting point
 and changed as needed:
 
-```yaml
-# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
-language: "en-US"
-early_access: false
-reviews:
-  profile: "chill"
-  request_changes_workflow: false
-  high_level_summary: true
-  poem: true
-  review_status: true
-  collapse_walkthrough: false
-  auto_review:
-    enabled: true
-    drafts: false
-chat:
-  auto_reply: true
-```
-
 Write your configuration file in the below editor to validate:
 
 ```mdx-code-block

src/components/YamlEditor/YamlEditor.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useState, useEffect } from "react";
 
 import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/theme-github";
@@ -14,65 +14,70 @@ const ajv = new Ajv({ allErrors: true });
 
 import Schema from "../../../static/schema/schema.v2.json";
 
+const validate = ajv.compile(Schema.definitions.schema);
+
 export default function YamlEditor() {
+  const [value, setValue] = useState("");
   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];
-    }
+  useEffect(() => {
+    const initialValue = `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+language: "en-US"
+early_access: false
+reviews:
+  profile: "chill"
+  request_changes_workflow: false
+  high_level_summary: true
+  poem: true
+  review_status: true
+  collapse_walkthrough: false
+  auto_review:
+    enabled: true
+    drafts: false
+chat:
+  auto_reply: true
 
-    return lineNumber;
-  }
-  function onChange(newValue) {
-    setValue(newValue);
+`;
+    setValue(initialValue);
+    validateAndSetAnnotations(initialValue);
+  }, []);
+  function validateAndSetAnnotations(yaml) {
     try {
-      const doc = jsYaml.load(newValue, { strict: true });
-      const valid = validate(doc);
+      const doc = jsYaml.load(yaml, { strict: true });
+      const isValid = validate(doc);
 
-      if (!valid && validate.errors) {
+      if (!isValid && 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",
-          }))
+          validate.errors.map((err) => {
+            const instancePathArr = err?.instancePath?.split("/");
+            const key =
+              instancePathArr && instancePathArr[instancePathArr.length - 1];
+            return {
+              row: err.instancePath ? getLineNumber(yaml, err.instancePath) : 0,
+              column: 0,
+              text: `${key}: ${err.message} ${
+                err?.params?.allowedValues
+                  ? `Allowed values: ${err.params.allowedValues.join(", ")}`
+                  : ""
+              }`,
+              type: "error",
+            };
+          })
         );
       } else {
         setAnnotations([]);
       }
     } catch (err) {
+      const instancePathArr = err?.instancePath?.split("/");
+      const key =
+        instancePathArr && instancePathArr[instancePathArr.length - 1];
+
       setAnnotations([
         {
-          row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0,
+          row: err.instancePath ? getLineNumber(yaml, err.instancePath) : 0,
           column: 0,
           text:
-            `${err.keyword}: ${err.message} ${
+            `${key}: ${err.message} ${
               err?.params?.allowedValues
                 ? `Allowed values: ${err.params.allowedValues.join(", ")}`
                 : ""
@@ -82,6 +87,53 @@ export default function YamlEditor() {
       ]);
     }
   }
+  function getLineNumber(yaml, instancePath) {
+    const lines = yaml.split("\n");
+    const pathParts = instancePath.split("/").filter(Boolean);
+    let currentObj = jsYaml.load(yaml);
+    let lineNumber = 0;
+
+    const lastPathPart = pathParts[pathParts.length - 1];
+    const lastPathPartIndex = pathParts.length - 1;
+
+    for (let i = 0; i < lines.length; i++) {
+      if (lines[i].trim().startsWith(pathParts[0] + ":")) {
+        // Found the top-level field
+        lineNumber = i;
+        currentObj = currentObj[pathParts[0]];
+
+        for (let j = 1; j < lastPathPartIndex; j++) {
+          // Go through the nested fields
+          for (let k = lineNumber + 1; k < lines.length; k++) {
+            if (lines[k].trim().startsWith(pathParts[j] + ":")) {
+              lineNumber = k;
+              currentObj = currentObj[pathParts[j]];
+              break;
+            }
+          }
+        }
+
+        // look for the last path part with array syntax as well as object syntax
+        for (let l = lineNumber + 1; l < lines.length; l++) {
+          if (lines[l].trim().startsWith(`- ${lastPathPart}:`)) {
+            lineNumber = l;
+            break;
+          } else if (lines[l].trim().startsWith(lastPathPart + ":")) {
+            lineNumber = l;
+            break;
+          }
+        }
+        break;
+      }
+    }
+
+    return lineNumber;
+  }
+  function onChange(newValue) {
+    setValue(newValue);
+    validateAndSetAnnotations(newValue);
+  }
+
   return (
     <AceEditor
       mode="yaml"