tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: improve lexical code block documentation (#11416)

Browse Source 
The existing code example had type errors when `strict: true` was enabled
This commit is contained in:
Alessio Gravili
2025-02-26 17:47:36 -07:00
committed by GitHub
parent 88a2841500
commit 67b7a730ba
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/rich-text/custom-features.mdx
View File

@@ -29,9 +29,9 @@ Using the BlocksFeature, you can add both inline blocks (= can be inserted into
### Example: Code Field Block with language picker ### Example: Code Field Block with language picker
This example demonstrates how to create a custom code field block with a language picker using the `BlocksFeature`. Make sure to manually install `@payloadcms/ui`first. This example demonstrates how to create a custom code field block with a language picker using the `BlocksFeature`. First, make sure to explicitly install `@payloadcms/ui` in your project.
Field config: Field Config:
```ts ```ts
import { import {
@@ -91,7 +91,6 @@ CodeComponent.tsx:
```tsx ```tsx
'use client' 'use client'
import type { CodeFieldClient, CodeFieldClientProps } from 'payload' import type { CodeFieldClient, CodeFieldClientProps } from 'payload'
import { CodeField, useFormFields } from '@payloadcms/ui' import { CodeField, useFormFields } from '@payloadcms/ui'
@@ -105,6 +104,8 @@ const languageKeyToMonacoLanguageMap = {
tsx: 'typescript', tsx: 'typescript',
} }
type Language = keyof typeof languageKeyToMonacoLanguageMap
export const Code: React.FC<CodeFieldClientProps> = ({ export const Code: React.FC<CodeFieldClientProps> = ({
autoComplete, autoComplete,
field, field,
@@ -118,10 +119,10 @@ export const Code: React.FC<CodeFieldClientProps> = ({
}) => { }) => {
const languageField = useFormFields(([fields]) => fields['language']) const languageField = useFormFields(([fields]) => fields['language'])
const language: string = const language: Language =
(languageField?.value as string) || (languageField.initialValue as string) || 'typescript' (languageField?.value as Language) || (languageField?.initialValue as Language) || 'ts'
const label = languages[language as keyof typeof languages] const label = languages[language]
const props: CodeFieldClient = useMemo<CodeFieldClient>( const props: CodeFieldClient = useMemo<CodeFieldClient>(
() => ({ () => ({
@@ -129,9 +130,10 @@ export const Code: React.FC<CodeFieldClientProps> = ({
type: 'code', type: 'code',
admin: { admin: {
...field.admin, ...field.admin,
label, editorOptions: undefined,
language: languageKeyToMonacoLanguageMap[language] || language, language: languageKeyToMonacoLanguageMap[language] || language,
}, },
label,
}), }),
[field, language, label], [field, language, label],
) )