Skip to content
Snippets Groups Projects
Commit 0c38f664 authored by chris's avatar chris
Browse files

test to mount editor in nodeView class

parent ded15e38
No related branches found
No related tags found
1 merge request!289Pm node views portals
Hide whitespace changes
Inline Side-by-side
Showing
with 124 additions and 66 deletions
editors/demo/src/HHMI/HHMI.js
+ 1
− 1
View file @ 0c38f664
......@@ -38,7 +38,7 @@ const Hhmi = () => {
autoFocus
fileUpload={file => renderImage(file)}
value=""
targetFormat="JSON"
// targetFormat="JSON"
// readonly
layout={HhmiLayout}
onChange={source => console.log(source)}
......
editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceNodeView.js
+ 57
− 2
View file @ 0c38f664
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),
);
}
}
}
editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js
+ 61
− 62
View file @ 0c38f664
......@@ -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>
......
editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
+ 1
− 1
View file @ 0c38f664
......@@ -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',
......
wax-prosemirror-services/src/PortalService/AbstractNodeView.js
+ 4
− 0
View file @ 0c38f664
......@@ -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');
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment