added yaml editor

Author: cr-ruhanmuzaffar

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

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,111 @@
+import{React,useState}from"react";
+
+importAceEditorfrom"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";
+
+importjsYamlfrom"js-yaml";
+
+importAjvfrom"ajv";
+constajv=newAjv({allErrors: true});
+
+importSchemafrom"../../../static/schema/schema.v2.json";
+
+exportdefaultfunctionYamlEditor(){
+const[annotations,setAnnotations]=useState([]);
+const[value,setValue]=useState(
+"# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json\n"
+);
+constvalidate=ajv.compile(Schema.definitions.schema);
+functiongetRowFromPath(path){
+// Convert path to row number (0-based)
+returnpath.split("/").length-1;
+}
+functiongetLineNumber(yaml,path){
+constlines=yaml.split("\n");
+constpathParts=path.split("/").filter(Boolean);
+letcurrentObj=jsYaml.load(yaml);
+letlineNumber=0;
+
+for(constpartofpathParts){
+for(leti=lineNumber;i<lines.length;i++){
+if(lines[i].trim().startsWith(part+":")){
+lineNumber=i;
+break;
+}
+}
+currentObj=currentObj[part];
+}
+
+returnlineNumber;
+}
+functiononChange(newValue){
+setValue(newValue);
+try{
+constdoc=jsYaml.load(newValue,{strict: true});
+constvalid=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"
+/>
+);
+}