Ckeditor underline plugin

static/js/lib/ckeditor/plugins/Underline.ts

@@ -0,0 +1,9 @@
+import UnderlineEditing from './UnderlineEditing';
+import UnderlineUI from './UnderlineUI';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+export default class Underline extends Plugin {
+    static get requires() {
+        return [ UnderlineEditing, UnderlineUI ];
+    }
+}

static/js/lib/ckeditor/plugins/UnderlineCommand.ts

@@ -0,0 +1,64 @@
+import { editor } from '@ckeditor/ckeditor5-core';
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+export default class UnderlineCommand extends Command {
+    editor: any;
+    constructor(editor: editor.Editor) {
+      super(editor);
+      this.editor = editor;
+    }
+    refresh() {
+		const model = this.editor.model;
+		const doc = model.document;
+
+		this.value = this._getValueFromFirstAllowedNode();
+		this.isEnabled = model.schema.checkAttributeInSelection( doc.selection, 'underline' );
+	}
+
+    execute( options = { forceValue: undefined }  ) {
+		const model = this.editor.model;
+		const doc = model.document;
+		const selection = doc.selection;
+		const value = ( options.forceValue === undefined ) ? !this.value : options.forceValue;
+
+		model.change( (writer: { setSelectionAttribute: (arg0: any, arg1: boolean) => void; removeSelectionAttribute: (arg0: any) => void; setAttribute: (arg0: any, arg1: boolean, arg2: any) => void; removeAttribute: (arg0: any, arg1: any) => void; }) => {
+			if ( selection.isCollapsed ) {
+				if ( value ) {
+					writer.setSelectionAttribute( 'underline', true );
+				} else {
+					writer.removeSelectionAttribute( 'underline' );
+				}
+			} else {
+				const ranges = model.schema.getValidRanges( selection.getRanges(), 'underline' );
+
+				for ( const range of ranges ) {
+					if ( value ) {
+						writer.setAttribute( 'underline', value, range );
+					} else {
+						writer.removeAttribute( 'underline', range );
+					}
+				}
+			}
+		} );
+	}
+    _getValueFromFirstAllowedNode() {
+		const model = this.editor.model;
+		const schema = model.schema;
+		const selection = model.document.selection;
+
+		if ( selection.isCollapsed ) {
+			return selection.hasAttribute( 'underline' );
+		}
+
+		for ( const range of selection.getRanges() ) {
+			for ( const item of range.getItems() ) {
+				if ( schema.checkAttribute( item, 'underline' ) ) {
+					return item.hasAttribute( 'underline' );
+				}
+			}
+		}
+
+		return false;
+	}
+
+}

static/js/lib/ckeditor/plugins/UnderlineEditing.ts

@@ -0,0 +1,43 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { editor } from "@ckeditor/ckeditor5-core"
+import UnderlineCommand from './UnderlineCommand';
+
+export default class UnderlineEditing extends Plugin {
+    constructor(editor: editor.Editor) {
+      super(editor);
+    }
+
+    init() {
+      const editor = this.editor;
+      editor.model.schema.extend( '$text', { allowAttributes: 'underline' } );
+      editor.model.schema.setAttributeProperties( 'underline', {
+        isFormatting: true,
+        copyOnEnter: true
+      } );
+      editor.conversion.attributeToElement( {
+        model: 'underline',
+        view: 'u',
+        upcastAlso: [
+          'u',
+          (          viewElement: { getStyle: (arg0: string) => any; }) => {
+            const textDecoration = viewElement.getStyle( 'text-decoration' );
+            if ( !textDecoration ) {
+              return null;
+            }
+
+            if ( textDecoration.includes('underline') ) {
+              return {
+                name: true,
+                styles: [ 'text-decoration' ]
+              };
+            }
+          }
+        ]
+      } 
+      );
+
+      this.editor.commands.add('underline', new UnderlineCommand(this.editor));
+      editor.keystrokes.set( 'CTRL+U', 'underline' );
+
+    }
+  }

static/js/lib/ckeditor/plugins/UnderlineUI.ts

@@ -0,0 +1,27 @@
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+export default class UnderlineUI extends Plugin {
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        editor.ui.componentFactory.add( 'underline', (locale: any) => {
+            const command = editor.commands.get( 'underline' );
+            const buttonView = new ButtonView( locale );
+            buttonView.set( {
+                label: t( 'underline' ),
+                withText: true,
+                tooltip: true
+            } );
+
+            buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+            this.listenTo( buttonView, 'execute', () => {
+                editor.execute( 'underline' )
+                editor.editing.view.focus();
+            } );
+
+            return buttonView;
+        } );
+    }
+}