Merge pull request #7 from penicillin0/feature-5/indent-color

インデントをわかりやすくする機能

Author: penicillin0

js/scrapboxCssScript.js

@@ -64,19 +64,69 @@ const insertIndentCSSRule = (scrapboxIndentOptions) => {
   });
 };
 
-const storageAttachment = () => {
+const indentColorCSS = [
+  `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) { position: relative; }`,
+  `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
+      content: " ";
+      position: absolute;
+      left: 44%;
+      top: -24%;
+      border-left: 0.2rem solid #dcdcdc;
+    }`,
+  `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)):nth-child(n) { background-color: #f5f5f5 }`,
+];
+
+const insertIndentColorCSSRule = (isColoring) => {
+  // delete existing rules
+  const cssRules = document.styleSheets[0].cssRules;
+  const cssRulesNum = cssRules.length;
+  for (let i = cssRulesNum - 1; i >= 0; i--) {
+    const cssRule = cssRules[i];
+    const cssSelector = cssRule.selectorText;
+
+    if (cssSelector === undefined) continue;
+
+    if (
+      cssSelector.match(
+        /^\.app:not\(\.presentation\) .indent-mark .char-index:not\(:nth-last-child\(1\)\):not\(:nth-last-child\(2\)\)*/
+      )
+    ) {
+      document.styleSheets[0].deleteRule(i);
+    }
+  }
+
+  // insert new rules
+  if (isColoring) {
+    indentColorCSS.map((css) => {
+      document.styleSheets[0].insertRule(css);
+    });
+  }
+};
+
+const makerAttachment = () => {
   chrome.storage.local.get('scrapboxIndentOption', (result) => {
     const scrapboxIndentOptions = result.scrapboxIndentOption;
     insertIndentCSSRule(scrapboxIndentOptions);
   });
 };
 
+const coloringAttachment = () => {
+  chrome.storage.local.get('scrapboxIndentColoring', (result) => {
+    const isColoring = result.scrapboxIndentColoring;
+    insertIndentColorCSSRule(isColoring);
+  });
+};
+
 // update
 chrome.runtime.onMessage.addListener((request) => {
   if (request === 'scrapbox_list_maker') {
-    storageAttachment();
+    makerAttachment();
+  }
+  if (request === 'scrapbox_indent_coloring') {
+    coloringAttachment();
   }
 });
 
 // initialize
-storageAttachment();
+makerAttachment();
+coloringAttachment();

package.json

@@ -33,6 +33,7 @@
     "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
     "react-select": "^5.2.1",
+    "react-switch": "^6.0.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },

src/components/Console.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Select, { ActionMeta, SingleValue } from 'react-select';
+import Switch from 'react-switch';
 import styled from 'styled-components';
 
 const options = [
@@ -25,6 +26,7 @@ export const Console: React.FC<Props> = () => {
       label: string;
     }[]
   >(initialState);
+  const [indentColoring, setIndentColoring] = useState<boolean>(false);
 
   useEffect(() => {
     chrome.storage.local.get('scrapboxIndentOption', (result) => {
@@ -37,8 +39,34 @@ export const Console: React.FC<Props> = () => {
         setIndentOptions(scrapboxIndentOption);
       }
     });
+
+    chrome.storage.local.get('scrapboxIndentColoring', (result) => {
+      const scrapboxIndentColoring = result.scrapboxIndentColoring;
+
+      if (!scrapboxIndentColoring) {
+        chrome.storage.local.set({ scrapboxIndentColoring: false });
+        setIndentColoring(false);
+      } else {
+        setIndentColoring(scrapboxIndentColoring);
+      }
+    });
   }, []);
 
+  const handleIndentColoringChange = (checked: boolean) => {
+    chrome.storage.local.set({ scrapboxIndentColoring: checked });
+    setIndentColoring(checked);
+
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      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_coloring');
+        }
+      });
+    });
+  };
+
   const handleOnChange = (
     newValue: SingleValue<{
       value: string;
@@ -67,7 +95,6 @@ export const Console: React.FC<Props> = () => {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       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_list_maker');
@@ -78,7 +105,24 @@ export const Console: React.FC<Props> = () => {
 
   return (
     <MainContainer>
-      <Title>Select Favorite List Maker</Title>
+      <TitleWrapper>
+        <Title>Select Favorite List Maker</Title>
+        <SwitchLabel>
+          <Switch
+            checked={indentColoring}
+            onChange={handleIndentColoringChange}
+            onColor="#00b428"
+            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
+            height={16}
+            width={30}
+            handleDiameter={18}
+            checkedIcon={false}
+            uncheckedIcon={false}
+          />
+          <Spacer width={6} />
+          <span>Indent Visible Line</span>
+        </SwitchLabel>
+      </TitleWrapper>
       <IndentContainer>
         {indentOptions.map((indentOption) => {
           const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
@@ -102,7 +146,6 @@ export const Console: React.FC<Props> = () => {
           );
         })}
       </IndentContainer>
-
       <DemonstrationContainer>
         <Demonstration>
           <Title>Demonstration</Title>
@@ -134,12 +177,27 @@ const MainContainer = styled.div`
   padding-bottom: 8px;
 `;
 
+const Spacer = styled.div<{ width: number }>`
+  width: ${(props) => props.width}px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 const Title = styled.div`
   font-size: 16px;
   text-align: left;
   margin: 12px 10px;
 `;
 
+const SwitchLabel = styled.label`
+  margin-left: 8px;
+  display: flex;
+  align-items: center;
+`;
+
 const Label = styled.div`
   font-size: 14px;
   margin-left: 12px;

yarn.lock

@@ -9543,6 +9543,13 @@ react-select@*, react-select@^5.2.1:
     prop-types "^15.6.0"
     react-transition-group "^4.3.0"
 
+react-switch@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
+  integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-transition-group@^4.3.0:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"