OUT-2488 | Support dividers in client home

package.json

@@ -33,6 +33,7 @@
     "@tippyjs/react": "^4.2.6",
     "@tiptap/extension-gapcursor": "^2.1.12",
     "@tiptap/extension-hard-break": "^2.1.13",
+    "@tiptap/extension-horizontal-rule": "^2.1.13",
     "@tiptap/extension-image": "^2.1.12",
     "@tiptap/extension-link": "^2.1.12",
     "@tiptap/extension-mention": "^2.1.13",

src/app/components/ClientPreview.tsx

@@ -42,6 +42,7 @@ import { IframeExtension } from '@/components/tiptap/iframe/ext_iframe'
 import { defaultBgColor } from '@/utils/constants'
 import { prepareCustomLabel } from '@/utils/customLabels'
 import { CustomLabels } from '@/types/common'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
 
 const ClientPreview = ({
   content,
@@ -131,6 +132,11 @@ const ClientPreview = ({
       TableHeader,
       CodeBlock,
       Code,
+      HorizontalRule.configure({
+        HTMLAttributes: {
+          class: 'divider',
+        },
+      }),
     ],
     content: content || defaultState,
   })

src/app/components/EditorInterface.tsx

@@ -32,19 +32,19 @@ import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
 import Text from '@tiptap/extension-text'
 import Underline from '@tiptap/extension-underline'
-import Handlebars from 'handlebars'
 import { Scrollbars } from 'react-custom-scrollbars'
 import { Toaster } from 'react-hot-toast'
 
 import NoteDisplay from '@/components/display/NoteDisplay'
 import { When } from '@/components/hoc/When'
 import BubbleMenuContainer from '@/components/tiptap/bubbleMenu/BubbleMenu'
 import ControlledBubbleMenu from '@/components/tiptap/bubbleMenu/ControlledBubbleMenu'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
 
 import LoaderComponent from '@/components/display/Loader'
 import { AutofillExtension } from '@/components/tiptap/autofieldSelector/ext_autofill'
-import { IframeExtension } from '@/components/tiptap/iframe/ext_iframe'
 import BubbleEmbedInput from '@/components/tiptap/iframe/IFrameInput'
+import { IframeExtension } from '@/components/tiptap/iframe/ext_iframe'
 import BubbleLinkInput from '@/components/tiptap/linkInput/BubbleLinkInput'
 import { NotificationWidgetExtension } from '@/components/tiptap/notificationWidget/ext_notification_widget'
 import { useAppDataContext } from '@/hooks/useAppData'
@@ -58,12 +58,12 @@ import {
 } from '@/utils/customLabels'
 import { ImagePickerUtils } from '@/utils/imagePickerUtils'
 import { defaultNotificationOptions } from '@/utils/notifications'
+import { safeCompile } from '@/utils/safeCompile'
+import { preprocessTemplate } from '@/utils/string'
 import { Delete } from '@mui/icons-material'
 import { Box } from '@mui/material'
 import Image from 'next/image'
 import { defaultState } from '../../../defaultState'
-import { preprocessTemplate } from '@/utils/string'
-import { safeCompile } from '@/utils/safeCompile'
 
 interface IEditorInterface {
   settings: ISettings | null
@@ -166,6 +166,11 @@ const EditorInterface = ({
         }),
         CodeBlock,
         Code,
+        HorizontalRule.configure({
+          HTMLAttributes: {
+            class: 'divider',
+          },
+        }),
       ],
       content: prepareCustomLabel(
         settings?.content || defaultState,

src/app/globals.css

@@ -206,3 +206,10 @@ table {
   height: 0;
   pointer-events: none;
 }
+
+.tiptap .divider {
+  margin-top: 12px;
+  margin-bottom: 12px;
+  border: none;
+  border-top: 1px solid rgb(96, 96, 106);
+}