feat: init web app.

2026-01-12 08:18:49 +08:00 · 2022-09-02 01:16:22 +08:00
parent ef01ce998e
commit d0364a0bee
28 changed files with 888 additions and 130 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,13 @@
+import { Routes, Route } from 'react-router-dom';
+import { Layout } from './components/Layout';
+import { HomePage } from './pages/home';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<HomePage />} />
+      </Route>
+    </Routes>
+  );
+}
--- a/src/assets/github.svg
+++ b/src/assets/github.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 1024 1024" height="1em" width="1em">
+  <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"/>
+</svg>
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#1aad1a" viewBox="0 0 1024 1024" height="1em" width="1em">
+  <path d="M690.1 377.4c5.9 0 11.8.2 17.6.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6a21.5 21.5 0 0 1 9.1 17.6c0 2.4-.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-.1 17.8-.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8zm-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1zm-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1zm586.8 415.6c56.9-41.2 93.2-102 93.2-169.7 0-124-120.8-224.5-269.9-224.5-149 0-269.9 100.5-269.9 224.5S540.9 847.5 690 847.5c30.8 0 60.6-4.4 88.1-12.3 2.6-.8 5.2-1.2 7.9-1.2 5.2 0 9.9 1.6 14.3 4.1l59.1 34c1.7 1 3.3 1.7 5.2 1.7a9 9 0 0 0 6.4-2.6 9 9 0 0 0 2.6-6.4c0-2.2-.9-4.4-1.4-6.6-.3-1.2-7.6-28.3-12.2-45.3-.5-1.9-.9-3.8-.9-5.7.1-5.9 3.1-11.2 7.6-14.5zM600.2 587.2c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9c0 19.8-16.2 35.9-36 35.9zm179.9 0c-19.9 0-36-16.1-36-35.9 0-19.8 16.1-35.9 36-35.9s36 16.1 36 35.9a36.08 36.08 0 0 1-36 35.9z"/>
+</svg>
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+import { Outlet } from 'react-router-dom';
+import '@wcj/dark-mode';
+import { ReactComponent as LogoIcon } from '../assets/logo.svg';
+import { ReactComponent as GithubIcon } from '../assets/github.svg';
+
+const Warpper = styled.div`
+`;
+
+const Header = styled.header`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--color-border-muted);
+  padding: 0.5rem 1rem 0.5rem 1rem;
+`;
+
+const Article = styled.article`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.6rem;
+`;
+
+const Logo = styled(LogoIcon)`
+  max-width: 3.6rem;
+`;
+
+const Title = styled.h1`
+  font-size: 1.0rem;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  sup {
+    color: var(--color-fg-subtle);
+    margin-left: 0.4rem;
+    background-color: var(--color-border-muted);
+    border-radius: 0.1rem;
+    padding: 0 0.2rem;
+    font-weight: normal;
+  }
+`;
+
+const Section = styled.section`
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  dark-mode {
+    font-size: 1.4rem;
+  }
+  a svg {
+    display: block;
+  }
+`;
+
+export function Layout() {
+  return (
+    <Warpper className="wmde-markdown-color">
+      <Header>
+        <Article>
+          <Logo width={28} height={28} />
+          <Title>
+            微信公众号排版编辑器
+            <sup> v{VERSION} </sup>
+          </Title>
+        </Article>
+        <Section>
+          <dark-mode permanent dark="Dark" light="Light" />
+          <a href="https://github.com/jaywcjlove/wxmp" target="__blank">
+            <GithubIcon width={28} height={28} />
+          </a>
+        </Section>
+      </Header>
+      <Outlet />
+    </Warpper>
+  );
+}
--- a/src/conf/default.md.css
+++ b/src/conf/default.md.css
@@ -0,0 +1,177 @@
+a {
+  color: #576b95;
+  text-decoration: none;
+  font-size: 14px;
+}
+
+h1 {
+  text-align:center;
+  color:#3f3f3f;
+  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-weight:bold;
+  display:table;
+  margin:2em auto 1em;
+  padding:0 1em;
+  border-bottom:2px solid #009874;
+  margin-top: 0;
+}
+
+h2 {
+  text-align:center;
+  color:#fff;
+  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-weight:bold;
+  display:table;
+  margin:4em auto 2em;
+  padding:0 0.3em;
+  border-radius: 0.3rem;
+  background:#009874;
+}
+
+p {
+  font-size: 14px;
+}
+
+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-weight:bold;
+  margin:2em 8px 0.75em 0;
+  padding-left:8px;
+  border-left:3px solid #009874;
+}
+
+ul {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+ol {
+  padding-left: 1.2em;
+  font-size: 14px;
+}
+
+li {
+  font-size: 16px;
+  margin: 0;
+  line-height: 26px;
+  color: rgb(30 41 59);
+  font-size: 14px;
+}
+
+blockquote {
+  text-align:left;
+  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:14px;
+  font-style:normal;
+  border-left:none;
+  padding:1em;
+  border-radius:4px;
+  background:rgba(27,31,35,.05);
+  margin:2em 8px;
+}
+
+pre {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  color: rgb(51, 51, 51);
+  background: rgb(248, 248, 248);
+  font-size: 14px;
+  font-style: normal;
+  font-variant-ligatures: normal;
+  font-variant-caps: normal;
+  font-weight: 400;
+  letter-spacing: normal;
+  orphans: 2;
+  text-indent: 0px;
+  text-transform: none;
+  widows: 2;
+  word-spacing: 0px;
+  text-decoration-style: initial;
+  text-decoration-color: initial;
+  text-align: left;
+  line-height: 1.5;
+  font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
+  border-radius: 5px;
+  margin: 0.9rem 0;
+  white-space: pre;
+}
+
+table {
+  width: 100% !important;
+  border-collapse: collapse;
+  line-height: 1.35;
+  font-size: 90%;
+}
+
+td {
+  border: 1px solid #DDD;
+  padding: 0.25em 0.5em;
+}
+
+th {
+  background: rgb(0 0 0 / 5%);
+  border: 1px solid #DDD;
+  padding: 0.25em 0.5em;
+}
+
+.code-highlight {
+  text-align: left;
+  line-height: 1.75;
+  font-family: Menlo, "Operator Mono", Consolas, Monaco, monospace;
+  font-size: 14px;
+  margin: 0px;
+  white-space: nowrap;
+}
+
+.code-line {
+  display: block;
+  line-height: 1.3;
+}
+
+.code-spans {
+  text-align:left;
+  line-height:1;
+  white-space:pre;
+  color: #009874;
+  background:rgba(27,31,35,.05);
+  padding: 0.2rem 0.3rem;
+  border-radius:4px;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.footnotes-title {
+  font-family:-apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;
+  font-size:1.0rem;
+  font-weight:bold;
+  display:table;
+  margin:3rem 0 0.6rem 0;
+  padding-left: 0.2rem;
+}
+
+.footnotes-list {
+  font-size: 12px;
+}
+
+.comment { color: #6a737d; }
+.property { color: #6f42c1; }
+.function { color: #6f42c1; }
+.keyword { color: #d73a49; }
+.punctuation { color: #0550ae; }
+.unit { color: #0550ae; }
+.tag { color: #22863a; }
+.selector { color: #22863a; }
+.quote { color: #22863a; }
+.number { color: #005cc5; }
+.attr-name { color: #005cc5; }
+.attr-value { color: #005cc5; }
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
+import BackToUp from '@uiw/react-back-to-top';
+import { Toaster } from 'react-hot-toast';
+import { createGlobalStyle } from 'styled-components';
+import App from './App';
+
+export const GlobalStyle = createGlobalStyle`
+  [data-color-mode*='dark'], [data-color-mode*='dark'] body {
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #484f58;
+    --color-canvas-default: #0d1117;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-neutral-muted: rgba(110,118,129,0.4);
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-attention-subtle: rgba(187,128,9,0.15);
+    --color-danger-fg: #f85149;
+  }
+  [data-color-mode*='light'], [data-color-mode*='light'] body {
+    --color-fg-default: #24292f;
+    --color-fg-muted: #57606a;
+    --color-fg-subtle: #6e7781;
+    --color-canvas-default: #ffffff;
+    --color-canvas-subtle: #f6f8fa;
+    --color-border-default: #d0d7de;
+    --color-border-muted: hsla(210,18%,87%,1);
+    --color-neutral-muted: rgba(175,184,193,0.2);
+    --color-accent-fg: #0969da;
+    --color-accent-emphasis: #0969da;
+    --color-attention-subtle: #fff8c5;
+    --color-danger-fg: #cf222e;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  * {
+    box-sizing: border-box;
+  }
+`;
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <HashRouter>
+    <Toaster />
+    <BackToUp>Top</BackToUp>
+    <GlobalStyle />
+    <App />
+  </HashRouter>,
+);
--- a/src/pages/home/Preview.tsx
+++ b/src/pages/home/Preview.tsx
@@ -0,0 +1,17 @@
+import { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
+import styled from 'styled-components';
+import def from '../../conf/default.md.css';
+
+import { markdownToHTML } from '../../utils/markdownToHTML';
+
+const Warpper = styled.div`
+  width: 375px;
+  padding: 20px;
+  box-shadow: 0 0 60px rgb(0 0 0 / 10%);
+  min-height: 100%;
+`;
+
+export const Preview = (props: MarkdownPreviewProps, visible: boolean) => {
+  const html = markdownToHTML(props.source || '', def);
+  return <Warpper dangerouslySetInnerHTML={{ __html: html }} />;
+}
--- a/src/pages/home/copy.tsx
+++ b/src/pages/home/copy.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
+import toast from 'react-hot-toast';
+import styled from 'styled-components';
+
+const Button = styled.button`
+  white-space: nowrap;
+  width: initial !important;
+  display: flex;
+  align-items: center;
+  padding: 0 0.4rem !important;
+`;
+
+const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
+  const { editorProps } = props;
+  const handleClick = () => {
+    const dom = editorProps.preview.current;
+    dom?.focus();
+    window.getSelection()?.removeAllRanges();
+    let range = document.createRange();
+    range.setStartBefore(dom?.firstChild!);
+    range.setEndAfter(dom?.lastChild!);
+    window.getSelection()?.addRange(range);
+    document.execCommand(`copy`);
+    window.getSelection()?.removeAllRanges();
+    toast.success(<div>复制成功！去公众号编辑器复制吧！</div>);
+  }
+  return (
+    <Button type="button" onClick={handleClick}>
+      {props.command.icon} 复制
+    </Button>
+  );
+};
+
+export const copy: ICommand = {
+  name: 'copy',
+  keyCommand: 'copy',
+  button: (command, props, opts) => <CopyView command={command} editorProps={{ ...props, ...opts }} />,
+  icon: (
+    <svg fill="currentColor" viewBox="0 0 24 24" height="16" width="16">
+      <path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/>
+      <path d="M4 22h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2zm2-10h6v2H6v-2zm0 4h6v2H6v-2z"/>
+    </svg>
+  ),
+};
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -0,0 +1,27 @@
+import MarkdownEditor, { getCommands } from '@uiw/react-markdown-editor';
+import { EditorView } from "@codemirror/view";
+import styled from 'styled-components';
+import data from '../../../README.md';
+import { Preview } from './Preview';
+import { copy } from './copy'
+
+const Warpper = styled.div`
+  height: calc(100vh - 2.9rem);
+`;
+
+export const HomePage = () => {
+  const commands = getCommands();
+  return (
+    <Warpper>
+      <MarkdownEditor
+        value={data.source}
+        toolbars={commands}
+        toolbarsMode={[copy, 'preview', 'fullscreen']}
+        extensions={[EditorView.lineWrapping]}
+        renderPreview={Preview}
+        visible={true}
+        height="calc(100vh - 5.0rem)"
+      />
+    </Warpper>
+  );
+}
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -0,0 +1,19 @@
+/// <reference types="react-scripts" />
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare var VERSION: string;
+
+declare module '*.md' {
+  import { CodeBlockData } from 'markdown-react-code-preview-loader';
+  const src: CodeBlockData;
+  export default src;
+}
+
+declare module '*.md.css' {
+  const src: string;
+  export default src;
+}
--- a/src/utils/css.ts
+++ b/src/utils/css.ts
@@ -0,0 +1,90 @@
+import { RootContent, Element, Text } from 'hast';
+
+export const getBlock = (data: any, str: string = '') => {
+  if (data && data.data && data.data.type === 'Declaration') {
+    str = `${data.data.property}: ${data.data.value.value}${data.data.important ? ' !important' : ''};`;
+    if (data.next) {
+      str += getBlock(data.next)
+    }
+  }
+  return str;
+}
+
+export const cssdata = (list: any, result: Record<string, string> = {}) => {
+  if (list.data && list.data.type === 'Rule') {
+    result[list.data.prelude.value] = getBlock(list.data.block.children.head);
+    if (list.next) {
+      result = cssdata(list.next, {...result})
+    }
+  }
+  return result;
+}
+
+export const spaceEscape = (node: RootContent) => {
+  if (node.type === 'element' && node.children) {
+    const className = (node.properties?.className as string[]);
+    if (className) {
+      if (!node.properties) {
+        node.properties = {};
+      }
+      node.properties.className = className.filter((str: string) => !/(token|control-flow)/.test(str));
+    }
+
+    node.children.map(elm => {
+      if (elm.type === 'element' && elm.children) {
+        spaceEscape(elm)
+      }
+      if (elm.type === 'text') {
+        elm.value = elm.value.replace(/\s/g, '\u00A0')
+      }
+      return elm
+    })
+  }
+}
+
+type ChildContent = Element | Text;
+const getNodeText = (node: ChildContent[]) => {
+  let str = '';
+  node.forEach((item) => {
+    if (item.type === 'text') str += item.value;
+    else if (item.type === 'element') {
+      str += getNodeText(item.children as ChildContent[]);
+    }
+  })
+  return str.replace(/↩/, '');
+}
+
+export const footnotes = (node: Element) => {
+  node.children.map((item) => {
+    if (item.type === 'element' && item.tagName === 'h2') {
+      if (!item.properties) item.properties = {};
+      item.properties.className = ['footnotes-title'];
+      item.children = [{
+        type: 'text',
+        value: '参考'
+      }];
+    }
+    if (item.type === 'element' && item.tagName === 'ol') {
+      item.children.map((li) => {
+        if (li.type === 'element' && li.tagName === 'li') {
+          if (!li.properties) li.properties = {};
+          li.properties.className = ['footnotes-list'];
+          li.children = [{
+            type: 'text',
+            value: getNodeText(li.children as ChildContent[])
+          }]
+        }
+        return li;
+      })
+    }
+    return item;
+  })
+}
+
+export const footnotesLabel = (node: Element) => {
+  const label = getNodeText(node.children as ChildContent[]);
+  node.children = [{
+    type: 'text',
+    value: `[${label}]`
+  }];
+}
--- a/src/utils/markdownToHTML.ts
+++ b/src/utils/markdownToHTML.ts
@@ -0,0 +1,80 @@
+import { VFile } from 'vfile';
+import { unified } from 'unified';
+import * as csstree from 'css-tree';
+import { Element } from 'hast';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypePrism from 'rehype-prism-plus';
+import rehypeRaw from 'rehype-raw';
+import rehypeRewrite from 'rehype-rewrite';
+import stringify from 'rehype-stringify';
+import { cssdata, spaceEscape, footnotes, footnotesLabel } from './css';
+
+export type MarkdownToHTMLOptions = {
+
+}
+
+export function markdownToHTML(md: string, css: string, options: MarkdownToHTMLOptions = {}) {
+  const ast = csstree.parse(css, {  
+    parseAtrulePrelude: false,
+    parseRulePrelude: false,
+    parseValue: false,
+    parseCustomProperty: false,
+    positions: false
+  });
+  // @ts-ignore
+  const data = cssdata(ast.children.head);
+  const processor = unified()
+    .use(remarkParse)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypePrism)
+    .use(remarkGfm)
+    .use(rehypeRaw)
+    .use(rehypeRewrite, {
+      rewrite: (node, index, parent) => {
+        if (node?.type === 'element' && node?.tagName === 'code' && parent?.type === 'element' && parent?.tagName === 'pre') {
+          spaceEscape(node)
+        }
+        if (node?.type === 'element' && node.tagName === 'section' && (node?.properties?.className as string[]).includes('footnotes')) {
+          footnotes(node)
+        }
+        if (node?.type === 'element' && node.tagName === 'sup') {
+          footnotesLabel(node)
+        }
+        if (node?.type === 'element' && node?.tagName === 'code' && parent?.type === 'element' && parent?.tagName !== 'pre') {
+          if (!node.properties) node.properties = {}
+          node.properties!.className = ['code-spans'];
+        }
+        if (node?.type === 'element') {
+          if (node.tagName === 'input' && parent?.type === 'element') {
+            if (parent && parent.type === 'element') {
+              parent.children = parent?.children.filter(elm => (elm as Element).tagName !== 'input')
+            }
+            return;
+          }
+          if (!node.properties) {
+            node.properties = {};
+          }
+          const className = (node.properties?.className as string[]);
+          let style = '';
+          if (className) {
+            className.forEach((name) => {
+              if (data[`.${name}`]) {
+                style = data[`.${name}`];
+              }
+            })
+          }
+          if (!style) style = data[node.tagName];
+          if (style) {
+            node.properties.style = style;
+          }
+        }
+      }
+    })
+    .use(stringify);
+    const file = new VFile();
+    file.value = md;
+    const hastNode = processor.runSync(processor.parse(file), file);
+    return String(processor.stringify(hastNode, file));
+}