Improve focus tracking in editable element

ckeditor · Aug 13, 2024 · 83966bb · 83966bb
1 parent 09e2684
commit 83966bb
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 214 deletions.
diff --git a/packages/ckeditor5-editor-multi-root/package.json b/packages/ckeditor5-editor-multi-root/package.json
@@ -22,7 +22,6 @@
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "43.0.0",
     "@ckeditor/ckeditor5-dev-utils": "^42.0.0",
-    "@ckeditor/ckeditor5-essentials": "43.0.0",
     "@ckeditor/ckeditor5-enter": "43.0.0",
     "@ckeditor/ckeditor5-heading": "43.0.0",
     "@ckeditor/ckeditor5-paragraph": "43.0.0",
@@ -32,6 +31,10 @@
     "@ckeditor/ckeditor5-undo": "43.0.0",
     "@ckeditor/ckeditor5-clipboard": "43.0.0",
     "@ckeditor/ckeditor5-watchdog": "43.0.0",
+    "@ckeditor/ckeditor5-image": "43.0.0",
+    "@ckeditor/ckeditor5-link": "43.0.0",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "43.0.0",
+    "@ckeditor/ckeditor5-ckfinder": "43.0.0",
     "typescript": "5.0.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"

diff --git a/packages/ckeditor5-editor-multi-root/tests/manual/multirooteditor.html b/packages/ckeditor5-editor-multi-root/tests/manual/multirooteditor.html
@@ -1,3 +1,9 @@
+<head>
+	<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
+</head>
+
+<script src="https://ckeditor.com/apps/ckfinder/3.5.0/ckfinder.js"></script>
+
 <p>
 	<button id="destroyEditor">Destroy editor</button>
 	<button id="initEditor">Init editor</button>
@@ -12,7 +18,19 @@ <h2>The toolbar</h2>
 <h2>The editable</h2>
 <div class="editable-container">
 	<div id="editor-intro"><p><strong>Exciting</strong> intro text to an article.</p></div>
-	<div id="editor-content"><h2>Exciting news!</h2><p>Lorem ipsum dolor sit amet.</p></div>
+	<div id="editor-content">
+		<table>
+			<tr>
+				<td>First cell</td>
+				<td>Second cell</td>
+			</tr>
+		</table>
+
+		<br />
+		<br />
+
+		<p>Hello World</p>
+	</div>
 	<div id="editor-outro"><p>Closing text.</p></div>
 </div>
 

diff --git a/packages/ckeditor5-editor-multi-root/tests/manual/multirooteditor.js b/packages/ckeditor5-editor-multi-root/tests/manual/multirooteditor.js
@@ -10,7 +10,13 @@ import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
-import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
+import Image from '@ckeditor/ckeditor5-image/src/image.js';
+import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage.js';
+import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert.js';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset.js';
+import CKFinderUploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
 
 const editorData = {
 	intro: document.querySelector( '#editor-intro' ),
@@ -23,8 +29,26 @@ let editor;
 function initEditor() {
 	MultiRootEditor
 		.create( editorData, {
-			plugins: [ Essentials, Paragraph, Heading, Bold, Italic ],
-			toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ]
+			plugins: [
+				Paragraph, Heading, Bold, Italic,
+				Image, ImageInsert, AutoImage, LinkImage,
+				ArticlePluginSet, CKFinderUploadAdapter, CKFinder
+			],
+			toolbar: [
+				'heading', '|', 'bold', 'italic', 'undo', 'redo', '|',
+				'insertImage', 'insertTable', 'blockQuote'
+			],
+			image: {
+				toolbar: [
+					'imageStyle:inline', 'imageStyle:block',
+					'imageStyle:wrapText', '|', 'toggleImageCaption',
+					'imageTextAlternative'
+				]
+			},
+			ckfinder: {
+				// eslint-disable-next-line max-len
+				uploadUrl: 'https://ckeditor.com/apps/ckfinder/3.5.0/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
+			}
 		} )
 		.then( newEditor => {
 			console.log( 'Editor was initialized', newEditor );
@@ -55,3 +79,5 @@ function destroyEditor() {
 
 document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
 document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );
+
+initEditor();