feat: Fixed UL and OL list styling in editor

Author: iduspara

package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-toggle": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tiptap/extension-horizontal-rule": "^2.11.7",
     "@tiptap/extension-text-align": "^2.11.7",
     "@tiptap/extension-text-style": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.5",

src/components/form-builder/form-components/wysiwyg/editor-toolbar.tsx

@@ -26,6 +26,7 @@ import {
 } from "./hooks/useEditorContentTypes";
 import { useTextAlign } from "./hooks/useTextAlign";
 import { icons } from "lucide-react";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
 // Memoize the toolbar button to prevent re-renders
 const ToolbarButton = memo(
   ({

src/components/form-builder/form-components/wysiwyg/form-wysiwyg-editor.tsx

@@ -53,6 +53,16 @@ export const FormWysiwygEditor: React.FC<FormWysiwygEditorProps> = memo(
             },
           },
           heading: false,
+          bulletList: {
+            HTMLAttributes: {
+              class: "my-6 ml-6 list-disc [&>li]:mt-2",
+            },
+          },
+          orderedList: {
+            HTMLAttributes: {
+              class: "my-6 ml-6 list-decimal [&>li]:mt-2",
+            },
+          },
         }),
         Heading.configure({ levels: [1, 2, 3, 4] }).extend({
           levels: [1, 2, 3, 4],
@@ -80,7 +90,7 @@ export const FormWysiwygEditor: React.FC<FormWysiwygEditorProps> = memo(
         customClass,
         TextAlign.configure({
           types: ['heading', 'paragraph', "textStyle"],
-        }),
+        })
       ],
       []
     );

yarn.lock

@@ -1835,6 +1835,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-horizontal-rule@npm:^2.11.7":
+  version: 2.11.7
+  resolution: "@tiptap/extension-horizontal-rule@npm:2.11.7"
+  peerDependencies:
+    "@tiptap/core": ^2.7.0
+    "@tiptap/pm": ^2.7.0
+  checksum: 10c0/cb04c4910d234ab85672bb9aa08c4415fd2bc7b094440e0293776dcebb3f13cdc21ac9c3dcdde2aa280cf842a75818c8cbad8d5e5bb5e8052fc6a82464fe5867
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-italic@npm:^2.11.5":
   version: 2.11.5
   resolution: "@tiptap/extension-italic@npm:2.11.5"
@@ -3608,6 +3618,7 @@ __metadata:
     "@radix-ui/react-toggle-group": "npm:^1.1.2"
     "@radix-ui/react-tooltip": "npm:^1.1.8"
     "@tailwindcss/postcss": "npm:^4.0.9"
+    "@tiptap/extension-horizontal-rule": "npm:^2.11.7"
     "@tiptap/extension-text-align": "npm:^2.11.7"
     "@tiptap/extension-text-style": "npm:^2.11.5"
     "@tiptap/extension-underline": "npm:^2.11.5"