D8CORE-1835: Added <abbr> button to CKEditor

js/plugins/abbr/LICENSE.md

@@ -0,0 +1,42 @@
+Software License Agreement
+==========================
+
+Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
+
+All sample plugins are licensed under the terms of the MIT License (see Appendix A):
+
+	http://en.wikipedia.org/wiki/MIT_License
+
+Trademarks
+----------
+
+CKEditor is a trademark of CKSource Holding sp. z o.o. All other brand
+and product names are trademarks, registered trademarks or service
+marks of their respective holders.
+
+---
+
+Appendix A: The MIT License
+---------------------------
+
+The MIT License (MIT)
+
+Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

js/plugins/abbr/dialogs/abbr.js

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Licensed under the terms of the MIT License (see LICENSE.md).
+ *
+ * The abbr plugin dialog window definition.
+ *
+ * Created out of the CKEditor Plugin SDK:
+ * https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html
+ */
+
+// Our dialog definition.
+CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
+	return {
+
+		// Basic properties of the dialog window: title, minimum size.
+		title: 'Abbreviation Properties',
+		minWidth: 400,
+		minHeight: 200,
+
+		// Dialog window content definition.
+		contents: [
+			{
+				// Definition of the Basic Settings dialog tab (page).
+				id: 'tab-basic',
+				label: 'Basic Settings',
+
+				// The tab content.
+				elements: [
+					{
+						// Text input field for the abbreviation text.
+						type: 'text',
+						id: 'abbr',
+						label: 'Abbreviation',
+
+						// Validation checking whether the field is not empty.
+						validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." ),
+
+						// Called by the main setupContent method call on dialog initialization.
+						setup: function( element ) {
+							this.setValue( element.getText() );
+						},
+
+						// Called by the main commitContent method call on dialog confirmation.
+						commit: function( element ) {
+							element.setText( this.getValue() );
+						}
+					},
+					{
+						// Text input field for the abbreviation title (explanation).
+						type: 'text',
+						id: 'title',
+						label: 'Explanation',
+						validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." ),
+
+						// Called by the main setupContent method call on dialog initialization.
+						setup: function( element ) {
+							this.setValue( element.getAttribute( "title" ) );
+						},
+
+						// Called by the main commitContent method call on dialog confirmation.
+						commit: function( element ) {
+							element.setAttribute( "title", this.getValue() );
+						}
+					}
+				]
+			},
+
+			// Definition of the Advanced Settings dialog tab (page).
+			{
+				id: 'tab-adv',
+				label: 'Advanced Settings',
+				elements: [
+					{
+						// Another text field for the abbr element id.
+						type: 'text',
+						id: 'id',
+						label: 'Id',
+
+						// Called by the main setupContent method call on dialog initialization.
+						setup: function( element ) {
+							this.setValue( element.getAttribute( "id" ) );
+						},
+
+						// Called by the main commitContent method call on dialog confirmation.
+						commit: function ( element ) {
+							var id = this.getValue();
+							if ( id )
+								element.setAttribute( 'id', id );
+							else if ( !this.insertMode )
+								element.removeAttribute( 'id' );
+						}
+					}
+				]
+			}
+		],
+
+		// Invoked when the dialog is loaded.
+		onShow: function() {
+
+			// Get the selection from the editor.
+			var selection = editor.getSelection();
+
+			// Get the element at the start of the selection.
+			var element = selection.getStartElement();
+
+			// Get the <abbr> element closest to the selection, if it exists.
+			if ( element )
+				element = element.getAscendant( 'abbr', true );
+
+			// Create a new <abbr> element if it does not exist.
+			if ( !element || element.getName() != 'abbr' ) {
+				element = editor.document.createElement( 'abbr' );
+
+				// Flag the insertion mode for later use.
+				this.insertMode = true;
+			}
+			else
+				this.insertMode = false;
+
+			// Store the reference to the <abbr> element in an internal property, for later use.
+			this.element = element;
+
+			// Invoke the setup methods of all dialog window elements, so they can load the element attributes.
+			if ( !this.insertMode )
+				this.setupContent( this.element );
+		},
+
+		// This method is invoked once a user clicks the OK button, confirming the dialog.
+		onOk: function() {
+
+			// Create a new <abbr> element.
+			var abbr = this.element;
+
+			// Invoke the commit methods of all dialog window elements, so the <abbr> element gets modified.
+			this.commitContent( abbr );
+
+			// Finally, if in insert mode, insert the element into the editor at the caret position.
+			if ( this.insertMode )
+				editor.insertElement( abbr );
+		}
+	};
+});

js/plugins/abbr/plugin.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2014-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * Licensed under the terms of the MIT License (see LICENSE.md).
+ *
+ * Basic sample plugin inserting abbreviation elements into the CKEditor editing area.
+ *
+ * Created out of the CKEditor Plugin SDK:
+ * https://ckeditor.com/docs/ckeditor4/latest/guide/plugin_sdk_sample_1.html
+ */
+
+// Register the plugin within the editor.
+CKEDITOR.plugins.add( 'abbr', {
+
+	// Register the icons.
+	icons: 'abbr',
+
+	// The plugin initialization logic goes inside this method.
+	init: function( editor ) {
+
+		// Define an editor command that opens our dialog window.
+		editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );
+
+		// Create a toolbar button that executes the above command.
+		editor.ui.addButton( 'Abbr', {
+
+			// The text part of the button (if available) and the tooltip.
+			label: 'Insert Abbreviation',
+
+			// The command to execute on click.
+			command: 'abbr',
+
+			// The button placement in the toolbar (toolbar group name).
+			toolbar: 'insert'
+		});
+
+		if ( editor.contextMenu ) {
+
+			// Add a context menu group with the Edit Abbreviation item.
+			editor.addMenuGroup( 'abbrGroup' );
+			editor.addMenuItem( 'abbrItem', {
+				label: 'Edit Abbreviation',
+				icon: this.path + 'icons/abbr.png',
+				command: 'abbr',
+				group: 'abbrGroup'
+			});
+
+			editor.contextMenu.addListener( function( element ) {
+				if ( element.getAscendant( 'abbr', true ) ) {
+					return { abbrItem: CKEDITOR.TRISTATE_OFF };
+				}
+			});
+		}
+
+		// Register our dialog file -- this.path is the plugin folder path.
+		CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' );
+	}
+});

src/Plugin/CKEditorPlugin/Abbreviation.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace Drupal\stanford_text_editor\Plugin\CKEditorPlugin;
+
+use Drupal\ckeditor\CKEditorPluginBase;
+use Drupal\ckeditor\CKEditorPluginContextualInterface;
+use Drupal\editor\Entity\Editor;
+
+/**
+ * Defines the "abbr" plugin.
+ *
+ * @CKEditorPlugin(
+ *   id = "abbr",
+ *   label = @Translation("Abbreviation"),
+ *   module = "ckeditor_abbr"
+ * )
+ */
+class Abbreviation extends CKEditorPluginBase implements CKEditorPluginContextualInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFile() {
+    return drupal_get_path('module', 'stanford_text_editor') . '/js/plugins/abbr/plugin.js';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getLibraries(Editor $editor) {
+    return [];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getConfig(Editor $editor) {
+    return [];
+  }
+
+  /**
+   * Returns the buttons that this plugin provides, along with metadata.
+   *
+   * The metadata is used by the CKEditor module to generate a visual CKEditor
+   * toolbar builder UI.
+   *
+   * @return array
+   *   An array of buttons that are provided by this plugin. This will
+   *   only be used in the administrative section for assembling the toolbar.
+   *   Each button should be keyed by its CKEditor button name (you can look up
+   *   the button name up in the plugin.js file), and should contain an array of
+   *   button properties, including:
+   *   - label: A human-readable, translated button name.
+   *   - image: An image for the button to be used in the toolbar.
+   *   - image_rtl: If the image needs to have a right-to-left version, specify
+   *     an alternative file that will be used in RTL editors.
+   *   - image_alternative: If this button does not render as an image, specify
+   *     an HTML string representing the contents of this button.
+   *   - image_alternative_rtl: Similar to image_alternative, but a
+   *     right-to-left version.
+   *   - attributes: An array of HTML attributes which should be added to this
+   *     button when rendering the button in the administrative section for
+   *     assembling the toolbar.
+   *   - multiple: Boolean value indicating if this button may be added multiple
+   *     times to the toolbar. This typically is only applicable for dividers
+   *     and group indicators.
+   */
+  public function getButtons() {
+    $iconImage = drupal_get_path('module', 'stanford_text_editor') . '/js/plugins/abbr/icons/abbr.png';
+    return [
+      'Abbr' => [
+        'label' => t('Insert Abbreviation'),
+        'image' => $iconImage,
+      ],
+    ];
+  }
+
+  /**
+   * Checks if this plugin should be enabled based on the editor configuration.
+   *
+   * The editor's settings can be retrieved via $editor->getSettings().
+   *
+   * @param \Drupal\editor\Entity\Editor $editor
+   *   A configured text editor object.
+   *
+   * @return bool
+   *   Return TRUE when this plugin is enabled.
+   */
+  public function isEnabled(Editor $editor) {
+    return TRUE;
+  }
+
+}

tests/src/Kernel/Plugin/CKEditorPlugin/AbbreviationPluginTest.php

@@ -0,0 +1,44 @@
+<?php
+
+namespace Drupal\Tests\stanford_text_editor\Kernel\Plugin\CkeditorPlugin;
+
+use Drupal\editor\Entity\Editor;
+use Drupal\KernelTests\KernelTestBase;
+
+/**
+ * Class AbbreviationPluginTest
+ *
+ * @group stanford_text_editor
+ */
+class AbbreviationPluginTest extends KernelTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['system', 'ckeditor', 'stanford_text_editor'];
+
+  /**
+   * Fixed toolbar plugin exists.
+   */
+  public function testFixedToolbarPlugin() {
+    /** @var \Drupal\ckeditor\CKEditorPluginManager $ckeditor_plugin_manager */
+    $ckeditor_plugin_manager = \Drupal::service('plugin.manager.ckeditor.plugin');
+    $this->assertArrayHasKey('abbr', $ckeditor_plugin_manager->getDefinitions());
+    /** @var \Drupal\stanford_text_editor\Plugin\CKEditorPlugin\Abbreviation $plugin */
+    $plugin = $ckeditor_plugin_manager->createInstance('abbr');
+    $this->assertStringContainsString('plugin.js', $plugin->getFile());
+
+    $editor = $this->createMock(Editor::class);
+
+    $this->assertEmpty($plugin->getLibraries($editor));
+    $this->assertEmpty($plugin->getConfig($editor));
+
+    $buttons_array = $plugin->getButtons($editor);
+    $this->assertArrayHasKey('Abbr', $buttons_array);
+    $this->assertArrayHasKey('label', $buttons_array['Abbr']);
+    $this->assertArrayHasKey('image', $buttons_array['Abbr']);
+
+    $this->assertTrue($plugin->isEnabled($editor));
+  }
+
+}