@@ -289,10 +289,23 @@ export default class LinkFormView extends View {
if ( this.customAttributes.length ) {
const additionalButtonsView = new View();
additionalButtonsView.setTemplate( {
- tag: 'div',
- children: [ ...this.customAttributesView ],
+ tag: 'ul',
+ children: this.customAttributesView.map( switchButton => ( {
+ tag: 'li',
+ children: [ switchButton ],
+ attributes: {
+ class: [
+ 'ck',
+ 'ck-list__item'
+ ]
+ }
+ } ) ),
attributes: {
- class: 'ck-link-form_additional-buttons'
+ 'ck-reset',
+ 'ck-list'
}
} );
children.add( additionalButtonsView );
@@ -13,6 +13,9 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+// Just to have nicely styles switchbutton;
+import '@ckeditor/ckeditor5-theme-lark/theme/ckeditor5-ui/components/list/list.css';
+
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Link, Typing, Paragraph, Clipboard, Undo, Enter ],
@@ -20,14 +20,12 @@
/* Buttons like `open in new window` with switch toggler.
Added div is a temporary solution to make stronger specificity than `.ck.ck-link-form > :not(:first-child)` in theme-lark. */
- & div.ck-link-form_additional-buttons {
- display: flex;
- flex-wrap: wrap;
+ & ul.ck-list {
margin-left: 0;
width: 100%;
- & .ck-link-form_additional-buttons .ck-button {
+ & .ck-list .ck-switchbutton {
margin-top: var(--ck-spacing-standard);