Feature yaml editor (#76)

* added yaml editor * name fix * moved component to one code block * removed logs * fix: yaml editor * fix: reviews * new line * fix: merge fix

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

@@ -0,0 +1,160 @@
+importReact,{useState,useEffect}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";
+
+constvalidate=ajv.compile(Schema.definitions.schema);
+constinitialValue=`# 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
+
+`;
+exportdefaultfunctionYamlEditor(){
+const[value,setValue]=useState(initialValue);
+const[annotations,setAnnotations]=useState([]);
+
+useEffect(()=>{
+setValue(initialValue);
+validateAndSetAnnotations(initialValue);
+},[]);
+
+functionvalidateAndSetAnnotations(yaml){
+try{
+constdoc=jsYaml.load(yaml,{strict: true});
+constisValid=validate(doc);
+
+if(!isValid&&validate.errors){
+setAnnotations(
+validate.errors.map((err)=>{
+constinstancePathArr=err?.instancePath?.split("/");
+constkey=
+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){
+constinstancePathArr=err?.instancePath?.split("/");
+constkey=
+instancePathArr&&instancePathArr[instancePathArr.length-1];
+
+setAnnotations([
+{
+row: err.instancePath ? getLineNumber(yaml,err.instancePath) : 0,
+column: 0,
+text:
+`${key}: ${err.message}${
+err?.params?.allowedValues
+ ? `Allowed values: ${err.params.allowedValues.join(", ")}`
+ : ""
+}`||"YAML parsing error",
+type: "error",
+},
+]);
+}
+}
+
+functiongetLineNumber(yaml,instancePath){
+constlines=yaml.split("\n");
+constpathParts=instancePath.split("/").filter(Boolean);
+letcurrentObj=jsYaml.load(yaml);
+letlineNumber=0;
+
+constlastPathPart=pathParts[pathParts.length-1];
+constlastPathPartIndex=pathParts.length-1;
+
+for(leti=0;i<lines.length;i++){
+if(lines[i].trim().startsWith(pathParts[0]+":")){
+// Found the top-level field
+lineNumber=i;
+currentObj=currentObj[pathParts[0]];
+
+for(letj=1;j<lastPathPartIndex;j++){
+// Go through the nested fields
+for(letk=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(letl=lineNumber+1;l<lines.length;l++){
+if(lines[l].trim().startsWith(`- ${lastPathPart}:`)){
+lineNumber=l;
+break;
+}elseif(lines[l].trim().startsWith(lastPathPart+":")){
+lineNumber=l;
+break;
+}
+}
+break;
+}
+}
+
+returnlineNumber;
+}
+
+functiononChange(newValue){
+setValue(newValue);
+validateAndSetAnnotations(newValue);
+}
+
+return(
+<divclassName="m4">
+<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"
+/>
+<br/>
+</div>
+);
+}