@seafile/seafile-editor 3.0.7-alpha.2 → 3.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/constants/event-types.js +0 -1
  2. package/dist/containers/article-info/index.js +2 -2
  3. package/dist/containers/article-info/style.css +4 -4
  4. package/dist/containers/hotkeys-helper/style.css +3 -3
  5. package/dist/containers/loading/style.css +2 -1
  6. package/dist/containers/outline/style.css +5 -5
  7. package/dist/editors/slate-editor/editor-help/index.js +9 -35
  8. package/dist/extension/commons/dropdown-menu-item/index.css +4 -3
  9. package/dist/extension/commons/menu/menu-drop-down.js +1 -1
  10. package/dist/extension/commons/menu/menu.css +9 -8
  11. package/dist/extension/commons/more-menu/index.css +1 -1
  12. package/dist/extension/commons/select/field-setting.js +1 -1
  13. package/dist/extension/commons/select/index.js +1 -1
  14. package/dist/extension/commons/select/style.css +1 -1
  15. package/dist/extension/plugins/header/menu/index.js +2 -2
  16. package/dist/extension/plugins/header/menu/style.css +8 -8
  17. package/dist/extension/plugins/image/menu/index.js +1 -1
  18. package/dist/extension/plugins/image/render-element/style.css +1 -0
  19. package/dist/extension/plugins/link/render-elem/style.css +3 -4
  20. package/dist/extension/plugins/table/context-menu/index.js +1 -1
  21. package/dist/extension/plugins/table/context-menu/style.css +2 -2
  22. package/dist/extension/plugins/table/menu/index.js +1 -1
  23. package/dist/extension/toolbar/header-toolbar/insert-toolbar/index.js +1 -1
  24. package/dist/extension/toolbar/header-toolbar/insert-toolbar/style.css +12 -3
  25. package/dist/extension/toolbar/header-toolbar/style.css +4 -4
  26. package/dist/extension/toolbar/inline-toolbar/index.css +4 -4
  27. package/dist/extension/toolbar/user-help/style.css +3 -3
  28. package/package.json +1 -1
  29. package/public/media/seafile-editor-font/iconfont.css +22 -6
  30. package/public/media/seafile-editor-font/iconfont.eot +0 -0
  31. package/public/media/seafile-editor-font/iconfont.svg +8 -0
  32. package/public/media/seafile-editor-font/iconfont.ttf +0 -0
  33. package/public/media/seafile-editor-font/iconfont.woff +0 -0
  34. package/public/media/seafile-editor-font/iconfont.woff2 +0 -0
  35. package/public/media/seafile-editor-font.css +22 -6
  36. package/dist/containers/comment-panel/index.js +0 -93
@@ -18,7 +18,6 @@ const INTERNAL_EVENTS = exports.INTERNAL_EVENTS = {
18
18
  const EXTERNAL_EVENTS = exports.EXTERNAL_EVENTS = {
19
19
  ON_HELP_INFO_TOGGLE: 'on_help_info_toggle',
20
20
  ON_ARTICLE_INFO_TOGGLE: 'on_article_info_toggle',
21
- ON_COMMENT_PANEL_TOGGLE: 'on_comment_panel_toggle',
22
21
  ON_LINK_CLICK: 'on_link_click',
23
22
  ON_INSERT_IMAGE: 'on_insert_image',
24
23
  INSERT_ATTACHMENTS: 'insert_attachments',
@@ -74,7 +74,7 @@ const ArticleInfo = _ref => {
74
74
  props: fileDetailsProps
75
75
  } = fileDetails || {};
76
76
  return /*#__PURE__*/_react.default.createElement("div", {
77
- className: "sf-article-info-container-wrapper sf-panel-wrapper",
77
+ className: "sf-article-info-container-wrapper",
78
78
  style: containerWrapperStyle
79
79
  }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
80
80
  minWidth: MIN_PANEL_WIDTH,
@@ -82,7 +82,7 @@ const ArticleInfo = _ref => {
82
82
  resizeWidth: resizeWidth,
83
83
  resizeWidthEnd: resizeWidthEnd
84
84
  }), /*#__PURE__*/_react.default.createElement("div", {
85
- className: "sf-article-info-container sf-panel-container",
85
+ className: "sf-article-info-container",
86
86
  style: {
87
87
  width
88
88
  }
@@ -1,4 +1,4 @@
1
- .sf-panel-wrapper {
1
+ .sf-article-info-container-wrapper {
2
2
  display: flex;
3
3
  flex-direction: row;
4
4
  max-width: 620px;
@@ -7,16 +7,16 @@
7
7
  height: 100%;
8
8
  }
9
9
 
10
- .sf-panel-container {
10
+ .sf-article-info-container {
11
11
  height: 100%;
12
12
  }
13
13
 
14
- .sf-panel-container[style*="display: none"] {
14
+ .sf-article-info-container[style*="display: none"] {
15
15
  opacity: 0;
16
16
  pointer-events: none;
17
17
  }
18
18
 
19
- .sf-panel-container[style*="display: block"] {
19
+ .sf-article-info-container[style*="display: block"] {
20
20
  opacity: 1;
21
21
  pointer-events: auto;
22
22
  }
@@ -1,5 +1,5 @@
1
1
  .sf-editor-helper {
2
- z-index:101;
2
+ z-index: 101;
3
3
  position: relative;
4
4
  width: 300px;
5
5
  height: 100%;
@@ -12,7 +12,7 @@
12
12
 
13
13
  .sf-editor-helper__header {
14
14
  height: 50px;
15
- background-color: rgb(250,250,249);
15
+ background-color: rgb(250, 250, 249);
16
16
  display: flex;
17
17
  justify-content: center;
18
18
  align-items: center;
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .sf-editor-helper__header .help-close:hover {
43
- background-color: #E5E5E5;
43
+ background-color: #EFEFEF;
44
44
  }
45
45
 
46
46
  .sf-editor-helper__content {
@@ -21,7 +21,7 @@
21
21
 
22
22
  .lds-ripple div {
23
23
  position: absolute;
24
- border: 4px solid #eb8205;
24
+ border: 4px solid #ED7109;
25
25
  opacity: 1;
26
26
  border-radius: 50%;
27
27
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
@@ -39,6 +39,7 @@
39
39
  height: 0;
40
40
  opacity: 1;
41
41
  }
42
+
42
43
  100% {
43
44
  top: -1px;
44
45
  left: -1px;
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .sf-editor-outline-header_close:hover {
47
- color: #555;
47
+ color: #666;
48
48
  }
49
49
 
50
50
  .sf-editor-outline-list-container {
@@ -66,13 +66,13 @@
66
66
  }
67
67
 
68
68
  .sf-editor-outline-item.active {
69
- color: #eb8205;
69
+ color: #ED7109;
70
70
  }
71
71
 
72
72
  .sf-editor-outline-menu {
73
73
  line-height: 1;
74
74
  font-size: 14px;
75
- color: #888;
75
+ color: #999;
76
76
  cursor: pointer;
77
77
  width: 28px;
78
78
  height: 28px;
@@ -84,7 +84,7 @@
84
84
  justify-content: center;
85
85
  position: absolute;
86
86
  top: 20px;
87
- left: -15px;;
87
+ left: -15px;
88
88
  pointer-events: all;
89
89
  }
90
90
 
@@ -115,7 +115,7 @@
115
115
  }
116
116
 
117
117
  .sf-editor-outline-menu:not(.disabled):hover {
118
- color: #333;
118
+ color: #666;
119
119
  }
120
120
 
121
121
  .sf-editor-outline .empty-container {
@@ -12,7 +12,6 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
12
12
  var _eventTypes = require("../../../constants/event-types");
13
13
  var _hotkeysHelper = _interopRequireDefault(require("../../../containers/hotkeys-helper"));
14
14
  var _articleInfo = _interopRequireDefault(require("../../../containers/article-info"));
15
- var _commentPanel = _interopRequireDefault(require("../../../containers/comment-panel"));
16
15
  require("./style.css");
17
16
  function EditorHelp(_ref) {
18
17
  let {
@@ -20,57 +19,32 @@ function EditorHelp(_ref) {
20
19
  } = _ref;
21
20
  const [isShowHelpInfo, setIsShowHelpInfo] = (0, _react.useState)(false);
22
21
  const [isShowArticleInfo, setIsShowArticleInfo] = (0, _react.useState)(false);
23
- const [isShowCommentPanel, setIsShowCommentPanel] = (0, _react.useState)(false);
24
- const closeAllPanels = (0, _react.useCallback)(() => {
22
+ const updateArticleInfoState = (0, _react.useCallback)(() => {
23
+ setIsShowArticleInfo(prevState => !prevState);
25
24
  setIsShowHelpInfo(false);
25
+ }, []);
26
+ const updateHelpInfoState = (0, _react.useCallback)(state => {
27
+ setIsShowHelpInfo(state);
26
28
  setIsShowArticleInfo(false);
27
- setIsShowCommentPanel(false);
28
29
  const eventBus = _eventBus.default.getInstance();
29
30
  eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
30
31
  }, []);
31
- const updateArticleInfoState = (0, _react.useCallback)(details => {
32
- if (details === null) {
33
- setIsShowArticleInfo(false);
34
- } else {
35
- closeAllPanels();
36
- setIsShowArticleInfo(true);
37
- }
38
- }, [closeAllPanels]);
39
- const updateHelpInfoState = (0, _react.useCallback)(state => {
40
- if (isShowHelpInfo && state === false) {
41
- setIsShowHelpInfo(false);
42
- } else if (!isShowHelpInfo && state !== false) {
43
- closeAllPanels();
44
- setIsShowHelpInfo(true);
45
- }
46
- }, [isShowHelpInfo, closeAllPanels]);
47
- const updateCommentPanelState = (0, _react.useCallback)(config => {
48
- if (config === null) {
49
- setIsShowCommentPanel(false);
50
- } else {
51
- closeAllPanels();
52
- setIsShowCommentPanel(true);
53
- }
54
- }, [closeAllPanels]);
55
32
  (0, _react.useEffect)(() => {
56
33
  const eventBus = _eventBus.default.getInstance();
57
34
  const unsubscribeArticleInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, updateArticleInfoState);
58
35
  const unsubscribeHelpInfo = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_HELP_INFO_TOGGLE, updateHelpInfoState);
59
- const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, updateCommentPanelState);
60
36
  return () => {
61
37
  unsubscribeHelpInfo();
62
38
  unsubscribeArticleInfo();
63
- unsubscribeCommentPanel();
64
39
  };
65
- }, [updateArticleInfoState, updateHelpInfoState, updateCommentPanelState]);
40
+ // eslint-disable-next-line react-hooks/exhaustive-deps
41
+ }, [updateArticleInfoState, updateHelpInfoState]);
66
42
  const containerClass = (0, _classnames.default)('sf-markdown-help-wrapper', {
67
- 'active': isShowArticleInfo || isShowHelpInfo || isShowCommentPanel
43
+ 'active': isShowArticleInfo || isShowHelpInfo
68
44
  });
69
45
  return /*#__PURE__*/_react.default.createElement("div", {
70
46
  className: containerClass
71
47
  }, /*#__PURE__*/_react.default.createElement(_articleInfo.default, {
72
48
  isVisible: isShowArticleInfo
73
- }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null), /*#__PURE__*/_react.default.createElement(_commentPanel.default, {
74
- isVisible: isShowCommentPanel
75
- }));
49
+ }), isShowHelpInfo && /*#__PURE__*/_react.default.createElement(_hotkeysHelper.default, null));
76
50
  }
@@ -1,6 +1,6 @@
1
1
  /* insert element dropdown item */
2
2
  .sf-dropdown-item-with-left-icon .sf-dropdown-item-content .sf-dropdown-item-content-icon {
3
- color: #444;
3
+ color: #666;
4
4
  }
5
5
 
6
6
  .sf-link-dropdown-menu-item .sf-dropdown-item-content {
@@ -12,7 +12,8 @@
12
12
  }
13
13
 
14
14
  .sf-dropdown-menu .sf-dropdown-item-right-icon {
15
- color: #999;
15
+ color: #666;
16
+ font-size: 12px !important;
16
17
  }
17
18
 
18
19
  .sf-dropdown-menu .sf-dropdown-item-with-left-icon {
@@ -43,7 +44,7 @@
43
44
  }
44
45
 
45
46
  .sf-dropdown-menu .sf-dropdown-item-right-icon {
46
- color: #999;
47
+ color: #666;
47
48
  }
48
49
 
49
50
  .sf-dropdown-menu .sf-dropdown-item-content .sf-dropdown-item-content-icon {
@@ -65,7 +65,7 @@ const MenuDropDown = props => {
65
65
  }), /*#__PURE__*/_react.default.createElement("div", {
66
66
  className: "sf-menu-with-dropdown-triangle"
67
67
  }, /*#__PURE__*/_react.default.createElement("i", {
68
- className: "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowDropDown ? 'drop-down' : 'caret-up')
68
+ className: "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowDropDown ? 'arrow-down' : 'arrow-up')
69
69
  })), !!isShowDropDown && /*#__PURE__*/_react.default.createElement("div", {
70
70
  ref: menuDropdownRef,
71
71
  className: "sf-dropdown-list "
@@ -3,7 +3,7 @@
3
3
  padding: 6px 0 6px 8px;
4
4
  font-size: 0.75rem;
5
5
  border-right: 1px solid #e5e6e8;
6
- color: #555;
6
+ color: #666;
7
7
  display: flex;
8
8
  align-items: center;
9
9
  justify-content: center;
@@ -16,21 +16,22 @@
16
16
  line-height: 24px;
17
17
  margin-right: 8px;
18
18
  border: none !important;
19
- color: #555;
19
+ color: #666;
20
20
  background-color: #fcfcfc;
21
+ padding-inline: 0;
21
22
  }
22
23
 
23
24
  .sf-menu-group .sf-menu-group-item:disabled {
24
- color: #BDBDBD;
25
+ color: #C2C2C2;
25
26
  }
26
27
 
27
28
  .sf-menu-group .sf-menu-group-item:hover {
28
- background-color: #F2F2F2;
29
+ background-color: #EFEFEF;
29
30
  border-radius: 2px;
30
31
  }
31
32
 
32
33
  .sf-menu-group .sf-menu-group-item[data-active='true'] {
33
- color: #eb8205;
34
+ color: #ED7109;
34
35
  }
35
36
 
36
37
  .sf-menu-group .sf-menu-group-item .mdfont {
@@ -51,12 +52,12 @@
51
52
  }
52
53
 
53
54
  .sf-menu-group .sf-menu-group-item.sf-menu-with-dropdown.disabled {
54
- color: #999;
55
+ color: #C2C2C2;
55
56
  width: 24px !important;
56
57
  }
57
58
 
58
59
  .sf-menu-with-dropdown:not(.disabled):hover {
59
- background: #F2F2F2;
60
+ background: #EFEFEF;
60
61
  border-radius: 2px;
61
62
  }
62
63
 
@@ -78,7 +79,7 @@
78
79
 
79
80
  .sf-menu-with-dropdown .sf-menu-with-dropdown-triangle .sf-menu-with-dropdown-triangle-icon {
80
81
  font-size: 12px;
81
- color: #999;
82
+ color: #666;
82
83
  }
83
84
 
84
85
  .sf-dropdown-list {
@@ -20,7 +20,7 @@
20
20
 
21
21
  .sf-editor-menu-popover .popover-inner .sf-slate-help-info-control .md-use-help {
22
22
  font-size: 13px;
23
- color: #555;
23
+ color: #666;
24
24
  }
25
25
 
26
26
  .sf-editor-menu-popover .bs-popover-auto[x-placement^=bottom] {
@@ -91,7 +91,7 @@ class FieldSetting extends _react.default.Component {
91
91
  }, t('Font_style')), /*#__PURE__*/_react.default.createElement("span", {
92
92
  className: "icon-container"
93
93
  }, /*#__PURE__*/_react.default.createElement("span", {
94
- className: "mdfont md-caret-up op-icon"
94
+ className: "mdfont md-arrow-up op-icon"
95
95
  })), isShowMenu && /*#__PURE__*/_react.default.createElement(_menu.default, {
96
96
  position: this.state.position
97
97
  }, /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
@@ -116,7 +116,7 @@ class Select extends _react.default.Component {
116
116
  }, currentOption.label)), /*#__PURE__*/_react.default.createElement("span", {
117
117
  className: "operation"
118
118
  }, /*#__PURE__*/_react.default.createElement("i", {
119
- className: "mdfont md-drop-down arrow"
119
+ className: "mdfont md-arrow-down arrow"
120
120
  }))), isShowSelector && /*#__PURE__*/_react.default.createElement("span", {
121
121
  className: "select-popover"
122
122
  }, /*#__PURE__*/_react.default.createElement(_fieldSetting.default, {
@@ -31,7 +31,7 @@
31
31
 
32
32
  .select-container .control-container .control-icon {
33
33
  font-size: 13px;
34
- color: rgb(170, 170, 170);
34
+ color: #aaaaaa;
35
35
  cursor: default;
36
36
  margin-right: 5px;
37
37
  }
@@ -76,7 +76,7 @@ const HeaderMenu = _ref => {
76
76
  }, /*#__PURE__*/_react.default.createElement("span", {
77
77
  className: "active"
78
78
  }, t(_constants.HEADER_TITLE_MAP[currentHeaderType !== null && currentHeaderType !== void 0 ? currentHeaderType : _constants.ELementTypes.PARAGRAPH])), !isDisabled && /*#__PURE__*/_react.default.createElement("span", {
79
- className: "mdfont md-".concat(isShowHeaderPopover ? 'caret-up' : 'drop-down')
79
+ className: "mdfont md-".concat(isShowHeaderPopover ? 'arrow-up' : 'arrow-down')
80
80
  })), isShowHeaderPopover && /*#__PURE__*/_react.default.createElement("div", {
81
81
  ref: headerPopoverRef,
82
82
  className: "sf-header-popover"
@@ -92,7 +92,7 @@ const HeaderMenu = _ref => {
92
92
  }),
93
93
  onClick: () => onMouseDown(item)
94
94
  }, isSelected && /*#__PURE__*/_react.default.createElement("i", {
95
- className: "sf-font sf-check-mark"
95
+ className: "mdfont md-check-mark"
96
96
  }), /*#__PURE__*/_react.default.createElement("span", null, t(_constants.HEADER_TITLE_MAP[item]))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
97
97
  target: id,
98
98
  placement: "right"
@@ -2,7 +2,7 @@
2
2
  display: flex;
3
3
  height: 100%;
4
4
  width: 140px;
5
- padding: 6px 8px;
5
+ padding: 6px 8px 6px 0;
6
6
  position: relative;
7
7
  align-items: center;
8
8
  color: #212529;
@@ -31,6 +31,7 @@
31
31
  justify-content: space-between;
32
32
  align-items: center;
33
33
  padding-left: 5px;
34
+ padding-right: 5px;
34
35
  height: 24px;
35
36
  cursor: pointer;
36
37
  }
@@ -41,7 +42,7 @@
41
42
  }
42
43
 
43
44
  .sf-header-menu .header-toggle-disabled {
44
- color: #BDBDBD;
45
+ color: #C2C2C2;
45
46
  cursor: unset;
46
47
  }
47
48
 
@@ -57,14 +58,14 @@
57
58
  }
58
59
 
59
60
  .sf-header-menu .sf-header-toggle .mdfont {
60
- color: #999;
61
+ color: #666;
61
62
  width: 12px;
62
63
  height: 24px;
63
64
  margin-left: 8px;
64
65
  display: inline-flex;
65
66
  justify-content: center;
66
67
  align-items: center;
67
- font-size: 14px;
68
+ font-size: 12px;
68
69
  cursor: pointer;
69
70
  }
70
71
 
@@ -93,12 +94,11 @@
93
94
  }
94
95
 
95
96
  .sf-header-menu .sf-header-popover .sf-dropdown-menu-item:hover {
96
- background-color: #F2F2F2;
97
+ background-color: #EFEFEF;
97
98
  }
98
99
 
99
- .sf-header-menu .sf-header-popover .sf-dropdown-menu-item .sf-check-mark {
100
+ .sf-header-menu .sf-header-popover .sf-dropdown-menu-item .md-check-mark {
100
101
  position: absolute;
101
102
  left: 8px;
102
- transform: scale(.8);
103
- color: #798d99;
103
+ color: #666;
104
104
  }
@@ -45,7 +45,7 @@ const ImageMenu = _ref => {
45
45
  menuConfig: menuConfig,
46
46
  className: "pr-2"
47
47
  }, !readonly && /*#__PURE__*/_react.default.createElement("i", {
48
- className: "mdfont md-right-slide sf-dropdown-item-right-icon"
48
+ className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
49
49
  })), !readonly && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
50
50
  target: menuConfig.id,
51
51
  trigger: "hover",
@@ -42,6 +42,7 @@
42
42
  user-select: none !important;
43
43
  z-index: 100;
44
44
  cursor: pointer;
45
+ color: #666;
45
46
  }
46
47
 
47
48
  .sf-image-wrapper .full-screen:hover {
@@ -1,5 +1,5 @@
1
1
  .sf-virtual-link {
2
- color: #eb8205;
2
+ color: #ED7109;
3
3
  }
4
4
 
5
5
  .sf-virtual-link:hover {
@@ -27,7 +27,6 @@
27
27
  font-size: 12px;
28
28
  color: #212529;
29
29
  padding: 0 5px;
30
- border-right: 1p solid #f1f1f1;
31
30
  line-height: 20px;
32
31
  }
33
32
 
@@ -49,7 +48,7 @@
49
48
  margin-left: 8px;
50
49
  display: flex;
51
50
  align-items: center;
52
- color: #555;
51
+ color: #666;
53
52
  }
54
53
 
55
54
  .sf-link-op-icon .mdfont {
@@ -58,5 +57,5 @@
58
57
  }
59
58
 
60
59
  .sf-link-op-icon:hover {
61
- background: #f2f2f2;
60
+ background: #EFEFEF;
62
61
  }
@@ -114,7 +114,7 @@ const ContextMenu = _ref => {
114
114
  ref: horizontalAlignRef,
115
115
  className: "sf-context-menu-item sf-dropdown-menu-item side-extendable"
116
116
  }, /*#__PURE__*/_react.default.createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react.default.createElement("i", {
117
- className: "mdfont md-right-slide"
117
+ className: "mdfont md-arrow-right"
118
118
  })), horizontalAlignRef.current && /*#__PURE__*/_react.default.createElement(_horizontalAlignPopover.default, {
119
119
  target: horizontalAlignRef,
120
120
  editor: editor,
@@ -78,9 +78,9 @@
78
78
  color: #adb5bd;
79
79
  }
80
80
 
81
- .side-extendable .md-right-slide {
81
+ .side-extendable .md-arrow-right {
82
82
  color: #fff;
83
- font-size: 14px;
83
+ font-size: 12px;
84
84
  }
85
85
 
86
86
  .sf-context-menu .sf-dropdown-menu-item:hover {
@@ -35,7 +35,7 @@ const TableMenu = _ref => {
35
35
  menuConfig: menuConfig,
36
36
  className: "pr-2"
37
37
  }, !disabled && /*#__PURE__*/_react.default.createElement("i", {
38
- className: "mdfont md-right-slide sf-dropdown-item-right-icon"
38
+ className: "mdfont md-arrow-right sf-dropdown-item-right-icon"
39
39
  })), !disabled && isOpenTableSizeSelector && /*#__PURE__*/_react.default.createElement(_tableSizeSelector.default, {
40
40
  ref: tablePopoverRef,
41
41
  editor: editor,
@@ -53,7 +53,7 @@ const InsertToolbar = _ref => {
53
53
  'rich-icon-btn-hover': isRichEditor && !disabled,
54
54
  'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
55
55
  });
56
- const caretIconClass = "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowMenu ? 'caret-up' : 'drop-down');
56
+ const caretIconClass = "sf-menu-with-dropdown-triangle-icon mdfont md-".concat(isShowMenu ? 'arrow-up' : 'arrow-down');
57
57
  const {
58
58
  bottom
59
59
  } = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
@@ -4,17 +4,21 @@
4
4
  align-items: center;
5
5
  justify-content: space-between;
6
6
  background-color: transparent;
7
- color: #444
7
+ color: #666
8
+ }
9
+
10
+ .menu-group-item.sf-insert-toolbar-btn .text-truncate {
11
+ color: #212529;
8
12
  }
9
13
 
10
14
  .menu-group-item.sf-insert-toolbar-btn:not(.disable):hover {
11
- background-color: #F2F2F2;
15
+ background-color: #EFEFEF;
12
16
  }
13
17
 
14
18
  .menu-group-item.sf-insert-toolbar-btn.disabled {
15
19
  /* 64: 76 - 12 */
16
20
  width: 64px !important;
17
- color: #BDBDBD;
21
+ color: #c2c2c2;
18
22
  }
19
23
 
20
24
  .sf-insert-toolbar-btn .sf-menu-with-dropdown-icon {
@@ -45,3 +49,8 @@
45
49
  .menu-group-item.sf-insert-toolbar-btn .mdfont {
46
50
  font-size: 14px;
47
51
  }
52
+
53
+ .menu-group-item.sf-insert-toolbar-btn .md-arrow-down {
54
+ font-size: 12px;
55
+ margin-right: 6px;
56
+ }
@@ -11,11 +11,11 @@
11
11
  display: flex;
12
12
  justify-content: center;
13
13
  cursor: pointer;
14
- color: #555;
14
+ color: #666;
15
15
  }
16
16
 
17
17
  .sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
18
- background-color: #e5e5e5;
18
+ background-color: #EFEFEF;
19
19
  }
20
20
 
21
21
  .sf-slate-editor-toolbar .sf-slate-help-info-control {
@@ -27,12 +27,12 @@
27
27
  display: flex;
28
28
  justify-content: center;
29
29
  cursor: pointer;
30
- color: #555;
30
+ color: #666;
31
31
  }
32
32
 
33
33
  .sf-slate-editor-toolbar .sf-slate-help-info-control>span:hover {
34
34
  cursor: pointer;
35
- color: #333;
35
+ color: #999;
36
36
  }
37
37
 
38
38
  .sf-slate-editor-toolbar .sf-slate-article-info-control .mdfont {
@@ -11,11 +11,11 @@
11
11
  display: flex;
12
12
  justify-content: center;
13
13
  cursor: pointer;
14
- color: #555;
14
+ color: #666;
15
15
  }
16
16
 
17
17
  .sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
18
- background-color: #e5e5e5;
18
+ background-color: #EFEFEF;
19
19
  }
20
20
 
21
21
  .sf-slate-editor-toolbar .sf-slate-help-info-control {
@@ -27,12 +27,12 @@
27
27
  display: flex;
28
28
  justify-content: center;
29
29
  cursor: pointer;
30
- color: #555;
30
+ color: #666;
31
31
  }
32
32
 
33
33
  .sf-slate-editor-toolbar .sf-slate-help-info-control>span:hover {
34
34
  cursor: pointer;
35
- color: #333;
35
+ color: #999;
36
36
  }
37
37
 
38
38
  .sf-slate-editor-toolbar .sf-slate-article-info-control .mdfont {
@@ -16,7 +16,7 @@
16
16
  display: flex;
17
17
  align-items: center;
18
18
  margin-top: 3px;
19
- background-color: rgb(248, 248, 248);
19
+ background-color: #f8f8f8;
20
20
  }
21
21
 
22
22
  .keyboard-shortcut-title {
@@ -38,8 +38,8 @@
38
38
 
39
39
  .keyboard-shortcut kbd {
40
40
  font: inherit;
41
- background-color: hsla(0,0%,100%,0.25);
42
- border-color: rgba(0,0,0,0.1);
41
+ background-color: hsla(0, 0%, 100%, 0.25);
42
+ border-color: rgba(0, 0, 0, 0.1);
43
43
  text-transform: uppercase;
44
44
  text-align: center;
45
45
  border-radius: 3px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/seafile-editor",
3
- "version": "3.0.7-alpha.2",
3
+ "version": "3.0.7",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -1,11 +1,11 @@
1
1
  @font-face {
2
2
  font-family: "mdfont"; /* Project id 5080543 */
3
- src: url('iconfont.eot?t=1764915317581'); /* IE9 */
4
- src: url('iconfont.eot?t=1764915317581#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
- url('iconfont.woff2?t=1764915317581') format('woff2'),
6
- url('iconfont.woff?t=1764915317581') format('woff'),
7
- url('iconfont.ttf?t=1764915317581') format('truetype'),
8
- url('iconfont.svg?t=1764915317581#mdfont') format('svg');
3
+ src: url('iconfont.eot?t=1768372232343'); /* IE9 */
4
+ src: url('iconfont.eot?t=1768372232343#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
+ url('iconfont.woff2?t=1768372232343') format('woff2'),
6
+ url('iconfont.woff?t=1768372232343') format('woff'),
7
+ url('iconfont.ttf?t=1768372232343') format('truetype'),
8
+ url('iconfont.svg?t=1768372232343#mdfont') format('svg');
9
9
  }
10
10
 
11
11
  .mdfont {
@@ -16,6 +16,22 @@
16
16
  -moz-osx-font-smoothing: grayscale;
17
17
  }
18
18
 
19
+ .md-arrow-down:before {
20
+ content: "\e6ce";
21
+ }
22
+
23
+ .md-arrow-up:before {
24
+ content: "\e6cb";
25
+ }
26
+
27
+ .md-arrow-left:before {
28
+ content: "\e6cc";
29
+ }
30
+
31
+ .md-arrow-right:before {
32
+ content: "\e6cd";
33
+ }
34
+
19
35
  .md-outline:before {
20
36
  content: "\e6bd";
21
37
  }
@@ -14,6 +14,14 @@
14
14
  />
15
15
  <missing-glyph />
16
16
 
17
+ <glyph glyph-name="arrow-down" unicode="&#59086;" d="M513.92 128l385.952 385.92L832 581.824l-318.08-318.08-318.048 318.08L128 513.92 513.92 128z" horiz-adv-x="1024" />
18
+
19
+ <glyph glyph-name="arrow-up" unicode="&#59083;" d="M513.92 640l385.952-385.92-67.84-67.904-318.08 318.08-318.08-318.08-67.84 67.904L513.92 640z" horiz-adv-x="1024" />
20
+
21
+ <glyph glyph-name="arrow-left" unicode="&#59084;" d="M285.12 384l385.92-385.92 67.84 67.84L420.864 384l318.08 318.08-67.872 67.84L285.12 384z" horiz-adv-x="1024" />
22
+
23
+ <glyph glyph-name="arrow-right" unicode="&#59085;" d="M738.88 384L352.96-1.92l-67.84 67.84L603.136 384l-318.08 318.08 67.872 67.84L738.88 384z" horiz-adv-x="1024" />
24
+
17
25
  <glyph glyph-name="outline" unicode="&#59069;" d="M835.808 184.384a124.192 124.192 0 0 0 0-248.384h-228.576a124.192 124.192 0 0 0 0 248.384h228.576z m-228.576-96a28.192 28.192 0 0 1 0-56.384h228.576a28.192 28.192 0 0 1 0 56.384h-228.576zM351.456 670.688H160v-230.528h278.528v-96H160v-213.216c0-21.568 17.472-39.104 39.04-39.104h239.488v-96H199.04A135.104 135.104 0 0 0 64 130.944V766.688h287.456v-96zM835.808 489.152a124.224 124.224 0 0 0 0-248.384h-228.576a124.16 124.16 0 0 0 0 248.384h228.576z m-228.576-96a28.192 28.192 0 0 1 0-56.384h228.576a28.192 28.192 0 0 1 0 56.384h-228.576zM835.776 832a124.224 124.224 0 1 0 0-248.384h-304.736a124.192 124.192 0 0 0 0 248.384h304.736z m-304.736-96a28.192 28.192 0 0 1 0-56.384h304.736a28.224 28.224 0 1 1 0 56.384h-304.736z" horiz-adv-x="1024" />
18
26
 
19
27
  <glyph glyph-name="sm-close" unicode="&#59070;" d="M929.696 734.208L579.744 384.064 929.92 33.824l-67.904-67.872-350.176 350.176L161.92-34.048l-67.904 67.84L443.968 384 94.08 733.952l67.904 67.904 349.92-349.952L861.824 802.048l67.872-67.84z" horiz-adv-x="1024" />
@@ -1,14 +1,14 @@
1
1
  @font-face {
2
2
  font-family: "mdfont";
3
3
  /* Project id 5080543 */
4
- src: url('./seafile-editor-font/iconfont.eot?t=1764915317581');
4
+ src: url('./seafile-editor-font/iconfont.eot?t=1768372232343');
5
5
  /* IE9 */
6
- src: url('./seafile-editor-font/iconfont.eot?t=1764915317581#iefix') format('embedded-opentype'),
6
+ src: url('./seafile-editor-font/iconfont.eot?t=1768372232343#iefix') format('embedded-opentype'),
7
7
  /* IE6-IE8 */
8
- url('./seafile-editor-font/iconfont.woff2?t=1764915317581') format('woff2'),
9
- url('./seafile-editor-font/iconfont.woff?t=1764915317581') format('woff'),
10
- url('./seafile-editor-font/iconfont.ttf?t=1764915317581') format('truetype'),
11
- url('./seafile-editor-font/iconfont.svg?t=1764915317581#mdfont') format('svg');
8
+ url('./seafile-editor-font/iconfont.woff2?t=1768372232343') format('woff2'),
9
+ url('./seafile-editor-font/iconfont.woff?t=1768372232343') format('woff'),
10
+ url('./seafile-editor-font/iconfont.ttf?t=1768372232343') format('truetype'),
11
+ url('./seafile-editor-font/iconfont.svg?t=1768372232343#mdfont') format('svg');
12
12
  }
13
13
 
14
14
  .mdfont {
@@ -19,6 +19,22 @@
19
19
  -moz-osx-font-smoothing: grayscale;
20
20
  }
21
21
 
22
+ .md-arrow-down:before {
23
+ content: "\e6ce";
24
+ }
25
+
26
+ .md-arrow-up:before {
27
+ content: "\e6cb";
28
+ }
29
+
30
+ .md-arrow-left:before {
31
+ content: "\e6cc";
32
+ }
33
+
34
+ .md-arrow-right:before {
35
+ content: "\e6cd";
36
+ }
37
+
22
38
  .md-outline:before {
23
39
  content: "\e6bd";
24
40
  }
@@ -1,93 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = void 0;
9
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
- var _react = _interopRequireWildcard(require("react"));
11
- var _resizeWidth = _interopRequireDefault(require("../article-info/resize-width"));
12
- var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
13
- var _eventTypes = require("../../constants/event-types");
14
- require("../article-info/style.css");
15
- const MIN_PANEL_WIDTH = 360;
16
- const MAX_PANEL_WIDTH = 620;
17
- const CommentPanel = _ref => {
18
- let {
19
- isVisible
20
- } = _ref;
21
- const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
22
- const [commentConfig, setCommentConfig] = (0, _react.useState)({});
23
- const containerWrapperStyle = (0, _react.useMemo)(() => {
24
- const style = {
25
- width,
26
- zIndex: 101,
27
- display: isVisible ? 'block' : 'none'
28
- };
29
- if (!style.width || style.width < MIN_PANEL_WIDTH) {
30
- style.width = MIN_PANEL_WIDTH;
31
- } else if (style.width > MAX_PANEL_WIDTH) {
32
- style.width = MAX_PANEL_WIDTH;
33
- }
34
- return style;
35
- }, [width, isVisible]);
36
- const resizeWidth = (0, _react.useCallback)(width => {
37
- if (width >= MIN_PANEL_WIDTH && width <= MAX_PANEL_WIDTH) {
38
- setWidth(width);
39
- }
40
- }, []);
41
- const resizeWidthEnd = (0, _react.useCallback)(width => {
42
- const settings = JSON.parse(window.localStorage.getItem('sf-editor') || '{}');
43
- window.localStorage.setItem('sf-editor', JSON.stringify((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settings), {}, {
44
- commentPanelWidth: width
45
- })));
46
- const eventBus = _eventBus.default.getInstance();
47
- eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
48
- }, []);
49
- (0, _react.useEffect)(() => {
50
- const settings = JSON.parse(window.localStorage.getItem('sf-editor', '{}')) || {};
51
- const {
52
- commentPanelWidth
53
- } = settings;
54
- const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(commentPanelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
55
- setWidth(width);
56
- }, []);
57
- const handleCommentConfig = (0, _react.useCallback)(config => {
58
- setCommentConfig(config);
59
- }, []);
60
- (0, _react.useEffect)(() => {
61
- const eventBus = _eventBus.default.getInstance();
62
- const unsubscribeCommentPanel = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.ON_COMMENT_PANEL_TOGGLE, handleCommentConfig);
63
- return () => {
64
- unsubscribeCommentPanel();
65
- };
66
- // eslint-disable-next-line react-hooks/exhaustive-deps
67
- }, []);
68
- (0, _react.useEffect)(() => {
69
- const eventBus = _eventBus.default.getInstance();
70
- eventBus.dispatch(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE);
71
- }, [isVisible, commentConfig]);
72
- const {
73
- component: commentComponent,
74
- props: commentProps
75
- } = commentConfig || {};
76
- return /*#__PURE__*/_react.default.createElement("div", {
77
- className: "sf-comment-panel-wrapper sf-panel-wrapper",
78
- style: containerWrapperStyle
79
- }, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
80
- minWidth: MIN_PANEL_WIDTH,
81
- maxWidth: MAX_PANEL_WIDTH,
82
- resizeWidth: resizeWidth,
83
- resizeWidthEnd: resizeWidthEnd
84
- }), /*#__PURE__*/_react.default.createElement("div", {
85
- className: "sf-comment-panel-container sf-panel-container",
86
- style: {
87
- width
88
- }
89
- }, commentComponent && commentProps && /*#__PURE__*/_react.default.createElement(commentComponent, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, commentProps), {}, {
90
- width
91
- }))));
92
- };
93
- var _default = exports.default = CommentPanel;