From 8c9db5dfcc7524ff5292189acf4e0450292b0084 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 26 Apr 2022 14:02:57 +0300
Subject: [PATCH] overlay
---
.../CreateDropDownService/CreateDropDown.js | 41 +++++++++++++++++--
.../CreateDropDownService.js | 21 ++++++++--
.../components/ContainerEditor.js | 9 +++-
.../components/DropDownComponent.js | 28 +++++++++++++
.../MultipleDropDownContainerComponent.js | 10 ++---
.../schema/multipleDropDownOptionNode.js | 9 ++--
.../src/NoteService/Editor.js | 1 -
7 files changed, 101 insertions(+), 18 deletions(-)
create mode 100644 wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
index e11177d2e..b5cdc6750 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js
@@ -1,5 +1,7 @@
import { injectable } from 'inversify';
-import { Fragment } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { AddMarkStep } from 'prosemirror-transform';
+
import { v4 as uuidv4 } from 'uuid';
import Tools from '../../lib/Tools';
@@ -10,10 +12,43 @@ class CreateDropDown extends Tools {
name = 'Create_Drop_Down';
get run() {
- return (state, dispatch) => {};
+ return (state, dispatch) => {
+ const {
+ tr,
+ selection: { from, to },
+ } = state;
+
+ console.log(tr);
+ tr.insertText('hi');
+
+ const selectionFrom = new TextSelection(state.doc.resolve(from));
+
+ const selectionTo = new TextSelection(state.doc.resolve(to + 2));
+
+ console.log(selectionFrom.$anchor, selectionTo.$head);
+
+ state.tr.setSelection(
+ TextSelection.between(selectionFrom.$anchor, selectionTo.$head),
+ );
+
+ tr.step(
+ new AddMarkStep(
+ from,
+ to + 2,
+ state.config.schema.marks.multiple_drop_down_option.create({
+ id: uuidv4(),
+ class: 'multiple-drop-down-option',
+ }),
+ ),
+ );
+
+ dispatch(tr);
+ };
}
- select = (state, activeViewId, activeView) => {};
+ select = (state, activeViewId, activeView) => {
+ return true;
+ };
get active() {
return state => {};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js
index bbb0fcd2f..e7b9367f2 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDownService.js
@@ -3,15 +3,30 @@ import CreateDropDown from './CreateDropDown';
import multipleDropDownOptionNode from '../schema/multipleDropDownOptionNode';
import MultipleDropDownNodeView from './MultipleDropDownNodeView';
import MultipleDropDownComponent from '../components/MultipleDropDownComponent';
+import DropDownComponent from '../components/DropDownComponent';
class CreateDropDownService extends Service {
+ name = 'CreateDropDownService';
+
+ boot() {
+ const createOverlay = this.container.get('CreateOverlay');
+ createOverlay(
+ DropDownComponent,
+ {},
+ {
+ markType: 'multiple_drop_down_option',
+ followCursor: true,
+ selection: false,
+ },
+ );
+ }
+
register() {
- const createNode = this.container.get('CreateNode');
+ const CreateMark = this.container.get('CreateMark');
const addPortal = this.container.get('AddPortal');
-
this.container.bind('CreateDropDown').to(CreateDropDown);
- createNode({
+ CreateMark({
multiple_drop_down_option: multipleDropDownOptionNode,
});
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js b/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js
index 12e97db7c..38df6616f 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/ContainerEditor.js
@@ -8,9 +8,11 @@ import { StepMap } from 'prosemirror-transform';
import { keymap } from 'prosemirror-keymap';
import { baseKeymap } from 'prosemirror-commands';
import { undo, redo } from 'prosemirror-history';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, ComponentPlugin } from 'wax-prosemirror-core';
const EditorWrapper = styled.div`
+ position: relative;
+
> .ProseMirror {
padding: 5px;
&:focus {
@@ -31,6 +33,8 @@ const EditorWrapper = styled.div`
}
`;
+let WaxOverlays = () => true;
+
const ContainerEditor = ({ node, view, getPos }) => {
const editorRef = useRef();
@@ -68,6 +72,8 @@ const ContainerEditor = ({ node, view, getPos }) => {
finalPlugins = finalPlugins.concat([...plugins]);
useEffect(() => {
+ WaxOverlays = ComponentPlugin('waxOverlays');
+
multipleDropDownContainerNodeView = new EditorView(
{
mount: editorRef.current,
@@ -148,6 +154,7 @@ const ContainerEditor = ({ node, view, getPos }) => {
return (
<EditorWrapper>
<div ref={editorRef} />
+ <WaxOverlays activeViewId={questionId} group="questions" />
</EditorWrapper>
);
};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
new file mode 100644
index 000000000..f2ced9463
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js
@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+
+const DropDownComponent = styled.div`
+ width: 150px;
+ height: 100px;
+ background: white;
+ border: 1px solid green;
+`;
+
+export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ pmViews: { main },
+ } = context;
+
+ const customProps = main.props.customValues;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const readOnly = !isEditable;
+
+ return <DropDownComponent>Created DropDown</DropDownComponent>;
+};
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
index 34584b560..d6725bb7d 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownContainerComponent.js
@@ -5,11 +5,6 @@ import styled from 'styled-components';
import ContainerEditor from './ContainerEditor';
import FeedbackComponent from './FeedbackComponent';
-const MultipleDropDownpContainer = styled.div`
- border: 3px solid #f5f5f7;
- margin-bottom: 30px;
-`;
-
const MultipleDropDownpWrapper = styled.div`
margin-bottom: ;
margin: 0px 38px 15px 38px;
@@ -17,6 +12,11 @@ const MultipleDropDownpWrapper = styled.div`
margin-top: 10px;
`;
+const MultipleDropDownpContainer = styled.div`
+ border: 3px solid #f5f5f7;
+ margin-bottom: 30px;
+`;
+
export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
const {
diff --git a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
index 5002ec17d..8a3df4538 100644
--- a/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
+++ b/wax-prosemirror-services/src/MultipleDropDownService/schema/multipleDropDownOptionNode.js
@@ -18,8 +18,8 @@ const multipleDropDownOptionNode = {
return {
id: dom.getAttribute('id'),
class: dom.getAttribute('class'),
- isfirst: JSON.parse(dom.getAttribute('isfirst').toLowerCase()),
- answer: JSON.parse(dom.getAttribute('answer').toLowerCase()),
+ // isfirst: JSON.parse(dom.getAttribute('isfirst').toLowerCase()),
+ // answer: JSON.parse(dom.getAttribute('answer').toLowerCase()),
};
},
},
@@ -30,9 +30,8 @@ const multipleDropDownOptionNode = {
{
id: node.attrs.id,
class: node.attrs.class,
- isfirst: node.attrs.isfirst,
- answer: JSON.stringify(node.attrs.answer),
- feedback: node.attrs.feedback,
+ // isfirst: node.attrs.isfirst,
+ // answer: JSON.stringify(node.attrs.answer),
},
0,
];
diff --git a/wax-prosemirror-services/src/NoteService/Editor.js b/wax-prosemirror-services/src/NoteService/Editor.js
index 38ae9a305..3a43864b6 100644
--- a/wax-prosemirror-services/src/NoteService/Editor.js
+++ b/wax-prosemirror-services/src/NoteService/Editor.js
@@ -29,7 +29,6 @@ export default ({ node, view }) => {
let typing = false;
const {
- activeViewId,
pmViews,
pmViews: { main },
} = context;
--
GitLab