updated image upload logic and 35% default width on upload

apps/app/components/tiptap/extensions/index.tsx

@@ -1,7 +1,6 @@
 import StarterKit from "@tiptap/starter-kit";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import TiptapLink from "@tiptap/extension-link";
-import TiptapImage from "@tiptap/extension-image";
 import Placeholder from "@tiptap/extension-placeholder";
 import TiptapUnderline from "@tiptap/extension-underline";
 import TextStyle from "@tiptap/extension-text-style";
@@ -18,19 +17,12 @@ import { InputRule } from "@tiptap/core";
 import ts from "highlight.js/lib/languages/typescript";
 
 import "highlight.js/styles/github-dark.css";
-import UploadImagesPlugin from "../plugins/upload-image";
 import UniqueID from "@tiptap-pro/extension-unique-id";
 import UpdatedImage from "./updated-image";
 import isValidHttpUrl from "../bubble-menu/utils/link-validator";
 
 lowlight.registerLanguage("ts", ts);
 
-const CustomImage = TiptapImage.extend({
-  addProseMirrorPlugins() {
-    return [UploadImagesPlugin()];
-  },
-});
-
 export const TiptapExtensions = [
   StarterKit.configure({
     bulletList: {
@@ -102,12 +94,6 @@ export const TiptapExtensions = [
         "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
-  CustomImage.configure({
-    allowBase64: true,
-    HTMLAttributes: {
-      class: "rounded-lg border border-custom-border-300",
-    },
-  }),
   UpdatedImage.configure({
     HTMLAttributes: {
       class: "rounded-lg border border-custom-border-300",

apps/app/components/tiptap/extensions/updated-image.tsx

@@ -1,11 +1,15 @@
 import Image from "@tiptap/extension-image";
+import UploadImagesPlugin from "../plugins/upload-image";
 
 const UpdatedImage = Image.extend({
+  addProseMirrorPlugins() {
+    return [UploadImagesPlugin()];
+  },
   addAttributes() {
     return {
       ...this.parent?.(),
       width: {
-        default: null,
+        default: '35%',
       },
       height: {
         default: null,

apps/app/components/tiptap/plugins/upload-image.tsx

@@ -24,7 +24,7 @@ const UploadImagesPlugin = () =>
           const image = document.createElement("img");
           image.setAttribute(
             "class",
-            "opacity-10 rounded-lg border border-custom-border-300",
+            "w-[35%] opacity-10 rounded-lg border border-custom-border-300",
           );
           image.src = src;
           placeholder.appendChild(image);