Added spacer block

2024-03-02 20:38:57 +01:00 · 2024-03-02 20:38:57 +01:00 · 7842f7e35f
parent d00bf52e40
commit 7842f7e35f
8 changed files with 132 additions and 316 deletions
--- a/src/blocks/sectionBlock.ts
+++ b/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,
        ],
      }),
    },
--- a/src/blocks/spacerBlock.ts
+++ b/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,
+      })),
+    },
+  ],
+};
--- a/src/blocks/transcriptBlock.ts
+++ b/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],
    },
  ],
 };
--- a/src/collections/Pages/Pages.ts
+++ b/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,
          }),
--- a/src/constants.ts
+++ b/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";
--- a/src/sdk.ts
+++ b/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> =>
-    await (await request(payloadApiUrl(Collections.Contents, `slug/${slug}`))).json(),
-  getKeys: async (): Promise<EndpointKey[]> =>
-    await (await request(payloadApiUrl(Collections.Keys, `all`))).json(),
+  getWordings: async (): Promise<EndpointWording[]> =>
+    await (await request(payloadApiUrl(Collections.Wordings, `all`))).json(),
  getRecorders: async (): Promise<EndpointRecorder[]> =>
    await (await request(payloadApiUrl(Collections.Recorders, `all`))).json(),
  getTags: async (): Promise<EndpointTag[]> =>
--- a/src/styles.scss
+++ b/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 {
--- a/src/types/collections.ts
+++ b/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;
-  authors: (string | Recorder)[];
-  categories?: (string | Key)[] | null;
-  translations: {
-    language: string | Language;
-    sourceLanguage: string | Language;
-    title: string;
-    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;
-    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;
+  translations?:
+    | {
+        language: string | Language;
+        name: string;
+        id?: string | null;
+      }[]
+    | null;
+  group: string | TagsGroup;
  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';