Implement ExternalLink for CKEditor

src/Sulu/Bundle/AdminBundle/Resources/js/components/CKEditor5/CKEditor5.js

@@ -15,6 +15,7 @@ import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline';
 import TablePlugin from '@ckeditor/ckeditor5-table/src/table';
 import TableToolbarPlugin from '@ckeditor/ckeditor5-table/src/tabletoolbar';
 import {translate} from '../../utils/Translator';
+import ExternalLinkPlugin from './plugins/ExternalLinkPlugin';
 import './ckeditor5.scss';
 
 type Props = {|
@@ -57,9 +58,9 @@ export default class CKEditor5 extends React.Component<Props> {
 
             this.editorInstance.isReadOnly = disabled;
             if (disabled) {
-                this.editorInstance.element.classList.add('disabled');
+                this.editorInstance.ui.element.classList.add('disabled');
             } else {
-                this.editorInstance.element.classList.remove('disabled');
+                this.editorInstance.ui.element.classList.remove('disabled');
             }
 
             const editorData = this.getEditorData();
@@ -80,6 +81,7 @@ export default class CKEditor5 extends React.Component<Props> {
                     EssentialsPlugin,
                     HeadingPlugin,
                     ItalicPlugin,
+                    ExternalLinkPlugin,
                     ListPlugin,
                     ParagraphPlugin,
                     StrikethroughPlugin,
@@ -89,20 +91,17 @@ export default class CKEditor5 extends React.Component<Props> {
                 ],
                 toolbar: [
                     'heading',
-                    '|',
                     'bold',
                     'italic',
                     'underline',
                     'strikethrough',
-                    '|',
                     'alignment:left',
                     'alignment:center',
                     'alignment:right',
                     'alignment:justify',
-                    '|',
                     'bulletedlist',
                     'numberedlist',
-                    '|',
+                    'externalLink',
                     'insertTable',
                 ],
                 heading: {
@@ -177,7 +176,7 @@ export default class CKEditor5 extends React.Component<Props> {
 
                 this.editorInstance.isReadOnly = disabled;
                 if (disabled) {
-                    this.editorInstance.element.classList.add('disabled');
+                    this.editorInstance.ui.element.classList.add('disabled');
                 }
 
                 if (onBlur) {

src/Sulu/Bundle/AdminBundle/Resources/js/components/CKEditor5/ckeditor5.scss

@@ -11,6 +11,7 @@ $textEditorAccentColor: $shakespeare;
 $textEditorLightAccentColor: #e5f4f7;
 $textEditorWhiteHover: $mercury;
 $textEditorPanelBackground: $white;
+$textEditorLinkColor: $blue;
 
 :global {
     :root {
@@ -104,4 +105,17 @@ $textEditorPanelBackground: $white;
             pointer-events: none;
         }
     }
+
+    .ck {
+        a {
+            color: $textEditorLinkColor !important;
+            text-decoration: underline !important;
+        }
+    }
+
+    .ck-preview-button {
+        .ck-button__label {
+            cursor: pointer !important;
+        }
+    }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/CKEditor5/plugins/ExternalLinkPlugin/ExternalLinkBalloonView.js

@@ -0,0 +1,53 @@
+// @flow
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import View from '@ckeditor/ckeditor5-ui/src/view';
+// $FlowFixMe
+import editIcon from '!!raw-loader!./edit.svg'; // eslint-disable-line import/no-webpack-loader-syntax
+// $FlowFixMe
+import unlinkIcon from '!!raw-loader!./unlink.svg'; // eslint-disable-line import/no-webpack-loader-syntax
+
+export default class ExternalLinkBalloonView extends View {
+    constructor(locale: string) {
+        super(locale);
+
+        const previewButtonView = new ButtonView(this.locale);
+
+        previewButtonView.set({
+            class: 'ck-preview-button',
+            withText: true,
+        });
+
+        previewButtonView.extendTemplate({
+            attributes: {
+                href: this.bindTemplate.to('href'),
+                target: '_blank',
+            },
+        });
+
+        previewButtonView.bind('label').to(this, 'href');
+        previewButtonView.template.tag = 'a';
+        previewButtonView.template.eventListeners = {};
+
+        const editButtonView = new ButtonView(this.locale);
+        editButtonView.set({
+            icon: editIcon,
+        });
+
+        const unlinkButtonView = new ButtonView(this.locale);
+        unlinkButtonView.set({
+            icon: unlinkIcon,
+        });
+
+        editButtonView.delegate('execute').to(this, 'externalLink');
+        unlinkButtonView.delegate('execute').to(this, 'externalUnlink');
+
+        this.setTemplate({
+            tag: 'div',
+            children: [
+                previewButtonView,
+                editButtonView,
+                unlinkButtonView,
+            ],
+        });
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/CKEditor5/plugins/ExternalLinkPlugin/ExternalLinkCommand.js

@@ -0,0 +1,72 @@
+// @flow
+import Command from '@ckeditor/ckeditor5-core/src/command';
+import CKEditor5 from '../../CKEditor5';
+import {LINK_HREF_ATTRIBUTE, LINK_TARGET_ATTRIBUTE} from './constants';
+import type {ExternalLinkEventInfo} from './types';
+
+function hasExternalLinkAttribute(node: ?Object) {
+    if (!node || !node.hasAttribute) {
+        return false;
+    }
+
+    return node.hasAttribute(LINK_HREF_ATTRIBUTE) || node.hasAttribute(LINK_TARGET_ATTRIBUTE);
+}
+
+export default class ExternalLinkCommand extends Command {
+    isEnabled: boolean = true;
+
+    constructor(editor: CKEditor5) {
+        super(editor);
+
+        this.set('buttonEnabled', true);
+    }
+
+    execute(eventInfo: ExternalLinkEventInfo) {
+        this.editor.model.change((writer) => {
+            const externalLinkAttributes = {
+                [LINK_HREF_ATTRIBUTE]: eventInfo.url,
+                [LINK_TARGET_ATTRIBUTE]: eventInfo.target,
+            };
+
+            const {selection} = eventInfo;
+            const firstPosition = selection ? selection.getFirstPosition() : undefined;
+            const textNode = firstPosition ? firstPosition.textNode || firstPosition.nodeBefore : undefined;
+
+            if (selection && !selection.isCollapsed) {
+                for (const range of selection.getRanges()) {
+                    writer.setAttributes(externalLinkAttributes, range);
+                }
+            } else if (hasExternalLinkAttribute(textNode)) {
+                writer.setAttributes(externalLinkAttributes, textNode);
+            } else {
+                const externalLink = writer.createText(eventInfo.url, externalLinkAttributes);
+                this.editor.model.insertContent(externalLink);
+            }
+        });
+    }
+
+    refresh() {
+        const selection = this.editor.model.document.selection;
+        const firstPosition = selection.getFirstPosition();
+
+        if (firstPosition && firstPosition.textNode && hasExternalLinkAttribute(firstPosition.textNode)) {
+            this.buttonEnabled = false;
+            return;
+        }
+
+        const range = selection.getFirstRange();
+
+        for (const item of range.getItems()) {
+            const textNode = item.textNode;
+
+            if (!textNode || !hasExternalLinkAttribute(textNode)) {
+                continue;
+            }
+
+            this.buttonEnabled = false;
+            return;
+        }
+
+        this.buttonEnabled = true;
+    }
+}

src/Sulu/Bundle/AdminBundle/Resources/js/components/CKEditor5/plugins/ExternalLinkPlugin/ExternalLinkOverlay.js

@@ -0,0 +1,62 @@
+// @flow
+import React from 'react';
+import {observer} from 'mobx-react';
+import Dialog from '../../../Dialog';
+import Form from '../../../Form';
+import SingleSelect from '../../../SingleSelect';
+import Url from '../../../Url';
+import {translate} from '../../../../utils/Translator';
+
+type Props = {|
+    onCancel: () => void,
+    onConfirm: () => void,
+    onTargetChange: (target: string) => void,
+    onUrlChange: (url: ?string) => void,
+    open: boolean,
+    target: ?string,
+    url: ?string,
+|};
+
+@observer
+export default class ExternalLinkOverlay extends React.Component<Props> {
+    constructor(props: Props) {
+        super(props);
+    }
+
+    handleConfirm = () => {
+        const {onConfirm} = this.props;
+
+        onConfirm();
+    };
+
+    render() {
+        const {onCancel, onTargetChange, onUrlChange, open, target, url} = this.props;
+
+        return (
+            <Dialog
+                cancelText={translate('sulu_admin.cancel')}
+                confirmDisabled={!url}
+                confirmText={translate('sulu_admin.confirm')}
+                onCancel={onCancel}
+                onConfirm={this.handleConfirm}
+                open={open}
+                title="Link"
+            >
+                <Form>
+                    <Form.Field label="Link target" required={true}>
+                        <SingleSelect onChange={onTargetChange} value={target}>
+                            <SingleSelect.Option value="_blank">_blank</SingleSelect.Option>
+                            <SingleSelect.Option value="_self">_self</SingleSelect.Option>
+                            <SingleSelect.Option value="_parent">_parent</SingleSelect.Option>
+                            <SingleSelect.Option value="_top">_top</SingleSelect.Option>
+                        </SingleSelect>
+                    </Form.Field>
+
+                    <Form.Field label="Link URL" required={true}>
+                        <Url defaultProtocol="https://" onChange={onUrlChange} valid={true} value={url} />
+                    </Form.Field>
+                </Form>
+            </Dialog>
+        );
+    }
+}