a tool for shared writing and social publishing
leaflet.pub
1import { useEntity, useReplicache } from "src/replicache";
2import "katex/dist/katex.min.css";
3import { BlockProps } from "./Block";
4import Katex from "katex";
5import { useMemo } from "react";
6import { useUIState } from "src/useUIState";
7import { theme } from "tailwind.config";
8import { BaseTextareaBlock } from "./BaseTextareaBlock";
9import { elementId } from "src/utils/elementId";
10
11export function MathBlock(props: BlockProps) {
12 let content = useEntity(props.entityID, "block/math");
13 let focusedBlock = useUIState(
14 (s) => s.focusedEntity?.entityID === props.entityID,
15 );
16 let { rep } = useReplicache();
17 const { html, error } = useMemo(() => {
18 try {
19 const html = Katex.renderToString(content?.data.value || "", {
20 displayMode: true,
21 throwOnError: false,
22 errorColor: theme.colors["accent-contrast"],
23 });
24
25 return { html, error: undefined };
26 } catch (error) {
27 if (error instanceof Katex.ParseError || error instanceof TypeError) {
28 return { error };
29 }
30
31 throw error;
32 }
33 }, [content?.data.value]);
34 return focusedBlock ? (
35 <BaseTextareaBlock
36 id={elementId.block(props.entityID).input}
37 block={props}
38 spellCheck={false}
39 autoCapitalize="none"
40 autoCorrect="off"
41 className="bg-border-light rounded-md p-2 w-full min-h-[48px] whitespace-nowrap overflow-auto! border-border-light outline-border-light selected-outline"
42 placeholder="write some Tex here..."
43 value={content?.data.value}
44 onChange={async (e) => {
45 // Update the entity with the new value
46 await rep?.mutate.assertFact({
47 attribute: "block/math",
48 entity: props.entityID,
49 data: { type: "string", value: e.target.value },
50 });
51 }}
52 />
53 ) : html && content?.data.value ? (
54 <div
55 className="text-lg min-h-[66px] w-full border border-transparent"
56 dangerouslySetInnerHTML={{ __html: html }}
57 />
58 ) : (
59 <div className="text-tertiary italic rounded-md p-2 w-full min-h-16">
60 write some Tex here...
61 </div>
62 );
63}