feat: 🎸 代码皮肤选择

deerleo · Oct 6, 2022 · 683ad38 · 683ad38
1 parent c2797cf
commit 683ad38
Show file tree

Hide file tree

Showing 20 changed files with 461 additions and 124 deletions.
diff --git a/src/components/Copy.jsx b/src/components/Copy.jsx
@@ -77,13 +77,9 @@ export const CopyBtn = ({ editorRef, previewRef, htmlRef, baseCss }) => {
   const handleExportPDF = () => {
     let md = editorRef.current.getValue('html')
     if (md) {
-      const title = md.split('\n')[0].replace('# ', '').slice(0, 50)
-      document.title = title
-
       previewRef.current.contentWindow.postMessage(
         {
           print: true,
-          title,
         },
         '*'
       )

diff --git a/src/components/MDX/CodeBlock.jsx b/src/components/MDX/CodeBlock.jsx
@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Highlight, { defaultProps } from 'prism-react-renderer'
-import theme from 'prism-react-renderer/themes/okaidia'
+//import theme from 'prism-react-renderer/themes/okaidia'
+//import theme from 'prism-react-renderer/themes/vsLight'
+import { Context } from '../../hooks/compileMdx'
 
 import Prism from 'prism-react-renderer/prism'
 ;(typeof global !== 'undefined' ? global : window).Prism = Prism
 require('prismjs/components/prism-rust')
 
 function CodeBlock(props) {
-  const { isMac = true } = props
+  const { isMac = true } = useContext(Context)
   const { children = '', className = 'language-js' } = props.children.props
   // e.g. "language-js"
 
@@ -35,20 +37,30 @@ function CodeBlock(props) {
     code = code.join('\n')
   }
 
-  const codeblock = (
-    <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={undefined}
+      code={code}
+      language={language}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
           className={className}
           style={{
-            ...style,
             textAlign: 'left',
             margin: 0,
             padding: 0,
             overflow: 'scroll',
-            background: 'none',
           }}
         >
+          {isMac && (
+            <section className="code__tools">
+              <span className="red code__circle"></span>
+              <span className="yellow code__circle"></span>
+              <span className="green code__circle"></span>
+            </section>
+          )}
           <code>
             {tokens.map(
               (line, i) =>
@@ -66,20 +78,6 @@ function CodeBlock(props) {
       )}
     </Highlight>
   )
-  if (isMac) {
-    return (
-      <section className="code__card">
-        <section className="code__tools">
-          <span className="red code__circle"></span>
-          <span className="yellow code__circle"></span>
-          <span className="green code__circle"></span>
-        </section>
-        {codeblock}
-      </section>
-    )
-  } else {
-    return codeblock
-  }
 }
 
 CodeBlock.displayName = 'CodeBlock'

diff --git a/src/components/Pen.jsx b/src/components/Pen.jsx
@@ -5,6 +5,7 @@ import { Editor } from './Editor'
 import SplitPane from 'react-split-pane'
 import Count from 'word-count'
 import useMedia from 'react-use/lib/useMedia'
+import useLocalStorage from 'react-use/lib/useLocalStorage'
 import { useDebouncedState } from '../hooks/useDebouncedState'
 import { Preview } from './Preview'
 import { ErrorOverlay } from './ErrorOverlay'
@@ -16,12 +17,11 @@ import ThemeDropdown from './ThemeDropdown'
 import { TabBar } from './TabBar'
 import { themes } from '../css/markdown-body'
 import { compileMdx } from '../hooks/compileMdx'
-import mdxcss from '../css/mdx'
+import { baseCss, codeThemes } from '../css/mdx'
 
 const HEADER_HEIGHT = 60 - 1
 const TAB_BAR_HEIGHT = 40
 const RESIZER_SIZE = 1
-const DEFAULT_THEME = localStorage.getItem('markdownTheme') || 'default'
 const DEFAULT_RESPONSIVE_SIZE = { width: 360, height: 720 }
 
 export default function Pen({
@@ -52,7 +52,11 @@ export default function Pen({
   const [shouldClearOnUpdate, setShouldClearOnUpdate] = useState(true)
   const [isLoading, setIsLoading] = useState(false)
   const [wordCount, setWordCount] = useState(0)
-  const [theme, setTheme] = useState(initialTheme || DEFAULT_THEME)
+  const [theme, setTheme] = useLocalStorage('theme', {
+    markdownTheme: 'default',
+    codeTheme: 'default',
+    isMac: true,
+  })
   const [responsiveSize, setResponsiveSize] = useState(
     initialResponsiveSize || DEFAULT_RESPONSIVE_SIZE
   )
@@ -113,7 +117,7 @@ export default function Pen({
       JSON.stringify(content)
     )
     setIsLoading(true)
-    compileMdx(content.config, content.html).then((res) => {
+    compileMdx(content.config, content.html, theme.isMac).then((res) => {
       if (res.err) {
         setError(res.err)
       } else {
@@ -125,7 +129,14 @@ export default function Pen({
         if (css || html) {
           //编译后的html保存到ref 中
           htmlRef.current = html
-          inject({ css: mdxcss + themes[theme].css + css, html })
+          inject({
+            css:
+              baseCss +
+              themes[theme.markdownTheme].css +
+              codeThemes[theme.codeTheme].css +
+              css,
+            html,
+          })
         }
       }
       setWordCount(Count(content.html))
@@ -249,16 +260,16 @@ export default function Pen({
     [size.layout, responsiveDesignMode, responsiveSize]
   )
 
-  const onMarkdownThemeChange = useCallback(
-    (value) => {
-      inject({
-        css: themes[value].css + mdxcss + editorRef.current.getValue('css'),
+  useEffect(() => {
+    if (editorRef.current) {
+      console.log(123)
+      compileNow({
+        html: editorRef.current.getValue('html'),
+        css: editorRef.current.getValue('css'),
+        config: editorRef.current.getValue('config'),
       })
-      window.localStorage.setItem('markdownTheme', value)
-      setTheme(value)
-    },
-    [inject]
-  )
+    }
+  }, [theme])
 
   // initial state resets
   useEffect(() => {
@@ -272,17 +283,16 @@ export default function Pen({
     setActiveTab(initialActiveTab)
   }, [initialActiveTab])
 
-  console.log(wordCount)
-
   return (
     <>
       <Header
         rightbtn={
           <>
             <ThemeDropdown
               value={theme}
-              onChange={onMarkdownThemeChange}
+              onChange={setTheme}
               themes={themes}
+              codeThemes={codeThemes}
             />
 
             <div className="hidden lg:flex items-center ml-2 rounded-md ring-1 ring-gray-900/5 shadow-sm dark:ring-0 dark:bg-gray-800 dark:shadow-highlight/4">
@@ -355,7 +365,11 @@ export default function Pen({
           />
           <CopyBtn
             htmlRef={htmlRef}
-            baseCss={themes[theme].css + mdxcss}
+            baseCss={
+              baseCss +
+              themes[theme.markdownTheme].css +
+              codeThemes[theme.codeTheme].css
+            }
             editorRef={editorRef}
             previewRef={previewRef}
           />

diff --git a/src/components/Preview.js b/src/components/Preview.js
@@ -360,12 +360,8 @@ export const Preview = forwardRef(
                     <style type="text/css" media="print">
                     @page {
                       size: A4;
-                      margin:0;
                     }
-                    body{
-                      padding:0;
-                    }
-                    p,.code__card,table,img {
+                    p,table,img {
                       page-break-inside: avoid;
                     }
                     body {-webkit-print-color-adjust: exact;}
@@ -377,7 +373,6 @@ export const Preview = forwardRef(
                     var visible = false
                     window.addEventListener('message', (e) => {
                       if (typeof e.data.print  !== 'undefined') {
-                        document.title=e.data.title;
                         window.print();
                         return
                       }