@flozy/editor 1.5.1 → 1.5.3
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +14 -3
- package/dist/Editor/Editor.css +144 -14
- package/dist/Editor/Elements/AppHeader/AppHeader.js +16 -11
- package/dist/Editor/Elements/Button/EditorButton.js +16 -7
- package/dist/Editor/Elements/Embed/Embed.js +13 -10
- package/dist/Editor/Elements/Grid/Grid.js +15 -2
- package/dist/Editor/Elements/Grid/GridItem.js +14 -2
- package/dist/Editor/Elements/Table/TableSelector.js +6 -4
- package/dist/Editor/Toolbar/FormatTools/TextSize.js +73 -0
- package/dist/Editor/Toolbar/FormatTools/index.js +2 -1
- package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +23 -9
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +152 -42
- package/dist/Editor/Toolbar/PopupTool/index.js +35 -34
- package/dist/Editor/Toolbar/Toolbar.js +6 -1
- package/dist/Editor/Toolbar/toolbarGroups.js +9 -9
- package/dist/Editor/assets/svg/addGridItem.js +49 -0
- package/dist/Editor/common/ColorPickerButton.js +3 -3
- package/dist/Editor/common/StyleBuilder/embedImageStyle.js +4 -4
- package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +32 -15
- package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +48 -34
- package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +90 -115
- package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +93 -101
- package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +24 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +49 -20
- package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +9 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +23 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +52 -0
- package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +33 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +16 -17
- package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -5
- package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +12 -6
- package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +28 -23
- package/dist/Editor/common/StyleBuilder/gridStyle.js +0 -6
- package/dist/Editor/common/StyleBuilder/index.js +70 -44
- package/dist/Editor/common/Uploader.js +51 -14
- package/dist/Editor/common/iconslist.js +409 -0
- package/package.json +1 -1
@@ -70,6 +70,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
70
70
|
const [isInteracted, setIsInteracted] = useState(false);
|
71
71
|
const [deboundedValue] = useDebounce(value, 500);
|
72
72
|
const [fullScreen, setFullScreen] = useState(false);
|
73
|
+
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
|
74
|
+
console.log(isDrawerOpen);
|
73
75
|
const [viewport, setViewport] = useState({
|
74
76
|
w: null,
|
75
77
|
h: null
|
@@ -203,11 +205,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
203
205
|
setIsInteracted(true);
|
204
206
|
}
|
205
207
|
};
|
208
|
+
const onDrawerOpen = status => {
|
209
|
+
setIsDrawerOpen(status);
|
210
|
+
};
|
206
211
|
const isReadOnly = readOnly === "readonly";
|
207
212
|
const customProps = {
|
208
213
|
...(otherProps || {}),
|
209
214
|
readOnly: isReadOnly,
|
210
|
-
page_id: id
|
215
|
+
page_id: id,
|
216
|
+
onDrawerOpen: onDrawerOpen
|
211
217
|
};
|
212
218
|
const renderElement = useCallback(props => {
|
213
219
|
return /*#__PURE__*/_jsx(Element, {
|
@@ -349,9 +355,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
349
355
|
paddingBottom: `${bannerSpacing?.bottom}px`,
|
350
356
|
width: viewport.w ? `${viewport.w}px` : "100%",
|
351
357
|
height: viewport.h ? `${viewport.h}px` : "auto",
|
352
|
-
alignSelf: "center"
|
358
|
+
alignSelf: "center",
|
359
|
+
// scale: isDrawerOpen ? "0.75" : "1",
|
360
|
+
transformOrigin: "left top",
|
361
|
+
transition: "all 0.3s"
|
353
362
|
},
|
354
|
-
children: [/*#__PURE__*/_jsx(PopupTool, {
|
363
|
+
children: [/*#__PURE__*/_jsx(PopupTool, {
|
364
|
+
onDrawerOpen: onDrawerOpen
|
365
|
+
}), /*#__PURE__*/_jsx(Editable, {
|
355
366
|
className: "innert-editor-textbox",
|
356
367
|
readOnly: isReadOnly,
|
357
368
|
placeholder: "Write something",
|
package/dist/Editor/Editor.css
CHANGED
@@ -110,11 +110,11 @@ blockquote {
|
|
110
110
|
}
|
111
111
|
|
112
112
|
.grid-container-toolbar {
|
113
|
-
right: -
|
113
|
+
right: -40px;
|
114
114
|
}
|
115
115
|
|
116
116
|
.grid-item-toolbar {
|
117
|
-
left: -
|
117
|
+
left: -40px;
|
118
118
|
}
|
119
119
|
|
120
120
|
.element-toolbar {
|
@@ -127,15 +127,17 @@ blockquote {
|
|
127
127
|
.grid-container-toolbar button,
|
128
128
|
.grid-item-toolbar button,
|
129
129
|
.element-toolbar button {
|
130
|
-
background-color: #
|
131
|
-
|
132
|
-
border: 1px solid transparent;
|
130
|
+
background-color: #fff;
|
131
|
+
border: 1px solid rgb(37, 99, 235, 0.23);
|
133
132
|
font-size: 12px;
|
134
133
|
border-radius: 0px;
|
135
134
|
margin-bottom: 0px;
|
136
135
|
width: 24px;
|
137
136
|
height: 24px;
|
138
|
-
padding:
|
137
|
+
padding: 16px;
|
138
|
+
margin-bottom: 4px;
|
139
|
+
color: #64748B;
|
140
|
+
border-radius: 50%;
|
139
141
|
}
|
140
142
|
.grid-container-toolbar button:hover,
|
141
143
|
.grid-item-toolbar button:hover,
|
@@ -212,7 +214,7 @@ blockquote {
|
|
212
214
|
}
|
213
215
|
|
214
216
|
.close-popupbtn {
|
215
|
-
background-color: #
|
217
|
+
background-color: #F8FAFC !important;
|
216
218
|
border-radius: 4px !important;
|
217
219
|
width: 24px;
|
218
220
|
height: 24px;
|
@@ -225,7 +227,7 @@ blockquote {
|
|
225
227
|
|
226
228
|
.popupTitle {
|
227
229
|
font-size: 16px !important;
|
228
|
-
font-weight:
|
230
|
+
font-weight: 700 !important;
|
229
231
|
font-family: Inter, sans-serif;
|
230
232
|
text-transform: uppercase;
|
231
233
|
}
|
@@ -520,16 +522,45 @@ blockquote {
|
|
520
522
|
|
521
523
|
.element-root .element-selector {
|
522
524
|
position: absolute;
|
523
|
-
width: calc(100%
|
524
|
-
height: calc(100%
|
525
|
-
border:
|
525
|
+
width: calc(100%);
|
526
|
+
height: calc(100%);
|
527
|
+
border: 2px solid #2563EB;
|
526
528
|
display: none;
|
527
529
|
pointer-events: none;
|
528
|
-
top:
|
529
|
-
left:
|
530
|
+
top: 0px;
|
531
|
+
left: 0px;
|
530
532
|
z-index: 100;
|
531
533
|
}
|
532
534
|
|
535
|
+
.element-selector .element-selector-dots {
|
536
|
+
position: absolute;
|
537
|
+
width: 10px;
|
538
|
+
height: 10px;
|
539
|
+
border: 2px solid #2563EB;
|
540
|
+
background-color: #2563EB;
|
541
|
+
}
|
542
|
+
|
543
|
+
.element-selector-dots.tl {
|
544
|
+
left: -5px;
|
545
|
+
top: -5px;
|
546
|
+
border: 2px solid #2563EB;
|
547
|
+
}
|
548
|
+
.element-selector-dots.tr {
|
549
|
+
right: -5px;
|
550
|
+
top: -5px;
|
551
|
+
border: 2px solid #2563EB;
|
552
|
+
}
|
553
|
+
.element-selector-dots.bl {
|
554
|
+
left: -5px;
|
555
|
+
bottom: -5px;
|
556
|
+
border: 2px solid #2563EB;
|
557
|
+
}
|
558
|
+
.element-selector-dots.br {
|
559
|
+
right: -5px;
|
560
|
+
bottom: -5px;
|
561
|
+
border: 2px solid #2563EB;
|
562
|
+
}
|
563
|
+
|
533
564
|
.element-selector.selected {
|
534
565
|
display: block;
|
535
566
|
}
|
@@ -571,4 +602,103 @@ blockquote {
|
|
571
602
|
|
572
603
|
.dragging.active_drag .grid-c-wrpr {
|
573
604
|
opacity: 0.15;
|
574
|
-
}
|
605
|
+
}
|
606
|
+
|
607
|
+
.optionePopupHeader {
|
608
|
+
border-bottom: 1px solid #DCE4EC;
|
609
|
+
}
|
610
|
+
|
611
|
+
.dialogComp .MuiInputBase-input {
|
612
|
+
border-radius: 8px;
|
613
|
+
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05);
|
614
|
+
font-size: 12px;
|
615
|
+
font-weight: 500;
|
616
|
+
}
|
617
|
+
.dialogComp .MuiOutlinedInput-notchedOutline {
|
618
|
+
border: 1px solid #ECECEC;
|
619
|
+
}
|
620
|
+
.iconRadioButton .MuiRadio-root {
|
621
|
+
visibility: hidden;
|
622
|
+
width: 0px;
|
623
|
+
padding: 6px;
|
624
|
+
}
|
625
|
+
.iconRadioButton .MuiTypography-root {
|
626
|
+
width: 32px;
|
627
|
+
height: 32px;
|
628
|
+
display: flex;
|
629
|
+
align-items: center;
|
630
|
+
justify-content: center
|
631
|
+
}
|
632
|
+
|
633
|
+
.iconRadioButton .MuiFormControlLabel-root.active .fillPath {
|
634
|
+
fill: #2684ff;
|
635
|
+
}
|
636
|
+
.iconRadioButton .MuiFormControlLabel-root.active .fillStroke {
|
637
|
+
stroke: #2684ff;
|
638
|
+
}
|
639
|
+
.iconRadioButton .Mui-checked ~ .MuiTypography-root .fillStroke {
|
640
|
+
stroke: #2684ff;
|
641
|
+
}
|
642
|
+
.selctedBtnIcon {
|
643
|
+
border: 1px solid #ECECEC;
|
644
|
+
border-radius: 4px;
|
645
|
+
height: 35px;
|
646
|
+
width: 35px;
|
647
|
+
display: flex;
|
648
|
+
align-items: center;
|
649
|
+
justify-content: center
|
650
|
+
}
|
651
|
+
.borderInput {
|
652
|
+
text-align: center;
|
653
|
+
}
|
654
|
+
.borderInput:focus-visible {
|
655
|
+
outline: none !important;
|
656
|
+
}
|
657
|
+
|
658
|
+
.uploadImageSection {
|
659
|
+
position: absolute;
|
660
|
+
transform: translate(-50%, -50%);
|
661
|
+
left: 50%;
|
662
|
+
top: 50%;
|
663
|
+
}
|
664
|
+
.uploadImageSection .removeImageText {
|
665
|
+
visibility: hidden;
|
666
|
+
opacity: 0;
|
667
|
+
transition: all 0.5s;
|
668
|
+
}
|
669
|
+
.uploadImageSection:hover .removeImageText {
|
670
|
+
visibility: visible;
|
671
|
+
opacity: 1;
|
672
|
+
}
|
673
|
+
.uploadImageText, .removeImageText {
|
674
|
+
border: 2px dashed #fff;
|
675
|
+
border-radius: 8px;
|
676
|
+
color: #fff;
|
677
|
+
padding: 2px 8px;
|
678
|
+
background-color: #00000090;
|
679
|
+
font-size: 13px;
|
680
|
+
font-weight: 600;
|
681
|
+
cursor: pointer;
|
682
|
+
display: flex;
|
683
|
+
align-items: center;
|
684
|
+
}
|
685
|
+
|
686
|
+
.textFontArrows {
|
687
|
+
display: flex;
|
688
|
+
flex-direction: column;
|
689
|
+
align-items: center;
|
690
|
+
margin-left: 5px;
|
691
|
+
}
|
692
|
+
|
693
|
+
.textFontArrows svg {
|
694
|
+
width: 12px;
|
695
|
+
height: 12px;
|
696
|
+
}
|
697
|
+
.textFontArrows .MuiIconButton-root {
|
698
|
+
padding: 2px;
|
699
|
+
}
|
700
|
+
|
701
|
+
.tools-drawer .MuiTypography-root {
|
702
|
+
color: #000000;
|
703
|
+
font-weight: bold !important;
|
704
|
+
}
|
@@ -72,7 +72,7 @@ function AppHeader(props) {
|
|
72
72
|
className: "element-toolbar",
|
73
73
|
contentEditable: false,
|
74
74
|
style: {
|
75
|
-
top: "-
|
75
|
+
top: "-40px",
|
76
76
|
right: "50px"
|
77
77
|
},
|
78
78
|
children: [/*#__PURE__*/_jsx(Tooltip, {
|
@@ -81,6 +81,9 @@ function AppHeader(props) {
|
|
81
81
|
children: /*#__PURE__*/_jsx(IconButton, {
|
82
82
|
size: "small",
|
83
83
|
onClick: onSettings,
|
84
|
+
style: {
|
85
|
+
marginRight: "4px"
|
86
|
+
},
|
84
87
|
children: /*#__PURE__*/_jsx(SettingsIcon, {})
|
85
88
|
})
|
86
89
|
}), /*#__PURE__*/_jsx(Tooltip, {
|
@@ -114,17 +117,19 @@ function AppHeader(props) {
|
|
114
117
|
setOpenSettings(false);
|
115
118
|
};
|
116
119
|
const handleFocus = e => {
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
120
|
+
if (!customProps?.readOnly) {
|
121
|
+
e.preventDefault();
|
122
|
+
try {
|
123
|
+
const [[, gridItemPath]] = Editor.nodes(editor, {
|
124
|
+
at: path,
|
125
|
+
match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
|
126
|
+
});
|
127
|
+
if (gridItemPath) {
|
128
|
+
Transforms.select(editor, gridItemPath);
|
129
|
+
}
|
130
|
+
} catch (err) {
|
131
|
+
console.log(err);
|
125
132
|
}
|
126
|
-
} catch (err) {
|
127
|
-
console.log(err);
|
128
133
|
}
|
129
134
|
};
|
130
135
|
|
@@ -88,7 +88,6 @@ const EditorButton = props => {
|
|
88
88
|
setAnchorEl(null);
|
89
89
|
};
|
90
90
|
const onMenuClick = val => () => {
|
91
|
-
console.log(val, url);
|
92
91
|
switch (val) {
|
93
92
|
case "open":
|
94
93
|
const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
|
@@ -121,12 +120,6 @@ const EditorButton = props => {
|
|
121
120
|
const onClose = () => {
|
122
121
|
setEdit(false);
|
123
122
|
};
|
124
|
-
const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
|
125
|
-
borderImageSource: borderColor,
|
126
|
-
borderImageSlice: 1
|
127
|
-
} : {
|
128
|
-
borderColor: borderColor || "none"
|
129
|
-
};
|
130
123
|
return /*#__PURE__*/_jsxs("div", {
|
131
124
|
className: "editor-btn-wrapper",
|
132
125
|
...attributes,
|
@@ -175,6 +168,22 @@ const EditorButton = props => {
|
|
175
168
|
paddingLeft: "4px",
|
176
169
|
paddingRight: "4px"
|
177
170
|
}
|
171
|
+
}), !readOnly && /*#__PURE__*/_jsxs("div", {
|
172
|
+
className: `element-selector ${anchorEl ? "selected" : ""}`,
|
173
|
+
contentEditable: false,
|
174
|
+
children: [/*#__PURE__*/_jsx("div", {
|
175
|
+
className: "element-selector-dots tl",
|
176
|
+
children: " "
|
177
|
+
}), /*#__PURE__*/_jsx("div", {
|
178
|
+
className: "element-selector-dots tr",
|
179
|
+
children: " "
|
180
|
+
}), /*#__PURE__*/_jsx("div", {
|
181
|
+
className: "element-selector-dots bl",
|
182
|
+
children: " "
|
183
|
+
}), /*#__PURE__*/_jsx("div", {
|
184
|
+
className: "element-selector-dots br",
|
185
|
+
children: " "
|
186
|
+
})]
|
178
187
|
})]
|
179
188
|
})
|
180
189
|
}), /*#__PURE__*/_jsx("div", {
|
@@ -128,25 +128,28 @@ const Embed = ({
|
|
128
128
|
},
|
129
129
|
children: /*#__PURE__*/_jsxs(Grid, {
|
130
130
|
container: true,
|
131
|
-
children: [/*#__PURE__*/_jsx(
|
131
|
+
children: [/*#__PURE__*/_jsx(Uploader, {
|
132
|
+
value: formData,
|
133
|
+
data: {
|
134
|
+
key: "url"
|
135
|
+
},
|
136
|
+
customProps: customProps,
|
137
|
+
onUploaded: onUploaded,
|
138
|
+
disableUpload: format === "video"
|
139
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
132
140
|
item: true,
|
133
141
|
xs: 12,
|
142
|
+
style: {
|
143
|
+
paddingTop: "12px"
|
144
|
+
},
|
134
145
|
children: /*#__PURE__*/_jsx(TextField, {
|
135
146
|
name: "url",
|
136
|
-
placeholder: "
|
147
|
+
placeholder: "Add image url here",
|
137
148
|
size: "small",
|
138
149
|
fullWidth: true,
|
139
150
|
onChange: handleChange,
|
140
151
|
value: imageURL || ""
|
141
152
|
})
|
142
|
-
}), /*#__PURE__*/_jsx(Uploader, {
|
143
|
-
value: formData,
|
144
|
-
data: {
|
145
|
-
key: "url"
|
146
|
-
},
|
147
|
-
customProps: customProps,
|
148
|
-
onUploaded: onUploaded,
|
149
|
-
disableUpload: format === "video"
|
150
153
|
})]
|
151
154
|
})
|
152
155
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
@@ -11,6 +11,7 @@ import CompressIcon from "@mui/icons-material/Compress";
|
|
11
11
|
import { insertGrid } from "../../utils/grid";
|
12
12
|
import useDragAndDrop from "../../common/useDragAndDrop";
|
13
13
|
import useResize from "../../utils/customHooks/useResize";
|
14
|
+
// import { AddGridItemIcon } from "../../common/iconslist";
|
14
15
|
import { jsx as _jsx } from "react/jsx-runtime";
|
15
16
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
16
17
|
const Grid = props => {
|
@@ -244,10 +245,22 @@ const Grid = props => {
|
|
244
245
|
backgroundRepeat: "no-repeat",
|
245
246
|
backgroundSize: "cover"
|
246
247
|
}
|
247
|
-
}), dndElements, !readOnly && /*#__PURE__*/
|
248
|
+
}), dndElements, !readOnly && /*#__PURE__*/_jsxs("div", {
|
248
249
|
className: `element-selector ${selected ? "selected" : ""}`,
|
249
250
|
contentEditable: false,
|
250
|
-
children: /*#__PURE__*/_jsx(
|
251
|
+
children: [/*#__PURE__*/_jsx("div", {
|
252
|
+
className: "element-selector-dots tl",
|
253
|
+
children: " "
|
254
|
+
}), /*#__PURE__*/_jsx("div", {
|
255
|
+
className: "element-selector-dots tr",
|
256
|
+
children: " "
|
257
|
+
}), /*#__PURE__*/_jsx("div", {
|
258
|
+
className: "element-selector-dots bl",
|
259
|
+
children: " "
|
260
|
+
}), /*#__PURE__*/_jsx("div", {
|
261
|
+
className: "element-selector-dots br",
|
262
|
+
children: " "
|
263
|
+
}), /*#__PURE__*/_jsx(GridToolBar, {})]
|
251
264
|
}), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
|
252
265
|
element: element,
|
253
266
|
onSave: onSave,
|
@@ -116,10 +116,22 @@ const GridItem = props => {
|
|
116
116
|
background: `${bgColorHover || bgColor || "transparent"}`
|
117
117
|
}
|
118
118
|
},
|
119
|
-
children: [!readOnly && /*#__PURE__*/
|
119
|
+
children: [!readOnly && /*#__PURE__*/_jsxs("div", {
|
120
120
|
className: `element-selector ${selected ? "selected" : ""}`,
|
121
121
|
contentEditable: false,
|
122
|
-
children: /*#__PURE__*/_jsx(
|
122
|
+
children: [/*#__PURE__*/_jsx("div", {
|
123
|
+
className: "element-selector-dots tl",
|
124
|
+
children: " "
|
125
|
+
}), /*#__PURE__*/_jsx("div", {
|
126
|
+
className: "element-selector-dots tr",
|
127
|
+
children: " "
|
128
|
+
}), /*#__PURE__*/_jsx("div", {
|
129
|
+
className: "element-selector-dots bl",
|
130
|
+
children: " "
|
131
|
+
}), /*#__PURE__*/_jsx("div", {
|
132
|
+
className: "element-selector-dots br",
|
133
|
+
children: " "
|
134
|
+
}), /*#__PURE__*/_jsx(GridItemToolbar, {})]
|
123
135
|
}), /*#__PURE__*/_jsx(Box, {
|
124
136
|
className: "gi-inner-cw",
|
125
137
|
component: "div",
|
@@ -107,9 +107,10 @@ const TableSelector = ({
|
|
107
107
|
},
|
108
108
|
children: /*#__PURE__*/_jsx(Typography, {
|
109
109
|
variant: "body1",
|
110
|
-
color: "
|
110
|
+
color: "primary",
|
111
111
|
sx: {
|
112
|
-
fontSize: "14px"
|
112
|
+
fontSize: "14px",
|
113
|
+
fontWeight: 500
|
113
114
|
},
|
114
115
|
children: "No.of Rows"
|
115
116
|
})
|
@@ -133,9 +134,10 @@ const TableSelector = ({
|
|
133
134
|
},
|
134
135
|
children: /*#__PURE__*/_jsx(Typography, {
|
135
136
|
variant: "body1",
|
136
|
-
color: "
|
137
|
+
color: "primary",
|
137
138
|
sx: {
|
138
|
-
fontSize: "14px"
|
139
|
+
fontSize: "14px",
|
140
|
+
fontWeight: 500
|
139
141
|
},
|
140
142
|
children: "No.of Columns"
|
141
143
|
})
|
@@ -0,0 +1,73 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { TextField, IconButton } from "@mui/material";
|
3
|
+
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
|
4
|
+
import { sizeMap } from "../../utils/font.js";
|
5
|
+
import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
8
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
|
+
const TextSize = ({
|
10
|
+
editor,
|
11
|
+
format
|
12
|
+
}) => {
|
13
|
+
const value = activeMark(editor, format);
|
14
|
+
const onChangeSize = e => {
|
15
|
+
let inc = parseInt(e.target.value) || 8;
|
16
|
+
inc = inc > 200 ? 200 : inc;
|
17
|
+
addMarkData(editor, {
|
18
|
+
format,
|
19
|
+
value: `${inc || 8}px`
|
20
|
+
});
|
21
|
+
};
|
22
|
+
const getSizeVal = () => {
|
23
|
+
try {
|
24
|
+
const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
|
25
|
+
return parseInt(size);
|
26
|
+
} catch (err) {
|
27
|
+
return "";
|
28
|
+
}
|
29
|
+
};
|
30
|
+
const combinedOldVal = getSizeVal();
|
31
|
+
const onIncreaseSize = () => {
|
32
|
+
let inc = combinedOldVal || 0 + 1;
|
33
|
+
inc = inc > 200 ? 200 : inc;
|
34
|
+
addMarkData(editor, {
|
35
|
+
format,
|
36
|
+
value: `${inc}px`
|
37
|
+
});
|
38
|
+
};
|
39
|
+
const onDecreaseSize = () => {
|
40
|
+
addMarkData(editor, {
|
41
|
+
format,
|
42
|
+
value: `${combinedOldVal - 1 || 0}px`
|
43
|
+
});
|
44
|
+
};
|
45
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
46
|
+
children: /*#__PURE__*/_jsx(TextField, {
|
47
|
+
value: combinedOldVal,
|
48
|
+
onChange: onChangeSize,
|
49
|
+
size: "small",
|
50
|
+
inputProps: {
|
51
|
+
style: {
|
52
|
+
width: "30px",
|
53
|
+
textAlign: "center"
|
54
|
+
}
|
55
|
+
},
|
56
|
+
InputProps: {
|
57
|
+
endAdornment: /*#__PURE__*/_jsxs("div", {
|
58
|
+
className: "textFontArrows",
|
59
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
60
|
+
onClick: onIncreaseSize,
|
61
|
+
size: "small",
|
62
|
+
children: /*#__PURE__*/_jsx(TextPlusIcon, {})
|
63
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
64
|
+
onClick: onDecreaseSize,
|
65
|
+
size: "small",
|
66
|
+
children: /*#__PURE__*/_jsx(TextMinusIcon, {})
|
67
|
+
})]
|
68
|
+
})
|
69
|
+
}
|
70
|
+
})
|
71
|
+
});
|
72
|
+
};
|
73
|
+
export default TextSize;
|
@@ -3,4 +3,5 @@ import Dropdown from "./Dropdown";
|
|
3
3
|
import MarkButton from "./MarkButton";
|
4
4
|
import Autocomplete from "./Autocomplete";
|
5
5
|
import Text from "./Text";
|
6
|
-
|
6
|
+
import TextSize from "./TextSize";
|
7
|
+
export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize };
|
@@ -4,29 +4,43 @@ const usePopupStyle = () => ({
|
|
4
4
|
zIndex: 999
|
5
5
|
},
|
6
6
|
textFormatWrapper: {
|
7
|
-
padding: "0px
|
8
|
-
width: "350px"
|
7
|
+
padding: "0px 16px 16px 16px",
|
8
|
+
width: "350px",
|
9
|
+
maxheight: "300px",
|
10
|
+
overflow: "auto",
|
11
|
+
marginBottom: "12px",
|
12
|
+
"& .textSettingHeader": {
|
13
|
+
borderBottom: "1px solid #DCE4EC",
|
14
|
+
padding: "8px 0px 5px",
|
15
|
+
marginBottom: "20px"
|
16
|
+
},
|
17
|
+
"& .MuiOutlinedInput-notchedOutline": {
|
18
|
+
border: "1px solid #ECECEC"
|
19
|
+
},
|
20
|
+
"& .MuiOutlinedInput-root": {
|
21
|
+
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
22
|
+
}
|
9
23
|
},
|
10
24
|
textFormatLabel: {
|
11
25
|
display: "flex",
|
12
26
|
alignItems: "center",
|
13
27
|
fontWeight: 600,
|
14
|
-
fontSize: "
|
28
|
+
fontSize: "16px",
|
15
29
|
lineHeight: "25px",
|
16
|
-
marginTop: "
|
17
|
-
marginBottom: "8px"
|
18
|
-
color: "rgba(169, 169, 169, 1)"
|
30
|
+
marginTop: "12px",
|
31
|
+
marginBottom: "8px"
|
19
32
|
},
|
20
33
|
textFormatField: {
|
21
|
-
marginBottom: "
|
34
|
+
marginBottom: "16px"
|
22
35
|
},
|
23
36
|
textFormatFieldBorder: {
|
24
37
|
display: "flex",
|
25
38
|
alignItems: "center",
|
26
39
|
marginBottom: "8px",
|
27
|
-
border: "1px solid
|
40
|
+
border: "1px solid #ECECEC",
|
28
41
|
padding: "0px 8px",
|
29
|
-
borderRadius: "
|
42
|
+
borderRadius: "8px",
|
43
|
+
boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
|
30
44
|
},
|
31
45
|
textFormatCG: {
|
32
46
|
marginBottom: "8px"
|