Merge pull request #142 from ckeditor/feature/mini-inspector

Feature: Implemented the mini inspector (`MiniCKEditorInspector`) in a separate build. Closes #143.
ckeditor · Feb 3, 2022 · d81e841 · d81e841
2 parents 94501f2 + 6879770
commit d81e841
Show file tree

Hide file tree

Showing 12 changed files with 383 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -131,7 +131,7 @@ Start the webpack file watcher:
 yarn dev
 ```
 
-and open `http://path/to/ckeditor5-inspector/sample` in your web browser.
+and open `http://path/to/ckeditor5-inspector/sample/inspector.html` in your web browser.
 
 ### Building
 

diff --git a/sample/index.html → sample/inspector.html b/sample/index.html → sample/inspector.html
diff --git a/sample/miniinspector.html b/sample/miniinspector.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+	<head>
+			<meta charset="utf-8">
+			<title>Mini inspector sample</title>
+			<script src="../node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"></script>
+			<script src="../build/miniinspector.js"></script>
+	</head>
+	<body>
+		<div id="editor-content">
+			<h2>The three greatest things you learn from traveling</h2>
+			<p>Like <a href="https://ckeditor.com">all the <b>great things on earth</b> traveling teaches</a> us by example. Here are some <br>of the most precious lessons I’ve
+				learned over the years of traveling.</p>
+			<figure class="table">
+				<table>
+					<tbody>
+						<tr>
+							<td>a</td>
+							<td>b</td>
+						</tr>
+						<tr>
+							<td>d</td>
+							<td>e</td>
+						</tr>
+					</tbody>
+				</table>
+			</figure>
+		</div>
+
+		<div id="inspector-container"></div>
+
+		<script>
+			class DummyUploadAdapter {
+				constructor( loader ) {
+					this.loader = loader;
+				}
+
+				upload() {
+					return this.loader.file
+						.then( file => {
+							return {
+								default: 'umbrellas.jpg',
+								160: 'umbrellas.jpg',
+								500: 'umbrellas.jpg',
+							};
+						} );
+				}
+
+				abort() {
+				}
+			}
+
+			function UploadAdapter( editor ) {
+				editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
+					return new DummyUploadAdapter( loader );
+				};
+			}
+
+			function MarkerDemoPlugin( editor ) {
+				const model = editor.model;
+				const markerNames = [];
+
+				editor.conversion.for( 'editingDowncast' ).markerToHighlight( {
+					model: 'highlight',
+					view: data => {
+						const color = data.markerName.split( ':' )[ 1 ];
+
+						return {
+							classes: 'h-' + color,
+							priority: 1
+						};
+					}
+				} );
+
+				editor.conversion.for( 'dataDowncast' ).markerToHighlight( {
+					model: 'highlight',
+					view: data => {
+						const color = data.markerName.split( ':' )[ 1 ];
+
+						return {
+							classes: 'h-' + color,
+							priority: 1
+						};
+					}
+				} );
+
+				editor.on( 'ready', () => {
+					model.change( writer => {
+						const root = model.document.getRoot();
+
+						const nameA = 'highlight:yellow:123';
+						const rangeA = model.createRange( model.createPositionFromPath( root, [ 0, 10 ] ), model.createPositionFromPath( root, [ 0, 16 ] ) );
+
+						const nameB = 'highlight:blue:456';
+						const rangeB = model.createRange( model.createPositionFromPath( root, [ 0, 12 ] ), model.createPositionFromPath( root, [ 0, 22 ] ) );
+
+						markerNames.push( nameA, nameB );
+						writer.addMarker( nameA, { range: rangeA, usingOperation: false, affectsData: true } );
+						writer.addMarker( nameB, { range: rangeB, usingOperation: false, affectsData: true } );
+					} );
+				} );
+			}
+
+			DecoupledEditor
+				.create( document.querySelector( '#editor-content' ), {
+					extraPlugins: [ UploadAdapter, MarkerDemoPlugin ]
+				} )
+				.then( editor => {
+					window.firstEditor = editor;
+					document.body.insertBefore( editor.ui.view.toolbar.element, editor.ui.getEditableElement() );
+
+					MiniCKEditorInspector.attach( editor, document.querySelector( '#inspector-container' ) );
+				} )
+				.catch( error => {
+					console.error( error );
+				} );
+		</script>
+	</body>
+	<style>
+		body {
+			padding: 2em;
+		}
+
+		.ck.ck-editor__editable {
+			border: 1px solid rgba(0, 0, 0, 0.15);
+		}
+
+		.ck-content .h-yellow {
+			background: rgba(251, 255, 0, 0.534);
+		}
+
+		.ck-content .h-blue {
+			background: rgba(0, 197, 247, 0.568);
+		}
+
+		#inspector-container {
+			margin-top: 50px;
+		}
+	</style>
+</html>
diff --git a/src/ckeditorinspector.js b/src/ckeditorinspector.js
@@ -20,7 +20,7 @@ import { updateViewState } from './view/data/actions';
 import { updateCommandsState } from './commands/data/actions';
 import EditorListener from './data/utils';
 
-import InspectorUI from './ui';
+import CKEditorInspectorUI from './ckeditorinspectorui';
 import Logger from './logger';
 import {
 	normalizeArguments,
@@ -280,7 +280,7 @@ export default class CKEditorInspector {
 
 		ReactDOM.render(
 			<Provider store={CKEditorInspector._store}>
-				<InspectorUI />
+				<CKEditorInspectorUI />
 			</Provider>,
 			container
 		);

diff --git a/src/ui.css → src/ckeditorinspectorui.css b/src/ui.css → src/ckeditorinspectorui.css
diff --git a/src/ui.js → src/ckeditorinspectorui.js b/src/ui.js → src/ckeditorinspectorui.js
@@ -27,7 +27,7 @@ import CommandsPane from './commands/pane';
 import EditorQuickActions from './editorquickactions';
 import ArrowDownIcon from './assets/img/arrow-down.svg';
 
-import './ui.css';
+import './ckeditorinspectorui.css';
 
 const INSPECTOR_MIN_HEIGHT = '100';
 const INSPECTOR_COLLAPSED_HEIGHT = 30;
@@ -39,7 +39,7 @@ const INSPECTOR_STYLES = {
 	top: 'auto'
 };
 
-class InspectorUI extends Component {
+class CKEditorInspectorUI extends Component {
 	constructor( props ) {
 		super( props );
 
@@ -113,7 +113,7 @@ const mapStateToProps = ( { editors, currentEditorName, ui: { isCollapsed, heigh
 
 const mapDispatchToProps = { toggleIsCollapsed, setHeight, setEditors, setCurrentEditorName, setActiveTab };
 
-export default connect( mapStateToProps, mapDispatchToProps )( InspectorUI );
+export default connect( mapStateToProps, mapDispatchToProps )( CKEditorInspectorUI );
 
 export class DocsButton extends Component {
 	render() {

diff --git a/src/minickeditorinspector.js b/src/minickeditorinspector.js
@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window, CKEDITOR_INSPECTOR_VERSION */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import MiniInspectorUI from './minickeditorinspectorui';
+
+// From changelog -> webpack.
+window.CKEDITOR_MINI_INSPECTOR_VERSION = CKEDITOR_INSPECTOR_VERSION;
+
+export default class MiniCKEditorInspector {
+	/**
+	 * Attaches the mini inspector to an editor instance and renders it in the specified HTML element.
+	 *
+	 *		ClassicEditor
+	 *			.create( ... )
+	 *			.then( editor => {
+	 *				MiniCKEditorInspector.attach( editor, document.querySelector( '#inspector-render-element' ) );
+	 *			} )
+	 *			.catch( error => {
+	 *				console.error( error );
+	 *			} );
+	 *
+	 * @param {Editor} editor CKEditor 5 instance the mini inspector will attach to.
+	 * @param {Element} container HTML element in which the mini inspector will be rendered in.
+	 */
+	static attach( editor, container ) {
+		ReactDOM.render( <MiniInspectorUI editor={editor} />, container );
+	}
+}
diff --git a/src/minickeditorinspectorui.css b/src/minickeditorinspectorui.css
@@ -0,0 +1,47 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+.ck-inspector.ck-mini-inspector {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: stretch;
+	border-top: 0;
+
+	& > * {
+		height: auto;
+		background: white;
+
+		&:first-child::before {
+			content: "Model";
+		}
+
+		&:last-child::before {
+			content: "View";
+		}
+
+		&:first-child::before,
+		&:last-child::before {
+			position: relative;
+			left: -10px;
+			width: calc(100% + 20px);
+			background: #eee;
+			font-size: 18px;
+			font-weight: bold;
+			display: block;
+			padding: 6px 10px;
+			margin-bottom: 20px;
+		}
+	}
+
+	& .ck-inspector-tree {
+		padding: 0 10px 20px;
+		border: 1px solid #ccc;
+
+		&:last-child {
+			border-left: 0;
+		}
+	}
+}
diff --git a/src/minickeditorinspectorui.js b/src/minickeditorinspectorui.js
@@ -0,0 +1,90 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+import React, { Component } from 'react';
+
+import Tree from './components/tree/tree';
+import {
+	getEditorModelRanges,
+	getEditorModelMarkers,
+	getEditorModelTreeDefinition
+} from './model/data/utils';
+import {
+	getEditorViewRanges,
+	getEditorViewTreeDefinition
+} from './view/data/utils';
+
+import './ckeditorinspectorui.css';
+import './minickeditorinspectorui.css';
+
+export default class MiniCKEditorInspectorUI extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.state = {
+			...getTreeDefinitions( this.props.editor )
+		};
+	}
+
+	render() {
+		return <div className="ck-inspector ck-mini-inspector">
+			<Tree
+				definition={this.state.modelTreeDefinition}
+				textDirection="ltr"
+				onClick={() => {}}
+				showCompactText={false}
+				activeNode={null}
+			/>
+			<Tree
+				definition={this.state.viewTreeDefinition}
+				textDirection="ltr"
+				onClick={() => {}}
+				showCompactText="true"
+				showElementTypes={false}
+				activeNode={null}
+			/>
+		</div>;
+	}
+
+	componentDidMount() {
+		const updateTreeDefinitions = () => {
+			this.setState( {
+				...getTreeDefinitions( this.props.editor )
+			} );
+		};
+
+		this.props.editor.model.document.on( 'change', updateTreeDefinitions, {
+			priority: 'lowest'
+		} );
+
+		this.props.editor.editing.view.on( 'render', updateTreeDefinitions, {
+			priority: 'lowest'
+		} );
+	}
+}
+
+function getTreeDefinitions( editor ) {
+	const currentRootName = 'main';
+	const modelRanges = getEditorModelRanges( editor, currentRootName );
+	const modelMarkers = getEditorModelMarkers( editor, currentRootName );
+	const modelTreeDefinition = getEditorModelTreeDefinition( {
+		currentEditor: editor,
+		currentRootName,
+		ranges: modelRanges,
+		markers: modelMarkers
+	} );
+
+	const viewRanges = getEditorViewRanges( editor, currentRootName );
+	const viewTreeDefinition = getEditorViewTreeDefinition( {
+		currentEditor: editor,
+		currentRootName,
+		ranges: viewRanges
+	} );
+
+	return {
+		modelTreeDefinition,
+		viewTreeDefinition
+	};
+}