Tiptap editor 🎊

client/components/content-containers/tcc-exam/edit/GroupIntroduction.vue

@@ -5,7 +5,7 @@
       @update="$emit('reorder:element', $event)"
       :elements="introductionElements"
       :activity="group"
-      :supported-types="['JODIT_HTML', 'IMAGE', 'VIDEO', 'EMBED', 'HTML']"
+      :supported-types="['TIPTAP_HTML', 'IMAGE', 'VIDEO', 'EMBED', 'HTML']"
       :layout="true">
       <template v-slot:list-item="{ element, dragged }">
         <contained-content

client/components/content-elements/tce-fill-blank/edit/index.vue

@@ -79,7 +79,7 @@ import reduce from 'lodash/reduce';
 import size from 'lodash/size';
 import times from 'lodash/times';
 
-const TEXT_TYPES = ['JODIT_HTML', 'HTML'];
+const TEXT_TYPES = ['TIPTAP_HTML', 'HTML'];
 const BLANK = /(@blank)/g;
 
 const SYNC_ERROR = `

client/components/content-elements/tce-fill-blank/index.js

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import Edit from './edit';
 import find from 'lodash/find';
 
-const TEXT_CONTAINERS = ['JODIT_HTML', 'HTML'];
+const TEXT_CONTAINERS = ['TIPTAP_HTML', 'HTML'];
 const BLANK_PLACEHOLDER = /(@blank)/g;
 
 const answer = () => yup.string().trim().max(200).required().label('Answer');

client/components/content-elements/tce-table/edit/index.vue

@@ -81,7 +81,7 @@ export default {
       return find(rows, row => row.cells[cellId]);
     },
     focusElement(cell) {
-      this.$emit('focus', {}, { ...cell, type: 'JODIT_HTML' }, this.element);
+      this.$emit('focus', {}, { ...cell, type: 'TIPTAP_HTML' }, this.element);
     },
     addRow(cellId, direction = Direction.AFTER) {
       const row = this.findRow(cellId);

client/components/content-elements/tce-table/edit/utils.js

@@ -16,7 +16,7 @@ export function removeCell(row, predicate = {}) {
 export function addEmbed(embeds, cellId, tableId) {
   const embed = {
     id: cellId,
-    type: 'JODIT_HTML',
+    type: 'TIPTAP_HTML',
     embedded: true,
     data: { tableId, cellId }
   };

client/components/content-elements/tce-tiptap/index.js

@@ -0,0 +1,9 @@
+import '@extensionengine/tce-tiptap/dist/tce-tiptap.css';
+import { Edit, options, Toolbar } from '@extensionengine/tce-tiptap/dist/tce-tiptap.esm';
+
+export default {
+  ...options,
+  name: options.label,
+  Edit,
+  Toolbar
+};

client/components/repository/Revisions/EntityRevisions.vue

@@ -33,7 +33,7 @@ import pick from 'lodash/pick';
 import Promise from 'bluebird';
 
 const WITHOUT_STATICS = [
-  'JODIT_HTML', 'BRIGHTCOVE_VIDEO', 'EMBED', 'BREAK', 'HTML'
+  'TIPTAP_HTML', 'BRIGHTCOVE_VIDEO', 'EMBED', 'BREAK', 'HTML'
 ];
 
 export default {

config/shared/core-elements.js

@@ -2,6 +2,7 @@
 
 module.exports = [
   'tce-jodit',
+  'tce-tiptap',
   'tce-image',
   'tce-video',
   'tce-embed',

package.json

@@ -43,10 +43,11 @@
   },
   "dependencies": {
     "@extensionengine/tapster": "github:ExtensionEngine/tapster#53ccb222c757948d322c33087620453ddf5e70ed",
+    "@extensionengine/tce-tiptap": "github:extensionengine/tce-tiptap#a73cb53",
     "@extensionengine/tce-jodit": "github:extensionengine/tce-jodit#c5464cd",
     "@extensionengine/tce-scorm": "github:ExtensionEngine/tce-scorm#85d39a8d73f303f",
     "@extensionengine/vue-radio": "^0.1.5",
-    "@mdi/font": "^4.8.95",
+    "@mdi/font": "^5.9.55",
     "@tailor-cms/config": "^0.1.3",
     "@tailor-cms/core-components": "^0.1.5",
     "@tailor-cms/utils": "^0.1.5",

packages/config/src/activities-rc.js

@@ -3,7 +3,7 @@
 const CONTENT_CONTAINERS = [{
   type: 'INTRO',
   label: 'Introduction',
-  types: ['JODIT_HTML', 'IMAGE', 'VIDEO', 'HTML'],
+  types: ['TIPTAP_HTML', 'IMAGE', 'VIDEO', 'HTML'],
   displayHeading: true
 }, {
   type: 'PAGE',

packages/core-components/src/components/AddElement/index.vue

@@ -83,7 +83,7 @@ const ELEMENT_GROUPS = [
 
 const getQuestionData = (element, type) => {
   const data = { width: LAYOUT.FULL_WIDTH };
-  const question = [{ id: uuid(), data, type: 'JODIT_HTML', embedded: true }];
+  const question = [{ id: uuid(), data, type: 'TIPTAP_HTML', embedded: true }];
   return { question, type, ...element.data };
 };
 

packages/core-components/src/components/AssessmentItem.vue

@@ -67,7 +67,7 @@ import map from 'lodash/map';
 import PublishDiffChip from './PublishDiffChip.vue';
 import TceQuestionContainer from './QuestionContainer/index.vue';
 
-const TEXT_CONTAINERS = ['JODIT_HTML', 'HTML'];
+const TEXT_CONTAINERS = ['TIPTAP_HTML', 'HTML'];
 const blankRegex = /(@blank)/g;
 const htmlRegex = /(<\/?[^>]+(>|$))|&nbsp;/g;
 

packages/core-components/src/components/EmbeddedContainer.vue

@@ -34,7 +34,7 @@ export default {
   inheritAttrs: false,
   props: {
     container: { type: Object, required: true },
-    types: { type: Array, default: () => ['JODIT_HTML', 'IMAGE', 'HTML', 'VIDEO'] },
+    types: { type: Array, default: () => ['TIPTAP_HTML', 'IMAGE', 'HTML', 'VIDEO'] },
     isDisabled: { type: Boolean, default: false },
     addElementOptions: { type: Object, default: () => ({}) },
     enableAdd: { type: Boolean, default: true }

packages/core-components/src/components/QuestionContainer/Question.vue

@@ -25,7 +25,7 @@
       :layout="false"
       :position="question.length"
       :disabled="!isEditing"
-      :include="['JODIT_HTML', 'IMAGE', 'EMBED', 'HTML']"
+      :include="['TIPTAP_HTML', 'IMAGE', 'EMBED', 'HTML']"
       :class="{ invisible: !isEditing }">
       <div class="d-flex justify-space-between mt-2 pl-3">
         <input-error :error="questionError" />

packages/core-components/src/components/QuestionContainer/index.vue

@@ -70,7 +70,7 @@ import Question from './Question.vue';
 const resolveComponentName = type => getComponentName(processAnswerType(type));
 
 const WITH_FEEDBACK = ['MC', 'SC', 'TF'];
-const TEXT_CONTAINERS = ['JODIT_HTML', 'HTML'];
+const TEXT_CONTAINERS = ['TIPTAP_HTML', 'HTML'];
 const validationOptions = { recursive: true, abortEarly: false };
 
 export default {