From 45b795a5857dc208717ecca56283e6e51309307e Mon Sep 17 00:00:00 2001
From: Giannis kopanas <jkopanas@gmail.com>
Date: Fri, 28 May 2021 21:05:01 +0300
Subject: [PATCH] fix(core): portals node id
---
.../components/EditorComponent.js | 1 +
wax-prosemirror-core/src/PortalContext.js | 16 ++---
.../components/PortalComponent.js | 58 ++++++++-----------
3 files changed, 32 insertions(+), 43 deletions(-)
diff --git a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
index 4cec8c470..6ef4e680d 100644
--- a/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
+++ b/editors/demo/src/HHMI/MultipleChoiceQuestionService/components/EditorComponent.js
@@ -20,6 +20,7 @@ const EditorComponent = ({ node, view, getPos }) => {
});
if (context.activeViewId === node.attrs.id) {
+ console.log(node.attrs.id, "matched")
}
useEffect(() => {
diff --git a/wax-prosemirror-core/src/PortalContext.js b/wax-prosemirror-core/src/PortalContext.js
index 4a8f32447..ce92373a5 100644
--- a/wax-prosemirror-core/src/PortalContext.js
+++ b/wax-prosemirror-core/src/PortalContext.js
@@ -10,14 +10,6 @@ export const PortalContext = React.createContext({
export default props => {
const [portal, setPortal] = useState({
- element: {},
- component: {},
- node: {},
- view: {},
- id: null,
- getPos: () => {},
- decorations: [],
- context: {},
createPortal: (
element,
component,
@@ -28,8 +20,7 @@ export default props => {
context,
) => {
setTimeout(() => {
- setPortal({
- ...portal,
+ portal.portals.push({
id: uuidv4(),
element,
component,
@@ -39,8 +30,13 @@ export default props => {
decorations,
context,
});
+ setPortal({
+ createPortal: portal.createPortal,
+ portals: [...portal.portals],
+ });
});
},
+ portals: [],
});
return (
diff --git a/wax-prosemirror-services/src/PortalService/components/PortalComponent.js b/wax-prosemirror-services/src/PortalService/components/PortalComponent.js
index 520c5d391..3f3cf8813 100644
--- a/wax-prosemirror-services/src/PortalService/components/PortalComponent.js
+++ b/wax-prosemirror-services/src/PortalService/components/PortalComponent.js
@@ -1,45 +1,37 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
import { PortalContext } from 'wax-prosemirror-core';
import ReactDOM from 'react-dom';
-import { isEmpty } from 'lodash';
+// import { isEmpty } from 'lodash';
export default () => {
- const {
- element,
- component,
- node,
- view,
- getPos,
- decorations,
- id,
- } = useContext(PortalContext);
-
- const [portals, setPortals] = useState([]);
-
- useEffect(() => {
- if (!isEmpty(element)) {
- portals.push({ dom: element, component, active: true, id });
- setPortals([...portals]);
- }
- }, [element]);
+ const { portals } = useContext(PortalContext);
return (
<>
{portals.length > 0 &&
- // eslint-disable-next-line no-shadow
- portals.map(({ dom, component: Component, id }) => {
- return ReactDOM.createPortal(
- <Component
- key={id}
- decorations={decorations}
- getPos={getPos}
- node={node}
- view={view}
- />,
- dom,
+ portals.map(
+ ({
+ element,
+ component: Component,
id,
- );
- })}
+ decorations,
+ node,
+ view,
+ getPos,
+ }) => {
+ return ReactDOM.createPortal(
+ <Component
+ decorations={decorations}
+ getPos={getPos}
+ key={id}
+ node={node}
+ view={view}
+ />,
+ element,
+ id,
+ );
+ },
+ )}
</>
);
};
--
GitLab