Patch branch idiocy

.github/workflows/test.yaml

@@ -9,12 +9,12 @@ jobs:
 
       - name: Install 🔧
         run: yarn
-        working-directory: ./packages/prong
+        working-directory: ./packages/prong-editor
 
       - name: Test 🔬
         run: yarn test
-        working-directory: ./packages/prong
+        working-directory: ./packages/prong-editor
 
       - name: Lint 🧵
         run: yarn lint
-        working-directory: ./packages/prong
+        working-directory: ./packages/prong-editor

.gitignore

@@ -23,4 +23,7 @@ yarn-debug.log*
 yarn-error.log*
 
 public/data/*
-public/data/
+public/data/
+*.es.js
+
+sites/docs/public/README.md

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "parser": "babel-ts"
+}

.vscode/settings.json

@@ -10,6 +10,7 @@
     "keymap",
     "lezer",
     "linebreak",
+    "nodenext",
     "pickr",
     "retarget",
     "Retargeted",

README.md

@@ -1,16 +1,17 @@
 # Prong
 
-This is the repo for the Prong editor framework. The goal of this system is to provide a simple way to create in-situ editor extensions for in-browser editors of JSON domain specific languages.
+This is the Prong editor framework. The goal of this system is to provide a simple way to create in-situ editor extensions for in-browser editors of JSON domain specific languages.
 The basic dependencies of this system are code mirror (which we wrap) and react (which we use as means to specify the extensions).
-Additionally a number of libraries have been forked to support this work, see src/lib/vendor (this won't matter to you, its more an acknowledgement of work).
+
+This is described in our upcoming paper "Projectional Editors for JSON DSLs"
 
 ## Quick start example usage
 
 ```tsx
 import { useState } from "react";
 
-import Editor from "../components/Editor";
-import standardBundle from "../projections/standard-bundle";
+import { Editor, StandardBundle } from "prong-editor";
+import "prong-editor/style.css";
 
 const exampleData = `{
     "a": {
@@ -30,13 +31,19 @@ function SimpleExample() {
       schema={{}}
       code={currentCode}
       onChange={(x) => setCurrentCode(x)}
-      projections={Object.values(standardBundle)}
+      projections={Object.values(StandardBundle)}
     />
   );
 }
 ```
 
-Installation instructions hidden for review.
+To install follow the usual methods:
+
+```
+yarn add prong-editor
+```
+
+Dont forget to import our css file!
 
 ## Component
 

package.json

@@ -1,19 +1,20 @@
 {
-    "name": "prong",
+    "name": "prong-editor",
     "private": true,
     "scripts": {
         "start:docs": "cd sites/docs && yarn dev",
-        "start:prong": "cd packages/prong && yarn dev",
+        "start:prong": "cd packages/prong-editor && yarn dev",
         "start": "run-p start:docs start:prong"
     },
     "devDependencies": {
         "lerna": "^4.0.0",
-        "npm-run-all": "^4.1.5"
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0"
     },
     "workspaces": {
         "packages": [
             "packages/*",
             "sites/*"
         ]
     }
-}
+}

packages/prong/package.json → packages/prong-editor/package.json

@@ -1,12 +1,11 @@
 {
-  "name": "prong",
-  "version": "0.0.0",
+  "name": "prong-editor",
+  "version": "0.0.2",
   "scripts": {
     "dev": " vite build --watch --config vite.config.ts",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "jest",
-    "prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",
     "lint": "eslint src/"
   },
   "dependencies": {
@@ -42,29 +41,30 @@
     "acorn-jsx": "^5.3.2",
     "babel-loader": "^8.2.3",
     "jest": "^29.6.1",
-    "json": "^11.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^4.5.5",
     "vite": "^2.7.13",
     "vite-jest": "^0.1.4",
     "vite-plugin-dts": "^0.9.9"
   },
-  "license": "UNLICENSED",
+  "license": "MIT",
   "peerDependencies": {
-    "react": "^16.8.0 || 17.x",
-    "react-dom": "^16.8.0 || 17.x"
+    "react": "17.x",
+    "react-dom": "7.x"
   },
   "files": [
     "dist"
   ],
-  "main": "./dist/prong.umd.js",
-  "module": "./dist/prong.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/prong.es.js",
       "require": "./dist/prong.umd.js"
+    },
+    "./style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   }
 }

packages/prong/src/components/Editor.tsx → packages/prong-editor/src/components/Editor.tsx

@@ -99,21 +99,21 @@ export default function Editor(props: {
     // hack :(
     setTimeout(() => {
       view?.dispatch({ effects: [setSchema.of(schema)] });
-    }, 100);
+    }, 300);
   }, [schema, view]);
   useEffect(() => {
     // hack :(
     setTimeout(() => {
       view?.dispatch({ effects: [setProjections.of(projections || [])] });
-    }, 100);
+    }, 300);
   }, [projections, view]);
 
   useEffect(() => {
     if (view && view.state.doc.toString() !== code) {
       // hack :(
       setTimeout(() => {
         simpleUpdate(view, 0, view.state.doc.length, code);
-      }, 100);
+      }, 300);
     }
   }, [code, view]);
   useEffect(() => {

packages/prong/src/index.ts → packages/prong-editor/src/index.ts

@@ -4,3 +4,5 @@ export * as utils from "./lib/utils";
 export { default as prettifier } from "./lib/vendored/prettifier";
 
 export { type Projection, type ProjectionProps } from "./lib/projections";
+
+import "./stylesheets/style.css";

packages/prong/src/lib/Linter.ts → packages/prong-editor/src/lib/Linter.ts

@@ -1,6 +1,6 @@
 import { linter } from "@codemirror/lint";
 import { produceLintValidations } from "./vendored/validator";
-import { codeString } from "../lib/utils";
+import { codeString } from "./utils";
 import { cmStatePlugin } from "./cmState";
 import { parser } from "@lezer/json";
 

packages/prong/src/lib/dock.tsx → packages/prong-editor/src/lib/dock.tsx

@@ -67,7 +67,7 @@ function Content(props: {
     <div className="cm-dock">
       <div className="cm-dock-label">
         {docked && (
-          <div className="flex-down">
+          <div className="prong-flex-down">
             <div>
               <b>Menu</b>
             </div>
@@ -120,6 +120,9 @@ class Monocle extends Component<MonocleProps, { dragging: boolean }> {
   }
 
   componentDidMount() {
+    if (monocleTarget?.getAttribute("style") === "display: block") {
+      return;
+    }
     while (monocleTarget!.firstChild) {
       monocleTarget!.removeChild(monocleTarget!.firstChild);
     }
@@ -131,8 +134,13 @@ class Monocle extends Component<MonocleProps, { dragging: boolean }> {
   }
 
   componentWillUnmount() {
-    monocleTarget!.removeChild(this.el);
-    monocleTarget?.setAttribute("style", "display: none");
+    if (monocleTarget) {
+      // monocleTarget.removeChild(this.el);
+      while (monocleTarget.firstChild) {
+        monocleTarget.removeChild(monocleTarget.firstChild);
+      }
+      monocleTarget?.setAttribute("style", "display: none");
+    }
   }
 
   render() {

packages/prong/src/lib/popover-menu/PopoverMenuElement.tsx → packages/prong-editor/src/lib/popover-menu/PopoverMenuElement.tsx

@@ -52,7 +52,6 @@ const InputElement: MenuElementRenderer<any> = (props) => {
   return (
     <div
       className={classNames({
-        flex: true,
         "cm-annotation-widget-element": true,
         "cm-annotation-widget-element-selected": props.isSelected,
       })}
@@ -115,8 +114,8 @@ const ButtonElement: MenuElementRenderer<any> = ({
   return (
     <div
       className={classNames({
-        flex: !allElementsInGroupAreOfThisType,
-        "flex-down": allElementsInGroupAreOfThisType,
+        "prong-flex": !allElementsInGroupAreOfThisType,
+        "prong-flex-down": allElementsInGroupAreOfThisType,
         "cm-annotation-widget-element": true,
         "cm-annotation-widget-element-selected": isSelected,
       })}

packages/prong/src/projections/ColorNamePicker.tsx → packages/prong-editor/src/projections/ColorNamePicker.tsx

@@ -223,7 +223,7 @@ function ColorNamePicker(props: {
     <div className="color-name-picker">
       <ul>
         {Object.entries(colorGroups).map(([groupName, colors]) => (
-          <li key={groupName} className="flex-down">
+          <li key={groupName} className="prong-flex-down">
             <span
               className="color-group"
               onClick={() =>

packages/prong/src/projections/ColorPicker.tsx → packages/prong-editor/src/projections/ColorPicker.tsx

@@ -12,9 +12,9 @@ function ColorPicker(props: {
   const { onChange, initialColor } = props;
   const [color, setColor] = useState(initialColor);
   return (
-    <div className="flex-down">
-      <div className="flex space-between">
-        <div className="flex centering">
+    <div className="prong-flex-down">
+      <div className="prong-flex space-between">
+        <div className="prong-flex centering">
           Old{" "}
           <div
             style={{
@@ -25,7 +25,7 @@ function ColorPicker(props: {
             }}
           ></div>
         </div>
-        <div className="flex centering">
+        <div className="prong-flex centering">
           New{" "}
           <div
             style={{

packages/prong/src/projections/standard-bundle.ts → packages/prong-editor/src/projections/standard-bundle.ts

@@ -1,7 +1,7 @@
 import { ColorNameProjection, HexConversionProject } from "./ColorNamePicker";
 import TooltipHexColorPicker from "./ColorPicker";
 import { Projection } from "../lib/projections";
-import InsertRandomWord from "./RandomWord";
+// import InsertRandomWord from "./RandomWord";
 import ClickTarget from "./ClickTarget";
 import BooleanTarget from "./Boolean";
 import ColorChip from "./ColorChip";
@@ -19,7 +19,7 @@ const bundle = {
   ConvertHex: HexConversionProject,
   // Debugger,
   // HeuristicJSONFixes,
-  InsertRandomWord,
+  // InsertRandomWord,//broken bc of friendly words
   NumberSlider,
   SortObject,
   TooltipColorNamePicker: ColorNameProjection,