a tool for shared writing and social publishing
converted block option buttons to toolbar buttons so that they can benefti from having tooltips
+98
-91
+98
-91
components/Blocks/BlockOptions.tsx
+98
-91
components/Blocks/BlockOptions.tsx
···
16
16
import { useEntitySetContext } from "components/EntitySetProvider";
17
17
import { v7 } from "uuid";
18
18
import { Input } from "components/Input";
19
+
import { ToolbarButton } from "components/Toolbar";
20
+
import * as Tooltip from "@radix-ui/react-tooltip";
19
21
20
22
type Props = {
21
23
parent: string;
···
36
38
: focusedElement?.parent;
37
39
38
40
return (
39
-
<div
40
-
className={`blockOptionsWrapper sm:group-hover/text:block group-focus-within/text:block hidden
41
+
<Tooltip.Provider>
42
+
<div
43
+
className={`blockOptionsWrapper sm:group-hover/text:block group-focus-within/text:block hidden
41
44
absolute right-2 sm:right-3 ${props.first ? "top-2 sm:top-3" : "top-1"}`}
42
-
>
43
-
<div className="blockOptionsContent flex gap-1 items-center">
44
-
<label
45
-
className="blockOptionsImage hover:cursor-pointer flex place-items-center"
46
-
onMouseDown={(e) => e.preventDefault()}
47
-
>
48
-
<div className="text-tertiary hover:text-accent ">
49
-
<BlockImageSmall />
50
-
</div>
51
-
<div className="hidden">
52
-
<input
53
-
type="file"
54
-
accept="image/*"
55
-
onChange={async (e) => {
56
-
let file = e.currentTarget.files?.[0];
57
-
if (!file || !rep) return;
58
-
if (props.factID)
59
-
await rep.mutate.retractFact({ factID: props.factID });
60
-
let entity = props.entityID;
61
-
if (!entity) {
62
-
entity = v7();
63
-
await rep?.mutate.addBlock({
64
-
parent: props.parent,
65
-
permission_set: entity_set.set,
66
-
type: "text",
67
-
position: generateKeyBetween(
68
-
props.position,
69
-
props.nextPosition,
70
-
),
71
-
newEntityID: entity,
72
-
});
73
-
}
74
-
await rep.mutate.assertFact({
75
-
entity,
45
+
>
46
+
<div className="blockOptionsContent flex gap-1 items-center">
47
+
<ToolbarButton
48
+
tooltipContent="Add an Image"
49
+
className="hover:bg-transparent hover:text-accent text-tertiary"
50
+
>
51
+
<label onMouseDown={(e) => e.preventDefault()}>
52
+
<BlockImageSmall className="hover:text-accent" />
53
+
<div className="hidden">
54
+
<input
55
+
type="file"
56
+
accept="image/*"
57
+
onChange={async (e) => {
58
+
let file = e.currentTarget.files?.[0];
59
+
if (!file || !rep) return;
60
+
if (props.factID)
61
+
await rep.mutate.retractFact({ factID: props.factID });
62
+
let entity = props.entityID;
63
+
if (!entity) {
64
+
entity = v7();
65
+
await rep?.mutate.addBlock({
66
+
parent: props.parent,
67
+
permission_set: entity_set.set,
68
+
type: "text",
69
+
position: generateKeyBetween(
70
+
props.position,
71
+
props.nextPosition,
72
+
),
73
+
newEntityID: entity,
74
+
});
75
+
}
76
+
await rep.mutate.assertFact({
77
+
entity,
78
+
attribute: "block/type",
79
+
data: { type: "block-type-union", value: "image" },
80
+
});
81
+
await addImage(file, rep, {
82
+
entityID: entity,
83
+
attribute: "block/image",
84
+
});
85
+
}}
86
+
/>
87
+
</div>
88
+
</label>
89
+
</ToolbarButton>
90
+
91
+
<BlockLinkButton {...props} />
92
+
93
+
<ToolbarButton
94
+
tooltipContent="Add a card"
95
+
className="hover:bg-transparent hover:text-accent text-tertiary"
96
+
onClick={async () => {
97
+
if (!props.entityID) {
98
+
let entity = v7();
99
+
100
+
await rep?.mutate.addBlock({
101
+
permission_set: entity_set.set,
102
+
parent: props.parent,
103
+
type: "card",
104
+
position: generateKeyBetween(
105
+
props.position,
106
+
props.nextPosition,
107
+
),
108
+
newEntityID: entity,
109
+
});
110
+
useUIState.getState().openCard(props.parent, entity);
111
+
if (rep) focusCard(entity, rep);
112
+
} else {
113
+
await rep?.mutate.assertFact({
114
+
entity: props.entityID,
76
115
attribute: "block/type",
77
-
data: { type: "block-type-union", value: "image" },
116
+
data: { type: "block-type-union", value: "card" },
78
117
});
79
-
await addImage(file, rep, {
80
-
entityID: entity,
81
-
attribute: "block/image",
118
+
let entityID = v7();
119
+
await rep?.mutate.addBlock({
120
+
parent: props.entityID,
121
+
position: "a0",
122
+
newEntityID: entityID,
123
+
type: "text",
124
+
permission_set: entity_set.set,
82
125
});
83
-
}}
84
-
/>
85
-
</div>
86
-
</label>
87
-
<BlockLinkButton {...props} />
88
-
89
-
<button
90
-
className="blockOptionsCard text-tertiary hover:text-accent"
91
-
onMouseDown={(e) => e.preventDefault()}
92
-
onClick={async () => {
93
-
if (!props.entityID) {
94
-
let entity = v7();
95
-
96
-
await rep?.mutate.addBlock({
97
-
permission_set: entity_set.set,
98
-
parent: props.parent,
99
-
type: "card",
100
-
position: generateKeyBetween(
101
-
props.position,
102
-
props.nextPosition,
103
-
),
104
-
newEntityID: entity,
105
-
});
106
-
useUIState.getState().openCard(props.parent, entity);
107
-
if (rep) focusCard(entity, rep);
108
-
} else {
109
-
await rep?.mutate.assertFact({
110
-
entity: props.entityID,
111
-
attribute: "block/type",
112
-
data: { type: "block-type-union", value: "card" },
113
-
});
114
-
let entityID = v7();
115
-
await rep?.mutate.addBlock({
116
-
parent: props.entityID,
117
-
position: "a0",
118
-
newEntityID: entityID,
119
-
type: "text",
120
-
permission_set: entity_set.set,
121
-
});
122
-
useUIState.getState().openCard(props.parent, props.entityID);
123
-
if (rep) focusCard(props.entityID, rep, "focusFirstBlock");
124
-
}
125
-
}}
126
-
>
127
-
<BlockCardSmall />
128
-
</button>
126
+
useUIState.getState().openCard(props.parent, props.entityID);
127
+
if (rep) focusCard(props.entityID, rep, "focusFirstBlock");
128
+
}
129
+
}}
130
+
>
131
+
<BlockCardSmall className="hover:text-accent" />
132
+
</ToolbarButton>
133
+
</div>
129
134
</div>
130
-
</div>
135
+
</Tooltip.Provider>
131
136
);
132
137
}
133
138
···
157
162
<div
158
163
className={`max-w-sm flex gap-2 hover:text-accent rounded-md ${linkOpen ? "text-secondary" : " text-tertiary"}`}
159
164
>
160
-
<button
161
-
onMouseDown={(e) => e.preventDefault()}
165
+
<ToolbarButton
166
+
tooltipContent="Add a Link"
167
+
className="hover:bg-transparent hover:text-accent text-tertiary"
162
168
onClick={() => {
163
169
setLinkOpen(!linkOpen);
164
170
}}
165
171
>
166
-
<BlockLinkSmall />
167
-
</button>
172
+
<BlockLinkSmall className="hover:text-accent" />
173
+
</ToolbarButton>
174
+
168
175
{linkOpen && (
169
176
<>
170
177
<Separator />