feat: add support for image

Sachin-chaurasiya · Jun 17, 2024 · 44e0709 · 44e0709
1 parent 27f5b55
commit 44e0709
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 4 deletions.
diff --git a/lib/components/BlockEditor/extension/index.ts b/lib/components/BlockEditor/extension/index.ts
@@ -7,9 +7,15 @@ import Focus from '@tiptap/extension-focus';
 import Highlight from '@tiptap/extension-highlight';
 import SelectedText from './extension-selectedText';
 import Link from './extension-link';
+import Image from '@tiptap/extension-image';
 
 export const extensions = [
-  StarterKit,
+  StarterKit.configure({
+    dropcursor: {
+      width: 4,
+      color: '#ebf6fe',
+    },
+  }),
   Placeholder.configure({
     showOnlyWhenEditable: true,
     includeChildren: true,
@@ -37,4 +43,11 @@ export const extensions = [
   Highlight,
   SelectedText,
   Link,
+  Image.configure({
+    inline: true,
+    HTMLAttributes: {
+      class: 'block-editor-image-node',
+    },
+    allowBase64: true,
+  }),
 ];
diff --git a/lib/components/Menu/BarMenu.tsx b/lib/components/Menu/BarMenu.tsx
@@ -61,6 +61,20 @@ const BarMenu: FC<BarMenuProps> = ({ editor }) => {
       .run();
   }, [editor]);
 
+  const handleSetImage = useCallback(() => {
+    const existingImage = editor.getAttributes('image').src;
+
+    const url = window.prompt(
+      existingImage ? 'Update Image URL' : 'Image URL',
+      existingImage
+    );
+    if (!url) {
+      return;
+    }
+
+    editor.chain().focus().setImage({ src: url }).run();
+  }, [editor]);
+
   const Formats = [
     [
       {
@@ -120,9 +134,9 @@ const BarMenu: FC<BarMenuProps> = ({ editor }) => {
       {
         name: 'image',
         icon: ImageIcon,
-        command: () => editor.chain().focus().run(),
-        isActive: () => false,
-        disabled: true,
+        command: () => handleSetImage(),
+        isActive: () => editor.isActive('image'),
+        disabled: false,
       },
       {
         name: 'code-block',

diff --git a/lib/styles/main.css b/lib/styles/main.css
@@ -95,3 +95,7 @@
 .block-editor a:hover {
   @apply text-blue-700;
 }
+
+.block-editor .block-editor-image-node {
+  @apply m-auto w-full h-auto;
+}
diff --git a/package.json b/package.json
@@ -75,6 +75,7 @@
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-focus": "^2.4.0",
     "@tiptap/extension-highlight": "^2.4.0",
+    "@tiptap/extension-image": "^2.4.0",
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-placeholder": "^2.4.0",
     "@tiptap/extension-task-item": "^2.4.0",

diff --git a/yarn.lock b/yarn.lock
@@ -690,6 +690,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.4.0.tgz#7f27c0778004602686251af7e2f7a8461a3d77ba"
   integrity sha512-yDgxy+YxagcEsBbdWvbQiXYxsv3noS1VTuGwc9G7ZK9xPmBHJ5y0agOkB7HskwsZvJHoaSqNRsh7oZTkf0VR3g==
 
+"@tiptap/extension-image@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.4.0.tgz#21a18e80ed6bc330cf8ab2ca990a3addb40916c8"
+  integrity sha512-NIVhRPMO/ONo8OywEd+8zh0Q6Q7EbFHtBxVsvfOKj9KtZkaXQfUO4MzONTyptkvAchTpj9pIzeaEY5fyU87gFA==
+
 "@tiptap/extension-italic@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.4.0.tgz#42ab003e04e1e8d825f698914c0e80ac849144f1"