X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Fckeditor%2Fjs%2Fplugins%2Fdrupalimagecaption%2Fplugin.es6.js;fp=web%2Fcore%2Fmodules%2Fckeditor%2Fjs%2Fplugins%2Fdrupalimagecaption%2Fplugin.es6.js;h=1d51bcb82d486240307929e1e0a0d7476458dd8f;hp=0000000000000000000000000000000000000000;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hpb=aea91e65e895364e460983b890e295aa5d5540a5
diff --git a/web/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js b/web/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
new file mode 100644
index 000000000..1d51bcb82
--- /dev/null
+++ b/web/core/modules/ckeditor/js/plugins/drupalimagecaption/plugin.es6.js
@@ -0,0 +1,296 @@
+/**
+ * @file
+ * Drupal Image Caption plugin.
+ *
+ * This alters the existing CKEditor image2 widget plugin, which is already
+ * altered by the Drupal Image plugin, to:
+ * - allow for the data-caption and data-align attributes to be set
+ * - mimic the upcasting behavior of the caption_filter filter.
+ *
+ * @ignore
+ */
+
+(function (CKEDITOR) {
+ CKEDITOR.plugins.add('drupalimagecaption', {
+ requires: 'drupalimage',
+
+ beforeInit(editor) {
+ // Disable default placeholder text that comes with CKEditor's image2
+ // plugin: it has an inferior UX (it requires the user to manually delete
+ // the place holder text).
+ editor.lang.image2.captionPlaceholder = '';
+
+ // Drupal.t() will not work inside CKEditor plugins because CKEditor loads
+ // the JavaScript file instead of Drupal. Pull translated strings from the
+ // plugin settings that are translated server-side.
+ const placeholderText = editor.config.drupalImageCaption_captionPlaceholderText;
+
+ // Override the image2 widget definition to handle the additional
+ // data-align and data-caption attributes.
+ editor.on('widgetDefinition', (event) => {
+ const widgetDefinition = event.data;
+ if (widgetDefinition.name !== 'image') {
+ return;
+ }
+
+ // Only perform the downcasting/upcasting for to the enabled filters.
+ const captionFilterEnabled = editor.config.drupalImageCaption_captionFilterEnabled;
+ const alignFilterEnabled = editor.config.drupalImageCaption_alignFilterEnabled;
+
+ // Override default features definitions for drupalimagecaption.
+ CKEDITOR.tools.extend(widgetDefinition.features, {
+ caption: {
+ requiredContent: 'img[data-caption]',
+ },
+ align: {
+ requiredContent: 'img[data-align]',
+ },
+ }, true);
+
+ // Extend requiredContent & allowedContent.
+ // CKEDITOR.style is an immutable object: we cannot modify its
+ // definition to extend requiredContent. Hence we get the definition,
+ // modify it, and pass it to a new CKEDITOR.style instance.
+ const requiredContent = widgetDefinition.requiredContent.getDefinition();
+ requiredContent.attributes['data-align'] = '';
+ requiredContent.attributes['data-caption'] = '';
+ widgetDefinition.requiredContent = new CKEDITOR.style(requiredContent);
+ widgetDefinition.allowedContent.img.attributes['!data-align'] = true;
+ widgetDefinition.allowedContent.img.attributes['!data-caption'] = true;
+
+ // Override allowedContent setting for the 'caption' nested editable.
+ // This must match what caption_filter enforces.
+ // @see \Drupal\filter\Plugin\Filter\FilterCaption::process()
+ // @see \Drupal\Component\Utility\Xss::filter()
+ widgetDefinition.editables.caption.allowedContent = 'a[!href]; em strong cite code br';
+
+ // Override downcast(): ensure we *only* output , but also ensure
+ // we include the data-entity-type, data-entity-uuid, data-align and
+ // data-caption attributes.
+ const originalDowncast = widgetDefinition.downcast;
+ widgetDefinition.downcast = function (element) {
+ const img = findElementByName(element, 'img');
+ originalDowncast.call(this, img);
+
+ const caption = this.editables.caption;
+ const captionHtml = caption && caption.getData();
+ const attrs = img.attributes;
+
+ if (captionFilterEnabled) {
+ // If image contains a non-empty caption, serialize caption to the
+ // data-caption attribute.
+ if (captionHtml) {
+ attrs['data-caption'] = captionHtml;
+ }
+ }
+ if (alignFilterEnabled) {
+ if (this.data.align !== 'none') {
+ attrs['data-align'] = this.data.align;
+ }
+ }
+
+ // If img is wrapped with a link, we want to return that link.
+ if (img.parent.name === 'a') {
+ return img.parent;
+ }
+
+ return img;
+ };
+
+ // We want to upcast elements to a DOM structure required by the
+ // image2 widget. Depending on a case it may be:
+ // - just an tag (non-captioned, not-centered image),
+ // - tag in a paragraph (non-captioned, centered image),
+ // -