@webiny/lexical-editor 5.41.4-beta.4 → 5.41.4-beta.6
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.
|
@@ -1,2 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export
|
|
2
|
+
export interface FontSize {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
value: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const FONT_SIZES_FALLBACK: FontSize[];
|
|
8
|
+
interface FontSizeActionProps {
|
|
9
|
+
fontSizes?: FontSize[];
|
|
10
|
+
}
|
|
11
|
+
export declare const FontSizeAction: (({ fontSizes }: FontSizeActionProps) => React.JSX.Element) & {
|
|
12
|
+
FONT_SIZES_FALLBACK: FontSize[];
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.FontSizeAction = void 0;
|
|
8
|
+
exports.FontSizeAction = exports.FONT_SIZES_FALLBACK = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -15,7 +15,19 @@ var _lexical = require("lexical");
|
|
|
15
15
|
var _DropDown = require("../../ui/DropDown");
|
|
16
16
|
var _useCurrentSelection = require("../../hooks/useCurrentSelection");
|
|
17
17
|
var _hooks = require("../../hooks");
|
|
18
|
-
var
|
|
18
|
+
var FONT_SIZES_FALLBACK = exports.FONT_SIZES_FALLBACK = ["8px", "9px", "10px", "11px", "12px", "14px", "15px", "16px", "18px", "21px", "24px", "30px", "36px", "48px", "60px", "72px", "96px"].map(function (size) {
|
|
19
|
+
return {
|
|
20
|
+
id: size,
|
|
21
|
+
name: size,
|
|
22
|
+
value: size,
|
|
23
|
+
default: size === "15px"
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
var emptyOption = {
|
|
27
|
+
value: "",
|
|
28
|
+
name: "Font Size",
|
|
29
|
+
id: "empty"
|
|
30
|
+
};
|
|
19
31
|
function dropDownActiveClass(active) {
|
|
20
32
|
if (active) {
|
|
21
33
|
return "active dropdown-item-active";
|
|
@@ -25,35 +37,40 @@ function dropDownActiveClass(active) {
|
|
|
25
37
|
function FontSizeDropDown(props) {
|
|
26
38
|
var editor = props.editor,
|
|
27
39
|
value = props.value,
|
|
40
|
+
fontSizes = props.fontSizes,
|
|
28
41
|
_props$disabled = props.disabled,
|
|
29
42
|
disabled = _props$disabled === void 0 ? false : _props$disabled;
|
|
30
43
|
var handleClick = (0, _react.useCallback)(function (option) {
|
|
31
44
|
editor.update(function () {
|
|
32
45
|
var selection = (0, _lexical.$getSelection)();
|
|
33
46
|
if ((0, _lexical.$isRangeSelection)(selection)) {
|
|
34
|
-
(0, _selection.$patchStyleText)(selection, (0, _defineProperty2.default)({}, "font-size", option));
|
|
47
|
+
(0, _selection.$patchStyleText)(selection, (0, _defineProperty2.default)({}, "font-size", option.value));
|
|
35
48
|
}
|
|
36
49
|
});
|
|
37
50
|
}, [editor]);
|
|
51
|
+
var selectedOption = fontSizes.find(function (opt) {
|
|
52
|
+
return opt.value === value;
|
|
53
|
+
}) ?? emptyOption;
|
|
38
54
|
return /*#__PURE__*/_react.default.createElement(_DropDown.DropDown, {
|
|
39
55
|
disabled: disabled,
|
|
40
56
|
buttonClassName: "toolbar-item font-size",
|
|
41
|
-
buttonLabel:
|
|
57
|
+
buttonLabel: selectedOption.name,
|
|
42
58
|
buttonAriaLabel: "Formatting options for font size"
|
|
43
|
-
},
|
|
59
|
+
}, fontSizes.map(function (option) {
|
|
44
60
|
return /*#__PURE__*/_react.default.createElement(_DropDown.DropDownItem, {
|
|
45
|
-
className: "item fontsize-item ".concat(dropDownActiveClass(value === option)),
|
|
61
|
+
className: "item fontsize-item ".concat(dropDownActiveClass(value === option.id)),
|
|
46
62
|
onClick: function onClick() {
|
|
47
63
|
return handleClick(option);
|
|
48
64
|
},
|
|
49
|
-
key: option
|
|
65
|
+
key: option.id
|
|
50
66
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
51
67
|
className: "text"
|
|
52
|
-
}, option));
|
|
68
|
+
}, option.name));
|
|
53
69
|
}));
|
|
54
70
|
}
|
|
55
|
-
var
|
|
56
|
-
var
|
|
71
|
+
var FontSize = function FontSize(_ref) {
|
|
72
|
+
var _ref$fontSizes = _ref.fontSizes,
|
|
73
|
+
fontSizes = _ref$fontSizes === void 0 ? FONT_SIZES_FALLBACK : _ref$fontSizes;
|
|
57
74
|
var _useRichTextEditor = (0, _hooks.useRichTextEditor)(),
|
|
58
75
|
editor = _useRichTextEditor.editor;
|
|
59
76
|
var _useState = (0, _react.useState)(function () {
|
|
@@ -62,15 +79,15 @@ var FontSizeAction = exports.FontSizeAction = function FontSizeAction() {
|
|
|
62
79
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
63
80
|
isEditable = _useState2[0],
|
|
64
81
|
setIsEditable = _useState2[1];
|
|
65
|
-
var fontSize = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (
|
|
66
|
-
var rangeSelection =
|
|
82
|
+
var fontSize = (0, _useCurrentSelection.useDeriveValueFromSelection)(function (_ref2) {
|
|
83
|
+
var rangeSelection = _ref2.rangeSelection;
|
|
67
84
|
if (!rangeSelection) {
|
|
68
|
-
return
|
|
85
|
+
return undefined;
|
|
69
86
|
}
|
|
70
87
|
try {
|
|
71
|
-
return (0, _selection.$getSelectionStyleValueForProperty)(rangeSelection, "font-size"
|
|
88
|
+
return (0, _selection.$getSelectionStyleValueForProperty)(rangeSelection, "font-size");
|
|
72
89
|
} catch (_unused) {
|
|
73
|
-
return
|
|
90
|
+
return undefined;
|
|
74
91
|
}
|
|
75
92
|
});
|
|
76
93
|
(0, _react.useEffect)(function () {
|
|
@@ -81,8 +98,12 @@ var FontSizeAction = exports.FontSizeAction = function FontSizeAction() {
|
|
|
81
98
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FontSizeDropDown, {
|
|
82
99
|
disabled: !isEditable,
|
|
83
100
|
value: fontSize,
|
|
84
|
-
editor: editor
|
|
101
|
+
editor: editor,
|
|
102
|
+
fontSizes: fontSizes
|
|
85
103
|
}));
|
|
86
104
|
};
|
|
105
|
+
var FontSizeAction = exports.FontSizeAction = Object.assign(FontSize, {
|
|
106
|
+
FONT_SIZES_FALLBACK: FONT_SIZES_FALLBACK
|
|
107
|
+
});
|
|
87
108
|
|
|
88
109
|
//# sourceMappingURL=FontSizeAction.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_selection","_utils","_lexical","_DropDown","_useCurrentSelection","_hooks","FONT_SIZES_FALLBACK","exports","map","size","id","name","value","default","emptyOption","dropDownActiveClass","active","FontSizeDropDown","props","editor","fontSizes","_props$disabled","disabled","handleClick","useCallback","option","update","selection","$getSelection","$isRangeSelection","$patchStyleText","_defineProperty2","selectedOption","find","opt","createElement","DropDown","buttonClassName","buttonLabel","buttonAriaLabel","DropDownItem","className","concat","onClick","key","FontSize","_ref","_ref$fontSizes","_useRichTextEditor","useRichTextEditor","_useState","useState","isEditable","_useState2","_slicedToArray2","setIsEditable","fontSize","useDeriveValueFromSelection","_ref2","rangeSelection","undefined","$getSelectionStyleValueForProperty","_unused","useEffect","mergeRegister","registerEditableListener","editable","Fragment","FontSizeAction","Object","assign"],"sources":["FontSizeAction.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { $getSelectionStyleValueForProperty, $patchStyleText } from \"@lexical/selection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport { $getSelection, $isRangeSelection, LexicalEditor } from \"lexical\";\nimport { DropDown, DropDownItem } from \"~/ui/DropDown\";\nimport { useDeriveValueFromSelection } from \"~/hooks/useCurrentSelection\";\nimport { useRichTextEditor } from \"~/hooks\";\n\nexport interface FontSize {\n id: string;\n name: string;\n value: string;\n}\n\nexport const FONT_SIZES_FALLBACK: FontSize[] = [\n \"8px\",\n \"9px\",\n \"10px\",\n \"11px\",\n \"12px\",\n \"14px\",\n \"15px\",\n \"16px\",\n \"18px\",\n \"21px\",\n \"24px\",\n \"30px\",\n \"36px\",\n \"48px\",\n \"60px\",\n \"72px\",\n \"96px\"\n].map(size => ({\n id: size,\n name: size,\n value: size,\n default: size === \"15px\"\n}));\n\nconst emptyOption: FontSize = {\n value: \"\",\n name: \"Font Size\",\n id: \"empty\"\n};\n\nfunction dropDownActiveClass(active: boolean) {\n if (active) {\n return \"active dropdown-item-active\";\n }\n return \"\";\n}\n\ninterface FontSizeDropDownProps {\n fontSizes: FontSize[];\n editor: LexicalEditor;\n value: string | undefined;\n disabled?: boolean;\n}\n\nfunction FontSizeDropDown(props: FontSizeDropDownProps): JSX.Element {\n const { editor, value, fontSizes, disabled = false } = props;\n\n const handleClick = useCallback(\n (option: FontSize) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n $patchStyleText(selection, {\n [\"font-size\"]: option.value\n });\n }\n });\n },\n [editor]\n );\n\n const selectedOption = fontSizes.find(opt => opt.value === value) ?? emptyOption;\n\n return (\n <DropDown\n disabled={disabled}\n buttonClassName=\"toolbar-item font-size\"\n buttonLabel={selectedOption.name}\n buttonAriaLabel={\"Formatting options for font size\"}\n >\n {fontSizes.map(option => (\n <DropDownItem\n className={`item fontsize-item ${dropDownActiveClass(value === option.id)}`}\n onClick={() => handleClick(option)}\n key={option.id}\n >\n <span className=\"text\">{option.name}</span>\n </DropDownItem>\n ))}\n </DropDown>\n );\n}\n\ninterface FontSizeActionProps {\n fontSizes?: FontSize[];\n}\n\nconst FontSize = ({ fontSizes = FONT_SIZES_FALLBACK }: FontSizeActionProps) => {\n const { editor } = useRichTextEditor();\n const [isEditable, setIsEditable] = useState(() => editor.isEditable());\n const fontSize = useDeriveValueFromSelection(({ rangeSelection }) => {\n if (!rangeSelection) {\n return undefined;\n }\n try {\n return $getSelectionStyleValueForProperty(rangeSelection, \"font-size\");\n } catch {\n return undefined;\n }\n });\n\n useEffect(() => {\n return mergeRegister(\n editor.registerEditableListener(editable => {\n setIsEditable(editable);\n })\n );\n }, [editor]);\n\n return (\n <>\n <FontSizeDropDown\n disabled={!isEditable}\n value={fontSize}\n editor={editor}\n fontSizes={fontSizes}\n />\n </>\n );\n};\n\nexport const FontSizeAction = Object.assign(FontSize, { FONT_SIZES_FALLBACK });\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webiny/lexical-editor",
|
|
3
|
-
"version": "5.41.4-beta.
|
|
3
|
+
"version": "5.41.4-beta.6",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/webiny/webiny-js.git"
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
"@lexical/selection": "0.16.1",
|
|
16
16
|
"@lexical/text": "0.16.1",
|
|
17
17
|
"@lexical/utils": "0.16.1",
|
|
18
|
-
"@webiny/lexical-nodes": "5.41.4-beta.
|
|
19
|
-
"@webiny/lexical-theme": "5.41.4-beta.
|
|
20
|
-
"@webiny/react-composition": "5.41.4-beta.
|
|
21
|
-
"@webiny/react-properties": "5.41.4-beta.
|
|
18
|
+
"@webiny/lexical-nodes": "5.41.4-beta.6",
|
|
19
|
+
"@webiny/lexical-theme": "5.41.4-beta.6",
|
|
20
|
+
"@webiny/react-composition": "5.41.4-beta.6",
|
|
21
|
+
"@webiny/react-properties": "5.41.4-beta.6",
|
|
22
22
|
"emotion": "10.0.27",
|
|
23
23
|
"lexical": "0.16.1",
|
|
24
24
|
"lodash": "4.17.21",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react-dom": "18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@webiny/cli": "5.41.4-beta.
|
|
30
|
-
"@webiny/project-utils": "5.41.4-beta.
|
|
29
|
+
"@webiny/cli": "5.41.4-beta.6",
|
|
30
|
+
"@webiny/project-utils": "5.41.4-beta.6"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"build": "yarn webiny run build",
|
|
38
38
|
"watch": "yarn webiny run watch"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "94922b33af59db5afe75127bb07443ce7f1448c4"
|
|
41
41
|
}
|