feat: add rehypePlugins props (#60)

Author: jaywcjlove

README.md

@@ -123,10 +123,16 @@ interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextA
    * Optional padding for code. Default: `10`.
    */
   padding?: number;
+  /**
+   * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)  
+   * List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
+   */
+  rehypePlugins?: PluggableList;
   /**
    * The minimum height of the editor. Default: `16`.
    */
   minHeight?: number;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
 }
 ```
 List of supported languages can be found [here](https://github.com/wooorm/refractor#syntaxes)

src/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { PluggableList } from 'unified';
 import { processHtml, htmlEncode } from './utils';
 import shortcuts from './shortcuts';
 import * as styles from './styles';
@@ -16,6 +17,11 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HT
    * Optional padding for code. Default: `10`.
    */
   padding?: number;
+  /**
+   * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)
+   * List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
+   */
+  rehypePlugins?: PluggableList;
   /**
    * The minimum height of the editor. Default: `16`.
    */
@@ -33,6 +39,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
     language,
     className,
     style,
+    rehypePlugins,
     onChange,
     ...other
   } = props;
@@ -55,8 +62,9 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
         `<pre aria-hidden=true><code ${language ? `class="language-${language}"` : ''} >${htmlEncode(
           String(value || ''),
         )}</code><br /></pre>`,
+        rehypePlugins,
       ),
-    [value, language],
+    [value, language, rehypePlugins],
   );
   const preView = useMemo(
     () => (

src/utils.ts

@@ -1,22 +1,16 @@
+import { PluggableList } from 'unified';
 import { rehype } from 'rehype';
 // @ts-ignore
 import rehypePrism from '@mapbox/rehype-prism';
 
-export const processHtml = (html: string) => {
+export const processHtml = (html: string, plugins: PluggableList = [[rehypePrism, { ignoreMissing: true }]]) => {
   return rehype()
     .data('settings', { fragment: true })
-    .use(rehypePrism, { ignoreMissing: true })
+    .use([...plugins])
     .processSync(`${html}`)
     .toString();
 };
 
-// function htmlEncode(html: string) {
-//   const temp = document.createElement ('div');
-//   (temp.textContent !== undefined) ? (temp.textContent = html) : (temp.innerText = html);
-//   const output = temp.innerHTML;
-//   return output;
-// }
-
 export function htmlEncode(sHtml: string) {
   return sHtml
     .replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {