Skip to content

Commit 0690fcf

Browse files
habibaymanhabibayman
committed
feat(texteditor): replace markodwn with tiptap editor
1 parent 77c3506 commit 0690fcf

5 files changed

Lines changed: 71 additions & 107 deletions

File tree

‎contentcuration/contentcuration/frontend/channelEdit/components/AnswersEditor/AnswersEditor.vue‎

Lines changed: 10 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<div :class="indicatorClasses(answer)"></div>
2626
<VCardText :class="{ 'pb-0': !isAnswerOpen(answerIdx) }">
2727
<VLayout align-top>
28-
<VFlex xs1>
28+
<VFlex shrink>
2929
<!--
3030
VRadio cannot be used without VRadioGroup like VCheckbox but it can
3131
be solved by wrapping each VRadio to VRadioGroup
@@ -52,7 +52,7 @@
5252
/>
5353
</VFlex>
5454

55-
<VFlex xs7>
55+
<VFlex xs10>
5656
<keep-alive :max="5">
5757
<!-- Input question shows a text field with type of `number` -->
5858
<div v-if="isInputQuestion">
@@ -73,34 +73,21 @@
7373
</div>
7474

7575
<div v-else>
76-
<!-- <MarkdownEditor
77-
v-if="isAnswerOpen(answerIdx)"
78-
class="editor"
79-
analyticsLabel="Answer"
80-
:markdown="answer.answer"
81-
:handleFileUpload="handleFileUpload"
82-
:getFileUpload="getFileUpload"
83-
:imagePreset="imagePreset"
84-
@update="updateAnswerText($event, answerIdx)"
85-
@minimize="emitClose"
86-
/>
87-
<MarkdownViewer
88-
v-else
89-
:markdown="answer.answer"
90-
/> -->
76+
<!-- ?? analyticsLabel="Answer" -->
9177
<TipTapEditor
9278
v-model="answer.answer"
9379
class="editor"
9480
:mode="isAnswerOpen(answerIdx) ? 'edit' : 'view'"
9581
@update="updateAnswerText($event, answerIdx)"
82+
@minimize="emitClose"
9683
/>
9784
</div>
9885
</keep-alive>
9986
</VFlex>
10087

10188
<VSpacer />
10289

103-
<VFlex>
90+
<VFlex shrink>
10491
<AssessmentItemToolbar
10592
:iconActionsConfig="toolbarIconActions"
10693
:canMoveUp="!isAnswerFirst(answerIdx)"
@@ -133,17 +120,13 @@
133120

134121
<script>
135122
136-
/* eslint-disable */
137-
138123
import AssessmentItemToolbar from '../AssessmentItemToolbar';
139124
import { AssessmentItemToolbarActions } from '../../constants';
140125
import { floatOrIntRegex, getCorrectAnswersIndices, mapCorrectAnswers } from '../../utils';
141126
import { AssessmentItemTypes } from 'shared/constants';
142127
import { swapElements } from 'shared/utils/helpers';
143128
import Checkbox from 'shared/views/form/Checkbox';
144129
145-
import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
146-
import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
147130
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
148131
149132
const updateAnswersOrder = answers => {
@@ -159,8 +142,6 @@
159142
name: 'AnswersEditor',
160143
components: {
161144
AssessmentItemToolbar,
162-
MarkdownEditor,
163-
MarkdownViewer,
164145
Checkbox,
165146
TipTapEditor,
166147
},
@@ -184,20 +165,6 @@
184165
type: Number,
185166
default: 0,
186167
},
187-
// Inject function to handle file uploads
188-
handleFileUpload: {
189-
type: Function,
190-
default: () => {},
191-
},
192-
// Inject function to get file upload object
193-
getFileUpload: {
194-
type: Function,
195-
default: () => {},
196-
},
197-
imagePreset: {
198-
type: String,
199-
default: null,
200-
},
201168
},
202169
data() {
203170
return {
@@ -295,7 +262,7 @@
295262
if (
296263
!this.shouldHaveOneCorrectAnswer &&
297264
JSON.stringify([...newIndices].sort()) ===
298-
JSON.stringify([...this.correctAnswersIndices].sort())
265+
JSON.stringify([...this.correctAnswersIndices].sort())
299266
) {
300267
return;
301268
}
@@ -434,9 +401,12 @@
434401
numberFieldErrorLabel: 'Answer must be a number',
435402
},
436403
};
404+
437405
</script>
438406

407+
439408
<style lang="scss" scoped>
409+
440410
$exercise-answer-correct: #4caf50;
441411
$exercise-answer-wrong: #ef5350;
442412
@@ -489,4 +459,5 @@
489459
::v-deep .no-border.v-text-field > .v-input__control > .v-input__slot::after {
490460
border-style: none;
491461
}
462+
492463
</style>

‎contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemEditor/AssessmentItemEditor.vue‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,12 @@
3939
</div>
4040

4141
<transition name="fade">
42-
<keep-alive include="MarkdownEditor">
43-
<MarkdownEditor
42+
<keep-alive include="TipTapEditor">
43+
<!--analyticsLabel="Question"-->
44+
<TipTapEditor
4445
v-if="isQuestionOpen"
45-
analyticsLabel="Question"
46-
:markdown="question"
47-
:handleFileUpload="handleFiles"
48-
:getFileUpload="getFileUpload"
49-
:imagePreset="imagePreset"
46+
v-model="question"
47+
mode="edit"
5048
@update="onQuestionUpdate"
5149
@minimize="closeQuestion"
5250
/>
@@ -61,13 +59,20 @@
6159
align-start
6260
justify-space-between
6361
>
64-
<MarkdownViewer :markdown="question" />
65-
66-
<Icon
67-
:color="$themePalette.grey.v_800"
68-
icon="edit"
69-
class="mr-2"
70-
/>
62+
<VFlex grow>
63+
<TipTapEditor
64+
v-model="question"
65+
mode="view"
66+
/>
67+
</VFlex>
68+
69+
<VFlex shrink>
70+
<Icon
71+
:color="$themePalette.grey.v_800"
72+
icon="edit"
73+
class="mr-2"
74+
/>
75+
</VFlex>
7176
</VLayout>
7277
</div>
7378
</keep-alive>
@@ -89,9 +94,6 @@
8994
:questionKind="kind"
9095
:answers="answers"
9196
:openAnswerIdx="openAnswerIdx"
92-
:handleFileUpload="handleFiles"
93-
:getFileUpload="getFileUpload"
94-
:imagePreset="imagePreset"
9597
@update="onAnswersUpdate"
9698
@open="openAnswer"
9799
@close="closeAnswer"
@@ -102,8 +104,6 @@
102104
:hints="hints"
103105
:openHintIdx="openHintIdx"
104106
:handleFileUpload="handleFiles"
105-
:getFileUpload="getFileUpload"
106-
:imagePreset="imagePreset"
107107
@update="onHintsUpdate"
108108
@open="openHint"
109109
@close="closeHint"
@@ -133,21 +133,19 @@
133133
} from 'shared/constants';
134134
import ErrorList from 'shared/views/ErrorList/ErrorList';
135135
import Uploader from 'shared/views/files/Uploader';
136-
import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
137-
import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
138136
import { FormatPresetsNames } from 'shared/leUtils/FormatPresets';
139137
import DropdownWrapper from 'shared/views/form/DropdownWrapper';
138+
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
140139
141140
export default {
142141
name: 'AssessmentItemEditor',
143142
components: {
144143
DropdownWrapper,
145144
ErrorList,
146-
MarkdownEditor,
147-
MarkdownViewer,
148145
AnswersEditor,
149146
HintsEditor,
150147
Uploader,
148+
TipTapEditor,
151149
},
152150
model: {
153151
prop: 'item',
@@ -210,7 +208,6 @@
210208
};
211209
},
212210
computed: {
213-
...mapGetters('file', ['getFileUpload']),
214211
...mapGetters(['hasFeatureEnabled']),
215212
...mapGetters('contentNode', ['getContentNode']),
216213
question() {

‎contentcuration/contentcuration/frontend/channelEdit/components/AssessmentItemPreview/AssessmentItemPreview.vue‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99
<div class="caption grey--text mb-2">
1010
{{ kindLabel }}
1111
</div>
12-
<MarkdownViewer :markdown="question" />
12+
<TipTapEditor
13+
v-model="question"
14+
mode="view"
15+
/>
1316
</VFlex>
1417
</VLayout>
1518

@@ -39,7 +42,10 @@
3942
>
4043
<template #label>
4144
<div class="px-2">
42-
<MarkdownViewer :markdown="answer.answer" />
45+
<TipTapEditor
46+
v-model="answer.answer"
47+
mode="view"
48+
/>
4349
</div>
4450
</template>
4551
</VRadio>
@@ -55,7 +61,10 @@
5561
disabled
5662
>
5763
<div class="px-2">
58-
<MarkdownViewer :markdown="answer.answer" />
64+
<TipTapEditor
65+
v-model="answer.answer"
66+
mode="view"
67+
/>
5968
</div>
6069
</Checkbox>
6170
</template>
@@ -103,7 +112,10 @@
103112
{{ hintIdx + 1 }}
104113
</VFlex>
105114
<VFlex>
106-
<MarkdownViewer :markdown="hint.hint" />
115+
<TipTapEditor
116+
v-model="hint.hint"
117+
mode="view"
118+
/>
107119
</VFlex>
108120
</VLayout>
109121
</div>
@@ -124,13 +136,13 @@
124136
import translator from '../../translator';
125137
import { AssessmentItemTypes } from 'shared/constants';
126138
import Checkbox from 'shared/views/form/Checkbox';
127-
import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer.vue';
139+
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
128140
129141
export default {
130142
name: 'AssessmentItemPreview',
131143
components: {
132-
MarkdownViewer,
133144
Checkbox,
145+
TipTapEditor,
134146
},
135147
props: {
136148
/**

‎contentcuration/contentcuration/frontend/channelEdit/components/HintsEditor/HintsEditor.vue‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,13 @@
3131
{{ hintIdx + 1 }}
3232
</VFlex>
3333

34-
<VFlex xs7>
34+
<VFlex xs10>
3535
<transition name="fade">
3636
<keep-alive :max="5">
37-
<MarkdownViewer
38-
v-if="!isHintOpen(hintIdx)"
39-
:markdown="hint.hint"
40-
/>
41-
42-
<MarkdownEditor
43-
v-else
44-
analyticsLabel="Hint"
45-
:markdown="hint.hint"
46-
:handleFileUpload="handleFileUpload"
47-
:getFileUpload="getFileUpload"
48-
:imagePreset="imagePreset"
37+
<!-- analyticsLabel="Hint"-->
38+
<TipTapEditor
39+
v-model="hint.hint"
40+
:mode="isHintOpen(hintIdx) ? 'edit' : 'view'"
4941
@update="updateHintText($event, hintIdx)"
5042
@minimize="emitClose"
5143
/>
@@ -90,8 +82,7 @@
9082
import { AssessmentItemToolbarActions } from '../../constants';
9183
import { swapElements } from 'shared/utils/helpers';
9284
93-
import MarkdownEditor from 'shared/views/MarkdownEditor/MarkdownEditor/MarkdownEditor';
94-
import MarkdownViewer from 'shared/views/MarkdownEditor/MarkdownViewer/MarkdownViewer';
85+
import TipTapEditor from 'shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue';
9586
9687
const updateHintsOrder = hints => {
9788
return hints.map((hint, idx) => {
@@ -106,8 +97,7 @@
10697
name: 'HintsEditor',
10798
components: {
10899
AssessmentItemToolbar,
109-
MarkdownEditor,
110-
MarkdownViewer,
100+
TipTapEditor,
111101
},
112102
model: {
113103
prop: 'hints',
@@ -122,20 +112,6 @@
122112
type: Number,
123113
default: 0,
124114
},
125-
// Inject function to handle file uploads
126-
handleFileUpload: {
127-
type: Function,
128-
default: () => {},
129-
},
130-
// Inject function to get file upload object
131-
getFileUpload: {
132-
type: Function,
133-
default: () => {},
134-
},
135-
imagePreset: {
136-
type: String,
137-
default: null,
138-
},
139115
},
140116
data() {
141117
return {

0 commit comments

Comments
 (0)