feat: add supports multi themes prism

wilsson · Dec 27, 2019 · b5d35bd · b5d35bd
1 parent 77d85c6
commit b5d35bd
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/packages/papyrum-ui-docs/src/components/Playground/Playground.tsx b/packages/papyrum-ui-docs/src/components/Playground/Playground.tsx
@@ -4,24 +4,31 @@ import { LiveProvider, LiveError, LivePreview } from 'react-live';
 import copy from 'copy-text-to-clipboard';
 import Editor from 'react-simple-code-editor';
 import dracula from "prism-react-renderer/themes/dracula";
-
 import HighlightImported, { defaultProps } from 'prism-react-renderer';
 import { Copy, styles } from '@papyrum/ui'
-
 import { Wrapper, LivePreviewWrapper, EditorWrapper } from './styled';
+import { useContext } from 'react';
+import { contextDB } from '@papyrum/ui';
+
 
 export const Playground = ({ code: initialCode, scope }) => {
   const [ code, setCode ] = useState(initialCode);
   const [ clip, setClip ] = useState(false);
-
+  const { db: { config } } = useContext(contextDB as any);
+  const stylesPlain = (config.prism && config.prism.theme.plain) || dracula.plain;
   const handleClipboard = () => {
     copy(code);
     setClip(true);
     setTimeout(() => setClip(false), 500);
   };
 
   const highlight = code => (
-    <HighlightImported {...defaultProps} theme={dracula as any} code={code} language="jsx">
+    <HighlightImported
+      {...defaultProps}
+      theme={(config.prism && config.prism.theme) || dracula as any}
+      code={code}
+      language="jsx"
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <React.Fragment>
           {tokens.map((line, i) => (
@@ -48,13 +55,13 @@ export const Playground = ({ code: initialCode, scope }) => {
       </Wrapper>
 
       <EditorWrapper>
-        <Copy onClick={handleClipboard}>{clip ? 'Copied' : 'Copy'}</Copy>
+        <Copy onClick={handleClipboard} color={stylesPlain.backgroundColor}>{clip ? 'Copied' : 'Copy'}</Copy>
         <Editor
           value={code}
           onValueChange={code => setCode(code)}
           highlight={highlight}
           padding={20}
-          style={{ ...styles, borderBottomLeftRadius: '5px', borderBottomRightRadius: '5px' }}
+          style={{ ...styles, ...stylesPlain, borderBottomLeftRadius: '5px', borderBottomRightRadius: '5px' }}
         />
       </EditorWrapper>
     </LiveProvider>

diff --git a/packages/papyrum-ui/package.json b/packages/papyrum-ui/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "copy-text-to-clipboard": "2.1.0",
     "normalized-styled-components": "2.0.0",
+    "polished": "3.4.2",
     "prism-react-renderer": "1.0.2",
     "re-resizable": "4.11.0",
     "react": "16.8.6",

diff --git a/packages/papyrum-ui/src/components/Highlight/Highlight.tsx b/packages/papyrum-ui/src/components/Highlight/Highlight.tsx
@@ -1,25 +1,29 @@
 import * as React from 'react';
 import { useState } from 'react';
 import HighlightImported, { defaultProps } from 'prism-react-renderer';
-import dracula from "prism-react-renderer/themes/dracula";
+import dracula from 'prism-react-renderer/themes/dracula';
 import { Wrapper, Copy } from './styled';
 import copy from 'copy-text-to-clipboard';
-
+import { useContext } from 'react';
+import { contextDB } from '../Provider';
 
 interface Props {
   code: string;
 }
 
+
+
 export const styles = {
   boxSizing: 'border-box',
   fontFamily: 'Fira Code',
   lineHeight: '24px',
   fontSize: '14px',
-  ...dracula.plain
 };
 
 export const Highlight: React.FC<Props> = ({ code }) => {
   const [ clip, setClip ] = useState(false);
+  const { db: { config } } = useContext(contextDB as any);
+  const stylesPlain = (config.prism && config.prism.theme.plain) || dracula.plain;
 
   const handleClipboard = () => {
     copy(code);
@@ -32,13 +36,13 @@ export const Highlight: React.FC<Props> = ({ code }) => {
       {...defaultProps}
       code={code}
       language="jsx"
-      theme={dracula as any}
+      theme={(config.prism && config.prism.theme) || dracula as any}
     >
       {({ tokens, getLineProps, getTokenProps, style, className }) => {
         return(
           <Wrapper>
-            <Copy onClick={handleClipboard}>{clip ? 'Copied' : 'Copy'}</Copy>
-            <pre className={className} style={{ ...styles as any, padding: '20px', borderRadius: '5px', }}>
+            <Copy onClick={handleClipboard} color={stylesPlain.backgroundColor}>{clip ? 'Copied' : 'Copy'}</Copy>
+            <pre className={className} style={{ ...styles as any, ...stylesPlain as any, padding: '20px', borderRadius: '5px', }}>
               {tokens.map((line, i) => (
                 <div {...getLineProps({ line, key: i })}>
                   {line.map((token, key) => (

diff --git a/packages/papyrum-ui/src/components/Highlight/styled.ts b/packages/papyrum-ui/src/components/Highlight/styled.ts
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+import { invert, grayscale } from 'polished'
 
 export const Copy = styled.span`
-  color: #CCD5DE;
+  color: ${props => grayscale(invert(props.color))}
   position: absolute;
   right: 15px;
   top: 15px;