Merge pull request #43 from penicillin0/38/hotreload

wip

.env

@@ -0,0 +1 @@
+INLINE_RUNTIME_CHUNK=false

config-overrides.js

@@ -0,0 +1,16 @@
+/* config-overrides.js */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const CopyPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  webpack: function (config, env) {
+    const copyPlugin = new CopyPlugin({
+      patterns: [
+        { from: 'js/scrapboxCssScript.js', to: 'contentScriptDist.js' },
+      ],
+    });
+    config.plugins.push(copyPlugin);
+    return config;
+  },
+};

js/scrapboxCssScript.js

@@ -1,6 +1,45 @@
 'use strict';
 
-import { getIndentCssRule, indentLineCss } from './cssGenerate.js';
+const getIndentCssRule = (marker, indentNumber, markerColor, coloring) => {
+  let shapeCss = `.c-${indentNumber} + .dot { height: .4em !important; width: .4em !important;`;
+  let colorCss = '';
+  switch (marker) {
+    case '●':
+      colorCss = coloring
+        ? `border-color: ${markerColor} !important;border: solid .1em ${markerColor} !important; background-color: ${markerColor} !important;`
+        : '';
+      break;
+    case '○':
+      colorCss = coloring
+        ? `border-color: black !important; border: solid .1em ${markerColor} !important; background-color: rgba(0,0,0,0) !important;`
+        : `border: solid .1em var(--page-text-color, #555) !important; background-color: rgba(0,0,0,0) !important;`;
+      break;
+    case '■':
+      shapeCss += ` border-radius: 0% !important;`;
+      colorCss = coloring ? `background-color: ${markerColor} !important;` : '';
+      break;
+    case '□':
+      shapeCss += ` border-radius: 0% !important;`;
+      colorCss = coloring
+        ? `border: solid .1em ${markerColor} !important; background-color: rgba(0,0,0,0) !important;`
+        : `border: solid .1em var(--page-text-color, #555) !important; background-color: rgba(0,0,0,0) !important;`;
+      break;
+    default:
+      break;
+  }
+  return `${shapeCss} ${colorCss} }`;
+};
+
+const indentLineCss = [
+  `.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: 43%;
+      margin: -4px 0;
+      border-left: 2px solid #dcdcdc;
+    }`,
+];
 
 const insertIndentCSSRule = (
   scrapboxIndentOptions,

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "INLINE_RUNTIME_CHUNK=false react-scripts build && webpack",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "lint": "eslint . --ext .js,.ts"
   },
@@ -41,7 +41,6 @@
     "react-scripts": "^5.0.0",
     "react-select": "^5.2.1",
     "react-switch": "^6.0.0",
-    "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
@@ -60,11 +59,13 @@
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
+    "copy-webpack-plugin": "^10.2.4",
     "eslint": "^7.11.0",
     "eslint-plugin-react": "^7.27.0",
     "prettier": "^2.4.1",
-    "typescript": "^4.1.2",
-    "webpack-cli": "^4.9.1"
+    "react-app-rewired": "^2.2.1",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.1.2"
   },
   "resolutions": {
     "@types/react": "17.0.2",