7cd4a8a602
Previously, the Lexical editor was using px, and the JSX converter was using rem. #12848 fixed the inconsistency by changing the editor to rem, but it should have been the other way around, changing the JSX converter to px. You can see the latest explanation about why it should be 40px [here](https://github.com/payloadcms/payload/issues/13130#issuecomment-3058348085). In short, that's the default indentation all browsers use for lists. This time I'm making sure to leave clear comments everywhere and a test to avoid another regression. Here is an image of what the e2e test looks like: <img width="321" height="678" alt="image" src="https://github.com/user-attachments/assets/8880c7cb-a954-4487-8377-aee17c06754c" /> The first part is the Lexical editor, the second is the JSX converter. As you can see, the checkbox in JSX looks a little odd because it uses an input checkbox (as opposed to a pseudo-element in the Lexical editor). I thought about adding an inline style to move it slightly to the left, but I found that browsers don't have a standard size for the checkbox; it varies by browser and device. That requires a little more thought; I'll address that in a future PR. Fixes #13130
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { fileURLToPath } from 'node:url'
|
|
import path from 'path'
|
|
import { type Config } from 'payload'
|
|
|
|
import { LexicalFullyFeatured } from './collections/_LexicalFullyFeatured/index.js'
|
|
import ArrayFields from './collections/Array/index.js'
|
|
import {
|
|
getLexicalFieldsCollection,
|
|
lexicalBlocks,
|
|
lexicalInlineBlocks,
|
|
} from './collections/Lexical/index.js'
|
|
import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
|
|
import { LexicalInBlock } from './collections/LexicalInBlock/index.js'
|
|
import { LexicalJSXConverter } from './collections/LexicalJSXConverter/index.js'
|
|
import { LexicalLinkFeature } from './collections/LexicalLinkFeature/index.js'
|
|
import { LexicalLocalizedFields } from './collections/LexicalLocalized/index.js'
|
|
import { LexicalMigrateFields } from './collections/LexicalMigrate/index.js'
|
|
import { LexicalObjectReferenceBugCollection } from './collections/LexicalObjectReferenceBug/index.js'
|
|
import { LexicalRelationshipsFields } from './collections/LexicalRelationships/index.js'
|
|
import RichTextFields from './collections/RichText/index.js'
|
|
import TextFields from './collections/Text/index.js'
|
|
import Uploads from './collections/Upload/index.js'
|
|
import TabsWithRichText from './globals/TabsWithRichText.js'
|
|
import { seed } from './seed.js'
|
|
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
|
|
export const baseConfig: Partial<Config> = {
|
|
// ...extend config here
|
|
collections: [
|
|
LexicalFullyFeatured,
|
|
LexicalLinkFeature,
|
|
LexicalJSXConverter,
|
|
getLexicalFieldsCollection({
|
|
blocks: lexicalBlocks,
|
|
inlineBlocks: lexicalInlineBlocks,
|
|
}),
|
|
LexicalMigrateFields,
|
|
LexicalLocalizedFields,
|
|
LexicalObjectReferenceBugCollection,
|
|
LexicalInBlock,
|
|
LexicalAccessControl,
|
|
LexicalRelationshipsFields,
|
|
RichTextFields,
|
|
TextFields,
|
|
Uploads,
|
|
ArrayFields,
|
|
],
|
|
globals: [TabsWithRichText],
|
|
|
|
admin: {
|
|
importMap: {
|
|
baseDir: path.resolve(dirname),
|
|
},
|
|
components: {
|
|
beforeDashboard: [
|
|
{
|
|
path: './components/CollectionsExplained.tsx#CollectionsExplained',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
onInit: async (payload) => {
|
|
// IMPORTANT: This should only seed, not clear the database.
|
|
if (process.env.SEED_IN_CONFIG_ONINIT !== 'false') {
|
|
await seed(payload)
|
|
}
|
|
},
|
|
localization: {
|
|
defaultLocale: 'en',
|
|
fallback: true,
|
|
locales: ['en', 'es'],
|
|
},
|
|
typescript: {
|
|
outputFile: path.resolve(dirname, 'payload-types.ts'),
|
|
},
|
|
}
|