Support for goto scene break from toc

src/components/RichText/components/RTBlock/components/RTBreak.astro

@@ -21,11 +21,11 @@ const { node } = Astro.props;
       <br />
     </>
   ) : node.fields.type === BreakBlockType.sceneBreak ? (
-    <p>***</p>
+    <p id={node.anchorHash}>***</p>
   ) : node.fields.type === BreakBlockType.dottedLine ? (
-    <hr class="dotted" />
+    <hr id={node.anchorHash} class="dotted" />
   ) : node.fields.type === BreakBlockType.solidLine ? (
-    <hr class="solid" />
+    <hr id={node.anchorHash} class="solid" />
   ) : (
     <ErrorMessage
       title={`Unknown break block type: ${node.fields.type}`}
@@ -41,12 +41,14 @@ const { node } = Astro.props;
     font-size: 2em;
     color: var(--color-base-600);
     letter-spacing: 1em;
+    scroll-margin-block: 4rem;
   }
   hr {
     border: none;
     border-top-color: var(--color-base-500);
     width: 100%;
     margin-block: 4rem;
+    scroll-margin-block: 4rem;
 
     &.dotted {
       border-top-style: dotted;

src/components/RichText/components/RTBlock/components/RTSection.astro

@@ -13,28 +13,28 @@ const { node, context } = Astro.props;
 
 {
   context.depth < 2 ? (
-    <h2 id={node.fields.anchorHash}>
-      <span>{`${node.fields.anchorHash} `}</span>
+    <h2 id={node.anchorHash}>
+      <span>{`${node.anchorHash} `}</span>
       {node.fields.blockName}
     </h2>
   ) : context.depth === 2 ? (
-    <h3 id={node.fields.anchorHash}>
-      <span>{`${node.fields.anchorHash} `}</span>
+    <h3 id={node.anchorHash}>
+      <span>{`${node.anchorHash} `}</span>
       {node.fields.blockName}
     </h3>
   ) : context.depth === 3 ? (
-    <h4 id={node.fields.anchorHash}>
-      <span>{`${node.fields.anchorHash} `}</span>
+    <h4 id={node.anchorHash}>
+      <span>{`${node.anchorHash} `}</span>
       {node.fields.blockName}
     </h4>
   ) : context.depth === 4 ? (
-    <h5 id={node.fields.anchorHash}>
-      <span>{`${node.fields.anchorHash} `}</span>
+    <h5 id={node.anchorHash}>
+      <span>{`${node.anchorHash} `}</span>
       {node.fields.blockName}
     </h5>
   ) : (
-    <h6 id={node.fields.anchorHash}>
-      <span>{`${node.fields.anchorHash} `}</span>
+    <h6 id={node.anchorHash}>
+      <span>{`${node.anchorHash} `}</span>
       {node.fields.blockName}
     </h6>
   )

src/shared/payload/payload-sdk.ts

@@ -795,6 +795,16 @@ export interface CueBlock {
   };
   blockType: 'cueBlock';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "TranscriptBlock".
+ */
+export interface TranscriptBlock {
+  lines: (LineBlock | CueBlock)[];
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'transcriptBlock';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "BreakBlock".
@@ -805,16 +815,6 @@ export interface BreakBlock {
   blockName?: string | null;
   blockType: 'breakBlock';
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "TranscriptBlock".
- */
-export interface TranscriptBlock {
-  lines: (LineBlock | CueBlock | BreakBlock)[];
-  id?: string | null;
-  blockName?: string | null;
-  blockType: 'transcriptBlock';
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "SectionBlock".
@@ -1041,7 +1041,8 @@ export interface RichTextBlockNode extends RichTextNode {
 }
 
 export interface RichTextSectionBlock extends RichTextBlockNode {
-  fields: SectionBlock & { anchorHash: string };
+  fields: SectionBlock;
+  anchorHash: string;
 }
 
 export interface RichTextTranscriptBlock extends RichTextBlockNode {
@@ -1050,6 +1051,7 @@ export interface RichTextTranscriptBlock extends RichTextBlockNode {
 
 export interface RichTextBreakBlock extends RichTextBlockNode {
   fields: BreakBlock;
+  anchorHash: string;
 }
 
 export const isNodeParagraphNode = (node: RichTextNode): node is RichTextParagraphNode =>