-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtooltip.js
More file actions
102 lines (91 loc) · 2.64 KB
/
tooltip.js
File metadata and controls
102 lines (91 loc) · 2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { __ } from "@wordpress/i18n";
import { registerFormatType, toggleFormat, applyFormat, getActiveFormats } from "@wordpress/rich-text";
import { BlockControls, __experimentalLinkControl as LinkControl } from "@wordpress/block-editor";
import { Popover, ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { trash } from "@wordpress/icons";
import { useState, useEffect } from "@wordpress/element";
import { useSelect } from "@wordpress/data"; // pour les querry
const formatName = "homegrade-format/tooltip";
const Edit = (props) => {
const { isActive, value, onChange } = props;
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [popoverText, setPopoverText] = useState("");
const [pendingDefinition, setPendingDefinition] = useState(false);
const activeFormat = getActiveFormats(props.value).filter((format) => format.type === formatName)[0];
const post = useSelect((select) => {
if (activeFormat && activeFormat.attributes.definitionId) {
return select("core").getEntityRecord("postType", "vocabulaire", 940);
}
});
if (post && pendingDefinition) {
onChange(
applyFormat(value, {
type: formatName,
attributes: {
dataTooltip: post.acf.definition,
definitionId: activeFormat.attributes.definitionId,
},
})
);
setPendingDefinition(false);
}
function removeFormat() {
setIsPopoverOpen(false);
onChange(
toggleFormat(value, {
type: formatName,
})
);
}
function setFormat(postDatas) {
setPendingDefinition(true);
setIsPopoverOpen(false);
onChange(
applyFormat(value, {
type: formatName,
attributes: {
definitionId: postDatas.id.toString(),
},
})
);
}
return (
<>
<BlockControls>
{isPopoverOpen && (
<Popover
onClose={() => setIsPopoverOpen(false)}
className='popover_tooltip_field'>
<LinkControl
suggestionsQuery={{
type: "post",
subtype: "vocabulaire",
}}
onChange={(postDatas) => setFormat(postDatas)}
/>
</Popover>
)}
<ToolbarGroup>
<ToolbarButton
isActive={isActive}
icon={!isActive ? "admin-comments" : trash}
label={!isActive ? "Add tooltip" : "Delete tooltip"}
onClick={() => {
!isActive ? setIsPopoverOpen(true) : removeFormat();
}}
/>
</ToolbarGroup>
</BlockControls>
</>
);
};
registerFormatType(formatName, {
title: __("Tooltip", "homegrade-format"),
tagName: "span",
attributes: {
definitionId: "data-definition-id",
dataTooltip: "data-tooltip",
},
className: "tooltip-word",
edit: Edit,
});