From 7842f7e35f8cb18c5f8deb53addd879fca6ac3af Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Sat, 2 Mar 2024 20:38:57 +0100 Subject: [PATCH] Added spacer block --- src/blocks/sectionBlock.ts | 7 +- src/blocks/spacerBlock.ts | 20 ++ src/blocks/transcriptBlock.ts | 3 +- src/collections/Pages/Pages.ts | 4 +- src/constants.ts | 35 +++- src/sdk.ts | 44 ++--- src/styles.scss | 13 ++ src/types/collections.ts | 322 +++++---------------------------- 8 files changed, 132 insertions(+), 316 deletions(-) create mode 100644 src/blocks/spacerBlock.ts diff --git a/src/blocks/sectionBlock.ts b/src/blocks/sectionBlock.ts index edda8dc..951650b 100644 --- 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, ], }), }, diff --git a/src/blocks/spacerBlock.ts b/src/blocks/spacerBlock.ts new file mode 100644 index 0000000..7df26b0 --- /dev/null +++ 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, + })), + }, + ], +}; diff --git a/src/blocks/transcriptBlock.ts b/src/blocks/transcriptBlock.ts index 085261d..a744547 100644 --- 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], }, ], }; diff --git a/src/collections/Pages/Pages.ts b/src/collections/Pages/Pages.ts index 2f81cfe..d29d560 100644 --- 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, }), diff --git a/src/constants.ts b/src/constants.ts index a884f07..5901095 100644 --- 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"; diff --git a/src/sdk.ts b/src/sdk.ts index aa8ad87..ab58c08 100644 --- 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 => await (await request(payloadApiUrl(Collections.Currencies, `all`))).json(), - getContent: async (slug: string): Promise => - await (await request(payloadApiUrl(Collections.Contents, `slug/${slug}`))).json(), - getKeys: async (): Promise => - await (await request(payloadApiUrl(Collections.Keys, `all`))).json(), + getWordings: async (): Promise => + await (await request(payloadApiUrl(Collections.Wordings, `all`))).json(), getRecorders: async (): Promise => await (await request(payloadApiUrl(Collections.Recorders, `all`))).json(), getTags: async (): Promise => diff --git a/src/styles.scss b/src/styles.scss index 822974d..f7f3951 100644 --- 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 { diff --git a/src/types/collections.ts b/src/types/collections.ts index d00cfec..dd73b89 100644 --- 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';