From 68020b020158e9689e0b7e70cc86f31c4e8d7658 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Thu, 13 Jul 2023 11:46:43 +1000
Subject: [PATCH] fix small block

---
 resources/js/components/SMEditor.vue |  4 ++--
 resources/js/extensions/small.ts     | 36 ++++++++++------------------
 resources/views/app.blade.php        |  1 +
 3 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue
index b5e99f0..1c9a6af 100644
--- a/resources/js/components/SMEditor.vue
+++ b/resources/js/components/SMEditor.vue
@@ -659,7 +659,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, watch } from "vue";
+import { onBeforeUnmount, watch } from "vue";
 import { useEditor, EditorContent, BubbleMenu, isActive } from "@tiptap/vue-3";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
@@ -676,7 +676,7 @@ 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";
+import { Media, MediaCollection } from "../helpers/api.types";
 import { api } from "../helpers/api";
 import { extractFileNameFromUrl } from "../helpers/url";
 import { mediaGetVariantUrl } from "../helpers/media";
diff --git a/resources/js/extensions/small.ts b/resources/js/extensions/small.ts
index 35632cd..29ccd37 100644
--- a/resources/js/extensions/small.ts
+++ b/resources/js/extensions/small.ts
@@ -1,16 +1,19 @@
-import { Node } from "@tiptap/core";
+import { mergeAttributes, Node } from "@tiptap/core";
 
 export interface SmallOptions {
-    HTMLAttributes: Record<string, unknown>;
+    HTMLAttributes: Record<string, any>;
 }
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         small: {
             /**
-             * Toggle a paragraph
+             * Set a small mark
              */
             setSmall: () => ReturnType;
+            /**
+             * Toggle a small mark
+             */
             toggleSmall: () => ReturnType;
         };
     }
@@ -20,11 +23,15 @@ export const Small = Node.create<SmallOptions>({
     name: "small",
     group: "block",
     content: "inline*",
-    defining: true,
-    priority: 100,
+
+    addOptions() {
+        return {
+            HTMLAttributes: { class: "small" },
+        };
+    },
 
     parseHTML() {
-        return [{ tag: "p", class: "small", priority: 51 }];
+        return [{ tag: "p.small", priority: 100 }];
     },
 
     renderHTML({ HTMLAttributes }) {
@@ -35,12 +42,6 @@ export const Small = Node.create<SmallOptions>({
         ];
     },
 
-    addOptions() {
-        return {
-            HTMLAttributes: { class: "small" },
-        };
-    },
-
     addCommands() {
         return {
             setSmall:
@@ -56,14 +57,3 @@ export const Small = Node.create<SmallOptions>({
         };
     },
 });
-/**
- *
- * @param HTMLAttributes
- * @param HTMLAttributes1
- */
-function mergeAttributes(
-    HTMLAttributes: Record<string, unknown>,
-    HTMLAttributes1: Record<string, any>,
-): any | string {
-    throw new Error("Function not implemented.");
-}
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index b4bfdef..13f3ede 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -28,6 +28,7 @@
 		p + p, p + ul, ul + p { margin-top: 1rem; }
         ol, ul { list-style: none; margin: 0; padding: 0; }
 		small { display: inline-block; }
+		.small { font-size: smaller; }
 		.list-decimal, .list-disc, .list-circle { margin-left: 2.5rem; }
 		.list-decimal li, .list-disc li, .list-circle li { margin-top: 0.5rem; }
 		a:not([role="button"]) { color: #0284c7; }