CLASSROOMIO-T-128: TinyMCE Editor Test

CLASSROOMIO-T-128: TinyMCE Integration

Merge branch 'main' into CLASSROOMIO-T-128

CLASSROOMIO-T-128: Resolved Fixes

CLASSROOMIO-T-128: Ts Errors

CLASSROOMIO-T-128: Resolved Feedbacks

CLASSROOMIO-T-128: Replace Quill with tinyMCE

CLASSROOMIO-T-128: Compare Editors

CLASSROOMIO-T-128: TinyMCE Editor Test


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>
Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-62
Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
tunny17
2023-09-05 13:21:44 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 0200bc46ac
commit 75479e9719
14 changed files with 168 additions and 1206 deletions
+50 -42
View File
@@ -1,52 +1,60 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#333333" />
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#333333">
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<title>ClassroomIO –&nbsp;The LMS with Superpowers</title>
<meta name="description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="ClassroomIO –&nbsp;The LMS with Superpowers">
<meta property="og:description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
<meta property="og:type" content="website">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1640">
<meta property="og:image:height" content="924">
<meta property="og:image:secure_url" content="https://app.classroomio.com/classroomio-opengraph-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@rotimi_best">
<meta name="twitter:title" content="ClassroomIO –&nbsp;The LMS with Superpowers">
<meta name="twitter:description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom.">
<title>ClassroomIO –&nbsp;The LMS with Superpowers</title>
<meta
name="description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom."
/>
<meta name="theme-color" content="#ffffff" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="ClassroomIO –&nbsp;The LMS with Superpowers" />
<meta
property="og:description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom."
/>
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1640" />
<meta property="og:image:height" content="924" />
<meta
property="og:image:secure_url"
content="https://app.classroomio.com/classroomio-opengraph-image.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@rotimi_best" />
<meta name="twitter:title" content="ClassroomIO –&nbsp;The LMS with Superpowers" />
<meta
name="twitter:description"
content="ClassroomIO provides AI-powered, easy-to-use tools that empowers educators build, automate and enrich learning experiences in and outside the classroom."
/>
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
<link rel="icon" type="image/png" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png">
<link href="/css/quill.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<!-- <link rel="stylesheet" href="global.css"> -->
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
<link rel="icon" type="image/png" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
<!--Crisp Chat
<!--Crisp Chat
<script
type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "2158dbf9-90d4-4e50-b962-e1d8a1a6deb7"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
-->
<script src="https://cdn.plyr.io/3.7.3/plyr.js">
</script>
<script src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
%sveltekit.head%
</head>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="">
<div style="display: contents">
%sveltekit.body%
</div>
</body>
</html>
<body data-sveltekit-preload-data="hover" class="">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
@@ -1,4 +1,5 @@
<script lang="ts">
import isEmpty from 'lodash/isEmpty';
import { useCompletion } from 'ai/svelte';
import MODES from '$lib/utils/constants/mode.js';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
@@ -16,8 +17,6 @@
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import TextField from '$lib/components/Form/TextField.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
// import ClEditor from '$lib/components/ClEditor/index.svelte';
import {
lesson,
lessons,
@@ -28,8 +27,8 @@
} from '$lib/components/Course/components/Lesson/store/lessons';
import VideoUploader from '$lib/components/Course/components/Lesson/Materials/Video/Index.svelte';
import { course } from '$lib/components/Course/store';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import * as CONSTANTS from './constants';
import isEmpty from 'lodash/isEmpty';
export let mode = MODES.view;
export let prevMode = '';
@@ -41,7 +40,7 @@
let tabs = CONSTANTS.tabs;
let currentTab = tabs[0].value;
let errors = {};
let textareaRef = {};
let editorWindowRef;
let aiButtonRef = {};
let openPopover = false;
let player = null;
@@ -108,9 +107,10 @@
function updateNoteByCompletion(completion) {
$lesson.materials.note = completion;
if (textareaRef && textareaRef?.children?.[0]) {
let qlEditor = textareaRef?.children?.[0];
qlEditor.scrollTop = qlEditor.scrollHeight;
if (editorWindowRef) {
const tmceBody = editorWindowRef?.document?.querySelector('body');
editorWindowRef?.scrollTo(0, tmceBody?.scrollHeight);
}
}
@@ -230,13 +230,13 @@
</PrimaryButton>
</div>
<div class="h-[60vh]">
<div class="h-[60vh] mt-5">
<TextEditor
bind:container={textareaRef}
bind:content={$lesson.materials.note}
onChange={(c) => ($lesson.materials.note = c)}
bind:editorWindowRef
value={$lesson.materials.note}
onChange={(html) => ($lesson.materials.note = html)}
placeholder="Write your lesson note here"
/>
<!-- <ClEditor bind:html={$lesson.materials.note} /> -->
</div>
{:else if !isNoteEmpty($lesson.materials?.note)}
<article class="preview prose prose-sm sm:prose p-2">
+6 -5
View File
@@ -1,14 +1,13 @@
<script>
import TextEditor from '$lib/components/TextEditor/index.svelte';
import { marked } from 'marked';
import RoleBasedSecurity from '../RoleBasedSecurity/index.svelte';
import PageNav from '../PageNav/index.svelte';
import MODES from '$lib/utils/constants/mode';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import PageBody from '../PageBody/index.svelte';
import EditContent from '../EditContent/index.svelte';
import { course } from './store';
import { updateCourse } from '$lib/utils/services/courses';
import TextEditor from '$lib/components/TextEditor/index.svelte';
let mode = MODES.view;
let isDirty = false;
@@ -43,11 +42,13 @@
<PageBody width="max-w-3xl px-3">
{#if mode === MODES.edit}
<TextEditor
bind:content={$course.overview}
onChange={(c) => {
$course.overview = c;
value={$course.overview}
onChange={(html) => {
isDirty = true;
$course.overview = html;
}}
placeholder="Write your overview here"
height="700"
/>
{:else}
<article class="preview prose prose-sm sm:prose p-2">
@@ -5,15 +5,14 @@
import TextEditor from '$lib/components/TextEditor/index.svelte';
export let course;
function handleChange(html) {
const _course = cloneDeep(course);
set(_course, 'metadata.description', html);
course = _course;
}
</script>
<div class="h-2/5">
<TextEditor
content={get(course, 'metadata.description')}
onChange={(html) => {
const _course = cloneDeep(course);
set(_course, 'metadata.description', html);
course = _course;
}}
/>
<TextEditor value={get(course, 'metadata.description')} onChange={handleChange} />
</div>
@@ -5,15 +5,14 @@
import TextEditor from '$lib/components/TextEditor/index.svelte';
export let course;
function handleChange(html) {
const _course = cloneDeep(course);
set(_course, 'metadata.goals', html);
course = _course;
}
</script>
<div class="h-2/5">
<TextEditor
content={get(course, 'metadata.goals')}
onChange={(html) => {
const _course = cloneDeep(course);
set(_course, 'metadata.goals', html);
course = _course;
}}
/>
<TextEditor value={get(course, 'metadata.goals')} onChange={handleChange} />
</div>
@@ -4,8 +4,8 @@
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { Toggle } from 'carbon-components-svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
export let course = {};
@@ -34,6 +34,12 @@
course = _course;
}
function handleChange(html) {
const _course = cloneDeep(course);
set(_course, 'metadata.reward.description', html);
course = _course;
}
$: setter(showDiscount, 'metadata.showDiscount');
$: setter(discount, 'metadata.discount');
$: setter(giftToggled, 'metadata.reward.show');
@@ -88,13 +94,6 @@
<p class="dark:text-white font-bold mt-5">About Gift</p>
<div class="h-2/5">
<TextEditor
content={get(course, 'metadata.reward.description')}
onChange={(html) => {
const _course = cloneDeep(course);
set(_course, 'metadata.reward.description', html);
course = _course;
}}
/>
<TextEditor value={get(course, 'metadata.reward.description')} onChange={handleChange} />
</div>
{/if}
@@ -5,15 +5,14 @@
import TextEditor from '$lib/components/TextEditor/index.svelte';
export let course;
function handleChange(html) {
const _course = cloneDeep(course);
set(_course, 'metadata.requirements', html);
course = _course;
}
</script>
<div class="h-2/5">
<TextEditor
content={get(course, 'metadata.requirements')}
onChange={(html) => {
const _course = cloneDeep(course);
set(_course, 'metadata.requirements', html);
course = _course;
}}
/>
<TextEditor value={get(course, 'metadata.requirements')} onChange={handleChange} />
</div>
+34 -123
View File
@@ -1,130 +1,41 @@
<script>
import { onMount } from 'svelte';
import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
import Editor from '@tinymce/tinymce-svelte';
export let onChange;
export let content;
export let disable;
export let docId;
export let placeholder = 'Type something...';
export let errorMessage;
export let container;
export let value;
export let onChange = (html = '') => {};
export let height = 300;
export let placeholder = '';
export let editorWindowRef;
const settings = {
modules: {
toolbar: {
modules: {
syntax: true,
toolbar: [
[{ header: [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike'],
['link', 'code-block']
]
},
placeholder: 'Type something...',
theme: 'snow'
}
},
theme: 'snow',
placeholder
const apiKey = PUBLIC_TINYMCE_API_KEY;
// editor configuration
let conf = {
plugins: 'lists',
toolbar: [
{ name: 'history', items: ['undo', 'redo'] },
{ name: 'styles', items: ['styles'] },
{ name: 'formatting', items: ['bold', 'italic'] },
{ name: 'alignment', items: ['alignleft', 'aligncenter', 'alignright', 'alignjustify'] },
{ name: 'indentation', items: ['outdent', 'indent'] },
{ name: 'list', items: ['numlist', 'bullist'] }
],
lists_indent_on_tab: false,
min_height: height,
placeholder: placeholder,
init_instance_callback: function (editor) {
editorWindowRef = editor.iframeElement?.contentWindow;
editor.on('Input', function (e) {
const html = editor.getContent();
if (onChange) {
onChange(html);
}
});
}
};
let quill = null;
let isUserTyping = false;
function resetContent(docId) {
if (quill && quill.setText) {
if (content) {
quill.setContents(JSON.parse(content));
} else {
quill.setText('');
}
}
}
function setQuillHTML(html) {
if (quill) {
quill.setHTML(html);
}
}
onMount(async () => {
const { default: Quill } = await import('quill');
Quill.prototype.getHTML = function () {
return this.container.querySelector('.ql-editor').innerHTML;
};
Quill.prototype.setHTML = function (html) {
this.container.querySelector('.ql-editor').innerHTML = html;
};
quill = new Quill(container, settings);
quill.setHTML(content || '');
quill.on('text-change', function () {
onChange(quill.getHTML());
});
quill.getModule('toolbar').container.addEventListener('mousedown', (e) => {
e.preventDefault();
isUserTyping = true;
});
quill.root.addEventListener('focus', () => {
isUserTyping = true;
});
quill.root.addEventListener('blur', () => {
isUserTyping = false;
});
});
$: {
if (quill && quill.setText) {
if (disable) {
quill.disable(disable);
} else {
quill.enable(true);
}
}
}
$: if (!isUserTyping) {
setQuillHTML(content);
}
$: resetContent(docId);
</script>
<div class="p-2 w-full h-full">
<div bind:this={container} />
{#if errorMessage}
<p class="dark:text-white text-red-500 text-sm">
{errorMessage}
</p>
{/if}
<div>
<Editor onIni {value} {apiKey} {conf} />
</div>
<style>
:global(.dark .ql-stroke) {
stroke: #fff;
}
:global(.dark .ql-snow .ql-picker) {
color: #fff;
}
:global(.dark .ql-editor.ql-blank::before) {
color: #fff;
}
:global(.ql-editor) {
white-space: normal !important;
}
:global(.ql-editor p),
:global(.ql-editor h1),
:global(.ql-editor h2),
:global(.ql-editor h3),
:global(.ql-editor h4) {
line-height: 2.2;
}
</style>
+15 -13
View File
@@ -10,7 +10,6 @@
import Vote from '$lib/components/Vote/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
@@ -25,6 +24,7 @@
import { snackbarStore } from '$lib/components/Snackbar/store';
import TextField from '$lib/components/Form/TextField.svelte';
import DeleteCommentModal from '$lib/components/Org/Community/DeleteCommentModal.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
dayjs.extend(relativeTime);
@@ -47,6 +47,8 @@
body: ''
};
let editorInstance = false;
function mapResToQuestion(data) {
return {
id: data.id,
@@ -211,6 +213,7 @@
}
isEditMode = !isEditMode;
editorInstance = !editorInstance;
if (!isEditMode) {
const fields = { title: editContent.title, body: editContent.body };
@@ -334,14 +337,12 @@
</p>
</div>
</header>
{#if isEditMode}
{#if isEditMode && editorInstance}
<div class="my-2">
<TextEditor
content={question.body}
onChange={(c) => (editContent.body = c)}
placeholder="Update question"
errorMessage={errors.body}
docId={resetInput}
bind:value={editContent.body}
placeholder="Give an answer"
onChange={(html) => (editContent.body = html)}
/>
</div>
{:else}
@@ -398,12 +399,13 @@
<hr />
<div>
<TextEditor
onChange={(c) => (comment = c)}
placeholder="Give an answer"
errorMessage={errors.comment}
docId={resetInput}
/>
{#if !editorInstance}
<TextEditor
bind:value={comment}
placeholder="Give an answer"
onChange={(html) => (comment = html)}
/>
{/if}
<div class="flex justify-end mr-2">
<PrimaryButton label="Comment" onClick={submitComment} />
+3 -3
View File
@@ -1,7 +1,6 @@
<script>
import { goto } from '$app/navigation';
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import { currentOrg } from '$lib/utils/store/org';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { askCommunityValidation } from '$lib/utils/functions/validator';
@@ -9,6 +8,7 @@
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { snackbarStore } from '$lib/components/Snackbar/store';
import generateSlug from '$lib/utils/functions/generateSlug';
import TextEditor from '$lib/components/TextEditor/index.svelte';
let errors = {};
let fields = {
@@ -87,8 +87,8 @@
</div>
<TextEditor
onChange={(v) => (fields.body = v)}
bind:value={fields.body}
placeholder="Ask the community any question you might have"
errorMessage={errors.body}
onChange={(html) => (fields.body = html)}
/>
</section>
@@ -9,7 +9,6 @@
import Vote from '$lib/components/Vote/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
@@ -24,6 +23,7 @@
import { snackbarStore } from '$lib/components/Snackbar/store';
import TextField from '$lib/components/Form/TextField.svelte';
import DeleteCommentModal from '$lib/components/Org/Community/DeleteCommentModal.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
dayjs.extend(relativeTime);
@@ -46,6 +46,8 @@
body: ''
};
let editorInstance = false;
function mapResToQuestion(data) {
return {
id: data.id,
@@ -210,6 +212,7 @@
}
isEditMode = !isEditMode;
editorInstance = !editorInstance;
if (!isEditMode) {
const fields = { title: editContent.title, body: editContent.body };
@@ -336,14 +339,12 @@
</p>
</div>
</header>
{#if isEditMode}
{#if isEditMode && editorInstance}
<div class="my-2">
<TextEditor
content={question.body}
onChange={(c) => (editContent.body = c)}
placeholder="Update question"
errorMessage={errors.body}
docId={resetInput}
bind:value={editContent.body}
placeholder="Give an answer"
onChange={(html) => (editContent.body = html)}
/>
</div>
{:else}
@@ -400,12 +401,13 @@
<hr />
<div>
<TextEditor
onChange={(c) => (comment = c)}
placeholder="Give an answer"
errorMessage={errors.comment}
docId={resetInput}
/>
{#if !editorInstance}
<TextEditor
bind:value={comment}
placeholder="Give an answer"
onChange={(html) => (comment = html)}
/>
{/if}
<div class="flex justify-end mr-2">
<PrimaryButton label="Comment" onClick={submitComment} />
@@ -1,7 +1,6 @@
<script>
import { goto } from '$app/navigation';
import ArrowLeftIcon from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
import TextEditor from '$lib/components/TextEditor/index.svelte';
import { currentOrgPath, currentOrg } from '$lib/utils/store/org';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { askCommunityValidation } from '$lib/utils/functions/validator';
@@ -9,6 +8,7 @@
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { snackbarStore } from '$lib/components/Snackbar/store';
import generateSlug from '$lib/utils/functions/generateSlug';
import TextEditor from '$lib/components/TextEditor/index.svelte';
let errors = {};
let fields = {
@@ -90,8 +90,8 @@
</div>
<TextEditor
onChange={(v) => (fields.body = v)}
bind:value={fields.body}
placeholder="Ask the community any question you might have"
errorMessage={errors.body}
onChange={(html) => (fields.body = html)}
/>
</section>