From fccad32ecf7ba9bc5431dabce2061ca221d90375 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 17 Aug 2023 20:37:01 +0530
Subject: [PATCH] updated image upload logic and 35% default width on upload

---
 apps/app/components/tiptap/extensions/index.tsx    | 14 --------------
 .../components/tiptap/extensions/updated-image.tsx |  6 +++++-
 .../app/components/tiptap/plugins/upload-image.tsx |  2 +-
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/apps/app/components/tiptap/extensions/index.tsx b/apps/app/components/tiptap/extensions/index.tsx
index 37e9e1df9..865bd2665 100644
--- a/apps/app/components/tiptap/extensions/index.tsx
+++ b/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",
diff --git a/apps/app/components/tiptap/extensions/updated-image.tsx b/apps/app/components/tiptap/extensions/updated-image.tsx
index c8904af20..b24ff2cc8 100644
--- a/apps/app/components/tiptap/extensions/updated-image.tsx
+++ b/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,
diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx
index ed44aa379..c10bc16a5 100644
--- a/apps/app/components/tiptap/plugins/upload-image.tsx
+++ b/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);