Browse Source

Simplified the icon rendering inside insert paragraph buttons.

Aleksander Nowodzinski 5 years ago
parent
commit
0164bbc276

+ 13 - 6
packages/ckeditor5-widget/src/widgettypearound/widgettypearound.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* global DOMParser */
+
 /**
  * @module widget/widgettypearound/widgettypearound
  */
@@ -10,7 +12,6 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
-import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 
 import { isWidget } from '../utils';
 import {
@@ -25,6 +26,7 @@ import returnIcon from '../../theme/icons/return-arrow.svg';
 import '../../theme/widgettypearound.css';
 
 const POSSIBLE_INSERTION_DIRECTIONS = [ 'before', 'after' ];
+let CACHED_RETURN_ARROW_ICON;
 
 /**
  * TODO
@@ -158,12 +160,17 @@ function injectUIIntoWidget( editingView, widgetViewElement ) {
 	} );
 }
 
+// FYI: Not using the IconView class because each instance would need to be destroyed to avoid memory leaks
+// and it's pretty hard to figure out when a view (widget) is gone for good so it's cheaper to use raw
+// <svg> here.
 function injectButtons( wrapperDomElement ) {
-	for ( const direction of POSSIBLE_INSERTION_DIRECTIONS ) {
-		const returnIconView = new IconView();
-		returnIconView.viewBox = '0 0 10 8';
-		returnIconView.content = returnIcon;
+	// Do the SVG parsing once and then clone the result <svg> DOM element for each new
+	// button. There could be dozens of them during editor's lifetime.
+	if ( !CACHED_RETURN_ARROW_ICON ) {
+		CACHED_RETURN_ARROW_ICON = new DOMParser().parseFromString( returnIcon, 'image/svg+xml' ).firstChild;
+	}
 
+	for ( const direction of POSSIBLE_INSERTION_DIRECTIONS ) {
 		const buttonTemplate = new Template( {
 			tag: 'div',
 			attributes: {
@@ -173,7 +180,7 @@ function injectButtons( wrapperDomElement ) {
 				]
 			},
 			children: [
-				returnIconView
+				wrapperDomElement.ownerDocument.importNode( CACHED_RETURN_ARROW_ICON, true )
 			]
 		} );
 

+ 1 - 5
packages/ckeditor5-widget/theme/icons/return-arrow.svg

@@ -1,5 +1 @@
-<svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg">
-	<polyline points="8.05541992 0.263427734 8.05541992 4.23461914 1.28417969 4.23461914" transform="translate(1,0)"></polyline>
-	<line x1="0" y1="4.21581031" x2="2" y2="2.17810059" transform="translate(1, 0)"></line>
-	<line x1="0" y1="6.21581031" x2="2" y2="4.17810059" transform="translate(2, 5.196955) scale(1, -1) translate(-1, -5.196955)"></line>
-</svg>
+<svg viewBox="0 0 10 8" xmlns="http://www.w3.org/2000/svg"><polyline points="8.05541992 0.263427734 8.05541992 4.23461914 1.28417969 4.23461914" transform="translate(1,0)"></polyline><line x1="0" y1="4.21581031" x2="2" y2="2.17810059" transform="translate(1, 0)"></line><line x1="0" y1="6.21581031" x2="2" y2="4.17810059" transform="translate(2, 5.196955) scale(1, -1) translate(-1, -5.196955)"></line></svg>

+ 3 - 3
packages/ckeditor5-widget/theme/widgettypearound.css

@@ -35,7 +35,7 @@
 		animation: fadein linear 300ms 1 normal forwards;
 		transition: opacity 100ms linear;
 
-		& .ck-icon {
+		& svg {
 			width: 10px;
 			height: 8px;
 			position: absolute;
@@ -88,7 +88,7 @@
 			/*
 			 * Animate active button's icon.
 			 */
-			& .ck-icon {
+			& svg {
 				& polyline {
 					animation: ck-widget-type-around-arrow-dash 2s linear;
 				}
@@ -160,7 +160,7 @@
 .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) {
 	background: var(--ck-color-widget-type-around-button-blurred-editable);
 
-	& .ck-icon * {
+	& svg * {
 		stroke: hsl(0,0%,60%);
 	}
 }