Fix insert bug

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);
+});

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": []
 }
 "

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)) || "";

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<string, typeof routes>
-  );
+  const groups = routes.reduce((acc, row) => {
+    acc[row.zone] = (acc[row.zone] || []).concat(row);
+    return acc;
+  }, {} as Record<string, typeof routes>);
   return (
     <HashRouter>
       <div className="flex proot">

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,
         };
       }
-
     },
   };
 }