feat: Add ck5 trackchanges sidebar

Author: carla-at-wiris

demos/html/ckeditor5/src/app.js

@@ -43,6 +43,10 @@ ClassicEditor.create(document.querySelector("#editor"), {
     "comment",
     "sourceEditing",
   ],
+  // Configure the sidebar for annotations
+  sidebar: {
+    container: document.querySelector('#editor-annotations')
+  },
   // translations: [
   //   coreTranslations,
   // ],

demos/html/ckeditor5/src/static/style.css

@@ -1,28 +1,31 @@
 body {
-  background-color: #e4e6e7;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  background: #f7f7f7;
+  margin: 0;
+  padding: 1.5em;
 }
 
-.ck-editor {
-  background-color: #fff !important;
-  border-radius: 10px !important;
-  margin: 0 auto !important;
-  max-width: 760px !important;
-  width: 75% !important;
+/* CKEditor5 official wide sidebar styling */
+.editor-container {
+	--ckeditor5-preview-sidebar-width: 270px;
 }
 
-.ck-editor:hover {
-  box-shadow: 0 0 10px #7af78f;
+.editor-container__editor-wrapper {
+	display: flex;
+	width: fit-content;
 }
 
-.ck-content {
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  min-height: 250px;
+.editor-container--classic-editor .editor-container__editor {
+	min-width: 795px;
+	max-width: 795px;
 }
 
-.ck-rounded-corners,
-.ck.ck-editor__editable:not(.ck-editor__nested-editable),
-.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-rounded-corners {
-  border-bottom-left-radius: 10px !important;
-  border-bottom-right-radius: 10px !important;
+.editor-container__sidebar {
+	min-width: var(--ckeditor5-preview-sidebar-width);
+	max-width: var(--ckeditor5-preview-sidebar-width);
+	margin-top: 28px;
+	margin-left: 10px;
+	margin-right: 10px;
 }
+
+/* Remove duplicate styling and keep only what's necessary */