@seafile/seafile-editor 2.0.18 → 2.0.20-beta

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 (44) hide show
  1. package/dist/constants/event-types.js +4 -2
  2. package/dist/editors/inline-editor/index.js +34 -0
  3. package/dist/extension/commons/dropdown-menu-item/index.css +54 -0
  4. package/dist/extension/commons/dropdown-menu-item/index.js +60 -0
  5. package/dist/extension/commons/insert-element-dialog/index.js +50 -18
  6. package/dist/extension/commons/menu/menu-drop-down.js +1 -1
  7. package/dist/extension/commons/menu-shortcut-indicator/index.js +22 -0
  8. package/dist/extension/commons/menu-shortcut-indicator/style.css +18 -0
  9. package/dist/extension/constants/menus-config.js +7 -1
  10. package/dist/extension/plugins/code-block/menu/index.js +11 -12
  11. package/dist/extension/plugins/column/menu/index.js +14 -13
  12. package/dist/extension/plugins/formula/menu/formula-modal.js +2 -2
  13. package/dist/extension/plugins/formula/menu/index.js +15 -44
  14. package/dist/extension/plugins/header/menu/style.css +2 -2
  15. package/dist/extension/plugins/image/menu/image-menu-dialog.js +6 -6
  16. package/dist/extension/plugins/image/menu/image-menu-popover.js +1 -1
  17. package/dist/extension/plugins/image/menu/index.css +36 -0
  18. package/dist/extension/plugins/image/menu/index.js +57 -52
  19. package/dist/extension/plugins/table/constant.js +4 -1
  20. package/dist/extension/plugins/table/context-menu/horizontal-align-popover/index.js +77 -0
  21. package/dist/extension/plugins/table/context-menu/horizontal-align-popover/style.css +24 -0
  22. package/dist/extension/plugins/table/context-menu/index.js +20 -1
  23. package/dist/extension/plugins/table/context-menu/style.css +19 -0
  24. package/dist/extension/plugins/table/menu/index.js +14 -38
  25. package/dist/extension/plugins/table/menu/style.css +1 -0
  26. package/dist/extension/plugins/table/render-elem/index.js +6 -6
  27. package/dist/extension/toolbar/header-toolbar/index.js +17 -48
  28. package/dist/extension/toolbar/header-toolbar/insert-toolbar/index.js +100 -0
  29. package/dist/extension/toolbar/header-toolbar/insert-toolbar/style.css +47 -0
  30. package/dist/extension/toolbar/inline-toolbar/index.css +4 -0
  31. package/dist/extension/toolbar/inline-toolbar/index.js +17 -24
  32. package/dist/pages/longtext-inline-editor/fallback-editor.js +14 -0
  33. package/dist/slate-convert/slate-to-md/index.js +1 -7
  34. package/package.json +1 -1
  35. package/public/locales/en/seafile-editor.json +6 -1
  36. package/public/locales/zh-CN/seafile-editor.json +6 -1
  37. package/public/locales/zh_CN/seafile-editor.json +6 -1
  38. package/public/media/seafile-editor-font/iconfont.eot +0 -0
  39. package/public/media/seafile-editor-font/iconfont.svg +68 -60
  40. package/public/media/seafile-editor-font/iconfont.ttf +0 -0
  41. package/public/media/seafile-editor-font/iconfont.woff +0 -0
  42. package/public/media/seafile-editor-font/iconfont.woff2 +0 -0
  43. package/public/media/seafile-editor-font.css +139 -123
  44. /package/dist/extension/plugins/image/menu/{style.css → image-menu-popover.css} +0 -0
@@ -0,0 +1,100 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _reactI18next = require("react-i18next");
11
+ var _reactstrap = require("reactstrap");
12
+ var _classnames = _interopRequireDefault(require("classnames"));
13
+ var _tooltip = _interopRequireDefault(require("../../../commons/tooltip"));
14
+ var _menu = _interopRequireDefault(require("../../../plugins/image/menu"));
15
+ var _menu2 = _interopRequireDefault(require("../../../plugins/table/menu"));
16
+ var _menu3 = _interopRequireDefault(require("../../../plugins/code-block/menu"));
17
+ var _menu4 = _interopRequireDefault(require("../../../plugins/formula/menu"));
18
+ var _menu5 = _interopRequireDefault(require("../../../plugins/column/menu"));
19
+ var _constants = require("../../../../constants");
20
+ require("./style.css");
21
+ const InsertToolbar = _ref => {
22
+ let {
23
+ isRichEditor = true,
24
+ className = 'menu-group-item',
25
+ editor,
26
+ readonly,
27
+ isSupportFormula,
28
+ isSupportColumn
29
+ } = _ref;
30
+ const [isShowMenu, setMenuShow] = (0, _react.useState)(false);
31
+ const {
32
+ t
33
+ } = (0, _reactI18next.useTranslation)(_constants.TRANSLATE_NAMESPACE);
34
+ const popoverRef = (0, _react.useRef)(null);
35
+ const disabled = readonly;
36
+ const insertButtonRef = (0, _react.useRef)(null);
37
+ const insertToolbarId = 'sf-insert-toolbar-btn';
38
+ const toggle = (0, _react.useCallback)(event => {
39
+ var _event$target;
40
+ if (event !== null && event !== void 0 && event.target && (event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) === 'INPUT') {
41
+ return;
42
+ }
43
+ popoverRef.current && popoverRef.current.toggle();
44
+ setMenuShow(!isShowMenu);
45
+ // eslint-disable-next-line react-hooks/exhaustive-deps
46
+ }, [isShowMenu]);
47
+ const validClassName = (0, _classnames.default)(className, 'sf-menu-with-dropdown sf-insert-toolbar-btn', {
48
+ 'menu-show': isShowMenu,
49
+ 'disabled': disabled,
50
+ 'rich-icon-btn d-flex': isRichEditor,
51
+ 'rich-icon-btn-disabled': isRichEditor && disabled,
52
+ 'rich-icon-btn-hover': isRichEditor && !disabled,
53
+ 'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
54
+ });
55
+ const caretIconClass = `sf-menu-with-dropdown-triangle-icon iconfont icon-${isShowMenu ? 'caret-up' : 'drop-down'}`;
56
+ const {
57
+ bottom
58
+ } = insertButtonRef.current ? insertButtonRef.current.getBoundingClientRect() : {
59
+ bottom: 92.5
60
+ };
61
+ const props = {
62
+ editor,
63
+ readonly,
64
+ toggle
65
+ };
66
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
67
+ type: "button",
68
+ className: validClassName,
69
+ id: insertToolbarId,
70
+ disabled: disabled,
71
+ ref: insertButtonRef
72
+ }, /*#__PURE__*/_react.default.createElement("div", {
73
+ className: "sf-menu-with-dropdown-icon"
74
+ }, /*#__PURE__*/_react.default.createElement("i", {
75
+ className: "iconfont icon-sdoc-insert mr-1"
76
+ }), /*#__PURE__*/_react.default.createElement("span", {
77
+ className: "text-truncate"
78
+ }, t('Insert'))), /*#__PURE__*/_react.default.createElement("div", {
79
+ className: "sf-menu-with-dropdown-triangle"
80
+ }, /*#__PURE__*/_react.default.createElement("span", {
81
+ className: caretIconClass
82
+ }))), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
83
+ target: insertToolbarId
84
+ }, t('Insert')), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
85
+ target: insertToolbarId,
86
+ className: "sf-menu-popover sf-dropdown-menu sf-insert-menu-popover",
87
+ trigger: "legacy",
88
+ placement: "bottom-start",
89
+ hideArrow: true,
90
+ toggle: toggle,
91
+ fade: false,
92
+ ref: popoverRef
93
+ }, /*#__PURE__*/_react.default.createElement("div", {
94
+ className: "sf-insert-menu-container sf-dropdown-menu-container",
95
+ style: {
96
+ maxHeight: window.innerHeight - bottom - 100
97
+ }
98
+ }, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), isSupportFormula && /*#__PURE__*/_react.default.createElement(_menu4.default, props), isSupportColumn && /*#__PURE__*/_react.default.createElement(_menu5.default, props))));
99
+ };
100
+ var _default = exports.default = InsertToolbar;
@@ -0,0 +1,47 @@
1
+ .menu-group-item.sf-insert-toolbar-btn {
2
+ width: 76px;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ background-color: transparent;
7
+ color: #444
8
+ }
9
+
10
+ .menu-group-item.sf-insert-toolbar-btn:not(.disable):hover {
11
+ background-color: #F2F2F2;
12
+ }
13
+
14
+ .menu-group-item.sf-insert-toolbar-btn.disabled {
15
+ /* 64: 76 - 12 */
16
+ width: 64px !important;
17
+ color: #BDBDBD;
18
+ }
19
+
20
+ .sf-insert-toolbar-btn .sf-menu-with-dropdown-icon {
21
+ flex: 1;
22
+ justify-content: flex-start;
23
+ padding-left: 6px;
24
+ padding-right: 2px;
25
+ font-size: 14px;
26
+ }
27
+
28
+ .sf-insert-menu-popover .popover {
29
+ min-width: 200px;
30
+ z-index: 1070;
31
+ }
32
+
33
+ .sf-insert-menu-popover .sf-insert-menu-container {
34
+ padding: 8px 0;
35
+ }
36
+
37
+ .menu-group-item.sf-menu-with-dropdown {
38
+ border: 0!important;
39
+ height: 24px;
40
+ margin-right: 10px;
41
+ overflow: hidden;
42
+ padding: 0!important;
43
+ }
44
+
45
+ .menu-group-item.sf-insert-toolbar-btn .iconfont {
46
+ font-size: 12px;
47
+ }
@@ -38,3 +38,7 @@
38
38
  .sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
39
39
  font-size: 13px;
40
40
  }
41
+
42
+ .sf-long-text-inline-editor-container .sf-header-menu .sf-header-popover {
43
+ min-width: 145px;
44
+ }
@@ -14,20 +14,13 @@ var _menu2 = _interopRequireDefault(require("../../plugins/header/menu"));
14
14
  var _menu3 = _interopRequireDefault(require("../../plugins/text-style/menu"));
15
15
  var _menu4 = _interopRequireDefault(require("../../plugins/link/menu"));
16
16
  var _constants = require("../../constants");
17
- var _menu5 = _interopRequireDefault(require("../../plugins/image/menu"));
18
- var _menu6 = _interopRequireDefault(require("../../plugins/code-block/menu"));
19
- var _menu7 = _interopRequireDefault(require("../../plugins/check-list/menu"));
20
- var _menu8 = _interopRequireDefault(require("../../plugins/list/menu"));
17
+ var _menu5 = _interopRequireDefault(require("../../plugins/check-list/menu"));
18
+ var _menu6 = _interopRequireDefault(require("../../plugins/list/menu"));
21
19
  var _elementTypes = require("../../constants/element-types");
22
- var _tableOperator = require("../../plugins/table/menu/table-operator");
23
- var _helper = require("../../plugins/table/helper");
24
- var _menu9 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
20
+ var _menu7 = _interopRequireDefault(require("../../plugins/clear-format/menu"));
25
21
  var _shortcutDialog = _interopRequireDefault(require("../user-help/shortcut-dialog"));
22
+ var _insertToolbar = _interopRequireDefault(require("../header-toolbar/insert-toolbar"));
26
23
  require("./index.css");
27
- // import TableMenu from '../../plugins/table/menu';
28
- // import FormulaMenu from '../../plugins/formula/menu';
29
- // import ColumnMenu from '../../plugins/column/menu';
30
-
31
24
  const InlineToolbar = _ref => {
32
25
  let {
33
26
  editor,
@@ -39,9 +32,6 @@ const InlineToolbar = _ref => {
39
32
  onExpandEditorToggle
40
33
  } = _ref;
41
34
  (0, _useSelectionUpdate.default)();
42
-
43
- // eslint-disable-next-line react-hooks/exhaustive-deps
44
- const isShowSubTableMenu = (0, _react.useMemo)(() => (0, _helper.isInTable)(editor), [editor.selection]);
45
35
  const [isShowHelpModal, setIsShowHelpModal] = (0, _react.useState)(false);
46
36
  const onHelpIconToggle = (0, _react.useCallback)(() => {
47
37
  setIsShowHelpModal(!isShowHelpModal);
@@ -53,22 +43,25 @@ const InlineToolbar = _ref => {
53
43
  };
54
44
  return /*#__PURE__*/_react.default.createElement("div", {
55
45
  className: "sf-slate-editor-toolbar"
56
- }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
46
+ }, isRichEditor && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_insertToolbar.default, {
47
+ editor: editor,
48
+ readonly: readonly,
49
+ isSupportFormula: isSupportFormula,
50
+ isSupportColumn: isSupportColumn
51
+ })), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu2.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
52
+ type: _constants.TEXT_STYLE_MAP.ITALIC
53
+ })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
57
54
  type: _constants.TEXT_STYLE_MAP.BOLD
58
55
  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
59
- type: _constants.TEXT_STYLE_MAP.ITALIC
56
+ type: _constants.TEXT_STYLE_MAP.UNDERLINE
60
57
  })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
61
58
  type: _constants.TEXT_STYLE_MAP.CODE
62
- })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
59
+ })), /*#__PURE__*/_react.default.createElement(_menu4.default, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu5.default, commonProps), /*#__PURE__*/_react.default.createElement(_menu6.default, Object.assign({}, commonProps, {
63
60
  type: _elementTypes.ORDERED_LIST
64
- })), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
61
+ })), /*#__PURE__*/_react.default.createElement(_menu6.default, Object.assign({}, commonProps, {
65
62
  type: _elementTypes.UNORDERED_LIST
66
- }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu6.default, commonProps), /*#__PURE__*/_react.default.createElement(_commons.MoreMenu, commonProps, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu5.default, Object.assign({}, commonProps, {
67
- isSupportInsertSeafileImage: isSupportInsertSeafileImage
68
- }))), isShowSubTableMenu && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
69
- className: "sf-menu-group sf-table-operations-group"
70
- }, /*#__PURE__*/_react.default.createElement(_tableOperator.AlignmentDropDown, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.ColumnOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RowOperationDropDownList, commonProps), /*#__PURE__*/_react.default.createElement(_tableOperator.RemoveTableMenu, commonProps)), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu9.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
71
- className: "sf-slate-help-info-control",
63
+ }))), /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_commons.MoreMenu, commonProps, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, /*#__PURE__*/_react.default.createElement(_menu7.default, commonProps)), !isRichEditor && /*#__PURE__*/_react.default.createElement("div", {
64
+ className: "sf-menu-group-item sf-slate-help-info-control",
72
65
  onClick: onHelpIconToggle
73
66
  }, /*#__PURE__*/_react.default.createElement("span", {
74
67
  className: "iconfont icon-use-help"
@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _isHotkey = _interopRequireDefault(require("is-hotkey"));
11
+ var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
12
+ var _eventTypes = require("../../constants/event-types");
11
13
  const FallbackEditor = _ref => {
12
14
  let {
13
15
  enableEdit,
@@ -24,6 +26,18 @@ const FallbackEditor = _ref => {
24
26
  setTimeout(() => inputRef.current.focus());
25
27
  }
26
28
  }, [enableEdit]);
29
+ const handleClear = (0, _react.useCallback)(() => {
30
+ setValue('');
31
+ inputRef.current.focus();
32
+ }, []);
33
+ (0, _react.useEffect)(() => {
34
+ const eventBus = _eventBus.default.getInstance();
35
+ const clearSubscribe = eventBus.subscribe(_eventTypes.EXTERNAL_EVENTS.CLEAR_ARTICLE, handleClear);
36
+ return () => {
37
+ clearSubscribe();
38
+ };
39
+ // eslint-disable-next-line react-hooks/exhaustive-deps
40
+ }, []);
27
41
  const onChange = (0, _react.useCallback)(event => {
28
42
  const newValue = event.target.value;
29
43
  if (newValue === value) return;
@@ -25,13 +25,7 @@ const slateToMdString = value => {
25
25
  if (value.length === 1) {
26
26
  const child = value[0];
27
27
  if (child.type === _constants.PARAGRAPH && _slate.Node.string(child).length === 0) {
28
- return [{
29
- type: 'paragraph',
30
- children: [{
31
- type: 'text',
32
- value: ''
33
- }]
34
- }];
28
+ return '';
35
29
  }
36
30
  }
37
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/seafile-editor",
3
- "version": "2.0.18",
3
+ "version": "2.0.20beta",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -230,5 +230,10 @@
230
230
  "Insert_on_the_right": "Insert on the right",
231
231
  "Insert_on_the_left": "Insert on the left",
232
232
  "Row(s)": "row(s)",
233
- "Column(s)": "column(s)"
233
+ "Column(s)": "column(s)",
234
+ "Insert": "Insert",
235
+ "Horizontal_align": "Horizontal align",
236
+ "Underline": "Underline",
237
+ "Row_number": "Row number",
238
+ "Column_number": "Column number"
234
239
  }
@@ -230,5 +230,10 @@
230
230
  "Insert_on_the_right": "在右侧插入",
231
231
  "Insert_on_the_left": "在左侧插入",
232
232
  "Row(s)": "行",
233
- "Column(s)": "列"
233
+ "Column(s)": "列",
234
+ "Insert": "插入",
235
+ "Horizontal_align": "水平对齐",
236
+ "Underline": "下划线",
237
+ "Row_number": "行数",
238
+ "Column_number": "列数"
234
239
  }
@@ -230,5 +230,10 @@
230
230
  "Insert_on_the_right": "在右侧插入",
231
231
  "Insert_on_the_left": "在左侧插入",
232
232
  "Row(s)": "行",
233
- "Column(s)": "列"
233
+ "Column(s)": "列",
234
+ "Insert": "插入",
235
+ "Horizontal_align": "水平对齐",
236
+ "Underline": "下划线",
237
+ "Row_number": "行数",
238
+ "Column_number": "列数"
234
239
  }