@finema/core 3.8.1 → 3.9.0

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "configKey": "core",
   "builder": {
     "@nuxt/module-builder": "1.0.2",

package/dist/module.mjs

@@ -4,7 +4,7 @@ import * as lodash from 'lodash-es';
 import * as theme from '../dist/runtime/theme/index.js';
 
 const name = "@finema/core";
-const version = "3.8.1";
+const version = "3.9.0";
 
 const nuxtAppOptions = {
   head: {

package/dist/runtime/components/Form/InputWYSIWYG/EditorImagePasteExtension.d.ts

@@ -0,0 +1,16 @@
+import { Extension } from '@tiptap/core';
+import type { AxiosRequestConfig } from 'axios';
+export interface ImagePasteOptions {
+    requestOptions?: Omit<AxiosRequestConfig, 'baseURL'> & {
+        baseURL: string;
+    };
+    uploadPathURL?: string;
+    bodyKey?: string;
+    responseURL?: string;
+    responsePath?: string;
+    responseName?: string;
+    responseSize?: string;
+    responseID?: string;
+    maxSize?: number;
+}
+export declare const ImagePaste: Extension<ImagePasteOptions, any>;

package/dist/runtime/components/Form/InputWYSIWYG/EditorImagePasteExtension.js

@@ -0,0 +1,106 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { useUploadLoader } from "#core/composables/useUpload";
+import { _get } from "#core/utils/lodash";
+export const ImagePaste = Extension.create({
+  name: "imagePaste",
+  addOptions() {
+    return {
+      bodyKey: "file",
+      responseURL: "url",
+      responsePath: "path",
+      responseName: "name",
+      responseSize: "size",
+      responseID: "id"
+    };
+  },
+  addProseMirrorPlugins() {
+    const options = this.options;
+    return [
+      new Plugin({
+        key: new PluginKey("imagePaste"),
+        props: {
+          handlePaste: async (view, event) => {
+            const items = Array.from(event.clipboardData?.items || []);
+            const imageItems = items.filter((item) => item.type.includes("image"));
+            if (imageItems.length === 0) {
+              return false;
+            }
+            event.preventDefault();
+            for (const item of imageItems) {
+              const file = item.getAsFile();
+              if (!file) continue;
+              if (options.maxSize && file.size > options.maxSize * 1024) {
+                console.warn(`Image size (${file.size} bytes) exceeds maximum allowed size (${options.maxSize} KB)`);
+                continue;
+              }
+              if (!options.requestOptions) {
+                console.warn("ImagePaste: requestOptions is not configured");
+                continue;
+              }
+              const {
+                schema
+              } = view.state;
+              const pos = view.state.selection.from;
+              if (schema.nodes.imageUpload) {
+                const transaction = view.state.tr.insert(pos, schema.nodes.imageUpload.create());
+                view.dispatch(transaction);
+              }
+              const request = {
+                requestOptions: options.requestOptions,
+                pathURL: options.uploadPathURL
+              };
+              const uploadLoader = useUploadLoader(request);
+              const formData = new FormData();
+              const bodyKey = options.bodyKey || "file";
+              formData.append(bodyKey, file);
+              await uploadLoader.run({
+                data: formData
+              });
+              if (uploadLoader.status.value.isSuccess && uploadLoader.data.value) {
+                const responseURL = options.responseURL || "url";
+                const url = _get(uploadLoader.data.value, responseURL);
+                if (!url) {
+                  console.error("ImagePaste: Could not find URL in response", uploadLoader.data.value);
+                  continue;
+                }
+                const currentState = view.state;
+                let placeholderPos = -1;
+                currentState.doc.descendants((node, nodePos) => {
+                  if (node.type.name === "imageUpload" && placeholderPos === -1) {
+                    placeholderPos = nodePos;
+                    return false;
+                  }
+                });
+                if (placeholderPos !== -1 && schema.nodes.image) {
+                  const imageNode = schema.nodes.image.create({
+                    src: url
+                  });
+                  let tr = currentState.tr.delete(placeholderPos, placeholderPos + 1).insert(placeholderPos, imageNode);
+                  const resolvedPos = tr.doc.resolve(placeholderPos + imageNode.nodeSize);
+                  tr = tr.setSelection(TextSelection.near(resolvedPos));
+                  view.dispatch(tr);
+                }
+              } else if (uploadLoader.status.value.isError) {
+                console.error("ImagePaste: Upload failed", uploadLoader.status.value.errorData);
+                const currentState = view.state;
+                let placeholderPos = -1;
+                currentState.doc.descendants((node, nodePos) => {
+                  if (node.type.name === "imageUpload" && placeholderPos === -1) {
+                    placeholderPos = nodePos;
+                    return false;
+                  }
+                });
+                if (placeholderPos !== -1) {
+                  const tr = currentState.tr.delete(placeholderPos, placeholderPos + 1);
+                  view.dispatch(tr);
+                }
+              }
+            }
+            return true;
+          }
+        }
+      })
+    ];
+  }
+});

package/dist/runtime/components/Form/InputWYSIWYG/README.md

@@ -0,0 +1,96 @@
+# InputWYSIWYG - TipTap WYSIWYG Editor
+
+A rich text editor component built with TipTap that supports text formatting, images, and more.
+
+## Features
+
+- **Text Formatting**: Bold, italic, underline, strikethrough, code
+- **Headings**: H1, H2, H3, H4
+- **Lists**: Bullet lists and ordered lists
+- **Text Alignment**: Left, center, right, justify
+- **Blockquotes and Code Blocks**
+- **Links**: Add and edit links with a popover interface
+- **Image Upload**: Upload images via button click
+- **Image Paste**: ✨ **NEW** - Copy and paste images directly from your computer
+- **Horizontal Rules**
+- **Undo/Redo**
+
+## Image Paste Feature
+
+The editor now supports pasting images directly from your clipboard! This works in two ways:
+
+### 1. Copy from File System
+- Copy an image file from your file explorer/finder
+- Click into the editor
+- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
+- The image will automatically upload and insert into the editor
+
+### 2. Copy from Screenshot
+- Take a screenshot (or copy an image from any application)
+- Click into the editor
+- Press `Cmd+V` (Mac) or `Ctrl+V` (Windows/Linux)
+- The image will automatically upload and insert into the editor
+
+### How It Works
+
+The `ImagePaste` extension intercepts paste events and:
+1. Detects if the clipboard contains image data
+2. Validates the image size (if `maxSize` is configured)
+3. Inserts a placeholder/loading node
+4. Uploads the image to your configured endpoint
+5. Replaces the placeholder with the actual image once uploaded
+
+## Usage
+
+```vue
+<template>
+  <InputWYSIWYG
+    name="content"
+    label="Content"
+    :image="{
+      requestOptions: useRequestOptions().getFile(),
+      uploadPathURL: '/uploads',
+      maxSize: 5120, // 5MB in KB
+      bodyKey: 'file',
+      responseURL: 'url',
+      responsePath: 'path',
+      responseName: 'name',
+      responseSize: 'size',
+      responseID: 'id',
+    }"
+  />
+</template>
+```
+
+## Configuration
+
+### Image Upload Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `requestOptions` | `AxiosRequestConfig` | - | Axios configuration for upload requests |
+| `uploadPathURL` | `string` | - | API endpoint path for uploads |
+| `bodyKey` | `string` | `'file'` | Form data key for the file |
+| `responseURL` | `string` | `'url'` | Path to URL in upload response |
+| `responsePath` | `string` | `'path'` | Path to file path in response |
+| `responseName` | `string` | `'name'` | Path to file name in response |
+| `responseSize` | `string` | `'size'` | Path to file size in response |
+| `responseID` | `string` | `'id'` | Path to file ID in response |
+| `maxSize` | `number` | - | Maximum file size in KB |
+
+## Extensions
+
+The component uses the following TipTap extensions:
+
+- **TextAlign**: For text alignment options
+- **ImageUpload**: Custom extension for manual image uploads via button
+- **ImagePaste**: Custom extension for pasting images from clipboard
+
+## Files
+
+- `index.vue` - Main component
+- `EditorImageUploadExtension.ts` - Extension for manual image upload
+- `EditorImageUploadNode.vue` - Vue component for image upload UI
+- `EditorImagePasteExtension.ts` - Extension for paste image functionality
+- `EditorLinkPopover.vue` - Link editing popover
+- `types.ts` - TypeScript type definitions

package/dist/runtime/components/Form/InputWYSIWYG/index.vue

@@ -14,7 +14,7 @@
     types: ['heading', 'paragraph'],
     alignments: ['left', 'center', 'right', 'justify']
   }),
-  ImageUpload.configure(image)
+  ...image.requestOptions ? [ImageUpload.configure(image), ImagePaste.configure(image)] : []
 ]"
         :ui="{
   content: '',
@@ -61,6 +61,7 @@ import { wysiwygTheme } from "#core/theme/wysiwyg";
 import { useUiConfig } from "#core/composables/useConfig";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { ImageUpload } from "./EditorImageUploadExtension";
+import { ImagePaste } from "./EditorImagePasteExtension";
 import EditorLinkPopover from "./EditorLinkPopover.vue";
 const props = defineProps({
   editable: { type: Boolean, required: false, default: () => true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finema/core",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "repository": "https://gitlab.finema.co/finema/ui-kit",
   "license": "MIT",
   "author": "Finema Dev Core Team",