@titaui/pc 1.10.38 → 1.10.41

package/lib/components/rich-editor/plugins/block/lists/commond/index.js

@@ -73,144 +73,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 // export type InputMethod = INPUT_METHOD.KEYBOARD | INPUT_METHOD.TOOLBAR;
-var enterKeyCommand = function enterKeyCommand(state, dispatch) {
-  var selection = state.selection;
-
-  if (selection.empty) {
-    var $from = selection.$from;
-    var _state$schema$nodes = state.schema.nodes,
-        listItem = _state$schema$nodes.listItem,
-        codeBlock = _state$schema$nodes.codeBlock;
-    var node = $from.node($from.depth);
-    var wrapper = $from.node($from.depth - 1);
-
-    if (wrapper && wrapper.type === listItem) {
-      /** Check if the wrapper has any visible content */
-      var wrapperHasContent = (0, _document.hasVisibleContent)(wrapper);
-
-      if ((0, _document.isNodeEmpty)(node) && !wrapperHasContent) {
-        return (0, _outdentList.outdentList)()(state, dispatch);
-      } else if (!(0, _prosemirrorUtils.hasParentNodeOfType)(codeBlock)(selection)) {
-        return splitListItem(listItem)(state, dispatch);
-      }
-    }
-  }
-
-  return false;
-};
-
-exports.enterKeyCommand = enterKeyCommand;
-
-var backspaceKeyCommand = function backspaceKeyCommand(state, dispatch) {
-  return baseCommand.chainCommands(_listBackspace.listBackspace, // if we're at the start of a list item, we need to either backspace
-  // directly to an empty list item above, or outdent this node
-  (0, _commands.filter)([function (state) {
-    return state.selection.empty;
-  }, // list items might have multiple paragraphs; only do this at the first one
-  _commands.isFirstChildOfParent, _selection.isInsideListItem], baseCommand.chainCommands(deletePreviousEmptyListItem, (0, _outdentList.outdentList)())), // if we're just inside a paragraph node (or gapcursor is shown) and backspace, then try to join
-  // the text to the previous list item, if one exists
-  (0, _commands.filter)([function (state) {
-    return state.selection.empty;
-  }, _selection.canJoinToPreviousListItem], joinToPreviousListItem))(state, dispatch);
-};
-
-exports.backspaceKeyCommand = backspaceKeyCommand;
-var deleteKeyCommand = _joinListItemForward.joinListItemForward; // Get the depth of the nearest ancestor list
-
-exports.deleteKeyCommand = deleteKeyCommand;
-
-var rootListDepth = function rootListDepth(pos, nodes) {
-  var bulletList = nodes.bulletList,
-      orderedList = nodes.orderedList,
-      listItem = nodes.listItem;
-  var depth;
-
-  for (var i = pos.depth - 1; i > 0; i--) {
-    var node = pos.node(i);
-
-    if (node.type === bulletList || node.type === orderedList) {
-      depth = i;
-    }
-
-    if (node.type !== bulletList && node.type !== orderedList && node.type !== listItem) {
-      break;
-    }
-  }
-
-  return depth;
-};
-
-exports.rootListDepth = rootListDepth;
-
-function untoggleSelectedList(tr) {
-  var _tr = tr,
-      selection = _tr.selection;
-  var depth = rootListDepth(selection.$to, tr.doc.type.schema.nodes);
-  tr = (0, _transforms.liftFollowingList)(selection.$to.pos, selection.$to.end(depth), depth || 0, tr);
-  tr = (0, _transforms.liftSelectionList)(selection, tr);
-}
 
-function toggleList(listType) {
-  return function (state, dispatch) {
-    var tr = state.tr;
-    var listInsideSelection = (0, _selection.selectionContainsList)(tr);
-    var listNodeType = state.schema.nodes[listType];
-
-    if (listInsideSelection) {
-      var selection = state.selection;
-      var fromNode = selection.$from.node(selection.$from.depth - 2);
-      var toNode = selection.$to.node(selection.$to.depth - 2);
-
-      if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {
-        var _tr2 = state.tr;
-        untoggleSelectedList(_tr2);
-
-        if (dispatch) {
-          dispatch(_tr2);
-        }
-
-        return true;
-      }
-
-      (0, _conversions.convertListType)({
-        tr: tr,
-        nextListNodeType: listNodeType
-      });
-    } else {
-      // Need to have this before wrapInList so the wrapping is done with valid content
-      // For example, if trying to convert centre or right aligned paragraphs to lists
-      (0, _mark.sanitiseMarksInSelection)(tr, listNodeType);
-      (0, _wrapAndJoinLists.wrapInListAndJoin)(listNodeType, tr);
-    } // If document wasn't changed, return false from the command to indicate that the
-    // editing action failed
-
-
-    if (!tr.docChanged) {
-      return false;
-    }
-
-    if (dispatch) {
-      dispatch(tr);
-    }
-
-    return true;
-  };
-}
-
-function toggleBulletList(view) {
-  return toggleList('bulletList')(view.state, view.dispatch);
-}
-
-function toggleOrderedList(view) {
-  return toggleList('orderedList')(view.state, view.dispatch);
-}
 /**
  * Implementation taken and modified for our needs from PM
  * @param itemType Node
  * Splits the list items, specific implementation take from PM
  */
-
-
 function splitListItem(itemType) {
   return function (state, dispatch) {
     var ref = state.selection;
@@ -243,7 +111,7 @@ function splitListItem(itemType) {
         var keepItem = $from.index(-1) > 0; // Build a fragment containing empty versions of the structure
         // from the outer list item to the parent node of the cursor
 
-        for (var d = $from.depth - (keepItem ? 1 : 2); d >= $from.depth - 3; d--) {
+        for (var d = $from.depth - (keepItem ? 1 : 2); d >= $from.depth - 3; d -= 1) {
           wrap = _prosemirrorModel.Fragment.from($from.node(d).copy(wrap));
         } // Add a second list item with an empty default start node
 
@@ -295,17 +163,46 @@ var deletePreviousEmptyListItem = function deletePreviousEmptyListItem(state, di
   return false;
 };
 
+var enterKeyCommand = function enterKeyCommand(state, dispatch) {
+  var selection = state.selection;
+
+  if (selection.empty) {
+    var $from = selection.$from;
+    var _state$schema$nodes = state.schema.nodes,
+        listItem = _state$schema$nodes.listItem,
+        codeBlock = _state$schema$nodes.codeBlock;
+    var node = $from.node($from.depth);
+    var wrapper = $from.node($from.depth - 1);
+
+    if (wrapper && wrapper.type === listItem) {
+      /** Check if the wrapper has any visible content */
+      var wrapperHasContent = (0, _document.hasVisibleContent)(wrapper);
+
+      if ((0, _document.isNodeEmpty)(node) && !wrapperHasContent) {
+        return (0, _outdentList.outdentList)()(state, dispatch);
+      }
+
+      if (!(0, _prosemirrorUtils.hasParentNodeOfType)(codeBlock)(selection)) {
+        return splitListItem(listItem)(state, dispatch);
+      }
+    }
+  }
+
+  return false;
+};
+
+exports.enterKeyCommand = enterKeyCommand;
+
 var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
   var $from = state.selection.$from;
   var _state$schema$nodes2 = state.schema.nodes,
       paragraph = _state$schema$nodes2.paragraph,
-      listItem = _state$schema$nodes2.listItem,
       codeBlock = _state$schema$nodes2.codeBlock,
       bulletList = _state$schema$nodes2.bulletList,
       orderedList = _state$schema$nodes2.orderedList; // const isGapCursorShown = state.selection instanceof GapCursorSelection;
 
   var $cutPos =
-  /*isGapCursorShown ? state.doc.resolve($from.pos + 1) :*/
+  /* isGapCursorShown ? state.doc.resolve($from.pos + 1) : */
   $from;
   var $cut = (0, _commands.findCutBefore)($cutPos);
 
@@ -353,13 +250,12 @@ var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
 
       if (stepResult.failed) {
         return false;
-      } else {
-        tr = state.tr.step(step);
-      } // }
+      }
+
+      tr = state.tr.step(step); // }
       // find out if there's now another list following and join them
       // as in, [list, p, list] => [list with p, list], and we want [joined list]
 
-
       var $postCut = tr.doc.resolve(tr.mapping.map($cut.pos + $cut.nodeAfter.nodeSize));
 
       if ($postCut.nodeBefore && $postCut.nodeAfter && $postCut.nodeBefore.type === $postCut.nodeAfter.type && [bulletList, orderedList].indexOf($postCut.nodeBefore.type) > -1) {
@@ -377,6 +273,108 @@ var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
   return false;
 };
 
+var backspaceKeyCommand = function backspaceKeyCommand(state, dispatch) {
+  return baseCommand.chainCommands(_listBackspace.listBackspace, // if we're at the start of a list item, we need to either backspace
+  // directly to an empty list item above, or outdent this node
+  (0, _commands.filter)([_commands.isEmptySelectionAtStart, // list items might have multiple paragraphs; only do this at the first one
+  _commands.isFirstChildOfParent, _selection.isInsideListItem], baseCommand.chainCommands(deletePreviousEmptyListItem, (0, _outdentList.outdentList)())), // if we're just inside a paragraph node (or gapcursor is shown) and backspace, then try to join
+  // the text to the previous list item, if one exists
+  (0, _commands.filter)([function (state) {
+    return state.selection.empty;
+  }, _selection.canJoinToPreviousListItem], joinToPreviousListItem))(state, dispatch);
+};
+
+exports.backspaceKeyCommand = backspaceKeyCommand;
+var deleteKeyCommand = _joinListItemForward.joinListItemForward; // Get the depth of the nearest ancestor list
+
+exports.deleteKeyCommand = deleteKeyCommand;
+
+var rootListDepth = function rootListDepth(pos, nodes) {
+  var bulletList = nodes.bulletList,
+      orderedList = nodes.orderedList,
+      listItem = nodes.listItem;
+  var depth;
+
+  for (var i = pos.depth - 1; i > 0; i -= 1) {
+    var node = pos.node(i);
+
+    if (node.type === bulletList || node.type === orderedList) {
+      depth = i;
+    }
+
+    if (node.type !== bulletList && node.type !== orderedList && node.type !== listItem) {
+      break;
+    }
+  }
+
+  return depth;
+};
+
+exports.rootListDepth = rootListDepth;
+
+function untoggleSelectedList(tr) {
+  var selection = tr.selection;
+  var depth = rootListDepth(selection.$to, tr.doc.type.schema.nodes);
+  var newtr = (0, _transforms.liftFollowingList)(selection.$to.pos, selection.$to.end(depth), depth || 0, tr);
+  newtr = (0, _transforms.liftSelectionList)(selection, tr);
+  return newtr;
+}
+
+function toggleList(listType) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    var listInsideSelection = (0, _selection.selectionContainsList)(tr);
+    var listNodeType = state.schema.nodes[listType];
+
+    if (listInsideSelection) {
+      var selection = state.selection;
+      var fromNode = selection.$from.node(selection.$from.depth - 2);
+      var toNode = selection.$to.node(selection.$to.depth - 2);
+
+      if ((fromNode === null || fromNode === void 0 ? void 0 : fromNode.type.name) === listType && (toNode === null || toNode === void 0 ? void 0 : toNode.type.name) === listType) {
+        var _tr = state.tr;
+        _tr = untoggleSelectedList(_tr);
+
+        if (dispatch) {
+          dispatch(_tr);
+        }
+
+        return true;
+      }
+
+      (0, _conversions.convertListType)({
+        tr: tr,
+        nextListNodeType: listNodeType
+      });
+    } else {
+      // Need to have this before wrapInList so the wrapping is done with valid content
+      // For example, if trying to convert centre or right aligned paragraphs to lists
+      (0, _mark.sanitiseMarksInSelection)(tr, listNodeType);
+      (0, _wrapAndJoinLists.wrapInListAndJoin)(listNodeType, tr);
+    } // If document wasn't changed, return false from the command to indicate that the
+    // editing action failed
+
+
+    if (!tr.docChanged) {
+      return false;
+    }
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+
+    return true;
+  };
+}
+
+function toggleBulletList(view) {
+  return toggleList("bulletList")(view.state, view.dispatch);
+}
+
+function toggleOrderedList(view) {
+  return toggleList("orderedList")(view.state, view.dispatch);
+}
+
 var insertContentDeleteRange = function insertContentDeleteRange(tr, getSelectionResolvedPos, insertions, deletions) {
   insertions.forEach(function (contentInsert) {
     var _contentInsert = _slicedToArray(contentInsert, 2),

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

@@ -91,7 +91,8 @@ function ColorSelector(_ref) {
         style: {
           backgroundColor: color
         },
-        onClick: function onClick() {
+        onClick: function onClick(e) {
+          e.stopPropagation();
           onClickItem(editor.state.schema.marks[_index2.BACKGROUND_COLOR_SCHEMA_NAME], color);
         }
       }));
@@ -106,7 +107,10 @@ function ColorSelector(_ref) {
     return colors;
   }, [background]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: preCls
+    className: preCls,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: preCls + '__title'
   }, "\u6587\u5B57\u989C\u8272"), /*#__PURE__*/_react["default"].createElement("div", {
@@ -216,12 +220,6 @@ function ColorSelectorPop(_ref2) {
   }, [activeColor, activeBackground]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: preCls + '__icon',
-    onMouseOver: function onMouseOver(e) {
-      return e.stopPropagation();
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      return e.stopPropagation();
-    },
     style: {
       backgroundColor: activeBackground || _consts.BackgroundColor["default"],
       color: activeColor || _consts.FontColor["default"]

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

@@ -19,6 +19,7 @@
   font-weight: 500;
   color: #141c28;
   line-height: 38px;
+  padding: 36px 0 20px;
 }
 
 .tita-rich-editor h2 {
@@ -26,6 +27,7 @@
   font-weight: 500;
   color: #141c28;
   line-height: 32px;
+  padding: 20px 0 8px;
 }
 
 .tita-rich-editor h3 {
@@ -33,6 +35,7 @@
   font-weight: 500;
   color: #3f4755;
   line-height: 30px;
+  padding: 18px 0 8px;
 }
 
 .tita-rich-editor p {

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

@@ -70,13 +70,16 @@ function RichEditor(_ref, ref) {
       plugins: nativePlugins
     };
 
-    var state = _prosemirrorState.EditorState.create(stateConf);
+    var state = _prosemirrorState.EditorState.create(stateConf); // debugger
+
 
     if (defaultState) {
       try {
         var jsonState = typeof defaultState == 'string' ? JSON.parse(defaultState) : defaultState;
-        state = _prosemirrorState.EditorState.fromJSON(jsonState, stateConf);
-      } catch (e) {}
+        state = _prosemirrorState.EditorState.fromJSON(stateConf, jsonState);
+      } catch (e) {
+        console.log(e);
+      }
     }
 
     var pmEditor = new _prosemirrorView.EditorView(container.current, {
@@ -103,6 +106,20 @@ function RichEditor(_ref, ref) {
       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() {
@@ -117,11 +134,7 @@ function RichEditor(_ref, ref) {
       backgroundColor: "#FFF"
     },
     spellCheck: false,
-    onClick: function onClick(e) {
-      var _dataRef$current$edit;
-
-      return (_dataRef$current$edit = dataRef.current.editor) === null || _dataRef$current$edit === void 0 ? void 0 : _dataRef$current$edit.view.focus();
-    }
+    onClick: handleClick
   });
 }
 

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

@@ -6,6 +6,7 @@
 .tita-rich-editor-normal-toolbar-item {
   width: 24px;
   height: 24px;
+  margin: 0 2px;
   font-size: 16px;
   display: flex;
   align-items: center;

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

@@ -156,7 +156,7 @@ var selectionContainsMark = function selectionContainsMark(state, markName) {
     marks = state.storedMarks || $from.marks();
   } else {
     state.doc.nodesBetween(from, to, function (node) {
-      marks.concat(node.marks);
+      marks = marks.concat(node.marks);
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.10.38",
+  "version": "1.10.41",
   "nameCN": "",
   "description": "",
   "main": "lib/index.js",
@@ -110,6 +110,7 @@
     "prosemirror-utils": "^0.9.6",
     "prosemirror-view": "^1.23.6",
     "qs": "^6.10.1",
+    "raf-schd": "^4.0.3",
     "rc-cascader": "^2.2.0",
     "rc-checkbox": "^2.3.2",
     "rc-color-picker": "^1.2.6",