From 84828203c0be7f6805d5dd2f9e947430af31e8a1 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 29 Jul 2021 13:30:14 +0300
Subject: [PATCH] add placeholder and alter schema
---
.../components/EditorComponent.js | 53 +++++++++++++------
.../plugins/placeholder.js | 32 +++++++++++
.../schema/multipleChoiceNode.js | 2 +-
3 files changed, 69 insertions(+), 18 deletions(-)
create mode 100644 editors/demo/src/HHMI/MultipleChoiceQuestionService/plugins/placeholder.js
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
index e8c4dd509..a2a4b445f 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -8,6 +8,7 @@ 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;
@@ -49,6 +50,37 @@ const EditorComponent = ({ node, view, getPos }) => {
return editable;
});
+ let finalPlugins = [];
+
+ const createKeyBindings = () => {
+ const keys = getKeys();
+ Object.keys(baseKeymap).forEach(key => {
+ keys[key] = baseKeymap[key];
+ });
+ return keys;
+ };
+
+ const getKeys = () => {
+ return {
+ 'Mod-z': () => undo(view.state, view.dispatch),
+ 'Mod-y': () => redo(view.state, view.dispatch),
+ };
+ };
+
+ 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,
+ ]);
+
const {
view: { main },
activeViewId,
@@ -59,12 +91,14 @@ const EditorComponent = ({ node, view, getPos }) => {
useEffect(() => {
questionView = new EditorView(
- { mount: editorRef.current },
+ {
+ mount: editorRef.current,
+ },
{
editable: () => isEditable,
state: EditorState.create({
doc: node,
- plugins: [keymap(createKeyBindings()), ...context.app.getPlugins()],
+ plugins: finalPlugins,
}),
// This is the magic part
dispatchTransaction,
@@ -124,21 +158,6 @@ const EditorComponent = ({ node, view, getPos }) => {
}
};
- const createKeyBindings = () => {
- const keys = getKeys();
- Object.keys(baseKeymap).forEach(key => {
- keys[key] = baseKeymap[key];
- });
- return keys;
- };
-
- const getKeys = () => {
- return {
- 'Mod-z': () => undo(view.state, view.dispatch),
- 'Mod-y': () => redo(view.state, view.dispatch),
- };
- };
-
return (
<EditorWrapper>
<div ref={editorRef} />
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/plugins/placeholder.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/plugins/placeholder.js
new file mode 100644
index 000000000..de3fd8058
--- /dev/null
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/plugins/placeholder.js
@@ -0,0 +1,32 @@
+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/MultipleChoiceQuestionService/schema/multipleChoiceNode.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
index ad3a371eb..adfd3e60e 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/schema/multipleChoiceNode.js
@@ -1,6 +1,6 @@
const multipleChoiceNode = {
group: 'inline',
- content: 'inline*',
+ content: 'block*',
inline: true,
// atom: true,
attrs: {
--
GitLab