From 7ecec3d322f4a8c29a73cb68b7fb4fb0767dcfae Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 26 Apr 2021 10:10:44 +0300
Subject: [PATCH] cleanup
---
.../MultipleChoiceNodeView.js | 100 ++++++++++--------
.../components/TestComponent.js | 79 +-------------
.../demo/src/HHMI/layout/EditorElements.js | 4 +-
.../src/PortalService/AbstractNodeView.js | 2 +-
4 files changed, 63 insertions(+), 122 deletions(-)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
index 098ea0632..e4422c4c7 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
@@ -7,61 +7,75 @@ let questionView;
export default class MultipleChoiceNodeView extends AbstractNodeView {
constructor(node, view, getPos, decorations, createPortal, Component) {
super(node, view, getPos, decorations, createPortal, Component);
+ this.node = node;
+ this.outerView = view;
+ this.getPos = getPos;
- setTimeout(() => {
- console.log(document.getElementById('test'));
- questionView = new EditorView(
- { mount: document.getElementById('test') },
- {
- state: EditorState.create({
- doc: node,
- }),
- dispatchTransaction: tr => {
- console.log('dispatch', questionView.state.applyTransaction(tr));
- let { state, transactions } = questionView.state.applyTransaction(
- tr,
- );
- questionView.updateState(state);
+ this.innerView = new EditorView(
+ {
+ mount: this.dom.appendChild(document.createElement('div')),
+ },
+ {
+ state: EditorState.create({
+ doc: node,
+ }),
+ dispatchTransaction: this.dispatchInner.bind(this),
- if (!tr.getMeta('fromOutside')) {
- let outerTr = view.state.tr,
- offsetMap = StepMap.offset(getPos() + 1);
- for (let i = 0; i < transactions.length; i++) {
- let steps = transactions[i].steps;
- for (let j = 0; j < steps.length; j++)
- outerTr.step(steps[j].map(offsetMap));
- }
- if (outerTr.docChanged) view.dispatch(outerTr);
- }
+ handleDOMEvents: {
+ mousedown: () => {
+ // Kludge to prevent issues due to the fact that the whole
+ // footnote is node-selected (and thus DOM-selected) when
+ // the parent editor is focused.
+ if (this.outerView.hasFocus()) this.innerView.focus();
},
+ },
- attributes: {
- spellcheck: 'false',
- },
+ attributes: {
+ spellcheck: 'false',
},
- );
- });
+ },
+ );
}
static name() {
return 'multiple_choice';
}
+ dispatchInner(tr) {
+ let { state, transactions } = this.innerView.state.applyTransaction(tr);
+ this.innerView.updateState(state);
+
+ if (!tr.getMeta('fromOutside')) {
+ let outerTr = this.outerView.state.tr,
+ offsetMap = StepMap.offset(this.getPos() + 1);
+ for (let i = 0; i < transactions.length; i++) {
+ let steps = transactions[i].steps;
+ for (let j = 0; j < steps.length; j++)
+ outerTr.step(steps[j].map(offsetMap));
+ }
+ if (outerTr.docChanged) this.outerView.dispatch(outerTr);
+ }
+ }
+
update(node) {
- const { state } = questionView;
- const start = node.content.findDiffStart(state.doc.content);
- console.log('start', start);
- 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;
+ if (!node.sameMarkup(this.node)) return false;
+ this.node = node;
+ if (this.innerView) {
+ let state = this.innerView.state;
+ let start = node.content.findDiffStart(state.doc.content);
+ if (start != null) {
+ let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
+ let 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),
+ );
}
- questionView.dispatch(
- state.tr
- .replace(start, endB, node.slice(start, endA))
- .setMeta('fromOutside', true),
- );
}
+ return true;
}
}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
index 237819d55..f7d37081b 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
@@ -20,92 +20,19 @@ const EditorWrapper = styled.div`
user-select: all;
`;
-let showExp = false;
-let questionView;
+
export default ({ node, view, getPos }) => {
const [showExplanation, setShowExplanation] = useState(false);
- const editorRef = useRef();
- console.log(node);
- // const setEditorRef = useCallback(
- // // eslint-disable-next-line consistent-return
- // editorNode => {
- // if (editorRef.current) {
- // console.log(editorRef);
- // }
- // if (editorNode) {
- // questionView = new EditorView(
- // { mount: editorNode },
- // {
- // state: EditorState.create({
- // doc: node,
- // }),
- // dispatchTransaction,
- // scrollMargin: 200,
- // scrollThreshold: 200,
-
- // attributes: {
- // spellcheck: 'false',
- // },
- // },
- // );
- // }
- // editorRef.current = editorNode;
- // },
- // [],
- // );
- // const dispatchTransaction = tr => {
- // console.log('dispatch', questionView.state.applyTransaction(tr));
- // let { state, transactions } = questionView.state.applyTransaction(tr);
- // questionView.updateState(state);
-
- // if (!tr.getMeta('fromOutside')) {
- // let outerTr = view.state.tr,
- // offsetMap = StepMap.offset(getPos() + 1);
- // for (let i = 0; i < transactions.length; i++) {
- // let steps = transactions[i].steps;
- // for (let j = 0; j < steps.length; j++)
- // outerTr.step(steps[j].map(offsetMap));
- // }
- // if (outerTr.docChanged) view.dispatch(outerTr);
- // }
- // };
-
- // console.log(questionView);
- // if (questionView) {
- // const { state } = questionView;
- // const start = node.content.findDiffStart(state.doc.content);
- // 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;
- // }
- // questionView.dispatch(
- // state.tr
- // .replace(start, endB, node.slice(start, endA))
- // .setMeta('fromOutside', true),
- // );
- // }
+ }
// }
const clickMe = () => {
- // console.log(node.attrs);
setShowExplanation(true);
showExp = true;
// view.dispatch(view.state.tr);
};
- const MemorizedComponent = useMemo(
- () => (
- <>
- <button onClick={clickMe}>Add Explanation</button>
- {showExplanation && <input type="text"></input>}
- </>
- ),
- [showExplanation],
- );
- console.log(showExplanation);
+;
return (
<>
<button onClick={clickMe}>Show Explanation</button>
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index bdf538bc6..378569c00 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -45,8 +45,8 @@ export default css`
}
div[contenteditable='false'] {
- pointer-events: none;
- user-select: none;
+ // pointer-events: none;
+ // user-select: none;
}
/* .ProseMirror title {
diff --git a/wax-prosemirror-services/src/PortalService/AbstractNodeView.js b/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
index 1b4f39edc..214ef693a 100644
--- a/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
+++ b/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
export default class AbstractNodeView {
constructor(node, view, getPos, decorations, createPortal, Component) {
this.dom = document.createElement('div');
- this.dom.setAttribute('contenteditable', true);
+ // this.dom.setAttribute('contenteditable', true);
const testDiv = document.createElement('div');
testDiv.setAttribute('id', 'test');
--
GitLab