* Attaches behavior for the Editor module.
*/
-(function ($, Drupal, drupalSettings) {
+(function($, Drupal, drupalSettings) {
/**
* Finds the text area field associated with the given text format selector.
*
return $(`#${fieldId}`).get(0);
}
+ /**
+ * Filter away XSS attack vectors when switching text formats.
+ *
+ * @param {HTMLElement} field
+ * The textarea DOM element.
+ * @param {object} format
+ * The text format that's being activated, from
+ * drupalSettings.editor.formats.
+ * @param {string} originalFormatID
+ * The text format ID of the original text format.
+ * @param {function} callback
+ * A callback to be called (with no parameters) after the field's value has
+ * been XSS filtered.
+ */
+ function filterXssWhenSwitching(field, format, originalFormatID, callback) {
+ // A text editor that already is XSS-safe needs no additional measures.
+ if (format.editor.isXssSafe) {
+ callback(field, format);
+ }
+ // Otherwise, ensure XSS safety: let the server XSS filter this value.
+ else {
+ $.ajax({
+ url: Drupal.url(`editor/filter_xss/${format.format}`),
+ type: 'POST',
+ data: {
+ value: field.value,
+ original_format_id: originalFormatID,
+ },
+ dataType: 'json',
+ success(xssFilteredValue) {
+ // If the server returns false, then no XSS filtering is needed.
+ if (xssFilteredValue !== false) {
+ field.value = xssFilteredValue;
+ }
+ callback(field, format);
+ },
+ });
+ }
+ }
+
/**
* Changes the text editor on a text area.
*
* format will be attached.
*/
function changeTextEditor(field, newFormatID) {
- const previousFormatID = field.getAttribute('data-editor-active-text-format');
+ const previousFormatID = field.getAttribute(
+ 'data-editor-active-text-format',
+ );
// Detach the current editor (if any) and attach a new editor.
if (drupalSettings.editor.formats[previousFormatID]) {
- Drupal.editorDetach(field, drupalSettings.editor.formats[previousFormatID]);
+ Drupal.editorDetach(
+ field,
+ drupalSettings.editor.formats[previousFormatID],
+ );
}
// When no text editor is currently active, stop tracking changes.
else {
// Attach the new text editor (if any).
if (drupalSettings.editor.formats[newFormatID]) {
const format = drupalSettings.editor.formats[newFormatID];
- filterXssWhenSwitching(field, format, previousFormatID, Drupal.editorAttach);
+ filterXssWhenSwitching(
+ field,
+ format,
+ previousFormatID,
+ Drupal.editorAttach,
+ );
}
// Store the new active format.
// with it that supports content filtering, then first ask for
// confirmation, because switching text formats might cause certain
// markup to be stripped away.
- const supportContentFiltering = drupalSettings.editor.formats[newFormatID] && drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
+ const supportContentFiltering =
+ drupalSettings.editor.formats[newFormatID] &&
+ drupalSettings.editor.formats[newFormatID].editorSupportsContentFiltering;
// If there is no content yet, it's always safe to change the text format.
const hasContent = field.value !== '';
if (hasContent && supportContentFiltering) {
- const message = Drupal.t('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.', {
- '%text_format': $select.find('option:selected').text(),
- });
+ const message = Drupal.t(
+ '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.',
+ {
+ '%text_format': $select.find('option:selected').text(),
+ },
+ );
const confirmationDialog = Drupal.dialog(`<div>${message}</div>`, {
title: Drupal.t('Change text format?'),
dialogClass: 'editor-change-text-format-modal',
// as per http://stackoverflow.com/a/5438771.
closeOnEscape: false,
create() {
- $(this).parent().find('.ui-dialog-titlebar-close').remove();
+ $(this)
+ .parent()
+ .find('.ui-dialog-titlebar-close')
+ .remove();
},
beforeClose: false,
close(event) {
});
confirmationDialog.showModal();
- }
- else {
+ } else {
changeTextEditor(field, newFormatID);
}
}
return;
}
- $(context).find('[data-editor-for]').once('editor').each(function () {
- const $this = $(this);
- const field = findFieldForFormatSelector($this);
-
- // Opt-out if no supported text area was found.
- if (!field) {
- return;
- }
-
- // Store the current active format.
- const activeFormatID = $this.val();
- field.setAttribute('data-editor-active-text-format', activeFormatID);
-
- // Directly attach this text editor, if the text format is enabled.
- if (settings.editor.formats[activeFormatID]) {
- // XSS protection for the current text format/editor is performed on
- // the server side, so we don't need to do anything special here.
- Drupal.editorAttach(field, settings.editor.formats[activeFormatID]);
- }
- // When there is no text editor for this text format, still track
- // changes, because the user has the ability to switch to some text
- // editor, otherwise this code would not be executed.
- $(field).on('change.editor keypress.editor', () => {
- field.setAttribute('data-editor-value-is-changed', 'true');
- // Just knowing that the value was changed is enough, stop tracking.
- $(field).off('.editor');
- });
+ $(context)
+ .find('[data-editor-for]')
+ .once('editor')
+ .each(function() {
+ const $this = $(this);
+ const field = findFieldForFormatSelector($this);
- // Attach onChange handler to text format selector element.
- if ($this.is('select')) {
- $this.on('change.editorAttach', { field }, onTextFormatChange);
- }
- // Detach any editor when the containing form is submitted.
- $this.parents('form').on('submit', (event) => {
- // Do not detach if the event was canceled.
- if (event.isDefaultPrevented()) {
+ // Opt-out if no supported text area was found.
+ if (!field) {
return;
}
- // Detach the current editor (if any).
+
+ // Store the current active format.
+ const activeFormatID = $this.val();
+ field.setAttribute('data-editor-active-text-format', activeFormatID);
+
+ // Directly attach this text editor, if the text format is enabled.
if (settings.editor.formats[activeFormatID]) {
- Drupal.editorDetach(field, settings.editor.formats[activeFormatID], 'serialize');
+ // XSS protection for the current text format/editor is performed on
+ // the server side, so we don't need to do anything special here.
+ Drupal.editorAttach(field, settings.editor.formats[activeFormatID]);
}
+ // When there is no text editor for this text format, still track
+ // changes, because the user has the ability to switch to some text
+ // editor, otherwise this code would not be executed.
+ $(field).on('change.editor keypress.editor', () => {
+ field.setAttribute('data-editor-value-is-changed', 'true');
+ // Just knowing that the value was changed is enough, stop tracking.
+ $(field).off('.editor');
+ });
+
+ // Attach onChange handler to text format selector element.
+ if ($this.is('select')) {
+ $this.on('change.editorAttach', { field }, onTextFormatChange);
+ }
+ // Detach any editor when the containing form is submitted.
+ $this.parents('form').on('submit', event => {
+ // Do not detach if the event was canceled.
+ if (event.isDefaultPrevented()) {
+ return;
+ }
+ // Detach the current editor (if any).
+ if (settings.editor.formats[activeFormatID]) {
+ Drupal.editorDetach(
+ field,
+ settings.editor.formats[activeFormatID],
+ 'serialize',
+ );
+ }
+ });
});
- });
},
detach(context, settings, trigger) {
if (trigger === 'serialize') {
// Removing the editor-processed class guarantees that the editor will
// be reattached. Only do this if we're planning to destroy the editor.
- editors = $(context).find('[data-editor-for]').findOnce('editor');
- }
- else {
- editors = $(context).find('[data-editor-for]').removeOnce('editor');
+ editors = $(context)
+ .find('[data-editor-for]')
+ .findOnce('editor');
+ } else {
+ editors = $(context)
+ .find('[data-editor-for]')
+ .removeOnce('editor');
}
- editors.each(function () {
+ editors.each(function() {
const $this = $(this);
const activeFormatID = $this.val();
const field = findFieldForFormatSelector($this);
if (field && activeFormatID in settings.editor.formats) {
- Drupal.editorDetach(field, settings.editor.formats[activeFormatID], trigger);
+ Drupal.editorDetach(
+ field,
+ settings.editor.formats[activeFormatID],
+ trigger,
+ );
}
});
},
*
* @fires event:formUpdated
*/
- Drupal.editorAttach = function (field, format) {
+ Drupal.editorAttach = function(field, format) {
if (format.editor) {
// Attach the text editor.
Drupal.editors[format.editor].attach(field, format);
* @param {string} trigger
* Trigger value from the detach behavior.
*/
- Drupal.editorDetach = function (field, format, trigger) {
+ Drupal.editorDetach = function(field, format, trigger) {
if (format.editor) {
Drupal.editors[format.editor].detach(field, format, trigger);
}
}
};
-
- /**
- * Filter away XSS attack vectors when switching text formats.
- *
- * @param {HTMLElement} field
- * The textarea DOM element.
- * @param {object} format
- * The text format that's being activated, from
- * drupalSettings.editor.formats.
- * @param {string} originalFormatID
- * The text format ID of the original text format.
- * @param {function} callback
- * A callback to be called (with no parameters) after the field's value has
- * been XSS filtered.
- */
- function filterXssWhenSwitching(field, format, originalFormatID, callback) {
- // A text editor that already is XSS-safe needs no additional measures.
- if (format.editor.isXssSafe) {
- callback(field, format);
- }
- // Otherwise, ensure XSS safety: let the server XSS filter this value.
- else {
- $.ajax({
- url: Drupal.url(`editor/filter_xss/${format.format}`),
- type: 'POST',
- data: {
- value: field.value,
- original_format_id: originalFormatID,
- },
- dataType: 'json',
- success(xssFilteredValue) {
- // If the server returns false, then no XSS filtering is needed.
- if (xssFilteredValue !== false) {
- field.value = xssFilteredValue;
- }
- callback(field, format);
- },
- });
- }
- }
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);