editors/editoria/src/layout/EditorElements.js

@@ -38,6 +38,7 @@ export default css`
 
   .ProseMirror .wax-selection-marker {
     background-color: ${th('colorSelection')};
+    opacity: 0.8;
   }
 
   div[contenteditable='false'] {

wax-prosemirror-components/src/components/textHighlight/TextHighlightComponent.js

-import React from 'react';
-import { v4 as uuidv4 } from 'uuid';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  width: 400px;
-  height: 250px;
-  overflow: hidden;
-  background: #fff;
-`;
-
-const HighlightListComponent = styled.div`
-  height: 200px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  overflow-x: hidden;
-`;
-
-const Highlighter = styled.div`
-  min-width: 25px;
-  height: 25px;
-  display: inline-grid;
-  cursor: pointer;
-  border-radius: 50%;
-  &:hover {
-    background: white;
-  }
-  span {
-    font-size: 16px;
-    text-align: center;
-    padding-top: 3px;
-    color: white;
-  }
-`;
-
-const TextHighlightComponent = ({
-  view = { dispatch, state },
-  item,
-  close,
-}) => {
-  const highlightDropDownOptions = [
-    { name: 'red', value: 'background-color:red' },
-    { name: 'blue', value: 'background-color:blue' },
-    { name: 'yellow', value: 'background-color:yellow' },
-    { name: 'black', value: 'background-color:black' },
-    { name: 'transparent', value: 'background-color:transparent' },
-  ];
-
-  const handleMouseDown = e => {
-    e.preventDefault();
-    item.run(view.state, view.dispatch);
-  };
-
-  const renderList = () => {
-    const lists = [];
-
-    Object.keys(highlightDropDownOptions).forEach(key => {
-      lists.push(
-        <Highlighter
-          onMouseDown={e => handleMouseDown(e)}
-          key={uuidv4()}
-          title={highlightDropDownOptions[key].name}
-          iconName={item.icon}
-        />,
-      );
-    });
-    return <div>{lists}</div>;
-  };
-
-  return (
-    <Wrapper>
-      <HighlightListComponent>{renderList()}</HighlightListComponent>
-    </Wrapper>
-  );
-};
-
-export default TextHighlightComponent;

wax-prosemirror-components/src/components/textHighlight/TextHighlightingTool.js

@@ -11,6 +11,7 @@ const Wrapper = styled.div`
   position: relative;
   z-index: 2;
 
+  button,
   button:hover {
     background: transparent;
   }
@@ -42,28 +43,22 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
   const { icon, title, select } = item;
   const [isOpen, setIsOpen] = useState(false);
 
+  const highlightDropDownOptions = [
+    { name: 'red', value: 'red' },
+    { name: 'Light blue', value: '#add8e6' },
+    { name: 'yellow', value: 'yellow' },
+    { name: 'green', value: '#90EE90' },
+    { name: 'gray', value: '#d3d3d3' },
+    { name: 'orange', value: 'orange' },
+    { name: 'brown', value: 'brown' },
+    { name: 'aquamarine', value: 'aquamarine' },
+    { name: 'remove highlight', value: 'transparent' },
+  ];
+
   const ref = useRef();
-  const {
-    view: { main },
-    activeViewId,
-    activeView,
-  } = useContext(WaxContext);
+  const { activeViewId, activeView } = useContext(WaxContext);
 
   useOnClickOutside(ref, () => setIsOpen(false));
-  let lastSaveColor;
-
-  const highlightDropDownOptions = [
-    { name: 'red', value: 'color:red' },
-    { name: 'blue', value: 'color:blue' },
-    { name: 'yellow', value: 'color:yellow' },
-    { name: 'black', value: 'color:black' },
-    { name: 'green', value: 'color:green' },
-    { name: 'gray', value: 'color:gray' },
-    { name: 'orange', value: 'color:orange' },
-    { name: 'brown', value: 'color:brown' },
-    { name: 'aquamarine', value: 'color:aquamarine' },
-    { name: 'transparent', value: 'color:transparent' },
-  ];
 
   const renderList = () => {
     const lists = [];
@@ -71,35 +66,31 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
     Object.keys(highlightDropDownOptions).forEach(key => {
       lists.push(
         <Highlighter
-          onMouseDown={e => handleMouseDown(e)}
+          onMouseDown={e =>
+            handleMouseDown(e, highlightDropDownOptions[key].value)
+          }
           key={uuidv4()}
           title={highlightDropDownOptions[key].name}
           data-style={highlightDropDownOptions[key].value}
-          style={{ backgroundColor: highlightDropDownOptions[key].name }}
+          style={{ backgroundColor: highlightDropDownOptions[key].value }}
         />,
       );
     });
     return <div>{lists}</div>;
   };
 
-  const handleMouseDown = e => {
+  const handleMouseDown = (e, color) => {
     e.preventDefault();
-    item.run(
-      activeView.state,
-      activeView.dispatch,
-      e.target.getAttribute('style'),
-    );
-
-    lastSaveColor = e.target.getAttribute('style');
-    localStorage.setItem('lastColor', lastSaveColor);
-    const btnBackground = e.target.title;
-    localStorage.setItem('lastBgColor', btnBackground);
+    item.run(activeView.state, activeView.dispatch, color);
+    if (color !== 'transparent') localStorage.setItem('lastBgColor', color);
     setIsOpen(false);
   };
+
   const handleDblClk = () => {
-    const color = localStorage.getItem('lastColor')
-      ? localStorage.getItem('lastColor')
-      : `background-color: ${highlightDropDownOptions[0].name};`;
+    const color = localStorage.getItem('lastBgColor')
+      ? localStorage.getItem('lastBgColor')
+      : highlightDropDownOptions[0].value;
+
     item.run(state, dispatch, color);
   };
 
@@ -115,7 +106,7 @@ const TextHighlightingTool = ({ view: { dispatch, state }, item }) => {
               localStorage.getItem('lastBgColor') != undefined
                 ? localStorage.getItem('lastBgColor')
                 : highlightDropDownOptions[0].name,
-            opacity: isDisabled ? '0.4' : '1',
+            opacity: isDisabled ? '0.6' : '1',
           }}
         >
           <MenuButton

wax-prosemirror-services/src/HighlightService/TextHighlightTool.js

-import { Commands } from 'wax-prosemirror-utilities';
-
 import { injectable } from 'inversify';
-import { deleteSelection,toggleMark } from 'prosemirror-commands';
-import { TextHighlightingTool } from 'wax-prosemirror-components'
+import { TextHighlightingTool } from 'wax-prosemirror-components';
 import { isEmpty } from 'lodash';
-import { render } from 'react-dom';
 import React from 'react';
 import Tools from '../lib/Tools';
 import { v4 as uuidv4 } from 'uuid';
 
 @injectable()
 class TextHighlightTool extends Tools {
+  title = 'Text Highlighter';
+  icon = 'highlight';
+  name = 'TextHighlightTool';
 
-    title ='Text Highlighter';
-    icon ='highlight';
-    name ='TextHighlightTool';
-
-    select = (state, activeViewId,activeView) => {
+  select = (state, activeViewId, activeView) => {
     //  return !activeView.state.selection.empty;
-    return window.getSelection().toString().trim().length == 0 ? false :true;
+    return window.getSelection().toString().trim().length == 0 ? false : true;
+  };
+
+  get run() {
+    return (state, dispatch, color) => {
+      const {
+        selection: { $from, $to },
+      } = state;
+
+      const css = `background: linear-gradient(
+                    to bottom,
+                    transparent 0,
+                    transparent 20%,
+                    ${color} 21%,
+                    ${color} 60%,
+                    transparent 61%,
+                    transparent 100%
+                  )`;
+
+      color === 'transparent;'
+        ? dispatch(
+            state.tr.removeMark(
+              $from.pos,
+              $to.pos,
+              state.schema.marks.highlight,
+            ),
+          )
+        : dispatch(
+            state.tr.addMark(
+              $from.pos,
+              $to.pos,
+              state.schema.marks.highlight.create({ style: css }),
+            ),
+          );
     };
-
-    get run() {
-        return (state, dispatch,color) => {
-          const {
-            selection: { $from, $to },
-          } = state;
-          color == "background-color: transparent;" ? dispatch(state.tr.removeMark($from.pos,$to.pos,state.schema.marks.highlight)) :  dispatch(state.tr.addMark($from.pos,$to.pos,state.schema.marks.highlight.create({ style: color })));
-
-        };
-    }
-
-    renderTool(view) {
-      if (isEmpty(view)) return null;
-      return this._isDisplayed ? (
-      <TextHighlightingTool key={uuidv4()} item={this.toJSON()} view={view}  />
-      ) : null;
-    }
+  }
+
+  renderTool(view) {
+    if (isEmpty(view)) return null;
+    return this._isDisplayed ? (
+      <TextHighlightingTool key={uuidv4()} item={this.toJSON()} view={view} />
+    ) : null;
+  }
 }
 
-export default TextHighlightTool;
\ No newline at end of file
+export default TextHighlightTool;