Feat: make class and id global attributes

resources/js/extensions/ClassExtension.js

@@ -0,0 +1,40 @@
+import {Extension} from '@tiptap/core'
+
+export const ClassExtension = Extension.create({
+    name: 'classExtension',
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: [
+                    'heading',
+                    'paragraph',
+                    'link',
+                    'image',
+                    'listItem',
+                    'bulletList',
+                    'orderedList',
+                    'table',
+                    'tableHeader',
+                    'tableRow',
+                    'tableCell',
+                    'textStyle',
+                ],
+                attributes: {
+                    class: {
+                        default: null,
+                        parseHTML: element => element.getAttribute('class'),
+                        renderHTML: attributes => {
+                            if (!attributes.class) {
+                                return {}
+                            }
+                            return {
+                                class: attributes.class
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})

resources/js/extensions/IdExtension.js

@@ -0,0 +1,30 @@
+import {Extension} from '@tiptap/core'
+
+export const IdExtension = Extension.create({
+    name: 'idExtension',
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: [
+                    'heading',
+                    'link',
+                ],
+                attributes: {
+                    id: {
+                        default: null,
+                        parseHTML: element => element.getAttribute('id'),
+                        renderHTML: attributes => {
+                            if (!attributes.id) {
+                                return {}
+                            }
+                            return {
+                                id: attributes.id
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})

resources/js/extensions/index.js

@@ -22,3 +22,5 @@ export { GridBuilderColumn } from "./GridBuilder/GridBuilderColumn";
 export { DragAndDropExtension } from "./DragAndDrop.js";
 export { TiptapBlock } from "./TiptapBlock.js";
 export { MergeTag } from "./MergeTag.js";
+export { ClassExtension } from "./ClassExtension.js";
+export { IdExtension } from "./IdExtension.js";

resources/js/plugin.js

@@ -14,6 +14,7 @@ import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Italic from "@tiptap/extension-italic";
 import ListItem from "@tiptap/extension-list-item";
 import OrderedList from "@tiptap/extension-ordered-list";
+import Paragraph from "@tiptap/extension-paragraph";
 import Placeholder from "@tiptap/extension-placeholder";
 import Strike from "@tiptap/extension-strike";
 import Subscript from "@tiptap/extension-subscript";
@@ -31,7 +32,6 @@ import {
     Lead,
     CustomLink,
     CustomImage,
-    CustomParagraph,
     CustomTextAlign,
     Small,
     Grid,
@@ -51,6 +51,8 @@ import {
     Video,
     TiptapBlock,
     DragAndDropExtension,
+    ClassExtension,
+    IdExtension,
 } from "./extensions";
 import {lowlight} from "lowlight/lib/common";
 import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
@@ -161,7 +163,20 @@ export default function tiptap({
                 return tool.id;
             })
 
-            let exts = [Document, Text, CustomParagraph, Dropcursor, Gapcursor, HardBreak, History, TextStyle, TiptapBlock, DragAndDropExtension];
+            let exts = [
+                Document,
+                Text,
+                Paragraph,
+                Dropcursor,
+                Gapcursor,
+                HardBreak,
+                History,
+                TextStyle,
+                TiptapBlock,
+                DragAndDropExtension,
+                ClassExtension,
+                IdExtension,
+            ];
 
             if (placeholder && (! disabled)) {
                 exts.push(Placeholder.configure({ placeholder }));

src/Extensions/Extensions/ClassExtension.php

@@ -0,0 +1,50 @@
+<?php
+
+namespace FilamentTiptapEditor\Extensions\Extensions;
+
+use Tiptap\Core\Extension;
+use Tiptap\Utils\InlineStyle;
+
+class ClassExtension extends Extension
+{
+    public static $name = 'classExtension';
+
+    public function addGlobalAttributes(): array
+    {
+        return [
+            [
+                'types' => [
+                    'heading',
+                    'paragraph',
+                    'link',
+                    'image',
+                    'listItem',
+                    'bulletList',
+                    'orderedList',
+                    'table',
+                    'tableHeader',
+                    'tableRow',
+                    'tableCell',
+                    'textStyle',
+                ],
+                'attributes' => [
+                    'class' => [
+                        'default' => null,
+                        'parseHTML' => function ($DOMNode) {
+                            return InlineStyle::getAttribute($DOMNode, 'class') ?? false;
+                        },
+                        'renderHTML' => function ($attributes) {
+                            if (! $attributes->class) {
+                                return null;
+                            }
+
+                            return [
+                                'class' => $attributes->class,
+                            ];
+                        },
+                    ],
+                ],
+            ],
+        ];
+    }
+}

src/Extensions/Extensions/IdExtension.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace FilamentTiptapEditor\Extensions\Extensions;
+
+use Tiptap\Core\Extension;
+use Tiptap\Utils\InlineStyle;
+
+class IdExtension extends Extension
+{
+    public static $name = 'idExtension';
+
+    public function addGlobalAttributes(): array
+    {
+        return [
+            [
+                'types' => [
+                    'heading',
+                    'link',
+                ],
+                'attributes' => [
+                    'id' => [
+                        'default' => null,
+                        'parseHTML' => function ($DOMNode) {
+                            return InlineStyle::getAttribute($DOMNode, 'id') ?? false;
+                        },
+                        'renderHTML' => function ($attributes) {
+                            if (! $attributes->id) {
+                                return null;
+                            }
+
+                            return [
+                                'id' => $attributes->id,
+                            ];
+                        },
+                    ],
+                ],
+            ],
+        ];
+    }
+}

src/TiptapConverter.php

@@ -47,16 +47,16 @@ public function getExtensions(): array
 
         return [
             new StarterKit([
-                'paragraph' => false,
                 'listItem' => false,
             ]),
             new TextStyle(),
             new Extensions\TextAlign([
                 'types' => ['heading', 'paragraph'],
             ]),
+            new Extensions\ClassExtension(),
+            new Extensions\IdExtension(),
             new Extensions\Color(),
             new CodeBlockHighlight(),
-            new Nodes\Paragraph(),
             new Nodes\ListItem(),
             new Nodes\Lead(),
             new Nodes\Image(),

tests/database/factories/PageFactory.php

@@ -4,6 +4,7 @@
 
 use Awcodes\HtmlFaker\HtmlFaker;
 use FilamentTiptapEditor\Tests\Models\Page;
+use FilamentTiptapEditor\TiptapFaker;
 use Illuminate\Database\Eloquent\Factories\Factory;
 
 class PageFactory extends Factory
@@ -12,16 +13,15 @@ class PageFactory extends Factory
 
     public function definition(): array
     {
-        $content = HtmlFaker::make()
+        $content = TiptapFaker::make()
             ->heading()
-            ->paragraphs(withRandomLinks: true)
-            ->generate();
+            ->paragraphs(withRandomLinks: true);
 
         return [
             'title' => $this->faker->sentence(),
-            'html_content' => $content,
-            'json_content' => tiptap_converter()->asJSON($content, decoded: true),
-            'text_content' => tiptap_converter()->asText($content),
+            'html_content' => $content->asHTML(),
+            'json_content' => $content->asJSON(),
+            'text_content' => tiptap_converter()->asText($content->asHTML()),
         ];
     }
 }