Don't allow embed/upload in list items

Author: aguingand

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

@@ -12,7 +12,7 @@
     import { Iframe } from "@/form/components/fields/editor/extensions/iframe/Iframe";
     import { useParentForm } from "@/form/useParentForm";
     import { trimHTML } from "@/form/components/fields/editor/utils/html";
-    import { getExtensionsForEditor } from "@/form/components/fields/editor/extensions";
+    import { getExtensions } from "@/form/components/fields/editor/extensions";
     import { ContentEmbedManager } from "@/content/ContentEmbedManager";
     import { ContentUploadManager } from "@/content/ContentUploadManager";
     import { FormFieldEmits, FormFieldProps } from "@/form/types";
@@ -74,7 +74,7 @@
         (locale) => {
             const { field } = props;
             const extensions = [
-                ...getExtensionsForEditor(field),
+                ...getExtensions(field),
                 field.markdown && Markdown.configure({
                     breaks: config('sharp.markdown_editor.nl2br'),
                 }),

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

@@ -1,22 +1,17 @@
 import { Command, Extension } from "@tiptap/core";
 import { Plugin } from '@tiptap/pm/state';
-import { DOMParser, Schema } from '@tiptap/pm/model';
+import { DOMParser } from '@tiptap/pm/model';
 import { __ } from "@/utils/i18n";
 
 export const Clipboard = Extension.create({
     name: 'clipboard',
     addOptions() {
         return {
-            schema: null,
             inline: false,
         }
     },
     addProseMirrorPlugins() {
-        const schema = getNormalizedSchema(
-            this.options.schema,
-            this.editor.schema
-        );
-        const parser = DOMParser.fromSchema(schema);
+        const parser = DOMParser.fromSchema(this.editor.schema);
         return [
             new Plugin({
                 props: {
@@ -83,17 +78,3 @@ declare module '@tiptap/core' {
         }
     }
 }
-
-// needed to keep same references of node/mark types
-function getNormalizedSchema(target, source) {
-    const schema = new Schema(target.spec);
-    // @ts-ignore
-    schema.nodes = Object.fromEntries(
-        Object.entries(source.nodes).filter(([key]) => !!target.nodes[key])
-    );
-    // @ts-ignore
-    schema.marks = Object.fromEntries(
-        Object.entries(source.marks).filter(([key]) => !!target.marks[key])
-    );
-    return schema;
-}

resources/js/form/components/fields/editor/extensions/embed/Embed.ts

@@ -18,7 +18,7 @@ export type EmbedOptions = {
 export const Embed: WithRequiredOptions<Node<EmbedOptions>> = Node.create<EmbedOptions>({
     name: 'embed',
 
-    group: 'block',
+    group: 'embed',
 
     atom: true,
 

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

@@ -35,7 +35,7 @@ import { CharacterCount } from '@tiptap/extension-character-count';
 import { FormEditorFieldData, FormEditorToolbarButton } from "@/types";
 
 
-function getExtensions(field: FormEditorFieldData) {
+export function getExtensions(field: FormEditorFieldData) {
     const toolbarHas = (buttonName: FormEditorToolbarButton | FormEditorToolbarButton[]) =>
         !field.toolbar || field.toolbar.some(button =>
             Array.isArray(buttonName)
@@ -54,9 +54,16 @@ function getExtensions(field: FormEditorFieldData) {
                 ]
             }
         }),
+        Clipboard.configure({
+            inline: field.inline,
+        }),
         toolbarHas('code') && Code,
         toolbarHas('code-block') && CodeBlock,
-        Document,
+        Document.extend({
+            content: field.uploads || Object.keys(field.embeds ?? {}).length
+                ? '(block | embed)+'
+                : 'block+',
+        }),
         Dropcursor,
         Gapcursor,
         HardBreak.extend({
@@ -116,16 +123,3 @@ function getExtensions(field: FormEditorFieldData) {
         .flat()
         .filter(extension => !!extension);
 }
-
-export function getExtensionsForEditor(field: FormEditorFieldData) {
-    return [
-        ...getExtensions(field),
-        Clipboard.configure({
-            schema: getSchema(getExtensions({
-                ...field,
-                toolbar: field.toolbar ?? [], // if no toolbar, prevent pasting formatted HTML
-            })),
-            inline: field.inline,
-        }),
-    ];
-}

resources/js/form/components/fields/editor/extensions/upload/Upload.ts

@@ -21,7 +21,7 @@ export type UploadOptions = {
 export const Upload: WithRequiredOptions<Node<UploadOptions>> = Node.create<UploadOptions>({
     name: 'upload',
 
-    group: 'block',
+    group: 'embed',
 
     atom: true,