added small option

resources/js/components/SMEditor.vue

@@ -33,6 +33,9 @@
                         :selected="editor.isActive('paragraph')">
                         Paragraph
                     </option>
+                    <option value="small" :selected="editor.isActive('small')">
+                        Small
+                    </option>
                     <option
                         value="h1"
                         :selected="editor.isActive('heading', { level: 1 })">
@@ -670,6 +673,7 @@ import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
 import Link from "@tiptap/extension-link";
 import Image from "@tiptap/extension-image";
+import { Small } from "../extensions/small";
 import { openDialog } from "./SMDialog";
 import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
 import { Media, MediaCollection, MediaResponse } from "../helpers/api.types";
@@ -706,6 +710,7 @@ const editor = useEditor({
         Success,
         Warning,
         Danger,
+        Small,
         Subscript,
         Superscript,
         Link.configure({
@@ -729,6 +734,9 @@ const updateNode = (event) => {
             case "paragraph":
                 editor.value.chain().focus().setParagraph().run();
                 break;
+            case "small":
+                editor.value.chain().focus().setSmall().run();
+                break;
             case "h1":
                 editor.value.chain().focus().setHeading({ level: 1 }).run();
                 break;

resources/js/extensions/small.ts

@@ -0,0 +1,54 @@
+import { Node } from "@tiptap/core";
+
+export interface SmallOptions {
+    HTMLAttributes: Record<string, unknown>;
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        small: {
+            /**
+             * Toggle a paragraph
+             */
+            setSmall: () => ReturnType;
+            toggleSmall: () => ReturnType;
+        };
+    }
+}
+
+export const Small = Node.create<SmallOptions>({
+    name: "small",
+    group: "block",
+    content: "inline*",
+    defining: true,
+    priority: 100,
+
+    parseHTML() {
+        return [{ tag: "p.small", priority: 51 }];
+    },
+
+    renderHTML() {
+        return ["p", { class: "small" }, ["small", 0]];
+    },
+
+    addOptions() {
+        return {
+            HTMLAttributes: { class: "small" },
+        };
+    },
+
+    addCommands() {
+        return {
+            setSmall:
+                () =>
+                ({ commands }) => {
+                    return commands.setNode(this.name);
+                },
+            toggleSmall:
+                () =>
+                ({ commands }) => {
+                    return commands.toggleNode(this.name, "paragraph");
+                },
+        };
+    },
+});