@uxf/wysiwyg 14.0.0 → 14.1.0
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/hooks.js +21 -7
- package/package.json +8 -8
- package/plugins/link/floating-link-wrapper.js +111 -8
- package/plugins/link/hooks/use-floating-link-selectors.js +67 -7
- package/plugins/link/hooks/use-link-actions.js +127 -31
- package/plugins/link/hooks/use-link-submit-on-enter.js +58 -12
- package/ui/button/button-element.js +72 -48
- package/ui/button/insert-button-modal-content.js +183 -40
- package/ui/components/modal/modal-button-cancel.js +46 -44
- package/ui/floating-link.js +381 -46
- package/ui/image/image-element.js +72 -48
- package/ui/image/insert-image-modal-content.js +268 -45
- package/ui/toolbar/buttons/button-toolbar-button.js +37 -2
- package/ui/toolbar/buttons/element-toolbar-button.js +53 -8
- package/ui/toolbar/buttons/image-toolbar-button.js +37 -2
- package/ui/toolbar/buttons/link-toolbar-button.js +53 -9
- package/ui/toolbar/buttons/list-toolbar-button.js +50 -9
- package/ui/toolbar/buttons/mark-toolbar-button.js +49 -9
- package/ui/toolbar/buttons/toolbar-button.js +56 -14
- package/ui/toolbar/buttons/undo-redo-button-group.js +132 -58
- package/ui/toolbar/buttons/video-toolbar-button.js +37 -2
- package/ui/toolbar/toolbar.js +162 -38
- package/ui/video/insert-video-modal-content.js +160 -36
- package/ui/video/video-element.js +83 -48
- package/wysiwyg-editor.js +184 -36
- package/wysiwyg-editor.stories.js +288 -118
|
@@ -4,22 +4,62 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.MarkToolbarButton = void 0;
|
|
7
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
7
8
|
const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const hooks_1 = require("../../../hooks");
|
|
10
11
|
const utils_1 = require("../../../utils");
|
|
11
12
|
const toolbar_button_1 = require("./toolbar-button");
|
|
12
13
|
const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
|
|
13
|
-
const MarkToolbarButton =
|
|
14
|
+
const MarkToolbarButton = props => {
|
|
14
15
|
var _a, _b;
|
|
16
|
+
const $ = (0, compiler_runtime_1.c)(15);
|
|
15
17
|
const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
(0, utils_1.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
let t0;
|
|
19
|
+
if ($[0] !== editor || $[1] !== props.pluginKey) {
|
|
20
|
+
const type = (0, utils_1.getPluginType)(editor, props.pluginKey);
|
|
21
|
+
t0 = (0, is_not_nil_1.isNotNil)(editor.selection) && (0, utils_1.isMarkActive)(editor, type);
|
|
22
|
+
$[0] = editor;
|
|
23
|
+
$[1] = props.pluginKey;
|
|
24
|
+
$[2] = t0;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
t0 = $[2];
|
|
28
|
+
}
|
|
29
|
+
const isActive = t0;
|
|
30
|
+
let t1;
|
|
31
|
+
if ($[3] !== editor || $[4] !== props.pluginKey) {
|
|
32
|
+
t1 = () => {
|
|
33
|
+
(0, utils_1.toggleMark)(editor, {
|
|
34
|
+
key: props.pluginKey
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
$[3] = editor;
|
|
38
|
+
$[4] = props.pluginKey;
|
|
39
|
+
$[5] = t1;
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
t1 = $[5];
|
|
43
|
+
}
|
|
44
|
+
const onMouseDown = t1;
|
|
45
|
+
const t2 = `${CLASS_NAME} ${CLASS_NAME}-mark ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
|
|
46
|
+
const t3 = (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20;
|
|
47
|
+
let t4;
|
|
48
|
+
if ($[6] !== editor || $[7] !== isActive || $[8] !== onMouseDown || $[9] !== props.iconName || $[10] !== props.pluginKey || $[11] !== props.tooltipText || $[12] !== t2 || $[13] !== t3) {
|
|
49
|
+
t4 = react_1.default.createElement(toolbar_button_1.ToolbarButton, { className: t2, editor: editor, iconName: props.iconName, iconSize: t3, isActive: isActive, onMouseDown: onMouseDown, pluginKey: props.pluginKey, tooltipText: props.tooltipText });
|
|
50
|
+
$[6] = editor;
|
|
51
|
+
$[7] = isActive;
|
|
52
|
+
$[8] = onMouseDown;
|
|
53
|
+
$[9] = props.iconName;
|
|
54
|
+
$[10] = props.pluginKey;
|
|
55
|
+
$[11] = props.tooltipText;
|
|
56
|
+
$[12] = t2;
|
|
57
|
+
$[13] = t3;
|
|
58
|
+
$[14] = t4;
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
t4 = $[14];
|
|
62
|
+
}
|
|
63
|
+
return t4;
|
|
24
64
|
};
|
|
25
65
|
exports.MarkToolbarButton = MarkToolbarButton;
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ToolbarButton = void 0;
|
|
7
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
7
8
|
const use_media_query_1 = require("@uxf/core-react/hooks/use-media-query");
|
|
8
9
|
const button_1 = require("@uxf/ui/button");
|
|
9
10
|
const icon_1 = require("@uxf/ui/icon");
|
|
@@ -11,28 +12,69 @@ const tooltip_1 = require("@uxf/ui/tooltip");
|
|
|
11
12
|
const react_1 = __importDefault(require("react"));
|
|
12
13
|
const utils_1 = require("../../../utils");
|
|
13
14
|
const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
|
|
14
|
-
const ToolbarButton =
|
|
15
|
+
const ToolbarButton = props => {
|
|
15
16
|
var _a, _b;
|
|
16
|
-
|
|
17
|
-
// follows a change of input device.
|
|
17
|
+
const $ = (0, compiler_runtime_1.c)(13);
|
|
18
18
|
const isCoarsePointer = (0, use_media_query_1.useMediaQuery)("(pointer: coarse)");
|
|
19
19
|
const onMouseDown = props.onMouseDown;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
e.
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
let t0;
|
|
21
|
+
if ($[0] !== onMouseDown) {
|
|
22
|
+
t0 = e => {
|
|
23
|
+
if (e.button === 0) {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
e.stopPropagation();
|
|
26
|
+
onMouseDown(e);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
$[0] = onMouseDown;
|
|
30
|
+
$[1] = t0;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
t0 = $[1];
|
|
34
|
+
}
|
|
35
|
+
const onLeftMouseDown = t0;
|
|
28
36
|
if (!(0, utils_1.isPluginEnabled)(props.editor, props.pluginKey)) {
|
|
29
37
|
return null;
|
|
30
38
|
}
|
|
31
|
-
const
|
|
32
|
-
|
|
39
|
+
const t1 = `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
|
|
40
|
+
const t2 = props.isActive ? "default" : "secondary";
|
|
41
|
+
const t3 = (_b = props.iconSize) !== null && _b !== void 0 ? _b : 20;
|
|
42
|
+
let t4;
|
|
43
|
+
if ($[2] !== props.iconName || $[3] !== t3) {
|
|
44
|
+
t4 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: props.iconName, size: t3 });
|
|
45
|
+
$[2] = props.iconName;
|
|
46
|
+
$[3] = t3;
|
|
47
|
+
$[4] = t4;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
t4 = $[4];
|
|
51
|
+
}
|
|
52
|
+
let t5;
|
|
53
|
+
if ($[5] !== onLeftMouseDown || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
|
|
54
|
+
t5 = react_1.default.createElement(button_1.Button, { className: t1, isIconButton: true, onPointerDown: onLeftMouseDown, variant: t2 }, t4);
|
|
55
|
+
$[5] = onLeftMouseDown;
|
|
56
|
+
$[6] = t1;
|
|
57
|
+
$[7] = t2;
|
|
58
|
+
$[8] = t4;
|
|
59
|
+
$[9] = t5;
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
t5 = $[9];
|
|
63
|
+
}
|
|
64
|
+
const button = t5;
|
|
33
65
|
if (isCoarsePointer) {
|
|
34
66
|
return button;
|
|
35
67
|
}
|
|
36
|
-
|
|
68
|
+
let t6;
|
|
69
|
+
if ($[10] !== button || $[11] !== props.tooltipText) {
|
|
70
|
+
t6 = react_1.default.createElement(tooltip_1.Tooltip, { className: `${CLASS_NAME}__tooltip`, content: props.tooltipText }, button);
|
|
71
|
+
$[10] = button;
|
|
72
|
+
$[11] = props.tooltipText;
|
|
73
|
+
$[12] = t6;
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
t6 = $[12];
|
|
77
|
+
}
|
|
78
|
+
return t6;
|
|
37
79
|
};
|
|
38
80
|
exports.ToolbarButton = ToolbarButton;
|
|
@@ -1,74 +1,148 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
-
var ownKeys = function(o) {
|
|
20
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
-
var ar = [];
|
|
22
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
-
return ar;
|
|
24
|
-
};
|
|
25
|
-
return ownKeys(o);
|
|
26
|
-
};
|
|
27
|
-
return function (mod) {
|
|
28
|
-
if (mod && mod.__esModule) return mod;
|
|
29
|
-
var result = {};
|
|
30
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
-
__setModuleDefault(result, mod);
|
|
32
|
-
return result;
|
|
33
|
-
};
|
|
34
|
-
})();
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
35
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
6
|
exports.UndoRedoButtonGroup = void 0;
|
|
7
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
37
8
|
const translations_1 = require("@uxf/core-react/translations");
|
|
38
9
|
const button_1 = require("@uxf/ui/button");
|
|
39
10
|
const button_group_1 = require("@uxf/ui/button-group");
|
|
40
11
|
const icon_1 = require("@uxf/ui/icon");
|
|
41
12
|
const tooltip_1 = require("@uxf/ui/tooltip");
|
|
42
|
-
const react_1 =
|
|
13
|
+
const react_1 = __importDefault(require("react"));
|
|
43
14
|
const hooks_1 = require("../../../hooks");
|
|
44
15
|
const utils_1 = require("../../../utils");
|
|
45
16
|
const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
|
|
46
|
-
const UndoRedoButtonGroup =
|
|
17
|
+
const UndoRedoButtonGroup = props => {
|
|
47
18
|
var _a;
|
|
19
|
+
const $ = (0, compiler_runtime_1.c)(26);
|
|
48
20
|
const t = (0, translations_1.useUxfTranslation)();
|
|
49
21
|
const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
e.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
22
|
+
let t0;
|
|
23
|
+
if ($[0] !== editor) {
|
|
24
|
+
t0 = e => {
|
|
25
|
+
if (e.button === 0) {
|
|
26
|
+
e.preventDefault();
|
|
27
|
+
e.stopPropagation();
|
|
28
|
+
editor.undo();
|
|
29
|
+
(0, utils_1.focusEditor)(editor);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
$[0] = editor;
|
|
33
|
+
$[1] = t0;
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
t0 = $[1];
|
|
37
|
+
}
|
|
38
|
+
const undoHandler = t0;
|
|
39
|
+
let t1;
|
|
40
|
+
if ($[2] !== editor) {
|
|
41
|
+
t1 = e_0 => {
|
|
42
|
+
if (e_0.button === 0) {
|
|
43
|
+
e_0.preventDefault();
|
|
44
|
+
e_0.stopPropagation();
|
|
45
|
+
editor.redo();
|
|
46
|
+
(0, utils_1.focusEditor)(editor);
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
$[2] = editor;
|
|
50
|
+
$[3] = t1;
|
|
51
|
+
}
|
|
52
|
+
else {
|
|
53
|
+
t1 = $[3];
|
|
54
|
+
}
|
|
55
|
+
const redoHandler = t1;
|
|
56
|
+
const t2 = `${CLASS_NAME}-group ${CLASS_NAME}-group-undo-redo ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
|
|
57
|
+
let t3;
|
|
58
|
+
if ($[4] !== t) {
|
|
59
|
+
t3 = t("uxf-wysiwyg:plugins.actions.undo.tooltip");
|
|
60
|
+
$[4] = t;
|
|
61
|
+
$[5] = t3;
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
t3 = $[5];
|
|
65
|
+
}
|
|
66
|
+
const t4 = editor.history.undos.length === 0;
|
|
67
|
+
let t5;
|
|
68
|
+
if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
|
|
69
|
+
t5 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-left", size: 16 });
|
|
70
|
+
$[6] = t5;
|
|
71
|
+
}
|
|
72
|
+
else {
|
|
73
|
+
t5 = $[6];
|
|
74
|
+
}
|
|
75
|
+
let t6;
|
|
76
|
+
if ($[7] !== t4 || $[8] !== undoHandler) {
|
|
77
|
+
t6 = react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-undo`, isDisabled: t4, isIconButton: true, onMouseDown: undoHandler, variant: "secondary" }, t5);
|
|
78
|
+
$[7] = t4;
|
|
79
|
+
$[8] = undoHandler;
|
|
80
|
+
$[9] = t6;
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
t6 = $[9];
|
|
84
|
+
}
|
|
85
|
+
let t7;
|
|
86
|
+
if ($[10] !== t3 || $[11] !== t6) {
|
|
87
|
+
t7 = react_1.default.createElement(tooltip_1.Tooltip, { content: t3 }, t6);
|
|
88
|
+
$[10] = t3;
|
|
89
|
+
$[11] = t6;
|
|
90
|
+
$[12] = t7;
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
t7 = $[12];
|
|
94
|
+
}
|
|
95
|
+
let t8;
|
|
96
|
+
if ($[13] !== t) {
|
|
97
|
+
t8 = t("uxf-wysiwyg:plugins.actions.redo.tooltip");
|
|
98
|
+
$[13] = t;
|
|
99
|
+
$[14] = t8;
|
|
100
|
+
}
|
|
101
|
+
else {
|
|
102
|
+
t8 = $[14];
|
|
103
|
+
}
|
|
104
|
+
const t9 = editor.history.redos.length === 0;
|
|
105
|
+
let t10;
|
|
106
|
+
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
|
|
107
|
+
t10 = react_1.default.createElement(icon_1.Icon, { className: `${CLASS_NAME}__icon`, name: "arrow-turn-down-right", size: 16 });
|
|
108
|
+
$[15] = t10;
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
t10 = $[15];
|
|
112
|
+
}
|
|
113
|
+
let t11;
|
|
114
|
+
if ($[16] !== redoHandler || $[17] !== t9) {
|
|
115
|
+
t11 = react_1.default.createElement(button_1.Button, { className: `${CLASS_NAME} ${CLASS_NAME}-redo`, isDisabled: t9, isIconButton: true, onMouseDown: redoHandler, variant: "secondary" }, t10);
|
|
116
|
+
$[16] = redoHandler;
|
|
117
|
+
$[17] = t9;
|
|
118
|
+
$[18] = t11;
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
t11 = $[18];
|
|
122
|
+
}
|
|
123
|
+
let t12;
|
|
124
|
+
if ($[19] !== t11 || $[20] !== t8) {
|
|
125
|
+
t12 = react_1.default.createElement(tooltip_1.Tooltip, { content: t8 }, t11);
|
|
126
|
+
$[19] = t11;
|
|
127
|
+
$[20] = t8;
|
|
128
|
+
$[21] = t12;
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
t12 = $[21];
|
|
132
|
+
}
|
|
133
|
+
let t13;
|
|
134
|
+
if ($[22] !== t12 || $[23] !== t2 || $[24] !== t7) {
|
|
135
|
+
t13 = react_1.default.createElement(button_group_1.ButtonGroup, { className: t2 },
|
|
136
|
+
t7,
|
|
137
|
+
t12);
|
|
138
|
+
$[22] = t12;
|
|
139
|
+
$[23] = t2;
|
|
140
|
+
$[24] = t7;
|
|
141
|
+
$[25] = t13;
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
t13 = $[25];
|
|
145
|
+
}
|
|
146
|
+
return t13;
|
|
73
147
|
};
|
|
74
148
|
exports.UndoRedoButtonGroup = UndoRedoButtonGroup;
|
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.VideoToolbarButton = void 0;
|
|
7
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
7
8
|
const translations_1 = require("@uxf/core-react/translations");
|
|
8
9
|
const react_1 = __importDefault(require("react"));
|
|
9
10
|
const hooks_1 = require("../../../hooks");
|
|
@@ -11,10 +12,44 @@ const create_video_plugin_1 = require("../../../plugins/embedded/video/create-vi
|
|
|
11
12
|
const insert_video_modal_content_1 = require("../../video/insert-video-modal-content");
|
|
12
13
|
const modal_toolbar_button_1 = require("./modal-toolbar-button");
|
|
13
14
|
const CLASS_NAME = "uxf-wysiwyg__toolbar-button";
|
|
14
|
-
const VideoToolbarButton =
|
|
15
|
+
const VideoToolbarButton = props => {
|
|
15
16
|
var _a, _b;
|
|
17
|
+
const $ = (0, compiler_runtime_1.c)(10);
|
|
16
18
|
const t = (0, translations_1.useUxfTranslation)();
|
|
17
19
|
const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
|
|
18
|
-
|
|
20
|
+
let t0;
|
|
21
|
+
if ($[0] !== editor) {
|
|
22
|
+
t0 = react_1.default.createElement(insert_video_modal_content_1.InsertVideoModalContent, { editor: editor });
|
|
23
|
+
$[0] = editor;
|
|
24
|
+
$[1] = t0;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
t0 = $[1];
|
|
28
|
+
}
|
|
29
|
+
const t1 = `${CLASS_NAME} ${CLASS_NAME}-video ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
|
|
30
|
+
const t2 = (_b = props.iconName) !== null && _b !== void 0 ? _b : "youtube";
|
|
31
|
+
let t3;
|
|
32
|
+
if ($[2] !== t) {
|
|
33
|
+
t3 = t("uxf-wysiwyg:plugins.video.tooltip");
|
|
34
|
+
$[2] = t;
|
|
35
|
+
$[3] = t3;
|
|
36
|
+
}
|
|
37
|
+
else {
|
|
38
|
+
t3 = $[3];
|
|
39
|
+
}
|
|
40
|
+
let t4;
|
|
41
|
+
if ($[4] !== editor || $[5] !== t0 || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
|
|
42
|
+
t4 = react_1.default.createElement(modal_toolbar_button_1.ModalToolbarButton, { Modal: t0, className: t1, editor: editor, iconName: t2, pluginKey: create_video_plugin_1.ELEMENT_VIDEO_EMBED, tooltipText: t3 });
|
|
43
|
+
$[4] = editor;
|
|
44
|
+
$[5] = t0;
|
|
45
|
+
$[6] = t1;
|
|
46
|
+
$[7] = t2;
|
|
47
|
+
$[8] = t3;
|
|
48
|
+
$[9] = t4;
|
|
49
|
+
}
|
|
50
|
+
else {
|
|
51
|
+
t4 = $[9];
|
|
52
|
+
}
|
|
53
|
+
return t4;
|
|
19
54
|
};
|
|
20
55
|
exports.VideoToolbarButton = VideoToolbarButton;
|
package/ui/toolbar/toolbar.js
CHANGED
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Toolbar = void 0;
|
|
7
|
+
const compiler_runtime_1 = require("react/compiler-runtime");
|
|
7
8
|
const translations_1 = require("@uxf/core-react/translations");
|
|
8
9
|
const button_group_1 = require("@uxf/ui/button-group");
|
|
9
10
|
const react_1 = __importDefault(require("react"));
|
|
@@ -31,47 +32,170 @@ const undo_redo_button_group_1 = require("./buttons/undo-redo-button-group");
|
|
|
31
32
|
const video_toolbar_button_1 = require("./buttons/video-toolbar-button");
|
|
32
33
|
const CLASS_NAME = "uxf-wysiwyg__toolbar";
|
|
33
34
|
const BUTTON_GROUP_CLASS_NAME = `${CLASS_NAME}-button-group`;
|
|
34
|
-
const Toolbar =
|
|
35
|
+
const Toolbar = props => {
|
|
35
36
|
var _a;
|
|
36
|
-
|
|
37
|
-
|
|
37
|
+
const $ = (0, compiler_runtime_1.c)(45);
|
|
38
|
+
let customPluginsButtons;
|
|
39
|
+
let leftElement;
|
|
40
|
+
let plateId;
|
|
41
|
+
let restProps;
|
|
42
|
+
let rightElement;
|
|
43
|
+
if ($[0] !== props) {
|
|
44
|
+
({
|
|
45
|
+
customPluginsButtons,
|
|
46
|
+
leftElement,
|
|
47
|
+
plateId,
|
|
48
|
+
rightElement,
|
|
49
|
+
...restProps
|
|
50
|
+
} = props);
|
|
51
|
+
$[0] = props;
|
|
52
|
+
$[1] = customPluginsButtons;
|
|
53
|
+
$[2] = leftElement;
|
|
54
|
+
$[3] = plateId;
|
|
55
|
+
$[4] = restProps;
|
|
56
|
+
$[5] = rightElement;
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
customPluginsButtons = $[1];
|
|
60
|
+
leftElement = $[2];
|
|
61
|
+
plateId = $[3];
|
|
62
|
+
restProps = $[4];
|
|
63
|
+
rightElement = $[5];
|
|
64
|
+
}
|
|
38
65
|
const editor = (0, hooks_1.useUxfPlateEditorState)(props.plateId);
|
|
39
66
|
const t = (0, translations_1.useUxfTranslation)();
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
67
|
+
const t0 = `${CLASS_NAME} ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`;
|
|
68
|
+
let t1;
|
|
69
|
+
if ($[6] !== editor || $[7] !== plateId || $[8] !== t) {
|
|
70
|
+
t1 = (0, utils_1.isSomeOfPluginsEnabled)(editor, constants_1.KEYS_HEADING) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-headings` },
|
|
71
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h1", plateId: plateId, pluginKey: constants_1.ELEMENT_H1, tooltipText: t("uxf-wysiwyg:plugins.headings.h1.tooltip") }),
|
|
72
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h2", plateId: plateId, pluginKey: constants_1.ELEMENT_H2, tooltipText: t("uxf-wysiwyg:plugins.headings.h2.tooltip") }),
|
|
73
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h3", plateId: plateId, pluginKey: constants_1.ELEMENT_H3, tooltipText: t("uxf-wysiwyg:plugins.headings.h3.tooltip") }),
|
|
74
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h4", plateId: plateId, pluginKey: constants_1.ELEMENT_H4, tooltipText: t("uxf-wysiwyg:plugins.headings.h4.tooltip") }),
|
|
75
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h5", plateId: plateId, pluginKey: constants_1.ELEMENT_H5, tooltipText: t("uxf-wysiwyg:plugins.headings.h5.tooltip") }),
|
|
76
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "h6", plateId: plateId, pluginKey: constants_1.ELEMENT_H6, tooltipText: t("uxf-wysiwyg:plugins.headings.h6.tooltip") }));
|
|
77
|
+
$[6] = editor;
|
|
78
|
+
$[7] = plateId;
|
|
79
|
+
$[8] = t;
|
|
80
|
+
$[9] = t1;
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
t1 = $[9];
|
|
84
|
+
}
|
|
85
|
+
let t2;
|
|
86
|
+
if ($[10] !== editor || $[11] !== plateId || $[12] !== t) {
|
|
87
|
+
t2 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_4.BOLD_PLUGIN_KEY, types_6.ITALIC_PLUGIN_KEY, types_7.UNDER_LINE_PLUGIN_KEY, types_5.CODE_PLUGIN_KEY, types_2.HIGHLIGHT_PLUGIN_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-marks` },
|
|
88
|
+
react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "bold", iconSize: 12, plateId: plateId, pluginKey: types_4.BOLD_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.bold.tooltip") }),
|
|
89
|
+
react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "italic", iconSize: 12, plateId: plateId, pluginKey: types_6.ITALIC_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.italic.tooltip") }),
|
|
90
|
+
react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "underline", iconSize: 14, plateId: plateId, pluginKey: types_7.UNDER_LINE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.underline.tooltip") }),
|
|
91
|
+
react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "code-simple", plateId: plateId, pluginKey: types_5.CODE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.code.tooltip") }),
|
|
92
|
+
react_1.default.createElement(mark_toolbar_button_1.MarkToolbarButton, { iconName: "highlighter-line", iconSize: 19, plateId: plateId, pluginKey: types_2.HIGHLIGHT_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.formatting.highlight.tooltip") }));
|
|
93
|
+
$[10] = editor;
|
|
94
|
+
$[11] = plateId;
|
|
95
|
+
$[12] = t;
|
|
96
|
+
$[13] = t2;
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
t2 = $[13];
|
|
100
|
+
}
|
|
101
|
+
let t3;
|
|
102
|
+
if ($[14] !== editor || $[15] !== plateId || $[16] !== t) {
|
|
103
|
+
t3 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_1.BLOCKQUOTE_PLUGIN_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-blocks` },
|
|
104
|
+
react_1.default.createElement(element_toolbar_button_1.ElementToolbarButton, { iconName: "block-quote", plateId: plateId, pluginKey: types_1.BLOCKQUOTE_PLUGIN_KEY, tooltipText: t("uxf-wysiwyg:plugins.blocks.quote.tooltip") }));
|
|
105
|
+
$[14] = editor;
|
|
106
|
+
$[15] = plateId;
|
|
107
|
+
$[16] = t;
|
|
108
|
+
$[17] = t3;
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
t3 = $[17];
|
|
112
|
+
}
|
|
113
|
+
let t4;
|
|
114
|
+
if ($[18] !== editor || $[19] !== plateId || $[20] !== t) {
|
|
115
|
+
t4 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_3.LIST_UNORDERED_TYPE, constants_3.LIST_ORDERED_TYPE]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-lists` },
|
|
116
|
+
react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ul", plateId: plateId, pluginKey: constants_3.LIST_UNORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ul.tooltip") }),
|
|
117
|
+
react_1.default.createElement(list_toolbar_button_1.ListToolbarButton, { iconName: "ol", plateId: plateId, pluginKey: constants_3.LIST_ORDERED_TYPE, tooltipText: t("uxf-wysiwyg:plugins.lists.ol.tooltip") }));
|
|
118
|
+
$[18] = editor;
|
|
119
|
+
$[19] = plateId;
|
|
120
|
+
$[20] = t;
|
|
121
|
+
$[21] = t4;
|
|
122
|
+
}
|
|
123
|
+
else {
|
|
124
|
+
t4 = $[21];
|
|
125
|
+
}
|
|
126
|
+
let t5;
|
|
127
|
+
if ($[22] !== editor || $[23] !== plateId) {
|
|
128
|
+
t5 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [constants_2.ELEMENT_LINK, button_1.PLUGIN_BUTTON_KEY]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-clickables` },
|
|
129
|
+
react_1.default.createElement(link_toolbar_button_1.LinkToolbarButton, { plateId: plateId }),
|
|
130
|
+
react_1.default.createElement(button_toolbar_button_1.ButtonToolbarButton, { plateId: plateId }));
|
|
131
|
+
$[22] = editor;
|
|
132
|
+
$[23] = plateId;
|
|
133
|
+
$[24] = t5;
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
t5 = $[24];
|
|
137
|
+
}
|
|
138
|
+
let t6;
|
|
139
|
+
if ($[25] !== editor || $[26] !== plateId) {
|
|
140
|
+
t6 = (0, utils_1.isSomeOfPluginsEnabled)(editor, [types_3.IMAGE_PLUGIN_KEY, create_video_plugin_1.ELEMENT_VIDEO_EMBED]) && react_1.default.createElement(button_group_1.ButtonGroup, { className: `${BUTTON_GROUP_CLASS_NAME} ${BUTTON_GROUP_CLASS_NAME}-media` },
|
|
141
|
+
react_1.default.createElement(image_toolbar_button_1.ImageToolbarButton, { plateId: plateId }),
|
|
142
|
+
react_1.default.createElement(video_toolbar_button_1.VideoToolbarButton, { plateId: plateId }));
|
|
143
|
+
$[25] = editor;
|
|
144
|
+
$[26] = plateId;
|
|
145
|
+
$[27] = t6;
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
t6 = $[27];
|
|
149
|
+
}
|
|
150
|
+
let t7;
|
|
151
|
+
if ($[28] !== plateId) {
|
|
152
|
+
t7 = react_1.default.createElement(undo_redo_button_group_1.UndoRedoButtonGroup, { plateId: plateId });
|
|
153
|
+
$[28] = plateId;
|
|
154
|
+
$[29] = t7;
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
t7 = $[29];
|
|
158
|
+
}
|
|
159
|
+
let t8;
|
|
160
|
+
if ($[30] !== customPluginsButtons || $[31] !== t1 || $[32] !== t2 || $[33] !== t3 || $[34] !== t4 || $[35] !== t5 || $[36] !== t6 || $[37] !== t7) {
|
|
161
|
+
t8 = react_1.default.createElement("div", { className: `${CLASS_NAME}-buttons` },
|
|
162
|
+
t1,
|
|
163
|
+
t2,
|
|
164
|
+
t3,
|
|
165
|
+
t4,
|
|
166
|
+
t5,
|
|
167
|
+
t6,
|
|
73
168
|
customPluginsButtons,
|
|
74
|
-
|
|
75
|
-
|
|
169
|
+
t7);
|
|
170
|
+
$[30] = customPluginsButtons;
|
|
171
|
+
$[31] = t1;
|
|
172
|
+
$[32] = t2;
|
|
173
|
+
$[33] = t3;
|
|
174
|
+
$[34] = t4;
|
|
175
|
+
$[35] = t5;
|
|
176
|
+
$[36] = t6;
|
|
177
|
+
$[37] = t7;
|
|
178
|
+
$[38] = t8;
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
t8 = $[38];
|
|
182
|
+
}
|
|
183
|
+
let t9;
|
|
184
|
+
if ($[39] !== leftElement || $[40] !== restProps || $[41] !== rightElement || $[42] !== t0 || $[43] !== t8) {
|
|
185
|
+
t9 = react_1.default.createElement("div", { ...restProps, className: t0 },
|
|
186
|
+
leftElement,
|
|
187
|
+
t8,
|
|
188
|
+
rightElement);
|
|
189
|
+
$[39] = leftElement;
|
|
190
|
+
$[40] = restProps;
|
|
191
|
+
$[41] = rightElement;
|
|
192
|
+
$[42] = t0;
|
|
193
|
+
$[43] = t8;
|
|
194
|
+
$[44] = t9;
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
t9 = $[44];
|
|
198
|
+
}
|
|
199
|
+
return t9;
|
|
76
200
|
};
|
|
77
201
|
exports.Toolbar = Toolbar;
|