/** * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ /** * @module merge-fields/mergefieldsconfig * @publicApi */ import type { Editor } from '@ckeditor/ckeditor5-core'; /** * The configuration of the merge fields feature. * * The properties defined in this config are set in the `config.mergeFields` namespace. * * ```ts * ClassicEditor * .create( { * mergeFields: { * // Merge fields configuration. * } * } ) * .then( ... ) * .catch( ... ); * ``` * * See {@link module:core/editor/editorconfig~EditorConfig all editor options}. */ export interface MergeFieldsConfig { /** * The definitions of the merge fields that can be used in the editor. * It's allowed to define them in any combination of groups and individual merge fields. * The order of the definitions is respected when displaying the merge fields in the UI dropdown * except that merge fields that are not assigned to any group are displayed at the * very bottom of the list. */ definitions?: Array; /** * A prefix used to identify merge fields in the editor data. * * The list of allowed characters includes: ``'"`!#%:;=@{}~$()*+/?[\]^|``. * * @default '\{\{' */ prefix?: string; /** * A suffix used to identify merge fields in the editor data. * * The list of allowed characters includes: ``'"`!#%:;=@{}~$()*+/?[\]^|``. * * @default '\}\}' */ suffix?: string; /** * The data sets that can be displayed in place of the merge fields in the editor. * * @default [] */ dataSets?: Array; /** * Determines the available preview modes in the dropdown and menu bar. Possible values are: * * * `'$labels'` - adds the option to display the labels of the merge fields. * * `'$defaultValues'` - adds the option to display the default values. * * `'$dataSets'` - adds the options to display each of the configured data sets. * * At least one mode must be enabled. If more than one preview mode is configured, * you can add `previewMergeFields` button to the toolbar to switch between them, * and the menu bar button will be added automatically to the `View` category. * * @default [ '$labels', '$defaultValues', '$dataSets' ] */ previewModes?: Array; /** * A name of the preview mode that should be active when the editor is initialized. Possible values are: * * * `'$labels'` - displays the labels of the merge fields, * * `'$defaultValues'` - displays the default values, * * one of the configured {@link module:merge-fields/mergefieldsconfig~MergeFieldsConfig#dataSets data sets} identifiers. * * If not set, it will default to the one of the {@link ~MergeFieldsConfig#previewModes available preview modes}, with the priority as * in the list above. */ initialPreviewMode?: string; /** * A flag indicating whether the feature preview mode should interpret merge fields * {@link ~MergeFieldsDataSetDefinition#values data set values} and {@link ~MergeFieldDefinition#defaultValue default values} as * HTML strings and render them as HTML. * * When set to `true`, the merge field value will be interpreted and rendered as HTML. For example, `''` merge * field value will be previewed as the image located at given `src`. * * When set to `false`, the merge field value will be interpreted as a regular text. For example, `''` will be * displayed exactly as defined, meaning that text `` will be displayed instead of an image. * * By default, it is set to `false`. * * Read more about the security of previewing merge fields HTML values in the * {@glink features/merge-fields#using-html-tags-in-merge-fields-values Merge fields feature} documentation. * * @default false */ previewHtmlValues?: boolean; /** * Callback used to sanitize the HTML used in merge fields values when they are previewed inside the editor. * * We strongly recommend overwriting the default function to avoid XSS vulnerabilities. * * Read more about the security aspect of this feature in {@glink features/merge-fields#using-html-tags-in-merge-fields-values Merge * fields feature} documentation. * * The function receives the input HTML (as a string), and should return an object * that matches the {@link module:merge-fields/mergefieldsconfig~MergeFieldsSanitizeOutput} interface. * * ```ts * ClassicEditor * .create( { * mergeFields: { * previewHtmlValues: true, * sanitizeHtml( inputHtml ) { * // Strip unsafe elements and attributes, e.g.: * // the `