diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js index bff7df91482165966463247f86ccfdcbaa84f75d..246b1bab0ef10a27552dfe89ced9706a2796aab2 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/MultipleChoiceQuestion.js +++ b/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() }, diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js index 1e83da5cab3255ca32f800422952787545157c76..bcafbd987da3fbe34004139c1ebc0ebc96ff59f4 100644 --- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js +++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/TestComponent.js @@ -1,5 +1,5 @@ /* 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}</>; }; diff --git a/wax-prosemirror-services/src/PortalService/components/TestComponent.js b/wax-prosemirror-services/src/PortalService/components/TestComponent.js deleted file mode 100644 index e8d820a895fcc2cec7cc3c505cd91e8cd68fd587..0000000000000000000000000000000000000000 --- a/wax-prosemirror-services/src/PortalService/components/TestComponent.js +++ /dev/null @@ -1,21 +0,0 @@ -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>; -}; diff --git a/wax-prosemirror-services/src/PortalService/portalPlugin.js b/wax-prosemirror-services/src/PortalService/portalPlugin.js index c55828fd831e4bd1ed6066bc55a541e865cda88c..a030dc464b887f0eec522da41ed91d1170d24034 100644 --- a/wax-prosemirror-services/src/PortalService/portalPlugin.js +++ b/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');