@flozy/editor 1.4.5 → 1.4.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +4 -0
- package/dist/Editor/Elements/Button/EditorButton.js +9 -5
- package/dist/Editor/Elements/ChipText/ChipText.js +79 -9
- package/dist/Editor/Elements/ChipText/ChipTextButton.js +11 -50
- package/dist/Editor/Elements/Color Picker/ColorPicker.js +25 -85
- package/dist/Editor/Elements/Embed/Embed.css +53 -5
- package/dist/Editor/Elements/Embed/link.js +58 -0
- package/dist/Editor/Elements/Form/Form.js +87 -37
- package/dist/Editor/Elements/Form/FormElements/FormText.js +13 -4
- package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +13 -5
- package/dist/Editor/Elements/Grid/GridItem.js +9 -3
- package/dist/Editor/Elements/InlineIcon/InlineIcon.js +54 -0
- package/dist/Editor/Elements/InlineIcon/InlineIconButton.js +69 -0
- package/dist/Editor/Elements/InlineIcon/InlineIconPopup.js +24 -0
- package/dist/Editor/Elements/Link/Link.js +24 -0
- package/dist/Editor/Toolbar/Toolbar.js +6 -0
- package/dist/Editor/Toolbar/toolbarGroups.js +7 -1
- package/dist/Editor/common/ColorPickerButton.js +12 -2
- package/dist/Editor/common/StyleBuilder/buttonStyle.js +29 -2
- package/dist/Editor/common/StyleBuilder/chipTextStyle.js +24 -0
- package/dist/Editor/common/StyleBuilder/fieldStyle.js +30 -2
- package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +1 -1
- package/dist/Editor/common/StyleBuilder/formButtonStyle.js +5 -0
- package/dist/Editor/common/StyleBuilder/formStyle.js +62 -2
- package/dist/Editor/hooks/withCommon.js +2 -0
- package/dist/Editor/plugins/withLinks.js +1 -1
- package/dist/Editor/utils/SlateUtilityFunctions.js +18 -0
- package/dist/Editor/utils/embed.js +22 -2
- package/dist/Editor/utils/insertChipText.js +1 -1
- package/dist/Editor/utils/insertIconText.js +50 -0
- package/package.json +2 -1
@@ -3,6 +3,8 @@ import { createEditor } from "slate";
|
|
3
3
|
import { Slate, Editable, ReactEditor } from "slate-react";
|
4
4
|
import { DndContext, DragOverlay } from "@dnd-kit/core";
|
5
5
|
import { useDebounce } from "use-debounce";
|
6
|
+
// import { onKeyDown as linkifyOnKeyDown } from '@mercuriya/slate-linkify';
|
7
|
+
|
6
8
|
import Toolbar from "./Toolbar/Toolbar";
|
7
9
|
import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
|
8
10
|
import CodeToText from "./Elements/CodeToText/CodeToText";
|
@@ -242,6 +244,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
242
244
|
event,
|
243
245
|
editor
|
244
246
|
});
|
247
|
+
} else {
|
248
|
+
// linkifyOnKeyDown(event, editor);
|
245
249
|
}
|
246
250
|
}, [chars, editor, target, mentions, setMentions]);
|
247
251
|
const handleDragStart = e => {
|
@@ -32,7 +32,6 @@ const EditorButton = props => {
|
|
32
32
|
bannerSpacing,
|
33
33
|
textColor,
|
34
34
|
url,
|
35
|
-
borderColor,
|
36
35
|
buttonLink,
|
37
36
|
textSize,
|
38
37
|
textAlign,
|
@@ -40,7 +39,10 @@ const EditorButton = props => {
|
|
40
39
|
textColorHover,
|
41
40
|
bgColorHover,
|
42
41
|
buttonIcon,
|
43
|
-
iconPosition
|
42
|
+
iconPosition,
|
43
|
+
borderStyle,
|
44
|
+
borderWidth,
|
45
|
+
borderColor
|
44
46
|
} = element;
|
45
47
|
const {
|
46
48
|
linkType,
|
@@ -119,7 +121,7 @@ const EditorButton = props => {
|
|
119
121
|
const onClose = () => {
|
120
122
|
setEdit(false);
|
121
123
|
};
|
122
|
-
const
|
124
|
+
const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
|
123
125
|
borderImageSource: borderColor,
|
124
126
|
borderImageSlice: 1
|
125
127
|
} : {
|
@@ -142,10 +144,12 @@ const EditorButton = props => {
|
|
142
144
|
component: "button",
|
143
145
|
sx: {
|
144
146
|
background: bgColor || "rgb(30, 75, 122)",
|
145
|
-
borderWidth: "1px",
|
146
147
|
borderBlockStyle: "solid",
|
147
|
-
...
|
148
|
+
// ...borderStyleColor,
|
149
|
+
borderColor: borderColor || "transparent",
|
150
|
+
borderWidth: borderWidth || "1px",
|
148
151
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
152
|
+
borderStyle: borderStyle || "solid",
|
149
153
|
paddingLeft: `${left || 8}px`,
|
150
154
|
paddingRight: `${right || 8}px`,
|
151
155
|
paddingTop: `${top || 8}px`,
|
@@ -1,17 +1,28 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { useState } from "react";
|
2
|
+
import { Transforms } from "slate";
|
3
|
+
import { useSlateStatic, ReactEditor } from "slate-react";
|
4
|
+
import * as fIcons from "@mui/icons-material";
|
5
|
+
import ChipTextPopup from "./ChipTextPopup";
|
2
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
3
8
|
const ChipText = props => {
|
4
9
|
const {
|
5
10
|
attributes,
|
6
|
-
|
7
|
-
|
11
|
+
element,
|
12
|
+
customProps,
|
13
|
+
children
|
8
14
|
} = props;
|
15
|
+
const {
|
16
|
+
readOnly
|
17
|
+
} = customProps;
|
9
18
|
const {
|
10
19
|
bgColor,
|
11
20
|
textColor,
|
12
21
|
bannerSpacing,
|
13
22
|
borderRadius,
|
14
|
-
borderColor
|
23
|
+
borderColor,
|
24
|
+
buttonIcon,
|
25
|
+
textSize
|
15
26
|
} = element;
|
16
27
|
const {
|
17
28
|
left,
|
@@ -25,12 +36,51 @@ const ChipText = props => {
|
|
25
36
|
bottomLeft,
|
26
37
|
bottomRight
|
27
38
|
} = borderRadius || {};
|
28
|
-
|
39
|
+
const BtnIcon = buttonIcon ? fIcons[buttonIcon] : fIcons["Check"];
|
40
|
+
const [openSetttings, setOpenSettings] = useState(false);
|
41
|
+
const editor = useSlateStatic();
|
42
|
+
const path = ReactEditor.findPath(editor, element);
|
43
|
+
const handleStyle = () => {
|
44
|
+
if (!readOnly) {
|
45
|
+
setOpenSettings(true);
|
46
|
+
}
|
47
|
+
};
|
48
|
+
const onClose = () => {
|
49
|
+
setOpenSettings(false);
|
50
|
+
};
|
51
|
+
const onSave = data => {
|
52
|
+
try {
|
53
|
+
const updateData = {
|
54
|
+
...data
|
55
|
+
};
|
56
|
+
delete updateData.children;
|
57
|
+
Transforms.setNodes(editor, {
|
58
|
+
...updateData
|
59
|
+
}, {
|
60
|
+
at: path
|
61
|
+
});
|
62
|
+
onClose();
|
63
|
+
} catch (err) {
|
64
|
+
console.log(err);
|
65
|
+
}
|
66
|
+
};
|
67
|
+
const onDelete = () => {
|
68
|
+
try {
|
69
|
+
Transforms.removeNodes(editor, {
|
70
|
+
at: path
|
71
|
+
});
|
72
|
+
onClose();
|
73
|
+
} catch (err) {
|
74
|
+
console.log(err);
|
75
|
+
}
|
76
|
+
};
|
77
|
+
return /*#__PURE__*/_jsxs("button", {
|
29
78
|
...attributes,
|
30
79
|
className: "editor-chip-text",
|
31
80
|
contentEditable: false,
|
32
81
|
style: {
|
33
|
-
display: "inline",
|
82
|
+
display: "inline-block",
|
83
|
+
verticalAlign: "middle",
|
34
84
|
paddingLeft: `${left}px`,
|
35
85
|
paddingRight: `${right}px`,
|
36
86
|
paddingTop: `${top}px`,
|
@@ -40,10 +90,30 @@ const ChipText = props => {
|
|
40
90
|
background: bgColor || "#CCC",
|
41
91
|
color: textColor
|
42
92
|
},
|
43
|
-
children: /*#__PURE__*/_jsx(
|
44
|
-
|
93
|
+
children: [/*#__PURE__*/_jsx(BtnIcon, {
|
94
|
+
style: {
|
95
|
+
fontSize: textSize || "16px",
|
96
|
+
lineHeight: textSize || "16px",
|
97
|
+
display: "inline-block",
|
98
|
+
verticalAlign: "middle"
|
99
|
+
},
|
100
|
+
onClick: handleStyle
|
101
|
+
}), /*#__PURE__*/_jsx("div", {
|
102
|
+
contentEditable: false,
|
103
|
+
style: {
|
104
|
+
display: "inline-block",
|
105
|
+
verticalAlign: "middle",
|
106
|
+
fontSize: textSize || "16px",
|
107
|
+
width: "0px"
|
108
|
+
},
|
45
109
|
children: children
|
46
|
-
})
|
110
|
+
}), openSetttings !== false ? /*#__PURE__*/_jsx(ChipTextPopup, {
|
111
|
+
element: element || {},
|
112
|
+
onSave: onSave,
|
113
|
+
onClose: onClose,
|
114
|
+
onDelete: onDelete,
|
115
|
+
customProps: customProps
|
116
|
+
}) : null]
|
47
117
|
});
|
48
118
|
};
|
49
119
|
export default ChipText;
|
@@ -1,68 +1,29 @@
|
|
1
|
-
import React
|
2
|
-
import { Editor, Transforms } from "slate";
|
1
|
+
import React from "react";
|
3
2
|
import { IconButton } from "@mui/material";
|
4
3
|
import SmartButtonIcon from "@mui/icons-material/SmartButton";
|
5
|
-
import { insertChipText
|
6
|
-
import ChipTextPopup from "./ChipTextPopup";
|
4
|
+
import { insertChipText } from "../../utils/insertChipText";
|
7
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
6
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
9
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
10
7
|
const ChipTextButton = props => {
|
11
8
|
const {
|
12
|
-
editor
|
13
|
-
customProps
|
9
|
+
editor
|
14
10
|
} = props;
|
15
|
-
const [openSetttings, setOpenSettings] = useState(false);
|
16
11
|
const handleClick = () => {
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
element: parent,
|
21
|
-
path: parentPath
|
22
|
-
});
|
23
|
-
// removeChipText(editor, parentPath);
|
24
|
-
} else {
|
25
|
-
insertChipText(editor, {
|
26
|
-
url: "",
|
27
|
-
showInNewTab: false
|
28
|
-
});
|
29
|
-
}
|
30
|
-
};
|
31
|
-
const onSave = data => {
|
32
|
-
const updateData = {
|
33
|
-
...data
|
34
|
-
};
|
35
|
-
delete updateData.children;
|
36
|
-
Transforms.setNodes(editor, {
|
37
|
-
...updateData
|
38
|
-
}, {
|
39
|
-
at: openSetttings?.path
|
12
|
+
insertChipText(editor, {
|
13
|
+
url: "",
|
14
|
+
showInNewTab: false
|
40
15
|
});
|
41
|
-
onClose();
|
42
|
-
};
|
43
|
-
const onClose = () => {
|
44
|
-
setOpenSettings(false);
|
45
|
-
};
|
46
|
-
const onDelete = () => {
|
47
|
-
removeChipText(editor, openSetttings?.path);
|
48
|
-
onClose();
|
49
16
|
};
|
50
|
-
return /*#__PURE__*/
|
51
|
-
children:
|
52
|
-
title: "
|
17
|
+
return /*#__PURE__*/_jsx(_Fragment, {
|
18
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
19
|
+
title: "Icon",
|
53
20
|
onClick: handleClick,
|
54
21
|
children: /*#__PURE__*/_jsx(SmartButtonIcon, {
|
55
22
|
sx: {
|
56
|
-
fill:
|
23
|
+
fill: "#64748B"
|
57
24
|
}
|
58
25
|
})
|
59
|
-
})
|
60
|
-
element: openSetttings?.element || {},
|
61
|
-
onSave: onSave,
|
62
|
-
onClose: onClose,
|
63
|
-
onDelete: onDelete,
|
64
|
-
customProps: customProps
|
65
|
-
}) : null]
|
26
|
+
})
|
66
27
|
});
|
67
28
|
};
|
68
29
|
export default ChipTextButton;
|
@@ -1,16 +1,14 @@
|
|
1
1
|
import React, { useRef, useState } from "react";
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
3
|
import Button from "../../common/Button";
|
4
|
-
import { colors } from "./defaultColors";
|
5
4
|
import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
|
6
5
|
import { Transforms } from "slate";
|
7
6
|
import usePopup from "../../utils/customHooks/usePopup";
|
8
7
|
import { logo } from "./LogoIcon";
|
9
8
|
import "./ColorPicker.css";
|
10
|
-
import
|
9
|
+
import ColorPickerTool from "react-gcolor-picker";
|
11
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
11
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
13
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
14
12
|
const DEFAULT_COLOR = {
|
15
13
|
color: "#000000",
|
16
14
|
bgcolor: "#FFFFFF"
|
@@ -22,53 +20,31 @@ const ColorPicker = ({
|
|
22
20
|
title
|
23
21
|
}) => {
|
24
22
|
const [selection, setSelection] = useState();
|
25
|
-
const [hexValue, setHexValue] = useState("");
|
26
|
-
const [validHex, setValidHex] = useState();
|
27
23
|
const colorPickerRef = useRef(null);
|
28
24
|
const [showOptions, setShowOptions] = usePopup(colorPickerRef);
|
29
|
-
const
|
30
|
-
const isValideHexThree = new RegExp("^#[0-9A-Za-z]{3}");
|
31
|
-
const changeColor = e => {
|
32
|
-
const clickedColor = e.target.getAttribute("data-value");
|
33
|
-
selection && Transforms.select(editor, selection);
|
34
|
-
selection && ReactEditor.focus(editor);
|
35
|
-
addMarkData(editor, {
|
36
|
-
format,
|
37
|
-
value: clickedColor
|
38
|
-
});
|
39
|
-
setShowOptions(false);
|
40
|
-
};
|
41
|
-
const toggleOption = () => {
|
25
|
+
const toggleOption = e => {
|
42
26
|
setSelection(editor.selection);
|
43
27
|
selection && ReactEditor.focus(editor);
|
44
28
|
setShowOptions(prev => !prev);
|
45
29
|
};
|
46
|
-
const handleFormSubmit =
|
47
|
-
|
48
|
-
if (!validHex) return;
|
30
|
+
const handleFormSubmit = color => {
|
31
|
+
if (!color) return;
|
49
32
|
selection && Transforms.select(editor, selection);
|
50
33
|
addMarkData(editor, {
|
51
34
|
format,
|
52
|
-
value:
|
35
|
+
value: color
|
53
36
|
});
|
54
37
|
setShowOptions(false);
|
55
|
-
setValidHex("");
|
56
|
-
setHexValue("");
|
57
38
|
selection && ReactEditor.focus(editor);
|
58
39
|
};
|
59
|
-
const handleHexChange = e => {
|
60
|
-
e.preventDefault();
|
61
|
-
const newHex = e.target.value;
|
62
|
-
setValidHex(isValideHexSix.test(newHex) || isValideHexThree.test(newHex));
|
63
|
-
setHexValue(newHex);
|
64
|
-
};
|
65
40
|
const activeColor = showOptions ? DEFAULT_COLOR[format] : activeMark(editor, format);
|
66
41
|
return /*#__PURE__*/_jsxs("div", {
|
67
|
-
className: "
|
42
|
+
className: "",
|
68
43
|
ref: colorPickerRef,
|
69
44
|
style: {
|
70
45
|
display: "flex",
|
71
|
-
alignItems: "center"
|
46
|
+
alignItems: "center",
|
47
|
+
position: "relative"
|
72
48
|
},
|
73
49
|
children: [showHex ? /*#__PURE__*/_jsx("div", {
|
74
50
|
style: {
|
@@ -84,59 +60,23 @@ const ColorPicker = ({
|
|
84
60
|
onClick: toggleOption,
|
85
61
|
title: title,
|
86
62
|
children: logo[format](activeColor)
|
87
|
-
}), showOptions && /*#__PURE__*/
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
}
|
105
|
-
}, index);
|
106
|
-
})
|
107
|
-
}), /*#__PURE__*/_jsx("p", {
|
108
|
-
style: {
|
109
|
-
textAlign: "center",
|
110
|
-
opacity: "0.7",
|
111
|
-
width: "100%"
|
112
|
-
},
|
113
|
-
children: "or"
|
114
|
-
}), /*#__PURE__*/_jsxs("form", {
|
115
|
-
onSubmit: handleFormSubmit,
|
116
|
-
children: [/*#__PURE__*/_jsx("div", {
|
117
|
-
className: "hexPreview",
|
118
|
-
style: {
|
119
|
-
background: validHex ? hexValue : "#000000"
|
120
|
-
}
|
121
|
-
}), /*#__PURE__*/_jsx("input", {
|
122
|
-
type: "text",
|
123
|
-
placeholder: "#000000",
|
124
|
-
value: hexValue,
|
125
|
-
onChange: handleHexChange,
|
126
|
-
style: {
|
127
|
-
border: validHex === false ? "1px solid red" : "1px solid lightgray"
|
128
|
-
}
|
129
|
-
}), /*#__PURE__*/_jsx(ButtonBase, {
|
130
|
-
className: "colorSaveBtn",
|
131
|
-
style: {
|
132
|
-
background: validHex ? "#2563EB" : "#64748B",
|
133
|
-
color: "#fff"
|
134
|
-
},
|
135
|
-
type: "submit",
|
136
|
-
children: "Save"
|
137
|
-
})]
|
138
|
-
})]
|
139
|
-
})]
|
63
|
+
}), showOptions && /*#__PURE__*/_jsx("div", {
|
64
|
+
style: {
|
65
|
+
position: "fixed",
|
66
|
+
top: 0,
|
67
|
+
left: 0,
|
68
|
+
right: 0,
|
69
|
+
bottom: 0,
|
70
|
+
margin: "auto",
|
71
|
+
zIndex: 100,
|
72
|
+
width: "300px",
|
73
|
+
height: "300px"
|
74
|
+
},
|
75
|
+
children: /*#__PURE__*/_jsx(ColorPickerTool, {
|
76
|
+
gradient: true,
|
77
|
+
value: activeColor,
|
78
|
+
onChange: handleFormSubmit
|
79
|
+
})
|
140
80
|
})]
|
141
81
|
});
|
142
82
|
};
|
@@ -1,13 +1,16 @@
|
|
1
|
-
.embed{
|
1
|
+
.embed {
|
2
2
|
width: fit-content;
|
3
3
|
position: relative;
|
4
4
|
margin: 0px;
|
5
5
|
}
|
6
|
-
|
6
|
+
|
7
|
+
.embed img,
|
8
|
+
.embed iframe {
|
7
9
|
width: 100%;
|
8
|
-
height:100%;
|
10
|
+
height: 100%;
|
9
11
|
}
|
10
|
-
|
12
|
+
|
13
|
+
.embed button.resize {
|
11
14
|
position: absolute;
|
12
15
|
bottom: 2px;
|
13
16
|
right: 2px;
|
@@ -27,8 +30,53 @@
|
|
27
30
|
|
28
31
|
.image-text {
|
29
32
|
padding: 12px;
|
30
|
-
background-color: rgba(0,0,0,0.5);
|
33
|
+
background-color: rgba(0, 0, 0, 0.5);
|
31
34
|
margin: 0px;
|
32
35
|
color: #FFF;
|
33
36
|
font-weight: bold;
|
37
|
+
}
|
38
|
+
|
39
|
+
.link-embed-wrapper iframe {
|
40
|
+
width: 100%;
|
41
|
+
height: 100%;
|
42
|
+
}
|
43
|
+
|
44
|
+
.link-embed-wrapper {
|
45
|
+
width: 100%;
|
46
|
+
height: 100%;
|
47
|
+
}
|
48
|
+
|
49
|
+
.link-embed-wrapper iframe {
|
50
|
+
aspect-ratio: 16/9;
|
51
|
+
}
|
52
|
+
|
53
|
+
.link-embed-wrapper .deleteButton {
|
54
|
+
background-color: white;
|
55
|
+
/* box-shadow: 0px 0px 8px #ccc; */
|
56
|
+
padding: 5px;
|
57
|
+
width: 26px;
|
58
|
+
height: 26px;
|
59
|
+
}
|
60
|
+
|
61
|
+
.link-embed-wrapper-container {
|
62
|
+
position: relative;
|
63
|
+
display: flex;
|
64
|
+
width: 100%;
|
65
|
+
height: 100%;
|
66
|
+
}
|
67
|
+
|
68
|
+
.link-embed-wrapper-container .docDeleteContainer {
|
69
|
+
display: none;
|
70
|
+
}
|
71
|
+
|
72
|
+
.link-embed-wrapper-hover-container:hover .docDeleteContainer {
|
73
|
+
display: block;
|
74
|
+
position: absolute;
|
75
|
+
top: -16px;
|
76
|
+
right: 0;
|
77
|
+
background-color: white;
|
78
|
+
}
|
79
|
+
|
80
|
+
.link-embed-wrapper-hover-container:hover .link-embed-wrapper {
|
81
|
+
padding-top: 24px;
|
34
82
|
}
|
@@ -0,0 +1,58 @@
|
|
1
|
+
import { Grid, IconButton, Tooltip } from '@mui/material';
|
2
|
+
import React from 'react';
|
3
|
+
import { Transforms } from 'slate';
|
4
|
+
import { ReactEditor, useSlateStatic } from 'slate-react';
|
5
|
+
import DeleteIcon from "@mui/icons-material/Delete";
|
6
|
+
import "./Embed.css";
|
7
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
|
+
const EmbedLink = ({
|
10
|
+
attributes,
|
11
|
+
element,
|
12
|
+
children,
|
13
|
+
customProps: {
|
14
|
+
readOnly
|
15
|
+
}
|
16
|
+
}) => {
|
17
|
+
const {
|
18
|
+
url,
|
19
|
+
width,
|
20
|
+
height
|
21
|
+
} = element;
|
22
|
+
const editor = useSlateStatic();
|
23
|
+
const path = ReactEditor.findPath(editor, element);
|
24
|
+
return /*#__PURE__*/_jsxs("div", {
|
25
|
+
...attributes,
|
26
|
+
className: `link-embed-wrapper-container ${!readOnly ? 'link-embed-wrapper-hover-container' : ''}`,
|
27
|
+
style: {
|
28
|
+
height: height,
|
29
|
+
width: width
|
30
|
+
},
|
31
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
32
|
+
className: "link-embed-wrapper",
|
33
|
+
children: [/*#__PURE__*/_jsx("iframe", {
|
34
|
+
src: url.includes('http') ? url : `//${url}`,
|
35
|
+
frameBorder: "0",
|
36
|
+
title: url
|
37
|
+
}), /*#__PURE__*/_jsx(Grid, {
|
38
|
+
className: "docDeleteContainer",
|
39
|
+
children: /*#__PURE__*/_jsx(Tooltip, {
|
40
|
+
title: "Delete",
|
41
|
+
arrow: true,
|
42
|
+
children: /*#__PURE__*/_jsx(IconButton
|
43
|
+
// className='deleteButton'
|
44
|
+
, {
|
45
|
+
onClick: () => {
|
46
|
+
Transforms.removeNodes(editor, {
|
47
|
+
at: path
|
48
|
+
});
|
49
|
+
ReactEditor.focus(editor);
|
50
|
+
},
|
51
|
+
children: /*#__PURE__*/_jsx(DeleteIcon, {})
|
52
|
+
})
|
53
|
+
})
|
54
|
+
})]
|
55
|
+
}), children]
|
56
|
+
});
|
57
|
+
};
|
58
|
+
export default EmbedLink;
|