Feat: make class and id global attributes

awcodes · Dec 19, 2023 · 36f3b32 · 36f3b32
1 parent 0c04dbe
commit 36f3b32
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 33 deletions.
diff --git a/resources/dist/filament-tiptap-editor.js b/resources/dist/filament-tiptap-editor.js
diff --git a/resources/js/extensions/ClassExtension.js b/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
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})
diff --git a/resources/js/extensions/IdExtension.js b/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
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})
diff --git a/resources/js/extensions/index.js b/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";
diff --git a/resources/js/plugin.js b/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 }));

diff --git a/src/Extensions/Extensions/ClassExtension.php b/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,
+                            ];
+                        },
+                    ],
+                ],
+            ],
+        ];
+    }
+}
diff --git a/src/Extensions/Extensions/IdExtension.php b/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,
+                            ];
+                        },
+                    ],
+                ],
+            ],
+        ];
+    }
+}
diff --git a/src/TiptapConverter.php b/src/TiptapConverter.php
@@ -47,13 +47,14 @@ 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(),