ソースを参照

Fix: The toolbar should be able to get rounder coorners no matter the location in DOM.

Aleksander Nowodzinski 7 年 前
コミット
7b71235b35

+ 1 - 1
packages/ckeditor5-editor-decoupled/docs/framework/guides/document-editor.md

@@ -61,7 +61,7 @@ The code you have just created will run the editor but still, the user interface
 The following structure has two containers that correspond to the configuration you have just used. The editor will inject the toolbar and editable into respective containers as it starts.
 
 ```html
-<div class="document-editor ck-rounded-corners">
+<div class="document-editor">
 	<div class="document-editor__toolbar"></div>
 	<div class="document-editor__editable-container">
 		<div class="document-editor__editable">

+ 5 - 1
packages/ckeditor5-editor-decoupled/src/decouplededitoruiview.js

@@ -50,9 +50,13 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		this.editable = new InlineEditableUIView( locale, editableElement );
 
 		// This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
+		// Also because of the above, make sure the toolbar supports rounded corners.
 		Template.extend( this.toolbar.template, {
 			attributes: {
-				class: 'ck-reset_all'
+				class: [
+					'ck-reset_all',
+					'ck-rounded-corners'
+				]
 			}
 		} );
 

+ 2 - 1
packages/ckeditor5-editor-decoupled/tests/decouplededitoruiview.js

@@ -43,8 +43,9 @@ describe( 'DecoupledEditorUIView', () => {
 				expect( view.toolbar.element.parentElement ).to.be.null;
 			} );
 
-			it( 'gets the .ck-reset_all class', () => {
+			it( 'gets the CSS classes', () => {
 				expect( view.toolbar.element.classList.contains( 'ck-reset_all' ) ).to.be.true;
+				expect( view.toolbar.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			} );
 		} );