@uiw/react-md-editor 3.13.0 → 3.14.2

package/esm/Editor.d.ts

@@ -39,6 +39,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /**
      * Show drag and drop tool. Set the height of the editor.
      */
+    visibleDragbar?: boolean;
+    /**
+     * @deprecated use `visibleDragbar`
+     */
     visiableDragbar?: boolean;
     /**
      * Show markdown preview.
@@ -53,11 +57,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     overflow?: boolean;
     /**
-     * Maximum drag height. `visiableDragbar=true`
+     * Maximum drag height. `visibleDragbar=true`
      */
     maxHeight?: number;
     /**
-     * Minimum drag height. `visiableDragbar=true`
+     * Minimum drag height. `visibleDragbar=true`
      */
     minHeight?: number;
     /**

package/esm/Editor.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visiableDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "renderTextarea"];
+var _excluded = ["prefixCls", "className", "value", "commands", "commandsFilter", "extraCommands", "height", "toolbarHeight", "enableScroll", "visibleDragbar", "highlightEnable", "preview", "fullscreen", "overflow", "previewOptions", "textareaProps", "maxHeight", "minHeight", "autoFocus", "tabSize", "defaultTabEnable", "onChange", "onHeightChange", "hideToolbar", "toolbarBottom", "renderTextarea"];
 import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import TextArea from './components/TextArea';
@@ -35,7 +35,7 @@ var InternalMDEditor = (props, ref) => {
     height = 200,
     toolbarHeight = 29,
     enableScroll = true,
-    visiableDragbar = true,
+    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,
     highlightEnable = true,
     preview: previewType = 'live',
     fullscreen = false,
@@ -218,7 +218,7 @@ var InternalMDEditor = (props, ref) => {
           renderTextarea: renderTextarea,
           onScroll: e => handleScroll(e, 'text')
         })), /(live|preview)/.test(state.preview || '') && mdPreview]
-      }), visiableDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
+      }), visibleDragbar && !state.fullscreen && /*#__PURE__*/_jsx(DragBar, {
         prefixCls: prefixCls,
         height: state.height,
         maxHeight: maxHeight,

package/esm/Editor.js.map

@@ -34,6 +34,7 @@
     "height",
     "toolbarHeight",
     "enableScroll",
+    "visibleDragbar",
     "visiableDragbar",
     "highlightEnable",
     "preview",
@@ -103,7 +104,7 @@
     "../src/Editor.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   */\n  height?: number;\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visiableDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visiableDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /** Use div to replace TextArea or re-render TextArea */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    toolbarHeight = 29,\n    enableScroll = true,\n    visiableDragbar = true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<MarkdownPreviewRef>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const mdPreview = useMemo(\n    () => (\n      <MarkdownPreview\n        {...previewOptions}\n        onScroll={(e) => handleScroll(e, 'preview')}\n        ref={previewRef}\n        source={state.markdown || ''}\n        className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n      />\n    ),\n    [prefixCls, previewOptions, state.markdown],\n  );\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div\n        ref={container}\n        className={cls}\n        {...other}\n        onClick={() => {\n          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n        }}\n        style={{\n          ...other.style,\n          height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n        }}\n      >\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div\n          className={`${prefixCls}-content`}\n          style={{\n            height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n          }}\n        >\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visiableDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={(newHeight) => {\n              dispatch({ height: newHeight });\n            }}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n  Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
+    "import React, { useEffect, useReducer, useMemo, useRef, useImperativeHandle } from 'react';\nimport MarkdownPreview, { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';\nimport TextArea, { ITextAreaProps } from './components/TextArea';\nimport Toolbar from './components/Toolbar';\nimport DragBar from './components/DragBar';\nimport { getCommands, getExtraCommands, ICommand } from './commands';\nimport { reducer, EditorContext, ContextStore, PreviewType } from './Context';\nimport './index.less';\n\nexport interface IProps {\n  prefixCls?: string;\n  className?: string;\n}\n\nexport interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, IProps {\n  /**\n   * The Markdown value.\n   */\n  value?: string;\n  /**\n   * Event handler for the `onChange` event.\n   */\n  onChange?: (value?: string, event?: React.ChangeEvent<HTMLTextAreaElement>, state?: ContextStore) => void;\n  /**\n   * editor height change listener\n   */\n  onHeightChange?: (value?: number, oldValue?: number, state?: ContextStore) => void;\n  /**\n   * Can be used to make `Markdown Editor` focus itself on initialization. Defaults to on.\n   * it will be set to true when either the source `textarea` is focused,\n   * or it has an `autofocus` attribute and no other element is focused.\n   */\n  autoFocus?: ITextAreaProps['autoFocus'];\n  /**\n   * The height of the editor.\n   */\n  height?: number;\n  /**\n   * Custom toolbar heigth\n   * @default 29px\n   */\n  toolbarHeight?: number;\n  /**\n   * Show drag and drop tool. Set the height of the editor.\n   */\n  visibleDragbar?: boolean;\n  /**\n   * @deprecated use `visibleDragbar`\n   */\n  visiableDragbar?: boolean;\n  /**\n   * Show markdown preview.\n   */\n  preview?: PreviewType;\n  /**\n   * Full screen display editor.\n   */\n  fullscreen?: boolean;\n  /**\n   * Disable `fullscreen` setting body styles\n   */\n  overflow?: boolean;\n  /**\n   * Maximum drag height. `visibleDragbar=true`\n   */\n  maxHeight?: number;\n  /**\n   * Minimum drag height. `visibleDragbar=true`\n   */\n  minHeight?: number;\n  /**\n   * This is reset [react-markdown](https://github.com/rexxars/react-markdown) settings.\n   */\n  previewOptions?: Omit<MarkdownPreviewProps, 'source'>;\n  /**\n   * Set the `textarea` related props.\n   */\n  textareaProps?: ITextAreaProps;\n  /** Use div to replace TextArea or re-render TextArea */\n  renderTextarea?: ITextAreaProps['renderTextarea'];\n  /**\n   * Disable editing area code highlighting. The value is `false`, which increases the editing speed.\n   * @default true\n   */\n  highlightEnable?: boolean;\n  /**\n   * The number of characters to insert when pressing tab key.\n   * Default `2` spaces.\n   */\n  tabSize?: number;\n  /**\n   * If `false`, the `tab` key inserts a tab character into the textarea. If `true`, the `tab` key executes default behavior e.g. focus shifts to next element.\n   */\n  defaultTabEnable?: boolean;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  commands?: ICommand[];\n  /**\n   * Filter or modify your commands.\n   * https://github.com/uiwjs/react-md-editor/issues/296\n   */\n  commandsFilter?: (command: ICommand, isExtra: boolean) => false | ICommand;\n  /**\n   * You can create your own commands or reuse existing commands.\n   */\n  extraCommands?: ICommand[];\n  /**\n   * Hide the tool bar\n   */\n  hideToolbar?: boolean;\n  /** Whether to enable scrolling */\n  enableScroll?: boolean;\n  /** Toolbar on bottom */\n  toolbarBottom?: boolean;\n}\n\nfunction setGroupPopFalse(data: Record<string, boolean> = {}) {\n  Object.keys(data).forEach((keyname) => {\n    data[keyname] = false;\n  });\n  return data;\n}\n\nconst InternalMDEditor = (\n  props: MDEditorProps,\n  ref?: ((instance: ContextStore) => void) | React.RefObject<ContextStore> | null,\n) => {\n  const {\n    prefixCls = 'w-md-editor',\n    className,\n    value: propsValue,\n    commands = getCommands(),\n    commandsFilter,\n    extraCommands = getExtraCommands(),\n    height = 200,\n    toolbarHeight = 29,\n    enableScroll = true,\n    visibleDragbar = typeof props.visiableDragbar === 'boolean' ? props.visiableDragbar : true,\n    highlightEnable = true,\n    preview: previewType = 'live',\n    fullscreen = false,\n    overflow = true,\n    previewOptions = {},\n    textareaProps,\n    maxHeight = 1200,\n    minHeight = 100,\n    autoFocus,\n    tabSize = 2,\n    defaultTabEnable = false,\n    onChange,\n    onHeightChange,\n    hideToolbar,\n    toolbarBottom = false,\n    renderTextarea,\n    ...other\n  } = props || {};\n  const cmds = commands\n    .map((item) => (commandsFilter ? commandsFilter(item, false) : item))\n    .filter(Boolean) as ICommand[];\n  const extraCmds = extraCommands\n    .map((item) => (commandsFilter ? commandsFilter(item, true) : item))\n    .filter(Boolean) as ICommand[];\n  let [state, dispatch] = useReducer(reducer, {\n    markdown: propsValue,\n    preview: previewType,\n    height,\n    highlightEnable,\n    tabSize,\n    defaultTabEnable,\n    scrollTop: 0,\n    scrollTopPreview: 0,\n    commands: cmds,\n    extraCommands: extraCmds,\n    fullscreen,\n    barPopup: {},\n  });\n  const container = useRef<HTMLDivElement>(null);\n  const previewRef = useRef<MarkdownPreviewRef>(null);\n  const enableScrollRef = useRef(enableScroll);\n\n  useImperativeHandle(ref, () => ({ ...state }));\n  useMemo(() => (enableScrollRef.current = enableScroll), [enableScroll]);\n  useEffect(() => {\n    const stateInit: ContextStore = {};\n    if (container.current) {\n      stateInit.container = container.current || undefined;\n    }\n    stateInit.markdown = propsValue || '';\n    stateInit.barPopup = {};\n    if (dispatch) {\n      dispatch({ ...state, ...stateInit });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const cls = [\n    className,\n    'wmde-markdown-var',\n    prefixCls,\n    state.preview ? `${prefixCls}-show-${state.preview}` : null,\n    state.fullscreen ? `${prefixCls}-fullscreen` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n    .trim();\n\n  useMemo(\n    () => propsValue !== state.markdown && dispatch({ markdown: propsValue || '' }),\n    [propsValue, state.markdown],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => previewType !== state.preview && dispatch({ preview: previewType }), [previewType]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => tabSize !== state.tabSize && dispatch({ tabSize }), [tabSize]);\n  useMemo(\n    () => highlightEnable !== state.highlightEnable && dispatch({ highlightEnable }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [highlightEnable],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => autoFocus !== state.autoFocus && dispatch({ autoFocus: autoFocus }), [autoFocus]);\n  useMemo(\n    () => fullscreen !== state.fullscreen && dispatch({ fullscreen: fullscreen }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [fullscreen],\n  );\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useMemo(() => height !== state.height && dispatch({ height: height }), [height]);\n  useMemo(\n    () => height !== state.height && onHeightChange && onHeightChange(state.height, height, state),\n    [height, onHeightChange, state],\n  );\n\n  const textareaDomRef = useRef<HTMLDivElement>();\n  const active = useRef<'text' | 'preview'>('preview');\n  const initScroll = useRef(false);\n\n  useMemo(() => {\n    textareaDomRef.current = state.textareaWarp;\n    if (state.textareaWarp) {\n      state.textareaWarp.addEventListener('mouseover', () => {\n        active.current = 'text';\n      });\n      state.textareaWarp.addEventListener('mouseleave', () => {\n        active.current = 'preview';\n      });\n    }\n  }, [state.textareaWarp]);\n\n  const handleScroll = (e: React.UIEvent<HTMLDivElement>, type: 'text' | 'preview') => {\n    if (!enableScrollRef.current) return;\n    const textareaDom = textareaDomRef.current;\n    const previewDom = previewRef.current ? previewRef.current.mdp.current : undefined;\n    if (!initScroll.current) {\n      active.current = type;\n      initScroll.current = true;\n    }\n    if (textareaDom && previewDom) {\n      const scale =\n        (textareaDom.scrollHeight - textareaDom.offsetHeight) / (previewDom.scrollHeight - previewDom.offsetHeight);\n      if (e.target === textareaDom && active.current === 'text') {\n        previewDom.scrollTop = textareaDom.scrollTop / scale;\n      }\n      if (e.target === previewDom && active.current === 'preview') {\n        textareaDom.scrollTop = previewDom.scrollTop * scale;\n      }\n      let scrollTop = 0;\n      if (active.current === 'text') {\n        scrollTop = textareaDom.scrollTop || 0;\n      } else if (active.current === 'preview') {\n        scrollTop = previewDom.scrollTop || 0;\n      }\n      dispatch({ scrollTop });\n    }\n  };\n\n  const mdPreview = useMemo(\n    () => (\n      <MarkdownPreview\n        {...previewOptions}\n        onScroll={(e) => handleScroll(e, 'preview')}\n        ref={previewRef}\n        source={state.markdown || ''}\n        className={`${prefixCls}-preview ${previewOptions.className || ''}`}\n      />\n    ),\n    [prefixCls, previewOptions, state.markdown],\n  );\n\n  return (\n    <EditorContext.Provider value={{ ...state, dispatch }}>\n      <div\n        ref={container}\n        className={cls}\n        {...other}\n        onClick={() => {\n          dispatch({ barPopup: { ...setGroupPopFalse(state.barPopup) } });\n        }}\n        style={{\n          ...other.style,\n          height: state.fullscreen ? '100%' : hideToolbar ? Number(state.height) - toolbarHeight : state.height,\n        }}\n      >\n        {!hideToolbar && !toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n        <div\n          className={`${prefixCls}-content`}\n          style={{\n            height: state.fullscreen ? `calc(100% - ${toolbarHeight}px)` : Number(state.height) - toolbarHeight,\n          }}\n        >\n          {/(edit|live)/.test(state.preview || '') && (\n            <TextArea\n              className={`${prefixCls}-input`}\n              prefixCls={prefixCls}\n              autoFocus={autoFocus}\n              {...textareaProps}\n              onChange={(evn) => {\n                onChange && onChange(evn.target.value, evn, state);\n                if (textareaProps && textareaProps.onChange) {\n                  textareaProps.onChange(evn);\n                }\n              }}\n              renderTextarea={renderTextarea}\n              onScroll={(e) => handleScroll(e, 'text')}\n            />\n          )}\n          {/(live|preview)/.test(state.preview || '') && mdPreview}\n        </div>\n        {visibleDragbar && !state.fullscreen && (\n          <DragBar\n            prefixCls={prefixCls}\n            height={state.height as number}\n            maxHeight={maxHeight!}\n            minHeight={minHeight!}\n            onChange={(newHeight) => {\n              dispatch({ height: newHeight });\n            }}\n          />\n        )}\n        {!hideToolbar && toolbarBottom && (\n          <Toolbar prefixCls={prefixCls} height={toolbarHeight} overflow={overflow} toolbarBottom={toolbarBottom} />\n        )}\n      </div>\n    </EditorContext.Provider>\n  );\n};\n\nconst mdEditor = React.forwardRef<ContextStore, MDEditorProps>(InternalMDEditor);\n\ntype MDEditor = typeof mdEditor & {\n  Markdown: typeof MarkdownPreview;\n};\n\n(mdEditor as MDEditor).Markdown = MarkdownPreview;\n\nexport default mdEditor as MDEditor;\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

package/esm/commands/bold.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { selectWord } from '../utils/markdownUtils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var bold = {

package/esm/commands/bold.js.map

@@ -29,7 +29,7 @@
     "../../src/commands/bold.tsx"
   ],
   "sourcesContent": [
-    "import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  buttonProps: { 'aria-label': 'Add bold text', title: 'Add bold text' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
+    "import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  buttonProps: { 'aria-label': 'Add bold text', title: 'Add bold text' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
   ],
-  "mappings": "AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA,SAASC,UAAT,QAA2B,wBAA3B;;AAEA,OAAO,IAAMC,IAAc,GAAG;EAC5BC,IAAI,EAAE,MADsB;EAE5BC,UAAU,EAAE,MAFgB;EAG5BC,SAAS,EAAE,WAHiB;EAI5BC,WAAW,EAAE;IAAE,cAAc,eAAhB;IAAiCC,KAAK,EAAE;EAAxC,CAJe;EAK5BC,IAAI,eACF;IAAK,IAAI,EAAC,KAAV;IAAgB,KAAK,EAAC,IAAtB;IAA2B,MAAM,EAAC,IAAlC;IAAuC,OAAO,EAAC,aAA/C;IAAA,uBACE;MACE,IAAI,EAAC,cADP;MAEE,CAAC,EAAC;IAFJ;EADF,EAN0B;EAa5BC,OAAO,EAAE,CAACC,KAAD,EAAmBC,GAAnB,KAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAGX,UAAU,CAAC;MAAEY,IAAI,EAAEH,KAAK,CAACG,IAAd;MAAoBC,SAAS,EAAEJ,KAAK,CAACI;IAArC,CAAD,CAApC;IACA,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAJ,QAA0BH,MAAM,CAACI,YAAjC,QAAf,CALmD,CAMnD;;IACAR,GAAG,CAACK,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID;AAxB2B,CAAvB"
+  "mappings": "AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,UAAT,QAA2B,wBAA3B;;AAEA,OAAO,IAAMC,IAAc,GAAG;EAC5BC,IAAI,EAAE,MADsB;EAE5BC,UAAU,EAAE,MAFgB;EAG5BC,SAAS,EAAE,WAHiB;EAI5BC,WAAW,EAAE;IAAE,cAAc,eAAhB;IAAiCC,KAAK,EAAE;EAAxC,CAJe;EAK5BC,IAAI,eACF;IAAK,IAAI,EAAC,KAAV;IAAgB,KAAK,EAAC,IAAtB;IAA2B,MAAM,EAAC,IAAlC;IAAuC,OAAO,EAAC,aAA/C;IAAA,uBACE;MACE,IAAI,EAAC,cADP;MAEE,CAAC,EAAC;IAFJ;EADF,EAN0B;EAa5BC,OAAO,EAAE,CAACC,KAAD,EAAmBC,GAAnB,KAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAGX,UAAU,CAAC;MAAEY,IAAI,EAAEH,KAAK,CAACG,IAAd;MAAoBC,SAAS,EAAEJ,KAAK,CAACI;IAArC,CAAD,CAApC;IACA,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAJ,QAA0BH,MAAM,CAACI,YAAjC,QAAf,CALmD,CAMnD;;IACAR,GAAG,CAACK,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID;AAxB2B,CAAvB"
 }

package/esm/components/TextArea/Markdown.js

@@ -3,12 +3,30 @@ import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
 import { EditorContext } from '../../Context';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function html2Escape(sHtml) {
+  return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
+    return str.replace(/[<&"]/g, c => ({
+      '<': '&lt;',
+      '>': '&gt;',
+      '&': '&amp;',
+      '"': '&quot;'
+    })[c]);
+  }).replace(/[<&"]/g, c => ({
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+    '"': '&quot;'
+  })[c]);
+}
+
 export default function Markdown(props) {
   var {
     prefixCls
   } = props;
   var {
     markdown = '',
+    highlightEnable,
     dispatch
   } = useContext(EditorContext);
   var preRef = /*#__PURE__*/React.createRef();
@@ -20,41 +38,30 @@ export default function Markdown(props) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
-
-  function html2Escape(sHtml) {
-    return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
-      return str.replace(/[<&"]/g, c => ({
-        '<': '&lt;',
-        '>': '&gt;',
-        '&': '&amp;',
-        '"': '&quot;'
-      })[c]);
-    }).replace(/[<&"]/g, c => ({
-      '<': '&lt;',
-      '>': '&gt;',
-      '&': '&amp;',
-      '"': '&quot;'
-    })[c]);
-  }
-
   return useMemo(() => {
     if (!markdown) {
       return /*#__PURE__*/_jsx("pre", {
-        children: markdown || '',
         ref: preRef,
         className: prefixCls + "-text-pre wmde-markdown-color"
       });
     }
 
-    var str = rehype().data('settings', {
-      fragment: true
-    }).use(rehypePrism, {
-      ignoreMissing: true
-    }).processSync("<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "\n</code></pre>");
+    var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "\n</code></pre>";
+
+    if (highlightEnable) {
+      try {
+        mdStr = rehype().data('settings', {
+          fragment: true
+        }).use(rehypePrism, {
+          ignoreMissing: false
+        }).processSync(mdStr).toString();
+      } catch (error) {}
+    }
+
     return /*#__PURE__*/React.createElement('div', {
       className: 'wmde-markdown-color',
       dangerouslySetInnerHTML: {
-        __html: str.value
+        __html: mdStr || ''
       }
     });
   }, [markdown, preRef, prefixCls]);

package/esm/components/TextArea/Markdown.js.map

@@ -8,36 +8,39 @@
     "rehype",
     "rehypePrism",
     "EditorContext",
+    "html2Escape",
+    "sHtml",
+    "replace",
+    "str",
+    "c",
     "Markdown",
     "props",
     "prefixCls",
     "markdown",
+    "highlightEnable",
     "dispatch",
     "preRef",
     "createRef",
     "current",
     "textareaPre",
-    "html2Escape",
-    "sHtml",
-    "replace",
-    "str",
-    "c",
+    "mdStr",
     "data",
     "fragment",
     "use",
     "ignoreMissing",
     "processSync",
+    "toString",
+    "error",
     "createElement",
     "className",
     "dangerouslySetInnerHTML",
-    "__html",
-    "value"
+    "__html"
   ],
   "sources": [
     "../../../src/components/TextArea/Markdown.tsx"
   ],
   "sourcesContent": [
-    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  function html2Escape(sHtml: string) {\n    return sHtml\n      .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n        return str.replace(\n          /[<&\"]/g,\n          (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n        );\n      })\n      .replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n  }\n\n  return useMemo(() => {\n    if (!markdown) {\n      return <pre children={markdown || ''} ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n    }\n    const str = rehype()\n      .data('settings', { fragment: true })\n      .use(rehypePrism, { ignoreMissing: true })\n      .processSync(\n        `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n          markdown,\n        )}\\n</code></pre>`,\n      );\n    return React.createElement('div', {\n      className: 'wmde-markdown-color',\n      dangerouslySetInnerHTML: { __html: str.value as string },\n    });\n  }, [markdown, preRef, prefixCls]);\n}\n"
+    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n  return sHtml\n    .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n      return str.replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n    })\n    .replace(\n      /[<&\"]/g,\n      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n    );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => {\n    if (!markdown) {\n      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n    }\n    let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n      markdown,\n    )}\\n</code></pre>`;\n\n    if (highlightEnable) {\n      try {\n        mdStr = rehype()\n          .data('settings', { fragment: true })\n          .use(rehypePrism, { ignoreMissing: false })\n          .processSync(mdStr)\n          .toString();\n      } catch (error) {}\n    }\n\n    return React.createElement('div', {\n      className: 'wmde-markdown-color',\n      dangerouslySetInnerHTML: { __html: mdStr || '' },\n    });\n  }, [markdown, preRef, prefixCls]);\n}\n"
   ],
-  "mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB;AACA,OAAOC,WAAP,MAAwB,mBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B;;AAIA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACrD,IAAM;IAAEC;EAAF,IAAgBD,KAAtB;EACA,IAAM;IAAEE,QAAQ,GAAG,EAAb;IAAiBC;EAAjB,IAA8BV,UAAU,CAACK,aAAD,CAA9C;EACA,IAAMM,MAAM,gBAAGZ,KAAK,CAACa,SAAN,EAAf;EACAX,SAAS,CAAC,MAAM;IACd,IAAIU,MAAM,CAACE,OAAP,IAAkBH,QAAtB,EAAgC;MAC9BA,QAAQ,CAAC;QAAEI,WAAW,EAAEH,MAAM,CAACE;MAAtB,CAAD,CAAR;IACD,CAHa,CAId;;EACD,CALQ,EAKN,EALM,CAAT;;EAMA,SAASE,WAAT,CAAqBC,KAArB,EAAoC;IAClC,OAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC4DC,GAAD,IAAiB;MAC/E,OAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEJE,CAAD,IAAgB,CAAC;QAAE,KAAK,MAAP;QAAe,KAAK,MAApB;QAA4B,KAAK,OAAjC;QAA0C,KAAK;MAA/C,CAAD,EAAsFA,CAAtF,CAFX,CAAP;IAID,CANI,EAOJF,OAPI,CAQH,QARG,EASFE,CAAD,IAAgB,CAAC;MAAE,KAAK,MAAP;MAAe,KAAK,MAApB;MAA4B,KAAK,OAAjC;MAA0C,KAAK;IAA/C,CAAD,EAAsFA,CAAtF,CATb,CAAP;EAWD;;EAED,OAAOjB,OAAO,CAAC,MAAM;IACnB,IAAI,CAACO,QAAL,EAAe;MACb,oBAAO;QAAK,QAAQ,EAAEA,QAAQ,IAAI,EAA3B;QAA+B,GAAG,EAAEE,MAApC;QAA4C,SAAS,EAAKH,SAAL;MAArD,EAAP;IACD;;IACD,IAAMU,GAAG,GAAGf,MAAM,GACfiB,IADS,CACJ,UADI,EACQ;MAAEC,QAAQ,EAAE;IAAZ,CADR,EAETC,GAFS,CAELlB,WAFK,EAEQ;MAAEmB,aAAa,EAAE;IAAjB,CAFR,EAGTC,WAHS,qCAIyBhB,SAJzB,0EAIoGO,WAAW,CACrHN,QADqH,CAJ/G,qBAAZ;IAQA,oBAAOV,KAAK,CAAC0B,aAAN,CAAoB,KAApB,EAA2B;MAChCC,SAAS,EAAE,qBADqB;MAEhCC,uBAAuB,EAAE;QAAEC,MAAM,EAAEV,GAAG,CAACW;MAAd;IAFO,CAA3B,CAAP;EAID,CAhBa,EAgBX,CAACpB,QAAD,EAAWE,MAAX,EAAmBH,SAAnB,CAhBW,CAAd;AAiBD"
+  "mappings": "AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,SAA5B,EAAuCC,OAAvC,QAAsD,OAAtD;AACA,SAASC,MAAT,QAAuB,QAAvB;AACA,OAAOC,WAAP,MAAwB,mBAAxB;AAEA,SAASC,aAAT,QAA8B,eAA9B;;;AAEA,SAASC,WAAT,CAAqBC,KAArB,EAAoC;EAClC,OAAOA,KAAK,CACTC,OADI,CACI,qDADJ,EAC4DC,GAAD,IAAiB;IAC/E,OAAOA,GAAG,CAACD,OAAJ,CACL,QADK,EAEJE,CAAD,IAAgB,CAAC;MAAE,KAAK,MAAP;MAAe,KAAK,MAApB;MAA4B,KAAK,OAAjC;MAA0C,KAAK;IAA/C,CAAD,EAAsFA,CAAtF,CAFX,CAAP;EAID,CANI,EAOJF,OAPI,CAQH,QARG,EASFE,CAAD,IAAgB,CAAC;IAAE,KAAK,MAAP;IAAe,KAAK,MAApB;IAA4B,KAAK,OAAjC;IAA0C,KAAK;EAA/C,CAAD,EAAsFA,CAAtF,CATb,CAAP;AAWD;;AAID,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAwC;EACrD,IAAM;IAAEC;EAAF,IAAgBD,KAAtB;EACA,IAAM;IAAEE,QAAQ,GAAG,EAAb;IAAiBC,eAAjB;IAAkCC;EAAlC,IAA+ChB,UAAU,CAACK,aAAD,CAA/D;EACA,IAAMY,MAAM,gBAAGlB,KAAK,CAACmB,SAAN,EAAf;EACAjB,SAAS,CAAC,MAAM;IACd,IAAIgB,MAAM,CAACE,OAAP,IAAkBH,QAAtB,EAAgC;MAC9BA,QAAQ,CAAC;QAAEI,WAAW,EAAEH,MAAM,CAACE;MAAtB,CAAD,CAAR;IACD,CAHa,CAId;;EACD,CALQ,EAKN,EALM,CAAT;EAOA,OAAOjB,OAAO,CAAC,MAAM;IACnB,IAAI,CAACY,QAAL,EAAe;MACb,oBAAO;QAAK,GAAG,EAAEG,MAAV;QAAkB,SAAS,EAAKJ,SAAL;MAA3B,EAAP;IACD;;IACD,IAAIQ,KAAK,uCAAoCR,SAApC,0EAA+GP,WAAW,CACjIQ,QADiI,CAA1H,oBAAT;;IAIA,IAAIC,eAAJ,EAAqB;MACnB,IAAI;QACFM,KAAK,GAAGlB,MAAM,GACXmB,IADK,CACA,UADA,EACY;UAAEC,QAAQ,EAAE;QAAZ,CADZ,EAELC,GAFK,CAEDpB,WAFC,EAEY;UAAEqB,aAAa,EAAE;QAAjB,CAFZ,EAGLC,WAHK,CAGOL,KAHP,EAILM,QAJK,EAAR;MAKD,CAND,CAME,OAAOC,KAAP,EAAc,CAAE;IACnB;;IAED,oBAAO7B,KAAK,CAAC8B,aAAN,CAAoB,KAApB,EAA2B;MAChCC,SAAS,EAAE,qBADqB;MAEhCC,uBAAuB,EAAE;QAAEC,MAAM,EAAEX,KAAK,IAAI;MAAnB;IAFO,CAA3B,CAAP;EAID,CAtBa,EAsBX,CAACP,QAAD,EAAWG,MAAX,EAAmBJ,SAAnB,CAtBW,CAAd;AAuBD"
 }

package/esm/components/TextArea/index.js

@@ -24,7 +24,6 @@ export default function TextArea(props) {
     markdown,
     scrollTop,
     commands,
-    highlightEnable,
     extraCommands,
     dispatch
   } = useContext(EditorContext);
@@ -56,10 +55,8 @@ export default function TextArea(props) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []); // @ts-ignore
+  // const textStyle: React.CSSProperties = highlightEnable ? { WebkitTextFillColor: 'transparent' } : { };
 
-  var textStyle = highlightEnable ? {} : {
-    '-webkit-text-fill-color': 'inherit'
-  };
   return /*#__PURE__*/_jsx("div", {
     ref: warp,
     className: prefixCls + "-aree " + (className || ''),
@@ -89,13 +86,11 @@ export default function TextArea(props) {
       }), {
         ref: textRef
       }) : /*#__PURE__*/_jsxs(Fragment, {
-        children: [highlightEnable && /*#__PURE__*/_jsx(Markdown, {
+        children: [/*#__PURE__*/_jsx(Markdown, {
           prefixCls: prefixCls
         }), /*#__PURE__*/_jsx(Textarea, _extends({
           prefixCls: prefixCls
-        }, otherProps, {
-          style: textStyle
-        }))]
+        }, otherProps))]
       })
     })
   });

package/esm/components/TextArea/index.js.map

@@ -20,7 +20,6 @@
     "markdown",
     "scrollTop",
     "commands",
-    "highlightEnable",
     "extraCommands",
     "dispatch",
     "textRef",
@@ -34,7 +33,6 @@
     "undefined",
     "commandOrchestrator",
     "textarea",
-    "textStyle",
     "cloneElement",
     "value",
     "autoComplete",
@@ -51,7 +49,7 @@
     "../../../src/components/TextArea/index.tsx"
   ],
   "sourcesContent": [
-    "import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n  dispatch: ContextStore['dispatch'];\n  onChange?: TextAreaProps['onChange'];\n  useContext?: {\n    commands: ContextStore['commands'];\n    extraCommands: ContextStore['extraCommands'];\n    commandOrchestrator?: TextAreaCommandOrchestrator;\n  };\n  shortcuts?: (\n    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n    commands: ICommand[],\n    commandOrchestrator?: TextAreaCommandOrchestrator,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n  ) => void;\n};\n\nexport interface ITextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n    IProps {\n  value?: string;\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n  renderTextarea?: (\n    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n    opts: RenderTextareaHandle,\n  ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n  text?: HTMLTextAreaElement;\n  warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n  const { markdown, scrollTop, commands, highlightEnable, extraCommands, dispatch } = useContext(EditorContext);\n  const textRef = React.useRef<HTMLTextAreaElement>(null);\n  const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n  const warp = React.createRef<HTMLDivElement>();\n  useEffect(() => {\n    const state: ContextStore = {};\n    if (warp.current) {\n      state.textareaWarp = warp.current || undefined;\n      warp.current.scrollTop = scrollTop || 0;\n    }\n    if (dispatch) {\n      dispatch({ ...state });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (textRef.current && dispatch) {\n      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n      executeRef.current = commandOrchestrator;\n      dispatch({ textarea: textRef.current, commandOrchestrator });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // @ts-ignore\n  const textStyle: React.CSSProperties = highlightEnable ? {} : { '-webkit-text-fill-color': 'inherit' };\n\n  return (\n    <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n      <div className={`${prefixCls}-text`}>\n        {renderTextarea ? (\n          React.cloneElement(\n            renderTextarea(\n              {\n                ...otherProps,\n                value: markdown,\n                autoComplete: 'off',\n                autoCorrect: 'off',\n                spellCheck: 'false',\n                autoCapitalize: 'off',\n                className: `${prefixCls}-text-input`,\n                style: {\n                  WebkitTextFillColor: 'inherit',\n                  overflow: 'auto',\n                },\n              },\n              {\n                dispatch,\n                onChange: otherProps.onChange,\n                shortcuts,\n                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n              },\n            ),\n            {\n              ref: textRef,\n            },\n          )\n        ) : (\n          <Fragment>\n            {highlightEnable && <Markdown prefixCls={prefixCls} />}\n            <Textarea prefixCls={prefixCls} {...otherProps} style={textStyle} />\n          </Fragment>\n        )}\n      </div>\n    </div>\n  );\n}\n"
+    "import React, { useEffect, Fragment, useContext } from 'react';\nimport { EditorContext, ContextStore, ExecuteCommandState } from '../../Context';\nimport shortcuts from './shortcuts';\nimport Markdown from './Markdown';\nimport Textarea, { TextAreaProps } from './Textarea';\nimport { IProps } from '../../Editor';\nimport { TextAreaCommandOrchestrator, ICommand } from '../../commands';\nimport './index.less';\n\ntype RenderTextareaHandle = {\n  dispatch: ContextStore['dispatch'];\n  onChange?: TextAreaProps['onChange'];\n  useContext?: {\n    commands: ContextStore['commands'];\n    extraCommands: ContextStore['extraCommands'];\n    commandOrchestrator?: TextAreaCommandOrchestrator;\n  };\n  shortcuts?: (\n    e: KeyboardEvent | React.KeyboardEvent<HTMLTextAreaElement>,\n    commands: ICommand[],\n    commandOrchestrator?: TextAreaCommandOrchestrator,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n  ) => void;\n};\n\nexport interface ITextAreaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onScroll'>,\n    IProps {\n  value?: string;\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n  renderTextarea?: (\n    props: React.TextareaHTMLAttributes<HTMLTextAreaElement> | React.HTMLAttributes<HTMLDivElement>,\n    opts: RenderTextareaHandle,\n  ) => JSX.Element;\n}\n\nexport type TextAreaRef = {\n  text?: HTMLTextAreaElement;\n  warp?: HTMLDivElement;\n};\n\nexport default function TextArea(props: ITextAreaProps) {\n  const { prefixCls, className, onScroll, renderTextarea, ...otherProps } = props || {};\n  const { markdown, scrollTop, commands, extraCommands, dispatch } = useContext(EditorContext);\n  const textRef = React.useRef<HTMLTextAreaElement>(null);\n  const executeRef = React.useRef<TextAreaCommandOrchestrator>();\n  const warp = React.createRef<HTMLDivElement>();\n  useEffect(() => {\n    const state: ContextStore = {};\n    if (warp.current) {\n      state.textareaWarp = warp.current || undefined;\n      warp.current.scrollTop = scrollTop || 0;\n    }\n    if (dispatch) {\n      dispatch({ ...state });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (textRef.current && dispatch) {\n      const commandOrchestrator = new TextAreaCommandOrchestrator(textRef.current);\n      executeRef.current = commandOrchestrator;\n      dispatch({ textarea: textRef.current, commandOrchestrator });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // @ts-ignore\n  // const textStyle: React.CSSProperties = highlightEnable ? { WebkitTextFillColor: 'transparent' } : { };\n\n  return (\n    <div ref={warp} className={`${prefixCls}-aree ${className || ''}`} onScroll={onScroll}>\n      <div className={`${prefixCls}-text`}>\n        {renderTextarea ? (\n          React.cloneElement(\n            renderTextarea(\n              {\n                ...otherProps,\n                value: markdown,\n                autoComplete: 'off',\n                autoCorrect: 'off',\n                spellCheck: 'false',\n                autoCapitalize: 'off',\n                className: `${prefixCls}-text-input`,\n                style: {\n                  WebkitTextFillColor: 'inherit',\n                  overflow: 'auto',\n                },\n              },\n              {\n                dispatch,\n                onChange: otherProps.onChange,\n                shortcuts,\n                useContext: { commands, extraCommands, commandOrchestrator: executeRef.current },\n              },\n            ),\n            {\n              ref: textRef,\n            },\n          )\n        ) : (\n          <Fragment>\n            <Markdown prefixCls={prefixCls} />\n            <Textarea prefixCls={prefixCls} {...otherProps} />\n          </Fragment>\n        )}\n      </div>\n    </div>\n  );\n}\n"
   ],
-  "mappings": "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"
+  "mappings": ";;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,QAA3B,EAAqCC,UAArC,QAAuD,OAAvD;AACA,SAASC,aAAT,QAAiE,eAAjE;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,QAAP,MAAwC,YAAxC;AAEA,SAASC,2BAAT,QAAsD,gBAAtD;AACA;;;AAmCA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyC;EACtD,WAA0EA,KAAK,IAAI,EAAnF;EAAA,IAAM;IAAEC,SAAF;IAAaC,SAAb;IAAwBC,QAAxB;IAAkCC;EAAlC,CAAN;EAAA,IAA2DC,UAA3D;;EACA,IAAM;IAAEC,QAAF;IAAYC,SAAZ;IAAuBC,QAAvB;IAAiCC,aAAjC;IAAgDC;EAAhD,IAA6DjB,UAAU,CAACC,aAAD,CAA7E;EACA,IAAMiB,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAAkC,IAAlC,CAAhB;EACA,IAAMC,UAAU,GAAGvB,KAAK,CAACsB,MAAN,EAAnB;EACA,IAAME,IAAI,gBAAGxB,KAAK,CAACyB,SAAN,EAAb;EACAxB,SAAS,CAAC,MAAM;IACd,IAAMyB,KAAmB,GAAG,EAA5B;;IACA,IAAIF,IAAI,CAACG,OAAT,EAAkB;MAChBD,KAAK,CAACE,YAAN,GAAqBJ,IAAI,CAACG,OAAL,IAAgBE,SAArC;MACAL,IAAI,CAACG,OAAL,CAAaV,SAAb,GAAyBA,SAAS,IAAI,CAAtC;IACD;;IACD,IAAIG,QAAJ,EAAc;MACZA,QAAQ,cAAMM,KAAN,EAAR;IACD,CARa,CASd;;EACD,CAVQ,EAUN,EAVM,CAAT;EAYAzB,SAAS,CAAC,MAAM;IACd,IAAIoB,OAAO,CAACM,OAAR,IAAmBP,QAAvB,EAAiC;MAC/B,IAAMU,oBAAmB,GAAG,IAAItB,2BAAJ,CAAgCa,OAAO,CAACM,OAAxC,CAA5B;;MACAJ,UAAU,CAACI,OAAX,GAAqBG,oBAArB;MACAV,QAAQ,CAAC;QAAEW,QAAQ,EAAEV,OAAO,CAACM,OAApB;QAA6BG,mBAAmB,EAAnBA;MAA7B,CAAD,CAAR;IACD,CALa,CAMd;;EACD,CAPQ,EAON,EAPM,CAAT,CAlBsD,CA2BtD;EACA;;EAEA,oBACE;IAAK,GAAG,EAAEN,IAAV;IAAgB,SAAS,EAAKb,SAAL,eAAuBC,SAAS,IAAI,EAApC,CAAzB;IAAmE,QAAQ,EAAEC,QAA7E;IAAA,uBACE;MAAK,SAAS,EAAKF,SAAL,UAAd;MAAA,UACGG,cAAc,gBACbd,KAAK,CAACgC,YAAN,CACElB,cAAc,cAEPC,UAFO;QAGVkB,KAAK,EAAEjB,QAHG;QAIVkB,YAAY,EAAE,KAJJ;QAKVC,WAAW,EAAE,KALH;QAMVC,UAAU,EAAE,OANF;QAOVC,cAAc,EAAE,KAPN;QAQVzB,SAAS,EAAKD,SAAL,gBARC;QASV2B,KAAK,EAAE;UACLC,mBAAmB,EAAE,SADhB;UAELC,QAAQ,EAAE;QAFL;MATG,IAcZ;QACEpB,QADF;QAEEqB,QAAQ,EAAE1B,UAAU,CAAC0B,QAFvB;QAGEpC,SAHF;QAIEF,UAAU,EAAE;UAAEe,QAAF;UAAYC,aAAZ;UAA2BW,mBAAmB,EAAEP,UAAU,CAACI;QAA3D;MAJd,CAdY,CADhB,EAsBE;QACEe,GAAG,EAAErB;MADP,CAtBF,CADa,gBA4Bb,MAAC,QAAD;QAAA,wBACE,KAAC,QAAD;UAAU,SAAS,EAAEV;QAArB,EADF,eAEE,KAAC,QAAD;UAAU,SAAS,EAAEA;QAArB,GAAoCI,UAApC,EAFF;MAAA;IA7BJ;EADF,EADF;AAuCD"
 }

package/esm/index.css

@@ -20,6 +20,10 @@
   width: 50%;
   height: 100%;
 }
+.w-md-editor-text-pre > code {
+  word-break: break-word !important;
+  white-space: pre-wrap !important;
+}
 .w-md-editor-preview {
   width: 50%;
   box-sizing: border-box;

package/esm/index.less

@@ -22,6 +22,10 @@
     width: 50%;
     height: 100%;
   }
+  &-text-pre > code {
+    word-break: break-word !important;
+    white-space: pre-wrap !important;
+  }
   &-preview {
     width: 50%;
     box-sizing: border-box;
@@ -35,6 +39,8 @@
     border-radius: 0 0 5px 0;
     display: flex;
     flex-direction: column;
+    // word-break: break-word !important;
+    // white-space: pre-wrap !important;
     .anchor {
       display: none;
     }

package/lib/Context.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -13,10 +13,10 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _react = _interopRequireDefault(require("react"));
 
 function reducer(state, action) {
-  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), action);
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
 }
 
-var EditorContext = /*#__PURE__*/_react.default.createContext({
+var EditorContext = /*#__PURE__*/_react["default"].createContext({
   markdown: ''
 });
 

package/lib/Context.js.map

@@ -15,5 +15,5 @@
   "sourcesContent": [
     "import React from 'react';\nimport { ICommand, TextAreaCommandOrchestrator } from './commands';\n\nexport type PreviewType = 'live' | 'edit' | 'preview';\n\nexport type ContextStore = {\n  commands?: ICommand<string>[];\n  extraCommands?: ICommand<string>[];\n  markdown?: string;\n  preview?: PreviewType;\n  height?: number;\n  fullscreen?: boolean;\n  highlightEnable?: boolean;\n  autoFocus?: boolean;\n  textarea?: HTMLTextAreaElement;\n  commandOrchestrator?: TextAreaCommandOrchestrator;\n  textareaWarp?: HTMLDivElement;\n  textareaPre?: HTMLPreElement;\n  container?: HTMLDivElement | null;\n  dispatch?: React.Dispatch<ContextStore>;\n  barPopup?: Record<string, boolean>;\n  scrollTop?: number;\n  scrollTopPreview?: number;\n  tabSize?: number;\n  defaultTabEnable?: boolean;\n};\n\nexport type ExecuteCommandState = Pick<ContextStore, 'fullscreen' | 'preview' | 'highlightEnable'>;\n\nexport function reducer(state: ContextStore, action: ContextStore) {\n  return { ...state, ...action };\n}\n\nexport const EditorContext = React.createContext<ContextStore>({ markdown: '' });\n"
   ],
-  "mappings": ";;;;;;;;;;;;AAAA;;AA6BO,SAASA,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;EACjE,mEAAYD,KAAZ,GAAsBC,MAAtB;AACD;;AAEM,IAAMC,aAAa,gBAAGC,cAAA,CAAMC,aAAN,CAAkC;EAAEC,QAAQ,EAAE;AAAZ,CAAlC,CAAtB"
+  "mappings": ";;;;;;;;;;;;AAAA;;AA6BO,SAASA,OAAT,CAAiBC,KAAjB,EAAsCC,MAAtC,EAA4D;EACjE,yEAAYD,KAAZ,GAAsBC,MAAtB;AACD;;AAEM,IAAMC,aAAa,gBAAGC,iBAAA,CAAMC,aAAN,CAAkC;EAAEC,QAAQ,EAAE;AAAZ,CAAlC,CAAtB"
 }

package/lib/Editor.d.ts

@@ -39,6 +39,10 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /**
      * Show drag and drop tool. Set the height of the editor.
      */
+    visibleDragbar?: boolean;
+    /**
+     * @deprecated use `visibleDragbar`
+     */
     visiableDragbar?: boolean;
     /**
      * Show markdown preview.
@@ -53,11 +57,11 @@ export interface MDEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     overflow?: boolean;
     /**
-     * Maximum drag height. `visiableDragbar=true`
+     * Maximum drag height. `visibleDragbar=true`
      */
     maxHeight?: number;
     /**
-     * Minimum drag height. `visiableDragbar=true`
+     * Minimum drag height. `visibleDragbar=true`
      */
     minHeight?: number;
     /**