Added spacer block

src/blocks/sectionBlock.ts

@@ -1,5 +1,6 @@
 import { Block } from "payload/types";
 import { createEditor } from "../utils/editor";
+import { spacerBlock } from "./spacerBlock";
 import { transcriptBlock } from "./transcriptBlock";
 
 const generateRecursiveSectionBlock = (depth = 1, maxDepth = 5): Block => ({
@@ -12,6 +13,9 @@ const generateRecursiveSectionBlock = (depth = 1, maxDepth = 5): Block => ({
       type: "richText",
       label: false,
       required: true,
+      admin: {
+        className: "section-reduced-margins",
+      },
       editor: createEditor({
         images: true,
         inlines: true,
@@ -20,8 +24,9 @@ const generateRecursiveSectionBlock = (depth = 1, maxDepth = 5): Block => ({
         relations: true,
         alignment: true,
         blocks: [
-          transcriptBlock,
           ...(depth < maxDepth ? [generateRecursiveSectionBlock(depth + 1, maxDepth)] : []),
+          spacerBlock,
+          transcriptBlock,
         ],
       }),
     },

src/blocks/spacerBlock.ts

@@ -0,0 +1,20 @@
+import { Block } from "payload/types";
+import { SpacerSizes } from "../constants";
+
+export const spacerBlock: Block = {
+  slug: "spacerBlock",
+  interfaceName: "SpacerBlock",
+  labels: { singular: "Spacer", plural: "Spacers" },
+  fields: [
+    {
+      name: "size",
+      type: "radio",
+      defaultValue: "medium",
+      required: true,
+      options: Object.entries(SpacerSizes).map(([value, label]) => ({
+        label,
+        value,
+      })),
+    },
+  ],
+};

src/blocks/transcriptBlock.ts

@@ -1,6 +1,7 @@
 import { Block } from "payload/types";
 import { cueBlock } from "./cueBlock";
 import { lineBlock } from "./lineBlock";
+import { spacerBlock } from "./spacerBlock";
 
 export const transcriptBlock: Block = {
   slug: "transcriptBlock",
@@ -13,7 +14,7 @@ export const transcriptBlock: Block = {
       required: true,
       minRows: 1,
       admin: { initCollapsed: true, className: "no-label" },
-      blocks: [lineBlock, cueBlock],
+      blocks: [lineBlock, cueBlock, spacerBlock],
     },
   ],
 };

src/collections/Pages/Pages.ts

@@ -1,5 +1,6 @@
 import { Where } from "payload/types";
 import { sectionBlock } from "../../blocks/sectionBlock";
+import { spacerBlock } from "../../blocks/spacerBlock";
 import { transcriptBlock } from "../../blocks/transcriptBlock";
 import { QuickFilters, publishStatusFilters } from "../../components/QuickFilters";
 import { CollectionGroups, Collections, PageType } from "../../constants";
@@ -118,11 +119,12 @@ export const Pages = buildVersionedCollectionConfig({
           name: fields.content,
           type: "richText",
           required: true,
+          admin: {description: "Looking for help? Read the Rich Text Editor guide here: https://accords-library.com/dev/rich-text"},
           editor: createEditor({
             images: true,
             inlines: true,
             alignment: true,
-            blocks: [sectionBlock, transcriptBlock],
+            blocks: [sectionBlock, spacerBlock, transcriptBlock],
             links: true,
             lists: true,
           }),

src/constants.ts

@@ -1,4 +1,10 @@
-import type { CueBlock, LineBlock, SectionBlock, TranscriptBlock } from "./types/collections";
+import type {
+  CueBlock,
+  LineBlock,
+  SectionBlock,
+  SpacerBlock,
+  TranscriptBlock,
+} from "./types/collections";
 
 // END MOCKING SECTION
 
@@ -28,6 +34,7 @@ export enum Collections {
   Tags = "tags",
   TagsGroups = "tags-groups",
   Images = "images",
+  Wordings = "wordings"
 }
 
 export enum CollectionGroups {
@@ -106,6 +113,13 @@ export enum PageType {
   Generic = "Generic",
 }
 
+export enum SpacerSizes {
+  Small = "Small",
+  Medium = "Medium",
+  Large = "Large",
+  XLarge = "Extra Large",
+}
+
 /* RICH TEXT */
 
 export type RichTextContent = {
@@ -132,6 +146,7 @@ export interface RichTextNodeWithChildren extends RichTextNode {
 
 export interface RichTextParagraphNode extends RichTextNodeWithChildren {
   type: "paragraph";
+  format: "left" | "start" | "center" | "right" | "end" | "justify" | "";
 }
 
 export interface RichTextListNode extends RichTextNode {
@@ -158,6 +173,11 @@ export interface RichTextTextNode extends RichTextNode {
   text: string;
 }
 
+export interface RichTextTabNode extends RichTextNode {
+  type: "tab";
+  format: number;
+}
+
 export interface RichTextLinkNode extends RichTextNodeWithChildren {
   type: "link";
   fields: {
@@ -199,6 +219,10 @@ export interface RichTextTranscriptBlock extends RichTextBlockNode {
   fields: TranscriptBlock;
 }
 
+export interface RichTextSpacerBlock extends RichTextBlockNode {
+  fields: SpacerBlock;
+}
+
 export const isNodeParagraphNode = (node: RichTextNode): node is RichTextParagraphNode =>
   node.type === "paragraph";
 
@@ -217,6 +241,8 @@ export const isListNodeCheckListNode = (node: RichTextListNode): node is RichTex
 export const isNodeTextNode = (node: RichTextNode): node is RichTextTextNode =>
   node.type === "text";
 
+export const isNodeTabNode = (node: RichTextNode): node is RichTextTabNode => node.type === "tab";
+
 export const isNodeLinkNode = (node: RichTextNode): node is RichTextLinkNode =>
   node.type === "link";
 
@@ -237,6 +263,9 @@ export const isBlockNodeTranscriptBlock = (
   node: RichTextBlockNode
 ): node is RichTextTranscriptBlock => node.fields.blockType === "transcriptBlock";
 
+export const isBlockNodeSpacerBlock = (node: RichTextBlockNode): node is RichTextSpacerBlock =>
+  node.fields.blockType === "spacerBlock";
+
 /* BLOCKS */
 
 /* TODO: TO BE REMOVED WHEN https://github.com/payloadcms/payload/issues/5216 is closed */
@@ -253,7 +282,6 @@ export interface LineBlock {
 export interface GenericBlock {
   id?: string | null;
   blockName?: string | null;
-  content: unknown;
   blockType: string;
 }
 
@@ -262,3 +290,6 @@ export const isBlockCueBlock = (block: GenericBlock): block is CueBlock =>
 
 export const isBlockLineBlock = (block: GenericBlock): block is LineBlock =>
   block.blockType === "lineBlock";
+
+export const isBlockSpacerBlock = (block: GenericBlock): block is SpacerBlock =>
+  block.blockType === "spacerBlock";

src/sdk.ts

@@ -1,5 +1,5 @@
 import { Collections, PageType, RichTextContent } from "./constants";
-import { Content, Currency, Key, Language, LibraryItem, Page } from "./types/collections";
+import { Currency, Key, Language, LibraryItem, Page } from "./types/collections";
 
 class NodeCache {
   constructor(_params: any) {}
@@ -174,10 +174,6 @@ export type EndpointFolder = EndpointFolderPreview & {
         relationTo: "library-items";
         value: LibraryItem;
       }
-    | {
-        relationTo: "contents";
-        value: Content;
-      }
     | {
         relationTo: "pages";
         value: Page;
@@ -197,30 +193,6 @@ export type EndpointFolderPreview = {
   darkThumbnail?: PayloadImage;
 };
 
-export type EndpointContent = {
-  slug: string;
-  thumbnail?: PayloadImage;
-  tagGroups: TagGroup[];
-  translations: {
-    language: string;
-    sourceLanguage: string;
-    pretitle?: string;
-    title: string;
-    subtitle?: string;
-    summary?: RichTextContent;
-    format: {
-      text?: {
-        content: RichTextContent;
-        toc: TableOfContentEntry[];
-        transcribers: string[];
-        translators: string[];
-        proofreaders: string[];
-        notes?: RichTextContent;
-      };
-    };
-  }[];
-};
-
 export type EndpointRecorder = {
   id: string;
   username: string;
@@ -243,6 +215,14 @@ export type EndpointKey = {
   }[];
 };
 
+export type EndpointWording = {
+  name: string;
+  translations: {
+    language: string;
+    name: string;
+  }[];
+};
+
 export type EndpointTag = {
   slug: string;
   translations: {
@@ -321,10 +301,8 @@ export const payload = {
     await (await request(payloadApiUrl(Collections.Languages, `all`))).json(),
   getCurrencies: async (): Promise<Currency[]> =>
     await (await request(payloadApiUrl(Collections.Currencies, `all`))).json(),
-  getContent: async (slug: string): Promise<EndpointContent> =>
+  getWordings: async (): Promise<EndpointWording[]> =>
-    await (await request(payloadApiUrl(Collections.Contents, `slug/${slug}`))).json(),
+    await (await request(payloadApiUrl(Collections.Wordings, `all`))).json(),
-  getKeys: async (): Promise<EndpointKey[]> =>
-    await (await request(payloadApiUrl(Collections.Keys, `all`))).json(),
   getRecorders: async (): Promise<EndpointRecorder[]> =>
     await (await request(payloadApiUrl(Collections.Recorders, `all`))).json(),
   getTags: async (): Promise<EndpointTag[]> =>

src/styles.scss

@@ -74,10 +74,18 @@ html[data-theme="light"] {
   display: none;
 }
 
+.lexical-block__block-pill-spacerBlock + .section-title {
+  display: none;
+}
+
 .blocks-field__block-pill-cueBlock + .section-title {
   display: none;
 }
 
+.blocks-field__block-pill-spacerBlock + .section-title {
+  display: none;
+}
+
 // Reduce margin on Lexical blocks with the classname "reduced-margins"
 
 .rich-text-lexical.field-type.reduced-margins {
@@ -85,6 +93,11 @@ html[data-theme="light"] {
   margin-bottom: -2rem;
 }
 
+.rich-text-lexical.field-type.section-reduced-margins {
+  margin-top: -1.5em;
+  margin-bottom: -2rem;
+}
+
 // CSS for componentField
 
 .collapsible-field.component-field {

src/types/collections.ts

@@ -39,7 +39,6 @@ export type CategoryTranslations =
   | {
       language: string | Language;
       name: string;
-      short?: string | null;
       id?: string | null;
     }[]
   | null;
@@ -49,20 +48,16 @@ export interface Config {
     folders: Folder;
     'folders-thumbnails': FoldersThumbnail;
     'library-items': LibraryItem;
-    contents: Content;
-    posts: Post;
     pages: Page;
     'chronology-items': ChronologyItem;
     'chronology-eras': ChronologyEra;
     weapons: Weapon;
     'weapons-groups': WeaponsGroup;
     'weapons-thumbnails': WeaponsThumbnail;
-    'contents-thumbnails': ContentsThumbnail;
     'library-items-thumbnails': LibraryItemThumbnail;
     'library-items-scans': LibraryItemScans;
     'library-items-gallery': LibraryItemGallery;
     'recorders-thumbnails': RecordersThumbnail;
-    'posts-thumbnails': PostThumbnail;
     files: File;
     notes: Note;
     videos: Video;
@@ -74,6 +69,7 @@ export interface Config {
     tags: Tag;
     'tags-groups': TagsGroup;
     images: Image;
+    wordings: Wording;
     'payload-preferences': PayloadPreference;
     'payload-migrations': PayloadMigration;
   };
@@ -130,10 +126,6 @@ export interface Folder {
             relationTo: 'library-items';
             value: string | LibraryItem;
           }
-        | {
-            relationTo: 'contents';
-            value: string | Content;
-          }
         | {
             relationTo: 'pages';
             value: string | Page;
@@ -318,7 +310,7 @@ export interface LibraryItem {
   subitems?: (string | LibraryItem)[] | null;
   contents?:
     | {
-        content: string | Content;
+        content: string | Page;
         pageStart?: number | null;
         pageEnd?: number | null;
         timeStart?: number | null;
@@ -563,191 +555,6 @@ export interface Key {
 export interface Currency {
   id: string;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "contents".
- */
-export interface Content {
-  id: string;
-  slug: string;
-  thumbnail?: string | ContentsThumbnail | null;
-  tags?: (string | Tag)[] | null;
-  translations: {
-    language: string | Language;
-    sourceLanguage: string | Language;
-    pretitle?: string | null;
-    title: string;
-    subtitle?: string | null;
-    summary?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    textContent?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    textTranscribers?: (string | Recorder)[] | null;
-    textTranslators?: (string | Recorder)[] | null;
-    textProofreaders?: (string | Recorder)[] | null;
-    textNotes?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    video?: (string | null) | File;
-    videoNotes?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    audio?: (string | null) | File;
-    audioNotes?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    id?: string | null;
-  }[];
-  folders?: (string | Folder)[] | null;
-  libraryItems?: (string | LibraryItem)[] | null;
-  previousContents?: (string | Content)[] | null;
-  nextContents?: (string | Content)[] | null;
-  updatedBy: string | Recorder;
-  updatedAt: string;
-  createdAt: string;
-  _status?: ('draft' | 'published') | null;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "contents-thumbnails".
- */
-export interface ContentsThumbnail {
-  id: string;
-  contents?: (string | Content)[] | null;
-  updatedAt: string;
-  createdAt: string;
-  url?: string | null;
-  filename?: string | null;
-  mimeType?: string | null;
-  filesize?: number | null;
-  width?: number | null;
-  height?: number | null;
-  sizes?: {
-    thumb?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-    og?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-    medium?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-  };
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "tags".
- */
-export interface Tag {
-  id: string;
-  name?: string | null;
-  slug: string;
-  translations?:
-    | {
-        language: string | Language;
-        name: string;
-        id?: string | null;
-      }[]
-    | null;
-  group: string | TagsGroup;
-  updatedAt: string;
-  createdAt: string;
-}
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "tags-groups".
- */
-export interface TagsGroup {
-  id: string;
-  slug: string;
-  icon?: string | null;
-  translations?:
-    | {
-        language: string | Language;
-        name: string;
-        id?: string | null;
-      }[]
-    | null;
-  updatedAt: string;
-  createdAt: string;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "pages".
@@ -842,100 +649,40 @@ export interface Image {
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "posts".
+ * via the `definition` "tags".
  */
-export interface Post {
+export interface Tag {
   id: string;
+  name?: string | null;
   slug: string;
-  thumbnail?: string | PostThumbnail | null;
+  translations?:
-  authors: (string | Recorder)[];
+    | {
-  categories?: (string | Key)[] | null;
+        language: string | Language;
-  translations: {
+        name: string;
-    language: string | Language;
+        id?: string | null;
-    sourceLanguage: string | Language;
+      }[]
-    title: string;
+    | null;
-    summary?: {
+  group: string | TagsGroup;
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    content?: {
-      root: {
-        children: {
-          type: string;
-          version: number;
-          [k: string]: unknown;
-        }[];
-        direction: ('ltr' | 'rtl') | null;
-        format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-        indent: number;
-        type: string;
-        version: number;
-      };
-      [k: string]: unknown;
-    } | null;
-    translators?: (string | Recorder)[] | null;
-    proofreaders?: (string | Recorder)[] | null;
-    id?: string | null;
-  }[];
-  publishedDate: string;
-  hidden?: boolean | null;
-  updatedBy: string | Recorder;
   updatedAt: string;
   createdAt: string;
-  _status?: ('draft' | 'published') | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "posts-thumbnails".
+ * via the `definition` "tags-groups".
  */
-export interface PostThumbnail {
+export interface TagsGroup {
   id: string;
-  posts?: (string | Post)[] | null;
+  slug: string;
+  icon?: string | null;
+  translations?:
+    | {
+        language: string | Language;
+        name: string;
+        id?: string | null;
+      }[]
+    | null;
   updatedAt: string;
   createdAt: string;
-  url?: string | null;
-  filename?: string | null;
-  mimeType?: string | null;
-  filesize?: number | null;
-  width?: number | null;
-  height?: number | null;
-  sizes?: {
-    thumb?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-    og?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-    medium?: {
-      url?: string | null;
-      width?: number | null;
-      height?: number | null;
-      mimeType?: string | null;
-      filesize?: number | null;
-      filename?: string | null;
-    };
-  };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -1250,6 +997,17 @@ export interface VideosChannel {
   title: string;
   subscribers?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "wordings".
+ */
+export interface Wording {
+  id: string;
+  name: string;
+  translations?: CategoryTranslations;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".
@@ -1284,6 +1042,14 @@ export interface PayloadMigration {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "SpacerBlock".
+ */
+export interface SpacerBlock {
+  size: 'Small' | 'Medium' | 'Large' | 'XLarge';
+  blockType: 'spacerBlock';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "LineBlock".
@@ -1333,7 +1099,7 @@ export interface CueBlock {
  * via the `definition` "TranscriptBlock".
  */
 export interface TranscriptBlock {
-  lines: (LineBlock | CueBlock)[];
+  lines: (LineBlock | CueBlock | SpacerBlock)[];
   id?: string | null;
   blockName?: string | null;
   blockType: 'transcriptBlock';