From 0c38f6641c42126bdfe82881065a4d15a0280ca9 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 23 Apr 2021 15:20:43 +0300
Subject: [PATCH] test to mount editor in nodeView class
---
editors/demo/src/HHMI/HHMI.js | 2 +-
.../MultipleChoiceNodeView.js | 59 ++++++++-
.../components/TestComponent.js | 123 +++++++++---------
.../schema/multipleChoiceNode.js | 2 +-
.../src/PortalService/AbstractNodeView.js | 4 +
5 files changed, 124 insertions(+), 66 deletions(-)
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index f27876520..683ded4cc 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -38,7 +38,7 @@ const Hhmi = () => {
autoFocus
fileUpload={file => renderImage(file)}
value=""
- targetFormat="JSON"
+ // targetFormat="JSON"
// readonly
layout={HhmiLayout}
onChange={source => console.log(source)}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
index a01e86ada..098ea0632 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
@@ -1,12 +1,67 @@
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
import { AbstractNodeView } from 'wax-prosemirror-services';
+import { StepMap } from 'prosemirror-transform';
+let questionView;
export default class MultipleChoiceNodeView extends AbstractNodeView {
+ constructor(node, view, getPos, decorations, createPortal, Component) {
+ super(node, view, getPos, decorations, createPortal, Component);
+
+ 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);
+
+ 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);
+ }
+ },
+
+ attributes: {
+ spellcheck: 'false',
+ },
+ },
+ );
+ });
+ }
static name() {
return 'multiple_choice';
}
update(node) {
- console.log('rwerwerwerrewer');
- return false;
+ 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;
+ }
+ questionView.dispatch(
+ state.tr
+ .replace(start, endB, node.slice(start, endA))
+ .setMeta('fromOutside', true),
+ );
+ }
}
}
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
index 2be18416a..237819d55 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
@@ -25,71 +25,72 @@ let questionView;
export default ({ node, view, getPos }) => {
const [showExplanation, setShowExplanation] = useState(false);
const editorRef = useRef();
- 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,
+ 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);
+ // 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);
- }
- };
+ // 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),
- );
- }
- }
+ // 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);
+ // console.log(node.attrs);
setShowExplanation(true);
showExp = true;
// view.dispatch(view.state.tr);
@@ -98,7 +99,6 @@ export default ({ node, view, getPos }) => {
const MemorizedComponent = useMemo(
() => (
<>
- <EditorWrapper ref={setEditorRef} style={styles} />
<button onClick={clickMe}>Add Explanation</button>
{showExplanation && <input type="text"></input>}
</>
@@ -108,7 +108,6 @@ export default ({ node, view, getPos }) => {
console.log(showExplanation);
return (
<>
- <EditorWrapper ref={setEditorRef} style={styles} />
<button onClick={clickMe}>Show Explanation</button>
{showExplanation && (
<input type="text" placeholder="type your explanation"></input>
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
index 17f8f80eb..63bb64fef 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
@@ -6,7 +6,7 @@ const multipleChoiceNode = {
attrs: {
id: { default: '' },
},
- toDOM: () => ['multiple-choice', { class: 'multiple-choice' }, 0],
+ toDOM: node => ['multiple-choice', node.attrs, 0],
parseDOM: [
{
tag: 'multiple-choice',
diff --git a/wax-prosemirror-services/src/PortalService/AbstractNodeView.js b/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
index 05960c854..1b4f39edc 100644
--- a/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
+++ b/wax-prosemirror-services/src/PortalService/AbstractNodeView.js
@@ -4,6 +4,10 @@ export default class AbstractNodeView {
constructor(node, view, getPos, decorations, createPortal, Component) {
this.dom = document.createElement('div');
this.dom.setAttribute('contenteditable', true);
+ const testDiv = document.createElement('div');
+
+ testDiv.setAttribute('id', 'test');
+ this.dom.append(testDiv);
this.dom.id = uuidv4();
this.dom.classList.add('portal');
--
GitLab