@flozy/editor 5.8.9 → 5.9.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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useRef, useState } from "react";
|
|
2
2
|
import { Node, Transforms } from "slate";
|
|
3
|
-
import { ReactEditor,
|
|
3
|
+
import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
|
|
4
4
|
import { Box, IconButton, Popper, Tooltip } from "@mui/material";
|
|
5
5
|
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
|
|
6
6
|
import EditIcon from "@mui/icons-material/Edit";
|
|
@@ -11,6 +11,62 @@ import { getLinkType, handleLinkType } from "../../utils/helper";
|
|
|
11
11
|
import LinkSettings from "../../common/LinkSettings";
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
+
const Toolbar = props => {
|
|
15
|
+
const {
|
|
16
|
+
urlPath,
|
|
17
|
+
linkType,
|
|
18
|
+
showInNewTab,
|
|
19
|
+
selected,
|
|
20
|
+
linkRef,
|
|
21
|
+
onEditLink,
|
|
22
|
+
editor
|
|
23
|
+
} = props;
|
|
24
|
+
const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
|
|
25
|
+
const navType = getLinkType(linkType, urlPath);
|
|
26
|
+
const hideOpenLink = navType === "page" || !navType;
|
|
27
|
+
return selected ? /*#__PURE__*/_jsx(Popper, {
|
|
28
|
+
anchorEl: linkRef?.current,
|
|
29
|
+
open: true,
|
|
30
|
+
placement: "top-start",
|
|
31
|
+
className: "hide-popper-on-overlap",
|
|
32
|
+
contentEditable: false,
|
|
33
|
+
style: {
|
|
34
|
+
zIndex: 1
|
|
35
|
+
},
|
|
36
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
|
37
|
+
className: "element-toolbar hr",
|
|
38
|
+
style: {
|
|
39
|
+
width: "150px",
|
|
40
|
+
display: "flex",
|
|
41
|
+
position: "unset"
|
|
42
|
+
},
|
|
43
|
+
component: "div",
|
|
44
|
+
children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
|
|
45
|
+
title: "Open",
|
|
46
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
47
|
+
sx: {
|
|
48
|
+
display: "inline-flex",
|
|
49
|
+
color: "rgba(0, 0, 0, 0.54)"
|
|
50
|
+
},
|
|
51
|
+
...btnProps,
|
|
52
|
+
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
|
53
|
+
})
|
|
54
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
55
|
+
title: "Edit",
|
|
56
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
|
57
|
+
onClick: onEditLink,
|
|
58
|
+
children: /*#__PURE__*/_jsx(EditIcon, {})
|
|
59
|
+
})
|
|
60
|
+
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
61
|
+
title: "Remove",
|
|
62
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
|
63
|
+
onClick: () => removeLink(editor),
|
|
64
|
+
children: /*#__PURE__*/_jsx(LinkOffIcon, {})
|
|
65
|
+
})
|
|
66
|
+
})]
|
|
67
|
+
})
|
|
68
|
+
}) : null;
|
|
69
|
+
};
|
|
14
70
|
const linkStyles = () => ({
|
|
15
71
|
linkBtn: {
|
|
16
72
|
border: "none",
|
|
@@ -40,7 +96,6 @@ const Link = props => {
|
|
|
40
96
|
} = customProps;
|
|
41
97
|
const editor = useSlateStatic();
|
|
42
98
|
const selected = useSelected();
|
|
43
|
-
const focused = useFocused();
|
|
44
99
|
const [showInput, setShowInput] = useState(false);
|
|
45
100
|
const [linkData, setLinkData] = useState({
|
|
46
101
|
name: "",
|
|
@@ -78,53 +133,6 @@ const Link = props => {
|
|
|
78
133
|
const handleClose = () => {
|
|
79
134
|
setShowInput(false);
|
|
80
135
|
};
|
|
81
|
-
const Toolbar = () => {
|
|
82
|
-
const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
|
|
83
|
-
const navType = getLinkType(linkType, urlPath);
|
|
84
|
-
const hideOpenLink = navType === "page" || !navType;
|
|
85
|
-
return selected && focused ? /*#__PURE__*/_jsx(Popper, {
|
|
86
|
-
anchorEl: linkRef?.current,
|
|
87
|
-
open: true,
|
|
88
|
-
placement: "top-start",
|
|
89
|
-
className: "hide-popper-on-overlap",
|
|
90
|
-
contentEditable: false,
|
|
91
|
-
style: {
|
|
92
|
-
zIndex: 1
|
|
93
|
-
},
|
|
94
|
-
children: /*#__PURE__*/_jsxs(Box, {
|
|
95
|
-
className: "element-toolbar hr",
|
|
96
|
-
style: {
|
|
97
|
-
width: "150px",
|
|
98
|
-
display: "flex",
|
|
99
|
-
position: "unset"
|
|
100
|
-
},
|
|
101
|
-
component: "div",
|
|
102
|
-
children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
|
|
103
|
-
title: "Open",
|
|
104
|
-
children: /*#__PURE__*/_jsx(Box, {
|
|
105
|
-
sx: {
|
|
106
|
-
display: "inline-flex",
|
|
107
|
-
color: "rgba(0, 0, 0, 0.54)"
|
|
108
|
-
},
|
|
109
|
-
...btnProps,
|
|
110
|
-
children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
|
|
111
|
-
})
|
|
112
|
-
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
113
|
-
title: "Edit",
|
|
114
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
|
115
|
-
onClick: onEditLink,
|
|
116
|
-
children: /*#__PURE__*/_jsx(EditIcon, {})
|
|
117
|
-
})
|
|
118
|
-
}), /*#__PURE__*/_jsx(Tooltip, {
|
|
119
|
-
title: "Remove",
|
|
120
|
-
children: /*#__PURE__*/_jsx(IconButton, {
|
|
121
|
-
onClick: () => removeLink(editor),
|
|
122
|
-
children: /*#__PURE__*/_jsx(LinkOffIcon, {})
|
|
123
|
-
})
|
|
124
|
-
})]
|
|
125
|
-
})
|
|
126
|
-
}) : null;
|
|
127
|
-
};
|
|
128
136
|
const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
|
|
129
137
|
return /*#__PURE__*/_jsxs("div", {
|
|
130
138
|
className: "link",
|
|
@@ -135,7 +143,15 @@ const Link = props => {
|
|
|
135
143
|
sx: classes.linkBtn,
|
|
136
144
|
...buttonProps,
|
|
137
145
|
children: children
|
|
138
|
-
}), /*#__PURE__*/_jsx(Toolbar, {
|
|
146
|
+
}), /*#__PURE__*/_jsx(Toolbar, {
|
|
147
|
+
urlPath: urlPath,
|
|
148
|
+
linkType: linkType,
|
|
149
|
+
showInNewTab: showInNewTab,
|
|
150
|
+
selected: selected,
|
|
151
|
+
linkRef: linkRef,
|
|
152
|
+
onEditLink: onEditLink,
|
|
153
|
+
editor: editor
|
|
154
|
+
}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
|
|
139
155
|
handleClose: handleClose,
|
|
140
156
|
onSave: ({
|
|
141
157
|
linkType,
|