@titaui/pc 1.10.44 → 1.10.45

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

@@ -0,0 +1,149 @@
+"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.LinkSchema = exports.LinkPlugin = exports.LinkController = void 0;
+
+var _plugin = _interopRequireDefault(require("../../../models/plugin"));
+
+var _schema = require("../../../models/schema");
+
+var _controller = _interopRequireDefault(require("../../../models/controller"));
+
+var _toolbarBtn = _interopRequireDefault(require("./ui/toolbarBtn"));
+
+var _main = _interopRequireWildcard(require("./pm-plugins/main"));
+
+var _fakeCursorForToolbar = _interopRequireDefault(require("./pm-plugins/fake-cursor-for-toolbar"));
+
+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 _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 = 'link';
+
+var LinkSchema = /*#__PURE__*/function (_InlineSchema) {
+  _inherits(LinkSchema, _InlineSchema);
+
+  var _super = _createSuper(LinkSchema);
+
+  function LinkSchema() {
+    var _this;
+
+    _classCallCheck(this, LinkSchema);
+
+    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.name = PLUGIN_NAME, _this.priority = 100, _this.inclusive = false, _this.group = 'link', _this.attrs = {
+      href: {
+        "default": ''
+      }
+    }, _this.parseDOM = [{
+      tag: 'a[href]',
+      priority: 100,
+      getAttrs: function getAttrs(dom) {
+        if (!dom.textContent && !dom.getAttribute('text')) {
+          return false;
+        } // solve the problem of copying itself
+
+
+        return {
+          href: dom.getAttribute('href')
+        };
+      }
+    }], _this.toDOM = function (node) {
+      return ['a', {
+        href: node.attrs.href
+      }, 0];
+    }, _assertThisInitialized(_this)));
+  }
+
+  return _createClass(LinkSchema);
+}(_schema.InlineSchema);
+
+exports.LinkSchema = LinkSchema;
+
+var LinkController = /*#__PURE__*/function (_BaseController) {
+  _inherits(LinkController, _BaseController);
+
+  var _super2 = _createSuper(LinkController);
+
+  function LinkController() {
+    var _this2;
+
+    _classCallCheck(this, LinkController);
+
+    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.toolbar = {
+      title: '链接',
+      icon: 'tu-icon-text-link',
+      handler: function handler(editor) {
+        // toggleMark(editor.state.schema.marks[PLUGIN_NAME])(editor.state,editor.view.dispatch)
+        editor.view.focus();
+      },
+      renderMenu: _toolbarBtn["default"],
+      active: function active(state) {
+        return _main.stateKey.getState(state).activeLinkMark;
+      },
+      disabled: function disabled(state) {
+        return !_main.stateKey.getState(state).canInsertLink;
+      }
+    }, _this2.pmPlugins = [_main["default"], _fakeCursorForToolbar["default"]], _assertThisInitialized(_this2)));
+  }
+
+  return _createClass(LinkController);
+}(_controller["default"]);
+
+exports.LinkController = LinkController;
+
+var LinkPlugin = /*#__PURE__*/function (_BasePlugin) {
+  _inherits(LinkPlugin, _BasePlugin);
+
+  var _super3 = _createSuper(LinkPlugin);
+
+  function LinkPlugin() {
+    var _this3;
+
+    _classCallCheck(this, LinkPlugin);
+
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return _possibleConstructorReturn(_this3, (_this3 = _super3.call.apply(_super3, [this].concat(args)), _this3.name = PLUGIN_NAME, _this3.schema = LinkSchema, _this3.controller = LinkController, _assertThisInitialized(_this3)));
+  }
+
+  return _createClass(LinkPlugin);
+}(_plugin["default"]);
+
+exports.LinkPlugin = LinkPlugin;

package/lib/components/rich-editor/plugins/inline/link/pm-plugins/fake-cursor-for-toolbar.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorView = require("prosemirror-view");
+
+var _main = require("./main");
+
+var createTextCursor = function createTextCursor(pos) {
+  var node = document.createElement('div');
+  node.className = 'ProseMirror-fake-text-cursor';
+  return _prosemirrorView.Decoration.widget(pos, node, {
+    key: 'hyperlink-text-cursor'
+  });
+};
+
+var createTextSelection = function createTextSelection(from, to) {
+  return _prosemirrorView.Decoration.inline(from, to, {
+    "class": 'ProseMirror-fake-text-selection'
+  });
+};
+
+var getInsertLinkToolbarState = function getInsertLinkToolbarState(editorState) {
+  var state = _main.stateKey.getState(editorState);
+
+  if (state && state.activeLinkMark) {
+    if (state.activeLinkMark.type === _main.InsertStatus.INSERT_LINK_TOOLBAR) {
+      return state.activeLinkMark;
+    }
+  }
+
+  return undefined;
+};
+
+var fakeCursorToolbarPlugin = new _prosemirrorState.Plugin({
+  state: {
+    init: function init() {
+      return _prosemirrorView.DecorationSet.empty;
+    },
+    apply: function apply(tr, pluginState, oldState, newState) {
+      var oldInsertToolbarState = getInsertLinkToolbarState(oldState);
+      var insertToolbarState = getInsertLinkToolbarState(newState); // Map DecorationSet if it still refers to the same position in the document
+
+      if (oldInsertToolbarState && insertToolbarState) {
+        var from = insertToolbarState.from,
+            to = insertToolbarState.to;
+        var oldFrom = tr.mapping.map(oldInsertToolbarState.from);
+        var oldTo = tr.mapping.map(oldInsertToolbarState.to);
+
+        if (oldFrom === from && oldTo === to) {
+          return pluginState.map(tr.mapping, tr.doc);
+        }
+      } // Update DecorationSet if new insert toolbar, or if we have moved to a different position in the doc
+
+
+      if (insertToolbarState) {
+        var _from = insertToolbarState.from,
+            _to = insertToolbarState.to;
+        return _prosemirrorView.DecorationSet.create(tr.doc, [_from === _to ? createTextCursor(_from) : createTextSelection(_from, _to)]);
+      }
+
+      return _prosemirrorView.DecorationSet.empty;
+    }
+  },
+  props: {
+    decorations: function decorations(state) {
+      return fakeCursorToolbarPlugin.getState(state);
+    }
+  }
+});
+var _default = fakeCursorToolbarPlugin;
+exports["default"] = _default;

package/lib/components/rich-editor/plugins/inline/link/pm-plugins/main.js

@@ -0,0 +1,293 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stateKey = exports.plugin = exports["default"] = exports.canLinkBeCreatedInRange = exports.LinkAction = exports.InsertStatus = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _helpers = require("../../../../utils/helpers");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 LinkAction;
+exports.LinkAction = LinkAction;
+
+(function (LinkAction) {
+  LinkAction["SHOW_INSERT_TOOLBAR"] = "SHOW_INSERT_TOOLBAR";
+  LinkAction["HIDE_TOOLBAR"] = "HIDE_TOOLBAR";
+  LinkAction["SELECTION_CHANGE"] = "SELECTION_CHANGE";
+  LinkAction["INSERT_LINK_TOOLBAR"] = "INSERT";
+  LinkAction["EDIT_INSERTED_TOOLBAR"] = "EDIT_INSERTED_TOOLBAR";
+})(LinkAction || (exports.LinkAction = LinkAction = {}));
+
+var InsertStatus;
+exports.InsertStatus = InsertStatus;
+
+(function (InsertStatus) {
+  InsertStatus["EDIT_LINK_TOOLBAR"] = "EDIT";
+  InsertStatus["INSERT_LINK_TOOLBAR"] = "INSERT";
+  InsertStatus["EDIT_INSERTED_TOOLBAR"] = "EDIT_INSERTED";
+})(InsertStatus || (exports.InsertStatus = InsertStatus = {}));
+
+var canLinkBeCreatedInRange = function canLinkBeCreatedInRange(from, to) {
+  return function (state) {
+    if (!state.doc.rangeHasMark(from, to, state.schema.marks.link)) {
+      var $from = state.doc.resolve(from);
+      var $to = state.doc.resolve(to);
+      var link = state.schema.marks.link;
+
+      if ($from.parent === $to.parent && $from.parent.isTextblock) {
+        if ($from.parent.type.allowsMarkType(link)) {
+          var allowed = true;
+          state.doc.nodesBetween(from, to, function (node) {
+            allowed = allowed && !node.marks.some(function (m) {
+              return m.type.excludes(link);
+            });
+            return allowed;
+          });
+          return allowed;
+        }
+      }
+    }
+
+    return false;
+  };
+};
+
+exports.canLinkBeCreatedInRange = canLinkBeCreatedInRange;
+
+var isSelectionInsideLink = function isSelectionInsideLink(state) {
+  return !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
+};
+
+var isSelectionAroundLink = function isSelectionAroundLink(state) {
+  var _state$selection = state.selection,
+      $from = _state$selection.$from,
+      $to = _state$selection.$to;
+  var node = $from.nodeAfter;
+  return !!node && $from.textOffset === 0 && $to.pos - $from.pos === node.nodeSize && !!state.doc.type.schema.marks.link.isInSet(node.marks);
+};
+
+var mapTransactionToState = function mapTransactionToState(state, tr) {
+  if (!state) {
+    return undefined;
+  } else if (state.type === InsertStatus.EDIT_LINK_TOOLBAR || state.type === InsertStatus.EDIT_INSERTED_TOOLBAR) {
+    var _tr$mapping$mapResult = tr.mapping.mapResult(state.pos, 1),
+        pos = _tr$mapping$mapResult.pos,
+        deleted = _tr$mapping$mapResult.deleted;
+
+    var node = tr.doc.nodeAt(pos); // If the position was not deleted & it is still a link
+
+    if (!deleted && !!node.type.schema.marks.link.isInSet(node.marks)) {
+      if (node === state.node && pos === state.pos) {
+        return state;
+      }
+
+      return _objectSpread(_objectSpread({}, state), {}, {
+        pos: pos,
+        node: node
+      });
+    } // If the position has been deleted, then require a navigation to show the toolbar again
+
+
+    return;
+  } else if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      from: tr.mapping.map(state.from),
+      to: tr.mapping.map(state.to)
+    });
+  }
+
+  return;
+};
+
+var toState = function toState(state, action, editorState) {
+  // Show insert or edit toolbar
+  if (!state) {
+    switch (action) {
+      case LinkAction.SHOW_INSERT_TOOLBAR:
+        {
+          var _editorState$selectio = editorState.selection,
+              from = _editorState$selectio.from,
+              to = _editorState$selectio.to;
+
+          if (canLinkBeCreatedInRange(from, to)(editorState)) {
+            return {
+              type: InsertStatus.INSERT_LINK_TOOLBAR,
+              from: from,
+              to: to
+            };
+          }
+
+          return undefined;
+        }
+
+      case LinkAction.SELECTION_CHANGE:
+        // If the user has moved their cursor, see if they're in a link
+        var link = getActiveLinkMark(editorState);
+
+        if (link) {
+          return _objectSpread(_objectSpread({}, link), {}, {
+            type: InsertStatus.EDIT_LINK_TOOLBAR
+          });
+        }
+
+        return undefined;
+
+      default:
+        return undefined;
+    }
+  } // Update toolbar state if selection changes, or if toolbar is hidden
+
+
+  if (state.type === InsertStatus.EDIT_LINK_TOOLBAR) {
+    switch (action) {
+      case LinkAction.EDIT_INSERTED_TOOLBAR:
+        {
+          var _link2 = getActiveLinkMark(editorState);
+
+          if (_link2) {
+            if (_link2.pos === state.pos && _link2.node === state.node) {
+              return _objectSpread(_objectSpread({}, state), {}, {
+                type: InsertStatus.EDIT_INSERTED_TOOLBAR
+              });
+            }
+
+            return _objectSpread(_objectSpread({}, _link2), {}, {
+              type: InsertStatus.EDIT_INSERTED_TOOLBAR
+            });
+          }
+
+          return undefined;
+        }
+
+      case LinkAction.SELECTION_CHANGE:
+        var _link = getActiveLinkMark(editorState);
+
+        if (_link) {
+          if (_link.pos === state.pos && _link.node === state.node) {
+            // Make sure we return the same object, if it's the same link
+            return state;
+          }
+
+          return _objectSpread(_objectSpread({}, _link), {}, {
+            type: InsertStatus.EDIT_LINK_TOOLBAR
+          });
+        }
+
+        return undefined;
+
+      case LinkAction.HIDE_TOOLBAR:
+        return undefined;
+
+      default:
+        return state;
+    }
+  } // Remove toolbar if user changes selection or toolbar is hidden
+
+
+  if (state.type === InsertStatus.INSERT_LINK_TOOLBAR) {
+    switch (action) {
+      case LinkAction.SELECTION_CHANGE:
+      case LinkAction.HIDE_TOOLBAR:
+        return undefined;
+
+      default:
+        return state;
+    }
+  }
+
+  return;
+};
+
+var getActiveLinkMark = function getActiveLinkMark(state) {
+  var $from = state.selection.$from;
+
+  if (isSelectionInsideLink(state) || isSelectionAroundLink(state)) {
+    var pos = $from.pos - $from.textOffset;
+    var node = state.doc.nodeAt(pos);
+    return node && node.isText ? {
+      node: node,
+      pos: pos
+    } : undefined;
+  }
+
+  return undefined;
+};
+
+var getActiveText = function getActiveText(selection) {
+  var currentSlice = selection.content();
+
+  if (currentSlice.size === 0) {
+    return;
+  }
+
+  if (currentSlice.content.childCount === 1 && currentSlice.content.firstChild && selection instanceof _prosemirrorState.TextSelection) {
+    return currentSlice.content.firstChild.textContent;
+  }
+
+  return;
+};
+
+var stateKey = new _prosemirrorState.PluginKey('hyperlinkPlugin');
+exports.stateKey = stateKey;
+
+var plugin = function plugin(dispatch) {
+  return new _prosemirrorState.Plugin({
+    state: {
+      init: function init(_, state) {
+        var canInsertLink = canLinkBeCreatedInRange(state.selection.from, state.selection.to)(state);
+        return {
+          activeText: getActiveText(state.selection),
+          canInsertLink: canInsertLink,
+          activeLinkMark: toState(undefined, LinkAction.SELECTION_CHANGE, state)
+        };
+      },
+      apply: function apply(tr, pluginState, _oldState, newState) {
+        var state = pluginState;
+        var action = tr.getMeta(stateKey) && tr.getMeta(stateKey).type;
+
+        if (tr.docChanged) {
+          state = {
+            activeText: state.activeText,
+            canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
+            activeLinkMark: mapTransactionToState(state.activeLinkMark, tr)
+          };
+        }
+
+        if (action) {
+          state = {
+            activeText: state.activeText,
+            canInsertLink: state.canInsertLink,
+            activeLinkMark: toState(state.activeLinkMark, action, newState)
+          };
+        }
+
+        if (tr.selectionSet) {
+          state = {
+            activeText: getActiveText(newState.selection),
+            canInsertLink: canLinkBeCreatedInRange(newState.selection.from, newState.selection.to)(newState),
+            activeLinkMark: toState(state.activeLinkMark, LinkAction.SELECTION_CHANGE, newState)
+          };
+        }
+
+        if (!(0, _helpers.shallowEqual)(state, pluginState)) {
+          dispatch(stateKey, state);
+        }
+
+        return state;
+      }
+    },
+    key: stateKey
+  });
+};
+
+exports.plugin = plugin;
+var _default = plugin;
+exports["default"] = _default;

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

@@ -0,0 +1,79 @@
+.ProseMirror .ProseMirror-fake-text-cursor {
+  display: inline;
+  pointer-events: none;
+  position: relative;
+}
+
+.ProseMirror .ProseMirror-fake-text-selection {
+  display: inline;
+  pointer-events: none;
+  position: relative;
+  background-color: #b3d4ff;
+}
+
+.tita-rich-editor-link {
+  box-sizing: border-box;
+  width: 348px;
+  padding: 24px 32px 20px;
+  background: #ffffff;
+  box-shadow: 0px 8px 24px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 24px;
+}
+
+.tita-rich-editor-link__btn-wrapper {
+  display: flex;
+  margin-top: 16px;
+  justify-content: flex-end;
+}
+
+.tita-rich-editor-link__input:first-child {
+  margin-bottom: 16px;
+}
+
+.tita-rich-editor-link__input .form-field-input__label-text {
+  color: #89919f;
+}
+
+.tita-rich-editor-link__common-tool-bar-btn {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tita-rich-editor-toolbar {
+  box-sizing: border-box;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  width: 344px;
+  height: 44px;
+  background: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 8px;
+  border: 1px solid #f0f2f5;
+}
+
+.tita-rich-editor-toolbar__text {
+  flex: 1;
+  width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tita-rich-editor-toolbar__btn {
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.tita-rich-editor-toolbar__btn:hover {
+  background-color: #f0f4fa;
+}