active Styles

wax-prosemirror-services/src/MultipleDropDownService/CreateDropDownService/CreateDropDown.js

@@ -15,7 +15,7 @@ class CreateDropDown extends Tools {
       const content = Fragment.empty;
       const { tr } = state;
       const createGap = state.config.schema.nodes.multiple_drop_down_option.create(
-        { id: uuidv4() },
+        { id: uuidv4(), options: [] },
         content,
       );
       tr.replaceSelectionWith(createGap);

wax-prosemirror-services/src/MultipleDropDownService/components/DropDownComponent.js

@@ -98,7 +98,7 @@ export default ({ setPosition, position }) => {
     const WaxSurface = activeView.dom.getBoundingClientRect();
     const start = activeView.coordsAtPos(from);
     const left = start.left - WaxSurface.left - 75;
-    const top = start.top - WaxSurface.top + 25;
+    const top = start.top - WaxSurface.top + 30;
     setPosition({ ...position, left, top });
   }, [position.left]);
 

wax-prosemirror-services/src/MultipleDropDownService/components/MultipleDropDownComponent.js

@@ -2,13 +2,29 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import { Icon } from 'wax-prosemirror-components';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+const activeStylesContainer = css`
+  background: #535e76;
+  border-radis: 8px;
+`;
+
+const activeStylesSvg = css`
+  fill: white !important;
+`;
+
+const StyledIconActionContainer = styled.div`
+  display: inline-block;
+  padding: 2px;
+  ${props => props.isActive && activeStylesContainer}
+`;
 
 const StyledIconAction = styled(Icon)`
   height: 24px;
   width: 24px;
-  outline: 1px solid black;
   cursor: pointer;
+
+  ${props => props.isActive && activeStylesSvg}
 `;
 
 export default ({ node, view, getPos }) => {
@@ -30,14 +46,14 @@ export default ({ node, view, getPos }) => {
 
   useEffect(() => {
     setIsActive(false);
-    if (getPos() + 2 === posFrom) {
+    if (getPos() === posFrom) {
       setIsActive(true);
     }
   }, [posFrom]);
 
   return (
-    <>
+    <StyledIconActionContainer isActive={isActive}>
       <StyledIconAction isActive={isActive} name="mulitpleDropDown" />
-    </>
+    </StyledIconActionContainer>
   );
 };