@seafile/seafile-editor 1.0.82 → 1.0.84-alpha

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 (31) hide show
  1. package/dist/editors/{simple-slate-editor /index.js → simple-slate-editor/index.js} +18 -8
  2. package/dist/extension/commons/expand-editor-menu.js +28 -0
  3. package/dist/extension/commons/index.js +15 -1
  4. package/dist/extension/commons/menu/menu.css +5 -1
  5. package/dist/extension/commons/more-menu/index.css +28 -0
  6. package/dist/extension/commons/more-menu/index.js +46 -0
  7. package/dist/extension/constants/menus-config.js +13 -1
  8. package/dist/extension/editor.js +8 -1
  9. package/dist/extension/index.js +12 -0
  10. package/dist/extension/plugins/code-block/plugin.js +9 -0
  11. package/dist/extension/plugins/html/plugin.js +1 -1
  12. package/dist/extension/plugins/index.js +1 -1
  13. package/dist/extension/toolbar/index.js +8 -1
  14. package/dist/extension/toolbar/inline-toolbar/index.css +40 -0
  15. package/dist/extension/toolbar/inline-toolbar/index.js +85 -0
  16. package/dist/index.js +7 -0
  17. package/dist/pages/inline-longtext-editor/index.css +60 -0
  18. package/dist/pages/inline-longtext-editor/index.js +137 -0
  19. package/dist/pages/seatable-editor.js +1 -1
  20. package/dist/pages/simple-editor.js +7 -3
  21. package/dist/slate-convert/slate-to-md/transform.js +41 -1
  22. package/package.json +3 -3
  23. package/public/media/seafile-editor-font/iconfont.eot +0 -0
  24. package/public/media/seafile-editor-font/iconfont.svg +2 -0
  25. package/public/media/seafile-editor-font/iconfont.ttf +0 -0
  26. package/public/media/seafile-editor-font/iconfont.woff +0 -0
  27. package/public/media/seafile-editor-font/iconfont.woff2 +0 -0
  28. package/public/media/seafile-editor-font.css +10 -6
  29. package/readme.md +30 -0
  30. /package/dist/editors/{simple-slate-editor → simple-slate-editor}/style.css +0 -0
  31. /package/dist/editors/{simple-slate-editor → simple-slate-editor}/with-props-editor.js +0 -0
@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = SimpleSlateEditor;
8
+ exports.default = void 0;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
10
  var _slateReact = require("slate-react");
11
11
  var _slate = require("slate");
@@ -17,24 +17,29 @@ var _core = require("../../extension/core");
17
17
  var _common = require("../../utils/common");
18
18
  require("./style.css");
19
19
  const isMacOS = (0, _common.isMac)();
20
- function SimpleSlateEditor(_ref) {
20
+ const SimpleSlateEditor = _ref => {
21
21
  let {
22
+ isInline,
22
23
  value,
23
24
  editorApi,
24
25
  onSave,
25
26
  columns,
26
27
  onContentChanged,
27
- isSupportFormula
28
+ isSupportFormula,
29
+ onExpandEditorToggle
28
30
  } = _ref;
29
31
  const [slateValue, setSlateValue] = (0, _react.useState)(value);
30
- const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
32
+ const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(isInline ? _extension.inlineEditor : _extension.baseEditor, {
31
33
  editorApi,
32
34
  onSave,
33
35
  columns
34
- }), [columns, editorApi, onSave]);
36
+ }), [columns, editorApi, onSave, isInline]);
35
37
  const eventProxy = (0, _react.useMemo)(() => {
36
38
  return new _eventHandler.default(editor);
37
39
  }, [editor]);
40
+ const ToolbarComponent = (0, _react.useMemo)(() => {
41
+ return isInline ? _extension.InlineToolbar : _extension.Toolbar;
42
+ }, [isInline]);
38
43
  const decorate = (0, _extension.useHighlight)(editor);
39
44
  const onChange = (0, _react.useCallback)(value => {
40
45
  setSlateValue(value);
@@ -113,10 +118,11 @@ function SimpleSlateEditor(_ref) {
113
118
  }, [editor, focusFirstNode]);
114
119
  return /*#__PURE__*/_react.default.createElement("div", {
115
120
  className: "sf-simple-slate-editor-container"
116
- }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
121
+ }, /*#__PURE__*/_react.default.createElement(ToolbarComponent, {
117
122
  editor: editor,
118
123
  isSupportFormula: isSupportFormula,
119
- isSupportColumn: !!columns
124
+ isSupportColumn: !!columns,
125
+ onExpandEditorToggle: onExpandEditorToggle
120
126
  }), /*#__PURE__*/_react.default.createElement("div", {
121
127
  className: "sf-slate-editor-content",
122
128
  onClick: onEditorClick
@@ -137,4 +143,8 @@ function SimpleSlateEditor(_ref) {
137
143
  onKeyDown: eventProxy.onKeyDown,
138
144
  onCopy: eventProxy.onCopy
139
145
  })))))));
140
- }
146
+ };
147
+ SimpleSlateEditor.defaultProps = {
148
+ isInline: false
149
+ };
150
+ var _default = exports.default = SimpleSlateEditor;
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _constants = require("../constants");
10
+ var _menu = require("./menu");
11
+ const ExpandEditorMenu = _ref => {
12
+ let {
13
+ readonly,
14
+ isRichEditor,
15
+ onExpandEditorToggle,
16
+ className
17
+ } = _ref;
18
+ const config = _constants.MENUS_CONFIG_MAP[_constants.EXPAND_EDITOR];
19
+ return /*#__PURE__*/_react.default.createElement(_menu.MenuItem, Object.assign({
20
+ disabled: readonly,
21
+ isActive: false,
22
+ isRichEditor: isRichEditor,
23
+ type: _constants.EXPAND_EDITOR,
24
+ onMouseDown: onExpandEditorToggle,
25
+ className: className
26
+ }, config));
27
+ };
28
+ var _default = exports.default = ExpandEditorMenu;
@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ElementPopover", {
10
10
  return _elementPopover.default;
11
11
  }
12
12
  });
13
+ Object.defineProperty(exports, "ExpandEditorMenu", {
14
+ enumerable: true,
15
+ get: function () {
16
+ return _expandEditorMenu.default;
17
+ }
18
+ });
13
19
  Object.defineProperty(exports, "MenuGroup", {
14
20
  enumerable: true,
15
21
  get: function () {
@@ -22,6 +28,12 @@ Object.defineProperty(exports, "MenuItem", {
22
28
  return _menu.MenuItem;
23
29
  }
24
30
  });
31
+ Object.defineProperty(exports, "MoreMenu", {
32
+ enumerable: true,
33
+ get: function () {
34
+ return _moreMenu.default;
35
+ }
36
+ });
25
37
  Object.defineProperty(exports, "Select", {
26
38
  enumerable: true,
27
39
  get: function () {
@@ -30,4 +42,6 @@ Object.defineProperty(exports, "Select", {
30
42
  });
31
43
  var _elementPopover = _interopRequireDefault(require("./element-popover"));
32
44
  var _menu = require("./menu");
33
- var _select = _interopRequireDefault(require("./select"));
45
+ var _select = _interopRequireDefault(require("./select"));
46
+ var _moreMenu = _interopRequireDefault(require("./more-menu"));
47
+ var _expandEditorMenu = _interopRequireDefault(require("./expand-editor-menu"));
@@ -115,4 +115,8 @@
115
115
 
116
116
  .sf-dropdown-list .sf-dropdown-list-item:hover {
117
117
  background-color: #F2F2F2;
118
- }
118
+ }
119
+
120
+ .sf-icon-btn-hover:hover {
121
+ cursor: pointer;
122
+ }
@@ -0,0 +1,28 @@
1
+ .sf-editor-menu-popover {
2
+ padding: 8px 0;
3
+ min-width: 12rem;
4
+ }
5
+
6
+ .sf-editor-menu-popover .popover-inner .sf-slate-help-info-control {
7
+ height: 24px;
8
+ width: 24px;
9
+ margin: 4px 8px;
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ }
14
+
15
+ .sf-editor-menu-popover .popover-inner .sf-slate-help-info-control:hover {
16
+ background-color: #f2f2f2;
17
+ border-radius: 2px;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .sf-editor-menu-popover .popover-inner .sf-slate-help-info-control .icon-use-help {
22
+ font-size: 13px;
23
+ color: #555;
24
+ }
25
+
26
+ .sf-editor-menu-popover .bs-popover-auto[x-placement^=bottom] {
27
+ margin-top: 2px;
28
+ }
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _classnames = _interopRequireDefault(require("classnames"));
10
+ var _reactstrap = require("reactstrap");
11
+ var _constants = require("../../constants");
12
+ require("./index.css");
13
+ const MoreMenu = _ref => {
14
+ let {
15
+ className,
16
+ disabled,
17
+ isRichEditor,
18
+ children
19
+ } = _ref;
20
+ const validClassName = (0, _classnames.default)(className, {
21
+ 'sf-rich-editor': isRichEditor,
22
+ 'sf-icon-btn': true,
23
+ 'sf-icon-btn-disabled': disabled,
24
+ 'sf-icon-btn-hover': !disabled
25
+ });
26
+ const config = _constants.MENUS_CONFIG_MAP[_constants.MORE_OPERATION];
27
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
28
+ className: validClassName,
29
+ type: "button",
30
+ id: config.id
31
+ }, /*#__PURE__*/_react.default.createElement("i", {
32
+ className: config.iconClass
33
+ })), /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
34
+ target: config.id,
35
+ className: "sf-editor-menu-popover sf-editor--more-menu-popover",
36
+ trigger: "legacy",
37
+ placement: "bottom-end",
38
+ hideArrow: true,
39
+ fade: false
40
+ }, children));
41
+ };
42
+ MoreMenu.defaultProps = {
43
+ isRichEditor: true,
44
+ className: 'sf-menu-group-item'
45
+ };
46
+ var _default = exports.default = MoreMenu;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MENUS_CONFIG_MAP = exports.CLEAR_FORMAT = void 0;
6
+ exports.TEXT_STYLE_MAP = exports.TABLE_SUBMENU_MAP = exports.MORE_OPERATION = exports.MENUS_CONFIG_MAP = exports.EXPAND_EDITOR = exports.CLEAR_FORMAT = void 0;
7
7
  var _elementTypes = require("./element-types");
8
8
  const BOLD = 'bold';
9
9
  const ITALIC = 'italic';
@@ -12,6 +12,8 @@ const CODE = 'code';
12
12
  const DELETE = 'delete';
13
13
  const ADD = 'add';
14
14
  const CLEAR_FORMAT = exports.CLEAR_FORMAT = 'clear_format';
15
+ const MORE_OPERATION = exports.MORE_OPERATION = 'more_operation';
16
+ const EXPAND_EDITOR = exports.EXPAND_EDITOR = 'expand_editor';
15
17
  const TEXT_STYLE_MAP = exports.TEXT_STYLE_MAP = {
16
18
  BOLD: BOLD,
17
19
  ITALIC: ITALIC,
@@ -142,5 +144,15 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
142
144
  id: "seafile_".concat(_elementTypes.COLUMN),
143
145
  iconClass: 'iconfont icon-choose-column',
144
146
  text: 'Insert_column'
147
+ },
148
+ [MORE_OPERATION]: {
149
+ id: "seafile_".concat(MORE_OPERATION),
150
+ iconClass: 'iconfont icon-more',
151
+ text: ''
152
+ },
153
+ [EXPAND_EDITOR]: {
154
+ id: "seafile_".concat(EXPAND_EDITOR),
155
+ iconClass: 'iconfont icon-fullscreen',
156
+ text: 'Expand_editor'
145
157
  }
146
158
  };
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.createSlateEditor = exports.baseEditor = void 0;
7
+ exports.inlineEditor = exports.createSlateEditor = exports.baseEditor = void 0;
8
8
  var _slate = require("slate");
9
9
  var _slateHistory = require("slate-history");
10
10
  var _slateReact = require("slate-react");
@@ -16,6 +16,13 @@ const baseEditor = exports.baseEditor = _plugins.default.reduce((editor, pluginI
16
16
  }
17
17
  return editor;
18
18
  }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
19
+ const inlineEditor = exports.inlineEditor = _plugins.default.reduce((editor, pluginItem) => {
20
+ const withPlugin = pluginItem.editorPlugin;
21
+ if (withPlugin) {
22
+ return withPlugin(editor);
23
+ }
24
+ return editor;
25
+ }, (0, _slateHistory.withHistory)((0, _slateReact.withReact)((0, _slate.createEditor)())));
19
26
  const createSlateEditor = () => {
20
27
  const editor = _plugins.default.reduce((editor, pluginItem) => {
21
28
  const withPlugin = pluginItem.editorPlugin;
@@ -10,6 +10,12 @@ Object.defineProperty(exports, "ELementTypes", {
10
10
  return _constants.ELementTypes;
11
11
  }
12
12
  });
13
+ Object.defineProperty(exports, "InlineToolbar", {
14
+ enumerable: true,
15
+ get: function () {
16
+ return _toolbar.InlineToolbar;
17
+ }
18
+ });
13
19
  Object.defineProperty(exports, "SetNodeToDecorations", {
14
20
  enumerable: true,
15
21
  get: function () {
@@ -34,6 +40,12 @@ Object.defineProperty(exports, "createSlateEditor", {
34
40
  return _editor.createSlateEditor;
35
41
  }
36
42
  });
43
+ Object.defineProperty(exports, "inlineEditor", {
44
+ enumerable: true,
45
+ get: function () {
46
+ return _editor.inlineEditor;
47
+ }
48
+ });
37
49
  Object.defineProperty(exports, "isEmptyParagraph", {
38
50
  enumerable: true,
39
51
  get: function () {
@@ -53,6 +53,9 @@ const withCodeBlock = editor => {
53
53
  if (node.type === _elementTypes.CODE_BLOCK) {
54
54
  const codeLineArr = node.children.map(line => line);
55
55
  data.splice(index, 1, ...codeLineArr);
56
+ // Paste the copied content in place in code_block
57
+ } else if (node.type === _elementTypes.CODE_LINE) {
58
+ data.splice(index, 1, node);
56
59
  }
57
60
  });
58
61
  const insertCodeLines = data.map(node => {
@@ -65,6 +68,12 @@ const withCodeBlock = editor => {
65
68
 
66
69
  // Current focus code-line string not empty
67
70
  const string = _slate.Editor.string(newEditor, newEditor.selection.focus.path);
71
+ // Paste the copied content in place in code_block
72
+ if (insertCodeLines.length === 1 && _slate.Range.isExpanded(newEditor.selection)) {
73
+ const text = _slate.Node.string(insertCodeLines[0]);
74
+ insertText(text);
75
+ return;
76
+ }
68
77
  if (string.length !== 0 && _slate.Range.isCollapsed(newEditor.selection)) {
69
78
  const [node, ...restNode] = insertCodeLines;
70
79
  const text = _slate.Node.string(node);
@@ -18,7 +18,7 @@ const withHtml = editor => {
18
18
  newEditor.insertData = data => {
19
19
  // If the text is a link and is not within the code_block block, it is processed as link
20
20
  const text = data.getData('text/plain') || '';
21
- if ((0, _isUrl.default)(text) && !(0, _helpers.isInCodeBlock)(newEditor)) {
21
+ if (text.trim() && (0, _isUrl.default)(text.trim()) && !(0, _helpers.isInCodeBlock)(newEditor)) {
22
22
  insertData(data);
23
23
  return;
24
24
  }
@@ -110,7 +110,7 @@ var _formula = _interopRequireDefault(require("./formula"));
110
110
  var _column = _interopRequireDefault(require("./column"));
111
111
  var _markdown = _interopRequireDefault(require("./markdown"));
112
112
  var _html = _interopRequireDefault(require("./html"));
113
- const Plugins = [_paragraph.default, _textStyle.default, _header.default, _image.default, _link.default, _codeBlock.default, _checkList.default, _list.default, _table.default, _blockquote.default, _formula.default, _markdown.default, _html.default, _column.default,
113
+ const Plugins = [_paragraph.default, _textStyle.default, _header.default, _image.default, _link.default, _checkList.default, _list.default, _codeBlock.default, _table.default, _blockquote.default, _formula.default, _markdown.default, _html.default, _column.default,
114
114
  // put at the end
115
115
  _nodeId.default];
116
116
  var _default = exports.default = Plugins;
@@ -4,10 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ Object.defineProperty(exports, "InlineToolbar", {
8
+ enumerable: true,
9
+ get: function () {
10
+ return _inlineToolbar.default;
11
+ }
12
+ });
7
13
  Object.defineProperty(exports, "Toolbar", {
8
14
  enumerable: true,
9
15
  get: function () {
10
16
  return _headerToolbar.default;
11
17
  }
12
18
  });
13
- var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
19
+ var _headerToolbar = _interopRequireDefault(require("./header-toolbar"));
20
+ var _inlineToolbar = _interopRequireDefault(require("./inline-toolbar"));
@@ -0,0 +1,40 @@
1
+ .sf-slate-editor-toolbar {
2
+ background-color: #fcfcfc !important;
3
+ }
4
+
5
+ .sf-slate-editor-toolbar .sf-slate-article-info-control {
6
+ position: absolute;
7
+ right: 20px;
8
+ height: 30px;
9
+ width: 30px;
10
+ line-height: 30px;
11
+ display: flex;
12
+ justify-content: center;
13
+ cursor: pointer;
14
+ color: #555;
15
+ }
16
+
17
+ .sf-slate-editor-toolbar .sf-slate-article-info-control:hover {
18
+ background-color: #e5e5e5;
19
+ }
20
+
21
+ .sf-slate-editor-toolbar .sf-slate-help-info-control {
22
+ position: absolute;
23
+ right: 20px;
24
+ height: 30px;
25
+ width: 30px;
26
+ line-height: 30px;
27
+ display: flex;
28
+ justify-content: center;
29
+ cursor: pointer;
30
+ color: #555;
31
+ }
32
+
33
+ .sf-slate-editor-toolbar .sf-slate-help-info-control > span:hover {
34
+ cursor: pointer;
35
+ color: #333;
36
+ }
37
+
38
+ .sf-slate-editor-toolbar .sf-slate-article-info-control .iconfont {
39
+ font-size: 13px;
40
+ }
@@ -0,0 +1,85 @@
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 _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
11
+ var _commons = require("../../commons");
12
+ var _menu = _interopRequireDefault(require("../../plugins/blockquote/menu"));
13
+ var _menu2 = _interopRequireDefault(require("../../plugins/header/menu"));
14
+ var _menu3 = _interopRequireDefault(require("../../plugins/text-style/menu"));
15
+ var _menu4 = _interopRequireDefault(require("../../plugins/link/menu"));
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"));
21
+ 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"));
25
+ var _shortcutDialog = _interopRequireDefault(require("../user-help/shortcut-dialog"));
26
+ 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
+ const InlineToolbar = _ref => {
32
+ let {
33
+ editor,
34
+ readonly = false,
35
+ isRichEditor = false,
36
+ isSupportFormula = false,
37
+ isSupportInsertSeafileImage = false,
38
+ isSupportColumn = false,
39
+ onExpandEditorToggle
40
+ } = _ref;
41
+ (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
+ const [isShowHelpModal, setIsShowHelpModal] = (0, _react.useState)(false);
46
+ const onHelpIconToggle = (0, _react.useCallback)(() => {
47
+ setIsShowHelpModal(!isShowHelpModal);
48
+ }, [isShowHelpModal]);
49
+ const commonProps = {
50
+ editor,
51
+ readonly,
52
+ isRichEditor
53
+ };
54
+ return /*#__PURE__*/_react.default.createElement("div", {
55
+ 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, {
57
+ type: _constants.TEXT_STYLE_MAP.BOLD
58
+ })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
59
+ type: _constants.TEXT_STYLE_MAP.ITALIC
60
+ })), /*#__PURE__*/_react.default.createElement(_menu3.default, Object.assign({}, commonProps, {
61
+ 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, {
63
+ type: _elementTypes.ORDERED_LIST
64
+ })), /*#__PURE__*/_react.default.createElement(_menu8.default, Object.assign({}, commonProps, {
65
+ 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",
72
+ onClick: onHelpIconToggle
73
+ }, /*#__PURE__*/_react.default.createElement("span", {
74
+ className: "iconfont icon-use-help"
75
+ })))), onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, null, onExpandEditorToggle && /*#__PURE__*/_react.default.createElement(_commons.ExpandEditorMenu, Object.assign({}, commonProps, {
76
+ onExpandEditorToggle: onExpandEditorToggle
77
+ }))), isShowHelpModal && /*#__PURE__*/_react.default.createElement(_shortcutDialog.default, {
78
+ isRichEditor: isRichEditor,
79
+ toggleShortcutDialog: onHelpIconToggle
80
+ }));
81
+ };
82
+ InlineToolbar.defaultProps = {
83
+ readonly: false
84
+ };
85
+ var _default = exports.default = InlineToolbar;
package/dist/index.js CHANGED
@@ -22,6 +22,12 @@ Object.defineProperty(exports, "EventBus", {
22
22
  return _eventBus.default;
23
23
  }
24
24
  });
25
+ Object.defineProperty(exports, "InlineLongTextEditor", {
26
+ enumerable: true,
27
+ get: function () {
28
+ return _inlineLongtextEditor.default;
29
+ }
30
+ });
25
31
  Object.defineProperty(exports, "LongTextEditorDialog", {
26
32
  enumerable: true,
27
33
  get: function () {
@@ -106,6 +112,7 @@ var _markdownView = _interopRequireDefault(require("./pages/markdown-view"));
106
112
  var _simpleEditor = _interopRequireDefault(require("./pages/simple-editor"));
107
113
  var _emailEditorDialog = _interopRequireDefault(require("./pages/email-editor-dialog"));
108
114
  var _longtextEditorDialog = _interopRequireDefault(require("./pages/longtext-editor-dialog"));
115
+ var _inlineLongtextEditor = _interopRequireDefault(require("./pages/inline-longtext-editor"));
109
116
  var _markdownPreview = _interopRequireDefault(require("./pages/markdown-preview"));
110
117
  var _seatableEditor = _interopRequireDefault(require("./pages/seatable-editor"));
111
118
  var _seatableViewer = _interopRequireDefault(require("./pages/seatable-viewer"));
@@ -0,0 +1,60 @@
1
+ .sf-inline-editor-container {
2
+ width: 100%;
3
+ height: 100%;
4
+ border: 1px solid rgba(0, 40, 100, .12);
5
+ border-radius: 3px;
6
+ transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
7
+ }
8
+
9
+ .sf-inline-editor-container .sf-simple-slate-editor-container {
10
+ width: 100%;
11
+ height: 100%;
12
+ }
13
+
14
+ .sf-inline-editor-container .sf-slate-editor-toolbar {
15
+ border-top-left-radius: 3px;
16
+ border-top-right-radius: 3px;
17
+ height: 33px;
18
+ }
19
+
20
+ .sf-inline-editor-container .sf-slate-editor-content {
21
+ border-bottom-left-radius: 3px;
22
+ border-bottom-right-radius: 3px;
23
+ overflow: hidden;
24
+ }
25
+
26
+ .sf-inline-editor-container .sf-slate-editor-toolbar .sf-menu-group:last-child {
27
+ border-right: none;
28
+ }
29
+
30
+ .sf-inline-editor-container .sf-simple-slate-editor-container .sf-slate-editor-content {
31
+ flex: 1;
32
+ }
33
+
34
+ /* preview */
35
+ .sf-inline-editor-container .longtext-preview-container {
36
+ padding: 10px;
37
+ background-color: #fff;
38
+ }
39
+
40
+ .sf-inline-editor-container .longtext-preview-container .article h1 {
41
+ margin-top: 1.2em;
42
+ }
43
+
44
+ .sf-inline-editor-container .longtext-preview-container .article p {
45
+ margin-top: 0.8em;
46
+ }
47
+
48
+ .sf-slate-editor-toolbar .sf-menu-group {
49
+ padding-top: 4px;
50
+ padding-bottom: 4px;
51
+ }
52
+
53
+ .sf-editor-menu-popover .popover-inner {
54
+ display: flex;
55
+ }
56
+
57
+ .sf-editor-menu-popover .popover-inner .sf-menu-group {
58
+ padding-top: 4px;
59
+ padding-bottom: 4px;
60
+ }
@@ -0,0 +1,137 @@
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 _simpleEditor = _interopRequireDefault(require("../simple-editor"));
11
+ var _getPreviewContent = _interopRequireDefault(require("../../utils/get-preview-content"));
12
+ var _getBrowserInfo = _interopRequireDefault(require("../../utils/get-browser-Info"));
13
+ var _markdownPreview = _interopRequireDefault(require("../markdown-preview"));
14
+ var _longtextEditorDialog = _interopRequireDefault(require("../longtext-editor-dialog"));
15
+ require("./index.css");
16
+ const InlineLongTextEditor = _ref => {
17
+ let {
18
+ lang,
19
+ headerName,
20
+ value: propsValue,
21
+ autoSave = true,
22
+ saveDelay = 60000,
23
+ isCheckBrowser = false,
24
+ editorApi,
25
+ onSaveEditorValue,
26
+ onEditorValueChanged
27
+ } = _ref;
28
+ const editorContainerRef = (0, _react.useRef)(null);
29
+ const editorRef = (0, _react.useRef)(null);
30
+ const [style, setStyle] = (0, _react.useState)({});
31
+ const [isValueChanged, setValueChanged] = (0, _react.useState)(false);
32
+ const [showExpandEditor, setShowExpandEditor] = (0, _react.useState)(false);
33
+ const [value, setValue] = (0, _react.useState)(typeof propsValue === 'string' ? {
34
+ text: propsValue
35
+ } : propsValue);
36
+ const {
37
+ isWindowsWechat
38
+ } = (0, _react.useMemo)(() => {
39
+ return (0, _getBrowserInfo.default)(isCheckBrowser);
40
+ }, [isCheckBrowser]);
41
+ const saveValue = (0, _react.useCallback)(function (value) {
42
+ let save = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
43
+ setValueChanged(true);
44
+ setValue(value);
45
+ onEditorValueChanged && onEditorValueChanged(value);
46
+ if (!save) return;
47
+ onSaveEditorValue && onSaveEditorValue(value);
48
+ setValueChanged(false);
49
+ }, [onSaveEditorValue, onEditorValueChanged]);
50
+ const handelAutoSave = (0, _react.useCallback)(() => {
51
+ if (!isValueChanged) return;
52
+ saveValue(value, true);
53
+ }, [isValueChanged, value, saveValue]);
54
+ const onContentChanged = (0, _react.useCallback)(() => {
55
+ // delay to update editor's content
56
+ setTimeout(() => {
57
+ var _editorRef$current, _editorRef$current2;
58
+ // update parent's component cache value
59
+ const markdownString = (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.getValue();
60
+ const slateNodes = (_editorRef$current2 = editorRef.current) === null || _editorRef$current2 === void 0 ? void 0 : _editorRef$current2.getSlateValue();
61
+ const {
62
+ previewText,
63
+ images,
64
+ links,
65
+ checklist
66
+ } = (0, _getPreviewContent.default)(slateNodes, false);
67
+ const value = {
68
+ text: markdownString,
69
+ preview: previewText,
70
+ images: images,
71
+ links: links,
72
+ checklist
73
+ };
74
+ saveValue(value);
75
+ }, 0);
76
+ }, [saveValue]);
77
+ const openEditorDialog = (0, _react.useCallback)(() => {
78
+ const {
79
+ height
80
+ } = editorContainerRef.current.getBoundingClientRect();
81
+ setStyle({
82
+ height
83
+ });
84
+ setShowExpandEditor(true);
85
+ }, [editorContainerRef]);
86
+ const onCloseEditorDialog = (0, _react.useCallback)(value => {
87
+ value && saveValue(value);
88
+ setStyle({});
89
+ setShowExpandEditor(false);
90
+ }, [saveValue]);
91
+ (0, _react.useEffect)(() => {
92
+ let timer = null;
93
+ if (autoSave) {
94
+ timer = setTimeout(() => {
95
+ handelAutoSave();
96
+ }, saveDelay);
97
+ }
98
+ return () => {
99
+ timer && clearTimeout(timer);
100
+ };
101
+ }, [autoSave, saveDelay, handelAutoSave]);
102
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
103
+ className: "sf-inline-editor-container",
104
+ style: style,
105
+ ref: editorContainerRef
106
+ }, !showExpandEditor && !isWindowsWechat ? /*#__PURE__*/_react.default.createElement(_simpleEditor.default, {
107
+ isInline: true,
108
+ ref: editorRef,
109
+ value: value.text,
110
+ editorApi: editorApi,
111
+ onContentChanged: onContentChanged,
112
+ onExpandEditorToggle: openEditorDialog
113
+ }) : /*#__PURE__*/_react.default.createElement("div", {
114
+ className: "sf-simple-slate-editor-container"
115
+ }, /*#__PURE__*/_react.default.createElement("div", {
116
+ className: "sf-slate-editor-toolbar"
117
+ }), /*#__PURE__*/_react.default.createElement("div", {
118
+ className: "sf-slate-editor-content"
119
+ }, /*#__PURE__*/_react.default.createElement(_markdownPreview.default, {
120
+ isWindowsWechat: isWindowsWechat,
121
+ value: value.text,
122
+ isShowOutline: false
123
+ })))), showExpandEditor && /*#__PURE__*/_react.default.createElement(_longtextEditorDialog.default, {
124
+ lang: lang,
125
+ readOnly: false,
126
+ headerName: headerName,
127
+ value: value.text,
128
+ autoSave: autoSave,
129
+ saveDelay: saveDelay,
130
+ isCheckBrowser: isCheckBrowser,
131
+ editorApi: editorApi,
132
+ onSaveEditorValue: saveValue,
133
+ onEditorValueChanged: saveValue,
134
+ onCloseEditorDialog: onCloseEditorDialog
135
+ }));
136
+ };
137
+ var _default = exports.default = InlineLongTextEditor;
@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
10
10
  var _loading = _interopRequireDefault(require("../containers/loading"));
11
11
  var _slateConvert = require("../slate-convert");
12
12
  var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
13
- var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor "));
13
+ var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor"));
14
14
  const SeaTableEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
15
15
  let {
16
16
  isFetching,
@@ -10,15 +10,17 @@ var _react = _interopRequireWildcard(require("react"));
10
10
  var _loading = _interopRequireDefault(require("../containers/loading"));
11
11
  var _slateConvert = require("../slate-convert");
12
12
  var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
13
- var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor "));
13
+ var _simpleSlateEditor = _interopRequireDefault(require("../editors/simple-slate-editor"));
14
14
  const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
15
15
  let {
16
+ isInline,
16
17
  isFetching,
17
18
  value,
18
19
  editorApi,
19
20
  mathJaxSource,
20
21
  onSave: propsOnSave,
21
- onContentChanged: propsOnContentChanged
22
+ onContentChanged: propsOnContentChanged,
23
+ ...otherProps
22
24
  } = _ref;
23
25
  const [richValue, setRichValue] = (0, _react.useState)([]);
24
26
  const [isLoading, setIsLoading] = (0, _react.useState)(true);
@@ -49,11 +51,13 @@ const SimpleEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
49
51
  propsOnContentChanged && propsOnContentChanged();
50
52
  }, [propsOnContentChanged]);
51
53
  const props = {
54
+ isInline,
52
55
  isSupportFormula: !!mathJaxSource,
53
56
  value: richValue,
54
57
  editorApi: editorApi,
55
58
  onSave: propsOnSave,
56
- onContentChanged: onContentChanged
59
+ onContentChanged: onContentChanged,
60
+ ...otherProps
57
61
  };
58
62
  if (isFetching || isLoading || isLoadingMathJax) {
59
63
  return /*#__PURE__*/_react.default.createElement(_loading.default, null);
@@ -7,6 +7,44 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.formatSlateToMd = void 0;
8
8
  var _slate = require("slate");
9
9
  var _isPunctuationMark = _interopRequireDefault(require("../../utils/is-punctuation-mark"));
10
+ const formatInlineChildren = children => {
11
+ return children.reduce((ret, item, index) => {
12
+ if (index === 0) return [item];
13
+ let prev = ret[ret.length - 1];
14
+ if (prev.type === item.type && item.type === 'text') {
15
+ prev.value = prev.value + item.value;
16
+ } else if (prev.type === item.type && item.type === 'strong') {
17
+ const prevChild = prev.children[0];
18
+ const nextChild = item.children[0];
19
+ prev.children = [{
20
+ type: 'text',
21
+ value: prevChild.value + nextChild.value
22
+ }];
23
+ } else if (prev.type === item.type && item.type === 'emphasis') {
24
+ const prevChild = prev.children[0];
25
+ const nextChild = item.children[0];
26
+ if (prevChild.type === nextChild.type && prevChild.type === 'text') {
27
+ prev.children = [{
28
+ type: 'text',
29
+ value: prevChild.value + nextChild.value
30
+ }];
31
+ } else if (prevChild.type === nextChild.type && prevChild.type === 'strong') {
32
+ prev.children = [{
33
+ type: 'strong',
34
+ children: [{
35
+ type: 'text',
36
+ value: prevChild.children[0].value + nextChild.children[0].value
37
+ }]
38
+ }];
39
+ } else {
40
+ ret.push(item);
41
+ }
42
+ } else {
43
+ ret.push(item);
44
+ }
45
+ return ret;
46
+ }, []);
47
+ };
10
48
  const generateDefaultText = value => {
11
49
  return {
12
50
  type: 'text',
@@ -117,7 +155,9 @@ const transformNodeWithInlineChildren = node => {
117
155
  }
118
156
  const result = [];
119
157
  children.forEach(item => transformInlineChildren(result, item));
120
- return result.flat();
158
+
159
+ // format result
160
+ return formatInlineChildren(result.flat());
121
161
  };
122
162
  const transformHeader = node => {
123
163
  const level = node.type.replace('header', '');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/seafile-editor",
3
- "version": "1.0.82",
3
+ "version": "1.0.84alpha",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
@@ -9,8 +9,8 @@
9
9
  "push-translate": "tx push -s",
10
10
  "pull-translate": "tx pull -f",
11
11
  "start": "export NODE_ENV=development LOG_ENV=rc && node dev-server.js",
12
- "build:dist": "export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir dist --copy-files",
13
- "prepublishOnly": "npm run clean && npm run build:dist",
12
+ "pub:dist": "export BABEL_ENV=production && ./node_modules/.bin/babel src --out-dir dist --copy-files",
13
+ "prepublishOnly": "npm run clean && npm run pub:dist",
14
14
  "lint-fix": "eslint --fix --ext .js,.jsx src/"
15
15
  },
16
16
  "keywords": [ ],
@@ -14,6 +14,8 @@
14
14
  />
15
15
  <missing-glyph />
16
16
 
17
+ <glyph glyph-name="more" unicode="&#58918;" d="M835.2 387.2c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z m-416 0c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z m-416 0c0-54.4 41.6-96 96-96s96 41.6 96 96-41.6 96-96 96c-51.2 0-96-41.6-96-96z" horiz-adv-x="1027" />
18
+
17
19
  <glyph glyph-name="drop-down" unicode="&#59013;" d="M550.4 169.6l265.6 336c32 38.4 6.4 102.4-38.4 102.4H246.4c-44.8 0-70.4-60.8-38.4-102.4l265.6-336c19.2-25.6 57.6-25.6 76.8 0z" horiz-adv-x="1024" />
18
20
 
19
21
  <glyph glyph-name="caret-up" unicode="&#59014;" d="M550.4 588.8l265.6-336c32-38.4 6.4-102.4-38.4-102.4H246.4c-44.8 0-70.4 60.8-38.4 102.4l265.6 336c19.2 25.6 57.6 25.6 76.8 0z" horiz-adv-x="1024" />
@@ -1,11 +1,11 @@
1
1
  @font-face {
2
2
  font-family: "iconfont"; /* Project id 4375832 */
3
- src: url('./seafile-editor-font/iconfont.eot?t=1709878601328'); /* IE9 */
4
- src: url('./seafile-editor-font/iconfont.eot?t=1709878601328#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
- url('./seafile-editor-font/iconfont.woff2?t=1709878601328') format('woff2'),
6
- url('./seafile-editor-font/iconfont.woff?t=1709878601328') format('woff'),
7
- url('./seafile-editor-font/iconfont.ttf?t=1709878601328') format('truetype'),
8
- url('./seafile-editor-font/iconfont.svg?t=1709878601328#iconfont') format('svg');
3
+ src: url('./seafile-editor-font/iconfont.eot?t=1714979485064'); /* IE9 */
4
+ src: url('./seafile-editor-font/iconfont.eot?t=1714979485064#iefix') format('embedded-opentype'), /* IE6-IE8 */
5
+ url('./seafile-editor-font/iconfont.woff2?t=1714979485064') format('woff2'),
6
+ url('./seafile-editor-font/iconfont.woff?t=1714979485064') format('woff'),
7
+ url('./seafile-editor-font/iconfont.ttf?t=1714979485064') format('truetype'),
8
+ url('./seafile-editor-font/iconfont.svg?t=1714979485064#iconfont') format('svg');
9
9
  }
10
10
 
11
11
  .iconfont {
@@ -16,6 +16,10 @@
16
16
  -moz-osx-font-smoothing: grayscale;
17
17
  }
18
18
 
19
+ .icon-more:before {
20
+ content: "\e626";
21
+ }
22
+
19
23
  .icon-drop-down:before {
20
24
  content: "\e685";
21
25
  }
package/readme.md CHANGED
@@ -187,4 +187,34 @@ processor.process(string).then(result => {
187
187
  ```
188
188
 
189
189
 
190
+ ## 🖥 Environment Support
191
+
192
+ * Modern browsers
193
+ * Software built-in browser
194
+
195
+ ### Modern browsers
196
+
197
+ | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
198
+ | --- | --- | --- | --- |
199
+ | Edge | false | last 2 versions | false |
200
+
201
+
202
+ ### Software built-in browser
203
+
204
+ **Mac OS**
205
+
206
+ | software | browser | version | internal | isSupport |
207
+ |-|-|-|-|-|
208
+ |<img src="./assets/imgs/wechat.png" width='16'> WeChat| Chrome |107.0.0.0| AppleWebKit/537.36 |false|
209
+ |<img src="./assets/imgs/wecom.png" width='16'> WeCom|Safari||AppleWebKit/605.1.15 |false|
210
+
211
+ **Windows OS**
212
+ > windows 11
213
+
214
+ | software | browser | version | internal | isSupport |
215
+ |-|-|-|-|-|
216
+ |<img src="./assets/imgs/wechat.png" width='16'> WeChat| Chrome |106.0.0.0| AppleWebKit/537.36 |false|
217
+ |<img src="./assets/imgs/wecom.png" width='16'> WeCom|Chrome|108.0.5993.119|AppleWebKit/537.36 |false|
218
+
219
+
190
220