BC-8259 Use inline version of ckeditor on boards

package.json

@@ -19,7 +19,7 @@
 	"dependencies": {
 		"@braintree/sanitize-url": "^6.0.4",
 		"@ckeditor/ckeditor5-vue": "^5.1.0",
-		"@hpi-schul-cloud/ckeditor": "^1.2.0",
+		"@hpi-schul-cloud/ckeditor": "1.3.0",
 		"@lumieducation/h5p-webcomponents": "^9.2.2",
 		"@vuelidate/core": "^2.0.3",
 		"@vuelidate/validators": "^2.0.4",

src/modules/feature/board-text-element/RichTextContentElementEdit.vue

@@ -4,7 +4,7 @@
 			v-model="modelValue"
 			:autofocus="autofocus"
 			:placeholder="$t('components.cardElement.richTextElement.placeholder')"
-			type="balloon"
+			type="inline"
 			mode="simple"
 			@update:value="onUpdateValue"
 			@focus="onFocus"

src/modules/feature/editor/CKEditor.vue

@@ -77,9 +77,13 @@ export default defineComponent({
 		const ck = ref(null);
 		const modelValue = useVModel(props, "value", emit);
 		const editor = computed(() => {
-			return props.type === "classic"
-				? CustomCKEditor.ClassicEditor
-				: CustomCKEditor.BalloonEditor;
+			if (props.type === "classic") {
+				return CustomCKEditor.ClassicEditor;
+			} else if (props.type === "inline") {
+				return CustomCKEditor.InlineEditor;
+			} else {
+				return CustomCKEditor.BalloonEditor;
+			}
 		});
 
 		const charCount = ref(0);
@@ -181,6 +185,11 @@ export default defineComponent({
 				},
 				language: locale.value,
 				placeholder: props.placeholder,
+				ui: {
+					viewportOffset: {
+						top: 220,
+					},
+				},
 			};
 		});
 

src/styles/css-variables/_layers.scss

@@ -1,7 +1,7 @@
 :root {
 	--layer-behind: -1;
 	--layer-page: 1;
-	--layer-sticky-header: 20;
+	--layer-sticky-header: 1003;
 	--layer-dropdown: 30;
 	--layer-popover: 40;
 	--layer-tooltip: 50;