Browse Source

Temp. [skip ci]

Kamil Piechaczek 5 năm trước cách đây
mục cha
commit
6fd46caadf

+ 14 - 4
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -15,7 +15,8 @@ import { toWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 import HtmlEmbedInsertCommand from './htmlembedinsertcommand';
 import HtmlEmbedUpdateCommand from './htmlembedupdatecommand';
 
-import htmlEmbedModeIcon from '../theme/icons/htmlembedmode.svg';
+import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
+import vision from '@ckeditor/ckeditor5-core/theme/icons/low-vision.svg';
 
 import '../theme/htmlembed.css';
 
@@ -140,7 +141,7 @@ export default class HtmlEmbedEditing extends Plugin {
 				const textareaAttributes = {
 					placeholder,
 					disabled: true,
-					class: 'raw-html__source'
+					class: 'ck ck-input ck-input-text raw-html__source'
 				};
 
 				// The editing raw HTML field.
@@ -157,11 +158,17 @@ export default class HtmlEmbedEditing extends Plugin {
 					return root;
 				} );
 
+				const buttonAttributes = {
+					class: 'ck ck-button ck-on raw-html__switch-mode'
+				};
+
 				// The switch button between preview and editing HTML.
-				const toggleButton = writer.createUIElement( 'div', { class: 'raw-html__switch-mode' }, function( domDocument ) {
+				const toggleButton = writer.createUIElement( 'button', buttonAttributes, function( domDocument ) {
 					const root = this.toDomElement( domDocument );
 
-					root.innerHTML = htmlEmbedModeIcon;
+					root.innerHTML = pencilIcon;
+					root.firstChild.classList.add( 'ck', 'ck-icon', 'ck-button__icon' );
+
 					writer.setCustomProperty( 'domElement', root, toggleButton );
 
 					root.addEventListener( 'click', evt => {
@@ -176,6 +183,9 @@ export default class HtmlEmbedEditing extends Plugin {
 
 							const textarea = sourceElement.getCustomProperty( 'domElement' );
 							textarea.disabled = !textarea.disabled;
+
+							root.innerHTML = textarea.disabled ? pencilIcon : vision;
+							root.firstChild.classList.add( 'ck', 'ck-icon', 'ck-button__icon' );
 						} );
 
 						evt.preventDefault();

+ 57 - 15
packages/ckeditor5-html-embed/tests/htmlembedediting.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global console, document, HTMLTextAreaElement, HTMLDivElement, Event */
+/* global console, document, HTMLTextAreaElement, HTMLDivElement, HTMLButtonElement, Event */
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import HtmlEmbedEditing from '../src/htmlembedediting';
@@ -13,7 +13,7 @@ import HtmlEmbedInsertCommand from '../src/htmlembedinsertcommand';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { isWidget } from '@ckeditor/ckeditor5-widget/src/utils';
 
-describe( 'HtmlEmbedEditing', () => {
+describe.only( 'HtmlEmbedEditing', () => {
 	let element, editor, model, view, viewDocument;
 
 	testUtils.createSinonSandbox();
@@ -261,7 +261,7 @@ describe( 'HtmlEmbedEditing', () => {
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
 
 				expect( toggleIconElement.is( 'uiElement' ) ).to.equal( true );
-				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLDivElement );
+				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLButtonElement );
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
 
@@ -328,12 +328,18 @@ describe( 'HtmlEmbedEditing', () => {
 				const viewHtmlContainer = widget.getChild( 0 );
 
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				const toggleButton = toggleIconElement.getCustomProperty( 'domElement' );
+				const toggleIconBeforeClick = toggleButton.innerHTML;
+
+				toggleButton.click();
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
 
 				expect( sourceElement.is( 'uiElement' ) ).to.equal( true );
 				expect( sourceElement.getCustomProperty( 'domElement' ).disabled ).to.equal( false );
+
+				// Check whether the icon has been updated.
+				expect( toggleButton.innerHTML ).to.not.equal( toggleIconBeforeClick );
 			} );
 
 			it( 'should disable the source element after clicking the toggle icon when edit source mode is enabled', () => {
@@ -343,14 +349,27 @@ describe( 'HtmlEmbedEditing', () => {
 				const viewHtmlContainer = widget.getChild( 0 );
 
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
+				const toggleButton = toggleIconElement.getCustomProperty( 'domElement' );
+
+				// The icon before switching mode.
+				const toggleIconBeforeClick = toggleButton.innerHTML;
+
 				// Switch to edit source mode.
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				toggleButton.click();
+
+				// The icon for edit source mode.
+				const toggleIconAfterFirstClick = toggleButton.innerHTML;
+
 				// Switch to preview mode.
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				toggleButton.click();
 
-				const sourceElement = viewHtmlContainer.getChild( 1 );
+				expect( viewHtmlContainer.getChild( 1 ).getCustomProperty( 'domElement' ).disabled ).to.equal( true );
+
+				// The first click: the icon has been changed.
+				expect( toggleButton.innerHTML ).to.equal( toggleIconBeforeClick );
 
-				expect( sourceElement.getCustomProperty( 'domElement' ).disabled ).to.equal( true );
+				// The second click: the icon has been restored.
+				expect( toggleButton.innerHTML ).to.not.equal( toggleIconAfterFirstClick );
 			} );
 		} );
 
@@ -420,7 +439,7 @@ describe( 'HtmlEmbedEditing', () => {
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
 
 				expect( toggleIconElement.is( 'uiElement' ) ).to.equal( true );
-				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLDivElement );
+				expect( toggleIconElement.getCustomProperty( 'domElement' ) ).to.be.an.instanceOf( HTMLButtonElement );
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
 
@@ -521,12 +540,22 @@ describe( 'HtmlEmbedEditing', () => {
 				const viewHtmlContainer = widget.getChild( 0 );
 
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				const toggleButton = toggleIconElement.getCustomProperty( 'domElement' );
 
-				expect( widget.hasClass( 'raw-html--display-preview' ) ).to.equal( false );
+				const toggleIconBeforeClick = toggleButton.innerHTML;
+
+				toggleButton.click();
 
 				const sourceElement = viewHtmlContainer.getChild( 1 );
+
+				expect( sourceElement.is( 'uiElement' ) ).to.equal( true );
 				expect( sourceElement.getCustomProperty( 'domElement' ).disabled ).to.equal( false );
+
+				expect( widget.hasClass( 'raw-html--display-preview' ) ).to.equal( false );
+
+				// Check whether the icon has been updated.
+				expect( toggleButton.innerHTML ).to.not.equal( toggleIconBeforeClick );
+
 			} );
 
 			it( 'should display preview element after clicking the toggle icon when displaying edit source mode', () => {
@@ -536,15 +565,28 @@ describe( 'HtmlEmbedEditing', () => {
 				const viewHtmlContainer = widget.getChild( 0 );
 
 				const toggleIconElement = viewHtmlContainer.getChild( 0 );
+				const toggleButton = toggleIconElement.getCustomProperty( 'domElement' );
+
+				// The icon before switching mode.
+				const toggleIconBeforeClick = toggleButton.innerHTML;
+
 				// Switch to edit source mode.
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				toggleButton.click();
+
+				// The icon for edit source mode.
+				const toggleIconAfterFirstClick = toggleButton.innerHTML;
+
 				// Switch to preview mode.
-				toggleIconElement.getCustomProperty( 'domElement' ).click();
+				toggleButton.click();
 
 				expect( widget.hasClass( 'raw-html--display-preview' ) ).to.equal( true );
+				expect( viewHtmlContainer.getChild( 1 ).getCustomProperty( 'domElement' ).disabled ).to.equal( true );
 
-				const sourceElement = viewHtmlContainer.getChild( 1 );
-				expect( sourceElement.getCustomProperty( 'domElement' ).disabled ).to.equal( true );
+				// The first click: the icon has been changed.
+				expect( toggleButton.innerHTML ).to.equal( toggleIconBeforeClick );
+
+				// The second click: the icon has been restored.
+				expect( toggleButton.innerHTML ).to.not.equal( toggleIconAfterFirstClick );
 			} );
 		} );
 	} );

+ 0 - 6
packages/ckeditor5-html-embed/theme/icons/htmlembedmode.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- The icon is used a temporary placeholder. Thanks to https://www.freepik.com/free-icon/eye_775336.htm. -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-     viewBox="0 0 456.795 456.795" style="enable-background:new 0 0 456.795 456.795;" xml:space="preserve"> <g> <g> <path
-        d="M448.947,218.475c-0.922-1.168-23.055-28.933-61-56.81c-50.705-37.253-105.877-56.944-159.551-56.944 c-53.672,0-108.844,19.691-159.551,56.944c-37.944,27.876-60.077,55.642-61,56.81L0,228.397l7.846,9.923 c0.923,1.168,23.056,28.934,61,56.811c50.707,37.252,105.879,56.943,159.551,56.943c53.673,0,108.845-19.691,159.55-56.943 c37.945-27.877,60.078-55.643,61-56.811l7.848-9.923L448.947,218.475z M228.396,315.039c-47.774,0-86.642-38.867-86.642-86.642 c0-7.485,0.954-14.751,2.747-21.684l-19.781-3.329c-1.938,8.025-2.966,16.401-2.966,25.013c0,30.86,13.182,58.696,34.204,78.187 c-27.061-9.996-50.072-24.023-67.439-36.709c-21.516-15.715-37.641-31.609-46.834-41.478c9.197-9.872,25.32-25.764,46.834-41.478 c17.367-12.686,40.379-26.713,67.439-36.71l13.27,14.958c15.498-14.512,36.312-23.412,59.168-23.412 c47.774,0,86.641,38.867,86.641,86.642C315.037,276.172,276.17,315.039,228.396,315.039z M368.273,269.875 c-17.369,12.686-40.379,26.713-67.439,36.709c21.021-19.49,34.203-47.326,34.203-78.188s-13.182-58.697-34.203-78.188 c27.061,9.997,50.07,24.024,67.439,36.71c21.516,15.715,37.641,31.609,46.834,41.477 C405.91,238.269,389.787,254.162,368.273,269.875z"/>
-    <path d="M173.261,211.555c-1.626,5.329-2.507,10.982-2.507,16.843c0,31.834,25.807,57.642,57.642,57.642 c31.834,0,57.641-25.807,57.641-57.642s-25.807-57.642-57.641-57.642c-15.506,0-29.571,6.134-39.932,16.094l28.432,32.048 L173.261,211.555z"/> </g> </g></svg>

+ 13 - 10
packages/ckeditor5-theme-lark/theme/ckeditor5-html-embed/htmlembed.css

@@ -7,21 +7,23 @@
 	/* The feature container. */
 	& .raw-html {
 		position: relative;
+		padding: var(--ck-spacing-standard);
 
 		/* The switch mode button. */
 		& .raw-html__switch-mode {
 			position: absolute;
-			top: 0;
-			right: 0;
-			width: 5em;
-			height: 5em;
-			cursor: pointer;
+			top: var(--ck-spacing-standard);
+			right: var(--ck-spacing-standard);
+
+			& svg {
+				fill: currentColor;
+			}
 		}
 
 		/* The edit source element. */
 		& .raw-html__source {
-			width: 30em;
-			height: 5em;
+			width: calc(100% - 37px - 3 * var(--ck-spacing-standard));
+			height: 10em;
 			resize: none;
 		}
 	}
@@ -30,13 +32,14 @@
 	& .raw-html--preview-enabled {
 		/* The preview data container. */
 		& .raw-html__preview {
-			min-height: 5em;
-			min-width: 30em;
-			width: calc(100% - 5em);
+			width: calc(100% - 37px - var(--ck-spacing-standard));
+			text-align: center;
 		}
 
 		/* Mode: preview the HTML. */
 		&.raw-html--display-preview {
+			background: #f0f0f0;
+
 			& .raw-html__source {
 				display: none;
 			}