@blocklet/editor 1.6.178 → 1.6.179
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/lib/ext/AIPlugin/AIIcon.js +3 -1
- package/lib/ext/AIPlugin/index.js +1 -1
- package/lib/main/editor.js +1 -1
- package/lib/main/index.css +14 -7
- package/lib/main/plugins/FloatingTextFormatToolbarPlugin/index.css +2 -1
- package/lib/main/plugins/ToolbarPlugin/index.js +30 -101
- package/lib/main/ui/DropDown.js +1 -1
- package/package.json +3 -3
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
2
3
|
const AIKitIcon = ({ disabled = false }) => {
|
|
3
|
-
|
|
4
|
+
const id = useId();
|
|
5
|
+
return (_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { flex: '0 0 auto' }, children: [_jsxs("mask", { id: "mask0_1302_392", maskUnits: "userSpaceOnUse", x: "0", y: "1", width: "20", height: "18", children: [_jsx("path", { d: "M15.4167 7.5H4.58333C4.1231 7.5 3.75 7.8731 3.75 8.33333V16.6667C3.75 17.1269 4.1231 17.5 4.58333 17.5H15.4167C15.8769 17.5 16.25 17.1269 16.25 16.6667V8.33333C16.25 7.8731 15.8769 7.5 15.4167 7.5Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.91663 8.33333C2.91663 7.41286 3.66282 6.66666 4.58329 6.66666H15.4166C16.3371 6.66666 17.0833 7.41286 17.0833 8.33333V16.6667C17.0833 17.5871 16.3371 18.3333 15.4166 18.3333H4.58329C3.66282 18.3333 2.91663 17.5871 2.91663 16.6667V8.33333ZM15.4166 8.33333H4.58329V16.6667H15.4166V8.33333Z", fill: "white" }), _jsx("path", { d: "M7.08333 11.6667C7.54357 11.6667 7.91667 11.2936 7.91667 10.8333C7.91667 10.3731 7.54357 10 7.08333 10C6.6231 10 6.25 10.3731 6.25 10.8333C6.25 11.2936 6.6231 11.6667 7.08333 11.6667Z", fill: "black" }), _jsx("path", { d: "M12.9166 11.6667C13.3769 11.6667 13.75 11.2936 13.75 10.8333C13.75 10.3731 13.3769 10 12.9166 10C12.4564 10 12.0833 10.3731 12.0833 10.8333C12.0833 11.2936 12.4564 11.6667 12.9166 11.6667Z", fill: "black" }), _jsx("path", { d: "M8.33333 13.3333C8.11232 13.3333 7.90036 13.4211 7.74408 13.5774C7.5878 13.7337 7.5 13.9456 7.5 14.1667C7.5 14.3877 7.5878 14.5996 7.74408 14.7559C7.90036 14.9122 8.11232 15 8.33333 15V13.3333ZM11.6667 15C11.8877 15 12.0996 14.9122 12.2559 14.7559C12.4122 14.5996 12.5 14.3877 12.5 14.1667C12.5 13.9456 12.4122 13.7337 12.2559 13.5774C12.0996 13.4211 11.8877 13.3333 11.6667 13.3333V15ZM8.33333 15H11.6667V13.3333H8.33333V15Z", fill: "black" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99998 3.33333C10.4602 3.33333 10.8333 3.70642 10.8333 4.16666V7.5C10.8333 7.96023 10.4602 8.33333 9.99998 8.33333C9.53974 8.33333 9.16665 7.96023 9.16665 7.5V4.16666C9.16665 3.70642 9.53974 3.33333 9.99998 3.33333ZM1.66665 10C2.12688 10 2.49998 10.3731 2.49998 10.8333V14.1667C2.49998 14.6269 2.12688 15 1.66665 15C1.20641 15 0.833313 14.6269 0.833313 14.1667V10.8333C0.833313 10.3731 1.20641 10 1.66665 10ZM18.3333 10C18.7936 10 19.1666 10.3731 19.1666 10.8333V14.1667C19.1666 14.6269 18.7936 15 18.3333 15C17.8731 15 17.5 14.6269 17.5 14.1667V10.8333C17.5 10.3731 17.8731 10 18.3333 10Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.33331 3.33333C8.33331 2.41286 9.07951 1.66666 9.99998 1.66666C10.9205 1.66666 11.6666 2.41286 11.6666 3.33333C11.6666 4.25381 10.9205 5 9.99998 5C9.07951 5 8.33331 4.25381 8.33331 3.33333Z", fill: "white" })] }), _jsx("g", { mask: "url(#mask0_1302_392)", children: _jsx("path", { d: "M0 0H20V20H0V0Z", fill: `url(#${id})` }) }), _jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "9.99983", y1: "19.7225", x2: "9.99983", y2: "0.278048", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: disabled ? 'currentColor' : '#45E4FA' }), _jsx("stop", { offset: "1", stopColor: disabled ? 'currentColor' : '#8A45FA' })] }) })] }));
|
|
4
6
|
};
|
|
5
7
|
export default AIKitIcon;
|
|
@@ -50,7 +50,7 @@ export function AideToolbarButton() {
|
|
|
50
50
|
}, [editor]);
|
|
51
51
|
return (_jsx(Box, { component: "button", disabled: !editor.isEditable() || !available || !templatesAvailable, onClick: () => {
|
|
52
52
|
editor.dispatchCommand(ACTIVATE_AI_COMMAND, 'templates');
|
|
53
|
-
}, className: "toolbar-item aide", sx: {
|
|
53
|
+
}, className: "toolbar-item aide", sx: { svg: { opacity: 0.6 } }, children: _jsx("i", { className: "iconify", "data-icon": "tabler:sparkles" }) }));
|
|
54
54
|
}
|
|
55
55
|
function AideBox({ editor }) {
|
|
56
56
|
const boxRef = useRef(null);
|
package/lib/main/editor.js
CHANGED
package/lib/main/index.css
CHANGED
|
@@ -537,6 +537,10 @@ i.prettier-error {
|
|
|
537
537
|
height: 1px;
|
|
538
538
|
}
|
|
539
539
|
|
|
540
|
+
.dropdown-button-text {
|
|
541
|
+
margin-left: 8px;
|
|
542
|
+
}
|
|
543
|
+
|
|
540
544
|
@media screen and (max-width: 1100px) {
|
|
541
545
|
.dropdown-button-text {
|
|
542
546
|
display: none !important;
|
|
@@ -832,7 +836,7 @@ button.action-button:disabled {
|
|
|
832
836
|
text-align: right;
|
|
833
837
|
}
|
|
834
838
|
|
|
835
|
-
@container toolbar (max-width:
|
|
839
|
+
@container toolbar (max-width: 700px) {
|
|
836
840
|
.toolbar-item.font-size,
|
|
837
841
|
.toolbar-item.code,
|
|
838
842
|
.toolbar-item.alignment,
|
|
@@ -849,12 +853,10 @@ button.action-button:disabled {
|
|
|
849
853
|
margin-bottom: 1px;
|
|
850
854
|
background: #fff;
|
|
851
855
|
padding: 4px;
|
|
852
|
-
padding-left: 24px;
|
|
853
856
|
border-top-left-radius: 4px;
|
|
854
857
|
border-top-right-radius: 4px;
|
|
855
858
|
vertical-align: middle;
|
|
856
859
|
overflow: auto;
|
|
857
|
-
height: 36px;
|
|
858
860
|
container: toolbar / inline-size;
|
|
859
861
|
}
|
|
860
862
|
|
|
@@ -862,12 +864,13 @@ button.action-button:disabled {
|
|
|
862
864
|
border: 0;
|
|
863
865
|
display: flex;
|
|
864
866
|
background: none;
|
|
865
|
-
border-radius:
|
|
867
|
+
border-radius: 8px;
|
|
866
868
|
padding: 8px;
|
|
867
869
|
cursor: pointer;
|
|
868
870
|
vertical-align: middle;
|
|
869
871
|
flex-shrink: 0;
|
|
870
872
|
align-items: center;
|
|
873
|
+
color: #4b5563;
|
|
871
874
|
}
|
|
872
875
|
|
|
873
876
|
.toolbar button.toolbar-item:disabled {
|
|
@@ -875,7 +878,7 @@ button.action-button:disabled {
|
|
|
875
878
|
}
|
|
876
879
|
|
|
877
880
|
.toolbar button.toolbar-item.spaced {
|
|
878
|
-
margin-right:
|
|
881
|
+
margin-right: 4px;
|
|
879
882
|
}
|
|
880
883
|
|
|
881
884
|
.toolbar button.toolbar-item i.format {
|
|
@@ -926,7 +929,6 @@ button.action-button:disabled {
|
|
|
926
929
|
overflow: hidden;
|
|
927
930
|
height: 20px;
|
|
928
931
|
text-align: left;
|
|
929
|
-
padding-right: 10px;
|
|
930
932
|
}
|
|
931
933
|
|
|
932
934
|
.toolbar .toolbar-item .icon {
|
|
@@ -934,11 +936,16 @@ button.action-button:disabled {
|
|
|
934
936
|
width: 20px;
|
|
935
937
|
height: 20px;
|
|
936
938
|
user-select: none;
|
|
937
|
-
margin-right: 8px;
|
|
938
939
|
line-height: 16px;
|
|
939
940
|
background-size: contain;
|
|
940
941
|
}
|
|
941
942
|
|
|
943
|
+
.toolbar .toolbar-item .iconify {
|
|
944
|
+
display: flex;
|
|
945
|
+
width: 20px;
|
|
946
|
+
height: 20px;
|
|
947
|
+
}
|
|
948
|
+
|
|
942
949
|
.toolbar i.chevron-down {
|
|
943
950
|
margin-top: 3px;
|
|
944
951
|
margin-left: auto;
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
padding: 8px;
|
|
25
25
|
cursor: pointer;
|
|
26
26
|
vertical-align: middle;
|
|
27
|
+
color: #4b5563;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.floating-text-format-popup button.popup-item:disabled {
|
|
@@ -93,6 +94,7 @@
|
|
|
93
94
|
overflow: hidden;
|
|
94
95
|
height: 20px;
|
|
95
96
|
text-align: left;
|
|
97
|
+
margin-left: 8px;
|
|
96
98
|
}
|
|
97
99
|
|
|
98
100
|
.floating-text-format-popup .popup-item .icon {
|
|
@@ -100,7 +102,6 @@
|
|
|
100
102
|
width: 20px;
|
|
101
103
|
height: 20px;
|
|
102
104
|
user-select: none;
|
|
103
|
-
margin-right: 8px;
|
|
104
105
|
line-height: 16px;
|
|
105
106
|
background-size: contain;
|
|
106
107
|
}
|
|
@@ -51,27 +51,6 @@ function getCodeLanguageOptions() {
|
|
|
51
51
|
return options;
|
|
52
52
|
}
|
|
53
53
|
const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();
|
|
54
|
-
const FONT_FAMILY_OPTIONS = [
|
|
55
|
-
['Arial', 'Arial'],
|
|
56
|
-
['Courier New', 'Courier New'],
|
|
57
|
-
['Georgia', 'Georgia'],
|
|
58
|
-
['Times New Roman', 'Times New Roman'],
|
|
59
|
-
['Trebuchet MS', 'Trebuchet MS'],
|
|
60
|
-
['Verdana', 'Verdana'],
|
|
61
|
-
];
|
|
62
|
-
const FONT_SIZE_OPTIONS = [
|
|
63
|
-
['10px', '10px'],
|
|
64
|
-
['11px', '11px'],
|
|
65
|
-
['12px', '12px'],
|
|
66
|
-
['13px', '13px'],
|
|
67
|
-
['14px', '14px'],
|
|
68
|
-
['15px', '15px'],
|
|
69
|
-
['16px', '16px'],
|
|
70
|
-
['17px', '17px'],
|
|
71
|
-
['18px', '18px'],
|
|
72
|
-
['19px', '19px'],
|
|
73
|
-
['20px', '20px'],
|
|
74
|
-
];
|
|
75
54
|
function dropDownActiveClass(active) {
|
|
76
55
|
if (active)
|
|
77
56
|
return 'active dropdown-item-active';
|
|
@@ -146,48 +125,28 @@ function BlockFormatDropDown({ editor, blockType, disabled = false, }) {
|
|
|
146
125
|
}
|
|
147
126
|
};
|
|
148
127
|
const icons = {
|
|
149
|
-
paragraph: '
|
|
150
|
-
h1: '
|
|
151
|
-
h2: '
|
|
152
|
-
h3: '
|
|
153
|
-
bullet: '
|
|
154
|
-
number: '
|
|
155
|
-
check: '
|
|
156
|
-
quote: '
|
|
157
|
-
code: '
|
|
128
|
+
paragraph: 'tabler:align-justified',
|
|
129
|
+
h1: 'tabler:h-1',
|
|
130
|
+
h2: 'tabler:h-2',
|
|
131
|
+
h3: 'tabler:h-3',
|
|
132
|
+
bullet: 'tabler:list',
|
|
133
|
+
number: 'tabler:list-numbers',
|
|
134
|
+
check: 'tabler:list-details',
|
|
135
|
+
quote: 'tabler:quote',
|
|
136
|
+
code: 'tabler:code',
|
|
158
137
|
};
|
|
159
138
|
return (_jsxs(DropDown, { disabled: disabled, buttonClassName: "toolbar-item", buttonIconClassName: "iconify", buttonIconData: icons[blockType], buttonLabel: blockTypeToBlockName[blockType], buttonAriaLabel: "Formatting options for text style", children: [_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'paragraph')}`, onClick: formatParagraph, children: [_jsx("i", { className: "iconify", "data-icon": icons.paragraph }), _jsx("span", { className: "text", children: "Normal" })] }), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h1')}`, onClick: () => formatHeading('h1'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h1 }), _jsx("span", { className: "text", children: "Heading 1" })] })), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h2')}`, onClick: () => formatHeading('h2'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h2 }), _jsx("span", { className: "text", children: "Heading 2" })] })), hasNodes('heading') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'h3')}`, onClick: () => formatHeading('h3'), children: [_jsx("i", { className: "iconify", "data-icon": icons.h3 }), _jsx("span", { className: "text", children: "Heading 3" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'bullet')}`, onClick: formatBulletList, children: [_jsx("i", { className: "iconify", "data-icon": icons.bullet }), _jsx("span", { className: "text", children: "Bullet List" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'number')}`, onClick: formatNumberedList, children: [_jsx("i", { className: "iconify", "data-icon": icons.number }), _jsx("span", { className: "text", children: "Numbered List" })] })), hasNodes('list') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'check')}`, onClick: formatCheckList, children: [_jsx("i", { className: "iconify", "data-icon": icons.check }), _jsx("span", { className: "text", children: "Check List" })] })), hasNodes('quote') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'quote')}`, onClick: formatQuote, children: [_jsx("i", { className: "iconify", "data-icon": icons.quote }), _jsx("span", { className: "text", children: "Quote" })] })), hasNodes('code') && (_jsxs(DropDownItem, { className: `item ${dropDownActiveClass(blockType === 'code')}`, onClick: formatCode, children: [_jsx("i", { className: "iconify", "data-icon": icons.code }), _jsx("span", { className: "text", children: "Code Block" })] }))] }));
|
|
160
139
|
}
|
|
161
140
|
function Divider() {
|
|
162
141
|
return _jsx("div", { className: "divider" });
|
|
163
142
|
}
|
|
164
|
-
function FontDropDown({ editor, value, styleStr, disabled = false, }) {
|
|
165
|
-
const handleClick = useCallback((option) => {
|
|
166
|
-
editor.update(() => {
|
|
167
|
-
const selection = $getSelection();
|
|
168
|
-
if ($isRangeSelection(selection)) {
|
|
169
|
-
$patchStyleText(selection, {
|
|
170
|
-
[styleStr]: option,
|
|
171
|
-
});
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
}, [editor, styleStr]);
|
|
175
|
-
const buttonAriaLabel = styleStr === 'font-family' ? 'Formatting options for font family' : 'Formatting options for font size';
|
|
176
|
-
const icons = {
|
|
177
|
-
'font-family': 'mdi:format-text',
|
|
178
|
-
'font-size': 'mdi:format-size',
|
|
179
|
-
};
|
|
180
|
-
return (_jsx(DropDown, { disabled: disabled, buttonClassName: `toolbar-item ${styleStr}`, buttonLabel: value, buttonIconClassName: "iconify", buttonIconData: icons[styleStr], buttonAriaLabel: buttonAriaLabel, children: (styleStr === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (_jsx(DropDownItem, { className: `item ${dropDownActiveClass(value === option)} ${styleStr === 'font-size' ? 'fontsize-item' : ''}`, onClick: () => handleClick(option), children: _jsx("span", { className: "text", children: text }) }, option))) }));
|
|
181
|
-
}
|
|
182
143
|
export default function ToolbarPlugin() {
|
|
183
144
|
const [editor] = useLexicalComposerContext();
|
|
184
145
|
const [activeEditor, setActiveEditor] = useState(editor);
|
|
185
146
|
const [blockType, setBlockType] = useState('paragraph');
|
|
186
147
|
const [selectedElementKey, setSelectedElementKey] = useState(null);
|
|
187
|
-
const [fontSize, setFontSize] = useState('15px');
|
|
188
148
|
const [fontColor, setFontColor] = useState('#000');
|
|
189
149
|
const [bgColor, setBgColor] = useState('#fff');
|
|
190
|
-
const [fontFamily, setFontFamily] = useState('Arial');
|
|
191
150
|
const [isLink, setIsLink] = useState(false);
|
|
192
151
|
const [isBold, setIsBold] = useState(false);
|
|
193
152
|
const [isItalic, setIsItalic] = useState(false);
|
|
@@ -256,18 +215,12 @@ export default function ToolbarPlugin() {
|
|
|
256
215
|
}
|
|
257
216
|
}
|
|
258
217
|
// Handle buttons
|
|
259
|
-
if ($getSelectionStyleValueForProperty(selection, 'font-size', '15px')) {
|
|
260
|
-
setFontSize($getSelectionStyleValueForProperty(selection, 'font-size', '15px'));
|
|
261
|
-
}
|
|
262
218
|
if ($getSelectionStyleValueForProperty(selection, 'color', '#000')) {
|
|
263
219
|
setFontColor($getSelectionStyleValueForProperty(selection, 'color', '#000'));
|
|
264
220
|
}
|
|
265
221
|
if ($getSelectionStyleValueForProperty(selection, 'background-color', '#fff')) {
|
|
266
222
|
setBgColor($getSelectionStyleValueForProperty(selection, 'background-color', '#fff'));
|
|
267
223
|
}
|
|
268
|
-
if ($getSelectionStyleValueForProperty(selection, 'font-family', 'Arial')) {
|
|
269
|
-
setFontFamily($getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'));
|
|
270
|
-
}
|
|
271
224
|
}
|
|
272
225
|
}, [activeEditor]);
|
|
273
226
|
useEffect(() => {
|
|
@@ -349,7 +302,6 @@ export default function ToolbarPlugin() {
|
|
|
349
302
|
const items = config?.items ?? [
|
|
350
303
|
'block',
|
|
351
304
|
'align',
|
|
352
|
-
'font-size',
|
|
353
305
|
'bold',
|
|
354
306
|
'italic',
|
|
355
307
|
'underline',
|
|
@@ -374,25 +326,11 @@ export default function ToolbarPlugin() {
|
|
|
374
326
|
}
|
|
375
327
|
break;
|
|
376
328
|
}
|
|
377
|
-
// case 'font-family': {
|
|
378
|
-
// if (blockType !== 'code') {
|
|
379
|
-
// menus.push(
|
|
380
|
-
// <FontDropDown key={item} disabled={!isEditable} styleStr="font-family" value={fontFamily} editor={editor} />
|
|
381
|
-
// );
|
|
382
|
-
// }
|
|
383
|
-
// break;
|
|
384
|
-
// }
|
|
385
|
-
case 'font-size': {
|
|
386
|
-
if (blockType !== 'code') {
|
|
387
|
-
menus.push(_jsx(FontDropDown, { disabled: !isEditable, styleStr: "font-size", value: fontSize, editor: editor }, item));
|
|
388
|
-
}
|
|
389
|
-
break;
|
|
390
|
-
}
|
|
391
329
|
case 'bold': {
|
|
392
330
|
if (blockType !== 'code') {
|
|
393
331
|
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
394
332
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
|
|
395
|
-
}, className: `toolbar-item spaced ${isBold ? 'active' : ''}`, title: IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)', "aria-label": `Format text as bold. Shortcut: ${IS_APPLE ? '⌘B' : 'Ctrl+B'}`, children: _jsx("i", { className: "iconify", "data-icon": "
|
|
333
|
+
}, className: `toolbar-item spaced ${isBold ? 'active' : ''}`, title: IS_APPLE ? 'Bold (⌘B)' : 'Bold (Ctrl+B)', "aria-label": `Format text as bold. Shortcut: ${IS_APPLE ? '⌘B' : 'Ctrl+B'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:bold" }) }, item));
|
|
396
334
|
}
|
|
397
335
|
break;
|
|
398
336
|
}
|
|
@@ -400,7 +338,7 @@ export default function ToolbarPlugin() {
|
|
|
400
338
|
if (blockType !== 'code') {
|
|
401
339
|
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
402
340
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
|
|
403
|
-
}, className: `toolbar-item spaced ${isItalic ? 'active' : ''}`, title: IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)', "aria-label": `Format text as italics. Shortcut: ${IS_APPLE ? '⌘I' : 'Ctrl+I'}`, children: _jsx("i", { className: "iconify", "data-icon": "
|
|
341
|
+
}, className: `toolbar-item spaced ${isItalic ? 'active' : ''}`, title: IS_APPLE ? 'Italic (⌘I)' : 'Italic (Ctrl+I)', "aria-label": `Format text as italics. Shortcut: ${IS_APPLE ? '⌘I' : 'Ctrl+I'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:italic" }) }, item));
|
|
404
342
|
}
|
|
405
343
|
break;
|
|
406
344
|
}
|
|
@@ -408,7 +346,7 @@ export default function ToolbarPlugin() {
|
|
|
408
346
|
if (blockType !== 'code') {
|
|
409
347
|
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
410
348
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
|
|
411
|
-
}, className: `toolbar-item spaced ${isUnderline ? 'active' : ''}`, title: IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)', "aria-label": `Format text to underlined. Shortcut: ${IS_APPLE ? '⌘U' : 'Ctrl+U'}`, children: _jsx("i", { className: "iconify", "data-icon": "
|
|
349
|
+
}, className: `toolbar-item spaced ${isUnderline ? 'active' : ''}`, title: IS_APPLE ? 'Underline (⌘U)' : 'Underline (Ctrl+U)', "aria-label": `Format text to underlined. Shortcut: ${IS_APPLE ? '⌘U' : 'Ctrl+U'}`, children: _jsx("i", { className: "iconify", "data-icon": "tabler:underline" }) }, item));
|
|
412
350
|
}
|
|
413
351
|
break;
|
|
414
352
|
}
|
|
@@ -416,13 +354,13 @@ export default function ToolbarPlugin() {
|
|
|
416
354
|
if (blockType !== 'code') {
|
|
417
355
|
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
418
356
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
|
|
419
|
-
}, className: `toolbar-item code ${isCode ? 'active' : ''}`, title: "Insert code block", "aria-label": "Insert code block", children: _jsx("i", { className: "iconify", "data-icon": "
|
|
357
|
+
}, className: `toolbar-item code ${isCode ? 'active' : ''}`, title: "Insert code block", "aria-label": "Insert code block", children: _jsx("i", { className: "iconify", "data-icon": "tabler:code" }) }, item));
|
|
420
358
|
}
|
|
421
359
|
break;
|
|
422
360
|
}
|
|
423
361
|
case 'link': {
|
|
424
362
|
if (hasNodes('link') && blockType !== 'code') {
|
|
425
|
-
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: insertLink, className: `toolbar-item spaced link ${isLink ? 'active' : ''}`, "aria-label": "Insert link", title: "Insert link", children: _jsx("i", { className: "iconify", "data-icon": "
|
|
363
|
+
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: insertLink, className: `toolbar-item spaced link ${isLink ? 'active' : ''}`, "aria-label": "Insert link", title: "Insert link", children: _jsx("i", { className: "iconify", "data-icon": "tabler:link" }) }, item));
|
|
426
364
|
}
|
|
427
365
|
break;
|
|
428
366
|
}
|
|
@@ -448,44 +386,44 @@ export default function ToolbarPlugin() {
|
|
|
448
386
|
}
|
|
449
387
|
});
|
|
450
388
|
}
|
|
451
|
-
}, className: "toolbar-item spaced", "aria-label": "Upload Image", title: "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "
|
|
389
|
+
}, className: "toolbar-item spaced", "aria-label": "Upload Image", title: "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "tabler:photo" }) }, item));
|
|
452
390
|
}
|
|
453
391
|
break;
|
|
454
392
|
}
|
|
455
393
|
case 'color': {
|
|
456
394
|
if (blockType !== 'code') {
|
|
457
|
-
menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting text color", buttonIconClassName: "iconify", buttonIconData: "
|
|
395
|
+
menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting text color", buttonIconClassName: "iconify", buttonIconData: "tabler:text-color", color: fontColor, onChange: onFontColorSelect, title: "text color" }, item));
|
|
458
396
|
}
|
|
459
397
|
break;
|
|
460
398
|
}
|
|
461
399
|
case 'bgcolor': {
|
|
462
400
|
if (blockType !== 'code') {
|
|
463
|
-
menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting background color", buttonIconClassName: "iconify", buttonIconData: "
|
|
401
|
+
menus.push(_jsx(ColorPicker, { disabled: !isEditable, buttonClassName: "toolbar-item color-picker", buttonAriaLabel: "Formatting background color", buttonIconClassName: "iconify", buttonIconData: "tabler:bucket-droplet", color: bgColor, onChange: onBgColorSelect, title: "bg color" }, item));
|
|
464
402
|
}
|
|
465
403
|
break;
|
|
466
404
|
}
|
|
467
405
|
case 'strikethrough': {
|
|
468
406
|
if (blockType !== 'code') {
|
|
469
|
-
menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced text-format-additional", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconData: "
|
|
407
|
+
menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonClassName: "toolbar-item spaced text-format-additional", buttonLabel: "", buttonAriaLabel: "Formatting options for additional text styles", buttonIconData: "tabler:letter-case", buttonIconClassName: "iconify", children: [_jsxs(DropDownItem, { onClick: () => {
|
|
470
408
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
|
|
471
|
-
}, className: `item ${dropDownActiveClass(isStrikethrough)}`, title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: [_jsx("i", { className: "iconify", "data-icon": "
|
|
409
|
+
}, className: `item ${dropDownActiveClass(isStrikethrough)}`, title: "Strikethrough", "aria-label": "Format text with a strikethrough", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:strikethrough" }), _jsx("span", { className: "text", children: "Strikethrough" })] }), _jsxs(DropDownItem, { onClick: () => {
|
|
472
410
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
|
|
473
|
-
}, className: `item ${dropDownActiveClass(isSubscript)}`, title: "Subscript", "aria-label": "Format text with a subscript", children: [_jsx("i", { className: "iconify", "data-icon": "
|
|
411
|
+
}, className: `item ${dropDownActiveClass(isSubscript)}`, title: "Subscript", "aria-label": "Format text with a subscript", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:subscript" }), _jsx("span", { className: "text", children: "Subscript" })] }), _jsxs(DropDownItem, { onClick: () => {
|
|
474
412
|
activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
|
|
475
|
-
}, className: `item ${dropDownActiveClass(isSuperscript)}`, title: "Superscript", "aria-label": "Format text with a superscript", children: [_jsx("i", { className: "iconify", "data-icon": "
|
|
413
|
+
}, className: `item ${dropDownActiveClass(isSuperscript)}`, title: "Superscript", "aria-label": "Format text with a superscript", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:superscript" }), _jsx("span", { className: "text", children: "Superscript" })] }), _jsxs(DropDownItem, { onClick: clearFormatting, className: "item", title: "Clear text formatting", "aria-label": "Clear all text formatting", children: [_jsx("i", { className: "iconify", "data-icon": "tabler:clear-formatting" }), _jsx("span", { className: "text", children: "Clear Formatting" })] })] }, item));
|
|
476
414
|
}
|
|
477
415
|
break;
|
|
478
416
|
}
|
|
479
417
|
case 'align': {
|
|
480
418
|
const icons = {
|
|
481
|
-
left: '
|
|
482
|
-
center: '
|
|
483
|
-
right: '
|
|
484
|
-
justify: '
|
|
485
|
-
outdent: '
|
|
486
|
-
indent: '
|
|
419
|
+
left: 'tabler:align-left',
|
|
420
|
+
center: 'tabler:align-center',
|
|
421
|
+
right: 'tabler:align-right',
|
|
422
|
+
justify: 'tabler:align-justified',
|
|
423
|
+
outdent: 'tabler:indent-decrease',
|
|
424
|
+
indent: 'tabler:indent-increase',
|
|
487
425
|
};
|
|
488
|
-
menus.push(_jsxs(DropDown, { disabled: !isEditable,
|
|
426
|
+
menus.push(_jsxs(DropDown, { disabled: !isEditable, buttonIconClassName: "iconify", buttonIconData: icons.left, buttonClassName: "toolbar-item spaced alignment", buttonAriaLabel: "Formatting options for text alignment", children: [_jsxs(DropDownItem, { onClick: () => {
|
|
489
427
|
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
|
|
490
428
|
}, className: "item", children: [_jsx("i", { className: "iconify", "data-icon": icons.left }), _jsx("span", { className: "text", children: "Left Align" })] }), _jsxs(DropDownItem, { onClick: () => {
|
|
491
429
|
activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
|
|
@@ -504,7 +442,7 @@ export default function ToolbarPlugin() {
|
|
|
504
442
|
if (blockType !== 'code') {
|
|
505
443
|
menus.push(_jsx(FormatButton, { disabled: !isEditable, onClick: () => {
|
|
506
444
|
uploadFile(editor);
|
|
507
|
-
}, className: `toolbar-item spaced ${isCode ? 'active' : ''}`, title: "Upload Image", "aria-label": "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "
|
|
445
|
+
}, className: `toolbar-item spaced ${isCode ? 'active' : ''}`, title: "Upload Image", "aria-label": "Upload Image", children: _jsx("i", { className: "iconify", "data-icon": "tabler:photo" }) }, item));
|
|
508
446
|
}
|
|
509
447
|
break;
|
|
510
448
|
}
|
|
@@ -528,17 +466,8 @@ const Toolbar = styled.div `
|
|
|
528
466
|
const FormatButton = styled.button `
|
|
529
467
|
display: flex;
|
|
530
468
|
align-items: center;
|
|
531
|
-
font-size:
|
|
532
|
-
|
|
469
|
+
font-size: 20px;
|
|
533
470
|
.iconify {
|
|
534
471
|
opacity: 0.6;
|
|
535
472
|
}
|
|
536
|
-
|
|
537
|
-
&.active {
|
|
538
|
-
background-color: rgba(223, 232, 250, 0.3);
|
|
539
|
-
|
|
540
|
-
.iconify {
|
|
541
|
-
opacity: 1;
|
|
542
|
-
}
|
|
543
|
-
}
|
|
544
473
|
`;
|
package/lib/main/ui/DropDown.js
CHANGED
|
@@ -140,7 +140,7 @@ export default function DropDown({ disabled = false, buttonLabel, buttonAriaLabe
|
|
|
140
140
|
};
|
|
141
141
|
}
|
|
142
142
|
}, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
|
|
143
|
-
return (_jsxs(_Fragment, { children: [_jsxs(DropdownButton, { disabled: disabled, "aria-label": buttonAriaLabel || buttonLabel, className: buttonClassName, onClick: () => setShowDropDown(!showDropDown), ref: buttonRef, children: [buttonIconClassName && _jsx("span", { className: `icon ${buttonIconClassName}`, "data-icon": buttonIconData }), buttonLabel && _jsx("span", { className: "text dropdown-button-text", children: buttonLabel })
|
|
143
|
+
return (_jsxs(_Fragment, { children: [_jsxs(DropdownButton, { disabled: disabled, "aria-label": buttonAriaLabel || buttonLabel, className: buttonClassName, onClick: () => setShowDropDown(!showDropDown), ref: buttonRef, children: [buttonIconClassName && _jsx("span", { className: `icon ${buttonIconClassName}`, "data-icon": buttonIconData }), buttonLabel && _jsx("span", { className: "text dropdown-button-text", children: buttonLabel })] }), showDropDown &&
|
|
144
144
|
createPortal(_jsx(DropDownItems, { dropDownRef: dropDownRef, onClose: handleClose, children: children }), document.body)] }));
|
|
145
145
|
}
|
|
146
146
|
const DropdownButton = styled.button `
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/editor",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.179",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "npm run storybook",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@arcblock/ux": "^2.9.58",
|
|
41
41
|
"@blocklet/embed": "^0.1.11",
|
|
42
|
-
"@blocklet/pdf": "1.6.
|
|
42
|
+
"@blocklet/pdf": "1.6.179",
|
|
43
43
|
"@excalidraw/excalidraw": "^0.14.2",
|
|
44
44
|
"@iconify/iconify": "^3.0.1",
|
|
45
45
|
"@lexical/clipboard": "0.13.1",
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"react": "*",
|
|
109
109
|
"react-dom": "*"
|
|
110
110
|
},
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "611ee56df5d8bbd5b763645b9086aada27e555e5"
|
|
112
112
|
}
|