diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts index ae81440f..fcc6f22e 100644 --- a/src/components/builder/index.ts +++ b/src/components/builder/index.ts @@ -18,6 +18,7 @@ export {default as ReadOnly} from './readonly'; export {default as ShowCharCount} from './show-char-count'; export {default as PresentationConfig} from './presentation-config'; export {default as ComponentSelect} from './component-select'; +export {default as RichText} from './rich-text'; export {default as SimpleConditional} from './simple-conditional'; export {default as Suffix} from './suffix'; export {default as TemplatingHint} from './templating-hint'; diff --git a/src/components/builder/rich-text.stories.ts b/src/components/builder/rich-text.stories.ts new file mode 100644 index 00000000..69d288af --- /dev/null +++ b/src/components/builder/rich-text.stories.ts @@ -0,0 +1,31 @@ +import {Meta, StoryObj} from '@storybook/react'; + +import {withFormik} from '@/sb-decorators'; + +import RichText from './rich-text'; + +export default { + title: 'Formio/Builder/RichText', + component: RichText, + decorators: [withFormik], + args: { + name: 'richText', + required: false, + supportsBackendTemplating: false, + }, + parameters: { + controls: {hideNoControlsWarning: true}, + modal: {noModal: true}, + formik: {initialValues: {richText: ''}}, + }, +} satisfies Meta; + +type Story = StoryObj; + +export const Default: Story = {}; + +export const WithBackendTemplatingSupport: Story = { + args: { + supportsBackendTemplating: true, + }, +}; diff --git a/src/registry/content/rich-text.tsx b/src/components/builder/rich-text.tsx similarity index 80% rename from src/registry/content/rich-text.tsx rename to src/components/builder/rich-text.tsx index 89cd144f..d634f557 100644 --- a/src/registry/content/rich-text.tsx +++ b/src/components/builder/rich-text.tsx @@ -8,7 +8,8 @@ */ import {CKEditor} from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@open-formulieren/ckeditor5-build-classic'; -import {useField} from 'formik'; +import {AnyComponentSchema} from '@open-formulieren/types'; +import {useField, useFormikContext} from 'formik'; import {useContext} from 'react'; import {TemplatingHint} from '@/components/builder'; @@ -26,6 +27,7 @@ export type ColorOption = Required< export interface RichTextProps { name: string; required?: boolean; + supportsBackendTemplating?: boolean; } /** @@ -35,11 +37,14 @@ export interface RichTextProps { * classic editor build, with some extra plugins enabled to match the features used/exposed * by Formio.js. */ -const RichText: React.FC = ({name, required}) => { +const RichText: React.FC = ({name, required, supportsBackendTemplating = false}) => { const {richTextColors} = useContext(BuilderContext); + const { + values: {type}, + } = useFormikContext(); const [props, , helpers] = useField(name); return ( - + = ({name, required}) => { helpers.setTouched(true); }} /> - } /> + {supportsBackendTemplating && } />} ); }; diff --git a/src/registry/content/richText.scss b/src/components/builder/richText.scss similarity index 100% rename from src/registry/content/richText.scss rename to src/components/builder/richText.scss diff --git a/src/context.ts b/src/context.ts index a4921afd..8748f503 100644 --- a/src/context.ts +++ b/src/context.ts @@ -3,8 +3,8 @@ import React from 'react'; import {PrefillAttributeOption, PrefillPluginOption} from '@/components/builder/prefill/types'; import {RegistrationAttributeOption} from '@/components/builder/registration/registration-attribute'; +import type {ColorOption} from '@/components/builder/rich-text'; import {ValidatorOption} from '@/components/builder/validate/validator-select'; -import type {ColorOption} from '@/registry/content/rich-text'; import {AuthPluginOption} from '@/registry/cosignV1/edit'; import {AnyComponentSchema} from '@/types'; diff --git a/src/registry/content/edit.tsx b/src/registry/content/edit.tsx index 4a16ed29..5d6a2c02 100644 --- a/src/registry/content/edit.tsx +++ b/src/registry/content/edit.tsx @@ -10,6 +10,7 @@ import { Hidden, Key, PresentationConfig, + RichText, SimpleConditional, } from '@/components/builder'; import {Select, Tab, TabList, TabPanel, Tabs} from '@/components/formio'; @@ -17,7 +18,6 @@ import {BuilderContext} from '@/context'; import {useErrorChecker} from '@/utils/errors'; import {EditFormDefinition} from '../types'; -import RichText from './rich-text'; /** * Form to configure a Formio 'content' type component. @@ -191,7 +191,11 @@ const RichTextTranslations: React.FC = () => { {supportedLanguageCodes.map((code, index) => ( - + ))}