ycode · liamwalder · Mar 24, 2026 · Mar 20, 2026 · Mar 20, 2026
@@ -250,6 +250,10 @@
   @apply bg-input px-1.5 py-0.5 rounded-md font-mono;
 }
 
+.rich-text-editor-full.ProseMirror hr {
+  @apply border-t border-border my-4;
+}
+
 /* Custom dropdown chevron for styled select elements on published pages */
 #ybody select.appearance-none {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

@@ -30,6 +30,7 @@ import ListItem from '@tiptap/extension-list-item';
 import Heading from '@tiptap/extension-heading';
 import Blockquote from '@tiptap/extension-blockquote';
 import Code from '@tiptap/extension-code';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
 import { cn } from '@/lib/utils';
 import type { CollectionField, Collection } from '@/types';
 import {
@@ -374,6 +375,7 @@ const RichTextEditor = forwardRef<RichTextEditorHandle, RichTextEditorProps>(({
         ListItem,
         Blockquote,
         Code,
+        HorizontalRule,
         RichTextImage,
       ];
 

@@ -565,6 +565,7 @@ const SUBLAYER_ICON_MAP: Record<string, string> = {
   blockquote: 'quote',
   richTextComponent: 'component',
   richTextImage: 'image',
+  horizontalRule: 'separator',
 };
 
 /**
@@ -579,6 +580,7 @@ export function contentBlockToStyleKey(block: { type: string; attrs?: Record<str
     case 'orderedList': return 'orderedList';
     case 'blockquote': return 'blockquote';
     case 'richTextImage': return 'richTextImage';
+    case 'horizontalRule': return 'horizontalRule';
     default: return null;
   }
 }
@@ -662,7 +664,7 @@ function buildSublayersFromDoc(doc: any, layer: Layer): RichTextSublayer[] {
         richTextComponent: 'Component',
         richTextImage: 'Image',
         codeBlock: 'Code Block',
-        horizontalRule: 'Divider',
+        horizontalRule: 'Separator',
       };
 
       const textContent = extractBlockText(block).trim();
@@ -733,6 +735,7 @@ const STYLE_SUBLAYER_ICON_MAP: Record<string, string> = {
   listItem: 'text',
   blockquote: 'quote',
   richTextImage: 'image',
+  horizontalRule: 'separator',
 };
 
 /** Inline mark style keys shown for all text layers */

@@ -53,9 +53,9 @@ export const structureTemplates: Record<string, BlockTemplate> = {
     name: 'Separator',
     template: {
       name: 'hr',
-      classes: ['border-t', 'border-[#d1d5db]'],
+      classes: ['border-t-[1px]', 'border-[#aeaeae]'],
       design: {
-        borders: { isActive: true, borderWidth: '1px 0 0 0', borderColor: '#d1d5db' },
+        borders: { isActive: true, borderTopWidth: '1px', borderColor: '#aeaeae' },
       }
     }
   },

@@ -187,6 +187,13 @@ export const DEFAULT_TEXT_STYLES: Record<string, TextStyle> = {
       borders: { borderRadius: '4px' },
     },
   },
+  horizontalRule: {
+    label: 'Separator',
+    classes: 'border-t-[1px] border-[#aeaeae]',
+    design: {
+      borders: { borderTopWidth: '1px', borderColor: '#aeaeae' },
+    },
+  },
 };
 
 /**
@@ -781,6 +788,17 @@ function renderBlock(
     return React.createElement('img', imgProps);
   }
 
+  if (block.type === 'horizontalRule') {
+    const hrProps: Record<string, any> = {
+      key,
+      className: getTextStyleClasses(textStyles, 'horizontalRule'),
+    };
+    if (isEditMode) {
+      hrProps['data-style'] = 'horizontalRule';
+    }
+    return React.createElement('hr', hrProps);
+  }
+
   // Handle embedded component blocks
   if (block.type === 'richTextComponent' && block.attrs?.componentId) {
     return renderRichTextComponentBlock(block, key, components, renderComponentBlock, ancestorComponentIds);

@@ -75,6 +75,8 @@ export function extractInlineNodesFromRichText(
     } else if (node.type === 'richTextComponent') {
       // Preserve embedded component nodes as-is for block rendering
       result.push(node);
+    } else if (node.type === 'horizontalRule') {
+      result.push(node);
     } else if (node.type === 'listItem') {
       // List items should be handled by their parent list
       // But if we encounter one directly, extract its content
@@ -114,7 +116,7 @@ export function contentHasBlockElements(content: any): boolean {
   // Handle Tiptap doc structure
   if (content.type === 'doc' && Array.isArray(content.content)) {
     return content.content.some((block: any) =>
-      block.type === 'bulletList' || block.type === 'orderedList' || block.type === 'richTextComponent'
+      block.type === 'bulletList' || block.type === 'orderedList' || block.type === 'richTextComponent' || block.type === 'horizontalRule'
     );
   }