Kaynağa Gözat

Fix: Set inline toolbar's max-width to be the same as editable's width and make it groupable

panr 5 yıl önce
ebeveyn
işleme
0999668c36

+ 7 - 0
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -11,6 +11,7 @@ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 
 /**
  * The inline editor UI class.
@@ -139,6 +140,12 @@ export default class InlineEditorUI extends EditorUI {
 					target: editableElement,
 					positions: view.panelPositions
 				} );
+
+				// Set toolbar's max-width only once.
+				if ( !toolbar.element.style.maxWidth ) {
+					const editableRect = new Rect( editableElement );
+					toolbar.element.style.maxWidth = `${ editableRect.width }px`;
+				}
 			}
 		} );
 

+ 1 - 1
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -35,7 +35,7 @@ export default class InlineEditorUIView extends EditorUIView {
 		 * @readonly
 		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
-		this.toolbar = new ToolbarView( locale );
+		this.toolbar = new ToolbarView( locale, { shouldGroupWhenFull: true } );
 
 		/**
 		 * The offset from the top edge of the web browser's viewport which makes the