@uiw/react-markdown-editor
Version:
A markdown editor with preview, implemented with React.js and TypeScript.
224 lines (223 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {
scrollerStyle: true
};
exports.scrollerStyle = exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _langMarkdown = require("@codemirror/lang-markdown");
var _languageData = require("@codemirror/language-data");
var _view = require("@codemirror/view");
var events = _interopRequireWildcard(require("@uiw/codemirror-extensions-events"));
var _reactCodemirror = _interopRequireDefault(require("@uiw/react-codemirror"));
var _reactMarkdownPreview = _interopRequireWildcard(require("@uiw/react-markdown-preview"));
Object.keys(_reactMarkdownPreview).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _reactMarkdownPreview[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _reactMarkdownPreview[key];
}
});
});
var _ToolBar = _interopRequireDefault(require("./components/ToolBar"));
var _commands = require("./commands");
Object.keys(_commands).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _commands[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _commands[key];
}
});
});
var _theme = require("./theme");
Object.keys(_theme).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _theme[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _theme[key];
}
});
});
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "className", "onChange", "toolbars", "toolbarsMode", "toolbarsFilter", "visible", "renderPreview", "visibleEditor", "hideToolbar", "toolbarBottom", "enableScroll", "previewProps", "extensions", "previewWidth", "reExtensions"];
var scrollerStyle = _view.EditorView.theme({
'&.cm-editor, & .cm-scroller': {
borderBottomRightRadius: '3px',
borderBottomLeftRadius: '3px'
}
});
exports.scrollerStyle = scrollerStyle;
var MarkdownEditor = /*#__PURE__*/_react["default"].forwardRef(MarkdownEditorInternal);
MarkdownEditor.Markdown = _reactMarkdownPreview["default"];
var _default = MarkdownEditor;
exports["default"] = _default;
function MarkdownEditorInternal(props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'md-editor' : _props$prefixCls,
className = props.className,
onChange = props.onChange,
_props$toolbars = props.toolbars,
toolbars = _props$toolbars === void 0 ? (0, _commands.getCommands)() : _props$toolbars,
_props$toolbarsMode = props.toolbarsMode,
toolbarsMode = _props$toolbarsMode === void 0 ? (0, _commands.getModeCommands)() : _props$toolbarsMode,
toolbarsFilter = props.toolbarsFilter,
_props$visible = props.visible,
visible = _props$visible === void 0 ? true : _props$visible,
renderPreview = props.renderPreview,
_props$visibleEditor = props.visibleEditor,
visibleEditor = _props$visibleEditor === void 0 ? true : _props$visibleEditor,
_props$hideToolbar = props.hideToolbar,
hideToolbar = _props$hideToolbar === void 0 ? true : _props$hideToolbar,
_props$toolbarBottom = props.toolbarBottom,
toolbarBottom = _props$toolbarBottom === void 0 ? false : _props$toolbarBottom,
_props$enableScroll = props.enableScroll,
enableScroll = _props$enableScroll === void 0 ? true : _props$enableScroll,
_props$previewProps = props.previewProps,
previewProps = _props$previewProps === void 0 ? {} : _props$previewProps,
_props$extensions = props.extensions,
extensions = _props$extensions === void 0 ? [] : _props$extensions,
_props$previewWidth = props.previewWidth,
previewWidth = _props$previewWidth === void 0 ? '50%' : _props$previewWidth,
reExtensions = props.reExtensions,
codemirrorProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)(props.value || ''),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var codeMirror = (0, _react.useRef)(null);
var container = (0, _react.useRef)(null);
var containerEditor = (0, _react.useRef)(null);
var preview = (0, _react.useRef)(null);
var active = (0, _react.useRef)('editor');
(0, _react.useImperativeHandle)(ref, function () {
return {
editor: codeMirror,
preview: preview
};
}, [codeMirror]);
var toolBarProps = {
preview: preview,
editor: codeMirror,
container: container,
containerEditor: containerEditor,
editorProps: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
previewWidth: previewWidth
})
};
var height = typeof codemirrorProps.height === 'number' ? "".concat(codemirrorProps.height, "px") : codemirrorProps.height;
var previewScrollHandle = (0, _react.useCallback)(function (event) {
if (!enableScroll) return;
var target = event.target;
var percent = target.scrollTop / target.scrollHeight;
if (active.current === 'editor' && preview.current) {
var _preview$current;
var previewHeihgt = ((_preview$current = preview.current) === null || _preview$current === void 0 ? void 0 : _preview$current.scrollHeight) || 0;
preview.current.scrollTop = previewHeihgt * percent;
} else if (codeMirror.current && codeMirror.current.view) {
var editorScrollDom = codeMirror.current.view.scrollDOM;
var editorScrollHeihgt = codeMirror.current.view.scrollDOM.scrollHeight || 0;
editorScrollDom.scrollTop = editorScrollHeihgt * percent;
}
}, [enableScroll]);
var mouseoverHandle = function mouseoverHandle() {
return active.current = 'preview';
};
var mouseleaveHandle = function mouseleaveHandle() {
return active.current = 'editor';
};
(0, _react.useEffect)(function () {
var $preview = preview.current;
if ($preview && enableScroll) {
$preview.addEventListener('mouseover', mouseoverHandle, false);
$preview.addEventListener('mouseleave', mouseleaveHandle, false);
$preview.addEventListener('scroll', previewScrollHandle, false);
}
return function () {
if ($preview && enableScroll) {
$preview.removeEventListener('mouseover', mouseoverHandle);
$preview.removeEventListener('mouseleave', mouseoverHandle);
$preview.addEventListener('mouseleave', previewScrollHandle, false);
}
};
}, [preview, enableScroll, previewScrollHandle]);
var scrollExtensions = events.scroll({
scroll: previewScrollHandle
});
var extensionsData = reExtensions ? reExtensions : [(0, _langMarkdown.markdown)({
base: _langMarkdown.markdownLanguage,
codeLanguages: _languageData.languages
}), scrollerStyle].concat((0, _toConsumableArray2["default"])(extensions));
if (enableScroll) {
extensionsData.push(scrollExtensions);
}
var clsPreview = "".concat(prefixCls, "-preview");
var cls = [prefixCls, 'wmde-markdown-var', className].filter(Boolean).join(' ');
previewProps['source'] = value;
var handleChange = function handleChange(value, viewUpdate) {
setValue(value);
onChange && onChange(value, viewUpdate);
};
var conentView = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "".concat(prefixCls, "-content"),
style: {
height: codemirrorProps.height
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "".concat(prefixCls, "-content-editor"),
ref: containerEditor,
children: visibleEditor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactCodemirror["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
theme: _theme.defaultTheme
}, codemirrorProps), {}, {
extensions: extensionsData,
height: height,
ref: codeMirror,
onChange: handleChange
}))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: clsPreview,
ref: preview,
children: renderPreview ? renderPreview(previewProps, !!visible) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMarkdownPreview["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previewProps), {}, {
"data-visible": !!visible
}))
})]
});
var clsToolbar = [prefixCls && "".concat(prefixCls, "-toolbar-warp"), prefixCls && toolbarBottom && "".concat(prefixCls, "-toolbar-bottom")].filter(Boolean).join(' ');
var tools = toolbarsFilter ? toolbars.filter(toolbarsFilter) : toolbars;
var toolsMode = toolbarsFilter ? toolbarsMode.filter(toolbarsFilter) : toolbarsMode;
var toolbarView = hideToolbar && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: clsToolbar,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, toolBarProps), {}, {
toolbars: tools
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolBar["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, toolBarProps), {}, {
toolbars: toolsMode,
mode: true
}))]
});
var child = toolbarBottom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [conentView, toolbarView]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [toolbarView, conentView]
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: cls,
ref: container,
children: child
});
}