From bda40f62ce15e20ce92a8a4a64c083055b63f95b Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 7 Aug 2025 11:57:30 -0400
Subject: [PATCH] add horizontal rules

---
 actions/publishToPublication.ts               | 11 +++++++-
 .../[publication]/[rkey]/PostContent.tsx      |  4 +++
 .../[rkey]/StaticPostContent.tsx              |  4 +++
 components/Blocks/Block.tsx                   |  2 ++
 components/Blocks/HorizontalRule.tsx          |  3 +++
 components/Blocks/TextBlock/index.tsx         | 11 ++++++++
 components/Blocks/TextBlock/useHandlePaste.ts |  5 ++++
 lexicons/api/index.ts                         |  2 ++
 lexicons/api/lexicons.ts                      | 13 ++++++++++
 .../pub/leaflet/blocks/horizontalRule.ts      | 25 +++++++++++++++++++
 .../types/pub/leaflet/pages/linearDocument.ts |  2 ++
 .../pub/leaflet/blocks/horizontalRule.json    | 11 ++++++++
 .../pub/leaflet/pages/linearDocument.json     |  3 ++-
 lexicons/src/blocks.ts                        | 14 +++++++++++
 src/replicache/attributes.ts                  |  3 ++-
 src/utils/getBlocksAsHTML.tsx                 |  3 +++
 16 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 components/Blocks/HorizontalRule.tsx
 create mode 100644 lexicons/api/types/pub/leaflet/blocks/horizontalRule.ts
 create mode 100644 lexicons/pub/leaflet/blocks/horizontalRule.json

diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 3f586921..be6bbc1d 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -16,6 +16,7 @@ import {
   PubLeafletBlocksWebsite,
   PubLeafletBlocksCode,
   PubLeafletBlocksMath,
+  PubLeafletBlocksHorizontalRule,
 } from "lexicons/api";
 import { Block } from "components/Blocks/Block";
 import { TID } from "@atproto/common";
@@ -232,10 +233,18 @@ function blockToRecord(
     b.type !== "image" &&
     b.type !== "link" &&
     b.type !== "code" &&
-    b.type !== "math"
+    b.type !== "math" &&
+    b.type !== "horizontal-rule"
   )
     return;
 
+  if (b.type === "horizontal-rule") {
+    let block: $Typed<PubLeafletBlocksHorizontalRule.Main> = {
+      $type: ids.PubLeafletBlocksHorizontalRule,
+    };
+    return block;
+  }
+
   if (b.type === "heading") {
     let [headingLevel] = scan.eav(b.value, "block/heading-level");
 
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 849d9a65..632386bd 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -8,6 +8,7 @@ import {
   PubLeafletBlocksWebsite,
   PubLeafletDocument,
   PubLeafletPagesLinearDocument,
+  PubLeafletBlocksHorizontalRule,
 } from "lexicons/api";
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { TextBlock } from "./TextBlock";
@@ -92,6 +93,9 @@ let Block = ({
     `;
 
   switch (true) {
+    case PubLeafletBlocksHorizontalRule.isMain(b.block): {
+      return <hr className="my-2 w-full border-border-light" />;
+    }
     case PubLeafletBlocksUnorderedList.isMain(b.block): {
       return (
         <ul className="-ml-[1px] sm:ml-[9px] pb-2">
diff --git a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
index bc2bb620..f9355b22 100644
--- a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
@@ -1,6 +1,7 @@
 import {
   PubLeafletBlocksCode,
   PubLeafletBlocksHeader,
+  PubLeafletBlocksHorizontalRule,
   PubLeafletBlocksImage,
   PubLeafletBlocksMath,
   PubLeafletBlocksText,
@@ -42,6 +43,9 @@ let Block = async ({
   let b = block;
 
   switch (true) {
+    case PubLeafletBlocksHorizontalRule.isMain(b.block): {
+      return <hr className="my-2 w-full border-border-light" />;
+    }
     case PubLeafletBlocksMath.isMain(b.block): {
       return <StaticMathBlock block={b.block} />;
     }
diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 2e03b380..91f4c1f1 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -28,6 +28,7 @@ import { CheckboxEmpty } from "components/Icons/CheckboxEmpty";
 import { LockTiny } from "components/Icons/LockTiny";
 import { MathBlock } from "./MathBlock";
 import { CodeBlock } from "./CodeBlock";
+import { HorizontalRule } from "./HorizontalRule";
 
 export type Block = {
   factID: string;
@@ -184,6 +185,7 @@ const BlockTypeComponents: {
   button: ButtonBlock,
   poll: PollBlock,
   "bluesky-post": BlueskyPostBlock,
+  "horizontal-rule": HorizontalRule,
 };
 
 export const BlockMultiselectIndicator = (props: BlockProps) => {
diff --git a/components/Blocks/HorizontalRule.tsx b/components/Blocks/HorizontalRule.tsx
new file mode 100644
index 00000000..08810934
--- /dev/null
+++ b/components/Blocks/HorizontalRule.tsx
@@ -0,0 +1,3 @@
+export const HorizontalRule = () => {
+  return <hr className="my-2 w-full border-border-light" />;
+};
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index 8c00f8a7..975eef9a 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -342,6 +342,17 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
         <pre
           data-entityid={props.entityID}
           onBlur={async () => {
+            if (
+              ["***", "---", "___"].includes(
+                editorState?.doc.textContent.trim() || "",
+              )
+            ) {
+              await rep.rep?.mutate.assertFact({
+                entity: props.entityID,
+                attribute: "block/type",
+                data: { type: "block-type-union", value: "horizontal-rule" },
+              });
+            }
             if (actionTimeout.current) {
               rep.undoManager.endGroup();
               window.clearTimeout(actionTimeout.current);
diff --git a/components/Blocks/TextBlock/useHandlePaste.ts b/components/Blocks/TextBlock/useHandlePaste.ts
index 78d183bc..9732ac3d 100644
--- a/components/Blocks/TextBlock/useHandlePaste.ts
+++ b/components/Blocks/TextBlock/useHandlePaste.ts
@@ -243,6 +243,10 @@ const createBlockFromHTML = (
       type = "link";
       break;
     }
+    case "HR": {
+      type = "horizontal-rule";
+      break;
+    }
     default:
       type = null;
   }
@@ -563,6 +567,7 @@ function flattenHTMLToTextBlocks(element: HTMLElement): HTMLElement[] {
           "IMG",
           "A",
           "SPAN",
+          "HR",
         ].includes(elementNode.tagName) ||
         elementNode.getAttribute("data-entityid") ||
         elementNode.getAttribute("data-tex")
diff --git a/lexicons/api/index.ts b/lexicons/api/index.ts
index f4b9947f..8081a202 100644
--- a/lexicons/api/index.ts
+++ b/lexicons/api/index.ts
@@ -9,6 +9,7 @@ import * as PubLeafletDocument from './types/pub/leaflet/document'
 import * as PubLeafletPublication from './types/pub/leaflet/publication'
 import * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 import * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
+import * as PubLeafletBlocksHorizontalRule from './types/pub/leaflet/blocks/horizontalRule'
 import * as PubLeafletBlocksImage from './types/pub/leaflet/blocks/image'
 import * as PubLeafletBlocksMath from './types/pub/leaflet/blocks/math'
 import * as PubLeafletBlocksText from './types/pub/leaflet/blocks/text'
@@ -38,6 +39,7 @@ export * as PubLeafletDocument from './types/pub/leaflet/document'
 export * as PubLeafletPublication from './types/pub/leaflet/publication'
 export * as PubLeafletBlocksCode from './types/pub/leaflet/blocks/code'
 export * as PubLeafletBlocksHeader from './types/pub/leaflet/blocks/header'
+export * as PubLeafletBlocksHorizontalRule from './types/pub/leaflet/blocks/horizontalRule'
 export * as PubLeafletBlocksImage from './types/pub/leaflet/blocks/image'
 export * as PubLeafletBlocksMath from './types/pub/leaflet/blocks/math'
 export * as PubLeafletBlocksText from './types/pub/leaflet/blocks/text'
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index 3316b415..f54ffa62 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -209,6 +209,17 @@ export const schemaDict = {
       },
     },
   },
+  PubLeafletBlocksHorizontalRule: {
+    lexicon: 1,
+    id: 'pub.leaflet.blocks.horizontalRule',
+    defs: {
+      main: {
+        type: 'object',
+        required: [],
+        properties: {},
+      },
+    },
+  },
   PubLeafletBlocksImage: {
     lexicon: 1,
     id: 'pub.leaflet.blocks.image',
@@ -402,6 +413,7 @@ export const schemaDict = {
               'lex:pub.leaflet.blocks.website',
               'lex:pub.leaflet.blocks.math',
               'lex:pub.leaflet.blocks.code',
+              'lex:pub.leaflet.blocks.horizontalRule',
             ],
           },
           alignment: {
@@ -1651,6 +1663,7 @@ export const ids = {
   PubLeafletPublication: 'pub.leaflet.publication',
   PubLeafletBlocksCode: 'pub.leaflet.blocks.code',
   PubLeafletBlocksHeader: 'pub.leaflet.blocks.header',
+  PubLeafletBlocksHorizontalRule: 'pub.leaflet.blocks.horizontalRule',
   PubLeafletBlocksImage: 'pub.leaflet.blocks.image',
   PubLeafletBlocksMath: 'pub.leaflet.blocks.math',
   PubLeafletBlocksText: 'pub.leaflet.blocks.text',
diff --git a/lexicons/api/types/pub/leaflet/blocks/horizontalRule.ts b/lexicons/api/types/pub/leaflet/blocks/horizontalRule.ts
new file mode 100644
index 00000000..5535dcad
--- /dev/null
+++ b/lexicons/api/types/pub/leaflet/blocks/horizontalRule.ts
@@ -0,0 +1,25 @@
+/**
+ * GENERATED CODE - DO NOT MODIFY
+ */
+import { ValidationResult, BlobRef } from '@atproto/lexicon'
+import { CID } from 'multiformats/cid'
+import { validate as _validate } from '../../../../lexicons'
+import { $Typed, is$typed as _is$typed, OmitKey } from '../../../../util'
+
+const is$typed = _is$typed,
+  validate = _validate
+const id = 'pub.leaflet.blocks.horizontalRule'
+
+export interface Main {
+  $type?: 'pub.leaflet.blocks.horizontalRule'
+}
+
+const hashMain = 'main'
+
+export function isMain<V>(v: V) {
+  return is$typed(v, id, hashMain)
+}
+
+export function validateMain<V>(v: V) {
+  return validate<Main & V>(v, id, hashMain)
+}
diff --git a/lexicons/api/types/pub/leaflet/pages/linearDocument.ts b/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
index b6948b7e..e29bab03 100644
--- a/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
+++ b/lexicons/api/types/pub/leaflet/pages/linearDocument.ts
@@ -12,6 +12,7 @@ import type * as PubLeafletBlocksUnorderedList from '../blocks/unorderedList'
 import type * as PubLeafletBlocksWebsite from '../blocks/website'
 import type * as PubLeafletBlocksMath from '../blocks/math'
 import type * as PubLeafletBlocksCode from '../blocks/code'
+import type * as PubLeafletBlocksHorizontalRule from '../blocks/horizontalRule'
 
 const is$typed = _is$typed,
   validate = _validate
@@ -42,6 +43,7 @@ export interface Block {
     | $Typed<PubLeafletBlocksWebsite.Main>
     | $Typed<PubLeafletBlocksMath.Main>
     | $Typed<PubLeafletBlocksCode.Main>
+    | $Typed<PubLeafletBlocksHorizontalRule.Main>
     | { $type: string }
   alignment?:
     | 'lex:pub.leaflet.pages.linearDocument#textAlignLeft'
diff --git a/lexicons/pub/leaflet/blocks/horizontalRule.json b/lexicons/pub/leaflet/blocks/horizontalRule.json
new file mode 100644
index 00000000..4d3b604f
--- /dev/null
+++ b/lexicons/pub/leaflet/blocks/horizontalRule.json
@@ -0,0 +1,11 @@
+{
+  "lexicon": 1,
+  "id": "pub.leaflet.blocks.horizontalRule",
+  "defs": {
+    "main": {
+      "type": "object",
+      "required": [],
+      "properties": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/lexicons/pub/leaflet/pages/linearDocument.json b/lexicons/pub/leaflet/pages/linearDocument.json
index 66811fdb..aea5936f 100644
--- a/lexicons/pub/leaflet/pages/linearDocument.json
+++ b/lexicons/pub/leaflet/pages/linearDocument.json
@@ -29,7 +29,8 @@
             "pub.leaflet.blocks.unorderedList",
             "pub.leaflet.blocks.website",
             "pub.leaflet.blocks.math",
-            "pub.leaflet.blocks.code"
+            "pub.leaflet.blocks.code",
+            "pub.leaflet.blocks.horizontalRule"
           ]
         },
         "alignment": {
diff --git a/lexicons/src/blocks.ts b/lexicons/src/blocks.ts
index 68975ebd..850f477f 100644
--- a/lexicons/src/blocks.ts
+++ b/lexicons/src/blocks.ts
@@ -18,6 +18,19 @@ export const PubLeafletBlocksText: LexiconDoc = {
     },
   },
 };
+
+export const PubLeafletBlocksHorizontalRule: LexiconDoc = {
+  lexicon: 1,
+  id: "pub.leaflet.blocks.horizontalRule",
+  defs: {
+    main: {
+      type: "object",
+      required: [],
+      properties: {},
+    },
+  },
+};
+
 export const PubLeafletBlocksCode: LexiconDoc = {
   lexicon: 1,
   id: "pub.leaflet.blocks.code",
@@ -168,6 +181,7 @@ export const BlockLexicons = [
   PubLeafletBlocksWebsite,
   PubLeafletBlocksMath,
   PubLeafletBlocksCode,
+  PubLeafletBlocksHorizontalRule,
 ];
 export const BlockUnion: LexRefUnion = {
   type: "union",
diff --git a/src/replicache/attributes.ts b/src/replicache/attributes.ts
index 7500d6fa..a574c7bc 100644
--- a/src/replicache/attributes.ts
+++ b/src/replicache/attributes.ts
@@ -331,7 +331,8 @@ export type Data<A extends keyof typeof Attributes> = {
       | "poll"
       | "bluesky-post"
       | "math"
-      | "code";
+      | "code"
+      | "horizontal-rule";
   };
   "canvas-pattern-union": {
     type: "canvas-pattern-union";
diff --git a/src/utils/getBlocksAsHTML.tsx b/src/utils/getBlocksAsHTML.tsx
index 1f84d1be..c0970ce4 100644
--- a/src/utils/getBlocksAsHTML.tsx
+++ b/src/utils/getBlocksAsHTML.tsx
@@ -76,6 +76,9 @@ async function renderBlock(
 ) {
   let wrapper: undefined | "h1" | "h2" | "h3";
   let [alignment] = await scanIndex(tx).eav(b.value, "block/text-alignment");
+  if (b.type === "horizontal-rule") {
+    return "<hr />";
+  }
   if (b.type === "code") {
     let [code] = await scanIndex(tx).eav(b.value, "block/code");
     let [lang] = await scanIndex(tx).eav(b.value, "block/code-language");
-- 
2.54.0