a tool for shared writing and social publishing
Toolbar on Desktop and Extras - Added toolbar to focused card on desktop - made the ordered list icon slightly more legible - fixed an issue causing hydration errors when isMobile hook is used
+41
-40
+17
-26
app/test/Card.tsx
+17
-26
app/test/Card.tsx
···
1
1
import React from "react";
2
2
import { ButtonPrimary } from "../../components/Buttons";
3
3
import { TextBlock, ImageBlock, CardBlock, ExternalLinkBlock } from "./Blocks";
4
+
import { useIsMobile, useIsInitialRender } from "src/hooks/isMobile";
5
+
import { TextToolbar } from "./TextToolbar";
4
6
5
7
export const Card = (props: {
6
8
children: React.ReactNode;
···
15
17
cardWidth: number;
16
18
cardHeight: number;
17
19
}) => {
20
+
let isMobile = useIsMobile();
21
+
let isInitialRender = useIsInitialRender();
22
+
23
+
if (isInitialRender) return null;
18
24
return (
19
25
<>
20
26
{/* if the card is the first one in the list, remove this div... can we do with :before? */}
···
36
42
}}
37
43
>
38
44
<CardContent cardHeight={props.cardHeight} />
45
+
46
+
{!isMobile && props.focused ? (
47
+
<div className=" sticky bottom-3 w-fit flex gap-[6px] items-center py-2 px-3 mx-auto bg-bg-card border border-border rounded-full shadow-md">
48
+
<TextToolbar />
49
+
</div>
50
+
) : null}
51
+
{/* {!isMobile && props.focused ? (
52
+
<div className=" sticky bottom-0 w-full flex gap-[6px] px-3 pb-3 pt-1 bg-bg-card border-t border-border">
53
+
<TextToolbar />
54
+
</div>
55
+
) : null} */}
39
56
</div>
40
-
{/* <AddCardButton
41
-
setCards={props.setCards}
42
-
cards={props.cards}
43
-
card={props.card}
44
-
setFocusedCardIndex={props.setFocusedCardIndex}
45
-
index={props.index}
46
-
/>
47
-
{props.index !== 0 && (
48
-
<RemoveCardButton
49
-
setCards={props.setCards}
50
-
cards={props.cards}
51
-
index={props.index}
52
-
/>
53
-
)}
54
-
<div className="flex justify-between">
55
-
<FocusCardButton
56
-
setFocusedCardIndex={props.setFocusedCardIndex}
57
-
index={props.index}
58
-
cardWidth={props.cardWidth}
59
-
/>
60
-
<FocusCardButton
61
-
setFocusedCardIndex={props.setFocusedCardIndex}
62
-
index={props.index}
63
-
cardWidth={props.cardWidth}
64
-
/>
65
-
</div> */}
66
57
</>
67
58
);
68
59
};
+6
-7
app/test/TextToolbar.tsx
+6
-7
app/test/TextToolbar.tsx
···
65
65
let state = useTextState();
66
66
67
67
return (
68
-
<div className="-mt-6 z-10 bg-bg-card px-2 py-2 flex gap-[6px] items-center">
68
+
<>
69
69
{toolbarState === "default" ? (
70
70
<>
71
-
{" "}
72
71
<ToolbarButton onClick={() => {}}>
73
72
<UndoSmall />
74
73
</ToolbarButton>
···
158
157
</ToolbarButton>
159
158
<Separator />
160
159
<input
161
-
className="w-full grow"
160
+
className="w-full grow bg-transparent border-none outline-none "
162
161
placeholder="www.leafl.et"
163
162
value={state.link}
164
163
onChange={(e) => state.setLink(e.target.value)}
···
174
173
) : toolbarState === "block" ? (
175
174
<BlockToolbar onClose={() => setToolbarState("default")} />
176
175
) : null}
177
-
</div>
176
+
</>
178
177
);
179
178
};
180
179
···
182
181
let state = useTextState();
183
182
184
183
return (
185
-
<div className="flex w-full justify-between items-center">
184
+
<div className="flex w-full justify-between items-center gap-4">
186
185
<div className="flex items-center gap-[6px]">
187
186
<ToolbarButton
188
187
className="w-10 flex justify-center"
···
237
236
let state = useTextState();
238
237
239
238
return (
240
-
<div className="flex w-full justify-between items-center">
239
+
<div className="flex w-full justify-between items-center gap-4">
241
240
<div className="flex items-center gap-[6px]">
242
241
<ToolbarButton
243
242
onClick={() => props.onClose()}
···
280
279
281
280
const BlockToolbar = (props: { onClose: () => void }) => {
282
281
return (
283
-
<div className="flex w-full justify-between items-center">
282
+
<div className="flex w-full justify-between items-center gap-4">
284
283
<div className="flex items-center gap-[6px]">
285
284
<ToolbarButton onClick={() => props.onClose()}>
286
285
<BlockSmall />
+10
-4
app/test/page.tsx
+10
-4
app/test/page.tsx
···
1
1
"use client";
2
2
3
-
import { useState } from "react";
3
+
import { useEffect, useState } from "react";
4
4
import useMeasure from "react-use-measure";
5
5
import { PageHeader } from "./Header";
6
6
import { Card } from "./Card";
7
7
import { TextToolbar } from "./TextToolbar";
8
-
import useIsMobile from "src/hooks/isMobile";
8
+
import { useIsMobile, useIsInitialRender } from "src/hooks/isMobile";
9
9
10
10
export type imageArgs = {
11
11
url: string;
···
22
22
repeat: true,
23
23
size: 500,
24
24
});
25
-
25
+
let isFirstRender = useIsInitialRender();
26
26
let isMobile = useIsMobile();
27
27
let isKeyboardUp = true;
28
+
29
+
if (isFirstRender) return null;
28
30
29
31
return (
30
32
<div
···
92
94
/>
93
95
</div>
94
96
)}
95
-
{isMobile && isKeyboardUp && <TextToolbar />}
97
+
{isMobile && isKeyboardUp && (
98
+
<div className="-mt-6 z-10 bg-bg-card px-2 py-2 flex gap-[6px] items-center">
99
+
<TextToolbar />
100
+
</div>
101
+
)}
96
102
</div>
97
103
);
98
104
}
+1
-2
components/Icons.tsx
+1
-2
components/Icons.tsx
···
439
439
viewBox="0 0 24 24"
440
440
fill="none"
441
441
xmlns="http://www.w3.org/2000/svg"
442
-
{...props}
443
442
>
444
443
<path
445
444
fillRule="evenodd"
446
445
clipRule="evenodd"
447
-
d="M3.75171 7.47681V7.97729H5.87085V7.47681L5.33722 7.39868V4.42261L3.74683 4.67163V5.14526L4.20863 5.15259V7.39868L3.75171 7.47681ZM8.32275 5.19995C7.77047 5.19995 7.32275 5.64767 7.32275 6.19995C7.32275 6.75224 7.77047 7.19995 8.32275 7.19995H19.7002C20.2525 7.19995 20.7002 6.75224 20.7002 6.19995C20.7002 5.64767 20.2525 5.19995 19.7002 5.19995H8.32275ZM8.32275 11C7.77047 11 7.32275 11.4477 7.32275 12C7.32275 12.5523 7.77047 13 8.32275 13H19.7002C20.2525 13 20.7002 12.5523 20.7002 12C20.7002 11.4477 20.2525 11 19.7002 11H8.32275ZM7.32275 17.8C7.32275 17.2478 7.77047 16.8 8.32275 16.8H19.7002C20.2525 16.8 20.7002 17.2478 20.7002 17.8C20.7002 18.3523 20.2525 18.8 19.7002 18.8H8.32275C7.77047 18.8 7.32275 18.3523 7.32275 17.8ZM3.37095 13.803V12.997L4.24146 12.2678C4.51489 12.0413 4.71248 11.7611 4.77271 11.6716C4.83293 11.5821 4.89809 11.4638 4.91333 11.386C4.93677 11.2664 4.90877 11.1597 4.84692 11.0784C4.78507 10.997 4.68605 10.9749 4.56236 10.9749C4.47974 10.9749 4.34562 11.0194 4.28052 11.1155C4.24405 11.1693 4.21802 11.2327 4.18443 11.4084L3.32456 11.386L3.31968 11.3713C3.3148 11.1516 3.362 10.953 3.46128 10.7756C3.56219 10.5982 3.70705 10.4574 3.89585 10.3533C4.08465 10.2491 4.30682 10.197 4.56236 10.197C4.81789 10.197 5.0368 10.2418 5.21909 10.3313C5.40301 10.4192 5.5438 10.5437 5.64146 10.7048C5.74074 10.8643 5.79038 11.0515 5.79038 11.2664C5.79038 11.4128 5.76515 11.5479 5.7147 11.6716C5.66587 11.7937 5.58449 11.9247 5.47056 12.0647C5.35825 12.2047 5.2077 12.3739 5.0189 12.5725L4.61987 12.9848L4.62476 12.997H5.21909L5.22886 12.8582H5.87095V13.803H3.37095ZM3.93243 19.509C4.12937 19.5888 4.34421 19.6287 4.57696 19.6287C4.82924 19.6287 5.05385 19.5863 5.25079 19.5017C5.44935 19.4171 5.6056 19.2966 5.71954 19.1404C5.83347 18.9825 5.89043 18.7953 5.89043 18.5789C5.89043 18.3819 5.83428 18.2126 5.72198 18.071C5.6113 17.9294 5.46237 17.8236 5.2752 17.7537C5.46075 17.6641 5.59991 17.5567 5.69268 17.4314C5.78708 17.3044 5.83428 17.1523 5.83428 16.9749C5.83428 16.6558 5.71791 16.4093 5.48516 16.2351C5.25404 16.0593 4.94805 15.9714 4.56719 15.9714C4.33119 15.9714 4.12041 16.0129 3.93487 16.0959C3.74932 16.1773 3.60446 16.2921 3.5003 16.4402C3.39776 16.5883 3.34974 16.76 3.35625 16.9553L3.36114 16.97H4.19121C4.19121 16.9016 4.20749 16.8422 4.24004 16.7917C4.29175 16.6724 4.38582 16.6138 4.5144 16.6138C4.64298 16.6138 4.72136 16.6687 4.78972 16.7452C4.85971 16.8217 4.86938 16.9138 4.86938 17.031C4.86938 17.114 4.85229 17.1873 4.81812 17.2507C4.78394 17.3126 4.73348 17.3614 4.66675 17.3972C4.60164 17.4314 4.52108 17.4485 4.42505 17.4485H4.14483V18.0808H4.40503C4.57593 18.0808 4.67489 18.1239 4.7644 18.2102C4.85392 18.2948 4.89868 18.4039 4.89868 18.5374C4.89868 18.6676 4.86938 18.7717 4.79565 18.8638C4.71427 18.9451 4.61217 18.9731 4.5086 18.9731C4.40503 18.9731 4.27612 18.8638 4.24493 18.7717C4.24012 18.7576 4.23503 18.7436 4.22997 18.7298C4.21036 18.6761 4.19121 18.6237 4.19121 18.5642H3.30254L3.3001 18.5789C3.29522 18.8051 3.35056 18.9963 3.46612 19.1526C3.58168 19.3088 3.73711 19.4277 3.93243 19.509Z"
446
+
d="M3.28318 7.72032V8.31824H5.81487V7.72032L5.17736 7.62699V4.07153L3.27734 4.36904V4.93488L3.82906 4.94363V7.62699L3.28318 7.72032ZM8.32275 5.19482C7.77047 5.19482 7.32275 5.64254 7.32275 6.19482C7.32275 6.74711 7.77047 7.19482 8.32275 7.19482H19.7002C20.2525 7.19482 20.7002 6.74711 20.7002 6.19482C20.7002 5.64254 20.2525 5.19482 19.7002 5.19482H8.32275ZM8.32275 10.9949C7.77047 10.9949 7.32275 11.4426 7.32275 11.9949C7.32275 12.5472 7.77047 12.9949 8.32275 12.9949H19.7002C20.2525 12.9949 20.7002 12.5472 20.7002 11.9949C20.7002 11.4426 20.2525 10.9949 19.7002 10.9949H8.32275ZM7.32275 17.7949C7.32275 17.2426 7.77047 16.7949 8.32275 16.7949H19.7002C20.2525 16.7949 20.7002 17.2426 20.7002 17.7949C20.7002 18.3472 20.2525 18.7949 19.7002 18.7949H8.32275C7.77047 18.7949 7.32275 18.3472 7.32275 17.7949ZM2.82851 14.1488V13.1859L3.86848 12.3148C4.19515 12.0441 4.43121 11.7095 4.50316 11.6025C4.5751 11.4956 4.65295 11.3542 4.67116 11.2613C4.69916 11.1183 4.66571 10.991 4.59182 10.8937C4.51793 10.7965 4.39963 10.7701 4.25186 10.7701C4.15315 10.7701 3.99293 10.8234 3.91515 10.9381C3.87158 11.0024 3.84048 11.0781 3.80035 11.2881L2.77309 11.2613L2.76726 11.2438C2.76142 10.9812 2.81781 10.744 2.93642 10.5321C3.05698 10.3201 3.23004 10.1519 3.4556 10.0275C3.68115 9.90304 3.94657 9.84082 4.25186 9.84082C4.55714 9.84082 4.81867 9.89429 5.03645 10.0012C5.25617 10.1062 5.42437 10.255 5.54104 10.4475C5.65965 10.6381 5.71895 10.8617 5.71895 11.1183C5.71895 11.2933 5.68881 11.4547 5.62854 11.6025C5.5702 11.7483 5.47298 11.9049 5.33687 12.0721C5.2027 12.2393 5.02284 12.4415 4.79728 12.6788L4.32057 13.1713L4.3264 13.1859H5.03645L5.04811 13.02H5.8152V14.1488H2.82851ZM3.49919 19.8366C3.73447 19.9319 3.99114 19.9796 4.2692 19.9796C4.57059 19.9796 4.83892 19.929 5.0742 19.8279C5.31143 19.7268 5.4981 19.5829 5.63421 19.3962C5.77032 19.2076 5.83838 18.984 5.83838 18.7254C5.83838 18.4901 5.7713 18.2879 5.63713 18.1187C5.5049 17.9495 5.32698 17.8232 5.10337 17.7395C5.32504 17.6326 5.49129 17.5043 5.60213 17.3545C5.71491 17.2029 5.7713 17.0211 5.7713 16.8091C5.7713 16.428 5.63227 16.1334 5.35421 15.9254C5.07809 15.7154 4.71253 15.6104 4.25753 15.6104C3.97558 15.6104 3.72377 15.6599 3.5021 15.7591C3.28044 15.8563 3.10738 15.9934 2.98293 16.1704C2.86043 16.3473 2.80307 16.5524 2.81085 16.7858L2.81668 16.8033H3.80836C3.80836 16.7216 3.8278 16.6506 3.86669 16.5904C3.92846 16.4477 4.04085 16.3777 4.19447 16.3777C4.34808 16.3777 4.44172 16.4433 4.52338 16.5347C4.607 16.6261 4.61855 16.7362 4.61855 16.8762C4.61855 16.9754 4.59814 17.0629 4.5573 17.1387C4.51647 17.2126 4.45619 17.2709 4.37647 17.3137C4.29869 17.3545 4.20244 17.375 4.08771 17.375H3.75294V18.1304H4.0638C4.26797 18.1304 4.38619 18.1819 4.49314 18.285C4.60008 18.3861 4.65355 18.5164 4.65355 18.6758C4.65355 18.8314 4.61855 18.9558 4.53047 19.0658C4.43325 19.163 4.31126 19.1964 4.18753 19.1964C4.0638 19.1964 3.9098 19.0658 3.87252 18.9558C3.86679 18.9389 3.8607 18.9222 3.85465 18.9057C3.83123 18.8416 3.80836 18.779 3.80836 18.7079H2.74668L2.74376 18.7254C2.73793 18.9957 2.80404 19.2241 2.9421 19.4108C3.08016 19.5975 3.26585 19.7394 3.49919 19.8366Z"
448
447
fill="currentColor"
449
448
/>
450
449
</svg>
+7
-1
src/hooks/isMobile.ts
+7
-1
src/hooks/isMobile.ts
···
1
1
import { useState, useEffect } from "react";
2
2
3
-
export default function useIsMobile() {
3
+
export function useIsMobile() {
4
4
const { width } = useWindowDimensions();
5
5
return width < 640 || width === 0;
6
+
}
7
+
8
+
export function useIsInitialRender() {
9
+
let [state, setState] = useState(true);
10
+
useEffect(() => setState(false), []);
11
+
return state;
6
12
}
7
13
8
14
function getWindowDimensions() {