Install tip tap

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/package.json

@@ -23,6 +23,9 @@
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@tiptap/pm": "^3.20.2",
+    "@tiptap/react": "^3.20.2",
+    "@tiptap/starter-kit": "^3.20.2",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "mermaid": "^11.13.0",

packages/ui/src/RichEditor/RichEditor.tsx

@@ -0,0 +1,18 @@
+import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu, FloatingMenu } from "@tiptap/react/menus";
+import { StarterKit } from "@tiptap/starter-kit";
+
+export const RichEditor = () => {
+  const editor = useEditor({
+    extensions: [StarterKit], // define your extension array
+    content: "<p>Hello World!</p>", // initial content
+  });
+
+  return (
+    <>
+      <EditorContent editor={editor} />
+      <FloatingMenu editor={editor}>This is the floating menu</FloatingMenu>
+      <BubbleMenu editor={editor}>This is the bubble menu</BubbleMenu>
+    </>
+  );
+};

packages/ui/src/index.ts

@@ -104,3 +104,6 @@ export { EditableRow } from "./Molecules/Table/EditableRow";
 
 // Hooks
 export { Toasts, useToast } from "./Atoms/Toasts/Toasts";
+
+// Rich editor
+export { RichEditor } from "./RichEditor/RichEditor";