@open-formulieren/formio-builder/lib/esm/components/builder/rich-text.js

An opinionated Formio webform builder for Open Forms

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Rich text editor.
 *
 * @todo
 *
 * Eventually replace this with something that is Slate.js based so that we can
 * incorporate our domain-specific variables/constructs for a better editing experience.
 */
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@open-formulieren/ckeditor5-build-classic';
import { useField, useFormikContext } from 'formik';
import { useContext } from 'react';
import { TemplatingHint } from '../../components/builder';
import { Component, Description } from '../../components/formio';
import { BuilderContext } from '../../context';
/**
 * A rich text editor based on CKEditor 5.
 *
 * The value is stored as an HTML string. This editor is a custom build based on CKEditor's
 * classic editor build, with some extra plugins enabled to match the features used/exposed
 * by Formio.js.
 */
const RichText = ({ name, required, supportsBackendTemplating = false }) => {
    const { richTextColors } = useContext(BuilderContext);
    const { values: { type }, } = useFormikContext();
    const [props, , helpers] = useField(name);
    return (_jsxs(Component, Object.assign({ type: type, field: name, required: required, className: "offb-rich-text" }, { children: [_jsx(CKEditor, { editor: ClassicEditor, config: {
                    link: {
                        decorators: {
                            openInNewTab: {
                                mode: 'manual',
                                label: 'Open in a new tab',
                                defaultValue: true,
                                attributes: {
                                    target: '_blank',
                                    rel: 'noopener noreferrer',
                                },
                            },
                        },
                    },
                    fontColor: {
                        colors: richTextColors,
                    },
                }, data: props.value || '', onChange: (_, editor) => {
                    const html = editor.getData();
                    helpers.setValue(html);
                }, onBlur: () => {
                    helpers.setTouched(true);
                } }), supportsBackendTemplating && _jsx(Description, { text: _jsx(TemplatingHint, {}) })] })));
};
export default RichText;