From 1e5338bc44d2f8d0cf66ecf7c3d4072fae846197 Mon Sep 17 00:00:00 2001
From: maelstrom <maelstrom@maelstrom.dev>
Date: Thu, 7 May 2026 16:13:42 +0200
Subject: [PATCH] some formatting stuff

---
 src/lib/richtext/editor-dom.tsx |  4 +++
 src/lib/richtext/editor.tsx     | 50 ++++++++++++++++++++++++---------
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/lib/richtext/editor-dom.tsx b/src/lib/richtext/editor-dom.tsx
index 157d696..52f0078 100644
--- a/src/lib/richtext/editor-dom.tsx
+++ b/src/lib/richtext/editor-dom.tsx
@@ -68,6 +68,7 @@ function ParagraphElement(props: RenderElementProps) {
 
 export interface DOMEditorRef extends DOMImperativeFactory {
   toggleStyle: (style: JSONValue) => void;
+  setFormat: (format: JSONValue) => void;
 }
 
 export function DOMEditor({
@@ -87,6 +88,9 @@ export function DOMEditor({
           const set = (Editor.marks(editor) ?? {} as any)[style as string] as (boolean | undefined) ?? false;
           Editor.addMark(editor, style as string, !set);
         },
+        setFormat: (format) => {
+          Transforms.setNodes(editor, { format: format as string } as any)
+        }
       };
     });
 
diff --git a/src/lib/richtext/editor.tsx b/src/lib/richtext/editor.tsx
index 6b989df..ea95d37 100644
--- a/src/lib/richtext/editor.tsx
+++ b/src/lib/richtext/editor.tsx
@@ -2,6 +2,7 @@ import { Pressable, StyleSheet, View, ViewProps } from "react-native";
 import { DOMEditor, DOMEditorRef } from "./editor-dom";
 import { useRef, useState } from "react";
 import FontAwesome from "@expo/vector-icons/FontAwesome";
+import { Select, SelectItem } from "@/src/components/primitive/Select";
 
 const styles = StyleSheet.create({
   toolbar: {
@@ -15,11 +16,16 @@ const styles = StyleSheet.create({
   toolbarButton: {},
 });
 
-// function FormatMenu() {
-//   return <Select>
-
-//   </Select>
-// }
+function FormatMenu({ onSelected }: { onSelected: (format: string) => void }) {
+  return (
+    <Select onSelected={onSelected}>
+      <SelectItem default name={"regular"}>
+        Regular
+      </SelectItem>
+      <SelectItem name={"h1"}>Heading</SelectItem>
+    </Select>
+  );
+}
 
 function ToolbarButton({
   icon,
@@ -35,13 +41,25 @@ function ToolbarButton({
   );
 }
 
-function Toolbar({ pos, toggleStyle }: { pos: [number, number]; toggleStyle: (style: string) => void }) {
+function Toolbar({
+  pos,
+  toggleStyle,
+  setFormat,
+}: {
+  pos: [number, number];
+  toggleStyle: (style: string) => void;
+  setFormat: (format: string) => void;
+}) {
   return (
     <View style={[styles.toolbar, { left: pos?.[0], top: pos?.[1] }]}>
-      <ToolbarButton icon="bold" onPress={() => toggleStyle('bold')} />
-      <ToolbarButton icon="italic" onPress={() => toggleStyle('italic')} />
-      <ToolbarButton icon="strikethrough" onPress={() => toggleStyle('strike')} />
-      <ToolbarButton icon="subscript" onPress={() => toggleStyle('small')} />
+      <FormatMenu onSelected={setFormat} />
+      <ToolbarButton icon="bold" onPress={() => toggleStyle("bold")} />
+      <ToolbarButton icon="italic" onPress={() => toggleStyle("italic")} />
+      <ToolbarButton
+        icon="strikethrough"
+        onPress={() => toggleStyle("strike")}
+      />
+      <ToolbarButton icon="subscript" onPress={() => toggleStyle("small")} />
     </View>
   );
 }
@@ -53,19 +71,23 @@ export function RichTextEditor({
 }: ViewProps & { minHeight?: number }) {
   const editor = useRef<DOMEditorRef>(null);
   const [pos, setPos] = useState<[number, number] | undefined>(undefined);
-  
+
   const onMoveToolbar = (rect?: DOMRect) => {
     setPos(rect ? [rect.left, rect.top - rect.height - 20] : undefined);
   };
 
   const toggleStyle = (style: string) => {
-    editor.current?.toggleStyle(style)
-  }
+    editor.current?.toggleStyle(style);
+  };
+
+  const setFormat = (format: string) => {
+    editor.current?.setFormat(format);
+  };
 
   return (
     <View style={style}>
       <DOMEditor onMoveToolbar={onMoveToolbar} ref={editor} />
-      {pos && <Toolbar pos={pos} toggleStyle={toggleStyle} />}
+      {pos && <Toolbar pos={pos} toggleStyle={toggleStyle} setFormat={setFormat} />}
     </View>
   );
 }
-- 
2.51.2