From 098c5adc467b671e0177b80e6dcb29aa142b1001 Mon Sep 17 00:00:00 2001 From: Rui Sousa Date: Mon, 21 Oct 2024 17:28:15 +0100 Subject: [PATCH] enrich lexical features and improve visibility --- src/app/(payload)/admin/importMap.js | 66 ++++++++++++++-------------- src/app/(payload)/custom.scss | 6 +++ src/collections/Blogposts/index.ts | 13 +++++- src/payload-types.ts | 11 +++++ 4 files changed, 62 insertions(+), 34 deletions(-) diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js index 32610e8..c7b684b 100644 --- a/src/app/(payload)/admin/importMap.js +++ b/src/app/(payload)/admin/importMap.js @@ -14,22 +14,23 @@ import { MetaImageComponent as MetaImageComponent_12 } from '@payloadcms/plugin- import { MetaDescriptionComponent as MetaDescriptionComponent_13 } from '@payloadcms/plugin-seo/client' import { PreviewComponent as PreviewComponent_14 } from '@payloadcms/plugin-seo/client' import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_15 } from '@payloadcms/richtext-lexical/client' -import { UploadFeatureClient as UploadFeatureClient_16 } from '@payloadcms/richtext-lexical/client' -import { BlockquoteFeatureClient as BlockquoteFeatureClient_17 } from '@payloadcms/richtext-lexical/client' -import { RelationshipFeatureClient as RelationshipFeatureClient_18 } from '@payloadcms/richtext-lexical/client' -import { ChecklistFeatureClient as ChecklistFeatureClient_19 } from '@payloadcms/richtext-lexical/client' -import { OrderedListFeatureClient as OrderedListFeatureClient_20 } from '@payloadcms/richtext-lexical/client' -import { UnorderedListFeatureClient as UnorderedListFeatureClient_21 } from '@payloadcms/richtext-lexical/client' -import { IndentFeatureClient as IndentFeatureClient_22 } from '@payloadcms/richtext-lexical/client' -import { AlignFeatureClient as AlignFeatureClient_23 } from '@payloadcms/richtext-lexical/client' -import { HeadingFeatureClient as HeadingFeatureClient_24 } from '@payloadcms/richtext-lexical/client' -import { ParagraphFeatureClient as ParagraphFeatureClient_25 } from '@payloadcms/richtext-lexical/client' -import { InlineCodeFeatureClient as InlineCodeFeatureClient_26 } from '@payloadcms/richtext-lexical/client' -import { SuperscriptFeatureClient as SuperscriptFeatureClient_27 } from '@payloadcms/richtext-lexical/client' -import { SubscriptFeatureClient as SubscriptFeatureClient_28 } from '@payloadcms/richtext-lexical/client' -import { StrikethroughFeatureClient as StrikethroughFeatureClient_29 } from '@payloadcms/richtext-lexical/client' -import { default as default_30 } from '@/components/BeforeDashboard' -import { default as default_31 } from '@/components/BeforeLogin' +import { BlocksFeatureClient as BlocksFeatureClient_16 } from '@payloadcms/richtext-lexical/client' +import { HeadingFeatureClient as HeadingFeatureClient_17 } from '@payloadcms/richtext-lexical/client' +import { UploadFeatureClient as UploadFeatureClient_18 } from '@payloadcms/richtext-lexical/client' +import { BlockquoteFeatureClient as BlockquoteFeatureClient_19 } from '@payloadcms/richtext-lexical/client' +import { RelationshipFeatureClient as RelationshipFeatureClient_20 } from '@payloadcms/richtext-lexical/client' +import { ChecklistFeatureClient as ChecklistFeatureClient_21 } from '@payloadcms/richtext-lexical/client' +import { OrderedListFeatureClient as OrderedListFeatureClient_22 } from '@payloadcms/richtext-lexical/client' +import { UnorderedListFeatureClient as UnorderedListFeatureClient_23 } from '@payloadcms/richtext-lexical/client' +import { IndentFeatureClient as IndentFeatureClient_24 } from '@payloadcms/richtext-lexical/client' +import { AlignFeatureClient as AlignFeatureClient_25 } from '@payloadcms/richtext-lexical/client' +import { ParagraphFeatureClient as ParagraphFeatureClient_26 } from '@payloadcms/richtext-lexical/client' +import { InlineCodeFeatureClient as InlineCodeFeatureClient_27 } from '@payloadcms/richtext-lexical/client' +import { SuperscriptFeatureClient as SuperscriptFeatureClient_28 } from '@payloadcms/richtext-lexical/client' +import { SubscriptFeatureClient as SubscriptFeatureClient_29 } from '@payloadcms/richtext-lexical/client' +import { StrikethroughFeatureClient as StrikethroughFeatureClient_30 } from '@payloadcms/richtext-lexical/client' +import { default as default_31 } from '@/components/BeforeDashboard' +import { default as default_32 } from '@/components/BeforeLogin' export const importMap = { "@payloadcms/richtext-lexical/client#RichTextCell": RichTextCell_0, @@ -48,20 +49,21 @@ export const importMap = { "@payloadcms/plugin-seo/client#MetaDescriptionComponent": MetaDescriptionComponent_13, "@payloadcms/plugin-seo/client#PreviewComponent": PreviewComponent_14, "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_15, - "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_16, - "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_17, - "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_18, - "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_19, - "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_20, - "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_21, - "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_22, - "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_23, - "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_24, - "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_25, - "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_26, - "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_27, - "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_28, - "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_29, - "@/components/BeforeDashboard#default": default_30, - "@/components/BeforeLogin#default": default_31 + "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_16, + "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_17, + "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_18, + "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_19, + "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_20, + "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_21, + "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_22, + "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_23, + "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_24, + "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_25, + "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_26, + "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_27, + "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_28, + "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_29, + "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_30, + "@/components/BeforeDashboard#default": default_31, + "@/components/BeforeLogin#default": default_32 } diff --git a/src/app/(payload)/custom.scss b/src/app/(payload)/custom.scss index e69de29..c4d01af 100644 --- a/src/app/(payload)/custom.scss +++ b/src/app/(payload)/custom.scss @@ -0,0 +1,6 @@ +.rich-text-lexical * { + max-width: 600px; + margin: 0 auto; + line-height: 2em; +} + diff --git a/src/collections/Blogposts/index.ts b/src/collections/Blogposts/index.ts index f49d3d2..63cdc83 100644 --- a/src/collections/Blogposts/index.ts +++ b/src/collections/Blogposts/index.ts @@ -1,4 +1,4 @@ -import { HTMLConverterFeature, lexicalEditor, lexicalHTML } from "@payloadcms/richtext-lexical"; +import { BlocksFeature, FixedToolbarFeature, HeadingFeature, HorizontalRuleFeature, HTMLConverterFeature, InlineToolbarFeature, lexicalEditor, lexicalHTML } from "@payloadcms/richtext-lexical"; import type { CollectionConfig } from "payload"; import { slugField } from "@/fields/slug"; @@ -14,6 +14,8 @@ import { PreviewField, } from "@payloadcms/plugin-seo/fields"; import { generatePreviewPath } from "@/utilities/generatePreviewPath"; +import { Banner } from "@payloadcms/ui/elements/Banner"; +import { Code } from "@/blocks/Code/config"; export const Blogposts: CollectionConfig = { slug: "blogposts", @@ -73,7 +75,14 @@ export const Blogposts: CollectionConfig = { type: "richText", required: true, editor: lexicalEditor({ - features: ({ defaultFeatures }) => [...defaultFeatures, HTMLConverterFeature({})], + features: ({ defaultFeatures }) => [ + ...defaultFeatures, + HeadingFeature({ enabledHeadingSizes: ["h1", "h2", "h3", "h4"] }), + BlocksFeature({ blocks: [Code] }), + FixedToolbarFeature(), + InlineToolbarFeature(), + HorizontalRuleFeature(), + HTMLConverterFeature({})], }), }, lexicalHTML("content", { name: "content_html" }), diff --git a/src/payload-types.ts b/src/payload-types.ts index a3a7227..1a2f257 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -471,6 +471,17 @@ export interface HomepageSetting { updatedAt?: string | null; createdAt?: string | null; } +/** + * This interface was referenced by `Config`'s JSON-Schema + * via the `definition` "CodeBlock". + */ +export interface CodeBlock { + language?: ('typescript' | 'javascript' | 'css') | null; + code: string; + id?: string | null; + blockName?: string | null; + blockType: 'code'; +} /** * This interface was referenced by `Config`'s JSON-Schema * via the `definition` "auth".