@uiw/react-markdown-editor/esm/index.js

A markdown editor with preview, implemented with React.js and TypeScript.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "className", "onChange", "toolbars", "toolbarsMode", "visible", "renderPreview", "visibleEditor", "hideToolbar", "previewProps", "extensions"];
import React, { useState, useRef, useImperativeHandle } from 'react';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
import { EditorView } from '@codemirror/view';
import CodeMirror from '@uiw/react-codemirror';
import MarkdownPreview from '@uiw/react-markdown-preview';
import ToolBar from './components/ToolBar';
import { getCommands, getModeCommands } from './commands';
import { defaultTheme } from './theme';
import "./index.css";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export * from './commands';
export var scrollerStyle = EditorView.theme({
  '&.cm-editor, & .cm-scroller': {
    borderBottomRightRadius: '3px',
    borderBottomLeftRadius: '3px'
  }
});
export default /*#__PURE__*/React.forwardRef(MarkdownEditor);

function MarkdownEditor(props, ref) {
  var {
    prefixCls = 'md-editor',
    className,
    onChange: _onChange,
    toolbars = getCommands(),
    toolbarsMode = getModeCommands(),
    visible = true,
    renderPreview,
    visibleEditor = true,
    hideToolbar = true,
    previewProps = {},
    extensions = []
  } = props,
      codemirrorProps = _objectWithoutPropertiesLoose(props, _excluded);

  var [value, setValue] = useState(props.value || '');
  var codeMirror = useRef(null);
  var previewContainer = useRef(null);
  var container = useRef(null);
  var containerEditor = useRef(null);
  useImperativeHandle(ref, () => ({
    editor: codeMirror,
    preview: previewContainer
  }), [codeMirror, previewContainer]);
  var toolBarProps = {
    editor: codeMirror,
    preview: previewContainer,
    container: container,
    containerEditor: containerEditor,
    editorProps: props
  };
  var height = typeof codemirrorProps.height === 'number' ? codemirrorProps.height + "px" : codemirrorProps.height;
  var extensionsData = [markdown({
    base: markdownLanguage,
    codeLanguages: languages
  }), scrollerStyle, ...extensions];
  previewProps['className'] = prefixCls + "-preview";
  previewProps['source'] = value;
  return /*#__PURE__*/_jsxs("div", {
    className: (prefixCls || '') + " wmde-markdown-var " + (className || ''),
    ref: container,
    children: [hideToolbar && /*#__PURE__*/_jsxs("div", {
      children: [/*#__PURE__*/_jsx(ToolBar, _extends({}, toolBarProps, {
        toolbars: toolbarsMode,
        mode: true
      })), /*#__PURE__*/_jsx(ToolBar, _extends({}, toolBarProps, {
        toolbars: toolbars
      }))]
    }), /*#__PURE__*/_jsxs("div", {
      className: prefixCls + "-content",
      style: {
        height: codemirrorProps.height
      },
      children: [/*#__PURE__*/_jsx("div", {
        className: prefixCls + "-content-editor",
        ref: containerEditor,
        children: visibleEditor && /*#__PURE__*/_jsx(CodeMirror, _extends({
          theme: defaultTheme
        }, codemirrorProps, {
          extensions: extensionsData,
          height: height,
          ref: codeMirror,
          onChange: (value, viewUpdate) => {
            setValue(value);
            _onChange && _onChange(value, viewUpdate);
          }
        }))
      }), renderPreview ? renderPreview(previewProps, !!visible) : /*#__PURE__*/_jsx(MarkdownPreview, _extends({}, previewProps, {
        "data-visible": !!visible,
        ref: previewContainer
      }))]
    })]
  });
}
//# sourceMappingURL=index.js.map