demo indent line color change

Author: penicillin0

package.json

@@ -29,8 +29,10 @@
   },
   "dependencies": {
     "react": "^17.0.2",
+    "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
+    "react-outside-click-handler": "^1.3.0",
     "react-scripts": "4.0.3",
     "react-select": "^5.2.1",
     "react-switch": "^6.0.0",
@@ -45,7 +47,9 @@
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
+    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.0",
+    "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-select": "^5.0.1",
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.3.1",

src/components/Console.tsx

@@ -17,6 +17,7 @@ export const Console: React.FC<Props> = () => {
   const [indentOptions, setIndentOptions] =
     useState<IndentOptionsType>(initialState);
   const [indentLining, setIndentLining] = useState<boolean>(false);
+  const [indentLiningColor, setIndentLiningColor] = useState<string>('#dcdcdc');
 
   useEffect(() => {
     chrome.storage.local.get('scrapboxIndentOption', (result) => {
@@ -40,6 +41,17 @@ export const Console: React.FC<Props> = () => {
         setIndentLining(scrapboxIndentLining);
       }
     });
+
+    chrome.storage.local.get('scrapboxIndentLiningColor', (result) => {
+      const scrapboxIndentLiningColor = result.scrapboxIndentLiningColor;
+
+      if (!scrapboxIndentLiningColor) {
+        chrome.storage.local.set({ scrapboxIndentLiningColor: '#dcdcdc' });
+        setIndentLiningColor('#dcdcdc');
+      } else {
+        setIndentLiningColor(scrapboxIndentLiningColor);
+      }
+    });
   }, []);
 
   const handleIndentLiningChange = (checked: boolean) => {
@@ -64,8 +76,13 @@ export const Console: React.FC<Props> = () => {
         setIndentOptions={setIndentOptions}
         indentLining={indentLining}
         handleIndentLiningChange={handleIndentLiningChange}
+        setIndentLiningColor={setIndentLiningColor}
+      />
+      <Demonstration
+        hasLine={indentLining}
+        indentOptions={indentOptions}
+        indentLiningColor={indentLiningColor}
       />
-      <Demonstration hasLine={indentLining} indentOptions={indentOptions} />
     </MainContainer>
   );
 };

src/components/Demonstration.tsx

@@ -5,6 +5,7 @@ import { IndentOptionsType } from '../utils/types';
 type Props = {
   hasLine: boolean;
   indentOptions: IndentOptionsType;
+  indentLiningColor: string;
 };
 
 export const Demonstration: React.FC<Props> = (props) => {
@@ -21,8 +22,12 @@ export const Demonstration: React.FC<Props> = (props) => {
                   {[...Array(spaceNum)].map((j) => {
                     return (
                       <VerticalLineIndentContainer key={j}>
-                        {props.hasLine && <VerticalLine />}
-                        <Indent hasLine={props.hasLine} />
+                        {props.hasLine && (
+                          <VerticalLine
+                            indentLiningColor={props.indentLiningColor}
+                          />
+                        )}
+                        <Indent />
                       </VerticalLineIndentContainer>
                     );
                   })}
@@ -74,16 +79,16 @@ const VerticalLineIndentContainer = styled.div`
   position: relative;
 `;
 
-const VerticalLine = styled.div`
+const VerticalLine = styled.div<{ indentLiningColor: string }>`
   width: 1px;
   height: 23px;
   position: absolute;
   top: 0;
   left: 45%;
-  background-color: #dcdcdc;
+  background-color: ${(props) => props.indentLiningColor};
 `;
 
-const Indent = styled.div<{ hasLine: boolean }>`
+const Indent = styled.div`
   width: 24px;
   height: 23px;
 `;

src/components/MakerConsole.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { ColorResult, TwitterPicker } from 'react-color';
 import { IconContext } from 'react-icons';
 import { MdOutlineColorLens } from 'react-icons/md';
+import OutsideClickHandler from 'react-outside-click-handler';
 import Select, { ActionMeta, SingleValue } from 'react-select';
 import Switch from 'react-switch';
 import styled from 'styled-components';
@@ -18,9 +20,11 @@ type Props = {
   setIndentOptions: React.Dispatch<React.SetStateAction<IndentOptionsType>>;
   indentLining: boolean;
   handleIndentLiningChange: (checked: boolean) => void;
+  setIndentLiningColor: (color: string) => void;
 };
 
 export const MakerConsole: React.FC<Props> = (props) => {
+  const [pickerOpen, setPickerOpen] = React.useState(false);
   const handleOnChange = (
     newValue: SingleValue<{
       value: string;
@@ -57,6 +61,26 @@ export const MakerConsole: React.FC<Props> = (props) => {
     });
   };
 
+  const handlePickerOpen = () => {
+    setPickerOpen(true);
+  };
+
+  const handleColorChange = ({ hex }: ColorResult) => {
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      chrome.storage.local.set({ scrapboxIndentLineColor: hex });
+
+      tabs.forEach((tab) => {
+        if (tab.url === undefined || tab.id === undefined) return;
+        const url = new URL(tab.url);
+        if (url.hostname === 'scrapbox.io') {
+          chrome.tabs.sendMessage(tab.id, 'scrapbox_indent_lining_color');
+        }
+      });
+    });
+
+    props.setIndentLiningColor(hex);
+  };
+
   return (
     <>
       <TitleWrapper>
@@ -79,9 +103,23 @@ export const MakerConsole: React.FC<Props> = (props) => {
         <IconContext.Provider
           value={{ size: '20px', style: { padding: '2px' } }}
         >
-          <ColorLens />
+          <ColorLens onClick={handlePickerOpen} />
         </IconContext.Provider>
       </TitleWrapper>
+      {pickerOpen && (
+        <OutsideClickHandler
+          onOutsideClick={() => {
+            setPickerOpen(false);
+          }}
+        >
+          <TwitterPickerWrapper>
+            <TwitterPicker
+              triangle="top-right"
+              onChangeComplete={handleColorChange}
+            />
+          </TwitterPickerWrapper>
+        </OutsideClickHandler>
+      )}
       <IndentContainer>
         {props.indentOptions.map((indentOption) => {
           const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
@@ -109,6 +147,13 @@ export const MakerConsole: React.FC<Props> = (props) => {
   );
 };
 
+const TwitterPickerWrapper = styled.div`
+  position: absolute;
+  top: 114px;
+  right: 10px;
+  z-index: 1;
+`;
+
 const TitleWrapper = styled.div`
   display: flex;
   align-items: center;