diff --git a/packages/prong-editor/src/lib/ModifyCode.test.ts b/packages/prong-editor/src/lib/ModifyCode.test.ts index 2748bea..6fe07ac 100644 --- a/packages/prong-editor/src/lib/ModifyCode.test.ts +++ b/packages/prong-editor/src/lib/ModifyCode.test.ts @@ -385,3 +385,37 @@ test("modifyCodeByCommand - removeElementFromArray", () => { expect(update3).toMatchSnapshot(); }); }); + +test("modifyCodeByCommand - addObjectKey (buggy vl fill insert)", () => { + const exampleCode = ` +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "A simple bar chart with embedded data.", + "data": { + "values": [ + {"penguins": "A", "flowers": 28}, {"penguins": "B", "flowers": 55}, {"penguins": "C", "flowers": 43}, + {"penguins": "D", "flowers": 91}, {"penguins": "E", "flowers": 81}, {"penguins": "F", "flowers": 53}, + {"penguins": "G", "flowers": 19}, {"penguins": "H", "flowers": 87}, {"penguins": "I", "flowers": 52} + ] + }, + "mark": {"type": "bar", fill}, + "encoding": { + "x": {"field": "penguins", "type": "nominal", "axis": {"labelAngle": 0}}, + "y": {"field": "flowers", "type": "quantitative"} + } +} +`; + const targetKey = findNodeByText(exampleCode, "fill")!; + const cmd = modifyCodeByCommand( + { + nodeId: "514-518", + payload: { key: '"fill"', value: '""' }, + type: "addObjectKey", + }, + targetKey, + exampleCode, + targetKey.to + )!; + expect(insertSwap(exampleCode, cmd)).toMatchSnapshot(); + expect(true).toBe(true); +}); diff --git a/packages/prong-editor/src/lib/__snapshots__/ModifyCode.test.ts.snap b/packages/prong-editor/src/lib/__snapshots__/ModifyCode.test.ts.snap index 058a7e9..e34fb0c 100644 --- a/packages/prong-editor/src/lib/__snapshots__/ModifyCode.test.ts.snap +++ b/packages/prong-editor/src/lib/__snapshots__/ModifyCode.test.ts.snap @@ -99,6 +99,29 @@ exports[`modifyCodeByCommand - addObjectKey (boundary effects) 1`] = ` exports[`modifyCodeByCommand - addObjectKey (buggy mark) 1`] = `"{"mark": {"type":"bar", "color": "" }} "`; +exports[`modifyCodeByCommand - addObjectKey (buggy vl fill insert) 1`] = ` +" +{ + "$schema": "https://vega.github.io/schema/vega-lite/v5.json", + "description": "A simple bar chart with embedded data.", + "data": { + "values": [ + {"penguins": "A", "flowers": 28}, {"penguins": "B", "flowers": 55}, {"penguins": "C", "flowers": 43}, + {"penguins": "D", "flowers": 91}, {"penguins": "E", "flowers": 81}, {"penguins": "F", "flowers": 53}, + {"penguins": "G", "flowers": 19}, {"penguins": "H", "flowers": 87}, {"penguins": "I", "flowers": 52} + ] + }, + "mark": {"type": "bar", + "fill": "" + }, + "encoding": { + "x": {"field": "penguins", "type": "nominal", "axis": {"labelAngle": 0}}, + "y": {"field": "flowers", "type": "quantitative"} + } +} +" +`; + exports[`modifyCodeByCommand - addObjectKey (cursorPos fruit) 1`] = ` "{ "fruits": [ "apple", "orange", "#c71585" ], @@ -221,7 +244,7 @@ exports[`modifyCodeByCommand - addObjectKeyEvent (legend insert) 1`] = ` " { "padding": 5, - "legends": [], + "legends": [], "signals": [] } " diff --git a/packages/prong-editor/src/lib/modify-json.ts b/packages/prong-editor/src/lib/modify-json.ts index 238f82f..8706085 100644 --- a/packages/prong-editor/src/lib/modify-json.ts +++ b/packages/prong-editor/src/lib/modify-json.ts @@ -191,11 +191,12 @@ function computeSeparations( ) { let text = preText; if (hasType(target, "⚠")) { + // trim out the error text = text.slice(0, target.from) + text.slice(target.to); } // region has new line const regionHasNl = (from: number, to: number) => - text.slice(from, to).includes("\n"); + text.slice(from, to).trim().includes("\n"); const prevToTarg = (prev && text.slice(prev.to, target.from)) || ""; const prevToNext = (prev && next && text.slice(prev.to, next.from)) || ""; const nextToTarg = (next && text.slice(target.to, next.from)) || ""; diff --git a/sites/docs/src/App.tsx b/sites/docs/src/App.tsx index 9883a59..76dda13 100644 --- a/sites/docs/src/App.tsx +++ b/sites/docs/src/App.tsx @@ -3,8 +3,7 @@ import { useEffect, useState } from "react"; import { HashRouter, Route, Routes, Link } from "react-router-dom"; import ReactMarkdown from "react-markdown"; - -import '../../../packages/prong-editor/src/styles.css' +import "../../../packages/prong-editor/src/stylesheets/style.css"; import "./App.css"; import VegaLiteExampleApp from "./examples/VegaLiteDebug"; @@ -129,13 +128,10 @@ function Explanation(props: { explanation: string }) { } function App() { - const groups = routes.reduce( - (acc, row) => { - acc[row.zone] = (acc[row.zone] || []).concat(row); - return acc; - }, - {} as Record - ); + const groups = routes.reduce((acc, row) => { + acc[row.zone] = (acc[row.zone] || []).concat(row); + return acc; + }, {} as Record); return (
diff --git a/sites/docs/vite.config.ts b/sites/docs/vite.config.ts index 0b2f759..b7b1d11 100644 --- a/sites/docs/vite.config.ts +++ b/sites/docs/vite.config.ts @@ -8,24 +8,24 @@ function myPlugin() { transform(src, id) { if ( - process.env.NODE_ENV === 'production' && + process.env.NODE_ENV === "production" && id.includes("sites/docs") && !id.includes("node_modules") && (id.endsWith(".ts") || id.endsWith(".tsx")) ) { - return { - code: src.replaceAll( - "../../../../packages/prong-editor/src/index", - "prong-editor" - ).replaceAll( - "../../../packages/prong-editor/src/styles.css", - "prong-editor/style.css" - ), + code: src + .replaceAll( + "../../../../packages/prong-editor/src/index", + "prong-editor" + ) + .replaceAll( + "../../../packages/prong-editor/src/stylesheets/styles.css", + "prong-editor/style.css" + ), map: null, }; } - }, }; }