diff --git a/editors/demo/src/Editoria/layout/EditorElements.js b/editors/demo/src/Editoria/layout/EditorElements.js
index dda5ab306b3dfe4079e3971f93ee0f748a459dfb..7aa3866787d6ad64c7d9aaa06ac3785299998adc 100644
--- a/editors/demo/src/Editoria/layout/EditorElements.js
+++ b/editors/demo/src/Editoria/layout/EditorElements.js
@@ -349,7 +349,7 @@ export default css`
}
.math-node.ProseMirror-selectednode .math-src {
- display: flex;
+ display: inline-flex;
}
.math-node.ProseMirror-selectednode .math-render {
display: none;
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapNodeView.js b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapNodeView.js
index 5b61c652d4a10479b4a70e11ea2a36612212d5e1..53b465989dac5a8417b541a10f64e0a94b8aa538 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapNodeView.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/FillTheGapNodeView.js
@@ -25,4 +25,26 @@ export default class MultipleChoiceNodeView extends AbstractNodeView {
update(node) {
return true;
}
+
+ selectNode() {
+ this.context.view[this.node.attrs.id].focus();
+ }
+
+ stopEvent(event) {
+ console.log(
+ this.context.view[this.node.attrs.id] !== undefined &&
+ event.target !== undefined &&
+ this.context.view[this.node.attrs.id].dom.contains(event.target),
+ );
+
+ return (
+ this.context.view[this.node.attrs.id] !== undefined &&
+ event.target !== undefined &&
+ this.context.view[this.node.attrs.id].dom.contains(event.target)
+ );
+ }
+
+ ignoreMutation() {
+ return true;
+ }
}
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/components/EditorComponent.js b/editors/demo/src/HHMI/FillTheGapQuestionService/components/EditorComponent.js
index 68a2ee3f7f524966063ee8532b3719eddc6d564f..b2998b1efbe769f36669cbc249b66115e08af968 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/components/EditorComponent.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/components/EditorComponent.js
@@ -10,18 +10,19 @@ import { keymap } from 'prosemirror-keymap';
import { baseKeymap } from 'prosemirror-commands';
import { undo, redo } from 'prosemirror-history';
import { WaxContext } from 'wax-prosemirror-core';
-import Placeholder from '../plugins/placeholder';
-const EditorWrapper = styled.div`
- border: none;
- display: flex;
- flex: 2 1 auto;
- justify-content: left;
- margin-right: 15px;
+const EditorWrapper = styled.span`
+ display: inline-flex;
.ProseMirror {
+ border-bottom: 1px solid #145dbf;
+ box-shadow: none;
+ color: #145dbf;
+ display: inline;
+ min-width: 50px;
+ padding: 0px 2px 0px 2px;
white-space: break-spaces;
- width: 100%;
+ width: auto;
word-wrap: break-word;
&:focus {
@@ -46,7 +47,7 @@ const EditorComponent = ({ node, view, getPos }) => {
const editorRef = useRef();
const context = useContext(WaxContext);
- let questionView;
+ let gapView;
const questionId = node.attrs.id;
const isEditable = context.view.main.props.editable(editable => {
return editable;
@@ -71,22 +72,12 @@ const EditorComponent = ({ node, view, getPos }) => {
const plugins = [keymap(createKeyBindings()), ...context.app.getPlugins()];
- // eslint-disable-next-line no-shadow
- const createPlaceholder = placeholder => {
- return Placeholder({
- content: placeholder,
- });
- };
-
- finalPlugins = finalPlugins.concat([
- createPlaceholder('Type your answer'),
- ...plugins,
- ]);
+ finalPlugins = finalPlugins.concat([...plugins]);
const { activeViewId } = context;
useEffect(() => {
- questionView = new EditorView(
+ gapView = new EditorView(
{
mount: editorRef.current,
},
@@ -113,7 +104,7 @@ const EditorComponent = ({ node, view, getPos }) => {
// Kludge to prevent issues due to the fact that the whole
// footnote is node-selected (and thus DOM-selected) when
// the parent editor is focused.
- if (questionView.hasFocus()) questionView.focus();
+ if (gapView.hasFocus()) gapView.focus();
},
},
@@ -126,16 +117,16 @@ const EditorComponent = ({ node, view, getPos }) => {
//Set Each note into Wax's Context
context.updateView(
{
- [questionId]: questionView,
+ [questionId]: gapView,
},
questionId,
);
- if (questionView.hasFocus()) questionView.focus();
+ gapView.focus();
}, []);
const dispatchTransaction = tr => {
- let { state, transactions } = questionView.state.applyTransaction(tr);
- questionView.updateState(state);
+ let { state, transactions } = gapView.state.applyTransaction(tr);
+ gapView.updateState(state);
context.updateView({}, questionId);
if (!tr.getMeta('fromOutside')) {
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/components/GapComponent.js b/editors/demo/src/HHMI/FillTheGapQuestionService/components/GapComponent.js
index 91c6cca117de608612cc38e1b984d4e416608a19..0169b0491882ccbc8539c208a353dafca7f90bad 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/components/GapComponent.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/components/GapComponent.js
@@ -8,5 +8,5 @@ const Gap = styled.span`
`;
export default ({ node, view, getPos }) => {
- return <Gap> Gap</Gap>;
+ return <EditorComponent getPos={getPos} node={node} view={view} />;
};
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/plugins/placeholder.js b/editors/demo/src/HHMI/FillTheGapQuestionService/plugins/placeholder.js
deleted file mode 100644
index de3fd8058b9735f9951aa71c2bc5cb74a75b28a1..0000000000000000000000000000000000000000
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/plugins/placeholder.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
-import { Decoration, DecorationSet } from 'prosemirror-view';
-
-const placeHolderText = new PluginKey('placeHolderText');
-
-export default props => {
- return new Plugin({
- key: placeHolderText,
- props: {
- decorations: state => {
- const decorations = [];
- const decorate = (node, pos) => {
- if (
- node.type.isBlock &&
- node.childCount === 0 &&
- state.doc.content.childCount === 1
- ) {
- decorations.push(
- Decoration.node(pos, pos + node.nodeSize, {
- class: 'empty-node',
- 'data-content': props.content,
- }),
- );
- }
- };
- state.doc.descendants(decorate);
-
- return DecorationSet.create(state.doc, decorations);
- },
- },
- });
-};
diff --git a/editors/demo/src/HHMI/FillTheGapQuestionService/schema/fillTheGapNode.js b/editors/demo/src/HHMI/FillTheGapQuestionService/schema/fillTheGapNode.js
index 26de347d115562e7c8f76baf8b20519f7e7db71b..2f6ddcf858aa2eddbb80462beee136198a3bae7e 100644
--- a/editors/demo/src/HHMI/FillTheGapQuestionService/schema/fillTheGapNode.js
+++ b/editors/demo/src/HHMI/FillTheGapQuestionService/schema/fillTheGapNode.js
@@ -1,8 +1,8 @@
const fillTheGapNode = {
group: 'inline',
- content: 'inline*',
+ content: 'text*',
inline: true,
- atom: true,
+ // atom: true,
attrs: {
id: { default: '' },
class: { default: 'fill-the-gap' },
diff --git a/editors/demo/src/HHMI/layout/EditorElements.js b/editors/demo/src/HHMI/layout/EditorElements.js
index f25b22af6c28beed5b75754732a6acaba702221c..7b9defffbb5d4723420939b806b9059632fc35d5 100644
--- a/editors/demo/src/HHMI/layout/EditorElements.js
+++ b/editors/demo/src/HHMI/layout/EditorElements.js
@@ -364,14 +364,5 @@ export default css`
position: relative;
width: 30px;
}
-
- p {
- bottom: 22px;
- position: relative;
- }
-
- p:last-child {
- margin-bottom: -1em;
- }
}
`;