diff --git a/.changeset/tricky-feet-doubt.md b/.changeset/tricky-feet-doubt.md
new file mode 100644
index 0000000..60ceea3
--- /dev/null
+++ b/.changeset/tricky-feet-doubt.md
@@ -0,0 +1,5 @@
+---
+'@nextlint/svelte': patch
+---
+
+Fix didnt respect image plugin options
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6afadc3..747a2b3 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -30,8 +30,8 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "*",
-    "shikiji": "0.9.19"
+    "shikiji": "0.9.19",
+    "svelte": "*"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
diff --git a/packages/svelte/src/lib/Editor.svelte b/packages/svelte/src/lib/Editor.svelte
index 274472b..6f59d38 100644
--- a/packages/svelte/src/lib/Editor.svelte
+++ b/packages/svelte/src/lib/Editor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
   export type PluginOptions = {
-    selectImage?: SelectImageOptions;
+    image?: ImagePluginOptions;
     gpt?: GPTOptions;
     dropCursor?: DropcursorOptions;
   };
@@ -16,7 +16,7 @@
   import {FigureExtension} from '$lib/plugins/figure';
   import {
     SelectImageExtension,
-    type SelectImageOptions
+    type ImagePluginOptions
   } from '$lib/plugins/image';
   import {HighlightExtension} from '$lib/plugins/highlight';
   import {SlashMenu} from '$lib/plugins/slash';
@@ -26,17 +26,17 @@
     type DropcursorOptions
   } from '@tiptap/extension-dropcursor';
 
-  import Positioner from './components/Positioner/Positioner.svelte';
   import BubbleMenu from './components/BubbleMenu/BubbleMenu.svelte';
   import {BubbleMenuExtension} from './plugins/bubbleMenu/bubbleMenu';
 
   export let content: Content;
   export let placeholder = "Press 'space' GPT support, type '/' for help";
   export let onChange: (editor: Editor) => void;
-  export let onCreated = (editor: Editor) => {};
+  export let onCreated = (_editor: Editor) => {};
   export let plugins: PluginOptions = {};
   export let extensions: Extensions = [];
-  const {render, ready} = createEditorContext({
+  console.log('plugins.selectImage', plugins.image);
+  const {render} = createEditorContext({
     editable: true,
     content,
     onCreated,
@@ -53,7 +53,7 @@
       HighlightExtension,
       SlashMenu,
       FigureExtension,
-      SelectImageExtension.configure(plugins.selectImage),
+      SelectImageExtension.configure(plugins.image),
       Dropcursor.configure(plugins.dropCursor),
       NextlintCodeBlock.configure(),
       BubbleMenuExtension.configure({
@@ -67,9 +67,3 @@
 </script>
 
 <div use:render />
-
-<!-- {#await ready then _} -->
-<!--   <Positioner position="selection"> -->
-<!--     <BubbleMenu /> -->
-<!--   </Positioner> -->
-<!-- {/await} -->
diff --git a/packages/svelte/src/lib/components/BubbleMenu/BubbleMenu.svelte b/packages/svelte/src/lib/components/BubbleMenu/BubbleMenu.svelte
index 4bb77ee..9ef9c96 100644
--- a/packages/svelte/src/lib/components/BubbleMenu/BubbleMenu.svelte
+++ b/packages/svelte/src/lib/components/BubbleMenu/BubbleMenu.svelte
@@ -32,7 +32,12 @@
 
   const locked = createLockScrollStore();
 
-  const IGNORE_BLOCK_MENU = ['figure', 'NextlintCodeBlock'];
+  const IGNORE_BLOCK_MENU = [
+    'figure',
+    'NextlintCodeBlock',
+    'selectImage',
+    'doc'
+  ];
 
   $: visibleNode = (() => {
     const resolver = $editor.state.selection.$from;
@@ -53,7 +58,6 @@
     }
     return node;
   })();
-  console.log('visiblEnode', visibleNode);
   $: {
     locked.set(!!visibleNode);
   }
@@ -96,6 +100,8 @@
     $editor!.off('selectionUpdate', updateBubbleState);
     locked.set(false);
   });
+  $: {
+  }
 </script>
 
 <svelte:body use:lockscroll={locked} />
diff --git a/packages/svelte/src/lib/node-view/SvelteNodeViewRenderer.ts b/packages/svelte/src/lib/node-view/SvelteNodeViewRenderer.ts
index 258d3f8..f42973d 100644
--- a/packages/svelte/src/lib/node-view/SvelteNodeViewRenderer.ts
+++ b/packages/svelte/src/lib/node-view/SvelteNodeViewRenderer.ts
@@ -6,14 +6,15 @@ import {
   NodeView,
   type Editor,
   type NodeViewProps,
-  type NodeViewRendererProps
+  type NodeViewRendererProps,
+  type NodeViewRendererOptions as TNodeViewRendererOptions
 } from '@tiptap/core';
 
-import {writable, type Writable} from 'svelte/store';
+import {get, writable, type Writable} from 'svelte/store';
 
 import {SvelteRenderer} from './SvelteRenderer';
 
-class SvelteNodeView
+export class SvelteNodeView
   extends NodeView<ComponentType, Editor>
   implements ProseMirrorNodeView
 {
@@ -21,10 +22,13 @@ class SvelteNodeView
   store!: Writable<NodeViewProps>;
 
   constructor(
-    nodeViewOptions: NodeViewRendererOptions,
+    readonly options: NodeViewRendererOptions,
     props: NodeViewRendererProps
   ) {
-    super(nodeViewOptions.component, props);
+    super(options.component, props, {
+      stopEvent: options.stopEvent || null,
+      ignoreMutation: options.ignoreMutation || null
+    });
     this.store = writable<NodeViewProps>({
       editor: this.editor,
       node: this.node,
@@ -36,7 +40,14 @@ class SvelteNodeView
       deleteNode: () => this.deleteNode()
     });
 
-    this.renderer = new SvelteRenderer(nodeViewOptions, this.store);
+    this.renderer = new SvelteRenderer(
+      {
+        component: options.component,
+        contentAs: options.contentAs,
+        domAs: options.domAs
+      },
+      this.store
+    );
   }
 
   override get dom() {
@@ -61,27 +72,35 @@ class SvelteNodeView
     return true;
   }
 
-  selectNode() {
+  selectNode = () => {
     this.store.update(store => {
       store.selected = true;
       return store;
     });
-  }
+  };
 
-  deselectNode() {
+  deselectNode = () => {
     this.store.update(store => {
       store.selected = false;
       return store;
     });
-  }
+  };
+
+  toggleNodeSelection = () => {
+    if (get(this.store).selected) {
+      this.deselectNode();
+      return;
+    }
+    return this.selectNode();
+  };
 
   destroy() {
-    console.log('destroy');
     this.renderer.destroy();
   }
 }
 
-export interface NodeViewRendererOptions {
+export interface NodeViewRendererOptions
+  extends Partial<TNodeViewRendererOptions> {
   component: ComponentType;
   contentAs?: string;
   domAs?: string;
diff --git a/packages/svelte/src/lib/node-view/SvelteRenderer.ts b/packages/svelte/src/lib/node-view/SvelteRenderer.ts
index c6f9447..c983ea8 100644
--- a/packages/svelte/src/lib/node-view/SvelteRenderer.ts
+++ b/packages/svelte/src/lib/node-view/SvelteRenderer.ts
@@ -26,14 +26,15 @@ export class SvelteRenderer {
     this.context = {
       props,
       contentRef: (element: HTMLElement) => {
-        element.setAttribute('data-node-view-content', '');
+        element.setAttribute('data-node-view-content', 'true');
+        element.style.whiteSpace = 'inherit';
         this.contentElement = element;
       }
     };
 
     // Create dom node
     this.element = document.createElement(domAs || 'div');
-    this.element.setAttribute('data-node-view-wrapper', '');
+    this.element.setAttribute('data-node-view-root', 'true');
 
     this.component = new Component({
       target: this.element,
diff --git a/packages/svelte/src/lib/plugins/figure/Figure.svelte b/packages/svelte/src/lib/plugins/figure/Figure.svelte
index dee83eb..27d5104 100644
--- a/packages/svelte/src/lib/plugins/figure/Figure.svelte
+++ b/packages/svelte/src/lib/plugins/figure/Figure.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+  import {cn} from '$lib/helpers';
   import {useContentRef, useNodeViewProps} from '$lib/node-view';
-
-  export let contentAs = 'p';
+  import {
+    AlignVerticalSpaceAround,
+    GalleryVertical,
+    Trash2
+  } from 'lucide-svelte';
 
   const contentRef = useContentRef();
   const props = useNodeViewProps();
 
-  let {node, selected, editor, getPos} = $props;
+  let {node, editor, getPos, updateAttributes} = $props;
   $: ({node, selected} = $props);
   $: attrs = node.attrs;
 
-  const onSelect = e => {
-    e.stopPropagation();
+  const onSelect = () => {
     editor.commands.setNodeSelection(getPos());
   };
 </script>
@@ -20,18 +23,57 @@
   data-node-type="figure"
   data-align={attrs.direction}
   style="position:relative;"
-  class="figure"
-  class:selected
+  class="relative"
 >
+  {#if selected}
+    <div class="absolute inset-x-0 flex justify-center top-[-24px]">
+      <div
+        class="flex flex-row items-center bg-background shadow-md rounded-md z-[1px] py-1 px-2 gap-2"
+      >
+        <button
+          aria-label="Fit Image"
+          on:mousedown={() => updateAttributes({fit: 'contain'})}
+          class={cn(
+            attrs.fit === 'contain' ? 'bg-accent' : 'bg-background',
+            'p-[6px] rounded-md hover:bg-secondary'
+          )}
+        >
+          <AlignVerticalSpaceAround size={16} />
+        </button>
+        <button
+          aria-label="Fit View"
+          on:mousedown={() => updateAttributes({fit: 'cover'})}
+          class={cn(
+            attrs.fit === 'cover' ? 'bg-accent' : 'bg-background',
+            'p-[6px] rounded-md hover:bg-secondary'
+          )}
+        >
+          <GalleryVertical size={16} />
+        </button>
+        <div class="w-[1px] h-6 bg-border" />
+        <button
+          color="red"
+          class="p-1 text-destructive"
+          on:mousedown={$props.deleteNode}
+        >
+          <Trash2 size={16} />
+        </button>
+      </div>
+    </div>
+  {/if}
   <img
     alt={attrs.alt}
     src={attrs.src}
+    on:mousedown|preventDefault|stopPropagation={onSelect}
     style="object-fit: {attrs.fit};cursor:pointer;"
-    on:mousedown={onSelect}
+    class={cn(
+      'border-none rounded-md',
+      selected && 'outline outline-offset-1 outline-primary'
+    )}
   />
-  <svelte:element this={contentAs} use:contentRef
-    >{node.textContent}</svelte:element
-  >
+  <figcaption use:contentRef>
+    {node.textContent || 'description...'}
+  </figcaption>
 </figure>
 
 <style lang="scss">
diff --git a/packages/svelte/src/lib/plugins/figure/FigureWidget.svelte b/packages/svelte/src/lib/plugins/figure/FigureWidget.svelte
index f83e81a..09ca9aa 100644
--- a/packages/svelte/src/lib/plugins/figure/FigureWidget.svelte
+++ b/packages/svelte/src/lib/plugins/figure/FigureWidget.svelte
@@ -1,16 +1,20 @@
 <script lang="ts">
   import type {Editor} from '@tiptap/core';
-  import {Trash2} from 'lucide-svelte';
+  import {Expand, Trash2} from 'lucide-svelte';
 
   export let editor: Editor;
   const removeBlock = () => {
     editor.chain().deleteSelection().selectTextblockStart().run();
   };
+  const updateAttribute = () => {};
 </script>
 
 <div
   class="absolute top-[-44px] left-1/2 -translate-x-1/2 rounded-md bg-background text-foreground shadow-md p-1"
 >
+  <button>
+    <Expand size={20} />
+  </button>
   <button color="red" on:mousedown={removeBlock} class="p-1 text-destructive">
     <Trash2 size={20} />
   </button>
diff --git a/packages/svelte/src/lib/plugins/figure/image.ts b/packages/svelte/src/lib/plugins/figure/image.ts
index 53f3895..c6815c6 100644
--- a/packages/svelte/src/lib/plugins/figure/image.ts
+++ b/packages/svelte/src/lib/plugins/figure/image.ts
@@ -1,7 +1,7 @@
-import {mergeAttributes, Node} from '@tiptap/core';
+import {mergeAttributes, Node, type NodeViewRenderer} from '@tiptap/core';
 import {Paragraph} from '@tiptap/extension-paragraph';
 
-import {SvelteNodeViewRenderer} from '$lib/node-view';
+import {SvelteNodeView, SvelteNodeViewRenderer} from '$lib/node-view';
 
 import Figure from './Figure.svelte';
 import {createImageSettingPlugin} from './image-setting-plugin';
@@ -110,7 +110,6 @@ export const FigureExtension = Node.create<FigureOptions>({
       toggleFigure:
         attrs =>
         ({chain}) => {
-          FigureExtension.options.triggerOnMount = true;
           return chain()
             .insertContent({
               type: this.name,
@@ -120,9 +119,9 @@ export const FigureExtension = Node.create<FigureOptions>({
             .run();
         }
     };
-  },
-
-  addProseMirrorPlugins() {
-    return [createImageSettingPlugin(this.editor, FigureExtension)];
   }
+
+  // addProseMirrorPlugins() {
+  //   return [createImageSettingPlugin(this.editor, FigureExtension)];
+  // }
 });
diff --git a/packages/svelte/src/lib/plugins/image/Placeholder.svelte b/packages/svelte/src/lib/plugins/image/Placeholder.svelte
index 48507f6..ed0c4f1 100644
--- a/packages/svelte/src/lib/plugins/image/Placeholder.svelte
+++ b/packages/svelte/src/lib/plugins/image/Placeholder.svelte
@@ -3,12 +3,11 @@
   import {fade} from 'svelte/transition';
   import {ImageIcon, Trash2} from 'lucide-svelte';
 
-  import {SelectImageExtension} from './image';
   import SelectImage from './SelectImage.svelte';
   import {useNodeViewProps} from '$lib/node-view';
 
   const props = useNodeViewProps();
-  const triggerOnMount = SelectImageExtension.options.triggerOnMount;
+  const triggerOnMount = $props.extension.options.triggerOnMount;
 
   const {
     elements: {trigger, content},
diff --git a/packages/svelte/src/lib/plugins/image/SelectImage.svelte b/packages/svelte/src/lib/plugins/image/SelectImage.svelte
index 73378ba..51e5615 100644
--- a/packages/svelte/src/lib/plugins/image/SelectImage.svelte
+++ b/packages/svelte/src/lib/plugins/image/SelectImage.svelte
@@ -4,15 +4,16 @@
   import {createTabs, melt} from '@melt-ui/svelte';
   import {cubicInOut} from 'svelte/easing';
   import {crossfade} from 'svelte/transition';
-  import {onDestroy, onMount} from 'svelte';
+  import {onDestroy, onMount, tick} from 'svelte';
   import {X} from 'lucide-svelte';
 
   import UploadTab from './UploadTab.svelte';
   import EmbedTab from './EmbedTab.svelte';
   import UnplashTab from './UnplashTab.svelte';
-  import {SelectImageExtension} from './image';
+  import {useNodeViewProps} from '$lib/node-view';
 
-  const options = SelectImageExtension.options;
+  const props = useNodeViewProps();
+  const options = $props.extension.options;
 
   export let onHide = () => {};
 
@@ -32,6 +33,20 @@
     easing: cubicInOut
   });
 
+  const onInsert = async (url: string, alt: string) => {
+    const {editor, getPos, deleteNode} = $props;
+    const pos = getPos();
+    deleteNode();
+    await tick();
+    editor
+      .chain()
+      .insertContentAt(pos, {
+        type: 'figure',
+        attrs: {src: url, alt}
+      })
+      .run();
+  };
+
   const locked = createLockScrollStore();
 
   onMount(() => {
@@ -48,7 +63,7 @@
   use:melt={$root}
   use:clickoutside
   on:clickoutside={onHide}
-  class="flex w-[460px] max-h-[400px] flex-col overflow-hidden
+  class="flex w-[460px] h-[400px] flex-col overflow-hidden
   shadow-lg data-[orientation=vertical]:flex-row
   border border-border rounded-xl bg-background text-foreground"
 >
diff --git a/packages/svelte/src/lib/plugins/image/image.ts b/packages/svelte/src/lib/plugins/image/image.ts
index 0265d4e..a930251 100644
--- a/packages/svelte/src/lib/plugins/image/image.ts
+++ b/packages/svelte/src/lib/plugins/image/image.ts
@@ -14,7 +14,7 @@ declare module '@tiptap/core' {
   }
 }
 
-export interface SelectImageOptions {
+export interface ImagePluginOptions {
   handleUpload?: (file: File) => Promise<string>;
   unsplash?: {
     accessKey: string;
@@ -24,16 +24,11 @@ export interface SelectImageOptions {
 
 const imageStore = writable<NodeViewRendererProps | null>(null);
 
-export const SelectImageExtension = Node.create<SelectImageOptions>({
+export const SelectImageExtension = Node.create<ImagePluginOptions>({
   name: 'selectImage',
   group: 'block',
   atom: true,
   selectable: true,
-  addOptions() {
-    return {
-      triggerOnMount: false
-    };
-  },
 
   parseHTML() {
     return [
@@ -50,7 +45,10 @@ export const SelectImageExtension = Node.create<SelectImageOptions>({
   addNodeView() {
     return SvelteNodeViewRenderer({
       component: Placeholder,
-      domAs: 'image-placeholder'
+      domAs: 'image-placeholder',
+      stopEvent() {
+        return true;
+      }
     });
   },
 
@@ -59,7 +57,7 @@ export const SelectImageExtension = Node.create<SelectImageOptions>({
       createImageBlock:
         () =>
         ({commands, editor}) => {
-          SelectImageExtension.options.triggerOnMount = true;
+          this.options.triggerOnMount = true;
           const curSelection = editor.state.selection.$head.node(1);
           const content = [{type: this.name}];
           if (editor.state.doc.lastChild?.eq(curSelection)) {