gaoyunchuan/wxmp
1
0
Fork 0
mirror of https://github.com/jaywcjlove/wxmp.git synced 2026-01-10 15:28:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add color palette.

Browse Source
This commit is contained in:
jaywcjlove
2022-09-06 00:06:36 +08:00
parent 8720638f9d
commit 8f62d41020
16 changed files with 232 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
website/src/commands/color.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React, { useContext } from 'react';
import { ICommand } from '@uiw/react-markdown-editor';
import styled from 'styled-components';
import { Context } from '../store/context';
const Input = styled.input`
position: absolute;
opacity: 0;
height: 20px;
width: 20px;
`;
const Button = styled.button``;
const ColorView: React.FC<{}> = (props) => {
const { preColor, setPreColor } = useContext(Context);
const handleChange = (evn: React.ChangeEvent<HTMLInputElement>) => {
setPreColor(evn.target.value);
};
const color = preColor ? preColor : 'currentColor';
return (
<Button type="button">
<svg viewBox="0 0 24 24" fill="none" height="16" width="16">
<path
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
d="M8.203 2.004c1.261 0 2.304 1.103 2.476 2.538l8.483 8.484-7.778 7.778a3 3 0 0 1-4.243 0L2.9 16.562a3 3 0 0 1 0-4.243l2.804-2.805V4.961c0-1.633 1.12-2.957 2.5-2.957Zm.5 2.957v1.553l-1 1V4.961c0-.327.224-.591.5-.591.277 0 .5.264.5.591Zm0 5.914V9.342l-4.39 4.391a1 1 0 0 0 0 1.414l4.243 4.243a1 1 0 0 0 1.414 0l6.364-6.364-5.63-5.63v3.48l-.003.128h-2.01a.698.698 0 0 0 .012-.129Z"
/>
<path d="M16.859 16.875a3 3 0 1 0 4.242 0l-2.121-2.121-2.121 2.12Z" fill={color} />
</svg>
<Input type="color" value={preColor} onChange={handleChange} />
</Button>
);
};
export const colorCommand: ICommand = {
name: 'color',
keyCommand: 'color',
button: () => <ColorView />,
};

7
website/src/commands/copy.tsx
View File

@@ -4,11 +4,10 @@ import toast from 'react-hot-toast';
import styled from 'styled-components';
const Button = styled.button`
white-space: nowrap;
/* white-space: nowrap;
width: initial !important;
display: flex;
align-items: center;
padding: 0 0.4rem !important;
align-items: center; */
`;
const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
@@ -27,7 +26,7 @@ const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & Too
};
return (
<Button type="button" onClick={handleClick}>
{props.command.icon} 复制
{props.command.icon}
</Button>
);
};

1
website/src/commands/theme.tsx
View File

@@ -49,7 +49,6 @@ const ThemePreviewView: React.FC<{}> = () => {
const { setCss, previewTheme, setPreviewTheme } = useContext(Context);
const handleChange = (ev: React.ChangeEvent<HTMLSelectElement>) => {
const value = ev.target.value as PreviewThemeValue;
console.log('vvvv');
setPreviewTheme(value);
setCss(previewThemes[value].value);
};

6
website/src/components/Layout.tsx
View File

@@ -72,14 +72,16 @@ const Section = styled.section`
text-decoration: none;
color: var(--color-theme-text);
padding: 0.1rem 0.3rem;
box-shadow: inset 0 0 0 var(--color-accent-fg);
transition: all 0.3s;
font-size: 0.9rem;
border-radius: 0.2rem;
&.active {
background-color: var(--color-accent-fg);
box-shadow: inset 0 -0.3rem 0 var(--color-accent-fg);
color: #fff;
}
&:hover:not(.active):not(:last-child) {
box-shadow: inset 0 -1.5rem 0 var(--color-accent-fg);
background-color: var(--color-accent-fg);
color: #fff;
border-radius: 0.2rem;
}

4
website/src/pages/home/Preview.tsx
View File

@@ -14,7 +14,7 @@ export const Warpper = styled.div`
`;
export const Preview = (props: MarkdownPreviewProps) => {
const { css } = useContext(Context);
const html = markdownToHTML(props.source || '', css);
const { css, preColor, previewTheme } = useContext(Context);
const html = markdownToHTML(props.source || '', css, { preColor, previewTheme });
return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
};

3
website/src/pages/home/index.tsx
View File

@@ -3,6 +3,7 @@ import { useContext } from 'react';
import { EditorView } from '@codemirror/view';
import { Preview } from './Preview';
import { copy } from '../../commands/copy';
import { colorCommand } from '../../commands/color';
import { theme as themeCommand, previeTheme } from '../../commands/theme';
import { cssCommand } from '../../commands/css';
import { Context, themes } from '../../store/context';
@@ -18,7 +19,7 @@ export const HomePage = () => {
toolbars={commands}
theme={themeValue}
readOnly={isLoading}
toolbarsMode={[cssCommand, previeTheme, copy, 'fullscreen', 'preview']}
toolbarsMode={[cssCommand, previeTheme, copy, colorCommand, 'fullscreen', 'preview']}
extensions={[EditorView.lineWrapping]}
renderPreview={Preview}
previewWidth="420px"

7
website/src/pages/theme/Preview.tsx
View File

@@ -1,12 +1,11 @@
import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
import { useContext } from 'react';
import { Context } from '../../store/context';
import { markdownToHTML } from '../../utils/markdownToHTML';
import { Warpper } from '../home/Preview';
export const Preview = (props: MarkdownPreviewProps) => {
const { css, markdown } = useContext(Context);
const html = markdownToHTML(markdown, css);
export const Preview = () => {
const { css, markdown, preColor, previewTheme } = useContext(Context);
const html = markdownToHTML(markdown, css, { preColor, previewTheme });
return <Warpper contentEditable spellCheck={false} dangerouslySetInnerHTML={{ __html: html }} />;
};

6
website/src/store/Provider.tsx
View File

@@ -12,6 +12,9 @@ export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
const [css, setCss] = React.useState<string>(previewThemes[initPreviewTheme].value);
const [previewTheme, setPreviewTheme] = React.useState<PreviewThemeValue>(initPreviewTheme);
const [theme, setTheme] = React.useState<ThemeValue>('default');
const [preColor, setPreColor] = React.useState<string>(
previewThemes[initPreviewTheme] ? previewThemes[initPreviewTheme].color : '',
);
const [isLoading, setIsLoading] = React.useState<boolean>(true);
const { data: mddata, isLoading: loading } = useMdSource(mdurl);
useEffect(() => {
@@ -26,9 +29,12 @@ export const Provider: React.FC<React.PropsWithChildren> = ({ children }) => {
}
}, [mddata, mdurl]);
useEffect(() => setIsLoading(loading), [loading]);
useEffect(() => setPreColor(previewThemes[initPreviewTheme].color), [initPreviewTheme]);
return (
<Context.Provider
value={{
preColor,
setPreColor,
isLoading,
setIsLoading,
markdown,

41
website/src/store/context.tsx
View File

@@ -97,25 +97,64 @@ export const previewThemes = {
default: {
label: '翡翠绿',
value: defStyle,
color: '#009874',
},
simple: {
label: '简洁蓝',
value: simpleStyle,
color: '#0f4c81',
},
underscore: {
label: '下划线黄',
value: underscoreStyle,
color: '#ffb11b',
},
base: {
label: '简洁',
value: baseStyle,
color: '',
},
};
/** 用于全局主题替换样式 */
export const replaceData: Record<PreviewThemeValue, ReplaceData[]> = {
underscore: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'box-shadow', value: 'inset 0 -0.9rem 0 0 {{color}}' },
{ select: 'h2', name: 'box-shadow', value: 'inset 0 -0.7rem 0 0 {{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
],
default: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'border-bottom', value: '3px solid {{color}}' },
{ select: 'h2', name: 'background', value: '{{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
],
simple: [
{ select: 'a', name: 'color', value: '{{color}}' },
{ select: 'h1', name: 'border-bottom', value: '3px solid {{color}}' },
{ select: 'h2', name: 'background', value: '{{color}}' },
{ select: 'h3', name: 'border-left', value: '5px solid {{color}}' },
{ select: '.code-spans', name: 'color', value: '{{color}}' },
],
base: [],
};
export type ReplaceData = {
select: string;
name: string;
value: string;
};
export const colors = (Object.keys(previewThemes) as Array<keyof typeof previewThemes>).map(
(key) => previewThemes[key].color,
);
export type ThemeValue = keyof typeof themes;
export type PreviewThemeValue = keyof typeof previewThemes;
export interface CreateContext {
preColor: string;
setPreColor: React.Dispatch<React.SetStateAction<string>>;
isLoading: boolean;
setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
markdown: string;
@@ -129,6 +168,8 @@ export interface CreateContext {
}
export const Context = React.createContext<CreateContext>({
preColor: '',
setPreColor: () => {},
isLoading: true,
setIsLoading: () => {},
markdown: data.source,

22
website/src/themes/base.md.css
View File

@@ -5,14 +5,14 @@ a {
h1 {
color: inherit;
font-size: 1.5rem;
font-size: 16px;
font-weight: bold;
}
h2 {
color: inherit;
margin: 2.5rem 0 1rem 0;
font-size: 1.3em;
font-size: 16px;
font-weight: bold;
}
@@ -20,19 +20,19 @@ h3 {
color: inherit;
margin: 1em 0 1em 0;
font-weight: bold;
font-size: 1em;
font-size: 14px;
}
h4 {
color: inherit;
margin: 0.6em 0 0.6em 0;
font-weight: bold;
font-size: 0.9em;
font-size: 12px;
}
p {
color: initial;
font-size: 0.85em;
font-size: 14px;
line-height: 1.5em;
}
@@ -46,7 +46,7 @@ ol {
li {
margin: 0;
font-size: 0.85em;
font-size: 14px;
line-height: 1.5em;
}
@@ -63,7 +63,7 @@ pre {
padding: 1em;
color: rgb(51, 51, 51);
background: rgb(248, 248, 248);
font-size: 0.85em;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
word-spacing: 0px;
@@ -76,7 +76,7 @@ table {
width: 100% !important;
border-collapse: collapse;
line-height: 1.35;
font-size: 0.85em;
font-size: 14px;
}
td {
@@ -93,7 +93,7 @@ th {
.code-highlight {
text-align: left;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em;
font-size: 14px;
margin: 0px;
white-space: nowrap;
}
@@ -120,14 +120,14 @@ th {
display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em;
font-size: 14px;
font-weight: bold;
margin: 3rem 0 0.6rem 0;
padding-left: 0.2rem;
}
.footnotes-list {
font-size: 0.75em;
font-size: 10px;
font-style: italic;
line-height: 1.2;
margin: 0.4rem 0;

45
website/src/themes/default.md.css
View File

@@ -1,7 +1,7 @@
a {
color: #576b95;
color: #009874;
text-decoration: none;
font-size: 0.85em;
font-size: 14px;
}
h1 {
@@ -11,11 +11,11 @@ h1 {
line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em;
font-size: 16px;
font-weight: bold;
margin: 2em auto 1em;
padding: 0 1em;
border-bottom: 2px solid #009874;
border-bottom: 3px solid #009874;
margin-top: 0;
}
@@ -26,7 +26,7 @@ h2 {
line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.3em;
font-size: 16px;
font-weight: bold;
margin: 4em auto 2em;
padding: 0 0.3em;
@@ -34,22 +34,17 @@ h2 {
background: #009874;
}
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 {
text-align: left;
color: #3f3f3f;
line-height: 1.2;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.1em;
font-size: 14px;
font-weight: bold;
margin: 2em 8px 0.75em 0;
padding-left: 8px;
border-left: 3px solid #009874;
border-left: 5px solid #009874;
}
ul {
@@ -63,23 +58,29 @@ ol {
li {
margin: 0;
line-height: 1.5em;
color: rgb(30 41 59);
font-size: 0.85em;
font-size: 14px;
line-height: 1.5em;
}
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
blockquote {
text-align: left;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
font-size: 14px;
font-style: normal;
border-left: none;
padding: 0.1rem 1rem;
padding: 0.5em 1em;
border-radius: 4px;
background: rgba(27, 31, 35, 0.05);
margin: 1rem 0;
line-height: 1.5em;
margin: 1em 0;
}
pre {
@@ -113,7 +114,7 @@ table {
width: 100% !important;
border-collapse: collapse;
line-height: 1.35;
font-size: 0.85em;
font-size: 14px;
}
td {
@@ -131,7 +132,7 @@ th {
text-align: left;
line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em;
font-size: 14px;
margin: 0px;
white-space: nowrap;
}
@@ -159,14 +160,14 @@ th {
display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em;
font-size: 14px;
font-weight: bold;
margin: 3em 0 0.6em 0;
padding-left: 0.2em;
}
.footnotes-list {
font-size: 0.75em;
font-size: 10px;
font-style: italic;
line-height: 1.2;
margin: 0.4rem 0;

47
website/src/themes/simple.md.css
View File

@@ -1,7 +1,7 @@
a {
color: #576b95;
color: #0f4c81;
text-decoration: none;
font-size: 0.85em;
font-size: 14px;
}
h1 {
@@ -11,11 +11,11 @@ h1 {
line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em;
font-size: 16px;
font-weight: bold;
margin: 2em auto 1em;
padding: 0 1em;
border-bottom: 2px solid #0f4c81;
border-bottom: 3px solid #0f4c81;
margin-top: 0;
}
@@ -26,7 +26,7 @@ h2 {
line-height: 1.75;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em;
font-size: 16px;
font-weight: bold;
margin: 4em auto 2em;
padding: 0 0.3em;
@@ -34,22 +34,17 @@ h2 {
background: #0f4c81;
}
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 {
text-align: left;
color: #3f3f3f;
line-height: 1.2;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.1em;
font-size: 14px;
font-weight: bold;
margin: 2em 8px 0.75em 0;
padding-left: 8px;
border-left: 3px solid #0f4c81;
border-left: 5px solid #0f4c81;
}
ul {
@@ -63,23 +58,29 @@ ol {
li {
margin: 0;
line-height: 1.5em;
color: rgb(30 41 59);
font-size: 0.85em;
font-size: 14px;
line-height: 1.5em;
}
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
blockquote {
text-align: left;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
font-size: 14px;
font-style: normal;
border-left: none;
padding: 0.1rem 1rem;
padding: 0.5em 1em;
border-radius: 4px;
background: rgba(27, 31, 35, 0.05);
margin: 1rem 0;
line-height: 1.5em;
margin: 1em 0;
}
pre {
@@ -113,7 +114,7 @@ table {
width: 100% !important;
border-collapse: collapse;
line-height: 1.35;
font-size: 0.85em;
font-size: 14px;
}
td {
@@ -131,7 +132,7 @@ th {
text-align: left;
line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em;
font-size: 14px;
margin: 0px;
white-space: nowrap;
}
@@ -150,7 +151,7 @@ th {
padding: 0.1em 0.3em;
border-radius: 0.3em;
font-weight: bold;
font-size: 1em;
font-size: 14px;
top: -0.1em;
position: relative;
}
@@ -159,14 +160,14 @@ th {
display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em;
font-size: 14px;
font-weight: bold;
margin: 3em 0 0.6em 0;
padding-left: 0.2em;
}
.footnotes-list {
font-size: 0.75em;
font-size: 10px;
font-style: italic;
line-height: 1.2;
margin: 0.4rem 0;

40
website/src/themes/underscore.md.css
View File

@@ -1,7 +1,7 @@
a {
color: #576b95;
color: #ffb11b;
text-decoration: none;
font-size: 0.85em;
font-size: 14px;
}
h1 {
@@ -11,7 +11,7 @@ h1 {
line-height: 1.15;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.3em;
font-size: 16px;
font-weight: bold;
margin: 2em auto 1em;
padding: 0 1em 0.3em 1em;
@@ -24,18 +24,13 @@ h2 {
line-height: 1.35;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1.2em;
font-size: 16px;
font-weight: bold;
padding: 0 0.3em;
margin: 2em 0 1em 0;
box-shadow: inset 0 -0.7rem 0 0 #ffb11b;
}
p {
font-size: 0.85em;
line-height: 1.5em;
}
h3 {
text-align: left;
color: #3f3f3f;
@@ -60,8 +55,15 @@ ol {
li {
margin: 0;
line-height: 1.5em;
color: rgb(30 41 59);
font-size: 0.85em;
font-size: 14px;
}
p {
font-size: 14px;
line-height: 1.5em;
padding: 0.5em 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
blockquote {
@@ -69,13 +71,13 @@ blockquote {
line-height: 1.5em;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 0.85em;
font-size: 14px;
font-style: normal;
border-left: none;
padding: 0.1rem 1rem;
padding: 0.5em 1em;
border-radius: 4px;
background: rgba(27, 31, 35, 0.05);
margin: 1rem 0;
margin: 1em 0;
}
pre {
@@ -109,7 +111,7 @@ table {
width: 100% !important;
border-collapse: collapse;
line-height: 1.35;
font-size: 0.85em;
font-size: 14px;
}
td {
@@ -127,7 +129,7 @@ th {
text-align: left;
line-height: 1.75;
font-family: Menlo, 'Operator Mono', Consolas, Monaco, monospace;
font-size: 0.85em;
font-size: 14px;
margin: 0px;
white-space: nowrap;
}
@@ -146,7 +148,7 @@ th {
padding: 0.1em 0.3em;
border-radius: 0.3em;
font-weight: bold;
font-size: 0.85em;
font-size: 14px;
top: -0.1em;
position: relative;
}
@@ -155,14 +157,14 @@ th {
display: table;
font-family: -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif;
font-size: 1em;
font-size: 14px;
font-weight: bold;
margin: 3em 0 0.6em 0;
padding-left: 0.2em;
}
.footnotes-list {
font-size: 0.75em;
font-size: 10px;
font-style: italic;
line-height: 1.2;
margin: 0.4rem 0;

48
website/src/utils/css.ts
View File

@@ -1,20 +1,55 @@
import { RootContent, Element, Text, Root } from 'hast';
import { PreviewThemeValue, replaceData, ReplaceData } from '../store/context';
export const getBlock = (data: any, str: string = '') => {
/**
* {
* "replace": [
* { select: 'a', name: 'color', value: 'red' },
* { select: 'h1', name: 'box-shadow', value: 'red' },
* { select: 'h2', name: 'box-shadow', value: 'red' },
* { select: 'h3', name: 'border-left', value: 'red' },
* { select: 'h3', name: 'color', value: 'red' },
* ]
* }
*/
type BlockOption = {
replace?: Array<ReplaceData>;
};
export const getBlock = (data: any, str: string = '', opts: BlockOption = {}) => {
const { replace } = opts;
if (data && data.data && data.data.type === 'Declaration') {
str = `${data.data.property}: ${data.data.value.value}${data.data.important ? ' !important' : ''};`;
const value = replace?.find((m) => m.name === data.data.property)?.value || data.data.value.value;
// console.log(value)
str = `${data.data.property}: ${value}${data.data.important ? ' !important' : ''};`;
if (data.next) {
str += getBlock(data.next);
str += getBlock(data.next, '', opts);
}
}
return str;
};
export const cssdata = (list: any, result: Record<string, string> = {}) => {
type Cssdata = {
theme?: PreviewThemeValue;
color?: string;
};
export const cssdata = (list: any, result: Record<string, string> = {}, opts: Cssdata = {}) => {
if (list.data && list.data.type === 'Rule') {
result[list.data.prelude.value] = getBlock(list.data.block.children.head);
const selector = list.data.prelude.value;
const options: BlockOption = {};
// console.log('opts:', opts)
if (opts.color && opts.theme && replaceData[opts.theme]) {
options.replace = replaceData[opts.theme]
.filter((m) => m.select === selector)
.map((m) => ({
...m,
value: m.value.replace('{{color}}', opts.color!),
}));
}
result[selector] = getBlock(list.data.block.children.head, '', options);
if (list.next) {
result = cssdata(list.next, { ...result });
result = cssdata(list.next, { ...result }, opts);
}
}
return result;
@@ -29,7 +64,6 @@ export const spaceEscape = (node: RootContent) => {
}
node.properties.className = className.filter((str: string) => !/(token|control-flow)/.test(str));
}
node.children.map((elm) => {
if (elm.type === 'element' && elm.children) {
spaceEscape(elm);

11
website/src/utils/markdownToHTML.ts
View File

@@ -13,9 +13,12 @@ import rehypeRewrite from 'rehype-rewrite';
import stringify from 'rehype-stringify';
import { cssdata, spaceEscape, footnotes, footnotesLabel, imagesStyle } from './css';
export type MarkdownToHTMLOptions = {};
export type MarkdownToHTMLOptions = {
preColor?: string;
previewTheme?: string;
};
export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLOptions = {}) {
export function markdownToHTML(md: string, css: string, opts: MarkdownToHTMLOptions = {}) {
const ast = csstree.parse(css, {
parseAtrulePrelude: false,
parseRulePrelude: false,
@@ -24,7 +27,7 @@ export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLO
positions: false,
});
// @ts-ignore
const data = cssdata(ast.children.head);
const data = cssdata(ast.children.head, {}, { color: opts.preColor, theme: opts.previewTheme });
const processor = unified()
.use(remarkParse)
.use(remarkGfm)
@@ -34,7 +37,7 @@ export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLO
.use(rehypeIgnore, {})
.use(rehypeAttrs, { properties: 'attr' })
.use(rehypeRewrite, {
rewrite: (node, index, parent) => {
rewrite: (node, _index, parent) => {
// @ts-ignore
if (
node?.type === 'element' &&