- {/* Always render Editor to avoid losing content state */}
-
-
-
- {/* Only render Preview when necessary to avoid re-calculating the HTML */}
- {props.prefs.previewVisible && (
-
- )}
-
+ {/* Always render Editor to avoid losing content state */}
+
+
+
+ {/* Only render Preview when necessary to avoid re-calculating the HTML */}
+ {props.prefs.previewVisible && (
+
+ )}
+
-
- {/* It is actually ok to render Toolbar when editor is null (not
- initialized). However, most actions in Toolbar depends on the
- editor so it's simpler to just check for null here once */}
- {editor.value !== null && (
-
-
-
- )}
-
diff --git a/src/app/theme/inject.tsx b/src/app/theme/inject.tsx
index f100fe2..e4e2af3 100644
--- a/src/app/theme/inject.tsx
+++ b/src/app/theme/inject.tsx
@@ -1,8 +1,8 @@
-import Color from "color";
+import * as Color from "color";
import { ThemeColors, ThemeDetail, ThemeName, THEME_DETAILS } from "./theme";
interface Props {
- theme: ThemeName;
+ theme: ThemeName;
}
const getOthers = ({ scheme }: ThemeDetail): string => `
@@ -11,24 +11,24 @@ const getOthers = ({ scheme }: ThemeDetail): string => `
`;
const getColors = ({ colors }: ThemeDetail): string => {
- const variables: string[] = [];
- Object.keys(colors).forEach((key) => {
- const color = colors[key as keyof ThemeColors] as Color;
- variables.push(`--${key}-color: ${color.hex()};`);
- const rgb = `${color.red()}, ${color.green()}, ${color.blue()}`;
- variables.push(`--${key}-color-rgb: ${rgb};`);
- });
- return variables.join("\n");
+ const variables: string[] = [];
+ Object.keys(colors).forEach((key) => {
+ const color = colors[key as keyof ThemeColors] as Color;
+ variables.push(`--${key}-color: ${color.hex()};`);
+ const rgb = `${color.red()}, ${color.green()}, ${color.blue()}`;
+ variables.push(`--${key}-color-rgb: ${rgb};`);
+ });
+ return variables.join("\n");
};
const getCss = (name: ThemeName): string => {
- const detail = THEME_DETAILS[name];
- return `:root {
+ const detail = THEME_DETAILS[name];
+ return `:root {
${getColors(detail)}
${getOthers(detail)}
}`;
};
export const ThemeInject = (props: Props): JSX.Element => (
-
+
);
diff --git a/src/typing.d.ts b/src/typing.d.ts
index 139662d..731dd1a 100644
--- a/src/typing.d.ts
+++ b/src/typing.d.ts
@@ -1,8 +1,3 @@
-declare module "*.module.css" {
- const classes: { readonly [key: string]: string };
- export default classes;
-}
-
declare module "*.svg" {
import { SVGProps } from "react";
const content: (props: SVGProps
) => JSX.Element;
diff --git a/tsconfig.json b/tsconfig.json
index 5fe8d7d..fd71c5c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,8 @@
"~*": ["./*"]
},
"strict": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/**/*"],
"exclude": ["node_modules"]