|
| 1 | +import { React, useState } from "react"; |
| 2 | + |
| 3 | +import AceEditor from "react-ace"; |
| 4 | +import "ace-builds/src-noconflict/theme-github"; |
| 5 | +import "ace-builds/src-noconflict/ext-language_tools"; |
| 6 | + |
| 7 | +import "ace-builds/webpack-resolver"; |
| 8 | +import "ace-builds/src-noconflict/mode-yaml"; |
| 9 | + |
| 10 | +import jsYaml from "js-yaml"; |
| 11 | + |
| 12 | +import Ajv from "ajv"; |
| 13 | +const ajv = new Ajv({ allErrors: true }); |
| 14 | + |
| 15 | +import Schema from "../../../static/schema/schema.v2.json"; |
| 16 | + |
| 17 | +export default function YamlEditor() { |
| 18 | + const [annotations, setAnnotations] = useState([]); |
| 19 | + const [value, setValue] = useState( |
| 20 | + "# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json\n" |
| 21 | + ); |
| 22 | + const validate = ajv.compile(Schema.definitions.schema); |
| 23 | + function getRowFromPath(path) { |
| 24 | + // Convert path to row number (0-based) |
| 25 | + return path.split("/").length - 1; |
| 26 | + } |
| 27 | + function getLineNumber(yaml, path) { |
| 28 | + const lines = yaml.split("\n"); |
| 29 | + const pathParts = path.split("/").filter(Boolean); |
| 30 | + let currentObj = jsYaml.load(yaml); |
| 31 | + let lineNumber = 0; |
| 32 | + |
| 33 | + for (const part of pathParts) { |
| 34 | + for (let i = lineNumber; i < lines.length; i++) { |
| 35 | + if (lines[i].trim().startsWith(part + ":")) { |
| 36 | + lineNumber = i; |
| 37 | + break; |
| 38 | + } |
| 39 | + } |
| 40 | + currentObj = currentObj[part]; |
| 41 | + } |
| 42 | + |
| 43 | + return lineNumber; |
| 44 | + } |
| 45 | + function onChange(newValue) { |
| 46 | + setValue(newValue); |
| 47 | + try { |
| 48 | + const doc = jsYaml.load(newValue, { strict: true }); |
| 49 | + const valid = validate(doc); |
| 50 | + |
| 51 | + if (!valid && validate.errors) { |
| 52 | + setAnnotations( |
| 53 | + validate.errors.map((err) => ({ |
| 54 | + row: err.instancePath |
| 55 | + ? getLineNumber(newValue, err.instancePath) |
| 56 | + : 0, |
| 57 | + column: 0, |
| 58 | + text: `${err.keyword}: ${err.message} ${ |
| 59 | + err?.params?.allowedValues |
| 60 | + ? `Allowed values: ${err.params.allowedValues.join(", ")}` |
| 61 | + : "" |
| 62 | + }`, |
| 63 | + type: "error", |
| 64 | + })) |
| 65 | + ); |
| 66 | + } else { |
| 67 | + setAnnotations([]); |
| 68 | + } |
| 69 | + } catch (err) { |
| 70 | + setAnnotations([ |
| 71 | + { |
| 72 | + row: err.instancePath ? getLineNumber(newValue, err.instancePath) : 0, |
| 73 | + column: 0, |
| 74 | + text: |
| 75 | + `${err.keyword}: ${err.message} ${ |
| 76 | + err?.params?.allowedValues |
| 77 | + ? `Allowed values: ${err.params.allowedValues.join(", ")}` |
| 78 | + : "" |
| 79 | + }` || "YAML parsing error", |
| 80 | + type: "error", |
| 81 | + }, |
| 82 | + ]); |
| 83 | + } |
| 84 | + } |
| 85 | + return ( |
| 86 | + <AceEditor |
| 87 | + mode="yaml" |
| 88 | + theme="github" |
| 89 | + onChange={onChange} |
| 90 | + value={value} |
| 91 | + name="yaml-editor" |
| 92 | + editorProps={{ $blockScrolling: true }} |
| 93 | + setOptions={{ |
| 94 | + useWorker: false, |
| 95 | + showPrintMargin: false, |
| 96 | + showGutter: true, |
| 97 | + }} |
| 98 | + annotations={annotations} |
| 99 | + width="100%" |
| 100 | + height="400px" |
| 101 | + /> |
| 102 | + ); |
| 103 | +} |
0 commit comments