LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Added basic editor for custom formatting

Browse Source
This commit is contained in:
Mawoka
2022-11-21 19:36:00 +01:00
parent 38790232c2
commit a11f61864c
7 changed files with 543 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/editor.svelte
+1 -1
View File
@@ -146,7 +146,7 @@
</p>
{:else}
<p class="text-center w-full text-black h-full align-bottom mt-0.5">
{data.title}
{@html data.title}
</p>
{/if}
<button
frontend/src/lib/editor/card.svelte
+15 -9
View File
@@ -68,15 +68,21 @@
</div>
<div class="flex flex-col">
<div class="flex justify-center pt-10 w-full">
<input
type="text"
bind:value={data.questions[selected_question].question}
placeholder="No title..."
class="p-3 rounded-lg border-gray-500 border text-center w-2/3 text-lg font-semibold placeholder:italic placeholder:font-normal dark:bg-gray-500"
class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
data.questions[selected_question].question
)}
/>
{#await import('$lib/inline-editor.svelte')}
<Spinner my_20={false} />
{:then c}
<div
class="rounded-lg placeholder:italic placeholder:font-normal dark:bg-gray-500"
class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
data.questions[selected_question].question
)}
>
<svelte:component
this={c.default}
bind:text={data.questions[selected_question].question}
/>
</div>
{/await}
</div>
{#if data.questions[selected_question].image != undefined && data.questions[selected_question].image !== ''}
<div class="flex justify-center pt-10 w-full max-h-72 w-full">
frontend/src/lib/editor/settings-card.svelte
+7 -2
View File
@@ -40,11 +40,16 @@
</div>
<div class="dark:bg-gray-700">
<div class="flex justify-center pt-10 w-full">
<input
<!--<input
type="text"
bind:value={data.title}
class="p-3 rounded-lg border-gray-500 border text-center w-1/3 text-lg font-semibold dark:bg-gray-500"
/>
/>-->
{#await import('$lib/inline-editor.svelte')}
<Spinner my_20={false} />
{:then c}
<svelte:component this={c.default} bind:text={data.title} />
{/await}
</div>
<div class="flex justify-center pt-10 w-full max-h-32">
<textarea
frontend/src/lib/editor/sidebar.svelte
+6 -5
View File
@@ -62,12 +62,13 @@
class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
>
<input
<p
type="text"
class="whitespace-nowrap truncate text-center w-full bg-transparent rounded font-semibold dark:text-white"
class="whitespace-nowrap truncate text-center w-full bg-transparent rounded dark:text-white"
class:dark:text-black={selected_question === -1}
bind:value={data.title}
/>
>
{@html data.title}
</p>
</div>
<div
use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
@@ -160,7 +161,7 @@
{#if question.question === ''}
<span class="italic text-gray-500">No title...</span>
{:else}
{question.question}
{@html question.question}
{/if}
</h1>
</div>
frontend/src/lib/inline-editor.svelte
+94
View File
@@ -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>