feat: add image functionality

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>

Author: ayushnirwal

packages/frappe-ui-react/package.json

@@ -46,6 +46,7 @@
     "@tiptap/extension-code-block-lowlight": "^3.17.1",
     "@tiptap/extension-highlight": "^3.17.1",
     "@tiptap/extension-horizontal-rule": "^3.17.1",
+    "@tiptap/extension-image": "^3.19.0",
     "@tiptap/extension-list": "^3.17.1",
     "@tiptap/extension-placeholder": "^3.17.1",
     "@tiptap/extension-strike": "^3.17.1",

packages/frappe-ui-react/src/components/textEditor/menu/commands/index.ts

@@ -25,6 +25,7 @@ import {
   TableIcon,
   TypeIcon,
   Undo2Icon,
+  Image,
 } from "lucide-react";
 
 /**
@@ -264,6 +265,17 @@ export const COMMANDS: Record<TYPE_COMMANDS_KEYS, EditorCommand> = {
     isDisabled: (editor) => !editor.can().redo(),
     isActive: () => false,
   },
+  select_image: {
+    label: "Image",
+    icon: Image,
+    action: () => {
+      const inpEle = document.getElementById("fileInput");
+      if (inpEle) {
+        inpEle.click();
+      }
+    },
+    isActive: () => false,
+  },
 };
 
 export default COMMANDS;

packages/frappe-ui-react/src/components/textEditor/menu/commands/types.ts

@@ -39,6 +39,7 @@ export const COMMANDS_KEYS = [
   "redo",
   "codeblock",
   "horizontal_rule",
+  "select_image",
 ] as const;
 
 export type TYPE_COMMANDS_KEYS = (typeof COMMANDS_KEYS)[number];

packages/frappe-ui-react/src/components/textEditor/menu/menu.tsx

@@ -60,6 +60,7 @@ const DEFAULT_COMMANDS: Array<
   "undo",
   "redo",
   "horizontal_rule",
+  "select_image",
 ];
 
 const Menu = ({ className }: MenuProps) => {

packages/frappe-ui-react/src/components/textEditor/textEditor.tsx

@@ -12,7 +12,9 @@ import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Strike from "@tiptap/extension-strike";
 import Placeholder from "@tiptap/extension-placeholder";
 import { TableKit } from "@tiptap/extension-table";
+import Image from "@tiptap/extension-image";
 import clsx from "clsx";
+import type { ChangeEventHandler } from "react";
 
 /**
  * Internal dependencies.
@@ -22,6 +24,7 @@ import { normalizeClasses } from "../../utils";
 import type { TextEditorProps } from "./types";
 import FixedMenu from "./menu/fixedMenu";
 import { ExtendedCodeBlock } from "./extension/codeBlock";
+import { getBase64File } from "./utils/getBase64File";
 
 const TextEditor = ({
   content,
@@ -39,6 +42,7 @@ const TextEditor = ({
   Top,
   Editor,
   Bottom,
+  uploadFunction = getBase64File,
 }: TextEditorProps) => {
   const editor = useEditor(
     {
@@ -83,6 +87,12 @@ const TextEditor = ({
           },
         }),
         ExtendedCodeBlock,
+        Image.configure({
+          allowBase64: true,
+          resize: {
+            enabled: true,
+          },
+        }),
         ...extensions,
       ],
       onUpdate: ({ editor }) => {
@@ -112,8 +122,34 @@ const TextEditor = ({
     ]
   );
 
+  const handleUpload: ChangeEventHandler<HTMLInputElement> = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file || !editor) return;
+    if (!file.type.startsWith("image/")) {
+      return;
+    }
+
+    const res = await uploadFunction(file);
+    const url = res.file_url;
+
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+
+    e.target.value = "";
+  };
+
   return (
     <EditorContext.Provider value={{ editor }}>
+      {/* Invisible field to provide upload functionality */}
+      <input
+        id="fileInput"
+        type="file"
+        style={{
+          visibility: "hidden",
+        }}
+        onChange={handleUpload}
+      />
       {Top && <Top />}
       {fixedMenu && <FixedMenu />}
       {Editor ? <Editor editor={editor} /> : <EditorContent editor={editor} />}

packages/frappe-ui-react/src/components/textEditor/types.ts

@@ -3,7 +3,22 @@
  */
 import { Editor, type Extension } from "@tiptap/react";
 import type { StarterKitOptions } from "@tiptap/starter-kit";
-import type { FC } from "react";
+
+export interface UploadedFile {
+  file_name: string;
+  file_size: number;
+  file_url: string;
+  name?: string;
+  owner?: string;
+  creation?: string;
+  modified?: string;
+  modified_by?: string;
+  is_private?: 0 | 1;
+  file_type?: string;
+  folder?: string;
+  is_folder?: 0 | 1;
+  content_hash?: string;
+}
 
 export interface TextEditorProps {
   // Props
@@ -21,9 +36,11 @@ export interface TextEditorProps {
   onBlur?: (event: FocusEvent) => void;
   onTransaction?: (editor: Editor) => void;
   // Slots
-  Top?: FC;
-  Editor?: FC<{ editor: Editor }>;
-  Bottom?: FC;
+  Top?: React.FC;
+  Editor?: React.FC<{ editor: Editor }>;
+  Bottom?: React.FC;
+  // handlers
+  uploadFunction?: (file: File) => Promise<UploadedFile>;
 }
 
 export interface EditorCommand {

packages/frappe-ui-react/src/components/textEditor/utils/getBase64File.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies.
+ */
+import type { UploadedFile } from "../types";
+
+export const getBase64File = async (file: File): Promise<UploadedFile> => {
+  const base64Url = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const result = event.target?.result;
+      if (typeof result === "string") {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to read file as base64"));
+      }
+    };
+    reader.onerror = () => {
+      reject(new Error("Error reading file"));
+    };
+    reader.readAsDataURL(file);
+  });
+  return {
+    file_name: file.name,
+    file_size: file.size,
+    file_url: base64Url,
+  };
+};