Remove chipWrapper node, which is not needed now we understand the st…

…ructure a bit better
guardian · Sep 29, 2024 · 6d58fac · 6d58fac
1 parent 6e111f8
commit 6d58fac
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 53 deletions.
diff --git a/prosemirror-client/src/cqlInput/CqlInput.spec.ts b/prosemirror-client/src/cqlInput/CqlInput.spec.ts
@@ -191,11 +191,11 @@ describe("CqlInput", () => {
         const { editor, container, waitFor } = await createCqlEditor();
         await editor.insertText("example +");
 
-        await waitFor("example +");
+        await waitFor("example +:");
 
         await selectPopoverOption(editor, container, "Tag");
 
-        await waitFor("example +tag");
+        await waitFor("example +tag:");
       });
     });
 
@@ -253,7 +253,7 @@ describe("CqlInput", () => {
 
       await editor.insertText("+tag").shortcut("Ctrl-a").insertText("a ");
 
-      await waitFor("a +tag");
+      await waitFor("a +tag:");
     });
   });
 });
diff --git a/prosemirror-client/src/cqlInput/CqlInput.ts b/prosemirror-client/src/cqlInput/CqlInput.ts
@@ -36,10 +36,15 @@ template.innerHTML = `
     }
 
     chip-key {
-      display: flex;
+      display: inline-flex;
+      padding: 0 5px;
+    }
+
+    chip-value {
       padding-right: 5px;
     }
 
+
     chip-key:after {
       content: ':'
     }
@@ -83,7 +88,11 @@ template.innerHTML = `
       font-size: ${baseFontSize * 0.8}px;
     }
 
-    .Cql__ChipWrapper--is-pending-delete chip {
+    .Cql__ChipWrapperContent {
+      display: inline-flex;
+    }
+
+    .Cql__ChipWrapper--is-pending-delete {
       background-color: darkred;
     }
 

diff --git a/prosemirror-client/src/cqlInput/debug.ts b/prosemirror-client/src/cqlInput/debug.ts
@@ -0,0 +1,116 @@
+import { Node } from "prosemirror-model";
+import { Mapping } from "prosemirror-transform";
+
+/**
+ * Utility function to log node structure to console. Quick, dirty, cursed code.
+ */
+export const logNode = (doc: Node) => {
+  console.log(`Log node ${doc.type.name}:`);
+
+  doc.nodesBetween(0, doc.content.size, (node, pos) => {
+    const indent = doc.resolve(pos).depth * 4;
+    const content =
+      node.type.name === "text" ? `'${node.textContent}'` : undefined;
+    console.log(
+      `${" ".repeat(indent)} ${node.type.name} ${pos}-${pos + node.nodeSize} ${
+        content ? content : ""
+      }`
+    );
+  });
+};
+
+export const getDebugMappingHTML = (
+  query: string,
+  mapping: Mapping,
+  doc: Node
+) => {
+  const queryPosMap: Record<string, { char: string; originalPos: number }[]> =
+    {};
+  query.split("").forEach((char, index) => {
+    const mappedPos = mapping.map(index);
+    const posInfo = { char, originalPos: index };
+    queryPosMap[mappedPos] = queryPosMap[mappedPos]
+      ? queryPosMap[mappedPos].concat(posInfo)
+      : [posInfo];
+  });
+
+  const queryDiagram = `
+    <p>Original query:</p>
+    <div class="CqlDebug__queryDiagram">
+
+    ${query
+      .split("")
+      .map(
+        (char, index) => `
+            <div class="CqlDebug__queryBox">
+                <div class="CqlDebug__queryIndex">${index}</div>
+                <div class="CqlDebug__queryChar">${char}</div>
+            </div>`
+      )
+      .join("")}
+    </div>`;
+
+  let nodeDiagram = `
+    <p>Maps to nodes: </p><div class="CqlDebug__nodeDiagram">`;
+  const posMap: Record<string, { char?: string; node?: string }> = {};
+  doc.nodesBetween(0, doc.content.size, (node, pos) => {
+    const content =
+      node.type.name === "text" ? `${node.textContent}` : undefined;
+    const { name } = node.type;
+
+    posMap[pos] = {
+      node: posMap[pos]?.node?.length
+        ? `${posMap[pos].node ?? ""}, ${name}`
+        : name,
+    };
+
+    posMap[pos + node.nodeSize] = posMap[pos + node.nodeSize]?.node
+      ? { node: `${posMap[pos + node.nodeSize].node} ${name} end` }
+      : { node: `${name} end` };
+
+    if (!content) {
+      posMap[pos + 1] = {};
+    }
+
+    content
+      ?.split("")
+      .forEach(
+        (char, index) =>
+          (posMap[index + pos + 1] = posMap[index + pos + 1]
+            ? { char, ...posMap[index + pos + 1] }
+            : { char })
+      );
+  });
+
+  nodeDiagram += Object.entries(posMap)
+    .map(
+      ([pos, { char, node }]) =>
+        `
+                <div class="CqlDebug__queryBox CqlDebug__queryBox--offset" data-pos="${pos}">
+                <div class="CqlDebug__queryIndex">${pos}</div>
+                    ${(queryPosMap[pos] ?? []).map(
+                      ({ char }) =>
+                        `<div class="CqlDebug__originalChar">${char}</div>`
+                    )}
+
+                    <div class="CqlDebug__queryIndex">${pos}</div>
+                    ${
+                      char?.length === 1
+                        ? `<div class="CqlDebug__nodeChar">${char}</div>`
+                        : ""
+                    }
+                    ${
+                      node?.length
+                        ? `<div class="CqlDebug__node ${
+                            node === "text" ? "CqlDebug__textNode" : ""
+                          }">${node}</div>`
+                        : ""
+                    }
+                </div>`
+    )
+    .join("");
+
+  nodeDiagram += `</div>`;
+
+  return `<div class="CqlDebug__mapping">${queryDiagram}${nodeDiagram}</div>`;
+};
diff --git a/prosemirror-client/src/cqlInput/plugin.ts b/prosemirror-client/src/cqlInput/plugin.ts
@@ -20,7 +20,7 @@ import {
 } from "./utils";
 import { Mapping } from "prosemirror-transform";
 import { TypeaheadPopover } from "./TypeaheadPopover";
-import { DELETE_CHIP_INTENT, chipWrapper, doc, schema } from "./schema";
+import { chip, DELETE_CHIP_INTENT, doc, schema } from "./schema";
 import { DOMSerializer, Fragment } from "prosemirror-model";
 import { QueryChangeEventDetail } from "./dom";
 import { ErrorPopover } from "./ErrorPopover";
@@ -129,7 +129,7 @@ export const createCqlPlugin = ({
       if (!oldState.selection.eq(newState.selection)) {
         const posOfChipWrappersToReset: number[] = [];
         newState.doc.descendants((node, pos) => {
-          if (node.type === chipWrapper && node.attrs[DELETE_CHIP_INTENT]) {
+          if (node.type === chip && node.attrs[DELETE_CHIP_INTENT]) {
             posOfChipWrappersToReset.push(pos);
           }
         });
@@ -146,21 +146,26 @@ export const createCqlPlugin = ({
     },
     props: {
       nodeViews: {
-        [chipWrapper.name](initialNode, view, getPos) {
+        [chip.name](initialNode, view, getPos) {
           const handleDeleteClickEvent = () => {
             const pos = getPos();
             if (!pos) {
               return;
             }
-            const node = view.state.doc.resolve(pos).nodeAfter;
+
+            const $pos = view.state.doc.resolve(pos)
+            const node = $pos.nodeAfter;
+
             if (!node) {
               return;
             }
-            applyDeleteIntent(view, pos, pos + node.nodeSize, node);
+
+            applyDeleteIntent(view, pos, pos + node.nodeSize + 1, node);
           };
 
           const dom = document.createElement("chip-wrapper");
           const contentDOM = document.createElement("span");
+          contentDOM.classList.add("Cql__ChipWrapperContent")
           const polarityHandle = document.createElement("span");
           polarityHandle.classList.add("Cql__ChipWrapperPolarityHandle");
           polarityHandle.setAttribute("contentEditable", "false");

diff --git a/prosemirror-client/src/cqlInput/schema.ts b/prosemirror-client/src/cqlInput/schema.ts
@@ -5,7 +5,7 @@ export const DELETE_CHIP_INTENT = "DELETE_CHIP_INTENT";
 export const schema = new Schema({
   nodes: {
     doc: {
-      content: "searchText (chipWrapper searchText)*",
+      content: "searchText (chip searchText)*",
     },
     text: {
       group: "inline",
@@ -16,20 +16,15 @@ export const schema = new Schema({
       toDOM: () => ["search-text", 0],
       whitespace: "pre",
     },
-    chipWrapper: {
-      content: "chip*",
-      group: "block",
-      toDOM: () => ["chip-wrapper", 0],
-      attrs: {
-        [DELETE_CHIP_INTENT]: {
-          default: false
-        }
-      }
-    },
     chip: {
-      content: "chipKey chipValue",
+      content: "(chipKey chipValue)?",
       group: "block",
       toDOM: () => ["chip", 0],
+      attrs: {
+        [DELETE_CHIP_INTENT]: {
+          default: false,
+        },
+      },
     },
     chipKey: {
       content: "inline*",
@@ -45,5 +40,4 @@ export const schema = new Schema({
   },
 });
 
-export const { chip, chipKey, chipValue, searchText, chipWrapper, doc } =
-  schema.nodes;
+export const { chip, chipKey, chipValue, searchText, doc } = schema.nodes;
diff --git a/prosemirror-client/src/cqlInput/utils.spec.ts b/prosemirror-client/src/cqlInput/utils.spec.ts
@@ -12,8 +12,7 @@ import { TestTypeaheadHelpers } from "../lang/typeaheadHelpersTest";
 import { Cql } from "../lang/Cql";
 
 describe("utils", () => {
-  const { chip, chipKey, chipValue, chipWrapper, doc, searchText } =
-    builders(schema);
+  const { chip, chipKey, chipValue, doc, searchText } = builders(schema);
 
   const cql = new Cql(new Typeahead(new TestTypeaheadHelpers().fieldResolvers));
 
@@ -49,7 +48,7 @@ describe("utils", () => {
 
       const expected = doc(
         searchText("text"),
-        chipWrapper(chip(chipKey("key"), chipValue("value"))),
+        chip(chipKey("key"), chipValue("value")),
         searchText("text")
       );
 
@@ -62,7 +61,7 @@ describe("utils", () => {
 
       const expected = doc(
         searchText(),
-        chipWrapper(chip(chipKey("key"), chipValue("value"))),
+        chip(chipKey("key"), chipValue("value")),
         searchText()
       );
 
@@ -75,7 +74,7 @@ describe("utils", () => {
 
       const expected = doc(
         searchText("this AND "),
-        chipWrapper(chip(chipKey("key"), chipValue())),
+        chip(chipKey("key"), chipValue()),
         searchText()
       );
 
@@ -97,9 +96,9 @@ describe("utils", () => {
 
       const expected = doc(
         searchText(),
-        chipWrapper(chip(chipKey(), chipValue())),
+        chip(chipKey(), chipValue()),
         searchText(),
-        chipWrapper(chip(chipKey("tag"), chipValue())),
+        chip(chipKey("tag"), chipValue()),
         searchText()
       );
 
@@ -183,7 +182,7 @@ describe("utils", () => {
   describe("getNextPositionAfterTypeaheadSelection", () => {
     const currentDoc = doc(
       searchText(),
-      chipWrapper(chip(chipKey("key<fromPos>"), chipValue("<toPos>"))),
+      chip(chipKey("key<fromPos>"), chipValue("<toPos>")),
       searchText()
     );