diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js index 45382705d0e03614051b20fbd1dc7eb870a83d23..0e064d8ab70d29131e3b8d27c7fa980af42752a9 100644 --- a/wax-prosemirror-core/src/WaxView.js +++ b/wax-prosemirror-core/src/WaxView.js @@ -102,12 +102,13 @@ const WaxView = forwardRef((props, ref) => { 'main', ); if (debug) applyDevTools(view); - if (autoFocus && view) - setTimeout(() => { + setTimeout(() => { + if (autoFocus && view) { view.focus(); view.state.tr.insertText('', 0); view.dispatch(view.state.tr); - }, 500); + } + }, 500); return () => view.destroy(); } diff --git a/wax-prosemirror-schema/src/nodes/imageNode.js b/wax-prosemirror-schema/src/nodes/imageNode.js index 4ef56bad8dca0db3bb4214b97fee73ec6c3c2151..6eb0f35f70106f32204b41333703546413675e5f 100644 --- a/wax-prosemirror-schema/src/nodes/imageNode.js +++ b/wax-prosemirror-schema/src/nodes/imageNode.js @@ -4,7 +4,7 @@ const image = { attrs: { id: { default: '' }, src: {}, - alt: { default: null }, + alt: { default: '' }, title: { default: null }, // track: { default: [] }, fileid: { default: null }, diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js index 1523df1b54fdfd69e449d03daafb516328819bdc..1dc2aebf532f9ea0be16c2a23a0706465d4303f1 100644 --- a/wax-prosemirror-services/src/ImageService/AltComponent.js +++ b/wax-prosemirror-services/src/ImageService/AltComponent.js @@ -1,9 +1,11 @@ /* eslint-disable react/prop-types */ -import React, { useContext, useLayoutEffect } from 'react'; +import React, { useContext, useLayoutEffect, useRef, useState } from 'react'; import styled from 'styled-components'; import { WaxContext } from 'wax-prosemirror-core'; export default ({ setPosition, position }) => { + const altRef = useRef(null); + const [altText, setAltText] = useState(''); const context = useContext(WaxContext); const { activeView, @@ -45,10 +47,36 @@ export default ({ setPosition, position }) => { const left = imagePosition.left - WaxSurface.left; const top = imagePosition.bottom - WaxSurface.top - 22; setPosition({ ...position, left, top }); - console.log(position); - }, [position.left]); + }, [position.left, position.top]); + + const altTextOnChange = () => { + const { selection } = activeView.state; + setAltText(altRef.current.value); + activeView.dispatch( + activeView.state.tr.setNodeMarkup(selection.from, undefined, { + ...selection.node.attrs, + alt: altRef.current.value, + }), + ); + }; if (!readOnly) { - return <StyledInputAlt placeholder="Alt Text" type="text" />; + return ( + <StyledInputAlt + autoFocus="autoFocus" + key="alt" + onChange={altTextOnChange} + placeholder="Alt Text" + ref={altRef} + type="text" + value={ + activeView.state.selection && + activeView.state.selection.node && + activeView.state.selection.node.attrs.alt !== '' + ? activeView.state.selection.node.attrs.alt + : altText + } + /> + ); } }; diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js index 5ff3ac5cb90ed2cb16f549f45f73e022791f4ddf..9de6f0ca48ca74626a494bb2448b048e05fccdd4 100644 --- a/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js +++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/components/FeedbackComponent.js @@ -33,7 +33,6 @@ const FeedBackInput = styled.input` export default ({ node, view, getPos, readOnly }) => { const context = useContext(WaxContext); const { - app, pmViews: { main }, } = context; @@ -98,12 +97,12 @@ export default ({ node, view, getPos, readOnly }) => { <FeedBack> <FeedBackLabel>Feedback</FeedBackLabel> <FeedBackInput - readOnly={readOnly} onBlur={saveFeedBack} onChange={feedBackInput} onFocus={onFocus} onKeyDown={handleKeyDown} placeholder="Insert feedback" + readOnly={readOnly} ref={feedBackRef} type="text" value={feedBack}