✨ Added basic editor for custom formatting

2022-11-21 19:36:00 +01:00
parent 38790232c2
commit a11f61864c
7 changed files with 543 additions and 23 deletions
@@ -0,0 +1,94 @@
+<!--
+  - This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at https://mozilla.org/MPL/2.0/.
+  -->
+<script lang="ts">
+	import BalloonEditor from '@ckeditor/ckeditor5-build-balloon';
+	// import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+	// import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
+	// import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
+	// import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+	// import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript.js';
+	// import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript.js';
+	// import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat"
+
+	export let text = '';
+
+	const triggerChange = () => {
+		text = editor.getData();
+	};
+
+	import { onMount } from 'svelte';
+
+	let html_el;
+
+	$: text = text.replace('<p>', '').replace('</p>', '');
+
+	/*	Editor.builtinPlugins = [
+		Autoformat,
+		Bold,
+		Essentials,
+		Italic,
+		Paragraph,
+		Strikethrough,
+		Subscript,
+		Superscript,
+		TextTransformation
+	];*/
+	/*Editor.defaultConfig = {
+	toolbar: {
+		items: [
+			'bold',
+			'italic',
+			'strikethrough',
+			'superscript',
+			'subscript',
+			'|',
+			'undo',
+			'redo'
+		]
+	},
+	language: 'en'
+};*/
+	let editor;
+	onMount(() => {
+		// BalloonEditor.builtinPlugins = [Strikethrough]
+		BalloonEditor.create(html_el, {
+			// plugins: [Strikethrough],
+			config: {
+				enterMode: BalloonEditor.ENTER_DIV,
+				shiftEnterMode: BalloonEditor.ENTER_BR
+			},
+			toolbar: [
+				'bold',
+				'italic',
+				'strikethrough',
+				'superscript',
+				'subscript',
+				'|',
+				'undo',
+				'redo'
+			]
+		})
+			.then((newEditor) => {
+				editor = newEditor;
+				console.log(editor);
+				editor.setData(text);
+				editor.model.document.on('change:data', () => {
+					triggerChange();
+				});
+			})
+			.catch((error) => {
+				console.error('There was a problem initializing the editor.', error);
+			});
+	});
+</script>
+
+<div class="w-fit rounded-lg border-gray-500 border">
+	<div
+		bind:this={html_el}
+		contenteditable="true"
+		class="rounded-lg border-gray-500 border text-center w-fit h-fit resize-none dark:bg-gray-500 min-w-[5rem]"
+	/>
+</div>