aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/FootnoteView.tsx
diff options
context:
space:
mode:
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;
}
}
-