a tool for shared writing and social publishing
remove small canvas size
+4
-109
-5
actions/publishToPublication.ts
-5
actions/publishToPublication.ts
···
102
102
$type: "pub.leaflet.pages.canvas" as const,
103
103
id: p.id,
104
104
blocks: p.blocks as PubLeafletPagesCanvas.Block[],
105
-
display: p.display,
106
105
};
107
106
} else {
108
107
return {
···
157
156
| PubLeafletPagesLinearDocument.Block[]
158
157
| PubLeafletPagesCanvas.Block[];
159
158
type: "doc" | "canvas";
160
-
display?: { narrowWidth?: boolean };
161
159
}[] = [];
162
160
163
161
let firstEntity = scan.eav(root_entity, "root/page")?.[0];
···
250
248
251
249
if (pageType?.data.value === "canvas") {
252
250
let canvasBlocks = await canvasBlocksToRecord(page.data.value);
253
-
let narrowWidth = scan.eav(page.data.value, "canvas/narrow-width")?.[0]
254
-
?.data.value;
255
251
pages.push({
256
252
id: page.data.value,
257
253
blocks: canvasBlocks,
258
254
type: "canvas",
259
-
display: narrowWidth ? { narrowWidth: true } : undefined,
260
255
});
261
256
} else {
262
257
let blocks = getBlocksWithTypeLocal(facts, page.data.value);
+2
-17
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+2
-17
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
···
25
25
pageOptions,
26
26
fullPageScroll,
27
27
pages,
28
-
display,
29
28
}: {
30
29
document_uri: string;
31
30
document: PostPageData;
···
40
39
pageOptions?: React.ReactNode;
41
40
fullPageScroll: boolean;
42
41
pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
43
-
display?: { narrowWidth?: boolean };
44
42
}) {
45
43
let hasPageBackground = !!pubRecord.theme?.showPageBackground;
46
44
···
52
50
id={pageId ? `post-page-${pageId}` : "post-page"}
53
51
drawerOpen={false}
54
52
pageOptions={pageOptions}
55
-
canvasNarrow={display?.narrowWidth}
56
53
>
57
54
<CanvasContent
58
55
blocks={blocks}
···
61
58
bskyPostData={bskyPostData}
62
59
pageId={pageId}
63
60
pages={pages}
64
-
narrowWidth={display?.narrowWidth}
65
61
/>
66
62
</PageWrapper>
67
63
);
···
74
70
bskyPostData,
75
71
pageId,
76
72
pages,
77
-
narrowWidth,
78
73
}: {
79
74
blocks: PubLeafletPagesCanvas.Block[];
80
75
did: string;
···
82
77
bskyPostData: AppBskyFeedDefs.PostView[];
83
78
pageId?: string;
84
79
pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
85
-
narrowWidth?: boolean;
86
80
}) {
87
81
let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0;
88
82
89
-
// Calculate the required width based on the furthest positioned element
90
-
let width =
91
-
narrowWidth && blocks.length > 0
92
-
? Math.max(...blocks.map((b) => b.x + b.width)) + 32 // Add padding
93
-
: 1272;
94
-
95
83
return (
96
-
<div
97
-
className={`canvasWrapper h-full ${narrowWidth ? "w-full overflow-auto" : "w-fit overflow-y-scroll"}`}
98
-
>
84
+
<div className="canvasWrapper h-full w-fit overflow-y-scroll">
99
85
<div
100
86
style={{
101
87
minHeight: height + 512,
102
88
contain: "size layout paint",
103
-
width: narrowWidth ? width : undefined,
104
89
}}
105
-
className={`relative h-full ${narrowWidth ? "min-w-full" : "w-[1272px]"}`}
90
+
className="relative h-full w-[1272px]"
106
91
>
107
92
<CanvasBackground />
108
93
{blocks
-1
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
-1
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
-31
components/Canvas.tsx
-31
components/Canvas.tsx
···
44
44
return () => abort.abort();
45
45
});
46
46
47
-
let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data
48
-
.value;
49
-
50
47
return (
51
48
<div
52
49
ref={ref}
···
59
56
>
60
57
<AddCanvasBlockButton entityID={props.entityID} entity_set={entity_set} />
61
58
<CanvasContent {...props} />
62
-
<CanvasWidthHandle entityID={props.entityID} />
63
59
</div>
64
60
);
65
61
}
···
133
129
);
134
130
})}
135
131
</div>
136
-
);
137
-
}
138
-
139
-
function CanvasWidthHandle(props: { entityID: string }) {
140
-
let canvasFocused = useUIState((s) => s.focusedEntity?.entityType === "page");
141
-
let { rep } = useReplicache();
142
-
let narrowWidth = useEntity(props.entityID, "canvas/narrow-width")?.data
143
-
.value;
144
-
return (
145
-
<button
146
-
onClick={() => {
147
-
rep?.mutate.assertFact({
148
-
entity: props.entityID,
149
-
attribute: "canvas/narrow-width",
150
-
data: {
151
-
type: "boolean",
152
-
value: !narrowWidth,
153
-
},
154
-
});
155
-
}}
156
-
className={`resizeHandle
157
-
${narrowWidth ? "cursor-e-resize" : "cursor-w-resize"} shrink-0 z-10
158
-
${canvasFocused ? "sm:block hidden" : "hidden"}
159
-
w-[8px] h-12
160
-
absolute top-1/2 right-0 -translate-y-1/2 translate-x-[3px]
161
-
rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
162
-
/>
163
132
);
164
133
}
165
134
+2
-8
components/Pages/Page.tsx
+2
-8
components/Pages/Page.tsx
···
33
33
return focusedPageID === props.entityID;
34
34
});
35
35
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
36
-
let canvasNarrow = useEntity(props.entityID, "canvas/narrow-width")?.data
37
-
.value;
38
36
let cardBorderHidden = useCardBorderHidden(props.entityID);
39
37
let drawerOpen = useDrawerOpen(props.entityID);
40
38
return (
···
53
51
isFocused={isFocused}
54
52
fullPageScroll={props.fullPageScroll}
55
53
pageType={pageType}
56
-
canvasNarrow={canvasNarrow}
57
54
pageOptions={
58
55
<PageOptions
59
56
entityID={props.entityID}
···
83
80
isFocused?: boolean;
84
81
onClickAction?: (e: React.MouseEvent) => void;
85
82
pageType: "canvas" | "doc";
86
-
canvasNarrow?: boolean | undefined;
87
83
drawerOpen: boolean | undefined;
88
84
}) => {
89
85
return (
···
119
115
${
120
116
props.pageType === "canvas" &&
121
117
!props.fullPageScroll &&
122
-
(props.canvasNarrow
123
-
? "w-[10000px] sm:mx-0 max-w-[var(--page-width-units)]"
124
-
: "sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]")
118
+
"max-w-[100vw] sm:max-w-[calc(100vw-128px)] lg:max-w-fit lg:w-[calc(var(--page-width-units)*2 + 24px))]"
125
119
}
126
120
127
121
`}
···
139
133
</div>
140
134
);
141
135
};
142
-
// ${narrowWidth ? " sm:max-w-(--page-width-units)" : }
136
+
143
137
const PageContent = (props: { entityID: string }) => {
144
138
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
145
139
if (pageType === "doc") return <DocContent entityID={props.entityID} />;
-12
lexicons/api/lexicons.ts
-12
lexicons/api/lexicons.ts
···
1455
1455
ref: 'lex:pub.leaflet.pages.canvas#block',
1456
1456
},
1457
1457
},
1458
-
display: {
1459
-
type: 'ref',
1460
-
ref: 'lex:pub.leaflet.pages.canvas#display',
1461
-
},
1462
-
},
1463
-
},
1464
-
display: {
1465
-
type: 'object',
1466
-
properties: {
1467
-
narrowWidth: {
1468
-
type: 'boolean',
1469
-
},
1470
1458
},
1471
1459
},
1472
1460
block: {
-16
lexicons/api/types/pub/leaflet/pages/canvas.ts
-16
lexicons/api/types/pub/leaflet/pages/canvas.ts
···
30
30
$type?: 'pub.leaflet.pages.canvas'
31
31
id?: string
32
32
blocks: Block[]
33
-
display?: Display
34
33
}
35
34
36
35
const hashMain = 'main'
···
41
40
42
41
export function validateMain<V>(v: V) {
43
42
return validate<Main & V>(v, id, hashMain)
44
-
}
45
-
46
-
export interface Display {
47
-
$type?: 'pub.leaflet.pages.canvas#display'
48
-
narrowWidth?: boolean
49
-
}
50
-
51
-
const hashDisplay = 'display'
52
-
53
-
export function isDisplay<V>(v: V) {
54
-
return is$typed(v, id, hashDisplay)
55
-
}
56
-
57
-
export function validateDisplay<V>(v: V) {
58
-
return validate<Display & V>(v, id, hashDisplay)
59
43
}
60
44
61
45
export interface Block {
-12
lexicons/pub/leaflet/pages/canvas.json
-12
lexicons/pub/leaflet/pages/canvas.json
-7
lexicons/src/pages/Canvas.ts
-7
lexicons/src/pages/Canvas.ts
···
11
11
properties: {
12
12
id: { type: "string" },
13
13
blocks: { type: "array", items: { type: "ref", ref: "#block" } },
14
-
display: { type: "ref", ref: "#display" },
15
-
},
16
-
},
17
-
display: {
18
-
type: "object",
19
-
properties: {
20
-
narrowWidth: { type: "boolean" },
21
14
},
22
15
},
23
16
block: {