@seafile/sdoc-editor 0.1.142 → 0.1.143
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.
- package/dist/basic-sdk/assets/css/dropdown-menu.css +5 -1
- package/dist/basic-sdk/extension/commons/insert-element-dialog/index.js +12 -3
- package/dist/basic-sdk/extension/constants/index.js +2 -0
- package/dist/basic-sdk/extension/plugins/code-block/plugin.js +2 -20
- package/dist/basic-sdk/extension/plugins/code-block/render-elem.js +7 -6
- package/dist/basic-sdk/extension/plugins/html/plugin.js +23 -2
- package/dist/basic-sdk/extension/plugins/image/helpers.js +13 -3
- package/dist/basic-sdk/extension/plugins/link/dialog/add-link-dialog/index.js +2 -1
- package/dist/basic-sdk/extension/plugins/link/helpers.js +14 -4
- package/dist/basic-sdk/extension/plugins/link/plugin.js +8 -13
- package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js +30 -2
- package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js +2 -3
- package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-below-menu.js +5 -2
- package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js +13 -8
- package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.js +7 -4
- package/dist/basic-sdk/extension/toolbar/side-toolbar/transform-menus.js +13 -2
- package/package.json +1 -1
|
@@ -23,16 +23,21 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
|
|
|
23
23
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
24
24
|
insertPosition = _useState6[0],
|
|
25
25
|
setInsertPosition = _useState6[1];
|
|
26
|
+
var _useState7 = useState(null),
|
|
27
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
28
|
+
slateNode = _useState8[0],
|
|
29
|
+
setSlateNode = _useState8[1];
|
|
26
30
|
var uploadLocalImageInputRef = useRef();
|
|
27
31
|
var onFileChanged = useCallback(function (event) {
|
|
28
32
|
var file = event.target.files[0];
|
|
29
33
|
context.uploadLocalImage(file).then(function (fileUrl) {
|
|
30
|
-
insertImage(editor, fileUrl, editor.selection, insertPosition);
|
|
34
|
+
insertImage(editor, fileUrl, editor.selection, insertPosition, slateNode);
|
|
31
35
|
if (uploadLocalImageInputRef.current) {
|
|
32
36
|
uploadLocalImageInputRef.current.value = '';
|
|
33
37
|
}
|
|
34
38
|
});
|
|
35
|
-
|
|
39
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
|
+
}, [editor, uploadLocalImageInputRef, insertPosition, slateNode]);
|
|
36
41
|
useEffect(function () {
|
|
37
42
|
var eventBus = EventBus.getInstance();
|
|
38
43
|
var toggleDialogSubscribe = eventBus.subscribe(INTERNAL_EVENT.INSERT_ELEMENT, toggleDialog);
|
|
@@ -46,8 +51,10 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
|
|
|
46
51
|
var type = _ref2.type,
|
|
47
52
|
element = _ref2.element,
|
|
48
53
|
_ref2$insertPosition = _ref2.insertPosition,
|
|
49
|
-
insertPosition = _ref2$insertPosition === void 0 ? INSERT_POSITION.CURRENT : _ref2$insertPosition
|
|
54
|
+
insertPosition = _ref2$insertPosition === void 0 ? INSERT_POSITION.CURRENT : _ref2$insertPosition,
|
|
55
|
+
slateNode = _ref2.slateNode;
|
|
50
56
|
setInsertPosition(insertPosition);
|
|
57
|
+
setSlateNode(slateNode);
|
|
51
58
|
setElement(element);
|
|
52
59
|
setDialogType(type);
|
|
53
60
|
if (type === INSERT_IMAGE_TYPE.LOCAL_IMAGE) {
|
|
@@ -58,11 +65,13 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
|
|
|
58
65
|
}, [uploadLocalImageInputRef]);
|
|
59
66
|
var closeDialog = useCallback(function () {
|
|
60
67
|
setInsertPosition(INSERT_POSITION.CURRENT);
|
|
68
|
+
setSlateNode(null);
|
|
61
69
|
setElement('');
|
|
62
70
|
setDialogType('');
|
|
63
71
|
}, []);
|
|
64
72
|
var props = {
|
|
65
73
|
insertPosition: insertPosition,
|
|
74
|
+
slateNode: slateNode,
|
|
66
75
|
editor: editor,
|
|
67
76
|
element: element,
|
|
68
77
|
closeDialog: closeDialog
|
|
@@ -240,4 +240,6 @@ export var INSERT_IMAGE_TYPE = {
|
|
|
240
240
|
LOCAL_IMAGE: 'local-image',
|
|
241
241
|
WEB_IMAGE: 'web-image'
|
|
242
242
|
};
|
|
243
|
+
export var LIST_ITEM_CORRELATION_TYPE = ['unordered_list', 'ordered_list', 'list-item'];
|
|
244
|
+
export var LIST_ITEM_SUPPORTED_TRANSFORMATION = ['unordered_list', 'ordered_list', 'left', 'center', 'right', 'blockquote'];
|
|
243
245
|
export { BLOCKQUOTE, HEADER, TITLE, SUBTITLE, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD, MAC_HOTKEYS, WIN_HOTKEYS, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_LIST, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR, FONT_SIZE, DEFAULT_FONT, FONT, GOOGLE_FONT_CLASS, RECENT_USED_FONTS_KEY, SDOC_FONT_SIZE, SDOC_LINK };
|
|
@@ -4,7 +4,7 @@ import _toArray from "@babel/runtime/helpers/esm/toArray";
|
|
|
4
4
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
5
5
|
import slugid from 'slugid';
|
|
6
6
|
import isHotkey from 'is-hotkey';
|
|
7
|
-
import { Transforms, Node, Range, Editor
|
|
7
|
+
import { Transforms, Node, Range, Editor } from '@seafile/slate';
|
|
8
8
|
import { getNodeType, isLastNode, getSelectedNodeByType, generateEmptyElement } from '../../core';
|
|
9
9
|
import { deleteBackwardByLength } from './helpers';
|
|
10
10
|
import { CODE_BLOCK, PARAGRAPH, CODE_LINE } from '../../constants';
|
|
@@ -25,29 +25,11 @@ var withCodeBlock = function withCodeBlock(editor) {
|
|
|
25
25
|
return insertText(data);
|
|
26
26
|
};
|
|
27
27
|
newEditor.insertData = function (data) {
|
|
28
|
-
if (!newEditor.insertFragmentData(data) && !data.types.includes('text/code-block')) {
|
|
29
|
-
var plaintext = data.getData('text/plain') || '';
|
|
30
|
-
if (plaintext) {
|
|
31
|
-
var fragmentData = [];
|
|
32
|
-
plaintext.split('\n').forEach(function (item) {
|
|
33
|
-
var codeLine = {
|
|
34
|
-
id: slugid.nice(),
|
|
35
|
-
type: CODE_LINE,
|
|
36
|
-
children: [{
|
|
37
|
-
text: item,
|
|
38
|
-
id: slugid.nice()
|
|
39
|
-
}]
|
|
40
|
-
};
|
|
41
|
-
fragmentData.push(codeLine);
|
|
42
|
-
});
|
|
43
|
-
newEditor.insertFragment(fragmentData);
|
|
44
|
-
return;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
28
|
if (data.types.includes('text/code-block') && !getSelectedNodeByType(editor, CODE_BLOCK)) {
|
|
48
29
|
var codeBlockNode = JSON.parse(data.getData('text/code-block'));
|
|
49
30
|
return insertNode(codeBlockNode);
|
|
50
31
|
}
|
|
32
|
+
insertData(data);
|
|
51
33
|
};
|
|
52
34
|
newEditor.insertFragment = function (data) {
|
|
53
35
|
// only selected code block content
|
|
@@ -124,16 +124,17 @@ var CodeBlock = function CodeBlock(_ref) {
|
|
|
124
124
|
eventBus.subscribe(INTERNAL_EVENT.HIDDEN_CODE_BLOCK_HOVER_MENU, onHiddenHoverMenu);
|
|
125
125
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
126
126
|
}, []);
|
|
127
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
127
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
128
128
|
"data-id": element.id,
|
|
129
|
-
"data-root": "true"
|
|
130
|
-
|
|
129
|
+
"data-root": "true"
|
|
130
|
+
}, attributes, {
|
|
131
131
|
className: 'sdoc-code-block-container',
|
|
132
132
|
onClick: onFocusCodeBlock,
|
|
133
133
|
onMouseLeave: onMouseLeave
|
|
134
|
-
}, /*#__PURE__*/React.createElement("pre",
|
|
135
|
-
className: 'sdoc-code-block-pre'
|
|
136
|
-
|
|
134
|
+
}), /*#__PURE__*/React.createElement("pre", {
|
|
135
|
+
className: 'sdoc-code-block-pre',
|
|
136
|
+
ref: codeBlockRef
|
|
137
|
+
}, /*#__PURE__*/React.createElement("code", {
|
|
137
138
|
className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '')
|
|
138
139
|
}, children)), showHoverMenu && /*#__PURE__*/React.createElement(CodeBlockHoverMenu, {
|
|
139
140
|
menuPosition: menuPosition,
|
|
@@ -1,11 +1,32 @@
|
|
|
1
|
+
import slugid from 'slugid';
|
|
1
2
|
import { deserializeHtml } from './helper';
|
|
2
3
|
import { getSelectedNodeByType } from '../../core';
|
|
3
|
-
import { CODE_BLOCK } from '../../constants';
|
|
4
|
+
import { CODE_BLOCK, CODE_LINE } from '../../constants';
|
|
4
5
|
var withHtml = function withHtml(editor) {
|
|
5
6
|
var insertData = editor.insertData;
|
|
6
7
|
var newEditor = editor;
|
|
7
8
|
newEditor.insertData = function (data) {
|
|
8
|
-
if (!newEditor.insertFragmentData(data)
|
|
9
|
+
if (!newEditor.insertFragmentData(data)) {
|
|
10
|
+
// Other document paste content into code block
|
|
11
|
+
if (!data.types.includes('text/code-block') && getSelectedNodeByType(editor, CODE_BLOCK)) {
|
|
12
|
+
var plaintext = data.getData('text/plain') || '';
|
|
13
|
+
if (plaintext) {
|
|
14
|
+
var fragmentData = [];
|
|
15
|
+
plaintext.split('\n').forEach(function (item) {
|
|
16
|
+
var codeLine = {
|
|
17
|
+
id: slugid.nice(),
|
|
18
|
+
type: CODE_LINE,
|
|
19
|
+
children: [{
|
|
20
|
+
text: item,
|
|
21
|
+
id: slugid.nice()
|
|
22
|
+
}]
|
|
23
|
+
};
|
|
24
|
+
fragmentData.push(codeLine);
|
|
25
|
+
});
|
|
26
|
+
newEditor.insertFragment(fragmentData);
|
|
27
|
+
}
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
9
30
|
var htmlContent = data.getData('text/html') || '';
|
|
10
31
|
if (htmlContent) {
|
|
11
32
|
var content = deserializeHtml(htmlContent);
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import urlJoin from 'url-join';
|
|
4
|
-
import { Editor, Range, Transforms } from '@seafile/slate';
|
|
5
|
-
import {
|
|
4
|
+
import { Editor, Range, Transforms, Path } from '@seafile/slate';
|
|
5
|
+
import { ReactEditor } from '@seafile/slate-react';
|
|
6
|
+
import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, INSERT_POSITION, LIST_ITEM } from '../../constants';
|
|
6
7
|
import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
|
|
7
8
|
import context from '../../../../context';
|
|
8
9
|
export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor, readonly) {
|
|
@@ -39,14 +40,23 @@ export var generateImageNode = function generateImageNode(src) {
|
|
|
39
40
|
};
|
|
40
41
|
export var insertImage = function insertImage(editor, src, selection) {
|
|
41
42
|
var position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INSERT_POSITION.CURRENT;
|
|
43
|
+
var slateNode = arguments.length > 4 ? arguments[4] : undefined;
|
|
42
44
|
if (!src) return;
|
|
43
45
|
if (position !== INSERT_POSITION.AFTER) {
|
|
44
46
|
if (isInsertImageMenuDisabled(editor)) return;
|
|
45
47
|
}
|
|
46
48
|
var imageNode = generateImageNode(src);
|
|
47
49
|
var validSelection = selection || editor.selection;
|
|
48
|
-
if (position
|
|
50
|
+
if (position === INSERT_POSITION.AFTER) {
|
|
49
51
|
var path = Editor.path(editor, validSelection);
|
|
52
|
+
if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === LIST_ITEM) {
|
|
53
|
+
path = ReactEditor.findPath(editor, slateNode);
|
|
54
|
+
var nextPath = Path.next(path);
|
|
55
|
+
Transforms.insertNodes(editor, imageNode, {
|
|
56
|
+
at: nextPath
|
|
57
|
+
});
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
50
60
|
var p = generateEmptyElement(ELEMENT_TYPE.PARAGRAPH);
|
|
51
61
|
p.children[0] = imageNode;
|
|
52
62
|
Transforms.insertNodes(editor, p, {
|
|
@@ -8,6 +8,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
|
|
|
8
8
|
className = _ref.className,
|
|
9
9
|
element = _ref.element,
|
|
10
10
|
insertPosition = _ref.insertPosition,
|
|
11
|
+
slateNode = _ref.slateNode,
|
|
11
12
|
closeDialog = _ref.closeDialog;
|
|
12
13
|
var _useTranslation = useTranslation(),
|
|
13
14
|
t = _useTranslation.t;
|
|
@@ -52,7 +53,7 @@ var AddLinkDialog = function AddLinkDialog(_ref) {
|
|
|
52
53
|
if (isEdit) {
|
|
53
54
|
updateLink(editor, title, url);
|
|
54
55
|
} else {
|
|
55
|
-
insertLink(editor, title, url, insertPosition);
|
|
56
|
+
insertLink(editor, title, url, insertPosition, slateNode);
|
|
56
57
|
}
|
|
57
58
|
closeDialog();
|
|
58
59
|
|
|
@@ -2,9 +2,10 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
|
2
2
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
4
4
|
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(typeof e + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
|
|
5
|
-
import { Editor, Transforms, Range } from '@seafile/slate';
|
|
5
|
+
import { Editor, Transforms, Range, Path } from '@seafile/slate';
|
|
6
|
+
import { ReactEditor } from '@seafile/slate-react';
|
|
6
7
|
import slugid from 'slugid';
|
|
7
|
-
import { ELEMENT_TYPE, INSERT_POSITION, LINK } from '../../constants';
|
|
8
|
+
import { ELEMENT_TYPE, INSERT_POSITION, LINK, LIST_ITEM } from '../../constants';
|
|
8
9
|
import { getNodeType, getSelectedElems, getAboveNode, getEditorString, replaceNodeChildren, generateEmptyElement } from '../../core';
|
|
9
10
|
export var isMenuDisabled = function isMenuDisabled(editor, readonly) {
|
|
10
11
|
if (readonly) return true;
|
|
@@ -55,11 +56,21 @@ export var getLinkType = function getLinkType(editor) {
|
|
|
55
56
|
};
|
|
56
57
|
export var insertLink = function insertLink(editor, title, url) {
|
|
57
58
|
var position = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : INSERT_POSITION.CURRENT;
|
|
59
|
+
var slateNode = arguments.length > 4 ? arguments[4] : undefined;
|
|
58
60
|
if (position === INSERT_POSITION.CURRENT && isMenuDisabled(editor)) return;
|
|
59
61
|
if (!title || !url) return;
|
|
60
62
|
if (position === INSERT_POSITION.AFTER) {
|
|
61
|
-
var p = generateEmptyElement(ELEMENT_TYPE.PARAGRAPH);
|
|
62
63
|
var linkNode = genLinkNode(url, title);
|
|
64
|
+
var path = Editor.path(editor, editor.selection);
|
|
65
|
+
if (slateNode && (slateNode === null || slateNode === void 0 ? void 0 : slateNode.type) === LIST_ITEM) {
|
|
66
|
+
path = ReactEditor.findPath(editor, slateNode);
|
|
67
|
+
var nextPath = Path.next(path);
|
|
68
|
+
Transforms.insertNodes(editor, linkNode, {
|
|
69
|
+
at: nextPath
|
|
70
|
+
});
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
var p = generateEmptyElement(ELEMENT_TYPE.PARAGRAPH);
|
|
63
74
|
p.children[0] = {
|
|
64
75
|
id: slugid.nice(),
|
|
65
76
|
text: ' '
|
|
@@ -69,7 +80,6 @@ export var insertLink = function insertLink(editor, title, url) {
|
|
|
69
80
|
id: slugid.nice(),
|
|
70
81
|
text: ' '
|
|
71
82
|
};
|
|
72
|
-
var path = Editor.path(editor, editor.selection);
|
|
73
83
|
Transforms.insertNodes(editor, p, {
|
|
74
84
|
at: [path[0] + 1]
|
|
75
85
|
});
|
|
@@ -32,22 +32,17 @@ var withLink = function withLink(editor) {
|
|
|
32
32
|
return insertText(text);
|
|
33
33
|
};
|
|
34
34
|
newEditor.insertData = function (data) {
|
|
35
|
-
// Paste content
|
|
36
|
-
if (newEditor.insertFragmentData(data)) return;
|
|
37
|
-
|
|
38
|
-
// Paste content from other document
|
|
35
|
+
// Paste link content
|
|
39
36
|
var text = data.getData('text/plain');
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
|
|
37
|
+
if (isUrl(text) && !isImage(text)) {
|
|
38
|
+
var link = genLinkNode(text, text);
|
|
39
|
+
Transforms.insertNodes(newEditor, [link, {
|
|
40
|
+
id: slugid.nice(),
|
|
41
|
+
text: ' '
|
|
42
|
+
}]);
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
45
|
-
|
|
46
|
-
Transforms.insertNodes(newEditor, [link, {
|
|
47
|
-
id: slugid.nice(),
|
|
48
|
-
text: ' '
|
|
49
|
-
}]);
|
|
50
|
-
return;
|
|
45
|
+
insertData(data);
|
|
51
46
|
};
|
|
52
47
|
|
|
53
48
|
// Rewrite normalizeNode
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { Transforms } from '@seafile/slate';
|
|
1
|
+
import { Transforms, Node, Editor, Element } from '@seafile/slate';
|
|
2
|
+
import slugid from 'slugid';
|
|
2
3
|
import { ReactEditor } from '@seafile/slate-react';
|
|
3
4
|
import copy from 'copy-to-clipboard';
|
|
4
5
|
import { toggleList } from '../../plugins/list/transforms';
|
|
5
|
-
import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM } from '../../constants';
|
|
6
|
+
import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, LIST_ITEM, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE } from '../../constants';
|
|
6
7
|
export var onSetNodeType = function onSetNodeType(editor, element, type) {
|
|
7
8
|
if (!type) return;
|
|
8
9
|
if ([ORDERED_LIST, UNORDERED_LIST].includes(type)) {
|
|
@@ -22,6 +23,18 @@ export var onSetNodeType = function onSetNodeType(editor, element, type) {
|
|
|
22
23
|
});
|
|
23
24
|
return;
|
|
24
25
|
}
|
|
26
|
+
if (type === BLOCKQUOTE && LIST_ITEM_CORRELATION_TYPE.includes(element.type)) {
|
|
27
|
+
Transforms.wrapNodes(editor, {
|
|
28
|
+
id: slugid.nice(),
|
|
29
|
+
type: BLOCKQUOTE
|
|
30
|
+
}, {
|
|
31
|
+
mode: 'highest',
|
|
32
|
+
match: function match(n) {
|
|
33
|
+
return Element.isElement(n) && Editor.isBlock(editor, n);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
25
38
|
Transforms.setNodes(editor, {
|
|
26
39
|
type: type
|
|
27
40
|
});
|
|
@@ -53,4 +66,19 @@ export var getDomTopHeight = function getDomTopHeight(dom) {
|
|
|
53
66
|
var HEADER_HEIGHT = 56 + 44;
|
|
54
67
|
var rect = dom.getBoundingClientRect();
|
|
55
68
|
return rect.y - HEADER_HEIGHT;
|
|
69
|
+
};
|
|
70
|
+
export var isVoidNode = function isVoidNode(node) {
|
|
71
|
+
if (!node) return true;
|
|
72
|
+
var hasImage = node.children.find(function (n) {
|
|
73
|
+
return n.type === IMAGE;
|
|
74
|
+
});
|
|
75
|
+
var isTable = node.type === TABLE;
|
|
76
|
+
var isCodeBlock = node.type === CODE_BLOCK;
|
|
77
|
+
return Node.string(node) === '' && !hasImage && !isTable && !isCodeBlock;
|
|
78
|
+
};
|
|
79
|
+
export var isNotSupportTransform = function isNotSupportTransform(node) {
|
|
80
|
+
if (node.type && [CODE_BLOCK, TABLE].includes(node.type)) {
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
return false;
|
|
56
84
|
};
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
2
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
|
-
import { Node } from '@seafile/slate';
|
|
5
4
|
import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
|
|
6
5
|
import EventBus from '../../../utils/event-bus';
|
|
7
6
|
import { useScrollContext } from '../../../hooks/use-scroll-context';
|
|
8
7
|
import { INTERNAL_EVENT } from '../../../constants';
|
|
9
|
-
import { getDomTopHeight, setSelection } from './helpers';
|
|
8
|
+
import { getDomTopHeight, setSelection, isVoidNode } from './helpers';
|
|
10
9
|
import SideMenu from './side-menu';
|
|
11
10
|
import './index.css';
|
|
12
11
|
var SideToolbar = function SideToolbar() {
|
|
@@ -72,7 +71,7 @@ var SideToolbar = function SideToolbar() {
|
|
|
72
71
|
}
|
|
73
72
|
var top = getDomTopHeight(dom);
|
|
74
73
|
var node = ReactEditor.toSlateNode(editor, dom);
|
|
75
|
-
var isEmpty =
|
|
74
|
+
var isEmpty = isVoidNode(node);
|
|
76
75
|
setSidePosition({
|
|
77
76
|
top: top + scrollRef.current.scrollTop,
|
|
78
77
|
left: 20
|
|
@@ -3,8 +3,10 @@ import { UncontrolledPopover } from 'reactstrap';
|
|
|
3
3
|
import InsertBlockMenu from './insert-block-menu';
|
|
4
4
|
import { INSERT_POSITION } from '../../constants';
|
|
5
5
|
var InsertBelowMenu = function InsertBelowMenu(_ref) {
|
|
6
|
-
var target = _ref.target
|
|
6
|
+
var target = _ref.target,
|
|
7
|
+
slateNode = _ref.slateNode;
|
|
7
8
|
return /*#__PURE__*/React.createElement(UncontrolledPopover, {
|
|
9
|
+
boundariesElement: "viewport",
|
|
8
10
|
target: target,
|
|
9
11
|
className: "sdoc-side-menu-insert-below-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
|
|
10
12
|
trigger: "hover",
|
|
@@ -14,7 +16,8 @@ var InsertBelowMenu = function InsertBelowMenu(_ref) {
|
|
|
14
16
|
}, /*#__PURE__*/React.createElement("div", {
|
|
15
17
|
className: "sdoc-dropdown-menu-container"
|
|
16
18
|
}, /*#__PURE__*/React.createElement(InsertBlockMenu, {
|
|
17
|
-
insertPosition: INSERT_POSITION.AFTER
|
|
19
|
+
insertPosition: INSERT_POSITION.AFTER,
|
|
20
|
+
slateNode: slateNode
|
|
18
21
|
})));
|
|
19
22
|
};
|
|
20
23
|
export default InsertBelowMenu;
|
|
@@ -5,12 +5,13 @@ import { Transforms } from '@seafile/slate';
|
|
|
5
5
|
import { insertTable } from '../../plugins/table/helpers';
|
|
6
6
|
import TableSizePopover from '../../plugins/table/popover/table-size-popover';
|
|
7
7
|
import { changeToCodeBlock } from '../../plugins/code-block/helpers';
|
|
8
|
-
import { ELEMENT_TYPE, INSERT_POSITION, INSERT_IMAGE_TYPE, MENUS_CONFIG_MAP } from '../../constants';
|
|
8
|
+
import { ELEMENT_TYPE, INSERT_POSITION, INSERT_IMAGE_TYPE, MENUS_CONFIG_MAP, LIST_ITEM } from '../../constants';
|
|
9
9
|
import EventBus from '../../../utils/event-bus';
|
|
10
10
|
import { INTERNAL_EVENT } from '../../../constants';
|
|
11
11
|
import DropdownMenuItem from '../../commons/dropdown-menu-item';
|
|
12
12
|
var InsertBlockMenu = function InsertBlockMenu(_ref) {
|
|
13
|
-
var insertPosition = _ref.insertPosition
|
|
13
|
+
var insertPosition = _ref.insertPosition,
|
|
14
|
+
slateNode = _ref.slateNode;
|
|
14
15
|
var editor = useSlateStatic();
|
|
15
16
|
var onInsertImageToggle = useCallback(function () {
|
|
16
17
|
var eventBus = EventBus.getInstance();
|
|
@@ -19,30 +20,34 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
|
|
|
19
20
|
}
|
|
20
21
|
eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
|
|
21
22
|
type: INSERT_IMAGE_TYPE.LOCAL_IMAGE,
|
|
22
|
-
insertPosition: insertPosition
|
|
23
|
+
insertPosition: insertPosition,
|
|
24
|
+
slateNode: slateNode
|
|
23
25
|
});
|
|
24
26
|
|
|
25
27
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
28
|
}, [editor, insertPosition]);
|
|
27
29
|
var createTable = useCallback(function (size) {
|
|
28
|
-
|
|
30
|
+
var newInsertPosition = slateNode.type === LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
|
|
31
|
+
insertTable(editor, size, editor.selection, newInsertPosition);
|
|
29
32
|
|
|
30
33
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
|
-
}, [editor, insertPosition]);
|
|
34
|
+
}, [editor, insertPosition, slateNode]);
|
|
32
35
|
var openLinkDialog = useCallback(function () {
|
|
33
36
|
var eventBus = EventBus.getInstance();
|
|
34
37
|
eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
|
|
35
38
|
type: ELEMENT_TYPE.LINK,
|
|
36
|
-
insertPosition: insertPosition
|
|
39
|
+
insertPosition: insertPosition,
|
|
40
|
+
slateNode: slateNode
|
|
37
41
|
});
|
|
38
42
|
|
|
39
43
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
44
|
}, [insertPosition]);
|
|
41
45
|
var onInsertCodeBlock = useCallback(function () {
|
|
42
|
-
|
|
46
|
+
var newInsertPosition = slateNode.type === LIST_ITEM ? INSERT_POSITION.AFTER : insertPosition;
|
|
47
|
+
changeToCodeBlock(editor, 'plaintext', newInsertPosition);
|
|
43
48
|
|
|
44
49
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
45
|
-
}, [editor, insertPosition]);
|
|
50
|
+
}, [editor, insertPosition, slateNode]);
|
|
46
51
|
var openTableDialog = useCallback(function () {
|
|
47
52
|
var eventBus = EventBus.getInstance();
|
|
48
53
|
eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
|
|
@@ -6,7 +6,7 @@ import EventBus from '../../../utils/event-bus';
|
|
|
6
6
|
import { ElementPopover } from '../../commons';
|
|
7
7
|
import InsertBelowMenu from './insert-below-menu';
|
|
8
8
|
import InsertBlockMenu from './insert-block-menu';
|
|
9
|
-
import { onCopyNode, onDeleteNode } from './helpers';
|
|
9
|
+
import { onCopyNode, onDeleteNode, isNotSupportTransform } from './helpers';
|
|
10
10
|
import TransformMenus from './transform-menus';
|
|
11
11
|
import DropdownMenuItem from '../../commons/dropdown-menu-item';
|
|
12
12
|
import './side-menu.css';
|
|
@@ -58,7 +58,7 @@ var SideMenu = function SideMenu(_ref) {
|
|
|
58
58
|
}, /*#__PURE__*/React.createElement("div", {
|
|
59
59
|
className: "sdoc-side-menu sdoc-dropdown-menu",
|
|
60
60
|
ref: sideMenuRef
|
|
61
|
-
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
61
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, !isNotSupportTransform(slateNode) && /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
62
62
|
menuConfig: {
|
|
63
63
|
id: 'sdoc-side-menu-item-transform',
|
|
64
64
|
text: 'Transform_to',
|
|
@@ -71,7 +71,9 @@ var SideMenu = function SideMenu(_ref) {
|
|
|
71
71
|
target: "sdoc-side-menu-item-transform",
|
|
72
72
|
slateNode: slateNode,
|
|
73
73
|
onReset: onReset
|
|
74
|
-
}))), isNodeEmpty && /*#__PURE__*/React.createElement(InsertBlockMenu,
|
|
74
|
+
}))), isNodeEmpty && /*#__PURE__*/React.createElement(InsertBlockMenu, {
|
|
75
|
+
slateNode: slateNode
|
|
76
|
+
}), !isNodeEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
75
77
|
menuConfig: {
|
|
76
78
|
id: 'sdoc-side-menu-item-insert-below',
|
|
77
79
|
text: 'Insert_below',
|
|
@@ -81,7 +83,8 @@ var SideMenu = function SideMenu(_ref) {
|
|
|
81
83
|
}, /*#__PURE__*/React.createElement("i", {
|
|
82
84
|
className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
|
|
83
85
|
}), /*#__PURE__*/React.createElement(InsertBelowMenu, {
|
|
84
|
-
target: "sdoc-side-menu-item-insert-below"
|
|
86
|
+
target: "sdoc-side-menu-item-insert-below",
|
|
87
|
+
slateNode: slateNode
|
|
85
88
|
})), /*#__PURE__*/React.createElement("div", {
|
|
86
89
|
className: "sdoc-dropdown-menu-divider"
|
|
87
90
|
}), /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
@@ -3,7 +3,7 @@ import { UncontrolledPopover } from 'reactstrap';
|
|
|
3
3
|
import { withTranslation } from 'react-i18next';
|
|
4
4
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
5
5
|
import { onSetNodeType } from './helpers';
|
|
6
|
-
import { SIDE_MENUS_CONFIG } from '../../constants';
|
|
6
|
+
import { SIDE_MENUS_CONFIG, LIST_ITEM_SUPPORTED_TRANSFORMATION, LIST_ITEM_CORRELATION_TYPE } from '../../constants';
|
|
7
7
|
import DropdownMenuItem from '../../commons/dropdown-menu-item';
|
|
8
8
|
var TransformMenus = function TransformMenus(_ref) {
|
|
9
9
|
var target = _ref.target,
|
|
@@ -16,7 +16,18 @@ var TransformMenus = function TransformMenus(_ref) {
|
|
|
16
16
|
onReset();
|
|
17
17
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
18
|
}, []);
|
|
19
|
+
var getSideMenusConfig = useCallback(function (SIDE_MENUS_CONFIG) {
|
|
20
|
+
var newSideMenusConfig = SIDE_MENUS_CONFIG;
|
|
21
|
+
if (LIST_ITEM_CORRELATION_TYPE.includes(slateNode.type)) {
|
|
22
|
+
newSideMenusConfig = SIDE_MENUS_CONFIG.filter(function (item) {
|
|
23
|
+
return LIST_ITEM_SUPPORTED_TRANSFORMATION.includes(item.type);
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
return newSideMenusConfig;
|
|
27
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
28
|
+
}, [slateNode]);
|
|
19
29
|
return /*#__PURE__*/React.createElement(UncontrolledPopover, {
|
|
30
|
+
boundariesElement: "viewport",
|
|
20
31
|
target: target,
|
|
21
32
|
className: "sdoc-side-operation-translate-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
|
|
22
33
|
trigger: "hover",
|
|
@@ -25,7 +36,7 @@ var TransformMenus = function TransformMenus(_ref) {
|
|
|
25
36
|
fade: false
|
|
26
37
|
}, /*#__PURE__*/React.createElement("div", {
|
|
27
38
|
className: "sdoc-dropdown-menu-container"
|
|
28
|
-
}, SIDE_MENUS_CONFIG.map(function (item) {
|
|
39
|
+
}, getSideMenusConfig(SIDE_MENUS_CONFIG).map(function (item) {
|
|
29
40
|
return /*#__PURE__*/React.createElement(DropdownMenuItem, {
|
|
30
41
|
key: item.id,
|
|
31
42
|
menuConfig: item,
|