@seafile/sdoc-editor 0.1.123 → 0.1.125
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/extension/plugins/code-block/index.js +2 -2
- package/dist/basic-sdk/extension/plugins/code-block/plugin.js +9 -1
- package/dist/basic-sdk/extension/plugins/code-block/render-elem.js +11 -0
- package/dist/basic-sdk/extension/plugins/font/helpers.js +3 -2
- package/dist/basic-sdk/extension/plugins/index.js +2 -1
- package/dist/basic-sdk/extension/plugins/paragraph/index.js +7 -0
- package/dist/basic-sdk/extension/plugins/paragraph/render-elem.js +35 -0
- package/dist/basic-sdk/extension/render/render-element.js +11 -43
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { CODE_BLOCK } from '../../constants';
|
|
2
2
|
import CodeBlockMenu from './menu';
|
|
3
3
|
import withCodeBlock from './plugin';
|
|
4
|
-
import { renderCodeBlock } from './render-elem';
|
|
4
|
+
import { renderCodeBlock, renderCodeLine } from './render-elem';
|
|
5
5
|
var CodeBlockPlugin = {
|
|
6
6
|
type: CODE_BLOCK,
|
|
7
7
|
nodeType: 'element',
|
|
8
8
|
editorMenus: [CodeBlockMenu],
|
|
9
9
|
editorPlugin: withCodeBlock,
|
|
10
|
-
renderElements: [renderCodeBlock]
|
|
10
|
+
renderElements: [renderCodeBlock, renderCodeLine]
|
|
11
11
|
};
|
|
12
12
|
export default CodeBlockPlugin;
|
|
@@ -97,14 +97,22 @@ var withCodeBlock = function withCodeBlock(editor) {
|
|
|
97
97
|
node = _ref2[0],
|
|
98
98
|
path = _ref2[1];
|
|
99
99
|
var type = getNodeType(node);
|
|
100
|
-
if (type ===
|
|
100
|
+
if (type === CODE_LINE && path.length <= 1) {
|
|
101
101
|
Transforms.setNodes(newEditor, {
|
|
102
102
|
type: 'paragraph'
|
|
103
103
|
}, {
|
|
104
104
|
at: path
|
|
105
105
|
});
|
|
106
|
+
return;
|
|
106
107
|
}
|
|
107
108
|
if (type === CODE_BLOCK) {
|
|
109
|
+
if (node.children.length === 0) {
|
|
110
|
+
Transforms.delete(newEditor, {
|
|
111
|
+
at: path
|
|
112
|
+
});
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
|
|
108
116
|
// code-block is the last node in the editor and needs to be followed by a p node
|
|
109
117
|
var isLast = isLastNode(newEditor, node);
|
|
110
118
|
if (isLast) {
|
|
@@ -126,6 +126,7 @@ var CodeBlock = function CodeBlock(_ref) {
|
|
|
126
126
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
127
127
|
}, []);
|
|
128
128
|
return /*#__PURE__*/React.createElement("div", {
|
|
129
|
+
"data-id": element.id,
|
|
129
130
|
ref: codeBlockRef,
|
|
130
131
|
className: 'sdoc-code-block-container',
|
|
131
132
|
onClick: onFocusCodeBlock,
|
|
@@ -151,4 +152,14 @@ export var renderCodeBlock = function renderCodeBlock(props, editor) {
|
|
|
151
152
|
codeBlockProps: _objectSpread({}, props),
|
|
152
153
|
editor: editor
|
|
153
154
|
});
|
|
155
|
+
};
|
|
156
|
+
export var renderCodeLine = function renderCodeLine(props, editor) {
|
|
157
|
+
var element = props.element,
|
|
158
|
+
attributes = props.attributes,
|
|
159
|
+
children = props.children;
|
|
160
|
+
return /*#__PURE__*/React.createElement("div", Object.assign({
|
|
161
|
+
"data-id": element.id
|
|
162
|
+
}, attributes, {
|
|
163
|
+
className: 'sdoc-code-line'
|
|
164
|
+
}), children);
|
|
154
165
|
};
|
|
@@ -132,9 +132,10 @@ export var loadFont = function loadFont() {
|
|
|
132
132
|
};
|
|
133
133
|
export var generatorFontFamily = function generatorFontFamily(fontName, fontWeight, leaf) {
|
|
134
134
|
var isCodeBlock = leaf && Object.keys(leaf).includes('token');
|
|
135
|
+
if (isCodeBlock) return {};
|
|
135
136
|
var lang = context.getSetting('lang') || 'zh-cn';
|
|
136
137
|
if (fontName === DEFAULT_FONT) {
|
|
137
|
-
return "
|
|
138
|
+
return "'Arial', ".concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", 'sans-serif'");
|
|
138
139
|
}
|
|
139
140
|
var fontObject = FONT.find(function (item) {
|
|
140
141
|
return item.name === fontName;
|
|
@@ -143,5 +144,5 @@ export var generatorFontFamily = function generatorFontFamily(fontName, fontWeig
|
|
|
143
144
|
fontFamilyName = fontObject.fontFamilyName;
|
|
144
145
|
loadFont(fontObject, fontWeight);
|
|
145
146
|
var validFontName = fontFamilyName && isMac() ? fontFamilyName['mac'] : fontName;
|
|
146
|
-
return "".concat(
|
|
147
|
+
return "".concat(validFontName, ", ").concat(lang === 'zh-cn' ? "\u5B8B\u4F53" : 'Arial', ", ").concat(usuallyFontFamilyName || 'sans-serif');
|
|
147
148
|
};
|
|
@@ -12,6 +12,7 @@ import HtmlPlugin from './html';
|
|
|
12
12
|
import TextAlignPlugin from './text-align';
|
|
13
13
|
import FontPlugin from './font';
|
|
14
14
|
import SdocLinkPlugin from './sdoc-link';
|
|
15
|
+
import ParagraphPlugin from './paragraph';
|
|
15
16
|
var Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin];
|
|
16
17
|
export default Plugins;
|
|
17
|
-
export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin };
|
|
18
|
+
export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Node } from '@seafile/slate';
|
|
4
|
+
import { useSlateStatic } from '@seafile/slate-react';
|
|
5
|
+
import { Placeholder } from '../../core';
|
|
6
|
+
var Paragraph = function Paragraph(_ref) {
|
|
7
|
+
var isComposing = _ref.isComposing,
|
|
8
|
+
element = _ref.element,
|
|
9
|
+
attributes = _ref.attributes,
|
|
10
|
+
children = _ref.children;
|
|
11
|
+
var editor = useSlateStatic();
|
|
12
|
+
var isShowPlaceHolder = false;
|
|
13
|
+
if (editor.children.length === 1) {
|
|
14
|
+
isShowPlaceHolder = Node.string(element) === '' && !isComposing;
|
|
15
|
+
}
|
|
16
|
+
if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
|
|
17
|
+
var node = editor.children[1];
|
|
18
|
+
isShowPlaceHolder = Node.string(element) === '' && (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && !isComposing;
|
|
19
|
+
}
|
|
20
|
+
var style = {
|
|
21
|
+
textAlign: element.align
|
|
22
|
+
};
|
|
23
|
+
return /*#__PURE__*/React.createElement("p", Object.assign({
|
|
24
|
+
"data-id": element.id
|
|
25
|
+
}, attributes, {
|
|
26
|
+
style: _objectSpread({
|
|
27
|
+
position: isShowPlaceHolder ? 'relative' : ''
|
|
28
|
+
}, style)
|
|
29
|
+
}), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
|
|
30
|
+
title: 'Please_enter_text'
|
|
31
|
+
}));
|
|
32
|
+
};
|
|
33
|
+
export var renderParagraph = function renderParagraph(props) {
|
|
34
|
+
return /*#__PURE__*/React.createElement(Paragraph, props);
|
|
35
|
+
};
|
|
@@ -1,40 +1,17 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
2
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
3
2
|
import React from 'react';
|
|
4
|
-
import { Node } from '@seafile/slate';
|
|
5
3
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
6
4
|
import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE, SDOC_LINK } from '../constants';
|
|
7
|
-
import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin } from '../plugins';
|
|
8
|
-
import { Placeholder, findPath, getAboveNode } from '../core';
|
|
5
|
+
import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, SdocLinkPlugin, ParagraphPlugin } from '../plugins';
|
|
9
6
|
var CustomElement = function CustomElement(props) {
|
|
10
7
|
var editor = useSlateStatic();
|
|
11
|
-
var
|
|
12
|
-
children = props.children,
|
|
13
|
-
element = props.element;
|
|
14
|
-
var style = {
|
|
15
|
-
textAlign: element.align
|
|
16
|
-
};
|
|
8
|
+
var element = props.element;
|
|
17
9
|
switch (element.type) {
|
|
18
10
|
case PARAGRAPH:
|
|
19
11
|
{
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
isShowPlaceHolder = Node.string(element) === '' && !isComposing;
|
|
24
|
-
}
|
|
25
|
-
if (editor.children.length === 2 && editor.children[0].type.startsWith('header')) {
|
|
26
|
-
var node = editor.children[1];
|
|
27
|
-
isShowPlaceHolder = Node.string(element) === '' && (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && !isComposing;
|
|
28
|
-
}
|
|
29
|
-
return /*#__PURE__*/React.createElement("p", Object.assign({
|
|
30
|
-
"data-id": element.id
|
|
31
|
-
}, attributes, {
|
|
32
|
-
style: _objectSpread({
|
|
33
|
-
position: isShowPlaceHolder ? 'relative' : ''
|
|
34
|
-
}, style)
|
|
35
|
-
}), children, isShowPlaceHolder && /*#__PURE__*/React.createElement(Placeholder, {
|
|
36
|
-
title: 'Please_enter_text'
|
|
37
|
-
}));
|
|
12
|
+
var _ParagraphPlugin$rend = _slicedToArray(ParagraphPlugin.renderElements, 1),
|
|
13
|
+
renderParagraph = _ParagraphPlugin$rend[0];
|
|
14
|
+
return renderParagraph(props);
|
|
38
15
|
}
|
|
39
16
|
case HEADER1:
|
|
40
17
|
case HEADER2:
|
|
@@ -94,16 +71,9 @@ var CustomElement = function CustomElement(props) {
|
|
|
94
71
|
}
|
|
95
72
|
case CODE_LINE:
|
|
96
73
|
{
|
|
97
|
-
var
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
});
|
|
101
|
-
if (parentNode[0].type === CODE_BLOCK) {
|
|
102
|
-
return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
|
|
103
|
-
className: 'sdoc-code-line'
|
|
104
|
-
}), children);
|
|
105
|
-
}
|
|
106
|
-
return children;
|
|
74
|
+
var _CodeBlockPlugin$rend2 = _slicedToArray(CodeBlockPlugin.renderElements, 2),
|
|
75
|
+
renderCodeLine = _CodeBlockPlugin$rend2[1];
|
|
76
|
+
return renderCodeLine(props, editor);
|
|
107
77
|
}
|
|
108
78
|
case IMAGE:
|
|
109
79
|
{
|
|
@@ -137,11 +107,9 @@ var CustomElement = function CustomElement(props) {
|
|
|
137
107
|
}
|
|
138
108
|
default:
|
|
139
109
|
{
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
style: style
|
|
144
|
-
}), children);
|
|
110
|
+
var _ParagraphPlugin$rend2 = _slicedToArray(ParagraphPlugin.renderElements, 1),
|
|
111
|
+
_renderParagraph = _ParagraphPlugin$rend2[0];
|
|
112
|
+
return _renderParagraph(props);
|
|
145
113
|
}
|
|
146
114
|
}
|
|
147
115
|
};
|