a tool for shared writing and social publishing
Revert "create component for placeholder text"
This reverts commit 3e4b3d461fac304d408870f1f4ddbf4d4a1cd60d.
+40
-42
+40
-42
components/Blocks/TextBlock/index.tsx
+40
-42
components/Blocks/TextBlock/index.tsx
···
42
42
3: "text-base font-bold text-secondary ",
43
43
} as { [level: number]: string };
44
44
45
-
export function TextBlock(props: BlockProps & { preview?: boolean }) {
45
+
export function TextBlock(
46
+
props: BlockProps & { className?: string; preview?: boolean },
47
+
) {
46
48
let isLocked = useEntity(props.entityID, "block/is-locked");
47
49
let initialized = useInitialPageLoad();
48
50
let first = props.previousBlock === null;
···
57
59
<RenderedTextBlock
58
60
type={props.type}
59
61
entityID={props.entityID}
62
+
className={props.className}
60
63
first={first}
61
64
pageType={props.pageType}
62
65
/>
···
112
115
113
116
export function RenderedTextBlock(props: {
114
117
entityID: string;
118
+
className?: string;
115
119
first?: boolean;
116
120
pageType?: "canvas" | "doc";
117
121
type: BlockProps["type"];
···
132
136
if (permissions.write && (props.first || props.pageType === "canvas"))
133
137
content = (
134
138
<div
135
-
className={`pointer-events-none italic text-tertiary flex flex-col `}
139
+
className={`${props.className} pointer-events-none italic text-tertiary flex flex-col `}
136
140
>
137
-
<PlaceholderText
138
-
alignmentClass={alignmentClass}
139
-
type={props.type}
140
-
headingLevel={headingLevel?.data.value}
141
-
/>
141
+
{headingLevel?.data.value === 1
142
+
? "Title"
143
+
: headingLevel?.data.value === 2
144
+
? "Header"
145
+
: headingLevel?.data.value === 3
146
+
? "Subheader"
147
+
: "write something..."}
148
+
<div className=" text-xs font-normal">
149
+
or type "/" for commands
150
+
</div>
142
151
</div>
143
152
);
144
153
} else {
···
161
170
className={`
162
171
${alignmentClass}
163
172
${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
164
-
w-full whitespace-pre-wrap outline-none`}
173
+
w-full whitespace-pre-wrap outline-none ${props.className} `}
165
174
>
166
175
{content}
167
176
</pre>
168
177
);
169
178
}
170
179
171
-
export function BaseTextBlock(props: BlockProps) {
180
+
export function BaseTextBlock(props: BlockProps & { className?: string }) {
172
181
let mountRef = useRef<HTMLPreElement | null>(null);
173
182
let actionTimeout = useRef<number | null>(null);
174
183
let repRef = useRef<null | Replicache<ReplicacheMutators>>(null);
···
361
370
outline-none
362
371
363
372
${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
364
-
`}
373
+
${props.className}`}
365
374
ref={mountRef}
366
375
/>
367
376
{editorState?.doc.textContent.length === 0 &&
368
377
props.previousBlock === null &&
369
378
props.nextBlock === null ? (
370
379
// if this is the only block on the page and is empty or is a canvas, show placeholder
371
-
<PlaceholderText
372
-
alignmentClass={alignmentClass}
373
-
type={props.type}
374
-
headingLevel={headingLevel?.data.value}
375
-
/>
380
+
<div
381
+
className={`${props.className} ${alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col
382
+
${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""}
383
+
`}
384
+
>
385
+
{props.type === "text"
386
+
? "write something..."
387
+
: headingLevel?.data.value === 3
388
+
? "Subheader"
389
+
: headingLevel?.data.value === 2
390
+
? "Header"
391
+
: "Title"}
392
+
<div className=" text-xs font-normal">
393
+
or type "/" to add a block
394
+
</div>
395
+
</div>
376
396
) : editorState?.doc.textContent.length === 0 && focused ? (
377
397
// if not the only block on page but is the block is empty and selected, but NOT multiselected show add button
378
-
<CommandOptions {...props} />
398
+
<CommandOptions {...props} className={props.className} />
379
399
) : null}
380
400
381
401
{editorState?.doc.textContent.startsWith("/") && selected && (
···
390
410
);
391
411
}
392
412
393
-
const PlaceholderText = (props: {
394
-
type: BlockProps["type"];
395
-
headingLevel?: number;
396
-
alignmentClass: string;
397
-
}) => {
398
-
return (
399
-
<div
400
-
className={`${props.alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col
401
-
${props.type === "heading" ? HeadingStyle[props.headingLevel || 1] : ""}
402
-
`}
403
-
>
404
-
{props.type === "text"
405
-
? "write something..."
406
-
: props.headingLevel === 3
407
-
? "Subheader"
408
-
: props.headingLevel === 2
409
-
? "Header"
410
-
: "Title"}
411
-
<div className=" text-xs font-normal">
412
-
or type "/" to add a block
413
-
</div>
414
-
</div>
415
-
);
416
-
};
417
-
418
413
const BlockifyLink = (props: {
419
414
entityID: string;
420
415
editorState: EditorState | undefined;
···
473
468
} else return null;
474
469
};
475
470
476
-
const CommandOptions = (props: BlockProps) => {
471
+
const CommandOptions = (props: BlockProps & { className?: string }) => {
477
472
let rep = useReplicache();
478
473
let entity_set = useEntitySetContext();
479
474
return (
···
481
476
className={`absolute top-0 right-0 w-fit flex gap-[6px] items-center font-bold rounded-md text-sm text-border ${props.pageType === "canvas" && "mr-[6px]"}`}
482
477
>
483
478
<TooltipButton
479
+
className={props.className}
484
480
onMouseDown={async () => {
485
481
let command = blockCommands.find((f) => f.name === "Image");
486
482
if (!rep.rep) return;
···
499
495
</TooltipButton>
500
496
501
497
<TooltipButton
498
+
className={props.className}
502
499
onMouseDown={async () => {
503
500
let command = blockCommands.find((f) => f.name === "New Page");
504
501
if (!rep.rep) return;
···
517
514
</TooltipButton>
518
515
519
516
<TooltipButton
517
+
className={props.className}
520
518
onMouseDown={(e) => {
521
519
e.preventDefault();
522
520
let editor = useEditorStates.getState().editorStates[props.entityID];