updated to laravel 11

resources/js/editor/Box.js

@@ -0,0 +1,73 @@
+import {mergeAttributes, Node} from '@tiptap/core'
+
+
+export const Box = Node.create({
+    name: 'box',
+
+    addOptions() {
+        return {
+            types: ['info', 'warning', 'danger', 'success', 'bug'],
+            HTMLAttributes: {
+                class: 'box',
+            },
+        }
+    },
+
+    addAttributes() {
+        return {
+            type: {
+                default: 'info',
+                rendered: false,
+            },
+        }
+    },
+
+    group: 'block',
+
+    content: 'inline*',
+
+    defining: true,
+
+    parseHTML() {
+        return this.options.types.map((type) => ({
+            tag: 'div',
+            getAttrs: (node) => {
+                // Extract the class attribute and find the type based on the class
+                const classList = node.getAttribute('class')?.split(' ') || [];
+                const boxType = classList.find(cls => this.options.types.includes(cls));
+                return {
+                    type: boxType || this.options.types[0], // Default to 'info' if no matching type is found
+                };
+            },
+        }));
+    },
+
+    renderHTML({ node, HTMLAttributes }) {
+        const hasType = this.options.types.includes(node.attrs.type);
+        const type = hasType
+            ? node.attrs.type
+            : this.options.types[0]
+
+        let classes = 'box ' + type;
+        return ['div', mergeAttributes({ class: classes }, HTMLAttributes), 0]
+    },
+
+    addCommands() {
+        return {
+            setBox: attributes => ({ commands }) => {
+                if (!this.options.types.includes(attributes.type)) {
+                    return false
+                }
+
+                return commands.setNode(this.name, attributes)
+            },
+            toggleBox: attributes => ({ commands }) => {
+                if (!this.options.types.includes(attributes.type)) {
+                    return false
+                }
+
+                return commands.toggleNode(this.name, 'paragraph', attributes)
+            },
+        }
+    },
+})