YSHOP2-1137-v2 : Rich text editor with froala

.vscode/settings.json

@@ -8,6 +8,7 @@
   },
   "stylelint.validate": ["vue"],
    "cSpell.words": [
-      "youcan"
-    ]
+    "froala",
+    "youcan"
+  ]
 }

packages/vue3/package.json

@@ -51,22 +51,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.7",
-    "@tiptap/core": "2.0.0-beta.215",
-    "@tiptap/extension-color": "2.0.0-beta.210",
-    "@tiptap/extension-highlight": "2.0.0-beta.210",
-    "@tiptap/extension-horizontal-rule": "2.0.0-beta.210",
-    "@tiptap/extension-image": "2.0.0-beta.210",
-    "@tiptap/extension-link": "2.0.0-beta.210",
-    "@tiptap/extension-table": "2.0.0-beta.210",
-    "@tiptap/extension-table-cell": "2.0.0-beta.210",
-    "@tiptap/extension-table-header": "2.0.0-beta.210",
-    "@tiptap/extension-table-row": "2.0.0-beta.210",
-    "@tiptap/extension-text-align": "^2.0.0-beta.210",
-    "@tiptap/extension-text-style": "2.0.0-beta.210",
-    "@tiptap/extension-underline": "2.0.0-beta.210",
-    "@tiptap/pm": "2.0.0-beta.210",
-    "@tiptap/starter-kit": "2.0.0-beta.210",
-    "@tiptap/vue-3": "2.0.0-beta.210",
+    "froala-editor": "^4.1.4",
+    "vue-froala-wysiwyg": "^4.1.4",
     "vue-slicksort": "^2.0.5"
   },
   "devDependencies": {

packages/vue3/src/_dev/App.vue

@@ -1,63 +1,33 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { ref, watch } from 'vue';
-import { MediaInput, UploadedMedia } from '~/components';
+import { ref } from 'vue';
+import { RichText } from '~/components';
+import type { ToolbarButtonsType } from '~/components/RichText/types';
 
-const attachments = ref<File[]>([]);
-const disabled = ref(false);
-const limit = 4;
-
-const checkLimit = () => {
-  disabled.value = attachments.value.length >= limit;
-};
-
-const deleteFile = (file: File) => {
-  const idx = attachments.value.indexOf(file);
-  if (idx > -1) {
-    attachments.value.splice(idx, 1);
-    checkLimit();
-  }
+const content = ref('');
+const error = ref(false);
+const license = ref('license-key');
+const toolbar: ToolbarButtonsType = {
+  text: ['fullscreen', 'bold', 'italic', 'underline', 'strikeThrough', 'textColor', 'backgroundColor', 'fontSize', 'paragraphFormat'],
+  paragraph: ['align', 'formatOL', 'formatUL', 'outdent', 'indent'],
+  misc: ['undo', 'redo'],
+  rich: ['insertTable', 'insertImage', 'insertVideo', 'emoticons', 'insertLink', 'specialCharacters', 'insertHR', 'codeView', 'clear'],
 };
-watch(attachments, () => {
-  checkLimit();
-});
 </script>
 
 <template>
   <div class="container">
-    <div class="files-grid">
-      <UploadedMedia
-        v-for="(attachment, index) in attachments"
-        :key="index"
-        :file="attachment"
-        @delete="deleteFile(attachment)"
-      />
-    </div>
-    <MediaInput v-model="attachments" :limit="limit" :disabled="disabled" />
-    <div class="files-grid">
-      <UploadedMedia
-        file="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg"
-      />
-    </div>
+    <RichText v-model="content" :error="error" lang="ar" :license="license" :toolbar="toolbar" />
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="css">
 .container {
   display: flex;
-  position: relative;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 300px;
-  min-height: 140px;
-}
-
-.file-grid {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  height: 100vh;
+  margin: 0 5%;
 }
 </style>

packages/vue3/src/_dev/index.ts

@@ -1,8 +1,18 @@
+// Import Froala Editor
+import 'froala-editor/js/plugins.pkgd.min.js';
+// Import Froala Editor css files.
+import 'froala-editor/css/froala_editor.pkgd.min.css';
+import 'froala-editor/css/froala_style.min.css';
+import 'froala-editor/js/languages/ar.js';
+import 'froala-editor/js/languages/fr.js';
+import 'froala-editor/js/languages/en_gb.js';
+import VueFroala from 'vue-froala-wysiwyg';
 import { createApp } from 'vue';
 import App from './App.vue';
 import 'uno.css';
 import '@youcan/ui-core/tokens';
 
 const app = createApp(App, {});
 
+app.use(VueFroala);
 app.mount('#app');