create custom node

src/containers/LiveEditor/CustomNode.tsx

@@ -0,0 +1,78 @@
+import React, { memo } from "react";
+import { Label, Node, Port, NodeChildProps, NodeProps } from "reaflow";
+import styled from "styled-components";
+
+const StyledNode = styled(Node)`
+  stroke: black;
+  fill: ${({ theme }) => theme.BLACK_PRIMARY};
+  stroke-width: 1;
+`;
+
+const StyledTextWrapper = styled.div`
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledText = styled.pre<{ width: number; height: number }>`
+  width: ${({ width }) => width};
+  height: ${({ height }) => height};
+  color: ${({ theme }) => theme.SILVER};
+`;
+
+const baseLabelStyle = {
+  fill: "transparent",
+  stroke: "transparent",
+  strokeWidth: 0,
+};
+
+const basePortStyle = {
+  fill: "black",
+};
+
+const CustomNode = ({ nodeProps }) => {
+  const { properties: data } = nodeProps;
+  
+  return (
+    <StyledNode
+      label={<Label style={baseLabelStyle} />}
+      port={<Port style={basePortStyle} rx={10} ry={10} />}
+      {...nodeProps}
+    >
+      {(nodeProps: NodeChildProps) => {
+        const { width, height } = nodeProps;
+
+        return (
+          <foreignObject
+            width={width}
+            height={height}
+            x={0} // Relative position from the parent Node component (aligned to top)
+            y={0} // Relative position from the parent Node component (aligned to left)
+            style={{
+              position: "relative",
+              pointerEvents: "none",
+            }}
+          >
+            <StyledTextWrapper>
+              <StyledText width={width} height={height}>
+                {data.text}
+              </StyledText>
+            </StyledTextWrapper>
+          </foreignObject>
+        );
+      }}
+    </StyledNode>
+  );
+};
+
+export const NodeWrapper = (nodeProps: NodeProps) => {
+  return nodeProps.properties?.data?.type ? (
+    <CustomNode nodeProps={nodeProps} />
+  ) : (
+    <Node {...nodeProps} />
+  );
+};

src/containers/LiveEditor/Node.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import { Handle, Position } from "react-flow-renderer";
-import styled from "styled-components";
-
-type Data = { label: string | object };
-
-const StyledWrapper = styled.div<{
-  isArray?: boolean;
-  isElement?: boolean;
-  circle?: boolean;
-}>`
-  background: ${({ theme }) => theme.BLACK_PRIMARY};
-  border: 1px solid ${({ theme }) => theme.BLACK};
-  border-radius: 5px;
-  padding: 16px;
-  color: ${({ theme, isArray, isElement }) =>
-    isArray ? theme.SEAGREEN : isElement && theme.ORANGE};
-  width: ${({ circle }) => (circle ? "20px" : "auto")};
-  height: ${({ circle }) => (circle ? "20px" : "auto")};
-  min-width: ${({ circle }) => !circle && "100px"};
-  max-width: 400px;
-  text-align: ${({ isArray }) => isArray && "center"};
-  border-radius: ${({ circle }) => circle && "50%"};
-`;
-
-const StyledKey = styled.span`
-  color: ${({ theme }) => theme.BLURPLE};
-`;
-
-const StyledLineWrapper = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-export const CustomNodeComponent: React.FC<{ data: Data; id: string }> = ({
-  id,
-  data,
-}) => {
-  const { label: json } = data;
-
-  if (Object.keys(json).length === 0) {
-    return (
-      <StyledWrapper circle>
-        <Handle type="source" position={Position.Left} />
-        <Handle type="target" position={Position.Right} />
-      </StyledWrapper>
-    );
-  }
-
-  if (typeof json === "string") {
-    return (
-      <StyledWrapper isArray>
-        {json}
-        <Handle type="source" position={Position.Left} />
-        <Handle type="target" position={Position.Right} />
-      </StyledWrapper>
-    );
-  }
-
-  if (json instanceof Object) {
-    const keyPairs = Object.entries(json);
-
-    // temporary solution for array items
-    if (Object.keys(json).every((val) => !isNaN(+val))) {
-      return (
-        <StyledWrapper isElement>
-          {Object.values(json).join("")}
-          <Handle type="source" position={Position.Left} />
-          <Handle type="target" position={Position.Right} />
-        </StyledWrapper>
-      );
-    }
-
-    return (
-      <StyledWrapper>
-        {keyPairs.map((entries) => {
-          const isValidValue =
-            typeof entries[1] === "string" || typeof entries[1] === "number";
-
-          return (
-            <StyledLineWrapper key={entries[0]}>
-              <StyledKey>{entries[0]}: </StyledKey>
-              {isValidValue && entries[1]}
-            </StyledLineWrapper>
-          );
-        })}
-
-        <Handle type="source" id={id} position={Position.Left} />
-        <Handle type="target" id={id} position={Position.Right} />
-      </StyledWrapper>
-    );
-  }
-
-  return null;
-};