@uiw/react-md-editor 3.23.2 → 3.23.4

package/dist/mdeditor.min.js.LICENSE.txt

@@ -26,7 +26,7 @@
  */
 
 /**! 
- * @uiw/copy-to-clipboard v1.0.14 
+ * @uiw/copy-to-clipboard v1.0.15 
  * Copy to clipboard. 
  * 
  * Copyright (c) 2023 Kenny Wang 

package/esm/Context.d.ts

@@ -46,7 +46,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
     extraCommands?: ICommand<string>[] | undefined;
     markdown?: string | undefined;
     preview?: PreviewType | undefined;
-    height?: string | number | undefined;
+    height?: import("csstype").Property.Height<string | number> | undefined;
     fullscreen?: boolean | undefined;
     highlightEnable?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/esm/Editor.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, PropsWithRef } from 'react';
+import React, { CSSProperties } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import { ITextAreaProps } from './components/TextArea';
 import { ICommand, TextState } from './commands';
@@ -149,8 +149,9 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 }
 export interface RefMDEditor extends ContextStore {
 }
-type Editor = React.FC<PropsWithRef<MDEditorProps>> & {
+declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
+type EditorComponent = typeof InternalMDEditor & {
     Markdown: typeof MarkdownPreview;
 };
-declare const mdEditor: Editor;
-export default mdEditor;
+declare const Editor: EditorComponent;
+export default Editor;

package/esm/Editor.js

@@ -20,7 +20,7 @@ function setGroupPopFalse(data) {
   });
   return data;
 }
-var InternalMDEditor = (props, ref) => {
+var InternalMDEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _ref = props || {},
     {
       prefixCls = 'w-md-editor',
@@ -250,7 +250,7 @@ var InternalMDEditor = (props, ref) => {
       })]
     }))
   });
-};
-var mdEditor = /*#__PURE__*/React.forwardRef(InternalMDEditor);
-mdEditor.Markdown = MarkdownPreview;
-export default mdEditor;
+});
+var Editor = InternalMDEditor;
+Editor.Markdown = MarkdownPreview;
+export default Editor;

package/lib/Context.d.ts

@@ -46,7 +46,7 @@ export declare function reducer(state: ContextStore, action: ContextStore): {
     extraCommands?: ICommand<string>[] | undefined;
     markdown?: string | undefined;
     preview?: PreviewType | undefined;
-    height?: string | number | undefined;
+    height?: import("csstype").Property.Height<string | number> | undefined;
     fullscreen?: boolean | undefined;
     highlightEnable?: boolean | undefined;
     autoFocus?: boolean | undefined;

package/lib/Editor.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, PropsWithRef } from 'react';
+import React, { CSSProperties } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import { ITextAreaProps } from './components/TextArea';
 import { ICommand, TextState } from './commands';
@@ -149,8 +149,9 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 }
 export interface RefMDEditor extends ContextStore {
 }
-type Editor = React.FC<PropsWithRef<MDEditorProps>> & {
+declare const InternalMDEditor: React.ForwardRefExoticComponent<MDEditorProps & React.RefAttributes<RefMDEditor>>;
+type EditorComponent = typeof InternalMDEditor & {
     Markdown: typeof MarkdownPreview;
 };
-declare const mdEditor: Editor;
-export default mdEditor;
+declare const Editor: EditorComponent;
+export default Editor;

package/lib/Editor.js

@@ -25,7 +25,7 @@ function setGroupPopFalse() {
   });
   return data;
 }
-var InternalMDEditor = function InternalMDEditor(props, ref) {
+var InternalMDEditor = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var _ref = props || {},
     _ref$prefixCls = _ref.prefixCls,
     prefixCls = _ref$prefixCls === void 0 ? 'w-md-editor' : _ref$prefixCls,
@@ -310,9 +310,9 @@ var InternalMDEditor = function InternalMDEditor(props, ref) {
       })]
     }))
   });
-};
-var mdEditor = /*#__PURE__*/_react["default"].forwardRef(InternalMDEditor);
-mdEditor.Markdown = _reactMarkdownPreview["default"];
-var _default = mdEditor;
+});
+var Editor = InternalMDEditor;
+Editor.Markdown = _reactMarkdownPreview["default"];
+var _default = Editor;
 exports["default"] = _default;
 module.exports = exports.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.23.2",
+  "version": "3.23.4",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",
@@ -25,7 +25,8 @@
   "dependencies": {
     "@babel/runtime": "^7.14.6",
     "@uiw/react-markdown-preview": "^4.1.5",
-    "rehype": "~12.0.1"
+    "rehype": "~12.0.1",
+    "rehype-prism-plus": "~1.6.1"
   },
   "keywords": [
     "react",

package/src/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties, PropsWithRef } from 'react';
+import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle, CSSProperties } from 'react';
 import MarkdownPreview, { MarkdownPreviewProps } from '@uiw/react-markdown-preview';
 import TextArea, { ITextAreaProps } from './components/TextArea';
 import Toolbar from './components/Toolbar';
@@ -162,246 +162,249 @@ function setGroupPopFalse(data: Record<string, boolean> = {}) {
 
 export interface RefMDEditor extends ContextStore {}
 
-const InternalMDEditor = (
-  props: MDEditorProps,
-  ref?: ((instance: RefMDEditor) => void) | React.RefObject<RefMDEditor> | null,
-) => {
-  const {
-    prefixCls = 'w-md-editor',
-    className,
-    value: propsValue,
-    commands = getCommands(),
-    commandsFilter,
-    direction,
-    extraCommands = getExtraCommands(),
-    height = 200,
-    enableScroll = true,
-    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
-    highlightEnable = true,
-    preview: previewType = 'live',
-    fullscreen = false,
-    overflow = true,
-    previewOptions = {},
-    textareaProps,
-    maxHeight = 1200,
-    minHeight = 100,
-    autoFocus,
-    tabSize = 2,
-    defaultTabEnable = false,
-    onChange,
-    onStatistics,
-    onHeightChange,
-    hideToolbar,
-    toolbarBottom = false,
-    components,
-    renderTextarea,
-    ...other
-  } = props || {};
-  const cmds = commands
-    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
-    .filter(Boolean) as ICommand[];
-  const extraCmds = extraCommands
-    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
-    .filter(Boolean) as ICommand[];
-  let [state, dispatch] = useReducer(reducer, {
-    markdown: propsValue,
-    preview: previewType,
-    components,
-    height,
-    highlightEnable,
-    tabSize,
-    defaultTabEnable,
-    scrollTop: 0,
-    scrollTopPreview: 0,
-    commands: cmds,
-    extraCommands: extraCmds,
-    fullscreen,
-    barPopup: {},
-  });
-  const container = useRef<HTMLDivElement>(null);
-  const previewRef = useRef<HTMLDivElement>(null);
-  const enableScrollRef = useRef(enableScroll);
+const InternalMDEditor = React.forwardRef<RefMDEditor, MDEditorProps>(
+  (props: MDEditorProps, ref: React.ForwardedRef<RefMDEditor>) => {
+    const {
+      prefixCls = 'w-md-editor',
+      className,
+      value: propsValue,
+      commands = getCommands(),
+      commandsFilter,
+      direction,
+      extraCommands = getExtraCommands(),
+      height = 200,
+      enableScroll = true,
+      visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
+      highlightEnable = true,
+      preview: previewType = 'live',
+      fullscreen = false,
+      overflow = true,
+      previewOptions = {},
+      textareaProps,
+      maxHeight = 1200,
+      minHeight = 100,
+      autoFocus,
+      tabSize = 2,
+      defaultTabEnable = false,
+      onChange,
+      onStatistics,
+      onHeightChange,
+      hideToolbar,
+      toolbarBottom = false,
+      components,
+      renderTextarea,
+      ...other
+    } = props || {};
+    const cmds = commands
+      .map((item) => (commandsFilter ? commandsFilter(item, false) : item))
+      .filter(Boolean) as ICommand[];
+    const extraCmds = extraCommands
+      .map((item) => (commandsFilter ? commandsFilter(item, true) : item))
+      .filter(Boolean) as ICommand[];
+    let [state, dispatch] = useReducer(reducer, {
+      markdown: propsValue,
+      preview: previewType,
+      components,
+      height,
+      highlightEnable,
+      tabSize,
+      defaultTabEnable,
+      scrollTop: 0,
+      scrollTopPreview: 0,
+      commands: cmds,
+      extraCommands: extraCmds,
+      fullscreen,
+      barPopup: {},
+    });
+    const container = useRef<HTMLDivElement>(null);
+    const previewRef = useRef<HTMLDivElement>(null);
+    const enableScrollRef = useRef(enableScroll);
 
-  useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
-  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
-  useEffect(() => {
-    const stateInit: ContextStore = {};
-    if (container.current) {
-      stateInit.container = container.current || undefined;
-    }
-    stateInit.markdown = propsValue || '';
-    stateInit.barPopup = {};
-    if (dispatch) {
-      dispatch({ ...state, ...stateInit });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    useImperativeHandle(ref, () => ({ ...state, container: container.current, dispatch }));
+    useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);
+    useEffect(() => {
+      const stateInit: ContextStore = {};
+      if (container.current) {
+        stateInit.container = container.current || undefined;
+      }
+      stateInit.markdown = propsValue || '';
+      stateInit.barPopup = {};
+      if (dispatch) {
+        dispatch({ ...state, ...stateInit });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-  const cls = [
-    className,
-    'wmde-markdown-var',
-    direction ? `${prefixCls}-${direction}` : null,
-    prefixCls,
-    state.preview ? `${prefixCls}-show-${state.preview}` : null,
-    state.fullscreen ? `${prefixCls}-fullscreen` : null,
-  ]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
+    const cls = [
+      className,
+      'wmde-markdown-var',
+      direction ? `${prefixCls}-${direction}` : null,
+      prefixCls,
+      state.preview ? `${prefixCls}-show-${state.preview}` : null,
+      state.fullscreen ? `${prefixCls}-fullscreen` : null,
+    ]
+      .filter(Boolean)
+      .join(' ')
+      .trim();
 
-  useMemo(
-    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),
-    [propsValue, state.markdown],
-  );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
-  useMemo(
-    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
+    useMemo(
+      () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),
+      [propsValue, state.markdown],
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [highlightEnable],
-  );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
-  useMemo(
-    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
+    useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fullscreen],
-  );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
-  useMemo(
-    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
-    [height, onHeightChange, state],
-  );
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useMemo(() => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }), [props.extraCommands]);
-
-  const textareaDomRef = useRef<HTMLDivElement>();
-  const active = useRef<'text' | 'preview'>('preview');
-  const initScroll = useRef(false);
+    useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);
+    useMemo(
+      () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [highlightEnable],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);
+    useMemo(
+      () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [fullscreen],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => height !== state.height && dispatch({ height: height }), [height]);
+    useMemo(
+      () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),
+      [height, onHeightChange, state],
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(() => commands !== state.commands && dispatch({ commands: cmds }), [props.commands]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useMemo(
+      () => extraCommands !== state.extraCommands && dispatch({ extraCommands: extraCmds }),
+      [props.extraCommands],
+    );
 
-  useMemo(() => {
-    textareaDomRef.current = state.textareaWarp;
-    if (state.textareaWarp) {
-      state.textareaWarp.addEventListener('mouseover', () => {
-        active.current = 'text';
-      });
-      state.textareaWarp.addEventListener('mouseleave', () => {
-        active.current = 'preview';
-      });
-    }
-  }, [state.textareaWarp]);
+    const textareaDomRef = useRef<HTMLDivElement>();
+    const active = useRef<'text' | 'preview'>('preview');
+    const initScroll = useRef(false);
 
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
-    if (!enableScrollRef.current) return;
-    const textareaDom = textareaDomRef.current;
-    const previewDom = previewRef.current ? previewRef.current : undefined;
-    if (!initScroll.current) {
-      active.current = type;
-      initScroll.current = true;
-    }
-    if (textareaDom && previewDom) {
-      const scale =
-        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
-      if (e.target === textareaDom && active.current === 'text') {
-        previewDom.scrollTop = textareaDom.scrollTop / scale;
+    useMemo(() => {
+      textareaDomRef.current = state.textareaWarp;
+      if (state.textareaWarp) {
+        state.textareaWarp.addEventListener('mouseover', () => {
+          active.current = 'text';
+        });
+        state.textareaWarp.addEventListener('mouseleave', () => {
+          active.current = 'preview';
+        });
       }
-      if (e.target === previewDom && active.current === 'preview') {
-        textareaDom.scrollTop = previewDom.scrollTop * scale;
+    }, [state.textareaWarp]);
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {
+      if (!enableScrollRef.current) return;
+      const textareaDom = textareaDomRef.current;
+      const previewDom = previewRef.current ? previewRef.current : undefined;
+      if (!initScroll.current) {
+        active.current = type;
+        initScroll.current = true;
       }
-      let scrollTop = 0;
-      if (active.current === 'text') {
-        scrollTop = textareaDom.scrollTop || 0;
-      } else if (active.current === 'preview') {
-        scrollTop = previewDom.scrollTop || 0;
+      if (textareaDom && previewDom) {
+        const scale =
+          (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);
+        if (e.target === textareaDom && active.current === 'text') {
+          previewDom.scrollTop = textareaDom.scrollTop / scale;
+        }
+        if (e.target === previewDom && active.current === 'preview') {
+          textareaDom.scrollTop = previewDom.scrollTop * scale;
+        }
+        let scrollTop = 0;
+        if (active.current === 'text') {
+          scrollTop = textareaDom.scrollTop || 0;
+        } else if (active.current === 'preview') {
+          scrollTop = previewDom.scrollTop || 0;
+        }
+        dispatch({ scrollTop });
       }
-      dispatch({ scrollTop });
-    }
-  };
+    };
 
-  const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
-  const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
-  let mdPreview = useMemo(
-    () => (
-      <div ref={previewRef} className={previewClassName}>
-        <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
-      </div>
-    ),
-    [previewClassName, previewOptions, state.markdown],
-  );
-  const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
-  if (preview && React.isValidElement(preview)) {
-    mdPreview = (
-      <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
-        {preview}
-      </div>
+    const previewClassName = `${prefixCls}-preview ${previewOptions.className || ''}`;
+    const handlePreviewScroll = (e: React.UIEvent<HTMLDivElement, UIEvent>) => handleScroll(e, 'preview');
+    let mdPreview = useMemo(
+      () => (
+        <div ref={previewRef} className={previewClassName}>
+          <MarkdownPreview {...previewOptions} onScroll={handlePreviewScroll} source={state.markdown || ''} />
+        </div>
+      ),
+      [previewClassName, previewOptions, state.markdown],
     );
-  }
+    const preview = components?.preview && components?.preview(state.markdown || '', state, dispatch);
+    if (preview && React.isValidElement(preview)) {
+      mdPreview = (
+        <div className={previewClassName} ref={previewRef} onScroll={handlePreviewScroll}>
+          {preview}
+        </div>
+      );
+    }
 
-  const containerStyle = { ...other.style, height: state.height || '100%' };
-  const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
-  const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
+    const containerStyle = { ...other.style, height: state.height || '100%' };
+    const containerClick = () => dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });
+    const dragBarChange = (newHeight: number) => dispatch({ height: newHeight });
 
-  const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange && onChange(evn.target.value, evn, state);
-    if (textareaProps && textareaProps.onChange) {
-      textareaProps.onChange(evn);
-    }
-    if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
-      const obj = new TextAreaCommandOrchestrator(state.textarea!);
-      const objState = (obj.getState() || {}) as TextState;
-      onStatistics({
-        ...objState,
-        lineCount: evn.target.value.split('\n').length,
-        length: evn.target.value.length,
-      });
-    }
-  };
-  return (
-    <EditorContext.Provider value={{ ...state, dispatch }}>
-      <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
-        {!hideToolbar && !toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-        )}
-        <div className={`${prefixCls}-content`}>
-          {/(edit|live)/.test(state.preview || '') && (
-            <TextArea
-              className={`${prefixCls}-input`}
+    const changeHandle = (evn: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange && onChange(evn.target.value, evn, state);
+      if (textareaProps && textareaProps.onChange) {
+        textareaProps.onChange(evn);
+      }
+      if (state.textarea && state.textarea instanceof HTMLTextAreaElement && onStatistics) {
+        const obj = new TextAreaCommandOrchestrator(state.textarea!);
+        const objState = (obj.getState() || {}) as TextState;
+        onStatistics({
+          ...objState,
+          lineCount: evn.target.value.split('\n').length,
+          length: evn.target.value.length,
+        });
+      }
+    };
+    return (
+      <EditorContext.Provider value={{ ...state, dispatch }}>
+        <div ref={container} className={cls} {...other} onClick={containerClick} style={containerStyle}>
+          {!hideToolbar && !toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
+          <div className={`${prefixCls}-content`}>
+            {/(edit|live)/.test(state.preview || '') && (
+              <TextArea
+                className={`${prefixCls}-input`}
+                prefixCls={prefixCls}
+                autoFocus={autoFocus}
+                {...textareaProps}
+                onChange={changeHandle}
+                renderTextarea={components?.textarea || renderTextarea}
+                onScroll={(e) => handleScroll(e, 'text')}
+              />
+            )}
+            {/(live|preview)/.test(state.preview || '') && mdPreview}
+          </div>
+          {visibleDragbar && !state.fullscreen && (
+            <DragBar
               prefixCls={prefixCls}
-              autoFocus={autoFocus}
-              {...textareaProps}
-              onChange={changeHandle}
-              renderTextarea={components?.textarea || renderTextarea}
-              onScroll={(e) => handleScroll(e, 'text')}
+              height={state.height as number}
+              maxHeight={maxHeight!}
+              minHeight={minHeight!}
+              onChange={dragBarChange}
             />
           )}
-          {/(live|preview)/.test(state.preview || '') && mdPreview}
+          {!hideToolbar && toolbarBottom && (
+            <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
+          )}
         </div>
-        {visibleDragbar && !state.fullscreen && (
-          <DragBar
-            prefixCls={prefixCls}
-            height={state.height as number}
-            maxHeight={maxHeight!}
-            minHeight={minHeight!}
-            onChange={dragBarChange}
-          />
-        )}
-        {!hideToolbar && toolbarBottom && (
-          <Toolbar prefixCls={prefixCls} overflow={overflow} toolbarBottom={toolbarBottom} />
-        )}
-      </div>
-    </EditorContext.Provider>
-  );
-};
-
-type Editor = React.FC<PropsWithRef<MDEditorProps>> & { Markdown: typeof MarkdownPreview };
+      </EditorContext.Provider>
+    );
+  },
+);
 
-const mdEditor: Editor = React.forwardRef(InternalMDEditor) as unknown as Editor;
+type EditorComponent = typeof InternalMDEditor & {
+  Markdown: typeof MarkdownPreview;
+};
 
-mdEditor.Markdown = MarkdownPreview;
+const Editor = InternalMDEditor as EditorComponent;
+Editor.Markdown = MarkdownPreview;
 
-export default mdEditor;
+export default Editor;

package/src/components/TextArea/Markdown.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
 import { IProps } from '../../Editor';