diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js index f7c1a4f73e48b232adf540fb31c53291803c896f..1c24aac4ff8f689d07a809cff619f2bb23893f54 100644 --- a/wax-prosemirror-services/src/ImageService/AltComponent.js +++ b/wax-prosemirror-services/src/ImageService/AltComponent.js @@ -2,6 +2,24 @@ import React, { useContext, useLayoutEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { WaxContext } from 'wax-prosemirror-core'; +const StyledInputAlt = styled.input` + background: #e2ebff; + border: none; + box-sizing: border-box; + width: 240px; + min-height: 20px; + padding: 4px; + + &:focus { + outline: none; + } + + &::placeholder { + color: black; + font-weight: bold; + } +`; + export default ({ setPosition, position }) => { const altRef = useRef(null); const [altText, setAltText] = useState(''); @@ -17,32 +35,15 @@ export default ({ setPosition, position }) => { const readOnly = !isEditable; - const StyledInputAlt = styled.input` - background: #e2ebff; - border: none; - box-sizing: border-box; - width: 240px; - min-height: 20px; - padding: 4px; - - &:focus { - outline: none; - } - - &::placeholder { - color: black; - font-weight: bold; - } - `; - useLayoutEffect(() => { - const WaxSurface = activeView.dom.getBoundingClientRect(); + const WaxSurface = main.dom.getBoundingClientRect(); const { selection } = activeView.state; if (!selection || !selection.node || !selection.node.attrs.id) return; const imageId = selection.node.attrs.id; const image = document.querySelector(`[data-id='${imageId}']`); const figCaption = document.getElementsByTagName('figcaption')[0]; + if (!image) return; const imagePosition = image.getBoundingClientRect(); const figCaptionPosition = figCaption.getBoundingClientRect().height - 5; const left = imagePosition.left - WaxSurface.left; diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionEditorComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionEditorComponent.js index 9ee99c9f717f464bb97e7ca76098b503cfe703c1..bd653c9b74ade6fbef96b0e0123c896d6cee71a7 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionEditorComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/QuestionEditorComponent.js @@ -6,7 +6,7 @@ import { StepMap } from 'prosemirror-transform'; import { keymap } from 'prosemirror-keymap'; import { baseKeymap, chainCommands } from 'prosemirror-commands'; import { undo, redo } from 'prosemirror-history'; -import { WaxContext } from 'wax-prosemirror-core'; +import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core'; import { splitListItem, liftListItem, @@ -54,6 +54,9 @@ const EditorWrapper = styled.div` } } `; + +let WaxOverlays = () => true; + const QuestionEditorComponent = ({ node, view, getPos }) => { const editorRef = useRef(); @@ -130,6 +133,7 @@ const QuestionEditorComponent = ({ node, view, getPos }) => { ]); useEffect(() => { + WaxOverlays = ComponentPlugin('waxOverlays'); questionView = new EditorView( { mount: editorRef.current, @@ -206,6 +210,7 @@ const QuestionEditorComponent = ({ node, view, getPos }) => { return ( <EditorWrapper> <div ref={editorRef} /> + <WaxOverlays activeViewId={questionId} /> </EditorWrapper> ); };