wip improve editor

Author: aguingand

resources/js/form/components/fields/editor/Editor.vue

@@ -197,7 +197,7 @@
         setTimeout(() => editor.value.commands.focus());
     });
 
-    async function onLocaleChange(locale: string, focus?:boolean) {
+    async function onLocaleChange(locale: string, focus?: boolean) {
         emit('locale-change', locale);
         if(focus) {
             setTimeout(() => {
@@ -230,12 +230,12 @@
             :style="{'--height':`${fullscreenPlaceholderHeight}px`}"
         ></div>
 
-        <EditorMaybeFullscreenDialog v-model:fullscreen="isFullscreen">
+        <EditorMaybeFullscreenDialog v-bind="props" v-model:fullscreen="isFullscreen">
             <div
                 :class="cn(
                 'editor flex flex-col rounded-md overflow-clip border border-input bg-background',
                     isFullscreen
-                        ? 'border-none rounded-none'
+                        ? 'border-none rounded-none bg-transparent'
                         : 'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background'
                 )"
                 :data-fullscreen="isFullscreen ? true : null"

resources/js/form/components/fields/editor/EditorMaybeFullscreenDialog.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-    import { Dialog, DialogScrollContent } from "@/components/ui/dialog";
+    import { Dialog, DialogTitle } from "@/components/ui/dialog";
     import { cn } from "@/utils/cn";
     import { DialogContent, DialogOverlay, DialogPortal } from "reka-ui";
+    import { FormFieldProps } from "@/form/types";
+    import { FormEditorFieldData } from "@/types";
 
+    const props = defineProps<FormFieldProps<FormEditorFieldData>>();
     const isFullscreen = defineModel<boolean>('fullscreen');
 
     function onBackdropPointerDown(pointerDownEvent: PointerEvent) {
@@ -26,8 +29,11 @@
                             cn(
                               'relative z-50 grid grid-cols-1 grid-rows-1 w-full max-w-7xl gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
                             )"
-                        @pointer-down-outside.prevent="onBackdropPointerDown($event.detail.originalEvent)"
+                            @pointer-down-outside.prevent="onBackdropPointerDown($event.detail.originalEvent)"
                         >
+                        <DialogTitle class="sr-only">
+                            {{ field.label }}
+                        </DialogTitle>
                         <slot />
                     </DialogContent>
                 </DialogOverlay>

resources/js/form/components/fields/editor/extensions/Clipboard.ts

@@ -3,6 +3,7 @@ import { Plugin } from '@tiptap/pm/state';
 import { DOMParser } from '@tiptap/pm/model';
 import { __ } from "@/utils/i18n";
 import { EditorView } from "@tiptap/pm/view";
+import { NodeSelection } from "@tiptap/pm/state";
 
 function dispatchCopy(view: EditorView) {
     const clipboardData = new DataTransfer();
@@ -62,16 +63,20 @@ export const Clipboard = Extension.create({
                     handleKeyDown(view, event) {
                         // fix bug when copy isn't working in chrome https://github.com/ProseMirror/prosemirror/issues/884
                         if((event.metaKey || event.ctrlKey) && event.key === 'c') {
-                            let copied = false;
-                            view.dom.addEventListener('copy', () => {
-                                copied = true;
-                            }, { once: true });
-                            setTimeout(() => {
-                                if(!copied) {
-                                    dispatchCopy(view);
-                                }
-                            }, 50);
-
+                            if(view.state.selection instanceof NodeSelection
+                                && view.state.selection.node.isBlock
+                                && view.state.selection.node.isAtom
+                            ) {
+                                let copied = false;
+                                view.dom.addEventListener('copy', () => {
+                                    copied = true;
+                                }, { once: true });
+                                setTimeout(() => {
+                                    if(!copied) {
+                                        dispatchCopy(view);
+                                    }
+                                }, 50);
+                            }
                         }
                     },