Merge branch 'main' of github.com:devforth/adminforth-rich-editor

Author: NoOne7135

custom/package-lock.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "quill": "^2.0.2"
+    "quill": "^2.0.2",
+    "quill-table-better": "^1.2.3"
   }
 }

custom/package.json

@@ -27,6 +27,9 @@ import adminforth from '@/adminforth';
 import AsyncQueue from './async-queue';
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
+import QuillTableBetter from 'quill-table-better';
+import 'quill-table-better/dist/quill-table-better.css';
+
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -89,6 +92,11 @@ Quill.register(CompleteBlot);
 // @ts-ignore
 Quill.register(ImageBlot);
 
+Quill.register({
+  'modules/table-better': QuillTableBetter
+}, true);
+
+
 const updaterQueue = new AsyncQueue();
 
 const props = defineProps<{
@@ -197,11 +205,7 @@ async function imageHandler() {
   };
 }
 
-onMounted(() => {
-  currentValue.value = props.record[props.column.name] || '';
-  editor.value.innerHTML = currentValue.value;
-
-  quill = new Quill(editor.value as HTMLElement, {
+const quillOptions = {
     theme: "snow",
     readOnly:props.column?.editReadonly,
     placeholder: 'Type here...',
@@ -210,6 +214,7 @@ onMounted(() => {
       toolbar: {
         container: props.meta.toolbar || [
             ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+            ['table-better'],
             ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
             // [
             //   // 'image', 
@@ -237,6 +242,11 @@ onMounted(() => {
           image: imageHandler,
         },
       },
+      'table-better': {
+        language: 'en_US',
+        menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'delete'],
+        toolbarTable: true
+      },
       keyboard: {
         bindings: {
           tab: {
@@ -250,8 +260,24 @@ onMounted(() => {
         },
       }
     },
-  });
+  };
+
+  function initValue(quill: Quill) {
+    const html = props.record[props.column.name] || '';
+    const delta = quill.clipboard.convert({ html });
+    const [range] = quill.selection.getRange();
+    quill.updateContents(delta, Quill.sources.USER);
+    quill.setSelection(
+      delta.length() - (range?.length || 0),
+      Quill.sources.SILENT
+    );
+    quill.scrollSelectionIntoView();
+  }
 
+onMounted(() => {
+  currentValue.value = props.record[props.column.name] || '';
+  quill = new Quill(editor.value as HTMLElement, quillOptions);
+  initValue(quill);
   lastText = quill.getText();
 
   quill.on(Quill.events.TEXT_CHANGE, async (delta: any, oldDelta: any, source: string) => {

custom/quillEditor.vue

@@ -1,17 +1,14 @@
 {
   "compilerOptions": {
-    "baseUrl": ".", // This should point to your project root
+    "baseUrl": ".",
     "paths": {
       "@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
         "../../../adminforth/spa/src/*"
       ],
       "*": [
-        // "node_modules/adminforth/dist/spa/node_modules/*"
         "../../../adminforth/spa/node_modules/*"
       ],
       "@@/*": [
-        // "node_modules/adminforth/dist/spa/src/*"
         "."
       ]
     }

custom/tsconfig.json

@@ -30,7 +30,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
-    if (this.options.completion.rateLimit?.limit) {
+    if (this.options.completion?.rateLimit?.limit) {
       this.rateLimiter = new RateLimiter(this.options.completion.rateLimit?.limit);
     }
   }