Add prism prop to Editor

Author: srmagura

package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-react": "^7.7.0",
     "jest": "^27.0.6",
     "prettier": "^1.17.0",
+    "prismjs": "^1.26.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "rollup": "^2.55.1",
@@ -100,4 +101,4 @@
     "testURL": "http://localhost/"
   },
   "sideEffects": false
-}
+}

src/components/Editor/index.js

@@ -27,7 +27,7 @@ const CodeEditor = props => {
 
   const highlightCode = code => (
     <Highlight
-      Prism={Prism}
+      Prism={props.prism || Prism}
       code={code}
       theme={props.theme || liveTheme}
       language={props.language}
@@ -77,7 +77,8 @@ CodeEditor.propTypes = {
   language: PropTypes.string,
   onChange: PropTypes.func,
   style: PropTypes.object,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  prism: PropTypes.object
 };
 
 export default CodeEditor;

stories/Editor.js

@@ -1,16 +1,21 @@
 import React from 'react';
-
+import Prism from 'prismjs';
 import { Editor } from '../src/index';
 
 export default {
   title: 'Editor',
-  component: Editor,
-}
+  component: Editor
+};
 
-const Template = (args) => <Editor {...args} />;
+const Template = args => <Editor {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  language: "js",
+  language: 'js',
   code: "const x = 'Hello World!';"
-};
+};
+
+// Can't pass Prism as an arg since it is not JSON-serializable
+export const PrismFromNpm = () => (
+  <Editor language="js" prism={Prism} code="const x = 'Hello World!';" />
+);

typings/react-live.d.ts

@@ -32,6 +32,7 @@ export type EditorProps = Omit<PreProps, 'onChange'> & {
   language?: Language;
   onChange?: (code: string) => void;
   theme?: PrismTheme;
+  prism?: unknown
 }
 
 export const Editor: ComponentClass<EditorProps>

yarn.lock

@@ -8491,6 +8491,7 @@ minipass-fetch@^1.3.0, minipass-fetch@^1.3.2:
   resolved "https://registry.yarnpkg.com/minipass-fetch/-/minipass-fetch-1.3.4.tgz#63f5af868a38746ca7b33b03393ddf8c291244fe"
   integrity sha512-TielGogIzbUEtd1LsjZFs47RWuHHfhl6TiCx1InVxApBAmQ8bL0dL5ilkLGcRvuyW/A9nE+Lvn855Ewz8S0PnQ==
   dependencies:
+    encoding "^0.1.12"
     minipass "^3.1.0"
     minipass-sized "^1.0.3"
     minizlib "^2.0.0"
@@ -9702,7 +9703,12 @@ prism-react-renderer@^1.2.1:
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz#392460acf63540960e5e3caa699d851264e99b89"
   integrity sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==
 
-prismjs@^1.21.0, prismjs@~1.24.0:
+prismjs@^1.21.0, prismjs@^1.26.0:
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"
+  integrity sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==
+
+prismjs@~1.24.0:
   version "1.24.1"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.1.tgz#c4d7895c4d6500289482fa8936d9cdd192684036"
   integrity sha512-mNPsedLuk90RVJioIky8ANZEwYm5w9LcvCXrxHlwf4fNVSn8jEipMybMkWUyyF0JhnC+C4VcOVSBuHRKs1L5Ow==