@finema/core 3.23.2 → 3.24.0

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

@@ -9,27 +9,27 @@ const url = ref("");
 const active = computed(() => props.editor.isActive("link"));
 const disabled = computed(() => {
   if (!props.editor.isEditable) return true;
-  const {
-    selection
-  } = props.editor.state;
+  const { selection } = props.editor.state;
   return selection.empty && !props.editor.isActive("link");
 });
-watch(() => props.editor, (editor, _, onCleanup) => {
-  if (!editor) return;
-  const updateUrl = () => {
-    const {
-      href
-    } = editor.getAttributes("link");
-    url.value = href || "";
-  };
-  updateUrl();
-  editor.on("selectionUpdate", updateUrl);
-  onCleanup(() => {
-    editor.off("selectionUpdate", updateUrl);
-  });
-}, {
-  immediate: true
-});
+watch(
+  () => props.editor,
+  (editor, _, onCleanup) => {
+    if (!editor) return;
+    const updateUrl = () => {
+      const { href } = editor.getAttributes("link");
+      url.value = href || "";
+    };
+    updateUrl();
+    editor.on("selectionUpdate", updateUrl);
+    onCleanup(() => {
+      editor.off("selectionUpdate", updateUrl);
+    });
+  },
+  {
+    immediate: true
+  }
+);
 watch(active, (isActive) => {
   if (isActive && props.autoOpen) {
     open.value = true;
@@ -37,9 +37,7 @@ watch(active, (isActive) => {
 });
 const setLink = () => {
   if (!url.value) return;
-  const {
-    selection
-  } = props.editor.state;
+  const { selection } = props.editor.state;
   const isEmpty = selection.empty;
   const hasCode = props.editor.isActive("code");
   let chain = props.editor.chain().focus();
@@ -79,69 +77,69 @@ const handleKeyDown = (event) => {
 </script>
 
 <template>
-  <Popover
-    v-model:open="open"
-    :ui="{ content: 'p-0.5' }"
-  >
-    <Tooltip text="Link">
-      <Button
-        icon="i-lucide-link"
-        color="neutral"
-        active-color="primary"
-        variant="ghost"
-        active-variant="soft"
-        size="sm"
-        :active="active"
-        :disabled="disabled"
-      />
-    </Tooltip>
-
-    <template #content>
-      <Input
-        v-model="url"
-        autofocus
-        name="url"
-        type="url"
-        variant="none"
-        placeholder="Paste a link..."
-        @keydown="handleKeyDown"
-      >
-        <div class="mr-0.5 flex items-center">
-          <Button
-            icon="i-lucide-corner-down-left"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Apply link"
-            @click="setLink"
-          />
-
-          <Separator
-            orientation="vertical"
-            class="mx-1 h-6"
-          />
-
-          <Button
-            icon="i-lucide-external-link"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Open in new window"
-            @click="openLink"
-          />
-
-          <Button
-            icon="i-lucide-trash"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            :disabled="!url && !active"
-            title="Remove link"
-            @click="removeLink"
-          />
-        </div>
-      </Input>
-    </template>
-  </Popover>
+  <Popover
+    v-model:open="open"
+    :ui="{ content: 'p-0.5' }"
+  >
+    <Tooltip text="Link">
+      <Button
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </Tooltip>
+
+    <template #content>
+      <Input
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="mr-0.5 flex items-center">
+          <Button
+            icon="i-lucide-corner-down-left"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Apply link"
+            @click="setLink"
+          />
+
+          <Separator
+            orientation="vertical"
+            class="mx-1 h-6"
+          />
+
+          <Button
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Open in new window"
+            @click="openLink"
+          />
+
+          <Button
+            icon="i-lucide-trash"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :disabled="!url && !active"
+            title="Remove link"
+            @click="removeLink"
+          />
+        </div>
+      </Input>
+    </template>
+  </Popover>
 </template>

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

@@ -1,96 +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
+# 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