code16 · aguingand · Apr 30, 2025 · Apr 29, 2025 · Apr 30, 2025 · Apr 30, 2025
diff --git a/resources/css/shadcn.css b/resources/css/shadcn.css
@@ -62,6 +62,16 @@
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 240 4.9% 83.9%;
   }
+
+  .dark {
+    --text-destructive: oklch(0.704 0.191 22.216);
+  }
+}
+
+@layer utilities {
+  .text-destructive {
+    @apply dark:text-[var(--text-destructive)];
+  }
 }
 
 

diff --git a/resources/js/form/components/Form.vue b/resources/js/form/components/Form.vue
@@ -33,6 +33,7 @@
         postFn?: (data: FormData['data']) => Promise<ApiResponse<any>>,
         showErrorAlert?: boolean,
         errorAlertMessage?: string,
+        persistThumbnailUrl?: boolean,
         tab?: string,
     }>();
 
@@ -227,6 +228,7 @@
                                                                                                 :value="form.data[fieldLayout.key]"
                                                                                                 :locale="(form.getMeta(fieldLayout.key) as FieldMeta)?.locale ?? form.defaultLocale"
                                                                                                 :parent-data="form.data"
+                                                                                                :persist-thumbnail-url="props.persistThumbnailUrl"
                                                                                                 :row="row"
                                                                                                 root
                                                                                                 @input="(value, options) => onFieldInput(fieldLayout.key, value, options)"
@@ -253,6 +255,7 @@
                                                                 :locale="(form.getMeta(fieldLayout.key) as FieldMeta)?.locale ?? form.currentLocale"
                                                                 :row="row as LayoutFieldData[]"
                                                                 :parent-data="form.data"
+                                                                :persist-thumbnail-url="props.persistThumbnailUrl"
                                                                 root
                                                                 @input="(value, options) => onFieldInput(fieldLayout.key, value, options)"
                                                                 @locale-change="onFieldLocaleChange(fieldLayout.key, $event)"

diff --git a/resources/js/form/components/FormFieldLayout.vue b/resources/js/form/components/FormFieldLayout.vue
@@ -12,6 +12,10 @@
 
     import LocaleSelectTrigger from "@/components/LocaleSelectTrigger.vue";
 
+    defineOptions({
+        inheritAttrs: false
+    });
+
     const props = defineProps<FormFieldProps<FormFieldData, any> & {
         class?: string,
         fieldGroup?: boolean,

diff --git a/...ponents/fields/editor/extensions/Paste.ts → ...nts/fields/editor/extensions/Clipboard.ts b/...ponents/fields/editor/extensions/Paste.ts → ...nts/fields/editor/extensions/Clipboard.ts
@@ -1,9 +1,10 @@
-import { Extension } from "@tiptap/core";
+import { Command, Extension } from "@tiptap/core";
 import { Plugin } from '@tiptap/pm/state';
 import { DOMParser, Schema } from '@tiptap/pm/model';
+import { __ } from "@/utils/i18n";
 
-export const Paste = Extension.create({
-    name: 'paste',
+export const Clipboard = Extension.create({
+    name: 'clipboard',
     addOptions() {
         return {
             schema: null,
@@ -19,7 +20,7 @@ export const Paste = Extension.create({
         return [
             new Plugin({
                 props: {
-                    clipboardParser: parser,
+                    // clipboardParser: parser,
                     clipboardTextParser: (text, $context) => {
                         if(this.options.inline) {
                             const dom = document.createElement('div');
@@ -44,8 +45,45 @@ export const Paste = Extension.create({
             })
         ]
     },
+    addCommands() {
+        return {
+            copyNode: (pos: number): Command => ({ editor, dispatch }) => {
+                if(dispatch) {
+                    editor.commands.setNodeSelection(pos);
+                    const clipboardData = new DataTransfer();
+                    const event = new ClipboardEvent('copy', {
+                        bubbles: true,
+                        cancelable: true,
+                        clipboardData,
+                    });
+
+                    editor.view.dom.dispatchEvent(event);
+
+                    const clipboardItem = new ClipboardItem({
+                        'text/html': clipboardData.getData('text/html'),
+                        'text/plain': clipboardData.getData('text/plain'),
+                    });
+
+                    navigator.clipboard.write([clipboardItem]).then(() => {
+                    }).catch(err => {
+                        alert(__('sharp::errors.failed_to_write_to_clipboard'));
+                    });
+                }
+
+                return true;
+            },
+        }
+    }
 });
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        'clipboard': {
+            copyNode: (pos: number) => ReturnType
+        }
+    }
+}
+
 // needed to keep same references of node/mark types
 function getNormalizedSchema(target, source) {
     const schema = new Schema(target.spec);

diff --git a/resources/js/form/components/fields/editor/extensions/Selection.ts b/resources/js/form/components/fields/editor/extensions/Selection.ts
@@ -46,7 +46,7 @@ export const Selection = Extension.create({
 
                     state.doc.nodesBetween(selection.from, selection.to, (node, position) => {
                         if (node.isBlock) {
-                            decorations.push(Decoration.node(position, position + node.nodeSize, { class: 'selected' }));
+                            decorations.push(Decoration.node(position, position + node.nodeSize, { 'data-textselected': 'true' }));
                         }
                     });
 

diff --git a/resources/js/form/components/fields/editor/extensions/embed/EmbedNode.vue b/resources/js/form/components/fields/editor/extensions/embed/EmbedNode.vue
@@ -24,6 +24,7 @@
     const embedData = computed(() => embedManager.getEmbed(props.node.attrs['data-key'], props.extension.options.embed));
 
     function onRemove() {
+        props.editor.commands.setNodeSelection(props.getPos());
         props.deleteNode();
         setTimeout(() => {
             props.editor.commands.focus();
@@ -42,7 +43,7 @@
 
 <template>
     <NodeRenderer
-        class="my-4 first:mt-0 last:mb-0 border rounded-md items-center p-4 flex gap-4"
+        class="my-4 first:mt-0 last:mb-0 border rounded-md items-center p-4 flex gap-4 group-focus/editor:data-[textselected]:border-primary"
         :class="{ 'group-focus/editor:border-primary': props.selected }"
         :node="node"
     >
@@ -67,8 +68,11 @@
                         <DropdownMenuItem @click="embedModal.open({ id: node.attrs['data-key'], embed: extension.options.embed })">
                             {{ __('sharp::form.editor.extension_node.edit_button') }}
                         </DropdownMenuItem>
-                        <DropdownMenuSeparator />
                     </template>
+                    <DropdownMenuItem @click="props.editor.commands.copyNode(props.getPos())">
+                        {{ __('sharp::form.editor.extension_node.copy_button') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
                     <DropdownMenuItem class="text-destructive" @click="onRemove">
                         {{ __('sharp::form.editor.extension_node.remove_button') }}
                     </DropdownMenuItem>

diff --git a/resources/js/form/components/fields/editor/extensions/html/HtmlNode.vue b/resources/js/form/components/fields/editor/extensions/html/HtmlNode.vue
@@ -34,6 +34,7 @@
     }
 
     function onRemove() {
+        props.editor.commands.setNodeSelection(props.getPos());
         props.deleteNode();
         setTimeout(() => {
             props.editor.commands.focus();

diff --git a/resources/js/form/components/fields/editor/extensions/iframe/IframeNode.vue b/resources/js/form/components/fields/editor/extensions/iframe/IframeNode.vue
@@ -49,6 +49,7 @@
     }
 
     function onRemove() {
+        props.editor.commands.setNodeSelection(props.getPos());
         props.deleteNode();
         setTimeout(() => {
             props.editor.commands.focus();
@@ -114,6 +115,9 @@
                     <DropdownMenuItem @click="onEdit()">
                         {{ __('sharp::form.editor.extension_node.edit_button') }}
                     </DropdownMenuItem>
+                    <DropdownMenuItem @click="props.editor.commands.copyNode(props.getPos())">
+                        {{ __('sharp::form.editor.extension_node.copy_button') }}
+                    </DropdownMenuItem>
                     <DropdownMenuSeparator />
                     <DropdownMenuItem class="text-destructive" @click="onRemove()">
                         {{ __('sharp::form.editor.extension_node.remove_button') }}

diff --git a/resources/js/form/components/fields/editor/extensions/index.ts b/resources/js/form/components/fields/editor/extensions/index.ts
@@ -29,7 +29,7 @@ import { Selection } from './Selection';
 import { Html } from './html/Html';
 import { TrailingNode } from './TrailingNode';
 import { Iframe } from './iframe/Iframe';
-import { Paste } from './Paste';
+import { Clipboard } from './Clipboard';
 import { Small } from './Small';
 import { CharacterCount } from '@tiptap/extension-character-count';
 import { FormEditorFieldData, FormEditorToolbarButton } from "@/types";
@@ -120,7 +120,7 @@ function getExtensions(field: FormEditorFieldData) {
 export function getExtensionsForEditor(field: FormEditorFieldData) {
     return [
         ...getExtensions(field),
-        Paste.configure({
+        Clipboard.configure({
             schema: getSchema(getExtensions({
                 ...field,
                 toolbar: field.toolbar ?? [], // if no toolbar, prevent pasting formatted HTML

diff --git a/resources/js/form/components/fields/editor/extensions/upload/EditorUploadModal.vue b/resources/js/form/components/fields/editor/extensions/upload/EditorUploadModal.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-    import { FormFieldProps } from "@/form/types";
     import { FormEditorFieldData } from "@/types";
     import { nextTick, ref, useTemplateRef } from "vue";
     import { Form } from "@/form/Form";
@@ -104,6 +103,7 @@
             <SharpForm
                 :form="modalUpload.form"
                 :post-fn="postForm"
+                persist-thumbnail-url
                 modal
                 ref="modalForm"
             />

diff --git a/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue b/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue
@@ -9,6 +9,7 @@
     import { ExtensionNodeProps } from "@/form/components/fields/editor/types";
     import { useParentEditor } from "@/form/components/fields/editor/useParentEditor";
     import { useEditorNode } from "@/form/components/fields/editor/useEditorNode";
+    import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 
     const props = defineProps<ExtensionNodeProps<typeof UploadExtension, UploadNodeAttributes>>();
 
@@ -57,6 +58,7 @@
     }
 
     function onRemove() {
+        props.editor.commands.setNodeSelection(props.getPos());
         props.deleteNode();
         setTimeout(() => {
             props.editor.commands.focus();
@@ -85,6 +87,7 @@
             :field-error-key="`${parentEditor.props.fieldErrorKey}-upload-${props.node.attrs['data-key']}`"
             :value="upload?.file"
             as-editor-embed
+            persist-thumbnail-url
             :legend="upload.legend"
             :dropdown-edit-label="parentEditor.props.field.uploads.fields.legend ? __('sharp::form.editor.extension_node.edit_button') : null"
             :aria-label="props.node.attrs.isImage
@@ -97,6 +100,12 @@
             @remove="onRemove"
             @edit="onEdit"
             ref="uploadComponent"
-        />
+        >
+            <template #dropdown-menu>
+                <DropdownMenuItem @click="props.editor.commands.copyNode(props.getPos())">
+                    {{ __('sharp::form.editor.extension_node.copy_button') }}
+                </DropdownMenuItem>
+            </template>
+        </Upload>
     </NodeRenderer>
 </template>
diff --git a/resources/js/form/components/fields/upload/Upload.vue b/resources/js/form/components/fields/upload/Upload.vue
@@ -47,6 +47,7 @@
         legend?: string,
         dropdownEditLabel?: string,
         ariaLabel?: string,
+        persistThumbnailUrl?: boolean,
     }>();
 
     defineOptions({
@@ -131,6 +132,10 @@
                 });
                 await onImageTransform(cropper);
                 cropper.destroy();
+            } else if(props.persistThumbnailUrl) {
+                const response = await fetch(preview);
+                const blob = await response.blob();
+                transformedImg.value = URL.createObjectURL(blob);
             }
         })
         .on('upload', () => {
@@ -381,6 +386,9 @@
 
     onUnmounted(() => {
         uppy.destroy();
+        if(!props.persistThumbnailUrl && transformedImg.value) {
+            URL.revokeObjectURL(transformedImg.value);
+        }
         emit('uploading', false);
     });
 </script>
@@ -482,6 +490,7 @@
                                             {{ props.dropdownEditLabel ?? __('sharp::form.upload.edit_button') }}
                                         </DropdownMenuItem>
                                     </template>
+                                    <slot name="dropdown-menu"></slot>
                                     <DropdownMenuSeparator class="first:hidden" />
                                     <DropdownMenuItem class="text-destructive" @click="onRemove">
                                         {{ __('sharp::form.upload.remove_button') }}

diff --git a/resources/lang/en/errors.php b/resources/lang/en/errors.php
@@ -3,4 +3,5 @@
 return [
     'file_not_found' => 'This file can not be found.',
     '419.status_displayed_in_login_page' => 'Your session has expired. Please login again.',
+    'failed_to_write_to_clipboard' => 'Failed to write to clipboard. Please check your browser settings.',
 ];
diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php
@@ -71,6 +71,7 @@
     'editor.extension_node.dropdown_button.aria_label' => 'Actions',
     'editor.extension_node.edit_button' => 'Edit...',
     'editor.extension_node.remove_button' => 'Remove',
+    'editor.extension_node.copy_button' => 'Copy',
     'editor.extension_node.upload.aria_label' => 'Embedded file',
     'editor.extension_node.upload_image.aria_label' => 'Embedded image',
 

diff --git a/resources/lang/fr/errors.php b/resources/lang/fr/errors.php
@@ -3,4 +3,5 @@
 return [
     'file_not_found' => 'Ce fichier est introuvable.',
     '419.status_displayed_in_login_page' => 'Votre session a expirée. Veuillez vous reconnecter.',
+    'failed_to_write_to_clipboard' => 'Erreur lord de l’écriture dans le presse-papiers. Veuillez vérifier les paramètres de votre navigateur.',
 ];
diff --git a/resources/lang/fr/form.php b/resources/lang/fr/form.php
@@ -71,6 +71,7 @@
     'editor.extension_node.dropdown_button.aria_label' => 'Actions',
     'editor.extension_node.edit_button' => 'Modifier...',
     'editor.extension_node.remove_button' => 'Supprimer',
+    'editor.extension_node.copy_button' => 'Copier',
     'editor.extension_node.upload.aria_label' => 'Fichier intégré',
     'editor.extension_node.upload_image.aria_label' => 'Image intégré',
 

diff --git a/src/Http/Middleware/HandleInertiaRequests.php b/src/Http/Middleware/HandleInertiaRequests.php
@@ -71,6 +71,7 @@ public function share(Request $request)
                     'sharp::form',
                     'sharp::menu',
                     'sharp::modals',
+                    'sharp::errors',
                     'sharp::pages/auth/forgot-password',
                     'sharp::pages/auth/login',
                     'sharp::pages/auth/impersonate',