chore(richtext-*): lint & prettier
This commit is contained in:
@@ -18,11 +18,9 @@ import { buildConfig } from 'payload/config'
|
||||
import { lexicalEditor } from '@payloadcms/richtext-lexical'
|
||||
|
||||
export default buildConfig({
|
||||
editor: lexicalEditor({})
|
||||
editor: lexicalEditor({}),
|
||||
// ...rest of config
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
More detailed usage can be found in the [Payload Docs](https://payloadcms.com/docs/configuration/overview).
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ export const BlockQuoteFeature = (): FeatureProvider => {
|
||||
TextDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Blockquote').then(
|
||||
(module) => module.BlockquoteIcon,
|
||||
),
|
||||
@@ -72,7 +72,7 @@ export const BlockQuoteFeature = (): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption(`blockquote`, {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Blockquote').then(
|
||||
(module) => module.BlockquoteIcon,
|
||||
),
|
||||
|
||||
@@ -3,6 +3,7 @@ import type { ElementTransformer } from '@lexical/markdown'
|
||||
import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'
|
||||
import { $createLineBreakNode } from 'lexical'
|
||||
export const MarkdownTransformer: ElementTransformer = {
|
||||
type: 'element',
|
||||
dependencies: [QuoteNode],
|
||||
export: (node, exportChildren) => {
|
||||
if (!$isQuoteNode(node)) {
|
||||
@@ -36,5 +37,4 @@ export const MarkdownTransformer: ElementTransformer = {
|
||||
parentNode.replace(node)
|
||||
node.select(0, 0)
|
||||
},
|
||||
type: 'element',
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
|
||||
const validRelationships = payloadConfig.collections.map((c) => c.slug) || []
|
||||
const formSchema = transformInputFormSchema(
|
||||
sanitizeFields({
|
||||
// @ts-ignore-next-line TODO: Fix this
|
||||
// @ts-expect-error-next-line TODO: Fix this
|
||||
config: payloadConfig,
|
||||
fields: unsanitizedFormSchema,
|
||||
validRelationships,
|
||||
@@ -75,7 +75,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
|
||||
const preferences = await getDocPreferences()
|
||||
|
||||
const stateFromSchema = await buildStateFromSchema({
|
||||
// @ts-ignore-next-line TODO: Fix this
|
||||
// @ts-expect-error-next-line TODO: Fix this
|
||||
config,
|
||||
data: JSON.parse(JSON.stringify(formData)),
|
||||
fieldSchema: formSchema as any,
|
||||
@@ -86,7 +86,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
|
||||
})
|
||||
|
||||
if (!initialStateRef.current) {
|
||||
// @ts-ignore-next-line TODO: Fix this
|
||||
// @ts-expect-error-next-line TODO: Fix this
|
||||
initialStateRef.current = buildInitialState(JSON.parse(JSON.stringify(formData)))
|
||||
}
|
||||
|
||||
|
||||
@@ -79,8 +79,8 @@ export const BlocksDrawerComponent: React.FC = () => {
|
||||
)
|
||||
|
||||
const drawerSlug = formatDrawerSlug({
|
||||
depth: editDepth,
|
||||
slug: `lexical-rich-text-blocks-` + uuid,
|
||||
depth: editDepth,
|
||||
})
|
||||
|
||||
const blocks = (editorConfig?.resolvedFeatureMap?.get('blocks')?.props as BlocksFeatureProps)
|
||||
|
||||
@@ -36,8 +36,8 @@ export const BlocksFeature = (props?: BlocksFeatureProps): FeatureProvider => {
|
||||
modifyOutputSchema: ({ currentSchema, field, interfaceNameDefinitions }) => {
|
||||
const blocksField: BlockField = {
|
||||
name: field?.name + '_lexical_blocks',
|
||||
blocks: props.blocks,
|
||||
type: 'blocks',
|
||||
blocks: props.blocks,
|
||||
}
|
||||
// This is only done so that interfaceNameDefinitions sets those block's interfaceNames.
|
||||
// we don't actually use the JSON Schema itself in the generated types yet.
|
||||
@@ -48,16 +48,16 @@ export const BlocksFeature = (props?: BlocksFeatureProps): FeatureProvider => {
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
type: BlockNode.getType(),
|
||||
node: BlockNode,
|
||||
populationPromises: [blockPopulationPromiseHOC(props)],
|
||||
type: BlockNode.getType(),
|
||||
validations: [blockValidationHOC(props)],
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.BlocksPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
@@ -72,11 +72,11 @@ export const BlocksFeature = (props?: BlocksFeatureProps): FeatureProvider => {
|
||||
...props.blocks.map((block) => {
|
||||
return new SlashMenuOption('block-' + block.slug, {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Block').then((module) => module.BlockIcon),
|
||||
displayName: ({ i18n }) => {
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
return getTranslation(block.labels.singular, i18n)
|
||||
},
|
||||
keywords: ['block', 'blocks', block.slug],
|
||||
|
||||
@@ -25,7 +25,7 @@ export type BlockFields = {
|
||||
}
|
||||
|
||||
const BlockComponent = React.lazy(() =>
|
||||
// @ts-ignore-next-line TypeScript being dumb
|
||||
// @ts-expect-error-next-line TypeScript being dumb
|
||||
import('../component').then((module) => ({
|
||||
default: module.BlockComponent,
|
||||
})),
|
||||
|
||||
@@ -18,6 +18,7 @@ export function transformInputFormSchema(formSchema: any, blockFieldWrapperName:
|
||||
),
|
||||
{
|
||||
name: blockFieldWrapperName,
|
||||
type: 'group',
|
||||
admin: {
|
||||
hideGutter: true,
|
||||
},
|
||||
@@ -25,7 +26,6 @@ export function transformInputFormSchema(formSchema: any, blockFieldWrapperName:
|
||||
(field) => !('name' in field) || !['blockName', 'blockType', 'id'].includes(field.name),
|
||||
),
|
||||
label: '',
|
||||
type: 'group',
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
@@ -22,17 +22,17 @@ type Props = {
|
||||
}
|
||||
|
||||
const iconImports = {
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h1: () => import('../../lexical/ui/icons/H1').then((module) => module.H1Icon),
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h2: () => import('../../lexical/ui/icons/H2').then((module) => module.H2Icon),
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h3: () => import('../../lexical/ui/icons/H3').then((module) => module.H3Icon),
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h4: () => import('../../lexical/ui/icons/H4').then((module) => module.H4Icon),
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h5: () => import('../../lexical/ui/icons/H5').then((module) => module.H5Icon),
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
h6: () => import('../../lexical/ui/icons/H6').then((module) => module.H6Icon),
|
||||
}
|
||||
|
||||
|
||||
@@ -16,6 +16,7 @@ export const MarkdownTransformer: (enabledHeadingSizes: HeadingTagType[]) => Ele
|
||||
const regExp = new RegExp(pattern)
|
||||
|
||||
return {
|
||||
type: 'element',
|
||||
dependencies: [HeadingNode],
|
||||
export: (node, exportChildren) => {
|
||||
if (!$isHeadingNode(node)) {
|
||||
@@ -29,6 +30,5 @@ export const MarkdownTransformer: (enabledHeadingSizes: HeadingTagType[]) => Ele
|
||||
const tag = ('h' + match[1].length) as HeadingTagType
|
||||
return $createHeadingNode(tag)
|
||||
}),
|
||||
type: 'element',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,12 +48,13 @@ export const getBaseFields = (
|
||||
const baseFields = [
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
label: translations['fields:textToDisplay'],
|
||||
required: true,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'fields',
|
||||
type: 'group',
|
||||
admin: {
|
||||
style: {
|
||||
borderBottom: 0,
|
||||
@@ -65,6 +66,7 @@ export const getBaseFields = (
|
||||
fields: [
|
||||
{
|
||||
name: 'linkType',
|
||||
type: 'radio',
|
||||
admin: {
|
||||
description: translations['fields:chooseBetweenCustomTextOrDocument'],
|
||||
},
|
||||
@@ -77,13 +79,12 @@ export const getBaseFields = (
|
||||
},
|
||||
],
|
||||
required: true,
|
||||
type: 'radio',
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
type: 'text',
|
||||
label: translations['fields:enterURL'],
|
||||
required: true,
|
||||
type: 'text',
|
||||
validate: (value: string) => {
|
||||
if (value && !validateUrl(value)) {
|
||||
return 'Invalid URL'
|
||||
@@ -91,7 +92,6 @@ export const getBaseFields = (
|
||||
},
|
||||
},
|
||||
] as Field[],
|
||||
type: 'group',
|
||||
},
|
||||
]
|
||||
|
||||
@@ -113,6 +113,7 @@ export const getBaseFields = (
|
||||
},
|
||||
},
|
||||
// when admin.hidden is a function we need to dynamically call hidden with the user to know if the collection should be shown
|
||||
type: 'relationship',
|
||||
filterOptions:
|
||||
!enabledCollections && !disabledCollections
|
||||
? ({ relationTo, user }) => {
|
||||
@@ -125,14 +126,13 @@ export const getBaseFields = (
|
||||
label: translations['fields:chooseDocumentToLink'],
|
||||
relationTo: enabledRelations,
|
||||
required: true,
|
||||
type: 'relationship',
|
||||
})
|
||||
}
|
||||
|
||||
baseFields[1].fields.push({
|
||||
name: 'newTab',
|
||||
label: translations['fields:openInNewTab'],
|
||||
type: 'checkbox',
|
||||
label: translations['fields:openInNewTab'],
|
||||
})
|
||||
|
||||
return baseFields as Field[]
|
||||
|
||||
@@ -69,7 +69,7 @@ export function LinkEditor({
|
||||
const fieldsUnsanitized = transformExtraFields(
|
||||
customFieldSchema,
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config,
|
||||
i18n,
|
||||
enabledCollections,
|
||||
@@ -79,7 +79,7 @@ export function LinkEditor({
|
||||
const validRelationships = config.collections.map((c) => c.slug) || []
|
||||
const fields = sanitizeFields({
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config,
|
||||
fields: fieldsUnsanitized,
|
||||
validRelationships,
|
||||
@@ -94,8 +94,8 @@ export function LinkEditor({
|
||||
const [isAutoLink, setIsAutoLink] = useState(false)
|
||||
|
||||
const drawerSlug = formatDrawerSlug({
|
||||
depth: editDepth,
|
||||
slug: `lexical-rich-text-link-` + uuid,
|
||||
depth: editDepth,
|
||||
})
|
||||
|
||||
const updateLinkEditor = useCallback(async () => {
|
||||
@@ -152,7 +152,7 @@ export function LinkEditor({
|
||||
const preferences = await getDocPreferences()
|
||||
const state = await buildStateFromSchema({
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config,
|
||||
data,
|
||||
fieldSchema,
|
||||
|
||||
@@ -15,7 +15,7 @@ export const ParagraphFeature = (): FeatureProvider => {
|
||||
TextDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Text').then((module) => module.TextIcon),
|
||||
isActive: () => false,
|
||||
key: 'normal-text',
|
||||
@@ -40,7 +40,7 @@ export const ParagraphFeature = (): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption('paragraph', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Text').then((module) => module.TextIcon),
|
||||
displayName: 'Paragraph',
|
||||
keywords: ['normal', 'paragraph', 'p', 'text'],
|
||||
|
||||
@@ -33,16 +33,16 @@ export const RelationshipFeature = (props?: RelationshipFeatureProps): FeaturePr
|
||||
return {
|
||||
nodes: [
|
||||
{
|
||||
type: RelationshipNode.getType(),
|
||||
node: RelationshipNode,
|
||||
populationPromises: [relationshipPopulationPromise],
|
||||
type: RelationshipNode.getType(),
|
||||
// TODO: Add validation similar to upload
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugins').then((module) => {
|
||||
const RelationshipPlugin = module.RelationshipPlugin
|
||||
return import('@payloadcms/ui').then((module2) =>
|
||||
@@ -64,7 +64,7 @@ export const RelationshipFeature = (props?: RelationshipFeatureProps): FeaturePr
|
||||
options: [
|
||||
new SlashMenuOption('relationship', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Relationship').then(
|
||||
(module) => module.RelationshipIcon,
|
||||
),
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
import * as React from 'react'
|
||||
|
||||
const RelationshipComponent = React.lazy(() =>
|
||||
// @ts-ignore-next-line TypeScript being dumb
|
||||
// @ts-expect-error-next-line TypeScript being dumb
|
||||
import('./components/RelationshipComponent').then((module) => ({
|
||||
default: module.RelationshipComponent,
|
||||
})),
|
||||
|
||||
@@ -63,7 +63,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
|
||||
const validRelationships = config.collections.map((c) => c.slug) || []
|
||||
const fieldSchema = sanitizeFields({
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config: config,
|
||||
fields: fieldSchemaUnsanitized,
|
||||
validRelationships,
|
||||
@@ -93,7 +93,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
|
||||
const validRelationships = config.collections.map((c) => c.slug) || []
|
||||
const fieldSchema = sanitizeFields({
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config: config,
|
||||
fields: fieldSchemaUnsanitized,
|
||||
validRelationships,
|
||||
@@ -103,7 +103,7 @@ export const ExtraFieldsUploadDrawer: React.FC<
|
||||
const preferences = await getDocPreferences()
|
||||
const state = await buildStateFromSchema({
|
||||
// TODO: fix this
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
config,
|
||||
data: deepCopyObject(fields || {}),
|
||||
fieldSchema,
|
||||
|
||||
@@ -112,7 +112,7 @@ const Component: React.FC<ElementProps> = (props) => {
|
||||
<div className={`${baseClass}__topRowRightPanel`}>
|
||||
<div className={`${baseClass}__collectionLabel`}>
|
||||
{/* TODO: fix this */}
|
||||
{/* @ts-ignore-next-line */}
|
||||
{/* @ts-expect-error-next-line */}
|
||||
{getTranslation(relatedCollection.labels.singular, i18n)}
|
||||
</div>
|
||||
{editor.isEditable() && (
|
||||
|
||||
@@ -33,6 +33,7 @@ export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
|
||||
return {
|
||||
nodes: [
|
||||
{
|
||||
type: UploadNode.getType(),
|
||||
converters: {
|
||||
html: {
|
||||
converter: async ({ node }) => {
|
||||
@@ -92,14 +93,13 @@ export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
|
||||
},
|
||||
node: UploadNode,
|
||||
populationPromises: [uploadPopulationPromiseHOC(props)],
|
||||
type: UploadNode.getType(),
|
||||
validations: [uploadValidation()],
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.UploadPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
@@ -113,7 +113,7 @@ export const UploadFeature = (props?: UploadFeatureProps): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption('upload', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/Upload').then((module) => module.UploadIcon),
|
||||
displayName: 'Upload',
|
||||
keywords: ['upload', 'image', 'file', 'img', 'picture', 'photo', 'media'],
|
||||
|
||||
@@ -12,7 +12,7 @@ import {
|
||||
} from 'lexical'
|
||||
import * as React from 'react'
|
||||
|
||||
// @ts-ignore-next-line TypeScript being dumb
|
||||
// @ts-expect-error-next-line TypeScript being dumb
|
||||
const RawUploadComponent = React.lazy(async () => await import('../component'))
|
||||
|
||||
export interface RawUploadPayload {
|
||||
@@ -104,7 +104,7 @@ export class UploadNode extends DecoratorBlockNode {
|
||||
}
|
||||
|
||||
decorate(): JSX.Element {
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
return <RawUploadComponent data={this.__data} format={this.__format} nodeKey={this.getKey()} />
|
||||
}
|
||||
|
||||
|
||||
@@ -7,12 +7,12 @@ export const AlignDropdownSectionWithEntries = (
|
||||
entries: FloatingToolbarSectionEntry[],
|
||||
): FloatingToolbarSection => {
|
||||
return {
|
||||
type: 'dropdown',
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/AlignLeft').then((module) => module.AlignLeftIcon),
|
||||
entries,
|
||||
key: 'dropdown-align',
|
||||
order: 2,
|
||||
type: 'dropdown',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export const AlignFeature = (): FeatureProvider => {
|
||||
AlignDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/AlignLeft').then((module) => module.AlignLeftIcon),
|
||||
isActive: () => false,
|
||||
key: 'align-left',
|
||||
@@ -27,7 +27,7 @@ export const AlignFeature = (): FeatureProvider => {
|
||||
AlignDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/AlignCenter').then(
|
||||
(module) => module.AlignCenterIcon,
|
||||
),
|
||||
@@ -43,7 +43,7 @@ export const AlignFeature = (): FeatureProvider => {
|
||||
AlignDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/AlignRight').then(
|
||||
(module) => module.AlignRightIcon,
|
||||
),
|
||||
|
||||
@@ -7,9 +7,9 @@ export const FeaturesSectionWithEntries = (
|
||||
entries: FloatingToolbarSectionEntry[],
|
||||
): FloatingToolbarSection => {
|
||||
return {
|
||||
type: 'buttons',
|
||||
entries,
|
||||
key: 'features',
|
||||
order: 5,
|
||||
type: 'buttons',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,12 +7,12 @@ export const TextDropdownSectionWithEntries = (
|
||||
entries: FloatingToolbarSectionEntry[],
|
||||
): FloatingToolbarSection => {
|
||||
return {
|
||||
type: 'dropdown',
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Text').then((module) => module.TextIcon),
|
||||
entries,
|
||||
key: 'dropdown-text',
|
||||
order: 1,
|
||||
type: 'dropdown',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,6 +56,7 @@ export const lexicalHTML: (
|
||||
const { name = 'lexicalHTML' } = props
|
||||
return {
|
||||
name: name,
|
||||
type: 'text',
|
||||
admin: {
|
||||
hidden: true,
|
||||
},
|
||||
@@ -167,6 +168,5 @@ export const lexicalHTML: (
|
||||
},
|
||||
],
|
||||
},
|
||||
type: 'text',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ export const TestRecorderFeature = (): FeatureProvider => {
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.TestRecorderPlugin),
|
||||
position: 'bottom',
|
||||
},
|
||||
|
||||
@@ -47,5 +47,3 @@
|
||||
#test-recorder-button-snapshot {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ export const TreeViewFeature = (): FeatureProvider => {
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.TreeViewPlugin),
|
||||
position: 'bottom',
|
||||
},
|
||||
|
||||
@@ -25,7 +25,7 @@ export const BoldTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Bold').then((module) => module.BoldIcon),
|
||||
isActive: ({ selection }) => {
|
||||
if ($isRangeSelection(selection)) {
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
import type { TextFormatTransformer } from '@lexical/markdown'
|
||||
|
||||
export const BOLD_ITALIC_STAR: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['bold', 'italic'],
|
||||
tag: '***',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
export const BOLD_ITALIC_UNDERSCORE: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['bold', 'italic'],
|
||||
intraword: false,
|
||||
tag: '___',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
export const BOLD_STAR: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['bold'],
|
||||
tag: '**',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
export const BOLD_UNDERSCORE: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['bold'],
|
||||
intraword: false,
|
||||
tag: '__',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const InlineCodeTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Code').then((module) => module.CodeIcon),
|
||||
isActive: ({ selection }) => {
|
||||
if ($isRangeSelection(selection)) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { TextFormatTransformer } from '@lexical/markdown'
|
||||
|
||||
export const INLINE_CODE: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['code'],
|
||||
tag: '`',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const ItalicTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Italic').then((module) => module.ItalicIcon),
|
||||
isActive: ({ selection }) => {
|
||||
if ($isRangeSelection(selection)) {
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import type { TextFormatTransformer } from '@lexical/markdown'
|
||||
|
||||
export const ITALIC_STAR: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['italic'],
|
||||
tag: '*',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
export const ITALIC_UNDERSCORE: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['italic'],
|
||||
intraword: false,
|
||||
tag: '_',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
@@ -7,9 +7,9 @@ export const SectionWithEntries = (
|
||||
entries: FloatingToolbarSectionEntry[],
|
||||
): FloatingToolbarSection => {
|
||||
return {
|
||||
type: 'buttons',
|
||||
entries,
|
||||
key: 'format',
|
||||
order: 4,
|
||||
type: 'buttons',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export const StrikethroughTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Strikethrough').then(
|
||||
(module) => module.StrikethroughIcon,
|
||||
),
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { TextFormatTransformer } from '@lexical/markdown'
|
||||
|
||||
export const STRIKETHROUGH: TextFormatTransformer = {
|
||||
type: 'text-format',
|
||||
format: ['strikethrough'],
|
||||
tag: '~~',
|
||||
type: 'text-format',
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export const SubscriptTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Subscript').then(
|
||||
(module) => module.SubscriptIcon,
|
||||
),
|
||||
|
||||
@@ -13,7 +13,7 @@ export const SuperscriptTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Superscript').then(
|
||||
(module) => module.SuperscriptIcon,
|
||||
),
|
||||
|
||||
@@ -13,7 +13,7 @@ export const UnderlineTextFeature = (): FeatureProvider => {
|
||||
SectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Underline').then(
|
||||
(module) => module.UnderlineIcon,
|
||||
),
|
||||
|
||||
@@ -7,9 +7,9 @@ export const IndentSectionWithEntries = (
|
||||
entries: FloatingToolbarSectionEntry[],
|
||||
): FloatingToolbarSection => {
|
||||
return {
|
||||
type: 'buttons',
|
||||
entries,
|
||||
key: 'indent',
|
||||
order: 3,
|
||||
type: 'buttons',
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ export const IndentFeature = (): FeatureProvider => {
|
||||
IndentSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/IndentDecrease').then(
|
||||
(module) => module.IndentDecreaseIcon,
|
||||
),
|
||||
@@ -46,7 +46,7 @@ export const IndentFeature = (): FeatureProvider => {
|
||||
IndentSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../lexical/ui/icons/IndentIncrease').then(
|
||||
(module) => module.IndentIncreaseIcon,
|
||||
),
|
||||
@@ -64,7 +64,7 @@ export const IndentFeature = (): FeatureProvider => {
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.IndentPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
|
||||
@@ -18,7 +18,7 @@ export const CheckListFeature = (): FeatureProvider => {
|
||||
TextDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Checklist').then(
|
||||
(module) => module.ChecklistIcon,
|
||||
),
|
||||
@@ -39,24 +39,24 @@ export const CheckListFeature = (): FeatureProvider => {
|
||||
? []
|
||||
: [
|
||||
{
|
||||
type: ListNode.getType(),
|
||||
converters: {
|
||||
html: ListHTMLConverter,
|
||||
},
|
||||
node: ListNode,
|
||||
type: ListNode.getType(),
|
||||
},
|
||||
{
|
||||
type: ListItemNode.getType(),
|
||||
converters: {
|
||||
html: ListItemHTMLConverter,
|
||||
},
|
||||
node: ListItemNode,
|
||||
type: ListItemNode.getType(),
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./plugin').then((module) => module.LexicalCheckListPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
@@ -70,7 +70,7 @@ export const CheckListFeature = (): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption('checklist', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/Checklist').then(
|
||||
(module) => module.ChecklistIcon,
|
||||
),
|
||||
|
||||
@@ -5,11 +5,11 @@ import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
|
||||
import { listExport, listReplace } from '../common/markdown'
|
||||
|
||||
export const CHECK_LIST: ElementTransformer = {
|
||||
type: 'element',
|
||||
dependencies: [ListNode, ListItemNode],
|
||||
export: (node, exportChildren) => {
|
||||
return $isListNode(node) ? listExport(node, exportChildren, 0) : null
|
||||
},
|
||||
regExp: /^(\s*)(?:-\s)?\s?(\[(\s|x)?\])\s/i,
|
||||
replace: listReplace('check'),
|
||||
type: 'element',
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export const OrderedListFeature = (): FeatureProvider => {
|
||||
TextDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/OrderedList').then(
|
||||
(module) => module.OrderedListIcon,
|
||||
),
|
||||
@@ -36,18 +36,18 @@ export const OrderedListFeature = (): FeatureProvider => {
|
||||
? []
|
||||
: [
|
||||
{
|
||||
type: ListNode.getType(),
|
||||
converters: {
|
||||
html: ListHTMLConverter,
|
||||
},
|
||||
node: ListNode,
|
||||
type: ListNode.getType(),
|
||||
},
|
||||
{
|
||||
type: ListItemNode.getType(),
|
||||
converters: {
|
||||
html: ListItemHTMLConverter,
|
||||
},
|
||||
node: ListItemNode,
|
||||
type: ListItemNode.getType(),
|
||||
},
|
||||
],
|
||||
plugins: featureProviderMap.has('unorderedList')
|
||||
@@ -55,7 +55,7 @@ export const OrderedListFeature = (): FeatureProvider => {
|
||||
: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../plugin').then((module) => module.LexicalListPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
@@ -69,7 +69,7 @@ export const OrderedListFeature = (): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption('orderedlist', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/OrderedList').then(
|
||||
(module) => module.OrderedListIcon,
|
||||
),
|
||||
|
||||
@@ -5,11 +5,11 @@ import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
|
||||
import { listExport, listReplace } from '../common/markdown'
|
||||
|
||||
export const ORDERED_LIST: ElementTransformer = {
|
||||
type: 'element',
|
||||
dependencies: [ListNode, ListItemNode],
|
||||
export: (node, exportChildren) => {
|
||||
return $isListNode(node) ? listExport(node, exportChildren, 0) : null
|
||||
},
|
||||
regExp: /^(\s*)(\d+)\.\s/,
|
||||
replace: listReplace('number'),
|
||||
type: 'element',
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ export const UnorderedListFeature = (): FeatureProvider => {
|
||||
TextDropdownSectionWithEntries([
|
||||
{
|
||||
ChildComponent: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/UnorderedList').then(
|
||||
(module) => module.UnorderedListIcon,
|
||||
),
|
||||
@@ -34,24 +34,24 @@ export const UnorderedListFeature = (): FeatureProvider => {
|
||||
markdownTransformers: [UNORDERED_LIST],
|
||||
nodes: [
|
||||
{
|
||||
type: ListNode.getType(),
|
||||
converters: {
|
||||
html: ListHTMLConverter,
|
||||
},
|
||||
node: ListNode,
|
||||
type: ListNode.getType(),
|
||||
},
|
||||
{
|
||||
type: ListItemNode.getType(),
|
||||
converters: {
|
||||
html: ListItemHTMLConverter,
|
||||
},
|
||||
node: ListItemNode,
|
||||
type: ListItemNode.getType(),
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
Component: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../plugin').then((module) => module.LexicalListPlugin),
|
||||
position: 'normal',
|
||||
},
|
||||
@@ -65,7 +65,7 @@ export const UnorderedListFeature = (): FeatureProvider => {
|
||||
options: [
|
||||
new SlashMenuOption('unorderedlist', {
|
||||
Icon: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('../../../lexical/ui/icons/UnorderedList').then(
|
||||
(module) => module.UnorderedListIcon,
|
||||
),
|
||||
|
||||
@@ -5,11 +5,11 @@ import { $isListNode, ListItemNode, ListNode } from '@lexical/list'
|
||||
import { listExport, listReplace } from '../common/markdown'
|
||||
|
||||
export const UNORDERED_LIST: ElementTransformer = {
|
||||
type: 'element',
|
||||
dependencies: [ListNode, ListItemNode],
|
||||
export: (node, exportChildren) => {
|
||||
return $isListNode(node) ? listExport(node, exportChildren, 0) : null
|
||||
},
|
||||
regExp: /^(\s*)[-*+]\s/,
|
||||
replace: listReplace('bullet'),
|
||||
type: 'element',
|
||||
}
|
||||
|
||||
@@ -8,12 +8,12 @@ export const HeadingConverter: LexicalPluginNodeConverter = {
|
||||
converter({ converters, lexicalPluginNode }) {
|
||||
return {
|
||||
...lexicalPluginNode,
|
||||
type: 'heading',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any).children || [],
|
||||
parentNodeType: 'heading',
|
||||
}),
|
||||
type: 'heading',
|
||||
version: 1,
|
||||
} as const as SerializedHeadingNode
|
||||
},
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertLexicalPluginNodesToLexical } from '..'
|
||||
export const LinkConverter: LexicalPluginNodeConverter = {
|
||||
converter({ converters, lexicalPluginNode }) {
|
||||
return {
|
||||
type: 'link',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any).children || [],
|
||||
@@ -26,7 +27,6 @@ export const LinkConverter: LexicalPluginNodeConverter = {
|
||||
},
|
||||
format: (lexicalPluginNode as any).format || '',
|
||||
indent: (lexicalPluginNode as any).indent || 0,
|
||||
type: 'link',
|
||||
version: 2,
|
||||
} as const as SerializedLinkNode
|
||||
},
|
||||
|
||||
@@ -8,6 +8,7 @@ export const ListConverter: LexicalPluginNodeConverter = {
|
||||
converter({ converters, lexicalPluginNode }) {
|
||||
return {
|
||||
...lexicalPluginNode,
|
||||
type: 'list',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any).children || [],
|
||||
@@ -15,7 +16,6 @@ export const ListConverter: LexicalPluginNodeConverter = {
|
||||
}),
|
||||
listType: (lexicalPluginNode as any)?.listType || 'number',
|
||||
tag: (lexicalPluginNode as any)?.tag || 'ol',
|
||||
type: 'list',
|
||||
version: 1,
|
||||
} as const as SerializedListNode
|
||||
},
|
||||
|
||||
@@ -8,13 +8,13 @@ export const ListItemConverter: LexicalPluginNodeConverter = {
|
||||
converter({ childIndex, converters, lexicalPluginNode }) {
|
||||
return {
|
||||
...lexicalPluginNode,
|
||||
type: 'listitem',
|
||||
checked: undefined,
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any)?.children || [],
|
||||
parentNodeType: 'listitem',
|
||||
}),
|
||||
type: 'listitem',
|
||||
value: childIndex + 1,
|
||||
version: 1,
|
||||
} as const as SerializedListItemNode
|
||||
|
||||
@@ -8,12 +8,12 @@ export const QuoteConverter: LexicalPluginNodeConverter = {
|
||||
converter({ converters, lexicalPluginNode }) {
|
||||
return {
|
||||
...lexicalPluginNode,
|
||||
type: 'quote',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any).children || [],
|
||||
parentNodeType: 'quote',
|
||||
}),
|
||||
type: 'quote',
|
||||
version: 1,
|
||||
} as const as SerializedHeadingNode
|
||||
},
|
||||
|
||||
@@ -6,6 +6,7 @@ import { convertLexicalPluginNodesToLexical } from '..'
|
||||
export const UnknownConverter: LexicalPluginNodeConverter = {
|
||||
converter({ converters, lexicalPluginNode }) {
|
||||
return {
|
||||
type: 'unknownConverted',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (lexicalPluginNode as any)?.children || [],
|
||||
@@ -18,7 +19,6 @@ export const UnknownConverter: LexicalPluginNodeConverter = {
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'unknownConverted',
|
||||
version: 1,
|
||||
} as const as SerializedUnknownConvertedNode
|
||||
},
|
||||
|
||||
@@ -10,10 +10,10 @@ export const UploadConverter: LexicalPluginNodeConverter = {
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'upload',
|
||||
fields,
|
||||
format: (lexicalPluginNode as any)?.format || '',
|
||||
relationTo: (lexicalPluginNode as any)?.rawImagePayload?.relationTo,
|
||||
type: 'upload',
|
||||
value: {
|
||||
id: (lexicalPluginNode as any)?.rawImagePayload?.value?.id || '',
|
||||
},
|
||||
|
||||
@@ -16,6 +16,7 @@ export function convertLexicalPluginToLexical({
|
||||
}): SerializedEditorState {
|
||||
return {
|
||||
root: {
|
||||
type: 'root',
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: lexicalPluginData?.jsonContent?.root?.children || [],
|
||||
@@ -24,7 +25,6 @@ export function convertLexicalPluginToLexical({
|
||||
direction: lexicalPluginData?.jsonContent?.root?.direction || 'ltr',
|
||||
format: lexicalPluginData?.jsonContent?.root?.format || '',
|
||||
indent: lexicalPluginData?.jsonContent?.root?.indent || 0,
|
||||
type: 'root',
|
||||
version: 1,
|
||||
},
|
||||
}
|
||||
@@ -79,13 +79,13 @@ export function convertParagraphNode(
|
||||
): SerializedParagraphNode {
|
||||
return {
|
||||
...node,
|
||||
type: 'paragraph',
|
||||
|
||||
children: convertLexicalPluginNodesToLexical({
|
||||
converters,
|
||||
lexicalPluginNodes: (node as any).children || [],
|
||||
parentNodeType: 'paragraph',
|
||||
}),
|
||||
|
||||
type: 'paragraph',
|
||||
version: 1,
|
||||
} as SerializedParagraphNode
|
||||
}
|
||||
|
||||
@@ -44,8 +44,8 @@ export const LexicalPluginToLexicalFeature = (props?: Props): FeatureProvider =>
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
node: UnknownConvertedNode,
|
||||
type: UnknownConvertedNode.getType(),
|
||||
node: UnknownConvertedNode,
|
||||
},
|
||||
],
|
||||
props,
|
||||
|
||||
@@ -17,7 +17,7 @@ export type SerializedUnknownConvertedNode = Spread<
|
||||
>
|
||||
|
||||
const Component = React.lazy(() =>
|
||||
// @ts-ignore-next-line TypeScript being dumb
|
||||
// @ts-expect-error-next-line TypeScript being dumb
|
||||
import('./Component').then((module) => ({
|
||||
default: module.UnknownConvertedNodeComponent,
|
||||
})),
|
||||
@@ -68,8 +68,8 @@ export class UnknownConvertedNode extends DecoratorNode<JSX.Element> {
|
||||
|
||||
exportJSON(): SerializedUnknownConvertedNode {
|
||||
return {
|
||||
data: this.__data,
|
||||
type: this.getType(),
|
||||
data: this.__data,
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertSlateNodesToLexical } from '../index'
|
||||
export const SlateBlockquoteConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'quote',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -16,7 +17,6 @@ export const SlateBlockquoteConverter: SlateNodeConverter = {
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'quote',
|
||||
version: 1,
|
||||
} as const as SerializedQuoteNode
|
||||
},
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateHeadingConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'heading',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -17,7 +18,6 @@ export const SlateHeadingConverter: SlateNodeConverter = {
|
||||
format: '',
|
||||
indent: 0,
|
||||
tag: slateNode.type as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', // Slate puts the tag (h1 / h2 / ...) inside of node.type
|
||||
type: 'heading',
|
||||
version: 1,
|
||||
} as const as SerializedHeadingNode
|
||||
},
|
||||
|
||||
@@ -45,11 +45,11 @@ export const SlateIndentConverter: SlateNodeConverter = {
|
||||
const children = node.children.map((child: any) => convertChildren(child, indentLevel + 1))
|
||||
console.log('slateToLexical > IndentConverter > children', JSON.stringify(children, null, 2))
|
||||
return {
|
||||
type: 'paragraph',
|
||||
children: children,
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: indentLevel,
|
||||
type: 'paragraph',
|
||||
version: 1,
|
||||
} as const as SerializedParagraphNode
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateLinkConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'link',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -22,7 +23,6 @@ export const SlateLinkConverter: SlateNodeConverter = {
|
||||
},
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'link',
|
||||
version: 2,
|
||||
} as const as SerializedLinkNode
|
||||
},
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateListItemConverter: SlateNodeConverter = {
|
||||
converter({ childIndex, converters, slateNode }) {
|
||||
return {
|
||||
type: 'listitem',
|
||||
checked: undefined,
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
@@ -17,7 +18,6 @@ export const SlateListItemConverter: SlateNodeConverter = {
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'listitem',
|
||||
value: childIndex + 1,
|
||||
version: 1,
|
||||
} as const as SerializedListItemNode
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateOrderedListConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'list',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -19,7 +20,6 @@ export const SlateOrderedListConverter: SlateNodeConverter = {
|
||||
listType: 'number',
|
||||
start: 1,
|
||||
tag: 'ol',
|
||||
type: 'list',
|
||||
version: 1,
|
||||
} as const as SerializedListNode
|
||||
},
|
||||
|
||||
@@ -4,9 +4,9 @@ import type { SlateNodeConverter } from '../types'
|
||||
export const SlateRelationshipConverter: SlateNodeConverter = {
|
||||
converter({ slateNode }) {
|
||||
return {
|
||||
type: 'relationship',
|
||||
format: '',
|
||||
relationTo: slateNode.relationTo,
|
||||
type: 'relationship',
|
||||
value: {
|
||||
id: slateNode?.value?.id || '',
|
||||
},
|
||||
|
||||
@@ -6,6 +6,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateUnknownConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'unknownConverted',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -19,7 +20,6 @@ export const SlateUnknownConverter: SlateNodeConverter = {
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'unknownConverted',
|
||||
version: 1,
|
||||
} as const as SerializedUnknownConvertedNode
|
||||
},
|
||||
|
||||
@@ -7,6 +7,7 @@ import { convertSlateNodesToLexical } from '..'
|
||||
export const SlateUnorderedListConverter: SlateNodeConverter = {
|
||||
converter({ converters, slateNode }) {
|
||||
return {
|
||||
type: 'list',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -19,7 +20,6 @@ export const SlateUnorderedListConverter: SlateNodeConverter = {
|
||||
listType: 'bullet',
|
||||
start: 1,
|
||||
tag: 'ul',
|
||||
type: 'list',
|
||||
version: 1,
|
||||
} as const as SerializedListNode
|
||||
},
|
||||
|
||||
@@ -4,12 +4,12 @@ import type { SlateNodeConverter } from '../types'
|
||||
export const SlateUploadConverter: SlateNodeConverter = {
|
||||
converter({ slateNode }) {
|
||||
return {
|
||||
type: 'upload',
|
||||
fields: {
|
||||
...slateNode.fields,
|
||||
},
|
||||
format: '',
|
||||
relationTo: slateNode.relationTo,
|
||||
type: 'upload',
|
||||
value: {
|
||||
id: slateNode.value?.id || '',
|
||||
},
|
||||
|
||||
@@ -18,6 +18,7 @@ export function convertSlateToLexical({
|
||||
}): SerializedEditorState {
|
||||
return {
|
||||
root: {
|
||||
type: 'root',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: true,
|
||||
converters,
|
||||
@@ -27,7 +28,6 @@ export function convertSlateToLexical({
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'root',
|
||||
version: 1,
|
||||
},
|
||||
}
|
||||
@@ -85,6 +85,7 @@ export function convertParagraphNode(
|
||||
node: SlateNode,
|
||||
): SerializedParagraphNode {
|
||||
return {
|
||||
type: 'paragraph',
|
||||
children: convertSlateNodesToLexical({
|
||||
canContainParagraphs: false,
|
||||
converters,
|
||||
@@ -94,18 +95,17 @@ export function convertParagraphNode(
|
||||
direction: 'ltr',
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'paragraph',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
export function convertTextNode(node: SlateNode): SerializedTextNode {
|
||||
return {
|
||||
type: 'text',
|
||||
detail: 0,
|
||||
format: convertNodeToFormat(node),
|
||||
mode: 'normal',
|
||||
style: '',
|
||||
text: node.text,
|
||||
type: 'text',
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,8 +44,8 @@ export const SlateToLexicalFeature = (props?: Props): FeatureProvider => {
|
||||
},
|
||||
nodes: [
|
||||
{
|
||||
node: UnknownConvertedNode,
|
||||
type: UnknownConvertedNode.getType(),
|
||||
node: UnknownConvertedNode,
|
||||
},
|
||||
],
|
||||
props,
|
||||
|
||||
@@ -17,7 +17,7 @@ export type SerializedUnknownConvertedNode = Spread<
|
||||
>
|
||||
|
||||
const Component = React.lazy(() =>
|
||||
// @ts-ignore-next-line TypeScript being dumb
|
||||
// @ts-expect-error-next-line TypeScript being dumb
|
||||
import('./Component').then((module) => ({
|
||||
default: module.UnknownConvertedNodeComponent,
|
||||
})),
|
||||
@@ -68,8 +68,8 @@ export class UnknownConvertedNode extends DecoratorNode<JSX.Element> {
|
||||
|
||||
exportJSON(): SerializedUnknownConvertedNode {
|
||||
return {
|
||||
data: this.__data,
|
||||
type: this.getType(),
|
||||
data: this.__data,
|
||||
version: 1,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ import React, { Suspense, lazy } from 'react'
|
||||
|
||||
import type { FieldProps } from '../types'
|
||||
|
||||
// @ts-ignore-next-line Just TypeScript being broken // TODO: Open TypeScript issue
|
||||
// @ts-expect-error-next-line Just TypeScript being broken // TODO: Open TypeScript issue
|
||||
const RichTextEditor = lazy(() => import('./Field'))
|
||||
|
||||
export const RichTextField: React.FC<FieldProps> = (props) => {
|
||||
|
||||
@@ -46,7 +46,7 @@ export const defaultEditorFeatures: FeatureProvider[] = [
|
||||
export const defaultEditorConfig: EditorConfig = {
|
||||
features: defaultEditorFeatures,
|
||||
lexical: () =>
|
||||
// @ts-ignore-next-line
|
||||
// @ts-expect-error-next-line
|
||||
import('./defaultClient').then((module) => {
|
||||
const defaultEditorLexicalConfig = module.defaultEditorLexicalConfig
|
||||
return defaultEditorLexicalConfig
|
||||
|
||||
@@ -2,50 +2,50 @@ import type { SerializedEditorState, SerializedParagraphNode, SerializedTextNode
|
||||
|
||||
export const defaultRichTextValue: SerializedEditorState = {
|
||||
root: {
|
||||
type: 'root',
|
||||
children: [
|
||||
{
|
||||
type: 'paragraph',
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
detail: 0,
|
||||
format: 0,
|
||||
mode: 'normal',
|
||||
style: '',
|
||||
text: '',
|
||||
type: 'text',
|
||||
version: 1,
|
||||
} as SerializedTextNode,
|
||||
],
|
||||
direction: null,
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'paragraph',
|
||||
version: 1,
|
||||
} as SerializedParagraphNode,
|
||||
],
|
||||
direction: null,
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'root',
|
||||
version: 1,
|
||||
},
|
||||
}
|
||||
|
||||
export const defaultRichTextValueV2: SerializedEditorState = {
|
||||
root: {
|
||||
type: 'root',
|
||||
children: [
|
||||
{
|
||||
type: 'paragraph',
|
||||
children: [],
|
||||
direction: null,
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'paragraph',
|
||||
version: 1,
|
||||
} as SerializedParagraphNode,
|
||||
],
|
||||
direction: null,
|
||||
format: '',
|
||||
indent: 0,
|
||||
type: 'root',
|
||||
version: 1,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -18,11 +18,9 @@ import { buildConfig } from 'payload/config'
|
||||
import { slateEditor } from '@payloadcms/richtext-slate'
|
||||
|
||||
export default buildConfig({
|
||||
editor: slateEditor({})
|
||||
editor: slateEditor({}),
|
||||
// ...rest of config
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
More detailed usage can be found in the [Payload Docs](https://payloadcms.com/docs/configuration/overview).
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ import toggleElement from './toggle'
|
||||
export const baseClass = 'rich-text__button'
|
||||
|
||||
const ElementButton: React.FC<ButtonProps> = (props) => {
|
||||
const { children, className, el = 'button', format, onClick, tooltip, type = 'type' } = props
|
||||
const { type = 'type', children, className, el = 'button', format, onClick, tooltip } = props
|
||||
|
||||
const editor = useSlate()
|
||||
const [showTooltip, setShowTooltip] = useState(false)
|
||||
|
||||
@@ -12,7 +12,7 @@ export const getCommonBlock = (editor: Editor, match?: NodeMatch<Node>): NodeEnt
|
||||
const [common, path] = Node.common(editor, range.anchor.path, range.focus.path)
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
// @ts-expect-error
|
||||
if (isBlockElement(editor, common) || Editor.isEditor(common)) {
|
||||
return [common, path]
|
||||
}
|
||||
|
||||
@@ -164,8 +164,8 @@ export const IndentButton: React.FC = () => {
|
||||
Transforms.wrapNodes(
|
||||
editor,
|
||||
{
|
||||
children: [],
|
||||
type: isCurrentlyOL ? 'ol' : 'ul',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
match: (node) => Element.isElement(node) && node.type === 'li',
|
||||
@@ -177,8 +177,8 @@ export const IndentButton: React.FC = () => {
|
||||
Transforms.wrapNodes(
|
||||
editor,
|
||||
{
|
||||
children: [{ children: [], type: 'li' }],
|
||||
type: isCurrentlyOL ? 'ol' : 'ul',
|
||||
children: [{ type: 'li', children: [] }],
|
||||
},
|
||||
{
|
||||
match: (node) => Element.isElement(node) && node.type === 'li',
|
||||
@@ -187,7 +187,7 @@ export const IndentButton: React.FC = () => {
|
||||
)
|
||||
}
|
||||
} else {
|
||||
Transforms.wrapNodes(editor, { children: [], type: indentType })
|
||||
Transforms.wrapNodes(editor, { type: indentType, children: [] })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import type { Element } from 'slate'
|
||||
|
||||
import React, { isValidElement } from 'react'
|
||||
|
||||
import { useElement } from '../../providers/ElementProvider'
|
||||
import listTypes from '../listTypes'
|
||||
import { Element } from 'slate'
|
||||
|
||||
export const ListItemElement: React.FC = () => {
|
||||
const { attributes, children, element } = useElement<Element>()
|
||||
|
||||
@@ -32,12 +32,12 @@ const insertLink = (editor, fields) => {
|
||||
const data = reduceFieldsToValues(fields, true)
|
||||
|
||||
const newLink = {
|
||||
type: 'link',
|
||||
children: [],
|
||||
doc: data.doc,
|
||||
fields: data.fields, // Any custom user-added fields are part of data.fields
|
||||
linkType: data.linkType,
|
||||
newTab: data.newTab,
|
||||
type: 'link',
|
||||
url: data.url,
|
||||
}
|
||||
|
||||
|
||||
@@ -18,12 +18,13 @@ const translations = extractTranslations([
|
||||
export const getBaseFields = (config: Config): Field[] => [
|
||||
{
|
||||
name: 'text',
|
||||
type: 'text',
|
||||
label: translations['fields:textToDisplay'],
|
||||
required: true,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'linkType',
|
||||
type: 'radio',
|
||||
admin: {
|
||||
description: translations['fields:chooseBetweenCustomTextOrDocument'],
|
||||
},
|
||||
@@ -40,16 +41,15 @@ export const getBaseFields = (config: Config): Field[] => [
|
||||
},
|
||||
],
|
||||
required: true,
|
||||
type: 'radio',
|
||||
},
|
||||
{
|
||||
name: 'url',
|
||||
type: 'text',
|
||||
admin: {
|
||||
condition: ({ linkType }) => linkType !== 'internal',
|
||||
},
|
||||
label: translations['fields:enterURL'],
|
||||
required: true,
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'doc',
|
||||
@@ -59,6 +59,7 @@ export const getBaseFields = (config: Config): Field[] => [
|
||||
},
|
||||
},
|
||||
// when admin.hidden is a function we need to dynamically call hidden with the user to know if the collection should be shown
|
||||
type: 'relationship',
|
||||
filterOptions: ({ relationTo, user }) => {
|
||||
const hidden = config.collections.find(({ slug }) => slug === relationTo).admin.hidden
|
||||
if (typeof hidden === 'function' && hidden({ user } as { user: User })) {
|
||||
@@ -75,11 +76,10 @@ export const getBaseFields = (config: Config): Field[] => [
|
||||
})
|
||||
.map(({ slug }) => slug),
|
||||
required: true,
|
||||
type: 'relationship',
|
||||
},
|
||||
{
|
||||
name: 'newTab',
|
||||
label: translations['fields:openInNewTab'],
|
||||
type: 'checkbox',
|
||||
label: translations['fields:openInNewTab'],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Element } from 'slate'
|
||||
import type { Element } from 'slate'
|
||||
|
||||
export type LinkElementType = Element & {
|
||||
doc: Record<string, unknown>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
import { useElement } from '../../providers/ElementProvider'
|
||||
import './index.scss'
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ const insertRelationship = (editor, { relationTo, value }) => {
|
||||
const text = { text: ' ' }
|
||||
|
||||
const relationship = {
|
||||
type: 'relationship',
|
||||
children: [text],
|
||||
relationTo,
|
||||
type: 'relationship',
|
||||
value,
|
||||
}
|
||||
|
||||
|
||||
@@ -87,9 +87,9 @@ const Element: React.FC<Props> = () => {
|
||||
Transforms.setNodes(
|
||||
editor,
|
||||
{
|
||||
type: 'relationship',
|
||||
children: [{ text: ' ' }],
|
||||
relationTo: relatedCollection.slug,
|
||||
type: 'relationship',
|
||||
value: { id: doc.id },
|
||||
},
|
||||
{ at: elementPath },
|
||||
@@ -113,9 +113,9 @@ const Element: React.FC<Props> = () => {
|
||||
Transforms.setNodes(
|
||||
editor,
|
||||
{
|
||||
type: 'relationship',
|
||||
children: [{ text: ' ' }],
|
||||
relationTo: collectionSlug,
|
||||
type: 'relationship',
|
||||
value: { id: docID },
|
||||
},
|
||||
{ at: elementPath },
|
||||
|
||||
@@ -19,7 +19,7 @@ const toggleElement = (editor: Editor, format: string, blockType = 'type'): void
|
||||
}
|
||||
|
||||
if (!isActive && isWithinLI && blockType !== 'textAlign') {
|
||||
const block = { children: [], type: 'li' }
|
||||
const block = { type: 'li', children: [] }
|
||||
Transforms.wrapNodes(editor, block, {
|
||||
at: Editor.unhangRange(editor, editor.selection),
|
||||
})
|
||||
|
||||
@@ -49,7 +49,7 @@ const toggleList = (editor: Editor, format: string): void => {
|
||||
)
|
||||
// Otherwise we can assume that we should just activate the list
|
||||
} else {
|
||||
Transforms.wrapNodes(editor, { children: [], type: format })
|
||||
Transforms.wrapNodes(editor, { type: format, children: [] })
|
||||
|
||||
const [, parentNodePath] = getCommonBlock(
|
||||
editor,
|
||||
@@ -90,7 +90,7 @@ const toggleList = (editor: Editor, format: string): void => {
|
||||
)
|
||||
|
||||
nodesToWrap.forEach(([, path]) => {
|
||||
Transforms.wrapNodes(editor, { children: [], type: 'li' }, { at: path })
|
||||
Transforms.wrapNodes(editor, { type: 'li', children: [] }, { at: path })
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
import { useElement } from '../../providers/ElementProvider'
|
||||
import './index.scss'
|
||||
|
||||
|
||||
@@ -16,9 +16,9 @@ const insertUpload = (editor, { relationTo, value }) => {
|
||||
const text = { text: ' ' }
|
||||
|
||||
const upload = {
|
||||
type: 'upload',
|
||||
children: [text],
|
||||
relationTo,
|
||||
type: 'upload',
|
||||
value,
|
||||
}
|
||||
|
||||
|
||||
@@ -118,9 +118,9 @@ const Element: React.FC<Props & { enabledCollectionSlugs?: string[] }> = ({
|
||||
const swapUpload = React.useCallback(
|
||||
({ collectionSlug, docID }) => {
|
||||
const newNode = {
|
||||
type: uploadName,
|
||||
children: [{ text: ' ' }],
|
||||
relationTo: collectionSlug,
|
||||
type: uploadName,
|
||||
value: { id: docID },
|
||||
}
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ import { jsx } from 'slate-hyperscript'
|
||||
|
||||
const ELEMENT_TAGS = {
|
||||
A: (el) => ({
|
||||
newTab: el.getAttribute('target') === '_blank',
|
||||
type: 'link',
|
||||
newTab: el.getAttribute('target') === '_blank',
|
||||
url: el.getAttribute('href'),
|
||||
}),
|
||||
BLOCKQUOTE: () => ({ type: 'blockquote' }),
|
||||
|
||||
Reference in New Issue
Block a user