wip improve editor

aguingand · aguingand · commit 64d144abf8ba · 2025-09-08T19:53:32.000+02:00
diff --git a/demo/app/Sharp/TestForm/TestForm.php b/demo/app/Sharp/TestForm/TestForm.php
@@ -253,6 +253,8 @@ public function buildFormFields(FieldsContainer $formFields): void
                         SharpFormEditorField::QUOTE,
                         SharpFormEditorField::CODE,
                         SharpFormEditorField::SEPARATOR,
+                        SharpFormEditorField::IFRAME,
+                        SharpFormEditorField::TABLE,
                         SharpFormEditorField::CODE_BLOCK,
                     ])
                     ->allowUploads(
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "sortablejs": "^1.15.2",
     "tailwind-merge": "^3.3.0",
     "text-clipper": "^1.3.0",
-    "tiptap-markdown": "file:../packages/tiptap-markdown",
+    "tiptap-markdown": "^0.9.0",
     "vue": "^3.5.12",
     "vue-sonner": "^1.1.2",
     "vue3-apexcharts": "^1.8.0"
diff --git a/resources/js/content/ContentEmbedManager.ts b/resources/js/content/ContentEmbedManager.ts
@@ -31,13 +31,9 @@ export class ContentEmbedManager<Root extends Form | Show> {
         root: Root,
         embeds: ContentEmbedManager<Root>['embeds'] | null,
         initialEmbeds: FormEditorFieldData['value']['embeds'],
-        config: {
-            onEmbedsUpdated: ContentEmbedManager<Root>['onEmbedsUpdated']
-        } = { onEmbedsUpdated: null }
     ) {
         this.root = root;
         this.embeds = embeds ?? {};
-        this.onEmbedsUpdated = config.onEmbedsUpdated;
         this.contentEmbeds = Object.fromEntries(
             Object.entries(initialEmbeds ?? {}).map(([embedKey, embeds]) =>
                 [embedKey, Object.fromEntries(
@@ -90,19 +86,18 @@ export class ContentEmbedManager<Root extends Form | Show> {
             this.contentEmbeds[embed.key] = {
                 ...Object.fromEntries(
                     Object.entries(this.contentEmbeds[embed.key])
-                        .map(([id, e]) => [
+                        .map(([id, contentEmbed]) => [
                             id,
                             ({
-                                ...e,
-                                removed: e.value?._locale == locale
-                                    ? !nodes.find(node => String(node.id) === id)
-                                    : e.removed,
+                                ...contentEmbed,
+                                removed: contentEmbed.value?._locale == locale
+                                    ? !nodes.some(node => String(node.id) === id)
+                                    : contentEmbed.removed,
                             })
                         ])
                 ),
             };
         }
-        this.onEmbedsUpdated(this.serializedEmbeds);
     }
 
     postResolveForm(id: string, embed: EmbedData): Promise<FormData> {
diff --git a/resources/js/content/ContentUploadManager.ts b/resources/js/content/ContentUploadManager.ts
@@ -25,12 +25,10 @@ export class ContentUploadManager<Root extends Form | Show> {
         initialUploads: FormEditorFieldData['value']['uploads'] | undefined,
         config: {
             editorField: ContentUploadManager<Root>['editorField'],
-            onUploadsUpdated: ContentUploadManager<Root>['onUploadsUpdated'],
-        } = { editorField: null, onUploadsUpdated: null }
+        } = { editorField: null }
     ) {
         this.root = root;
         this.editorField = config.editorField;
-        this.onUploadsUpdated = config.onUploadsUpdated;
         this.contentUploads = Object.fromEntries(
             Object.entries(initialUploads ?? {}).map(([id, upload]) =>
                 [id, { value:upload }]
@@ -55,44 +53,42 @@ export class ContentUploadManager<Root extends Form | Show> {
     }
 
     getUpload(id: string): FormEditorUploadData {
-        return this.contentUploads[id].value;
+        return this.contentUploads[id]?.value;
     }
 
-    newUpload(nativeFile?: File) {
+    newUpload(locale: string | null, value?: FormEditorUploadData) {
         const id = String(Object.keys(this.contentUploads).length);
         this.contentUploads[id] = {
             value: {
-                file: nativeFile
-                    ? { nativeFile } as FormUploadFieldValueData // auto upload with this file
-                    : null,
-                legend: null,
+                ...value,
+                _locale: locale,
             },
         };
         return id;
     }
 
-    updateUpload(id: string, value: FormEditorUploadData) {
-        this.contentUploads[id].value = { ...this.contentUploads[id].value, ...value };
-        this.onUploadsUpdated(this.serializedUploads);
-    }
-
-    restoreUpload(id: string) {
-        this.contentUploads[id] = {
-            ...this.contentUploads[id],
-            removed: false,
-        };
-        this.onUploadsUpdated(this.serializedUploads);
+    syncUploads(locale: string | null, ids: (string | number)[]) {
+        this.contentUploads = Object.fromEntries(
+            Object.entries(this.contentUploads)
+                .map(([id, contentUpload]) => [
+                    id,
+                    ({
+                        ...contentUpload,
+                        removed: contentUpload.value?._locale == locale
+                            ? !ids.some(i => String(i) === id)
+                            : contentUpload.removed
+                    })
+                ])
+        );
+        // this.onUploadsUpdated(this.serializedUploads);
     }
 
-    removeUpload(id: string) {
-        this.contentUploads[id] = {
-            ...this.contentUploads[id],
-            removed: true,
-        };
-        this.onUploadsUpdated(this.serializedUploads);
+    updateUpload(id: string, value: FormEditorUploadData) {
+        this.contentUploads[id].value = { ...this.contentUploads[id].value, ...value };
+        // this.onUploadsUpdated(this.serializedUploads);
     }
 
-    async postForm(id: string|null, data: FormEditorUploadData): Promise<{ id:string }> {
+    async postForm(id: string | null, locale: string | null, data: FormEditorUploadData): Promise<{ id:string }> {
         const { entityKey, instanceId } = this.root;
 
         const responseData = await api.post(
@@ -103,7 +99,7 @@ export class ContentUploadManager<Root extends Form | Show> {
         )
             .then(response => response.data);
 
-        id ??= this.newUpload();
+        id ??= this.newUpload(locale);
 
         this.contentUploads[id] = {
             value: responseData,
diff --git a/resources/js/content/types.ts b/resources/js/content/types.ts
@@ -7,6 +7,7 @@ export type MaybeLocalizedContent = {
 export type FormEditorUploadData = {
     file: FormUploadFieldValueData,
     legend?: string,
+    _locale?: string | null,
 }
 
 export type FormattedContent<Content extends MaybeLocalizedContent> = Content & { formatted:true };
diff --git a/resources/js/form/components/fields/editor/Editor.vue b/resources/js/form/components/fields/editor/Editor.vue
@@ -63,17 +63,10 @@
 
     const uploadManager = new ContentUploadManager(form, props.value?.uploads, {
         editorField: props.field,
-        onUploadsUpdated(uploads) {
-            emit('input', { ...props.value, uploads });
-        }
     });
     const uploadModal = ref<InstanceType<typeof EditorUploadModal>>();
 
-    const embedManager = new ContentEmbedManager(form, props.field.embeds, props.value?.embeds, {
-        onEmbedsUpdated(embeds) {
-            emit('input', { ...props.value, embeds });
-        }
-    });
+    const embedManager = new ContentEmbedManager(form, props.field.embeds, props.value?.embeds);
     const el = useTemplateRef<HTMLDialogElement>('el');
     const embedModal = ref<InstanceType<typeof EditorEmbedModal>>();
     const linkDropdown = ref<InstanceType<typeof LinkDropdown>>();
@@ -91,6 +84,16 @@
         isUnmounting,
     } satisfies ParentEditor);
 
+    watch(() => [embedManager.contentEmbeds, uploadManager.contentUploads], () => {
+        emit('input', {
+            ...props.value,
+            uploads: uploadManager.serializedUploads,
+            embeds: embedManager.serializedEmbeds,
+        });
+    }, {
+        deep: true,
+    })
+
     const editor = useLocalizedEditor(
         props,
         (locale) => {
@@ -102,6 +105,7 @@
                 }),
                 props.field.uploads && Upload.configure({
                     uploadManager,
+                    locale,
                 }),
                 ...Object.values(props.field.embeds ?? {})
                     .map((embed) => {
@@ -141,7 +145,7 @@
             editor.on('update', debounce(() => {
                 const error = validate();
                 const content = props.field.markdown
-                    ? normalizeText(editor.storage.markdown.getMarkdown() ?? '')
+                    ? normalizeText((editor.storage as any).markdown.getMarkdown() ?? '')
                     : normalizeText(trimHTML(editor.getHTML(), { inline: props.field.inline }));
 
                 if(props.field.localized) {
@@ -288,8 +292,8 @@
                                         :disabled="field.readOnly"
                                         :title="buttons[button].label()"
                                         @click="button === 'upload' || button === 'upload-image'
-                                        ? uploadModal.open()
-                                        : buttons[button].command(editor)"
+                                            ? uploadModal.open({ locale: props.locale })
+                                            : buttons[button].command(editor)"
                                     >
                                         <component :is="buttons[button].icon" class="size-4" />
                                     </Toggle>
diff --git a/resources/js/form/components/fields/editor/extensions/embed/Embed.ts b/resources/js/form/components/fields/editor/extensions/embed/Embed.ts
@@ -11,7 +11,7 @@ import { getAllNodesAfterUpdate } from "@/form/components/fields/editor/utils/ti
 
 export type EmbedNodeAttributes = {
     'data-key': string,
-    'data-value': EmbedData['value'],
+    'data-value'?: EmbedData['value'],
 }
 
 export type EmbedOptions = {
diff --git a/resources/js/form/components/fields/editor/extensions/upload/EditorUploadModal.vue b/resources/js/form/components/fields/editor/extensions/upload/EditorUploadModal.vue
@@ -27,11 +27,15 @@
     const uploadManager = useParentEditor().uploadManager;
     const modalOpen = ref(false);
     const modalForm = useTemplateRef<InstanceType<typeof FormComponent>>('modalForm');
-    const modalUpload = ref<{ id: string, form: Form, loading?: boolean } | null>(null);
+    const modalUpload = ref<{ id: string, form: Form, loading?: boolean, locale: string | null } | null>(null);
 
     async function postForm(data: FormEditorUploadData) {
         modalUpload.value.loading = true;
-        const { id } = await uploadManager.postForm(modalUpload.value.id, data)
+        const { id } = await uploadManager.postForm(
+            modalUpload.value.id,
+            modalUpload.value.locale,
+            data
+        )
             .finally(() => {
                 modalUpload.value.loading = false;
             });
@@ -43,7 +47,7 @@
         modalOpen.value = false;
     }
 
-    function open(id?: string) {
+    function open({ id, locale }: { id?: string, locale?: string | null }) {
         if(props.field.uploads.fields.legend) {
             modalUpload.value = {
                 id,
@@ -56,6 +60,7 @@
                     parentForm.entityKey,
                     parentForm.instanceId,
                 ),
+                locale,
             }
             modalOpen.value = true;
             if(id == null) {
diff --git a/resources/js/form/components/fields/editor/extensions/upload/Upload.ts b/resources/js/form/components/fields/editor/extensions/upload/Upload.ts
@@ -4,18 +4,22 @@ import UploadNode from "./UploadNode.vue";
 import { ExtensionAttributesSpec, WithRequiredOptions } from "@/form/components/fields/editor/types";
 import { ContentUploadManager } from "@/content/ContentUploadManager";
 import { Plugin, Transaction } from "@tiptap/pm/state";
-import { ReplaceStep } from "@tiptap/pm/transform";
 import { Form } from "@/form/Form";
-
+import { FormEditorUploadData } from "@/content/types";
+import { Fragment, Slice } from "@tiptap/pm/model";
+import { getAllNodesAfterUpdate } from "@/form/components/fields/editor/utils/tiptap/getAllNodesAfterUpdate";
+import { FormUploadFieldValueData } from "@/types";
 
 
 export type UploadNodeAttributes = {
     'data-key': string,
+    'data-value'?: FormEditorUploadData,
     isImage: boolean,
 }
 
 export type UploadOptions = {
     uploadManager: ContentUploadManager<Form>,
+    locale: string | null
 }
 
 export const Upload: WithRequiredOptions<Node<UploadOptions>> = Node.create<UploadOptions>({
@@ -27,11 +31,27 @@ export const Upload: WithRequiredOptions<Node<UploadOptions>> = Node.create<Uplo
 
     isolating: true,
 
+    draggable: true,
+
     priority: 150,
 
     addAttributes(): ExtensionAttributesSpec<UploadNodeAttributes> {
         return {
             'data-key': {},
+            'data-value': {
+                parseHTML(element) {
+                    return element.hasAttribute('data-value')
+                        ? JSON.parse(element.getAttribute('data-value'))
+                        : null;
+                },
+                renderHTML(attributes: UploadNodeAttributes) {
+                    return {
+                        'data-value': attributes['data-value']
+                            ? JSON.stringify(attributes['data-value'])
+                            : null
+                    };
+                },
+            },
             isImage: {
                 default: false,
                 parseHTML: element => element.matches('x-sharp-image'),
@@ -61,7 +81,9 @@ export const Upload: WithRequiredOptions<Node<UploadOptions>> = Node.create<Uplo
     addCommands() {
         return {
             insertUpload: ({ id, nativeFile, type, pos }) => ({ commands, tr }) => {
-                id ??= this.options.uploadManager.newUpload(nativeFile);
+                id ??= this.options.uploadManager.newUpload(this.options.locale, {
+                    file: { nativeFile } as FormUploadFieldValueData, // auto upload with this file
+                });
 
                 return commands.insertContentAt(pos ?? tr.selection.to, {
                     type: Upload.name,
@@ -74,9 +96,64 @@ export const Upload: WithRequiredOptions<Node<UploadOptions>> = Node.create<Uplo
         }
     },
 
+    onUpdate({ transaction, appendedTransactions }) {
+        this.options.uploadManager.syncUploads(
+            this.options.locale,
+            getAllNodesAfterUpdate(this.name, transaction, appendedTransactions)
+                .map(node => node.attrs['data-key']),
+        )
+    },
+
 
     addProseMirrorPlugins() {
+        const { name, options } = this;
+
         return [
+            new Plugin({
+                props: {
+                    transformCopied(slice: Slice) {
+                        if(!slice.content.content.find(n => n.type.name === name)) {
+                            return slice;
+                        }
+                        return new Slice(
+                            Fragment.fromArray(
+                                slice.content.content.map(node => {
+                                    if(node.type.name === name) {
+                                        return node.type.create({
+                                            ...node.attrs,
+                                            'data-key': null,
+                                            'data-value': options.uploadManager.getUpload(node.attrs['data-key']),
+                                        })
+                                    }
+                                    return node;
+                                })
+                            ),
+                            slice.openStart,
+                            slice.openEnd
+                        );
+                    },
+                    transformPasted(slice: Slice) {
+                        if(!slice.content.content.find(n => n.type.name === name)) {
+                            return slice;
+                        }
+                        return new Slice(
+                            Fragment.fromArray(
+                                slice.content.content.map(node => {
+                                    if(node.type.name === name && node.attrs['data-key'] == null) {
+                                        return node.type.create({
+                                            'data-key': options.uploadManager.newUpload(options.locale, node.attrs['data-value']),
+                                            isImage: node.attrs.isImage,
+                                        });
+                                    }
+                                    return node;
+                                })
+                            ),
+                            slice.openStart,
+                            slice.openEnd
+                        )
+                    },
+                }
+            }),
             new Plugin({
                 props: {
                     handlePaste: (view, event) => {
diff --git a/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue b/resources/js/form/components/fields/editor/extensions/upload/UploadNode.vue
diff --git a/resources/js/form/components/fields/editor/useEditorNode.ts b/resources/js/form/components/fields/editor/useEditorNode.ts
diff --git a/src/Utils/Fields/Formatters/FormatsEditorUploads.php b/src/Utils/Fields/Formatters/FormatsEditorUploads.php

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@ export type MaybeLocalizedContent = {`
`7`	`7`	`export type FormEditorUploadData = {`
`8`	`8`	`file: FormUploadFieldValueData,`
`9`	`9`	`legend?: string,`
	`10`	`+ _locale?: string \| null,`
`10`	`11`	`}`
`11`	`12`
`12`	`13`	`export type FormattedContent<Content extends MaybeLocalizedContent> = Content & { formatted:true };`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ import { getAllNodesAfterUpdate } from "@/form/components/fields/editor/utils/ti`
`11`	`11`
`12`	`12`	`export type EmbedNodeAttributes = {`
`13`	`13`	`'data-key': string,`
`14`		`- 'data-value': EmbedData['value'],`
	`14`	`+ 'data-value'?: EmbedData['value'],`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export type EmbedOptions = {`