mirror of
https://github.com/maputnik/editor.git
synced 2026-06-22 15:17:29 +00:00
Codemirror 5 to 6 upgrade (#1386)
## Launch Checklist - Resolves #891 This PR upgrades code mirror from version 5 to version 6. It should not change any functionality dramatically. The filter and other expressions have line numbers now as I was not able to remove those without introducing a lot of code, which I preferred not to. Before: <img width="571" height="933" alt="image" src="https://github.com/user-attachments/assets/02f047ee-0857-4eb1-9431-2620099ea025" /> After: <img width="571" height="933" alt="image" src="https://github.com/user-attachments/assets/7cf60155-7cd9-4c06-915e-dec2ae8247fc" /> - [x] Briefly describe the changes in this PR. - [x] Link to related issues. - [x] Include before/after visuals or gifs if this PR includes visual changes. - [x] Write tests for all new functionality. - [x] Add an entry to `CHANGELOG.md` under the `## main` section. --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Harel M
GitHub
@@ -0,0 +1,193 @@
|
||||
import { basicSetup } from "codemirror";
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { EditorState, Compartment } from "@codemirror/state";
|
||||
import { json, jsonParseLinter } from "@codemirror/lang-json";
|
||||
import { linter, lintGutter, type Diagnostic } from "@codemirror/lint";
|
||||
import { oneDark } from "@codemirror/theme-one-dark";
|
||||
import { expression, type StylePropertySpecification, validateStyleMin } from "@maplibre/maplibre-gl-style-spec";
|
||||
import jsonToAst, { type ValueNode, type PropertyNode } from "json-to-ast";
|
||||
import { jsonPathToPosition } from "./json-path-to-position";
|
||||
|
||||
export type LintType = "layer" | "style" | "expression" | "json";
|
||||
|
||||
type LinterError = {
|
||||
key: string | null;
|
||||
message: string;
|
||||
};
|
||||
|
||||
function getDiagnosticsFromExpressionErrors(errors: LinterError[], ast: ValueNode | PropertyNode) {
|
||||
const diagnostics: Diagnostic[] = [];
|
||||
for (const error of errors) {
|
||||
const {key, message} = error;
|
||||
if (!key) {
|
||||
diagnostics.push({
|
||||
from: 0,
|
||||
to: ast.loc ? ast.loc.end.offset : 0,
|
||||
severity: "error",
|
||||
message: message,
|
||||
});
|
||||
} else {
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
|
||||
const node = jsonPathToPosition(path, ast);
|
||||
if (!node) {
|
||||
console.warn("Something went wrong parsing error:", error);
|
||||
continue;
|
||||
}
|
||||
if (node.loc) {
|
||||
diagnostics.push({
|
||||
from: node.loc.start.offset,
|
||||
to: node.loc.end.offset,
|
||||
severity: "error",
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return diagnostics;
|
||||
}
|
||||
|
||||
function createMaplibreLayerLinter() {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
|
||||
try {
|
||||
// Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
|
||||
// Run the maplibre-gl-style-spec validator.
|
||||
const validationErrors = validateStyleMin({
|
||||
"version": 8,
|
||||
"name": "Empty Style",
|
||||
"metadata": {},
|
||||
"sources": {},
|
||||
"sprite": "",
|
||||
"glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
parsedJson
|
||||
]
|
||||
});
|
||||
|
||||
const linterErrors = validationErrors
|
||||
.filter(err => {
|
||||
// Remove missing 'layer source' errors, because we don't include them
|
||||
return !err.message.match(/^layers\[0\]: source ".*" not found$/);
|
||||
})
|
||||
.map(err => {
|
||||
// Remove the 'layers[0].' as we're validating the layer only here
|
||||
const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
|
||||
return {
|
||||
key: errMessageParts[0],
|
||||
message: errMessageParts[1],
|
||||
};
|
||||
});
|
||||
return getDiagnosticsFromExpressionErrors(linterErrors, ast);
|
||||
} catch {
|
||||
// The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
|
||||
}
|
||||
return [];
|
||||
};
|
||||
}
|
||||
|
||||
function createMaplibreStyleLinter() {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
|
||||
try {
|
||||
// Parse the JSON. The jsonParseLinter will handle pure JSON syntax errors.
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
|
||||
// Run the maplibre-gl-style-spec validator.
|
||||
const validationErrors = validateStyleMin(parsedJson);
|
||||
const linterErrors = validationErrors.map(err => {
|
||||
return {
|
||||
key: err.message.split(":")[0],
|
||||
message: err.message,
|
||||
};
|
||||
});
|
||||
return getDiagnosticsFromExpressionErrors(linterErrors, ast);
|
||||
} catch {
|
||||
// The built-in JSON linter handles JSON parsing errors, so we don't need to report them again.
|
||||
}
|
||||
return [];
|
||||
};
|
||||
}
|
||||
|
||||
function createMaplibreExpressionLinter(spec?: StylePropertySpecification) {
|
||||
return (view: EditorView) => {
|
||||
const text = view.state.doc.toString();
|
||||
const parsedJson = JSON.parse(text);
|
||||
const ast = jsonToAst(text);
|
||||
const out = expression.createExpression(parsedJson, spec);
|
||||
if (out?.result !== "error") {
|
||||
return [];
|
||||
}
|
||||
const errors = out.value;
|
||||
return getDiagnosticsFromExpressionErrors(errors, ast);
|
||||
};
|
||||
}
|
||||
|
||||
export function createEditor(props: {
|
||||
parent: HTMLElement,
|
||||
value: string,
|
||||
lintType: LintType,
|
||||
onChange: (value: string) => void,
|
||||
onFocus: () => void,
|
||||
onBlur: () => void,
|
||||
spec?: StylePropertySpecification,
|
||||
}): EditorView {
|
||||
let specificLinter: (view: EditorView) => Diagnostic[] = () => [];
|
||||
switch (props.lintType) {
|
||||
case "style":
|
||||
specificLinter = createMaplibreStyleLinter();
|
||||
break;
|
||||
case "layer":
|
||||
specificLinter = createMaplibreLayerLinter();
|
||||
break;
|
||||
case "expression":
|
||||
specificLinter = createMaplibreExpressionLinter(props.spec);
|
||||
break;
|
||||
case "json":
|
||||
specificLinter = () => [];
|
||||
break;
|
||||
}
|
||||
|
||||
return new EditorView({
|
||||
doc: props.value,
|
||||
extensions: [
|
||||
basicSetup,
|
||||
json(),
|
||||
oneDark,
|
||||
new Compartment().of(EditorState.tabSize.of(2)),
|
||||
EditorView.theme({
|
||||
"&": {
|
||||
fontSize: "9pt"
|
||||
}
|
||||
}),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
const doc = update.state.doc;
|
||||
const value = doc.toString();
|
||||
props.onChange(value);
|
||||
}
|
||||
if (update.focusChanged) {
|
||||
if (update.view.hasFocus) {
|
||||
props.onFocus();
|
||||
} else {
|
||||
props.onBlur();
|
||||
}
|
||||
}
|
||||
}),
|
||||
lintGutter(),
|
||||
linter((view: EditorView) => {
|
||||
const jsonErrors = jsonParseLinter()(view);
|
||||
if (jsonErrors.length > 0) {
|
||||
return jsonErrors;
|
||||
}
|
||||
return specificLinter(view);
|
||||
})
|
||||
],
|
||||
parent: props.parent,
|
||||
});
|
||||
}
|
||||
@@ -1,174 +0,0 @@
|
||||
import {parse} from "@prantlf/jsonlint";
|
||||
import CodeMirror, { type MarkerRange } from "codemirror";
|
||||
import jsonToAst from "json-to-ast";
|
||||
import {expression, validateStyleMin} from "@maplibre/maplibre-gl-style-spec";
|
||||
|
||||
type MarkerRangeWithMessage = MarkerRange & {message: string};
|
||||
|
||||
|
||||
CodeMirror.defineMode("mgl", (config, parserConfig) => {
|
||||
// Just using the javascript mode with json enabled. Our logic is in the linter below.
|
||||
return CodeMirror.modes.javascript(
|
||||
{...config, json: true} as any,
|
||||
parserConfig
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
function tryToParse(text: string) {
|
||||
|
||||
const found: MarkerRangeWithMessage[] = [];
|
||||
try {
|
||||
parse(text);
|
||||
}
|
||||
catch(err: any) {
|
||||
|
||||
const errorMatch = err.toString().match(/line (\d+), column (\d+)/);
|
||||
if (errorMatch) {
|
||||
const loc = {
|
||||
first_line: parseInt(errorMatch[1], 10),
|
||||
first_column: parseInt(errorMatch[2], 10),
|
||||
last_line: parseInt(errorMatch[1], 10),
|
||||
last_column: parseInt(errorMatch[2], 10)
|
||||
};
|
||||
|
||||
// const loc = hash.loc;
|
||||
found.push({
|
||||
from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
|
||||
to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
|
||||
message: err
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return found;
|
||||
}
|
||||
|
||||
CodeMirror.registerHelper("lint", "json", (text: string) => {
|
||||
return tryToParse(text);
|
||||
});
|
||||
|
||||
CodeMirror.registerHelper("lint", "mgl", (text: string, opts: any, doc: any) => {
|
||||
|
||||
const found: MarkerRangeWithMessage[] = tryToParse(text);
|
||||
|
||||
const {context} = opts;
|
||||
|
||||
if (found.length > 0) {
|
||||
// JSON invalid so don't go any further
|
||||
return found;
|
||||
}
|
||||
|
||||
const ast = jsonToAst(text);
|
||||
const input = JSON.parse(text);
|
||||
|
||||
function getArrayPositionalFromAst(node: any, path: string[]) {
|
||||
if (!node) {
|
||||
return undefined;
|
||||
}
|
||||
else if (path.length < 1) {
|
||||
return node;
|
||||
}
|
||||
else if (!node.children) {
|
||||
return undefined;
|
||||
}
|
||||
else {
|
||||
const key = path[0];
|
||||
let newNode;
|
||||
if (key.match(/^[0-9]+$/)) {
|
||||
newNode = node.children[path[0]];
|
||||
}
|
||||
else {
|
||||
newNode = node.children.find((childNode: any) => {
|
||||
return (
|
||||
childNode.key &&
|
||||
childNode.key.type === "Identifier" &&
|
||||
childNode.key.value === key
|
||||
);
|
||||
});
|
||||
if (newNode) {
|
||||
newNode = newNode.value;
|
||||
}
|
||||
}
|
||||
return getArrayPositionalFromAst(newNode, path.slice(1));
|
||||
}
|
||||
}
|
||||
|
||||
let out: ReturnType<typeof expression.createExpression> | null = null;
|
||||
if (context === "layer") {
|
||||
// Just an empty style so we can validate a layer.
|
||||
const errors = validateStyleMin({
|
||||
"version": 8,
|
||||
"name": "Empty Style",
|
||||
"metadata": {},
|
||||
"sources": {},
|
||||
"sprite": "",
|
||||
"glyphs": "https://example.com/glyphs/{fontstack}/{range}.pbf",
|
||||
"layers": [
|
||||
input
|
||||
]
|
||||
});
|
||||
|
||||
if (errors) {
|
||||
out = {
|
||||
result: "error",
|
||||
value: errors
|
||||
.filter(err => {
|
||||
// Remove missing 'layer source' errors, because we don't include them
|
||||
return !err.message.match(/^layers\[0\]: source ".*" not found$/);
|
||||
})
|
||||
.map(err => {
|
||||
// Remove the 'layers[0].' as we're validating the layer only here
|
||||
const errMessageParts = err.message.replace(/^layers\[0\]./, "").split(":");
|
||||
return {
|
||||
name: "",
|
||||
key: errMessageParts[0],
|
||||
message: errMessageParts[1],
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
}
|
||||
else if (context === "expression") {
|
||||
out = expression.createExpression(input, opts.spec);
|
||||
}
|
||||
else {
|
||||
throw new Error(`Invalid context ${context}`);
|
||||
}
|
||||
|
||||
if (out?.result === "error") {
|
||||
const errors = out.value;
|
||||
errors.forEach(error => {
|
||||
const {key, message} = error;
|
||||
|
||||
if (!key) {
|
||||
const lastLineHandle = doc.getLineHandle(doc.lastLine());
|
||||
const err = {
|
||||
from: CodeMirror.Pos(doc.firstLine(), 0),
|
||||
to: CodeMirror.Pos(doc.lastLine(), lastLineHandle.text.length),
|
||||
message: message,
|
||||
};
|
||||
found.push(err);
|
||||
}
|
||||
else if (key) {
|
||||
const path = key.replace(/^\[|\]$/g, "").split(/\.|[[\]]+/).filter(Boolean);
|
||||
const parsedError = getArrayPositionalFromAst(ast, path);
|
||||
if (!parsedError) {
|
||||
console.warn("Something went wrong parsing error:", error);
|
||||
return;
|
||||
}
|
||||
|
||||
const {loc} = parsedError;
|
||||
const {start, end} = loc;
|
||||
|
||||
found.push({
|
||||
from: CodeMirror.Pos(start.line - 1, start.column),
|
||||
to: CodeMirror.Pos(end.line - 1, end.column),
|
||||
message: message,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return found;
|
||||
});
|
||||
@@ -0,0 +1,67 @@
|
||||
import jsonToAst from "json-to-ast";
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { jsonPathToPosition } from "./json-path-to-position";
|
||||
|
||||
describe("json-path-to-position", () => {
|
||||
it("should get position of a simple key", () => {
|
||||
const json = {
|
||||
"key1": "value1",
|
||||
"key2": "value2"
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["key1"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value1"');
|
||||
});
|
||||
|
||||
it("should get position of second key", () => {
|
||||
const json = {
|
||||
"key1": "value1",
|
||||
"key2": "value2"
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["key2"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"value2"');
|
||||
});
|
||||
|
||||
it("should get position key in array", () => {
|
||||
const json = {
|
||||
"layers": [
|
||||
{
|
||||
"id": "layer1"
|
||||
}, {
|
||||
"id": "layer2"
|
||||
}
|
||||
]
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["layers", "1", "id"], ast);
|
||||
expect(text.slice(node!.loc!.start.offset, node!.loc!.end.offset)).toBe('"layer2"');
|
||||
});
|
||||
|
||||
it("should return undefined when key does not exist", () => {
|
||||
const json = {
|
||||
"layers": [
|
||||
{
|
||||
"id": "layer1"
|
||||
}, {
|
||||
"id": "layer2"
|
||||
}
|
||||
]
|
||||
};
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["layers", "2", "id"], ast);
|
||||
expect(node).toBe(undefined);
|
||||
});
|
||||
|
||||
it("should return undefined for value type", () => {
|
||||
const json = 1;
|
||||
const text = JSON.stringify(json);
|
||||
const ast = jsonToAst(text);
|
||||
const node = jsonPathToPosition(["id"], ast);
|
||||
expect(node).toBe(undefined);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { type PropertyNode, type ValueNode } from "json-to-ast";
|
||||
|
||||
export function jsonPathToPosition(path: string[], node: ValueNode | PropertyNode | undefined,) {
|
||||
if (!node) {
|
||||
return undefined;
|
||||
}
|
||||
if (path.length < 1) {
|
||||
return node;
|
||||
}
|
||||
if (!("children" in node)) {
|
||||
return undefined;
|
||||
}
|
||||
const key = path[0];
|
||||
if (key.match(/^[0-9]+$/)) {
|
||||
return jsonPathToPosition(path.slice(1), node.children[+path[0]]);
|
||||
}
|
||||
const newNode = node.children.find((childNode) => {
|
||||
return (
|
||||
"key" in childNode &&
|
||||
childNode.key.type === "Identifier" &&
|
||||
childNode.key.value === key
|
||||
);
|
||||
}) as PropertyNode | undefined;
|
||||
return jsonPathToPosition(path.slice(1), newNode?.value);
|
||||
}
|
||||
+4
-3
@@ -1,7 +1,8 @@
|
||||
import {latest} from "@maplibre/maplibre-gl-style-spec";
|
||||
import { type LayerSpecification } from "maplibre-gl";
|
||||
|
||||
export function changeType(layer: LayerSpecification, newType: string) {
|
||||
|
||||
export function changeType(layer: LayerSpecification, newType: string): LayerSpecification {
|
||||
const changedPaintProps: LayerSpecification["paint"] = { ...layer.paint };
|
||||
Object.keys(changedPaintProps).forEach(propertyName => {
|
||||
if(!(propertyName in latest["paint_" + newType])) {
|
||||
@@ -20,8 +21,8 @@ export function changeType(layer: LayerSpecification, newType: string) {
|
||||
...layer,
|
||||
paint: changedPaintProps,
|
||||
layout: changedLayoutProps,
|
||||
type: newType,
|
||||
};
|
||||
type: newType
|
||||
} as LayerSpecification;
|
||||
}
|
||||
|
||||
/** A {@property} in either the paint our layout {@group} has changed
|
||||
|
||||
Reference in New Issue
Block a user