@titaui/pc 1.10.37 → 1.10.40

package/lib/components/rich-editor/ui/editor/index.css

@@ -0,0 +1,144 @@
+.tita-rich-editor {
+  min-height: 300px;
+  cursor: text;
+  li-line-height: 38px;
+}
+
+.tita-rich-editor--disabled {
+  cursor: default;
+}
+
+.tita-rich-editor .ProseMirror {
+  min-height: 100%;
+  outline: none;
+  font-size: 16px;
+}
+
+.tita-rich-editor h1 {
+  font-size: 26px;
+  font-weight: 500;
+  color: #141c28;
+  line-height: 38px;
+  padding: 36px 0 20px;
+}
+
+.tita-rich-editor h2 {
+  font-size: 22px;
+  font-weight: 500;
+  color: #141c28;
+  line-height: 32px;
+  padding: 20px 0 8px;
+}
+
+.tita-rich-editor h3 {
+  font-size: 20px;
+  font-weight: 500;
+  color: #3f4755;
+  line-height: 30px;
+  padding: 18px 0 8px;
+}
+
+.tita-rich-editor p {
+  font-size: 16px;
+  font-weight: 400;
+  color: #3f4755;
+  line-height: 26px;
+  padding: 6px 0;
+}
+
+.tita-rich-editor ol,
+  .tita-rich-editor ul {
+  padding-left: 22px;
+}
+
+.tita-rich-editor ol > li {
+  list-style: decimal outside !important;
+}
+
+.tita-rich-editor ol ol > li {
+  list-style: lower-latin outside !important;
+}
+
+.tita-rich-editor ol ol ol > li {
+  list-style: lower-roman outside !important;
+}
+
+.tita-rich-editor ol ol ol ol > li {
+  list-style: decimal outside !important;
+}
+
+.tita-rich-editor ol ol ol ol ol > li {
+  list-style: lower-latin outside !important;
+}
+
+.tita-rich-editor ol ol ol ol ol ol > li {
+  list-style: lower-roman outside !important;
+}
+
+.tita-rich-editor ul > li {
+  list-style: disc outside !important;
+}
+
+.tita-rich-editor ul ul > li {
+  list-style: circle outside !important;
+}
+
+.tita-rich-editor ul ul ul > li {
+  list-style: square outside !important;
+}
+
+.tita-rich-editor ul ul ul ul > li {
+  list-style: disc outside !important;
+}
+
+.tita-rich-editor ul ul ul ul ul > li {
+  list-style: circle outside !important;
+}
+
+.tita-rich-editor ul ul ul ul ul ul > li {
+  list-style: square outside !important;
+}
+
+.tita-rich-editor li::marker {
+  color: #2879ff;
+}
+
+.tita-rich-editor-ul .tita-rich-editor-li::marker {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: #2879ff;
+  top: 10.5px;
+  left: 3px;
+}
+
+.tita-rich-editor-li {
+  position: relative;
+}
+
+.tita-rich-editor-li::before {
+  display: inline-block;
+  position: absolute;
+  left: 0;
+  font-weight: 400;
+  color: #2879ff;
+  line-height: 26px;
+}
+
+.tita-rich-editor blockquote {
+  position: relative;
+  padding-left: 22px;
+  margin: 0;
+}
+
+.tita-rich-editor blockquote::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background-color: #2879ff;
+  border-radius: 2px;
+}

package/lib/components/rich-editor/ui/editor/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorView = require("prosemirror-view");
+
+var _prosemirrorModel = require("prosemirror-model");
+
+var _schema = _interopRequireDefault(require("../../basic/schema"));
+
+var _editor = _interopRequireDefault(require("../../models/editor"));
+
+var _util = require("../../plugins/util");
+
+var _event = require("../../utils/event");
+
+var _events = require("../../consts/events");
+
+var _plugins = require("../../plugins");
+
+require("./index.css");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var preCls = 'tita-rich-editor';
+var defaultPlugins = [new _plugins.HeadingPlugin(), new _plugins.StrongPlugin(), new _plugins.ColorPlugin(), new _plugins.UnderLinePlugin(), new _plugins.DeleteLinePlugin(), new _plugins.ListPlugin(), new _plugins.AlignmentPlugin(), new _plugins.BlockquotePlugin(), new _plugins.LinkPlugin()];
+
+function RichEditor(_ref, ref) {
+  var _ref$plugins = _ref.plugins,
+      plugins = _ref$plugins === void 0 ? defaultPlugins : _ref$plugins,
+      onInit = _ref.onInit,
+      _ref$editable = _ref.editable,
+      _editable = _ref$editable === void 0 ? true : _ref$editable,
+      defaultState = _ref.defaultState;
+
+  var container = (0, _react.useRef)();
+  var dataRef = (0, _react.useRef)({});
+  (0, _react.useEffect)(function () {
+    var dispatcher = new _event.EventDispatcher();
+
+    var _applyPlugins = (0, _util.applyPlugins)(plugins, _schema["default"], dispatcher),
+        nativePlugins = _applyPlugins.nativePlugins,
+        nodes = _applyPlugins.nodes,
+        marks = _applyPlugins.marks,
+        controllers = _applyPlugins.controllers;
+
+    var pluginedSchema = new _prosemirrorModel.Schema({
+      nodes: nodes,
+      marks: marks
+    });
+    var stateConf = {
+      schema: pluginedSchema,
+      plugins: nativePlugins
+    };
+
+    var state = _prosemirrorState.EditorState.create(stateConf); // debugger
+
+
+    if (defaultState) {
+      try {
+        var jsonState = typeof defaultState == 'string' ? JSON.parse(defaultState) : defaultState;
+        state = _prosemirrorState.EditorState.fromJSON(stateConf, jsonState);
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    var pmEditor = new _prosemirrorView.EditorView(container.current, {
+      state: state,
+      editable: function editable() {
+        return _editable;
+      },
+      dispatchTransaction: function dispatchTransaction(tr) {
+        var _this$state$applyTran = this.state.applyTransaction(tr),
+            state = _this$state$applyTran.state;
+
+        this.updateState(state);
+        dispatcher.emit(_events.EDITOR_STATE_CHANGE, state);
+      }
+    });
+    dataRef.current.editor = new _editor["default"]({
+      view: pmEditor,
+      controllers: controllers,
+      dispatcher: dispatcher
+    }); // window.editor = dataRef.current.editor
+
+    onInit === null || onInit === void 0 ? void 0 : onInit(dataRef.current.editor);
+    return function () {
+      return dataRef.current.editor.destroy();
+    };
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    var _dataRef$current$edit, _dataRef$current$edit2;
+
+    if (e.target != e.currentTarget) return;
+    var view = (_dataRef$current$edit = dataRef.current.editor) === null || _dataRef$current$edit === void 0 ? void 0 : _dataRef$current$edit.view;
+    if (!view) return;
+    var tr = view.state.tr;
+
+    var selection = _prosemirrorState.TextSelection.atEnd(view.state.doc);
+
+    view.dispatch(tr.setSelection(selection));
+    view.focus();
+    (_dataRef$current$edit2 = dataRef.current.editor) === null || _dataRef$current$edit2 === void 0 ? void 0 : _dataRef$current$edit2.view.focus();
+  }, []);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      getState: function getState() {
+        return dataRef.current.editor.state.toJSON();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: container,
+    className: (0, _classnames["default"])(preCls, _defineProperty({}, preCls + '--disabled', !_editable)),
+    style: {
+      backgroundColor: "#FFF"
+    },
+    spellCheck: false,
+    onClick: handleClick
+  });
+}
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(RichEditor);
+
+exports["default"] = _default;

package/lib/components/rich-editor/ui/normal-toolbar/index.css

@@ -0,0 +1,29 @@
+.tita-rich-editor-normal-toolbar {
+  display: flex;
+  align-items: center;
+}
+
+.tita-rich-editor-normal-toolbar-item {
+  width: 24px;
+  height: 24px;
+  margin: 0 2px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.tita-rich-editor-normal-toolbar-item:not(.tita-rich-editor-normal-toolbar-item--disabled):hover {
+  background-color: #f0f4fa;
+}
+
+.tita-rich-editor-normal-toolbar-item--active {
+  background: #f0f4fa;
+}
+
+.tita-rich-editor-normal-toolbar-item--disabled:hover {
+  cursor: not-allowed;
+}

package/lib/components/rich-editor/ui/normal-toolbar/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _tooltip = _interopRequireDefault(require("../../../tooltip"));
+
+require("./index.css");
+
+var _events = require("../../consts/events");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var preCls = 'tita-rich-editor-normal-toolbar';
+
+function MenuItem(_ref) {
+  var _config$active, _config$disabled, _classNames;
+
+  var editor = _ref.editor,
+      config = _ref.config;
+
+  var _useState = (0, _react.useState)(editor.state),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var handleClickItem = (0, _react.useCallback)(function () {
+    var _config$handler;
+
+    (_config$handler = config.handler) === null || _config$handler === void 0 ? void 0 : _config$handler.call(config, editor);
+  }, []);
+  (0, _react.useEffect)(function () {
+    editor.on(_events.EDITOR_STATE_CHANGE, setState);
+  }, []);
+  var itemClass = (0, _classnames["default"])(preCls + '-item', (_classNames = {}, _defineProperty(_classNames, preCls + '-item--active', (_config$active = config.active) === null || _config$active === void 0 ? void 0 : _config$active.call(config, state)), _defineProperty(_classNames, preCls + '-item--disabled', (_config$disabled = config.disabled) === null || _config$disabled === void 0 ? void 0 : _config$disabled.call(config, state)), _classNames));
+
+  if (config.renderMenu) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: itemClass
+    }, config.renderMenu(editor, config));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    overlay: config.title,
+    placement: "top"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: itemClass,
+    onClick: handleClickItem
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: config === null || config === void 0 ? void 0 : config.icon
+  })));
+}
+
+function RichEditorToolBar(_ref2) {
+  var editor = _ref2.editor;
+  var toolbars = (0, _react.useMemo)(function () {
+    var res = [];
+    editor === null || editor === void 0 ? void 0 : editor.controllers.forEach(function (controller) {
+      if (Array.isArray(controller.toolbar)) {
+        res = res.concat(controller.toolbar);
+      } else {
+        controller.toolbar && res.push(controller.toolbar);
+      }
+    });
+    return res;
+  }, [editor === null || editor === void 0 ? void 0 : editor.controllers]);
+  var handleMouseDown = (0, _react.useCallback)(function () {
+    editor === null || editor === void 0 ? void 0 : editor.emit(_events.TOOLBAR_MOUSE_DOWN);
+  }, [editor]);
+  if (!editor) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls,
+    onMouseDown: handleMouseDown
+  }, toolbars.map(function (config) {
+    return /*#__PURE__*/_react["default"].createElement(MenuItem, {
+      editor: editor,
+      config: config
+    });
+  }));
+}
+
+var _default = RichEditorToolBar;
+exports["default"] = _default;

package/lib/components/rich-editor/utils/browser.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var result = {
+  mac: false,
+  ie: false,
+  ie_version: 0,
+  gecko: false,
+  chrome: false,
+  chrome_version: 0,
+  android: false,
+  ios: false,
+  webkit: false
+};
+
+if (typeof navigator !== 'undefined') {
+  var ieEdge = /Edge\/(\d+)/.exec(navigator.userAgent);
+  var ieUpTo10 = /MSIE \d/.test(navigator.userAgent);
+  var ie11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(navigator.userAgent);
+  result.mac = /Mac/.test(navigator.platform);
+  var ie = result.ie = !!(ieUpTo10 || ie11up || ieEdge);
+  result.ie_version = ieUpTo10 ? document.documentMode || 6 : ie11up ? +ie11up[1] : ieEdge ? +ieEdge[1] : null;
+  result.gecko = !ie && /gecko\/\d/i.test(navigator.userAgent);
+  result.chrome = !ie && /Chrome\//.test(navigator.userAgent);
+  result.chrome_version = parseInt((navigator.userAgent.match(/Chrome\/(\d{2})/) || [])[1], 10);
+  result.android = /Android \d/.test(navigator.userAgent);
+  result.ios = !ie && /AppleWebKit/.test(navigator.userAgent) && /Mobile\/\w+/.test(navigator.userAgent);
+  result.webkit = !ie && !!document.documentElement && 'WebkitAppearance' in document.documentElement.style;
+}
+
+var _default = result;
+exports["default"] = _default;