3 * Attaches behavior for the Editor module.
6 (function($, Drupal, drupalSettings) {
8 * Finds the text area field associated with the given text format selector.
10 * @param {jQuery} $formatSelector
11 * A text format selector DOM element.
13 * @return {HTMLElement}
14 * The text area DOM element, if it was found.
16 function findFieldForFormatSelector($formatSelector) {
17 const fieldId = $formatSelector.attr('data-editor-for');
18 // This selector will only find text areas in the top-level document. We do
19 // not support attaching editors on text areas within iframes.
20 return $(`#${fieldId}`).get(0);
24 * Filter away XSS attack vectors when switching text formats.
26 * @param {HTMLElement} field
27 * The textarea DOM element.
28 * @param {object} format
29 * The text format that's being activated, from
30 * drupalSettings.editor.formats.
31 * @param {string} originalFormatID
32 * The text format ID of the original text format.
33 * @param {function} callback
34 * A callback to be called (with no parameters) after the field's value has
37 function filterXssWhenSwitching(field, format, originalFormatID, callback) {
38 // A text editor that already is XSS-safe needs no additional measures.
39 if (format.editor.isXssSafe) {
40 callback(field, format);
42 // Otherwise, ensure XSS safety: let the server XSS filter this value.
45 url: Drupal.url(`editor/filter_xss/${format.format}`),
49 original_format_id: originalFormatID,
52 success(xssFilteredValue) {
53 // If the server returns false, then no XSS filtering is needed.
54 if (xssFilteredValue !== false) {
55 field.value = xssFilteredValue;
57 callback(field, format);
64 * Changes the text editor on a text area.
66 * @param {HTMLElement} field
67 * The text area DOM element.
68 * @param {string} newFormatID
69 * The text format we're changing to; the text editor for the currently
70 * active text format will be detached, and the text editor for the new text
71 * format will be attached.
73 function changeTextEditor(field, newFormatID) {
74 const previousFormatID = field.getAttribute(
75 'data-editor-active-text-format',
78 // Detach the current editor (if any) and attach a new editor.
79 if (drupalSettings.editor.formats[previousFormatID]) {
82 drupalSettings.editor.formats[previousFormatID],
85 // When no text editor is currently active, stop tracking changes.
87 $(field).off('.editor');
90 // Attach the new text editor (if any).
91 if (drupalSettings.editor.formats[newFormatID]) {
92 const format = drupalSettings.editor.formats[newFormatID];
93 filterXssWhenSwitching(
101 // Store the new active format.
102 field.setAttribute('data-editor-active-text-format', newFormatID);
106 * Handles changes in text format.
108 * @param {jQuery.Event} event
109 * The text format change event.
111 function onTextFormatChange(event) {
112 const $select = $(event.target);
113 const field = event.data.field;
114 const activeFormatID = field.getAttribute('data-editor-active-text-format');
115 const newFormatID = $select.val();
117 // Prevent double-attaching if the change event is triggered manually.
118 if (newFormatID === activeFormatID) {
122 // When changing to a text format that has a text editor associated
123 // with it that supports content filtering, then first ask for
124 // confirmation, because switching text formats might cause certain
125 // markup to be stripped away.
126 const supportContentFiltering =
127 drupalSettings.editor.formats[newFormatID] &&
128 drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
129 // If there is no content yet, it's always safe to change the text format.
130 const hasContent = field.value !== '';
131 if (hasContent && supportContentFiltering) {
132 const message = Drupal.t(
133 'Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.',
135 '%text_format': $select.find('option:selected').text(),
138 const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
139 title: Drupal.t('Change text format?'),
140 dialogClass: 'editor-change-text-format-modal',
144 text: Drupal.t('Continue'),
145 class: 'button button--primary',
147 changeTextEditor(field, newFormatID);
148 confirmationDialog.close();
152 text: Drupal.t('Cancel'),
155 // Restore the active format ID: cancel changing text format. We
156 // cannot simply call event.preventDefault() because jQuery's
157 // change event is only triggered after the change has already
159 $select.val(activeFormatID);
160 confirmationDialog.close();
164 // Prevent this modal from being closed without the user making a choice
165 // as per http://stackoverflow.com/a/5438771.
166 closeOnEscape: false,
170 .find('.ui-dialog-titlebar-close')
175 // Automatically destroy the DOM element that was used for the dialog.
176 $(event.target).remove();
180 confirmationDialog.showModal();
182 changeTextEditor(field, newFormatID);
187 * Initialize an empty object for editors to place their attachment code.
194 * Enables editors on text_format elements.
196 * @type {Drupal~behavior}
198 * @prop {Drupal~behaviorAttach} attach
199 * Attaches an editor to an input element.
200 * @prop {Drupal~behaviorDetach} detach
201 * Detaches an editor from an input element.
203 Drupal.behaviors.editor = {
204 attach(context, settings) {
205 // If there are no editor settings, there are no editors to enable.
206 if (!settings.editor) {
211 .find('[data-editor-for]')
214 const $this = $(this);
215 const field = findFieldForFormatSelector($this);
217 // Opt-out if no supported text area was found.
222 // Store the current active format.
223 const activeFormatID = $this.val();
224 field.setAttribute('data-editor-active-text-format', activeFormatID);
226 // Directly attach this text editor, if the text format is enabled.
227 if (settings.editor.formats[activeFormatID]) {
228 // XSS protection for the current text format/editor is performed on
229 // the server side, so we don't need to do anything special here.
230 Drupal.editorAttach(field, settings.editor.formats[activeFormatID]);
232 // When there is no text editor for this text format, still track
233 // changes, because the user has the ability to switch to some text
234 // editor, otherwise this code would not be executed.
235 $(field).on('change.editor keypress.editor', () => {
236 field.setAttribute('data-editor-value-is-changed', 'true');
237 // Just knowing that the value was changed is enough, stop tracking.
238 $(field).off('.editor');
241 // Attach onChange handler to text format selector element.
242 if ($this.is('select')) {
243 $this.on('change.editorAttach', { field }, onTextFormatChange);
245 // Detach any editor when the containing form is submitted.
246 $this.parents('form').on('submit', event => {
247 // Do not detach if the event was canceled.
248 if (event.isDefaultPrevented()) {
251 // Detach the current editor (if any).
252 if (settings.editor.formats[activeFormatID]) {
255 settings.editor.formats[activeFormatID],
263 detach(context, settings, trigger) {
265 // The 'serialize' trigger indicates that we should simply update the
266 // underlying element with the new text, without destroying the editor.
267 if (trigger === 'serialize') {
268 // Removing the editor-processed class guarantees that the editor will
269 // be reattached. Only do this if we're planning to destroy the editor.
271 .find('[data-editor-for]')
275 .find('[data-editor-for]')
276 .removeOnce('editor');
279 editors.each(function() {
280 const $this = $(this);
281 const activeFormatID = $this.val();
282 const field = findFieldForFormatSelector($this);
283 if (field && activeFormatID in settings.editor.formats) {
286 settings.editor.formats[activeFormatID],
295 * Attaches editor behaviors to the field.
297 * @param {HTMLElement} field
298 * The textarea DOM element.
299 * @param {object} format
300 * The text format that's being activated, from
301 * drupalSettings.editor.formats.
303 * @listens event:change
305 * @fires event:formUpdated
307 Drupal.editorAttach = function(field, format) {
309 // Attach the text editor.
310 Drupal.editors[format.editor].attach(field, format);
312 // Ensures form.js' 'formUpdated' event is triggered even for changes that
313 // happen within the text editor.
314 Drupal.editors[format.editor].onChange(field, () => {
315 $(field).trigger('formUpdated');
317 // Keep track of changes, so we know what to do when switching text
318 // formats and guaranteeing XSS protection.
319 field.setAttribute('data-editor-value-is-changed', 'true');
325 * Detaches editor behaviors from the field.
327 * @param {HTMLElement} field
328 * The textarea DOM element.
329 * @param {object} format
330 * The text format that's being activated, from
331 * drupalSettings.editor.formats.
332 * @param {string} trigger
333 * Trigger value from the detach behavior.
335 Drupal.editorDetach = function(field, format, trigger) {
337 Drupal.editors[format.editor].detach(field, format, trigger);
339 // Restore the original value if the user didn't make any changes yet.
340 if (field.getAttribute('data-editor-value-is-changed') === 'false') {
341 field.value = field.getAttribute('data-editor-value-original');
345 })(jQuery, Drupal, drupalSettings);