Feature: math and code blocks (#152)

* add initial math block

Needs, styling mainly! and some logic for how we show empty blocks, etc

* add @types/katex

* light styling to the math block

* add code block

* added some styles to code blocks

* make cursor handling and themes work

* support copying and pasting code blocks

* simplify focusBlock for math/code

* some styling

* add ``` for code blocks

* handle copy/paste for math blocks too

* handle pasting markdown code blocks

* support rendering to published post

---------

Co-authored-by: celine <[e-mail]>

actions/publishToPublication.ts

···
   PubLeafletPagesLinearDocument,
   PubLeafletRichtextFacet,
   PubLeafletBlocksWebsite,
+  PubLeafletBlocksCode,
+  PubLeafletBlocksMath,
 } from "lexicons/api";
 import { Block } from "components/Blocks/Block";
 import { TID } from "@atproto/common";
···
     blocks,
     imageMap,
     scan,
+    root_entity,
   );
 
   let existingRecord =
···
   blocks: Block[],
   imageMap: Map<string, BlobRef>,
   scan: ReturnType<typeof scanIndexLocal>,
+  root_entity: string,
 ): PubLeafletPagesLinearDocument.Block[] {
   let parsedBlocks = parseBlocksToList(blocks);
   return parsedBlocks.flatMap((blockOrList) => {
···
           : alignmentValue === "right"
             ? "lex:pub.leaflet.pages.linearDocument#textAlignRight"
             : undefined;
-      let b = blockToRecord(blockOrList.block, imageMap, scan);
+      let b = blockToRecord(blockOrList.block, imageMap, scan, root_entity);
       if (!b) return [];
       let block: PubLeafletPagesLinearDocument.Block = {
         $type: "pub.leaflet.pages.linearDocument#block",
···
         $type: "pub.leaflet.pages.linearDocument#block",
         block: {
           $type: "pub.leaflet.blocks.unorderedList",
-          children: childrenToRecord(blockOrList.children, imageMap, scan),
+          children: childrenToRecord(
+            blockOrList.children,
+            imageMap,
+            scan,
+            root_entity,
+          ),
         },
       };
       return [block];
···
   children: List[],
   imageMap: Map<string, BlobRef>,
   scan: ReturnType<typeof scanIndexLocal>,
+  root_entity: string,
 ) {
   return children.flatMap((child) => {
-    let content = blockToRecord(child.block, imageMap, scan);
+    let content = blockToRecord(child.block, imageMap, scan, root_entity);
     if (!content) return [];
     let record: PubLeafletBlocksUnorderedList.ListItem = {
       $type: "pub.leaflet.blocks.unorderedList#listItem",
       content,
-      children: childrenToRecord(child.children, imageMap, scan),
+      children: childrenToRecord(child.children, imageMap, scan, root_entity),
     };
     return record;
   });
···
   b: Block,
   imageMap: Map<string, BlobRef>,
   scan: ReturnType<typeof scanIndexLocal>,
+  root_entity: string,
 ) {
   const getBlockContent = (b: string) => {
     let [content] = scan.eav(b, "block/text");
···
     b.type !== "text" &&
     b.type !== "heading" &&
     b.type !== "image" &&
-    b.type !== "link"
+    b.type !== "link" &&
+    b.type !== "code" &&
+    b.type !== "math"
   )
     return;
-  let alignmentValue =
-    scan.eav(b.value, "block/text-alignment")[0]?.data.value || "left";
 
   if (b.type === "heading") {
     let [headingLevel] = scan.eav(b.value, "block/heading-level");
···
       src: src.data.value,
       description: description.data.value,
       title: title.data.value,
+    };
+    return block;
+  }
+  if (b.type === "code") {
+    let [language] = scan.eav(b.value, "block/code-language");
+    let [code] = scan.eav(b.value, "block/code");
+    let [theme] = scan.eav(root_entity, "theme/code-theme");
+    let block: $Typed<PubLeafletBlocksCode.Main> = {
+      $type: "pub.leaflet.blocks.code",
+      language: language?.data.value,
+      plaintext: code?.data.value || "",
+      syntaxHighlightingTheme: theme?.data.value,
+    };
+    return block;
+  }
+  if (b.type === "math") {
+    let [math] = scan.eav(b.value, "block/math");
+    let block: $Typed<PubLeafletBlocksMath.Main> = {
+      $type: "pub.leaflet.blocks.math",
+      tex: math?.data.value || "",
     };
     return block;
   }

app/globals.css

···
   );
 }
 
+pre.shiki code {
+  display: block;
+}
+
+pre.shiki {
+  @apply p-2;
+  @apply rounded-md;
+  @apply overflow-auto;
+}
+
 .highlight {
   @apply px-[1px];
   @apply py-[1px];

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

···
 import {
+  PubLeafletBlocksMath,
+  PubLeafletBlocksCode,
   PubLeafletBlocksHeader,
   PubLeafletBlocksImage,
   PubLeafletBlocksText,
···
 import { Popover } from "components/Popover";
 import { theme } from "tailwind.config";
 import { ImageAltSmall } from "components/Icons/ImageAlt";
+import { codeToHtml } from "shiki";
+import Katex from "katex";
+import { StaticMathBlock } from "./StaticMathBlock";
 
 export function PostContent({
   blocks,
···
   );
 }
 
-let Block = ({
+let Block = async ({
   block,
   did,
   isList,
···
             />
           ))}
         </ul>
+      );
+    }
+    case PubLeafletBlocksMath.isMain(b.block): {
+      return <StaticMathBlock block={b.block} />;
+    }
+    case PubLeafletBlocksCode.isMain(b.block): {
+      let html = await codeToHtml(b.block.plaintext, {
+        lang: b.block.language || "plaintext",
+        theme: b.block.syntaxHighlightingTheme || "github-light",
+      });
+      return (
+        <div
+          className="w-full min-h-[42px] rounded-md border-border-light outline-border-light selected-outline"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
       );
     }
     case PubLeafletBlocksWebsite.isMain(b.block): {

app/lish/[did]/[publication]/[rkey]/StaticMathBlock.tsx

···
+import { PubLeafletBlocksMath } from "lexicons/api";
+import Katex from "katex";
+import "katex/dist/katex.min.css";
+
+export const StaticMathBlock = ({
+  block,
+}: {
+  block: PubLeafletBlocksMath.Main;
+}) => {
+  const html = Katex.renderToString(block.tex, {
+    displayMode: true,
+    output: "html",
+    throwOnError: false,
+  });
+  return (
+    <div className="math-block">
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};

app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx

···
 import {
+  PubLeafletBlocksCode,
   PubLeafletBlocksHeader,
   PubLeafletBlocksImage,
+  PubLeafletBlocksMath,
   PubLeafletBlocksText,
   PubLeafletBlocksUnorderedList,
   PubLeafletBlocksWebsite,
···
 } from "lexicons/api";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { TextBlock } from "./TextBlock";
+import { StaticMathBlock } from "./StaticMathBlock";
+import { codeToHtml } from "shiki";
 
 export function StaticPostContent({
   blocks,
···
   );
 }
 
-let Block = ({
+let Block = async ({
   block,
   did,
   isList,
···
   let b = block;
 
   switch (true) {
+    case PubLeafletBlocksMath.isMain(b.block): {
+      return <StaticMathBlock block={b.block} />;
+    }
+    case PubLeafletBlocksCode.isMain(b.block): {
+      let html = await codeToHtml(b.block.plaintext, {
+        lang: b.block.language || "plaintext",
+        theme: b.block.syntaxHighlightingTheme || "github-light",
+      });
+      return (
+        <div
+          className="w-full min-h-[42px] rounded-md border-border-light outline-border-light selected-outline"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      );
+    }
     case PubLeafletBlocksUnorderedList.isMain(b.block): {
       return (
         <ul>

app/lish/[did]/[publication]/rss/route.ts

···
     params: Promise<{ publication: string; did: string }>;
   },
 ) {
-  let renderToStaticMarkup = await import("react-dom/server").then(
-    (module) => module.renderToStaticMarkup,
+  let renderToReadableStream = await import("react-dom/server").then(
+    (module) => module.renderToReadableStream,
   );
   let params = await props.params;
   let { result: publication } = await get_publication_data.handler(
···
     },
   });
 
-  publication?.documents_in_publications.forEach((doc) => {
-    if (!doc.documents) return;
-    let record = doc.documents?.data as PubLeafletDocument.Record;
-    let uri = new AtUri(doc.documents?.uri);
-    let rkey = uri.rkey;
-    if (!record) return;
-    let firstPage = record.pages[0];
-    let blocks: PubLeafletPagesLinearDocument.Block[] = [];
-    if (PubLeafletPagesLinearDocument.isMain(firstPage)) {
-      blocks = firstPage.blocks || [];
-    }
-    feed.addItem({
-      title: record.title,
-      description: record.description,
-      date: record.publishedAt ? new Date(record.publishedAt) : new Date(),
-      id: `https://${pubRecord.base_path}/${rkey}`,
-      link: `https://${pubRecord.base_path}/${rkey}`,
-      content: renderToStaticMarkup(
+  await Promise.all(
+    publication?.documents_in_publications.map(async (doc) => {
+      if (!doc.documents) return;
+      let record = doc.documents?.data as PubLeafletDocument.Record;
+      let uri = new AtUri(doc.documents?.uri);
+      let rkey = uri.rkey;
+      if (!record) return;
+      let firstPage = record.pages[0];
+      let blocks: PubLeafletPagesLinearDocument.Block[] = [];
+      if (PubLeafletPagesLinearDocument.isMain(firstPage)) {
+        blocks = firstPage.blocks || [];
+      }
+      let stream = await renderToReadableStream(
         createElement(StaticPostContent, { blocks, did: uri.host }),
-      ),
-    });
-  });
+      );
+      const reader = stream.getReader();
+      const chunks = [];
+
+      let done, value;
+      while (!done) {
+        ({ done, value } = await reader.read());
+        if (value) {
+          chunks.push(new TextDecoder().decode(value));
+        }
+      }
+
+      feed.addItem({
+        title: record.title,
+        description: record.description,
+        date: record.publishedAt ? new Date(record.publishedAt) : new Date(),
+        id: `https://${pubRecord.base_path}/${rkey}`,
+        link: `https://${pubRecord.base_path}/${rkey}`,
+        content: chunks.join(""),
+      });
+    }),
+  );
   return new Response(feed.rss2(), {
     headers: {
       "Content-Type": "text/xml",

components/Blocks/BaseTextareaBlock.tsx

···
+import {
+  AsyncValueAutosizeTextarea,
+  AutosizeTextareaProps,
+} from "components/utils/AutosizeTextarea";
+import { BlockProps } from "./Block";
+import { getCoordinatesInTextarea } from "src/utils/getCoordinatesInTextarea";
+import { focusBlock } from "src/utils/focusBlock";
+
+export function BaseTextareaBlock(
+  props: AutosizeTextareaProps & {
+    block: Pick<BlockProps, "previousBlock" | "nextBlock">;
+  },
+) {
+  let { block, ...passDownProps } = props;
+  return (
+    <AsyncValueAutosizeTextarea
+      {...passDownProps}
+      onKeyDown={(e) => {
+        if (e.key === "ArrowUp") {
+          let selection = e.currentTarget.selectionStart;
+
+          let lastLineBeforeCursor = e.currentTarget.value
+            .slice(0, selection)
+            .lastIndexOf("\n");
+          if (lastLineBeforeCursor !== -1) return;
+          let block = props.block.previousBlock;
+          let coord = getCoordinatesInTextarea(e.currentTarget, selection);
+          if (block) {
+            focusBlock(block, {
+              left: coord.left + e.currentTarget.getBoundingClientRect().left,
+              type: "bottom",
+            });
+            return true;
+          }
+        }
+        if (e.key === "ArrowDown") {
+          let selection = e.currentTarget.selectionStart;
+
+          let lastLine = e.currentTarget.value.lastIndexOf("\n");
+          let lastLineBeforeCursor = e.currentTarget.value
+            .slice(0, selection)
+            .lastIndexOf("\n");
+          if (lastLine !== lastLineBeforeCursor) return;
+          e.preventDefault();
+          let block = props.block.nextBlock;
+
+          let coord = getCoordinatesInTextarea(e.currentTarget, selection);
+          console.log(coord);
+          if (block) {
+            focusBlock(block, {
+              left: coord.left + e.currentTarget.getBoundingClientRect().left,
+              type: "top",
+            });
+            return true;
+          }
+        }
+      }}
+    />
+  );
+}

components/Blocks/Block.tsx

···
 import { CheckboxChecked } from "components/Icons/CheckboxChecked";
 import { CheckboxEmpty } from "components/Icons/CheckboxEmpty";
 import { LockTiny } from "components/Icons/LockTiny";
+import { MathBlock } from "./MathBlock";
+import { CodeBlock } from "./CodeBlock";
 
 export type Block = {
   factID: string;
···
     BlockProps & { preview?: boolean }
   >;
 } = {
+  code: CodeBlock,
+  math: MathBlock,
   card: PageLinkBlock,
   text: TextBlock,
   heading: TextBlock,

components/Blocks/BlockCommands.tsx

···
 import { LinkSmall } from "components/Icons/LinkSmall";
 import { BlockRSVPSmall } from "components/Icons/BlockRSVPSmall";
 import { ListUnorderedSmall } from "components/Toolbar/ListToolbar";
+import { BlockMathSmall } from "components/Icons/BlockMathSmall";
+import { BlockCodeSmall } from "components/Icons/BlockCodeSmall";
 
 type Props = {
   parent: string;
···
     hiddenInPublication: true,
     onSelect: async (rep, props) => {
       createBlockWithType(rep, props, "bluesky-post");
+    },
+  },
+  {
+    name: "Math",
+    icon: <BlockMathSmall />,
+    type: "block",
+    hiddenInPublication: false,
+    onSelect: async (rep, props) => {
+      createBlockWithType(rep, props, "math");
+    },
+  },
+  {
+    name: "Code",
+    icon: <BlockCodeSmall />,
+    type: "block",
+    hiddenInPublication: false,
+    onSelect: async (rep, props) => {
+      createBlockWithType(rep, props, "code");
     },
   },
 

components/Blocks/CodeBlock.tsx

···
+import {
+  BundledLanguage,
+  bundledLanguagesInfo,
+  bundledThemesInfo,
+  codeToHtml,
+} from "shiki";
+import { useEntity, useReplicache } from "src/replicache";
+import "katex/dist/katex.min.css";
+import { BlockProps } from "./Block";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { useUIState } from "src/useUIState";
+import { BaseTextareaBlock } from "./BaseTextareaBlock";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { flushSync } from "react-dom";
+import { elementId } from "src/utils/elementId";
+
+export function CodeBlock(props: BlockProps) {
+  let { rep, rootEntity } = useReplicache();
+  let content = useEntity(props.entityID, "block/code");
+  let lang =
+    useEntity(props.entityID, "block/code-language")?.data.value || "plaintext";
+
+  let theme =
+    useEntity(rootEntity, "theme/code-theme")?.data.value || "github-light";
+  let focusedBlock = useUIState(
+    (s) => s.focusedEntity?.entityID === props.entityID,
+  );
+  let { permissions } = useEntitySetContext();
+  const [html, setHTML] = useState<string | null>(null);
+
+  useLayoutEffect(() => {
+    if (!content) return;
+    void codeToHtml(content.data.value, {
+      lang,
+      theme,
+      structure: "classic",
+    }).then((h) => {
+      setHTML(h.replaceAll("<br>", "\n"));
+    });
+  }, [content, lang, theme]);
+
+  const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
+    let selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    let range = selection.getRangeAt(0);
+    if (!range) return;
+    let length = range.toString().length;
+    range.setStart(e.currentTarget, 0);
+    let end = range.toString().length;
+    let start = end - length;
+
+    flushSync(() => {
+      useUIState.getState().setSelectedBlock(props);
+      useUIState.getState().setFocusedBlock({
+        entityType: "block",
+        entityID: props.value,
+        parent: props.parent,
+      });
+    });
+    let el = document.getElementById(
+      elementId.block(props.entityID).input,
+    ) as HTMLTextAreaElement;
+    if (!el) return;
+    el.focus();
+    el.setSelectionRange(start, end);
+  }, []);
+  return (
+    <div className="codeBlock w-full flex flex-col rounded-md gap-0.5 ">
+      {permissions.write && (
+        <div className="text-sm text-tertiary flex justify-between">
+          <div className="flex gap-1">
+            Theme:{" "}
+            <select
+              className="codeBlockLang text-left bg-transparent pr-1"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              value={theme}
+              onChange={async (e) => {
+                await rep?.mutate.assertFact({
+                  attribute: "theme/code-theme",
+                  entity: rootEntity,
+                  data: { type: "string", value: e.target.value },
+                });
+              }}
+            >
+              {bundledThemesInfo.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.displayName}
+                </option>
+              ))}
+            </select>
+          </div>
+          <select
+            className="codeBlockLang text-right bg-transparent pr-1"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            value={lang}
+            onChange={async (e) => {
+              await rep?.mutate.assertFact({
+                attribute: "block/code-language",
+                entity: props.entityID,
+                data: { type: "string", value: e.target.value },
+              });
+            }}
+          >
+            <option value="plaintext">Plaintext</option>
+            {bundledLanguagesInfo.map((l) => (
+              <option key={l.id} value={l.id}>
+                {l.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+      <div className="w-full min-h-[42px] rounded-md border-border-light outline-border-light selected-outline">
+        {focusedBlock && permissions.write ? (
+          <BaseTextareaBlock
+            data-editable-block
+            data-entityid={props.entityID}
+            id={elementId.block(props.entityID).input}
+            block={props}
+            className="codeBlockEditor !whitespace-nowrap !overflow-auto font-mono p-2"
+            value={content?.data.value}
+            onChange={async (e) => {
+              // Update the entity with the new value
+              await rep?.mutate.assertFact({
+                attribute: "block/code",
+                entity: props.entityID,
+                data: { type: "string", value: e.target.value },
+              });
+            }}
+          />
+        ) : !html ? (
+          <pre
+            onClick={onClick}
+            onMouseDown={(e) => e.stopPropagation()}
+            className="codeBlockRendered !overflow-auto font-mono p-2 w-full h-full"
+          >
+            {content?.data.value}
+          </pre>
+        ) : (
+          <div
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={onClick}
+            data-lang={lang}
+            className="contents"
+            dangerouslySetInnerHTML={{ __html: html || "" }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/Blocks/MathBlock.tsx

···
+import { useEntity, useReplicache } from "src/replicache";
+import "katex/dist/katex.min.css";
+import { BlockProps } from "./Block";
+import Katex from "katex";
+import { useMemo } from "react";
+import { useUIState } from "src/useUIState";
+import { theme } from "tailwind.config";
+import { BaseTextareaBlock } from "./BaseTextareaBlock";
+import { elementId } from "src/utils/elementId";
+
+export function MathBlock(props: BlockProps) {
+  let content = useEntity(props.entityID, "block/math");
+  let focusedBlock = useUIState(
+    (s) => s.focusedEntity?.entityID === props.entityID,
+  );
+  let { rep } = useReplicache();
+  const { html, error } = useMemo(() => {
+    try {
+      const html = Katex.renderToString(content?.data.value || "", {
+        displayMode: true,
+        throwOnError: false,
+        errorColor: theme.colors["accent-contrast"],
+      });
+
+      return { html, error: undefined };
+    } catch (error) {
+      if (error instanceof Katex.ParseError || error instanceof TypeError) {
+        return { error };
+      }
+
+      throw error;
+    }
+  }, [content?.data.value]);
+  return focusedBlock ? (
+    <BaseTextareaBlock
+      id={elementId.block(props.entityID).input}
+      block={props}
+      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"
+      placeholder="write some Tex here..."
+      value={content?.data.value}
+      onChange={async (e) => {
+        // Update the entity with the new value
+        await rep?.mutate.assertFact({
+          attribute: "block/math",
+          entity: props.entityID,
+          data: { type: "string", value: e.target.value },
+        });
+      }}
+    />
+  ) : html && content?.data.value ? (
+    <div
+      className="text-lg min-h-[66px] w-full border border-transparent"
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  ) : (
+    <div className="text-tertiary italic rounded-md p-2 w-full min-h-16">
+      write some Tex here...
+    </div>
+  );
+}

components/Blocks/TextBlock/inputRules.ts

···
 import { focusBlock } from "src/utils/focusBlock";
 import { schema } from "./schema";
 import { useUIState } from "src/useUIState";
+import { flushSync } from "react-dom";
 export const inputrules = (
   propsRef: MutableRefObject<BlockProps & { entity_set: { set: string } }>,
   repRef: MutableRefObject<Replicache<ReplicacheMutators> | null>,
···
             .removeStoredMark(schema.marks.em);
           return tr;
         }
+        return null;
+      }),
+
+      // Code Block
+      new InputRule(/^```\s$/, (state, match) => {
+        flushSync(() =>
+          repRef.current?.mutate.assertFact({
+            entity: propsRef.current.entityID,
+            attribute: "block/type",
+            data: { type: "block-type-union", value: "code" },
+          }),
+        );
+        setTimeout(() => {
+          focusBlock({ ...propsRef.current, type: "code" }, { type: "start" });
+        }, 20);
         return null;
       }),
 

components/Blocks/TextBlock/useHandlePaste.ts

···
       type = "text";
       break;
     }
+    case "PRE": {
+      type = "code";
+      break;
+    }
     case "P": {
       type = "text";
       break;
···
       }
     }
   }
+  if (child.tagName === "PRE") {
+    let lang = child.getAttribute("data-language") || "plaintext";
+    if (child.firstElementChild && child.firstElementChild.className) {
+      let className = child.firstElementChild.className;
+      let match = className.match(/language-(\w+)/);
+      if (match) {
+        lang = match[1];
+      }
+    }
+    if (child.textContent) {
+      rep.mutate.assertFact([
+        {
+          entity: entityID,
+          attribute: "block/type",
+          data: { type: "block-type-union", value: "code" },
+        },
+        {
+          entity: entityID,
+          attribute: "block/code-language",
+          data: { type: "string", value: lang },
+        },
+        {
+          entity: entityID,
+          attribute: "block/code",
+          data: { type: "string", value: child.textContent },
+        },
+      ]);
+    }
+  }
   if (child.tagName === "IMG") {
     let src = child.getAttribute("src");
     if (src) {
···
           });
         });
     }
+  }
+  if (child.tagName === "DIV" && child.getAttribute("data-tex")) {
+    let tex = child.getAttribute("data-tex");
+    rep.mutate.assertFact([
+      {
+        entity: entityID,
+        attribute: "block/type",
+        data: { type: "block-type-union", value: "math" },
+      },
+      {
+        entity: entityID,
+        attribute: "block/math",
+        data: { type: "string", value: tex || "" },
+      },
+    ]);
   }
 
   if (child.tagName === "DIV" && child.getAttribute("data-entityid")) {
···
       if (
         [
           "P",
+          "PRE",
           "H1",
           "H2",
           "H3",
···
           "A",
           "SPAN",
         ].includes(elementNode.tagName) ||
-        elementNode.getAttribute("data-entityid")
+        elementNode.getAttribute("data-entityid") ||
+        elementNode.getAttribute("data-tex")
       ) {
         htmlBlocks.push(elementNode);
       } else {

components/Blocks/useBlockKeyboardHandlers.ts

···
         (el.tagName === "LABEL" ||
           el.tagName === "INPUT" ||
           el.tagName === "TEXTAREA" ||
+          el.tagName === "SELECT" ||
           el.contentEditable === "true") &&
         !isTextBlock[props.type]
       ) {

components/Blocks/useBlockMouseHandlers.ts

···
     (e: MouseEvent) => {
       if ((e.target as Element).getAttribute("data-draggable")) return;
       if ((e.target as Element).tagName === "BUTTON") return;
+      if ((e.target as Element).tagName === "SELECT") return;
+      if ((e.target as Element).tagName === "OPTION") return;
       if (isMobile) return;
       if (!entity_set.permissions.write) return;
       useSelectingMouse.setState({ start: props.value });
···
         e.preventDefault();
         useUIState.getState().addBlockToSelection(props);
       } else {
+        if (e.isDefaultPrevented()) return;
         useUIState.getState().setFocusedBlock({
           entityType: "block",
           entityID: props.value,

components/Icons/BlockCodeSmall.tsx

···
+import { Props } from "./Props";
+
+export const BlockCodeSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M13.2324 4.77635C13.3702 4.31348 13.8573 4.04915 14.3203 4.1865C14.7832 4.32411 15.0473 4.81137 14.9102 5.2744L10.7686 19.2236C10.6309 19.6865 10.1437 19.9498 9.68066 19.8125C9.21745 19.6749 8.95327 19.1878 9.09082 18.7246L13.2324 4.77635ZM16.4365 8.07615C16.6974 7.70589 17.1936 7.60016 17.5801 7.81736L22.5107 11.2851C22.7434 11.449 22.8818 11.7154 22.8818 12C22.8818 12.2845 22.7443 12.5519 22.5117 12.7158L17.6562 16.1357C17.2612 16.4138 16.7158 16.3187 16.4375 15.9238C16.1594 15.5288 16.2536 14.9834 16.6484 14.7051L20.4873 12L16.5781 9.24022C16.2433 8.94956 16.1759 8.44649 16.4365 8.07615ZM6.34375 7.86424C6.7387 7.5862 7.28419 7.68141 7.5625 8.07615C7.84075 8.47115 7.74645 9.01655 7.35156 9.2949L3.5127 12L7.42188 14.7597C7.75678 15.0503 7.82408 15.5534 7.56348 15.9238C7.3026 16.2941 6.80642 16.4 6.41992 16.1826L1.48926 12.7148C1.25672 12.5509 1.11819 12.2845 1.11816 12C1.11826 11.7155 1.25577 11.448 1.48828 11.2842L6.34375 7.86424Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/Icons/BlockMathSmall.tsx

···
+import { Props } from "./Props";
+
+export const BlockMathSmall = (props: Props) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M20.0457 3.03378C20.376 2.7842 20.8457 2.8492 21.0955 3.17928C21.6323 3.88971 22.2815 5.32017 22.699 7.04745C23.1207 8.79244 23.3277 10.9278 22.907 13.0582C22.4871 15.1837 21.5327 17.0069 20.5037 18.3756C19.4921 19.721 18.347 20.7072 17.4832 21.0767C17.1024 21.2394 16.6607 21.0629 16.4978 20.6822C16.3454 20.3253 16.4916 19.9151 16.824 19.731C17.8346 19.2254 18.6323 18.3681 19.3045 17.4742C20.2234 16.2521 21.0677 14.634 21.4363 12.7682C21.8039 10.9069 21.6271 8.99898 21.241 7.40096C20.8505 5.78529 20.2671 4.57045 19.8992 4.08358C19.6497 3.75316 19.7154 3.28346 20.0457 3.03378ZM7.02322 2.94003C7.36769 2.77966 7.78445 2.90248 7.98318 3.23593C8.1949 3.5917 8.07814 4.05229 7.72244 4.26425C7.3224 4.53951 6.97328 4.87074 6.64334 5.22714C6.18529 5.72197 5.67359 6.36158 5.17459 7.10214C4.17164 8.59069 3.25199 10.4405 2.89041 12.3072C2.38971 14.8928 2.87516 17.9083 4.67556 19.9166C4.91444 20.2124 4.89491 20.6473 4.61892 20.9205C4.34297 21.1933 3.90826 21.208 3.61502 20.9664C1.32284 18.8713 0.86522 14.8753 1.41775 12.0221C1.82983 9.8945 2.85796 7.85634 3.93142 6.26327C4.4705 5.46327 5.02886 4.76272 5.54275 4.2076C5.97315 3.74269 6.45323 3.23498 7.02322 2.94003ZM13.6101 9.53964C14.2613 8.93207 15.2373 8.72054 16.0301 8.82479C16.4365 8.87834 16.8678 9.02295 17.2107 9.31405C17.2107 9.31405 17.4185 9.44658 17.6414 9.87264C17.8642 10.299 18.0163 11.3361 17.1726 12.1021C16.5342 12.6819 15.3168 12.5718 15.2254 11.4664C15.1575 10.6436 15.7689 10.5461 15.7791 10.5445C15.901 10.4843 16.1162 10.2308 15.9031 10.2027C15.4562 10.1439 14.89 10.396 14.6326 10.6363C14.0975 11.136 13.3817 12.1481 12.9724 13.1724C12.7691 13.6816 12.6624 14.1434 12.6638 14.5123C12.6654 14.8706 12.7652 15.0803 12.9119 15.2125C13.2749 15.5395 13.6579 15.6457 14.0623 15.6109C14.4914 15.5739 14.9812 15.3728 15.4842 15.0142C15.8213 14.7738 16.2905 14.8521 16.531 15.189C16.7711 15.5262 16.6932 15.9955 16.3562 16.2359C15.7122 16.6951 14.9689 17.0379 14.1912 17.1051C13.3889 17.1742 12.5905 16.9436 11.907 16.3277C11.5457 16.0021 11.3388 15.6008 11.239 15.1822C10.8972 15.6384 10.5507 16.0322 10.2478 16.315C9.67058 16.854 8.77915 17.0924 8.06619 17.0924C7.70236 17.0923 7.29507 17.0316 6.949 16.8433C6.60986 16.6588 6.50762 16.4793 6.50369 16.4723C6.20573 16.1484 5.83569 15.2012 6.40017 14.3238C6.82728 13.66 8.00558 13.4446 8.27127 14.4244C8.49573 15.2532 7.24003 15.4531 7.9158 15.5855L8.06717 15.5933C8.52785 15.5932 9.00624 15.4227 9.22439 15.2193C9.77288 14.7071 10.5896 13.6314 11.0808 12.5631C11.3265 12.0286 11.4625 11.5543 11.4773 11.19C11.4914 10.8428 11.3976 10.6868 11.2801 10.5963C10.921 10.3206 9.89525 10.2055 9.03787 11.0269L8.97927 11.0777C8.67978 11.3113 8.24689 11.2844 7.9783 11.0045C7.69171 10.7054 7.7017 10.2305 8.00076 9.94393L8.24978 9.72421C9.52897 8.68979 11.2168 8.65653 12.1931 9.40585C12.5421 9.67382 12.7536 10.0121 12.8679 10.3726C13.1174 10.0477 13.3711 9.76281 13.6101 9.53964Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

components/SelectionManager.tsx

···
       savedSelection.current = null;
       if (
         initialContentEditableParent.current &&
+        !(e.target as Element).getAttribute("data-draggable") &&
         getContentEditableParent(e.target as Node) !==
           initialContentEditableParent.current
       ) {
···
 function getContentEditableParent(e: Node | null): Node | null {
   let element: Node | null = e;
   while (element && element !== document) {
-    if ((element as HTMLElement).contentEditable === "true") {
+    if (
+      (element as HTMLElement).contentEditable === "true" ||
+      (element as HTMLElement).getAttribute("data-editable-block")
+    ) {
       return element;
     }
     element = element.parentNode;

components/utils/AutosizeTextarea.tsx

···
 } from "react";
 import styles from "./textarea-styles.module.css";
 
-type Props = React.DetailedHTMLProps<
+export type AutosizeTextareaProps = React.DetailedHTMLProps<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 >;
-export const AutosizeTextarea = forwardRef<HTMLTextAreaElement, Props>(
-  (props: Props, ref) => {
-    let textarea = useRef<HTMLTextAreaElement | null>(null);
-    useImperativeHandle(ref, () => textarea.current as HTMLTextAreaElement);
+export const AutosizeTextarea = forwardRef<
+  HTMLTextAreaElement,
+  AutosizeTextareaProps
+>((props: AutosizeTextareaProps, ref) => {
+  let textarea = useRef<HTMLTextAreaElement | null>(null);
+  useImperativeHandle(ref, () => textarea.current as HTMLTextAreaElement);
 
-    return (
-      <div
-        className={`${styles["grow-wrap"]} ${props.className} `}
-        data-replicated-value={props.value}
-        style={props.style}
-      >
-        <textarea
-          rows={1}
-          {...props}
-          ref={textarea}
-          className="placeholder:text-tertiary bg-transparent"
-        />
-      </div>
-    );
-  },
-);
+  return (
+    <div
+      className={`${styles["grow-wrap"]} ${props.className} `}
+      data-replicated-value={props.value}
+      style={props.style}
+    >
+      <textarea
+        rows={1}
+        {...props}
+        ref={textarea}
+        className={`placeholder:text-tertiary bg-transparent ${props.className}`}
+      />
+    </div>
+  );
+});
 
 export const AsyncValueAutosizeTextarea = forwardRef<
   HTMLTextAreaElement,
-  Props
->((props: Props, ref) => {
+  AutosizeTextareaProps
+>((props: AutosizeTextareaProps, ref) => {
   let [intermediateState, setIntermediateState] = useState(
     props.value as string,
   );

components/utils/textarea-styles.module.css

···
   content: attr(data-replicated-value) " ";
 
   /* This is how textarea text behaves */
-  white-space: pre-wrap;
+  white-space: pre;
 
   /* Hidden from view, clicks, and screen readers */
   visibility: hidden;

lexicons/api/index.ts

···
 import { OmitKey, Un$Typed } from './util'
 import * as PubLeafletDocument from './types/pub/leaflet/document'
 import * as PubLeafletPublication from './types/pub/leaflet/publication'
+import * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 import * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
 import * as PubLeafletBlocksImage from './types/pub/leaflet/blocks/image'
+import * as PubLeafletBlocksMath from './types/pub/leaflet/blocks/math'
 import * as PubLeafletBlocksText from './types/pub/leaflet/blocks/text'
 import * as PubLeafletBlocksUnorderedList from './types/pub/leaflet/blocks/unorderedList'
 import * as PubLeafletBlocksWebsite from './types/pub/leaflet/blocks/website'
···
 
 export * as PubLeafletDocument from './types/pub/leaflet/document'
 export * as PubLeafletPublication from './types/pub/leaflet/publication'
+export * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 export * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
 export * as PubLeafletBlocksImage from './types/pub/leaflet/blocks/image'
+export * as PubLeafletBlocksMath from './types/pub/leaflet/blocks/math'
 export * as PubLeafletBlocksText from './types/pub/leaflet/blocks/text'
 export * as PubLeafletBlocksUnorderedList from './types/pub/leaflet/blocks/unorderedList'
 export * as PubLeafletBlocksWebsite from './types/pub/leaflet/blocks/website'

lexicons/api/lexicons.ts

···
       },
     },
   },
+  PubLeafletBlocksCode: {
+    lexicon: 1,
+    id: 'pub.leaflet.blocks.code',
+    defs: {
+      main: {
+        type: 'object',
+        required: ['plaintext'],
+        properties: {
+          plaintext: {
+            type: 'string',
+          },
+          language: {
+            type: 'string',
+          },
+          syntaxHighlightingTheme: {
+            type: 'string',
+          },
+        },
+      },
+    },
+  },
   PubLeafletBlocksHeader: {
     lexicon: 1,
     id: 'pub.leaflet.blocks.header',
···
           },
           height: {
             type: 'integer',
+          },
+        },
+      },
+    },
+  },
+  PubLeafletBlocksMath: {
+    lexicon: 1,
+    id: 'pub.leaflet.blocks.math',
+    defs: {
+      main: {
+        type: 'object',
+        required: ['tex'],
+        properties: {
+          tex: {
+            type: 'string',
           },
         },
       },
···
               'lex:pub.leaflet.blocks.image',
               'lex:pub.leaflet.blocks.unorderedList',
               'lex:pub.leaflet.blocks.website',
+              'lex:pub.leaflet.blocks.math',
+              'lex:pub.leaflet.blocks.code',
             ],
           },
           alignment: {
···
 export const ids = {
   PubLeafletDocument: 'pub.leaflet.document',
   PubLeafletPublication: 'pub.leaflet.publication',
+  PubLeafletBlocksCode: 'pub.leaflet.blocks.code',
   PubLeafletBlocksHeader: 'pub.leaflet.blocks.header',
   PubLeafletBlocksImage: 'pub.leaflet.blocks.image',
+  PubLeafletBlocksMath: 'pub.leaflet.blocks.math',
   PubLeafletBlocksText: 'pub.leaflet.blocks.text',
   PubLeafletBlocksUnorderedList: 'pub.leaflet.blocks.unorderedList',
   PubLeafletBlocksWebsite: 'pub.leaflet.blocks.website',

lexicons/api/types/pub/leaflet/blocks/code.ts

···
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import { $Typed, is$typed as _is$typed, OmitKey } from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'pub.leaflet.blocks.code'
+
+export interface Main {
+  $type?: 'pub.leaflet.blocks.code'
+  plaintext: string
+  language?: string
+  syntaxHighlightingTheme?: string
+}
+
+const hashMain = 'main'
+
+export function isMain<V>(v: V) {
+  return is$typed(v, id, hashMain)
+}
+
+export function validateMain<V>(v: V) {
+  return validate<Main & V>(v, id, hashMain)
+}

lexicons/api/types/pub/leaflet/blocks/math.ts

···
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import { $Typed, is$typed as _is$typed, OmitKey } from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'pub.leaflet.blocks.math'
+
+export interface Main {
+  $type?: 'pub.leaflet.blocks.math'
+  tex: string
+}
+
+const hashMain = 'main'
+
+export function isMain<V>(v: V) {
+  return is$typed(v, id, hashMain)
+}
+
+export function validateMain<V>(v: V) {
+  return validate<Main & V>(v, id, hashMain)
+}

lexicons/api/types/pub/leaflet/pages/linearDocument.ts

···
 import type * as PubLeafletBlocksImage from '../blocks/image'
 import type * as PubLeafletBlocksUnorderedList from '../blocks/unorderedList'
 import type * as PubLeafletBlocksWebsite from '../blocks/website'
+import type * as PubLeafletBlocksMath from '../blocks/math'
+import type * as PubLeafletBlocksCode from '../blocks/code'
 
 const is$typed = _is$typed,
   validate = _validate
···
     | $Typed<PubLeafletBlocksImage.Main>
     | $Typed<PubLeafletBlocksUnorderedList.Main>
     | $Typed<PubLeafletBlocksWebsite.Main>
+    | $Typed<PubLeafletBlocksMath.Main>
+    | $Typed<PubLeafletBlocksCode.Main>
     | { $type: string }
   alignment?:
     | 'lex:pub.leaflet.pages.linearDocument#textAlignLeft'

lexicons/pub/leaflet/blocks/code.json

···
+{
+  "lexicon": 1,
+  "id": "pub.leaflet.blocks.code",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [
+        "plaintext"
+      ],
+      "properties": {
+        "plaintext": {
+          "type": "string"
+        },
+        "language": {
+          "type": "string"
+        },
+        "syntaxHighlightingTheme": {
+          "type": "string"
+        }
+      }
+    }
+  }
+}

lexicons/pub/leaflet/blocks/math.json

···
+{
+  "lexicon": 1,
+  "id": "pub.leaflet.blocks.math",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [
+        "tex"
+      ],
+      "properties": {
+        "tex": {
+          "type": "string"
+        }
+      }
+    }
+  }
+}

lexicons/pub/leaflet/pages/linearDocument.json

···
             "pub.leaflet.blocks.header",
             "pub.leaflet.blocks.image",
             "pub.leaflet.blocks.unorderedList",
-            "pub.leaflet.blocks.website"
+            "pub.leaflet.blocks.website",
+            "pub.leaflet.blocks.math",
+            "pub.leaflet.blocks.code"
           ]
         },
         "alignment": {

lexicons/src/blocks.ts

···
     },
   },
 };
+export const PubLeafletBlocksCode: LexiconDoc = {
+  lexicon: 1,
+  id: "pub.leaflet.blocks.code",
+  defs: {
+    main: {
+      type: "object",
+      required: ["plaintext"],
+      properties: {
+        plaintext: { type: "string" },
+        language: { type: "string" },
+        syntaxHighlightingTheme: { type: "string" },
+      },
+    },
+  },
+};
+
+export const PubLeafletBlocksMath: LexiconDoc = {
+  lexicon: 1,
+  id: "pub.leaflet.blocks.math",
+  defs: {
+    main: {
+      type: "object",
+      required: ["tex"],
+      properties: {
+        tex: { type: "string" },
+      },
+    },
+  },
+};
 
 export const PubLeafletBlocksWebsite: LexiconDoc = {
   lexicon: 1,
···
   PubLeafletBlocksImage,
   PubLeafletBlocksUnorderedList,
   PubLeafletBlocksWebsite,
+  PubLeafletBlocksMath,
+  PubLeafletBlocksCode,
 ];
 export const BlockUnion: LexRefUnion = {
   type: "union",

package-lock.json

···
         "fractional-indexing": "^3.2.0",
         "hono": "^4.7.11",
         "ioredis": "^5.6.1",
+        "katex": "^0.16.22",
         "linkifyjs": "^4.2.0",
         "multiformats": "^13.3.2",
         "next": "15.3.2",
···
         "remark-stringify": "^11.0.0",
         "replicache": "^14.2.2",
         "sharp": "^0.34.2",
+        "shiki": "^3.8.1",
         "swr": "^2.3.3",
         "thumbhash": "^0.1.1",
         "twilio": "^5.3.7",
···
         "@atproto/lex-cli": "^0.6.1",
         "@atproto/lexicon": "^0.4.7",
         "@cloudflare/workers-types": "^4.20240512.0",
+        "@types/katex": "^0.16.7",
         "@types/node": "^22.15.17",
         "@types/react": "19.1.3",
         "@types/react-dom": "19.1.3",
···
         "supabase": "^1.187.3",
         "tailwindcss": "^3.4.3",
         "tsx": "^4.19.3",
-        "typescript": "^5.5.3",
+        "typescript": "^5.8.3",
         "wrangler": "^3.56.0"
       }
     },
···
       "integrity": "sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==",
       "dev": true
     },
+    "node_modules/@shikijs/core": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.8.1.tgz",
+      "integrity": "sha512-uTSXzUBQ/IgFcUa6gmGShCHr4tMdR3pxUiiWKDm8pd42UKJdYhkAYsAmHX5mTwybQ5VyGDgTjW4qKSsRvGSang==",
+      "dependencies": {
+        "@shikijs/types": "3.8.1",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.8.1.tgz",
+      "integrity": "sha512-rZRp3BM1llrHkuBPAdYAzjlF7OqlM0rm/7EWASeCcY7cRYZIrOnGIHE9qsLz5TCjGefxBFnwgIECzBs2vmOyKA==",
+      "dependencies": {
+        "@shikijs/types": "3.8.1",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.3"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.8.1.tgz",
+      "integrity": "sha512-KGQJZHlNY7c656qPFEQpIoqOuC4LrxjyNndRdzk5WKB/Ie87+NJCF1xo9KkOUxwxylk7rT6nhlZyTGTC4fCe1g==",
+      "dependencies": {
+        "@shikijs/types": "3.8.1",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.8.1.tgz",
+      "integrity": "sha512-TjOFg2Wp1w07oKnXjs0AUMb4kJvujML+fJ1C5cmEj45lhjbUXtziT1x2bPQb9Db6kmPhkG5NI2tgYW1/DzhUuQ==",
+      "dependencies": {
+        "@shikijs/types": "3.8.1"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.8.1.tgz",
+      "integrity": "sha512-Vu3t3BBLifc0GB0UPg2Pox1naTemrrvyZv2lkiSw3QayVV60me1ujFQwPZGgUTmwXl1yhCPW8Lieesm0CYruLQ==",
+      "dependencies": {
+        "@shikijs/types": "3.8.1"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.8.1.tgz",
+      "integrity": "sha512-5C39Q8/8r1I26suLh+5TPk1DTrbY/kn3IdWA5HdizR0FhlhD05zx5nKCqhzSfDHH3p4S0ZefxWd77DLV+8FhGg==",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
+    },
     "node_modules/@supabase/auth-js": {
       "version": "2.64.2",
       "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.2.tgz",
···
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
+    },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/linkify-it": {
       "version": "5.0.0",
···
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-util-raw": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.4.tgz",
-      "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "@ungap/structured-clone": "^1.0.0",
-        "hast-util-from-parse5": "^8.0.0",
-        "hast-util-to-parse5": "^8.0.0",
-        "html-void-elements": "^3.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "parse5": "^7.0.0",
-        "unist-util-position": "^5.0.0",
-        "unist-util-visit": "^5.0.0",
-        "vfile": "^6.0.0",
-        "web-namespaces": "^2.0.0",
-        "zwitch": "^2.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-to-estree": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
···
       }
     },
     "node_modules/hast-util-to-html": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.1.tgz",
-      "integrity": "sha512-hZOofyZANbyWo+9RP75xIDV/gq+OUKx+T46IlwERnKmfpwp81XBFbT9mi26ws+SJchA4RVUQwIBJpqEOBhMzEQ==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
         "ccount": "^2.0.0",
         "comma-separated-tokens": "^2.0.0",
-        "hast-util-raw": "^9.0.0",
         "hast-util-whitespace": "^3.0.0",
         "html-void-elements": "^3.0.0",
         "mdast-util-to-hast": "^13.0.0",
-        "property-information": "^6.0.0",
+        "property-information": "^7.0.0",
         "space-separated-tokens": "^2.0.0",
         "stringify-entities": "^4.0.0",
         "zwitch": "^2.0.4"
···
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-html/node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.2.tgz",
···
         "trim-trailing-lines": "^2.0.0",
         "unist-util-position": "^5.0.0",
         "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-to-parse5": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
-      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "devlop": "^1.0.0",
-        "property-information": "^6.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "web-namespaces": "^2.0.0",
-        "zwitch": "^2.0.0"
       },
       "funding": {
         "type": "opencollective",
···
       "dependencies": {
         "jwa": "^1.4.1",
         "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
       }
     },
     "node_modules/keyv": {
···
         "wrappy": "1"
       }
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
+      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.3.tgz",
+      "integrity": "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg==",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.1",
+        "regex": "^6.0.1",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/opener": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
···
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz",
+      "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
···
       "dev": true,
       "engines": {
         "node": ">=8"
+      }
+    },
+    "node_modules/shiki": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.8.1.tgz",
+      "integrity": "sha512-+MYIyjwGPCaegbpBeFN9+oOifI8CKiKG3awI/6h3JeT85c//H2wDW/xCJEGuQ5jPqtbboKNqNy+JyX9PYpGwNg==",
+      "dependencies": {
+        "@shikijs/core": "3.8.1",
+        "@shikijs/engine-javascript": "3.8.1",
+        "@shikijs/engine-oniguruma": "3.8.1",
+        "@shikijs/langs": "3.8.1",
+        "@shikijs/themes": "3.8.1",
+        "@shikijs/types": "3.8.1",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
       }
     },
     "node_modules/side-channel": {
···
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

···
     "fractional-indexing": "^3.2.0",
     "hono": "^4.7.11",
     "ioredis": "^5.6.1",
+    "katex": "^0.16.22",
     "linkifyjs": "^4.2.0",
     "multiformats": "^13.3.2",
     "next": "15.3.2",
···
     "remark-stringify": "^11.0.0",
     "replicache": "^14.2.2",
     "sharp": "^0.34.2",
+    "shiki": "^3.8.1",
     "swr": "^2.3.3",
     "thumbhash": "^0.1.1",
     "twilio": "^5.3.7",
···
     "@atproto/lex-cli": "^0.6.1",
     "@atproto/lexicon": "^0.4.7",
     "@cloudflare/workers-types": "^4.20240512.0",
+    "@types/katex": "^0.16.7",
     "@types/node": "^22.15.17",
     "@types/react": "19.1.3",
     "@types/react-dom": "19.1.3",
···
     "supabase": "^1.187.3",
     "tailwindcss": "^3.4.3",
     "tsx": "^4.19.3",
-    "typescript": "^5.5.3",
+    "typescript": "^5.8.3",
     "wrangler": "^3.56.0"
   },
   "overrides": {

src/hooks/useLongPress.ts

···
-import { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { useRef, useEffect, useCallback, useMemo } from "react";
 
 export const useLongPress = (cb: () => void, cancel?: boolean) => {
   let longPressTimer = useRef<number>(undefined);
   let isLongPress = useRef(false);
-  let [startPosition, setStartPosition] = useState<{
+  let startPosition = useRef<{
     x: number;
     y: number;
   } | null>(null);
+  let mouseMoveListener = useRef<((e: MouseEvent) => void) | null>(null);
+  let touchMoveListener = useRef<((e: TouchEvent) => void) | null>(null);
+
+  let end = useCallback(() => {
+    // Clear the starting position
+    startPosition.current = null;
+    window.clearTimeout(longPressTimer.current);
+    longPressTimer.current = undefined;
+
+    // Remove event listeners
+    if (mouseMoveListener.current) {
+      window.removeEventListener("mousemove", mouseMoveListener.current);
+      mouseMoveListener.current = null;
+    }
+    if (touchMoveListener.current) {
+      window.removeEventListener("touchmove", touchMoveListener.current);
+      touchMoveListener.current = null;
+    }
+  }, []);
 
   let onPointerDown = useCallback(
     (e: React.MouseEvent) => {
+      let el = e.target as HTMLElement;
+      if (el.tagName === "SELECT") return;
       if (e.button === 2) {
         return;
       }
       // Set the starting position
-      setStartPosition({ x: e.clientX, y: e.clientY });
-      isLongPress.current = false;
-      longPressTimer.current = window.setTimeout(() => {
-        isLongPress.current = true;
-        cb();
-      }, 500);
-    },
-    [cb],
-  );
+      startPosition.current = { x: e.clientX, y: e.clientY };
 
-  let end = useCallback(() => {
-    // Clear the starting position
-    setStartPosition(null);
-    window.clearTimeout(longPressTimer.current);
-    longPressTimer.current = undefined;
-  }, []);
-
-  useEffect(() => {
-    if (startPosition) {
-      let listener = (e: MouseEvent) => {
+      // Add mousemove and touchmove listeners
+      mouseMoveListener.current = (e: MouseEvent) => {
+        if (!startPosition.current) return;
         // Calculate the distance moved
         const distance = Math.sqrt(
-          Math.pow(e.clientX - startPosition.x, 2) +
-            Math.pow(e.clientY - startPosition.y, 2),
+          Math.pow(e.clientX - startPosition.current.x, 2) +
+            Math.pow(e.clientY - startPosition.current.y, 2),
         );
-        // Only end if the distance is greater than 10 pixels
+        // Only end if the distance is greater than 16 pixels
         if (distance > 16) {
           end();
         }
       };
-      window.addEventListener("mousemove", listener);
-      let touchListener = (e: TouchEvent) => {
-        if (e.touches[0]) {
-          const distance = Math.sqrt(
-            Math.pow(e.touches[0].clientX - startPosition.x, 2) +
-              Math.pow(e.touches[0].clientY - startPosition.y, 2),
-          );
-          if (distance > 16) {
-            end();
-          }
+
+      touchMoveListener.current = (e: TouchEvent) => {
+        if (!startPosition.current || !e.touches[0]) return;
+        const distance = Math.sqrt(
+          Math.pow(e.touches[0].clientX - startPosition.current.x, 2) +
+            Math.pow(e.touches[0].clientY - startPosition.current.y, 2),
+        );
+        if (distance > 16) {
+          end();
         }
       };
-      window.addEventListener("touchmove", touchListener);
 
-      return () => {
-        window.removeEventListener("mousemove", listener);
-        window.removeEventListener("touchmove", touchListener);
-      };
-    }
-  }, [startPosition, end]);
+      window.addEventListener("mousemove", mouseMoveListener.current);
+      window.addEventListener("touchmove", touchMoveListener.current);
+    },
+    [cb, end],
+  );
 
   let click = useCallback((e: React.MouseEvent | React.PointerEvent) => {
     if (isLongPress.current) e.preventDefault();

src/replicache/attributes.ts

···
     type: "bluesky-post",
     cardinality: "one",
   },
+  "block/math": {
+    type: "string",
+    cardinality: "one",
+  },
+  "block/code": {
+    type: "string",
+    cardinality: "one",
+  },
+  "block/code-language": {
+    type: "string",
+    cardinality: "one",
+  },
 } as const;
 
 const MailboxAttributes = {
···
     type: "color",
     cardinality: "one",
   },
+  "theme/code-theme": {
+    type: "string",
+    cardinality: "one",
+  },
 } as const;
 
 export const Attributes = {
···
       | "embed"
       | "button"
       | "poll"
-      | "bluesky-post";
+      | "bluesky-post"
+      | "math"
+      | "code";
   };
   "canvas-pattern-union": {
     type: "canvas-pattern-union";

src/utils/focusBlock.ts

···
 
 import { useEditorStates } from "src/state/useEditorState";
 import { scrollIntoViewIfNeeded } from "./scrollIntoViewIfNeeded";
+import { getPosAtCoordinates } from "./getCoordinatesInTextarea";
+import { flushSync } from "react-dom";
 
 export function focusBlock(
   block: Pick<Block, "type" | "value" | "parent">,
   position: Position,
 ) {
   // focus the block
-  useUIState.getState().setSelectedBlock(block);
-  useUIState.getState().setFocusedBlock({
-    entityType: "block",
-    entityID: block.value,
-    parent: block.parent,
+  flushSync(() => {
+    useUIState.getState().setSelectedBlock(block);
+    useUIState.getState().setFocusedBlock({
+      entityType: "block",
+      entityID: block.value,
+      parent: block.parent,
+    });
   });
   scrollIntoViewIfNeeded(
     document.getElementById(elementId.block(block.value).container),
     false,
   );
+  if (block.type === "math" || block.type === "code") {
+    let el = document.getElementById(
+      elementId.block(block.value).input,
+    ) as HTMLTextAreaElement;
+    let pos;
+    if (position.type === "start") {
+      pos = { offset: 0 };
+    }
+
+    if (position.type === "end") {
+      pos = { offset: el.textContent?.length || 0 };
+    }
+    if (position.type === "top" || position.type === "bottom") {
+      let inputRect = el?.getBoundingClientRect();
+      let left = Math.max(position.left, inputRect?.left || 0);
+      let top =
+        position.type === "top"
+          ? (inputRect?.top || 0) + 10
+          : (inputRect?.bottom || 0) - 10;
+      pos = getPosAtCoordinates(left, top);
+    }
+
+    if (pos?.offset !== undefined) {
+      el?.focus();
+      requestAnimationFrame(() => {
+        el?.setSelectionRange(pos.offset, pos.offset);
+      });
+    }
+  }
 
   // if its not a text block, that's all we need to do
   if (block.type !== "text" && block.type !== "heading") {
···
       break;
     }
     case "top": {
+      console.log(position.left);
       pos = nextBlock.view.posAtCoords({
         top: nextBlockViewClientRect.top + 12,
         left: position.left,
       });
+      console.log(pos);
       break;
     }
     case "bottom": {

src/utils/getBlocksAsHTML.tsx

···
 import { RenderYJSFragment } from "components/Blocks/TextBlock/RenderYJSFragment";
 import { Block } from "components/Blocks/Block";
 import { List, parseBlocksToList } from "./parseBlocksToList";
+import Katex from "katex";
 
 export async function getBlocksAsHTML(
   rep: Replicache<ReplicacheMutators>,
···
 ) {
   let wrapper: undefined | "h1" | "h2" | "h3";
   let [alignment] = await scanIndex(tx).eav(b.value, "block/text-alignment");
+  if (b.type === "code") {
+    let [code] = await scanIndex(tx).eav(b.value, "block/code");
+    let [lang] = await scanIndex(tx).eav(b.value, "block/code-language");
+    return renderToStaticMarkup(
+      <pre data-lang={lang?.data.value}>{code?.data.value || ""}</pre>,
+    );
+  }
+  if (b.type === "math") {
+    let [math] = await scanIndex(tx).eav(b.value, "block/math");
+    const html = Katex.renderToString(math?.data.value || "", {
+      displayMode: true,
+      throwOnError: false,
+      macros: {
+        "\\f": "#1f(#2)",
+      },
+    });
+    return renderToStaticMarkup(
+      <div
+        data-type="math"
+        data-tex={math?.data.value}
+        data-alignment={alignment?.data.value}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />,
+    );
+  }
   if (b.type === "image") {
     let [src] = await scanIndex(tx).eav(b.value, "block/image");
     if (!src) return "";

src/utils/getCoordinatesInTextarea.ts

···
+//https://github.com/component/textarea-caret-position/blob/master/index.js
+let properties = [
+  "direction", // RTL support
+  "boxSizing",
+  "width", // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
+  "height",
+  "overflowX",
+  "overflowY", // copy the scrollbar for IE
+
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderStyle",
+
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontSize",
+  "fontSizeAdjust",
+  "lineHeight",
+  "fontFamily",
+
+  "textAlign",
+  "textTransform",
+  "textIndent",
+  "textDecoration", // might not make a difference, but better be safe
+
+  "letterSpacing",
+  "wordSpacing",
+
+  "tabSize",
+  "MozTabSize",
+];
+
+var isBrowser = typeof window !== "undefined";
+//@ts-ignore
+var isFirefox = isBrowser && window.mozInnerScreenX != null;
+
+export function getCoordinatesInTextarea(
+  element: HTMLTextAreaElement,
+  position: number,
+) {
+  if (!isBrowser) {
+    throw new Error(
+      "textarea-caret-position#getCaretCoordinates should only be called in a browser",
+    );
+  }
+
+  // The mirror div will replicate the textarea's style
+  var div = document.createElement("div");
+  div.id = "input-textarea-caret-position-mirror-div";
+  document.body.appendChild(div);
+
+  var style = div.style;
+  var computed = window.getComputedStyle(element);
+  var isInput = element.nodeName === "INPUT";
+
+  // Default textarea styles
+  style.whiteSpace = "pre-wrap";
+  if (!isInput) style.wordWrap = "break-word"; // only for textarea-s
+
+  // Position off-screen
+  style.position = "absolute"; // required to return coordinates properly
+  style.visibility = "hidden"; // not 'display: none' because we want rendering
+
+  // Transfer the element's properties to the div
+  properties.forEach(function (prop) {
+    //@ts-ignore
+    style[prop] = computed[prop];
+  });
+
+  if (isFirefox) {
+    // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
+    if (element.scrollHeight > parseInt(computed.height))
+      style.overflowY = "scroll";
+  } else {
+    style.overflow = "hidden"; // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+  }
+
+  div.textContent = element.value.substring(0, position);
+  // The second special handling for input type="text" vs textarea:
+  // spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
+  if (isInput) div.textContent = div.textContent.replace(/\s/g, "\u00a0");
+
+  var span = document.createElement("span");
+  // Wrapping must be replicated *exactly*, including when a long word gets
+  // onto the next line, with whitespace at the end of the line before (#7).
+  // The  *only* reliable way to do that is to copy the *entire* rest of the
+  // textarea's content into the <span> created at the caret position.
+  // For inputs, just '.' would be enough, but no need to bother.
+  span.textContent = element.value.substring(position) || "."; // || because a completely empty faux span doesn't render at all
+  div.appendChild(span);
+
+  var coordinates = {
+    top: span.offsetTop + parseInt(computed["borderTopWidth"]),
+    left: span.offsetLeft + parseInt(computed["borderLeftWidth"]),
+    height: parseInt(computed["lineHeight"]),
+  };
+
+  document.body.removeChild(div);
+  return coordinates;
+}
+
+export function getPosAtCoordinates(x: number, y: number) {
+  let textNode;
+  let offset;
+
+  if (document.caretPositionFromPoint) {
+    let caretPosition = document.caretPositionFromPoint(x, y);
+    textNode = caretPosition?.offsetNode;
+    offset = caretPosition?.offset;
+  } else if (document.caretRangeFromPoint) {
+    // Use WebKit-proprietary fallback method
+    let range = document.caretRangeFromPoint(x, y);
+    textNode = range?.startContainer;
+    offset = range?.startOffset;
+  }
+  return {
+    textNode,
+    offset,
+  };
+}