From 5e2f64f3ee172e37d0d3277637a7778b640a2066 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 30 Jan 2023 15:23:40 -0500
Subject: fixed pointerEvents for text box footnotes.  fixed keyvalue editing
 to not typecheck.  fixed schema header field editing from keyvalue pane. 
 fixed webBox error causing overlayview to not work for Repls and others.  
 fixed some layout issues with stackingview columns.

---
 .../views/nodes/formattedText/FootnoteView.tsx     | 72 +++++++++++-----------
 1 file changed, 37 insertions(+), 35 deletions(-)

(limited to 'src/client/views/nodes/formattedText/FootnoteView.tsx')

diff --git a/src/client/views/nodes/formattedText/FootnoteView.tsx b/src/client/views/nodes/formattedText/FootnoteView.tsx
index 1683cc972..531a60297 100644
--- a/src/client/views/nodes/formattedText/FootnoteView.tsx
+++ b/src/client/views/nodes/formattedText/FootnoteView.tsx
@@ -1,10 +1,10 @@
-import { EditorView } from "prosemirror-view";
-import { EditorState } from "prosemirror-state";
-import { keymap } from "prosemirror-keymap";
-import { baseKeymap, toggleMark } from "prosemirror-commands";
-import { schema } from "./schema_rts";
-import { redo, undo } from "prosemirror-history";
-import { StepMap } from "prosemirror-transform";
+import { EditorView } from 'prosemirror-view';
+import { EditorState } from 'prosemirror-state';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap, toggleMark } from 'prosemirror-commands';
+import { schema } from './schema_rts';
+import { redo, undo } from 'prosemirror-history';
+import { StepMap } from 'prosemirror-transform';
 
 export class FootnoteView {
     innerView: any;
@@ -20,38 +20,39 @@ export class FootnoteView {
         this.getPos = getPos;
 
         // The node's representation in the editor (empty, for now)
-        this.dom = document.createElement("footnote");
+        this.dom = document.createElement('footnote');
 
-        this.dom.addEventListener("pointerup", this.toggle, true);
+        this.dom.addEventListener('pointerup', this.toggle, true);
         // These are used when the footnote is selected
         this.innerView = null;
     }
 
     selectNode() {
-        this.dom.classList.add("ProseMirror-selectednode");
+        this.dom.classList.add('ProseMirror-selectednode');
         if (!this.innerView) this.open();
     }
 
     deselectNode() {
-        this.dom.classList.remove("ProseMirror-selectednode");
+        this.dom.classList.remove('ProseMirror-selectednode');
         if (this.innerView) this.close();
     }
 
     open() {
         // Append a tooltip to the outer node
-        const tooltip = this.dom.appendChild(document.createElement("div"));
-        tooltip.className = "footnote-tooltip";
+        const tooltip = this.dom.appendChild(document.createElement('div'));
+        tooltip.className = 'footnote-tooltip';
         // And put a sub-ProseMirror into that
         this.innerView = new EditorView(tooltip, {
             // You can use any node as an editor document
             state: EditorState.create({
                 doc: this.node,
-                plugins: [keymap(baseKeymap),
-                keymap({
-                    "Mod-z": () => undo(this.outerView.state, this.outerView.dispatch),
-                    "Mod-y": () => redo(this.outerView.state, this.outerView.dispatch),
-                    "Mod-b": toggleMark(schema.marks.strong)
-                }),
+                plugins: [
+                    keymap(baseKeymap),
+                    keymap({
+                        'Mod-z': () => undo(this.outerView.state, this.outerView.dispatch),
+                        'Mod-y': () => redo(this.outerView.state, this.outerView.dispatch),
+                        'Mod-b': toggleMark(schema.marks.strong),
+                    }),
                     // new Plugin({
                     //     view(newView) {
                     //         // TODO -- make this work with RichTextMenu
@@ -59,7 +60,6 @@ export class FootnoteView {
                     //     }
                     // })
                 ],
-
             }),
             // This is the magic part
             dispatchTransaction: this.dispatchInner.bind(this),
@@ -69,36 +69,39 @@ export class FootnoteView {
                     // footnote is node-selected (and thus DOM-selected) when
                     // the parent editor is focused.
                     e.stopPropagation();
-                    document.addEventListener("pointerup", this.ignore, true);
+                    document.addEventListener('pointerup', this.ignore, true);
                     if (this.outerView.hasFocus()) this.innerView.focus();
-                }) as any
-            }
+                }) as any,
+            },
         });
         setTimeout(() => this.innerView?.docView.setSelection(0, 0, this.innerView.root, true), 0);
     }
 
     ignore = (e: PointerEvent) => {
         e.stopPropagation();
-        document.removeEventListener("pointerup", this.ignore, true);
-    }
+        document.removeEventListener('pointerup', this.ignore, true);
+    };
 
     toggle = () => {
+        console.log('TOGGLE');
         if (this.innerView) this.close();
         else this.open();
-    }
+    };
 
     close() {
+        console.log('CLOSE');
         this.innerView?.destroy();
         this.innerView = null;
-        this.dom.textContent = "";
+        this.dom.textContent = '';
     }
 
     dispatchInner(tr: any) {
         const { state, transactions } = this.innerView.state.applyTransaction(tr);
         this.innerView.updateState(state);
 
-        if (!tr.getMeta("fromOutside")) {
-            const outerTr = this.outerView.state.tr, offsetMap = StepMap.offset(this.getPos() + 1);
+        if (!tr.getMeta('fromOutside')) {
+            const outerTr = this.outerView.state.tr,
+                offsetMap = StepMap.offset(this.getPos() + 1);
             for (const transaction of transactions) {
                 for (const step of transaction.steps) {
                     outerTr.step(step.map(offsetMap));
@@ -117,11 +120,11 @@ export class FootnoteView {
             if (start !== null) {
                 let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
                 const overlap = start - Math.min(endA, endB);
-                if (overlap > 0) { endA += overlap; endB += overlap; }
-                this.innerView.dispatch(
-                    state.tr
-                        .replace(start, endB, node.slice(start, endA))
-                        .setMeta("fromOutside", true));
+                if (overlap > 0) {
+                    endA += overlap;
+                    endB += overlap;
+                }
+                this.innerView.dispatch(state.tr.replace(start, endB, node.slice(start, endA)).setMeta('fromOutside', true));
             }
         }
         return true;
@@ -139,4 +142,3 @@ export class FootnoteView {
         return true;
     }
 }
-
-- 
cgit v1.2.3-70-g09d2

