feat: add tinymce richtext editor variant, update design system

package.json

@@ -85,7 +85,7 @@
  },
  "homepage": "https://github.com/SoftwareBrothers/adminjs#readme",
  "dependencies": {
- "@adminjs/design-system": "^4.0.3",
+ "@adminjs/design-system": "^4.1.0",
  "@babel/core": "^7.23.9",
  "@babel/parser": "^7.23.9",
  "@babel/plugin-syntax-import-assertions": "^7.23.3",

src/backend/bundler/globals.bundler.ts

@@ -31,17 +31,15 @@ const input: InputOptions = {
  'process.browser': true,
  }),
  (json as any).default(),
- (commonjs as any).default({
- include: ['node_modules/**', NODE_ENV === 'development' ? '../../node_modules/**' : ''],
- ignoreGlobal: true,
- }),
+ (commonjs as any).default(),
  (polyfills as any).default(),
  ...(NODE_ENV === 'production' ? [minify()] : []),
  ],
 }
 
 const output: OutputOptions = {
  name: 'globals',
+ inlineDynamicImports: true,
  file: path.join(__dirname, `../../frontend/assets/scripts/global-bundle.${NODE_ENV}.js`),
  globals: {
  react: 'React',

src/frontend/components/app/filter-drawer.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Drawer, DrawerContent, DrawerFooter, H3, Icon } from '@adminjs/design-system'
 import isNil from 'lodash/isNil.js'
 import pickBy from 'lodash/pickBy.js'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { FormEventHandler, useEffect, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import allowOverride from '../../hoc/allow-override.js'
@@ -39,12 +39,12 @@ const FilterDrawer: React.FC<FilterProps> = (props) => {
  }
  }, [params.resourceId])
 
- const handleSubmit = (event: SubmitEvent) => {
+ const handleSubmit: FormEventHandler<HTMLElement> = (event) => {
  event.preventDefault()
  storeParams({ filters: pickBy(filter, (v) => !isNil(v)), page: '1' })
  }
 
- const handleReset = (event: SubmitEvent) => {
+ const handleReset: FormEventHandler<HTMLElement> = (event) => {
  event.preventDefault()
  clearParams('filters')
  setFilter({})

src/frontend/components/property-type/richtext/edit.tsx

@@ -1,4 +1,4 @@
-import { FormGroup, FormMessage, RichTextEditor } from '@adminjs/design-system'
+import { FormGroup, FormMessage, RichTextEditor, TinyMCE } from '@adminjs/design-system'
 import React, { FC, memo, useCallback } from 'react'
 
 import { EditPropertyProps } from '../base-property-props.js'
@@ -10,11 +10,23 @@ const Edit: FC<EditPropertyProps> = (props) => {
  const { property, record, onChange } = props
  const value = record.params?.[property.path]
  const error = record.errors && record.errors[property.path]
+ const { custom = {} } = property
+ const { variant = 'default' } = custom
 
  const handleUpdate = useCallback((newValue: string) => {
  onChange(property.path, newValue)
  }, [])
 
+ if (variant === 'tinymce') {
+ return (
+ <FormGroup error={Boolean(error)}>
+ <PropertyLabel property={property} />
+ <TinyMCE value={value} onChange={handleUpdate} options={property.props} />
+ <FormMessage>{error?.message}</FormMessage>
+ </FormGroup>
+ )
+ }
+
  return (
  <FormGroup error={Boolean(error)}>
  <PropertyLabel property={property} />