test

editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js

@@ -12,7 +12,12 @@ class MultipleChoiceQuestion extends Tools {
   get run() {
     return (state, dispatch) => {
       const { empty, $from, $to } = state.selection;
-      const content = Fragment.empty;
+      let content = Fragment.empty;
+      if (!empty && $from.sameParent($to) && $from.parent.inlineContent)
+        content = $from.parent.content.cut(
+          $from.parentOffset,
+          $to.parentOffset,
+        );
 
       const footnote = state.config.schema.nodes.multiple_choice.create(
         { id: uuidv4() },

editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js

 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import { EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { StepMap } from 'prosemirror-transform';
@@ -9,11 +9,16 @@ const styles = {
   border: '1px solid black',
 };
 
+const EditorWrapper = styled.div`
+  pointer-events: visible;
+  user-select: all;
+`;
+
+let questionView;
 export default ({ node, view, getPos }) => {
   console.log(node);
   const editorRef = useRef();
-  let questionView;
-  useLayoutEffect(() => {
+  useEffect(() => {
     questionView = new EditorView(
       { mount: editorRef.current },
       {
@@ -88,10 +93,15 @@ export default ({ node, view, getPos }) => {
     view.dispatch(view.state.tr);
   };
 
-  return (
-    <>
-      <div ref={editorRef} style={styles} />
-      <button onClick={clickMe}>Click me</button>
-    </>
+  const MemorizedComponent = useMemo(
+    () => (
+      <>
+        <EditorWrapper ref={editorRef} style={styles} />
+        <button onClick={clickMe}>Click me</button>
+      </>
+    ),
+    [],
   );
+
+  return <>{MemorizedComponent}</>;
 };

wax-prosemirror-services/src/PortalService/components/TestComponent.js

-import React from 'react';
-
-
-const styles = {
-  backgroundColor: 'red',
-  width: '200px',
-  height: '200px',
-};
-
-export default () => {
-
-
-  // useEffect(() => {
-  //   const editorViewDOM = editorViewRef.current;
-  //   if (editorViewDOM) {
-  //     createEditorView(editorViewDOM);
-  //   }
-  // }, [createEditorView]);
-
-  return <div style={styles}></div>;
-};

wax-prosemirror-services/src/PortalService/portalPlugin.js

@@ -6,6 +6,7 @@ const portalPlugin = new PluginKey('portalPlugin');
 class ReactNodeView {
   constructor(node, view, getPos, decorations, createPortal, Component) {
     this.dom = document.createElement('div');
+    this.dom.setAttribute('contenteditable', true);
     this.dom.id = uuidv4();
     this.dom.classList.add('portal');