@titaui/pc 1.10.49 → 1.10.50

package/lib/components/rich-editor/plugins/extension/placeholder/index.js

@@ -0,0 +1,126 @@
+"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"] = exports.PlaceholderPlugin = exports.PlaceholderController = void 0;
+
+var _controller = _interopRequireDefault(require("../../../models/controller"));
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorView = require("prosemirror-view");
+
+var _plugin = _interopRequireDefault(require("../../../models/plugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var PLUGIN_NAME = 'placeholder';
+
+var createDecoration = function createDecoration(state) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '请输入';
+  var firstChildType = state.doc.child(0).type;
+
+  if (state.doc.textContent || firstChildType.name !== 'paragraph' && firstChildType.name !== 'heading' || state.doc.childCount > 1) {
+    return _prosemirrorView.DecorationSet.empty;
+  }
+
+  var placeholderDecoration = document.createElement('span');
+  var placeholderText = options;
+  placeholderDecoration.className = 'tita-rich-editor-placeholder';
+  var placeholderNode = document.createElement('span');
+  placeholderNode.textContent = placeholderText;
+  placeholderDecoration.appendChild(placeholderNode);
+  return _prosemirrorView.DecorationSet.create(state.doc, [_prosemirrorView.Decoration.widget(1, placeholderDecoration, {
+    side: 1,
+    key: 'placeholder'
+  })]);
+};
+
+var placeHolderPlugin = function placeHolderPlugin(dispatch, options) {
+  var plugin = new _prosemirrorState.Plugin({
+    state: {
+      init: function init(conf, state) {
+        return createDecoration(state, options);
+      },
+      apply: function apply(tr, pluginState, oldState, newState) {
+        if (!tr.docChanged) return pluginState.map(tr.mapping, tr.doc);
+        return createDecoration(newState, options);
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return plugin.getState(state);
+      }
+    }
+  });
+  return plugin;
+};
+
+var PlaceholderController = /*#__PURE__*/function (_BaseController) {
+  _inherits(PlaceholderController, _BaseController);
+
+  var _super = _createSuper(PlaceholderController);
+
+  function PlaceholderController() {
+    var _this;
+
+    _classCallCheck(this, PlaceholderController);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.pmPlugins = [placeHolderPlugin], _assertThisInitialized(_this)));
+  }
+
+  return _createClass(PlaceholderController);
+}(_controller["default"]);
+
+exports.PlaceholderController = PlaceholderController;
+
+var PlaceholderPlugin = /*#__PURE__*/function (_BasePlugin) {
+  _inherits(PlaceholderPlugin, _BasePlugin);
+
+  var _super2 = _createSuper(PlaceholderPlugin);
+
+  function PlaceholderPlugin() {
+    var _this2;
+
+    _classCallCheck(this, PlaceholderPlugin);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return _possibleConstructorReturn(_this2, (_this2 = _super2.call.apply(_super2, [this].concat(args)), _this2.name = PLUGIN_NAME, _this2.controller = PlaceholderController, _assertThisInitialized(_this2)));
+  }
+
+  return _createClass(PlaceholderPlugin);
+}(_plugin["default"]);
+
+exports.PlaceholderPlugin = PlaceholderPlugin;
+var _default = PlaceholderPlugin;
+exports["default"] = _default;

package/lib/components/rich-editor/plugins/extension/placeholder/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.placeholderStyles = exports.placeHolderClassName = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var placeHolderClassName = 'placeholder-decoration';
+exports.placeHolderClassName = placeHolderClassName;
+var placeholderStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror .", " {\n    position: relative;\n    color: ", ";\n    width: 100%;\n\n    pointer-events: none;\n    display: block;\n    user-select: none;\n\n    > span {\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &.align-end > span {\n      right: 0;\n    }\n\n    &.align-center > span {\n      left: 0;\n    }\n  }\n"])), placeHolderClassName, _colors.N200);
+exports.placeholderStyles = placeholderStyles;

package/lib/components/rich-editor/plugins/inline/color/consts.js

@@ -8,8 +8,8 @@ var FontColor;
 exports.FontColor = FontColor;
 
 (function (FontColor) {
-  FontColor["default"] = "#3F4755";
-  FontColor["black1"] = "#141C28";
+  FontColor["default"] = "#141C28";
+  FontColor["black1"] = "#3F4755";
   FontColor["black2"] = "#6F7886";
   FontColor["black3"] = "#A4ACB9";
   FontColor["red1"] = "#F02673";

package/lib/components/rich-editor/plugins/inline/color/selector.js

@@ -220,14 +220,7 @@ function ColorSelectorPop(_ref2) {
     (0, _commond.setColor)(editor, editor.state.schema.marks[_index2.BACKGROUND_COLOR_SCHEMA_NAME], activeBackground);
     editor.view.focus();
   }, [activeColor, activeBackground]);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls + '__icon',
-    style: {
-      backgroundColor: activeBackground || _consts.BackgroundColor["default"],
-      color: activeColor || _consts.FontColor["default"]
-    },
-    onClick: handleClickMenu
-  }, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_popup["default"], {
     action: ["hover"],
     popupPlacement: "top",
     popup: /*#__PURE__*/_react["default"].createElement(ColorSelector, {
@@ -237,6 +230,13 @@ function ColorSelectorPop(_ref2) {
       background: activeBackground,
       onClickItem: handleClickItem
     })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: preCls + '__icon',
+    style: {
+      backgroundColor: activeBackground || _consts.BackgroundColor["default"],
+      color: activeColor || _consts.FontColor["default"]
+    },
+    onClick: handleClickMenu
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: config.icon
   })));

package/lib/components/rich-editor/plugins/inline/link/ui/index.css

@@ -26,6 +26,10 @@
   justify-content: flex-end;
 }
 
+.tita-rich-editor-link__input .form-field-input__border {
+  padding: 3px 12px;
+}
+
 .tita-rich-editor-link__input:first-child {
   margin-bottom: 16px;
 }
@@ -53,6 +57,7 @@
   box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
   border-radius: 8px;
   border: 1px solid #f0f2f5;
+  color: #3f4755;
 }
 
 .tita-rich-editor-toolbar__text {

package/lib/components/rich-editor/plugins/util.js

@@ -36,6 +36,7 @@ function applyPlugins() {
   var plugins = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var defaultSchema = arguments.length > 1 ? arguments[1] : undefined;
   var dispatcher = arguments.length > 2 ? arguments[2] : undefined;
+  var config = arguments.length > 3 ? arguments[3] : undefined;
   var nodes = defaultSchema.nodes;
   var marks = defaultSchema.marks || {};
   var nativePlugins = [];
@@ -48,9 +49,9 @@ function applyPlugins() {
       }))) : schemas.push(new p.schema());
     }
 
-    dealPlugin(p, nativePlugins, controllers, dispatcher);
+    dealPlugin(p, nativePlugins, controllers, dispatcher, config);
   });
-  dealPlugin(new _core.CorePlugin(), nativePlugins, controllers, dispatcher);
+  dealPlugin(new _core.CorePlugin(), nativePlugins, controllers, dispatcher, config);
   schemas.sort(function (s1, s2) {
     return s2.priority - s1.priority;
   }).forEach(function (s) {
@@ -69,13 +70,15 @@ function applyPlugins() {
 }
 
 function dealPlugin(plugin, nativePlugins, controllers, dispatcher) {
+  var config = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
   if (plugin.controller) {
     var pController = new plugin.controller();
     controllers.push(pController);
 
     if (pController.pmPlugins) {
       nativePlugins.push.apply(nativePlugins, _toConsumableArray(pController.pmPlugins.map(function (pm) {
-        return typeof pm == 'function' ? pm((0, _event.createDispatch)(dispatcher)) : pm;
+        return typeof pm == 'function' ? pm((0, _event.createDispatch)(dispatcher), config[plugin.name]) : pm;
       })));
     }
 

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

@@ -19,7 +19,7 @@
   font-weight: 500;
   color: #141c28;
   line-height: 38px;
-  padding: 36px 0 20px;
+  padding: 26px 0 10px;
 }
 
 .tita-rich-editor h2 {
@@ -27,23 +27,31 @@
   font-weight: 500;
   color: #141c28;
   line-height: 32px;
-  padding: 20px 0 8px;
+  padding: 22px 0 8px;
 }
 
 .tita-rich-editor h3 {
   font-size: 20px;
   font-weight: 500;
-  color: #3f4755;
+  color: #141c28;
   line-height: 30px;
-  padding: 18px 0 8px;
+  padding: 20px 0 8px;
 }
 
 .tita-rich-editor p {
   font-size: 16px;
   font-weight: 400;
-  color: #3f4755;
+  color: #141c28;
   line-height: 26px;
-  padding: 6px 0;
+  padding: 3px 0;
+}
+
+.tita-rich-editor a {
+  color: #2879ff;
+}
+
+.tita-rich-editor a:hover {
+  color: #5c8eff;
 }
 
 .tita-rich-editor ol,
@@ -128,8 +136,20 @@
 
 .tita-rich-editor blockquote {
   position: relative;
+  margin: 3px 0;
   padding-left: 22px;
-  margin: 0;
+}
+
+.tita-rich-editor blockquote p {
+  font-size: 16px !important;
+}
+
+.tita-rich-editor blockquote p:first-child {
+  padding-top: 0;
+}
+
+.tita-rich-editor blockquote p:last-child {
+  padding-bottom: 0;
 }
 
 .tita-rich-editor blockquote::before {
@@ -142,3 +162,17 @@
   background-color: #2879ff;
   border-radius: 2px;
 }
+
+.tita-rich-editor-placeholder {
+  color: #bfc7d5;
+  position: relative;
+  width: 100%;
+  pointer-events: none;
+  display: block;
+  user-select: none;
+}
+
+.tita-rich-editor-placeholder > span {
+  position: absolute;
+  pointer-events: none;
+}

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

@@ -31,6 +31,8 @@ require("./index.css");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _placeholder = _interopRequireDefault(require("../../plugins/extension/placeholder"));
+
 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); }
@@ -40,7 +42,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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()];
+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(), new _placeholder["default"]()];
 
 function RichEditor(_ref, ref) {
   var _ref$plugins = _ref.plugins,
@@ -49,14 +51,17 @@ function RichEditor(_ref, ref) {
       _ref$editable = _ref.editable,
       _editable = _ref$editable === void 0 ? true : _ref$editable,
       defaultState = _ref.defaultState,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      placeholder = _ref.placeholder;
 
   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),
+    var _applyPlugins = (0, _util.applyPlugins)(plugins, _schema["default"], dispatcher, {
+      placeholder: placeholder
+    }),
         nativePlugins = _applyPlugins.nativePlugins,
         nodes = _applyPlugins.nodes,
         marks = _applyPlugins.marks,
@@ -139,7 +144,7 @@ function RichEditor(_ref, ref) {
       backgroundColor: "#FFF"
     },
     spellCheck: false,
-    onClick: handleClick
+    onMouseUp: handleClick
   });
 }
 

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

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.bracketTyped = bracketTyped;
 exports.findFarthestParentNode = void 0;
 exports.getNodesCount = getNodesCount;
 exports.getStepRange = void 0;
+exports.hasDocAsParent = hasDocAsParent;
 exports.hasVisibleContent = hasVisibleContent;
 exports.isEmptyDocument = isEmptyDocument;
 exports.isEmptyParagraph = isEmptyParagraph;
+exports.isInEmptyLine = isInEmptyLine;
 exports.isNodeEmpty = isNodeEmpty;
 exports.isSelectionEndOfParagraph = void 0;
 exports.nodesBetweenChanged = nodesBetweenChanged;
@@ -157,4 +160,52 @@ function getNodesCount(node) {
     count[node.type.name] = (count[node.type.name] || 0) + 1;
   });
   return count;
+} // Checks to see if the parent node is the document, ie not contained within another entity
+
+
+function hasDocAsParent($anchor) {
+  return $anchor.depth === 1;
+}
+
+function isInEmptyLine(state) {
+  var selection = state.selection;
+  var _ref = selection,
+      $cursor = _ref.$cursor,
+      $anchor = _ref.$anchor;
+
+  if (!$cursor) {
+    return false;
+  }
+
+  var node = $cursor.node();
+
+  if (!node) {
+    return false;
+  }
+
+  return isEmptyParagraph(node) && hasDocAsParent($anchor);
+}
+
+function bracketTyped(state) {
+  var selection = state.selection;
+  var _ref2 = selection,
+      $cursor = _ref2.$cursor,
+      $anchor = _ref2.$anchor;
+
+  if (!$cursor) {
+    return false;
+  }
+
+  var node = $cursor.nodeBefore;
+
+  if (!node) {
+    return false;
+  }
+
+  if (node.type.name === 'text' && node.text === '{') {
+    var paragraphNode = $anchor.node();
+    return paragraphNode.marks.length === 0 && hasDocAsParent($anchor);
+  }
+
+  return false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.10.49",
+  "version": "1.10.50",
   "nameCN": "",
   "description": "",
   "main": "lib/index.js",