Merge pull request #146 from ckeditor/i/138

Feature: Made it possible to set editor data using the UI. Closes #138.

package.json

@@ -74,6 +74,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-modal": "^3.14.4",
     "react-redux": "^7.2.6",
     "react-rnd": "~10.2.4",
     "react-svg-loader": "^3.0.3",

src/ckeditorinspectorui.css

@@ -3,7 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
-.ck-inspector {
+.ck-inspector,
+.ck-inspector-portal {
 	--ck-inspector-color-white: #fff;
 	--ck-inspector-color-black: #000;
 	--ck-inspector-color-background: #F3F3F3;
@@ -15,7 +16,9 @@
 
 /* Reset first */
 .ck-inspector,
-.ck-inspector *:not(select) {
+.ck-inspector *:not(select),
+.ck-inspector-portal,
+.ck-inspector-portal *:not(select) {
 	box-sizing: border-box;
 	width: auto;
 	height: auto;

src/components/seteditordatabutton.css

@@ -0,0 +1,115 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-inspector-modal {
+	--ck-inspector-set-data-modal-overlay: rgba(0, 0, 0, 0.5);
+	--ck-inspector-set-data-modal-shadow: rgba(0,0,0,0.06);
+	--ck-inspector-set-data-modal-button-background: #eee;
+	--ck-inspector-set-data-modal-button-background-hover: #ddd;
+	--ck-inspector-set-data-modal-save-button-background: #1976d2;
+	--ck-inspector-set-data-modal-save-button-background-hover: #0b60b5;
+}
+
+/* Modal overlay */
+.ck-inspector-modal.ck-inspector-quick-actions__set-data-modal {
+	z-index: 999999;
+	position: fixed;
+	inset: 0px;
+	background-color: var(--ck-inspector-set-data-modal-overlay);
+
+	/* Modal content */
+	& .ck-inspector-quick-actions__set-data-modal__content {
+		position: absolute;
+		border: 1px solid var(--ck-inspector-color-border);
+		background: var(--ck-inspector-color-white);
+		overflow: auto;
+		border-radius: 2px;
+		outline: none;
+		box-shadow: 0 1px 1px var(--ck-inspector-set-data-modal-shadow),
+			0 2px 2px var(--ck-inspector-set-data-modal-shadow),
+			0 4px 4px var(--ck-inspector-set-data-modal-shadow),
+			0 8px 8px var(--ck-inspector-set-data-modal-shadow),
+			0 16px 16px var(--ck-inspector-set-data-modal-shadow);
+
+		max-height: calc(100vh - 160px);
+		max-width: calc(100vw - 160px);
+		width: 100%;
+		height: 100%;
+
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		/* Modal title */
+		& h2 {
+			font-size: 14px;
+			font-weight: bold;
+			margin: 0;
+			padding: 12px 20px;
+			background: var(--ck-inspector-color-background);
+			border-bottom: 1px solid var(--ck-inspector-color-border);
+		}
+
+		& textarea {
+			flex-grow: 1;
+			margin: 20px;
+			border: 1px solid var(--ck-inspector-color-border);
+			border-radius: 2px;
+			resize: none;
+			padding: 10px;
+			font-family: monospace;
+			font-size: 14px;
+		}
+
+		& button {
+			padding: 10px 20px;
+			border-radius: 2px;
+			font-size: 14px;
+			white-space: nowrap;
+			/* background: var(--ck-inspector-set-data-modal-button-background); */
+			border: 1px solid var(--ck-inspector-color-border);
+
+			&:hover {
+				background: var(--ck-inspector-set-data-modal-button-background-hover);
+			}
+		}
+
+		& .ck-inspector-quick-actions__set-data-modal__buttons {
+			margin: 0 20px 20px;
+			display: flex;
+			justify-content: center;
+
+			& button {
+				& + button {
+					margin-left: 20px;
+				}
+
+				&:first-child {
+					margin-right: auto;
+				}
+
+				&:not(:first-child) {
+					flex-basis: 20%;
+				}
+
+				/* Save button */
+				&:last-child {
+					background: var(--ck-inspector-set-data-modal-save-button-background);
+					border-color: var(--ck-inspector-set-data-modal-save-button-background);
+					color: #fff;
+					font-weight: bold;
+
+					&:hover {
+						background: var(--ck-inspector-set-data-modal-save-button-background-hover);
+					}
+				}
+			}
+		}
+	}
+}

src/components/seteditordatabutton.js

@@ -0,0 +1,132 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document */
+
+import React, { Component } from 'react';
+import Modal from 'react-modal';
+
+import Button from './button';
+import LoadDataIcon from '../assets/img/load-data.svg';
+
+import './seteditordatabutton.css';
+
+export default class SetEditorDataButton extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			isModalOpen: false,
+			editorDataValue: ''
+		};
+
+		this.textarea = React.createRef();
+	}
+
+	render() {
+		return [
+			<Button
+				text="Set editor data"
+				icon={<LoadDataIcon />}
+				isEnabled={!!this.props.editor}
+				onClick={() => this.setState( {
+					isModalOpen: true
+				} )}
+				key="button"
+			/>,
+			<Modal
+				isOpen={this.state.isModalOpen}
+				appElement={document.querySelector( '.ck-inspector-wrapper' )}
+				onAfterOpen={
+					this._handleModalAfterOpen.bind( this )
+				}
+				overlayClassName='ck-inspector-modal ck-inspector-quick-actions__set-data-modal'
+				className='ck-inspector-quick-actions__set-data-modal__content'
+				onRequestClose={
+					this._closeModal.bind( this )
+				}
+				portalClassName='ck-inspector-portal'
+				shouldCloseOnEsc={true}
+				shouldCloseOnOverlayClick={true}
+				key="modal"
+			>
+				<h2>Set editor data</h2>
+				<textarea
+					autoFocus
+					ref={ this.textarea }
+					value={ this.state.editorDataValue }
+					placeholder="Paste HTML here..."
+					onChange={
+						this._handlDataChange.bind( this )
+					}
+					onKeyPress={ event => {
+						if ( event.key == 'Enter' && event.shiftKey ) {
+							this._setEditorDataAndCloseModal();
+						}
+					}}
+				>
+				</textarea>
+				<div className="ck-inspector-quick-actions__set-data-modal__buttons">
+					<button
+						type="button"
+						onClick={() => {
+							this.setState( {
+								editorDataValue: this.props.editor.getData()
+							} );
+
+							this.textarea.current.focus();
+						}}
+					>
+						Load data
+					</button>
+					<button
+						type="button"
+						title="Cancel (Esc)"
+						onClick={
+							this._closeModal.bind( this )
+						}
+					>
+						Cancel
+					</button>
+					<button
+						type="button"
+						title="Set editor data (⇧+Enter)"
+						onClick={
+							this._setEditorDataAndCloseModal.bind( this )
+						}
+					>
+						Set data
+					</button>
+				</div>
+			</Modal>
+		];
+	}
+
+	_setEditorDataAndCloseModal() {
+		this.props.editor.setData( this.state.editorDataValue );
+
+		this._closeModal();
+	}
+
+	_closeModal() {
+		this.setState( {
+			isModalOpen: false
+		} );
+	}
+
+	_handlDataChange( evt ) {
+		this.setState( {
+			editorDataValue: evt.target.value
+		} );
+	}
+
+	_handleModalAfterOpen() {
+		this.setState( {
+			editorDataValue: this.props.editor.getData()
+		} );
+
+		this.textarea.current.select();
+	}
+}

src/editorquickactions.js

@@ -9,6 +9,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import copy from 'copy-to-clipboard';
 
+import SetEditorDataButton from './components/seteditordatabutton';
 import Button from './components/button';
 
 import SourceIcon from './assets/img/source.svg';
@@ -43,6 +44,7 @@ class EditorQuickActions extends Component {
 				onClick={() => console.log( this.props.editor )}
 			/>
 			{ this._getLogButton() }
+			<SetEditorDataButton editor={this.props.editor} />
 			<Button
 				text="Toggle read only"
 				icon={<ReadOnlyIcon />}