aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/FootnoteView.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-01-30 15:23:40 -0500
committerbobzel <zzzman@gmail.com>2023-01-30 15:23:40 -0500
commit5e2f64f3ee172e37d0d3277637a7778b640a2066 (patch)
tree11f9a5862e7e70b2eeb931f4eb3c5b509a3714cf /src/client/views/nodes/formattedText/FootnoteView.tsx
parent95b8a5a2b470d3118b6eeac484a45b23df2830b4 (diff)
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.
Diffstat (limited to 'src/client/views/nodes/formattedText/FootnoteView.tsx')
-rw-r--r--src/client/views/nodes/formattedText/FootnoteView.tsx72
1 files changed, 37 insertions, 35 deletions
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;
}
}
-