@dslate/dslate
Version:
一个Ant Design风格的富文本编辑器 - An Ant Design style rich editor based on Slate
55 lines • 2.88 kB
JavaScript
import "antd/es/config-provider/style";
import _ConfigProvider from "antd/es/config-provider";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _excluded = ["value", "onChange"];
import React, { forwardRef, useContext } from 'react';
import classNames from 'classnames';
import { useFocused } from 'slate-react';
import SizeContext from "antd/es/config-provider/SizeContext";
import DSlate, { usePluginHelper } from '@dslate/core';
import { Toolbar, Progress, Editable, Counter } from '@dslate/component';
import './index.less';
var AntdStyleEditor = function AntdStyleEditor(_ref) {
var _ref$bordered = _ref.bordered,
bordered = _ref$bordered === void 0 ? true : _ref$bordered,
customizeSize = _ref.size,
_ref$showCount = _ref.showCount,
showCount = _ref$showCount === void 0 ? false : _ref$showCount,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
placeholder = _ref.placeholder,
toolbar = _ref.toolbar,
className = _ref.className;
var focused = useFocused();
var _usePluginHelper = usePluginHelper(),
getPrefixCls = _usePluginHelper.getPrefixCls;
var prefixCls = getPrefixCls === null || getPrefixCls === void 0 ? void 0 : getPrefixCls('');
return /*#__PURE__*/React.createElement(SizeContext.Consumer, null, function (size) {
var _classNames;
var realSize = customizeSize || size;
return /*#__PURE__*/React.createElement("div", {
className: classNames("".concat(prefixCls), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-sm"), realSize === 'small'), _defineProperty(_classNames, "".concat(prefixCls, "-lg"), realSize === 'large'), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-borderless"), !bordered), _defineProperty(_classNames, "".concat(prefixCls, "-focused"), focused), _classNames))
}, /*#__PURE__*/React.createElement(Toolbar, {
toolbar: toolbar
}), /*#__PURE__*/React.createElement(Progress, null), /*#__PURE__*/React.createElement(Editable, {
disabled: disabled,
placeholder: placeholder
}), /*#__PURE__*/React.createElement(Counter, {
showCount: showCount
}));
});
};
export default /*#__PURE__*/forwardRef(function (_ref2, ref) {
var value = _ref2.value,
onChange = _ref2.onChange,
rest = _objectWithoutProperties(_ref2, _excluded);
var _useContext = useContext(_ConfigProvider.ConfigContext),
getAntdPrefixCls = _useContext.getPrefixCls;
return /*#__PURE__*/React.createElement(DSlate, {
ref: ref,
value: value,
onChange: onChange,
prefixCls: getAntdPrefixCls('dslate')
}, /*#__PURE__*/React.createElement(AntdStyleEditor, rest));
});