@open-formulieren/formio-builder
Version:
An opinionated Formio webform builder for Open Forms
58 lines (57 loc) • 2.78 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("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.
*/
const ckeditor5_react_1 = require("@ckeditor/ckeditor5-react");
const ckeditor5_build_classic_1 = __importDefault(require("@open-formulieren/ckeditor5-build-classic"));
const formik_1 = require("formik");
const react_1 = require("react");
const builder_1 = require("../../components/builder");
const formio_1 = require("../../components/formio");
const context_1 = require("../../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 } = (0, react_1.useContext)(context_1.BuilderContext);
const { values: { type }, } = (0, formik_1.useFormikContext)();
const [props, , helpers] = (0, formik_1.useField)(name);
return ((0, jsx_runtime_1.jsxs)(formio_1.Component, Object.assign({ type: type, field: name, required: required, className: "offb-rich-text" }, { children: [(0, jsx_runtime_1.jsx)(ckeditor5_react_1.CKEditor, { editor: ckeditor5_build_classic_1.default, 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 && (0, jsx_runtime_1.jsx)(formio_1.Description, { text: (0, jsx_runtime_1.jsx)(builder_1.TemplatingHint, {}) })] })));
};
exports.default = RichText;