@spatika/editor 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spatika/editor",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "license": "MIT",
   "description": "Spatika UI — Tiptap-powered rich text editor with glass theming, AI hooks, and extensible toolbar",
   "homepage": "https://spatika.sweyam.com",

package/src/composites/ToolbarInsertPanels.test.tsx

@@ -62,6 +62,7 @@ describe("ToolbarInsertPanels", () => {
     const editor = createEditor();
     const close = vi.fn();
     const onGalleryPrefetch = vi.fn();
+    const chain = editor.chain();
 
     render(
       <ImageInsertPanel
@@ -71,13 +72,17 @@ describe("ToolbarInsertPanels", () => {
           galleryPhotos: [{ id: 1, url: "https://example.com/gallery.png", alt: "Gallery photo" }],
           onGalleryPrefetch,
           galleryOpenLabel: "Open full gallery",
+          galleryInsertWidth: "min(100%, 28rem)",
         }}
       />,
     );
 
     expect(onGalleryPrefetch).toHaveBeenCalled();
     await userEvent.click(screen.getByRole("button", { name: "Gallery photo" }));
-    expect(editor.chain).toHaveBeenCalled();
+    expect(chain.setImage).toHaveBeenCalledWith({
+      src: "https://example.com/gallery.png",
+      width: "min(100%, 28rem)",
+    });
     expect(close).toHaveBeenCalled();
   });
 

package/src/composites/ToolbarInsertPanels.tsx

@@ -1,5 +1,5 @@
 import type { Editor } from "@tiptap/core";
-import { ImagePlus, Images, Upload } from "lucide-react";
+import { Images, Upload } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { ImageInsertConfig } from "../lib/types";
 import { cn } from "../lib/cn";
@@ -75,8 +75,12 @@ export function LinkInsertPanel({ editor, close }: PanelProps) {
   );
 }
 
-function insertImageSrc(editor: Editor, src: string) {
-  editor.chain().focus().setImage({ src }).run();
+function insertImageSrc(editor: Editor, src: string, width?: string) {
+  editor
+    .chain()
+    .focus()
+    .setImage(width ? { src, width } : { src })
+    .run();
 }
 
 function resolveGalleryPhotoSrc(photo: NonNullable<ImageInsertConfig["galleryPhotos"]>[number]) {
@@ -119,7 +123,7 @@ export function ImageInsertPanel({ editor, close, config }: ImagePanelProps) {
 
   const insertGalleryPhoto = (photoUrl: string) => {
     if (!photoUrl.trim()) return;
-    insertImageSrc(editor, photoUrl);
+    insertImageSrc(editor, photoUrl, config?.galleryInsertWidth);
     close();
   };
 
@@ -244,7 +248,6 @@ export function ImageInsertPanel({ editor, close, config }: ImagePanelProps) {
           onClick={insertFromUrl}
           disabled={!url.trim()}
         >
-          <ImagePlus className="size-4" aria-hidden="true" />
           Insert
         </button>
       </div>

package/src/lib/types.ts

@@ -47,6 +47,8 @@ export type ImageInsertConfig = {
   galleryEmptyMessage?: string;
   /** Label for the host gallery action button. Default "Open gallery". */
   galleryOpenLabel?: string;
+  /** Width applied when inserting from the gallery quick-pick. */
+  galleryInsertWidth?: string;
 };
 
 export type SlashCommandItem = {

package/src/styles/editor.css

@@ -615,13 +615,20 @@
 }
 
 .spk-editor-toolbar-popover-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
   border: 0;
   border-radius: var(--radius-pill, 999px);
   padding: 0.35rem 0.75rem;
   font: inherit;
   font-size: 0.8125rem;
   font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
   cursor: pointer;
+  flex: 0 0 auto;
 }
 
 .spk-editor-toolbar-popover-btn--ghost {
@@ -718,7 +725,8 @@
 }
 
 .spk-editor-image-insert {
-  min-width: 16rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .spk-editor-image-gallery {
@@ -729,13 +737,14 @@
 
 .spk-editor-image-gallery-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.4rem;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.35rem;
 }
 
 .spk-editor-image-gallery-item {
   position: relative;
   aspect-ratio: 1;
+  max-height: 3.25rem;
   overflow: hidden;
   border: 2px solid transparent;
   border-radius: 0.65rem;
@@ -894,6 +903,8 @@
 .spk-editor-toolbar-popover-panel--portal {
   position: fixed;
   z-index: 60;
+  width: min(18rem, calc(100vw - 1.5rem));
+  max-width: min(18rem, calc(100vw - 1.5rem));
 }
 
 .spk-editor-ai-panel {