Skip to content

Commit

Permalink
feat(lexical): support lexical rich text (#140)
Browse files Browse the repository at this point in the history 
* feat(lexical): support lexical rich text

* style(*): cleanup
  • Loading branch information
@thompsonsj
thompsonsj authored Dec 20, 2023
1 parent 9ebaf89 commit 4921e4d
Show file tree
Hide file tree
Showing 13 changed files with 1,549 additions and 11 deletions.
3 changes: 2 additions & 1 deletion dev/jest.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@ export default {
coverageDirectory: '../coverage/dev',
"transformIgnorePatterns": [
"node_modules/(?!(@swc\/types))"
]
],
prettierPath: require.resolve('prettier-2'),
};
7 changes: 0 additions & 7 deletions dev/src/lib/.env
View file

This file was deleted.

23 changes: 23 additions & 0 deletions dev/src/lib/collections/Policies.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { CollectionConfig } from "payload/types";
import { lexicalEditorWithBlocks } from "./fields/lexicalEditorWithBlocks";

const Policies: CollectionConfig = {
slug: "policies",
admin: {
defaultColumns: ["title", "author", "category", "tags", "status"],
useAsTitle: "title",
},
access: {
read: () => true,
},
fields: [
{
name: "title",
type: "text",
localized: true,
},
lexicalEditorWithBlocks,
]
}

export default Policies
63 changes: 63 additions & 0 deletions dev/src/lib/collections/fields/lexicalEditorWithBlocks.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { RichTextField } from 'payload/types';
import { BlocksFeature, BoldTextFeature, lexicalEditor, LinkFeature, SlateToLexicalFeature } from '@payloadcms/richtext-lexical'

export const lexicalEditorWithBlocks: RichTextField = {
name: 'content',
type: 'richText',
localized: true,
editor: lexicalEditor({
features: ({ defaultFeatures }) => [
...defaultFeatures,
SlateToLexicalFeature(),
BlocksFeature({
blocks: [
{
slug: 'highlight',
imageAltText: 'Text',
fields: [
{
name: "heading",
type: "group",
fields: [
{
name: 'title',
type: 'text',
localized: true,
},
{
name: 'preTitle',
type: 'text',
localized: true,
},
]
},
{
name: "color",
type: "select",
options: [
'gray',
'yellow',
'green'
],
admin: {
isClearable: true,
},
},
{
name: 'content',
type: 'richText',
localized: false,
editor: lexicalEditor({
features: () => [
BoldTextFeature(),
LinkFeature({}),
]
}),
},
]
}
],
})
],
}),
}
25 changes: 25 additions & 0 deletions dev/src/lib/payload-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface Config {
'multi-rich-text': MultiRichText;
'localized-posts': LocalizedPost;
'nested-field-collection': NestedFieldCollection;
policies: Policy;
posts: Post;
tags: Tag;
users: User;
Expand Down Expand Up @@ -300,6 +301,30 @@ export interface NestedFieldCollection {
updatedAt: string;
createdAt: string;
}
export interface Policy {
id: string;
title?: string | 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;
syncTranslations?: boolean | null;
syncAllTranslations?: boolean | null;
crowdinArticleDirectory?: (string | null) | CrowdinArticleDirectory;
updatedAt: string;
createdAt: string;
}
export interface Post {
id: string;
title?: string | null;
Expand Down
2 changes: 2 additions & 0 deletions dev/src/lib/payload.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Statistics from "./globals/Statistics";
import Categories from "./collections/Categories";
import MultiRichText from "./collections/MultiRichText";
import LocalizedPosts from "./collections/LocalizedPosts";
import Policies from "./collections/Policies"
import Posts from "./collections/Posts";
import NestedFieldCollection from "./collections/NestedFieldCollection";
import Tags from "./collections/Tags";
Expand Down Expand Up @@ -84,6 +85,7 @@ export const buildConfigWithPluginOptions = async ({
MultiRichText,
LocalizedPosts,
NestedFieldCollection,
Policies,
Posts,
Tags,
Users,
Expand Down
236 changes: 236 additions & 0 deletions dev/src/lib/tests/fields/lexical-editor-with-blocks.fixture.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
import { Policy } from "../../payload-types"

export const fixture = {
"root": {
"type": "root",
"format": "",
"indent": 0,
"version": 1,
"children": [
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "Lexical editor content",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "heading",
"version": 1,
"tag": "h2"
},
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "This is editable ",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 1,
"mode": "normal",
"style": "",
"text": "rich",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": " text, ",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 2,
"mode": "normal",
"style": "",
"text": "much",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": " better than a ",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 16,
"mode": "normal",
"style": "",
"text": "<textarea>",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "!",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1
},
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "Since it's rich text, you can do things like turn a selection of text ",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 1,
"mode": "normal",
"style": "",
"text": "bold",
"type": "text",
"version": 1
},
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": ", or add a semantically rendered block quote in the middle of the page, like this:",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1
},
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "A wise quote.",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "quote",
"version": 1
},
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "Try it out for yourself!",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "center",
"indent": 0,
"type": "paragraph",
"version": 1
},
{
"children": [],
"direction": null,
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1
},
{
"format": "",
"type": "block",
"version": 2,
"fields": {
"id": "6582d48f2037fb3ca72ed2cf",
"blockName": "",
"blockType": "highlight",
"color": "gray",
"content": {
"root": {
"type": "root",
"format": "",
"indent": 0,
"version": 1,
"children": [
{
"children": [
{
"detail": 0,
"format": 0,
"mode": "normal",
"style": "",
"text": "More lexical content inside a custom block.",
"type": "text",
"version": 1
}
],
"direction": "ltr",
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1
}
],
"direction": "ltr"
}
},
"heading": {
"title": "Highlight",
"preTitle": "Custom block"
}
}
},
{
"children": [],
"direction": null,
"format": "",
"indent": 0,
"type": "paragraph",
"version": 1
}
],
"direction": "ltr"
}
} as Policy['content']
Loading

0 comments on commit 4921e4d

Please sign in to comment.