@spatika/editor 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spatika/editor",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "license": "MIT",
   "description": "Spatika UI — Tiptap-powered rich text editor with glass theming, AI hooks, and extensible toolbar",
   "homepage": "https://spatika.sweyam.com",
@@ -58,7 +58,7 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@spatika/tokens": "1.6.0",
+    "@spatika/tokens": "^1.5.0",
     "@tiptap/core": "^3.28.0",
     "@tiptap/extension-bubble-menu": "^3.28.0",
     "@tiptap/extension-color": "^3.30.5",

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

@@ -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();
   };
 

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

@@ -718,7 +718,8 @@
 }
 
 .spk-editor-image-insert {
-  min-width: 16rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .spk-editor-image-gallery {
@@ -729,13 +730,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 +896,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 {