@adminforth/rich-editor 1.0.5 → 1.0.7

package/custom/quillEditor.vue

@@ -32,10 +32,11 @@ function dbg(title: string,...args: any[]) {
   console.log(title, ...args.map(a =>JSON.stringify(a, null, 1))); 
 }
 
-const BlockEmbed = Quill.import('blots/block/embed');
+// blots/embed: Represents inline embed elements, like images or videos that can be inserted into the text flow.
+const Embed = Quill.import('blots/embed');
 
 // @ts-ignore
-class CompleteBlot extends BlockEmbed {
+class CompleteBlot extends Embed {
   static blotName = 'complete';
   static tagName = 'span';
 
@@ -88,12 +89,13 @@ onMounted(() => {
     modules: {
       toolbar: props.meta.toolbar || [
         ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-        ['blockquote', 'code-block', 'link'],
+        ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
         // [
         //   // 'image', 
         //   // 'video', 
         //   // 'formula'
         // ],
+        
 
         [{ 'header': 2 }, { 'header': 3 }],               // custom button values
         [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
@@ -278,6 +280,8 @@ function approveCompletion(type: 'all' | 'word') {
 
   let shouldComplete = false;
   if (type === 'all') {
+    dbg(`👇 insert all at ${cursorPosition.index}, ${completion.value.join('')}`);
+    deleteCompleteEmbed();
     quill.insertText(cursorPosition.index, completion.value.join(''), 'silent');
     shouldComplete = true;
   } else {
@@ -306,7 +310,6 @@ async function startCompletion() {
     return;
   }
   completion.value = null;
-  // return;
   deleteCompleteEmbed();
 
   if (tmt) {
@@ -336,12 +339,10 @@ async function startCompletion() {
       return;
     }
 
-    // deleteCompleteEmbed();
-    // insert on +1 to insert after \n
-    quill.insertEmbed(cursorPosition.index + 1, 'complete', { text: completionAnswer.join('') }, 'silent');
+    quill.insertEmbed(cursorPosition.index, 'complete', { text: completionAnswer.join('') }, 'silent');
 
-    dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
-    quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
+    // dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
+    // quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
 
     completion.value = completionAnswer;
 
@@ -372,7 +373,6 @@ function removeCompletionOnBlur() {
   .ql-toolbar.ql-snow[class] {
     border: none;
     padding: 0 0 1rem 0;
-
     .ql-picker-label{
       padding-left: 0;
     }
@@ -380,12 +380,10 @@ function removeCompletionOnBlur() {
 
   .ql-container {
     border: 0;
-
     .ql-editor {
       position: relative;
       padding: 0;
       min-height: 100px;
-
       &.ql-blank::before {
         left: 0px;
         font-style: normal;
@@ -393,29 +391,36 @@ function removeCompletionOnBlur() {
     }
   }
 
-  p:has(+ [completer]) br {
+  .ql-editor:not(:focus) [completer] {
     display: none;
   }
-  p:has(+ [completer]) {
-    // background: rgb(255 227 227);  // debug
-    display: inline;
-  }
-
- .ql-editor:not(:focus) [completer] {
-   display: none;
- }
 
   .ql-editor [completer] {
-    // important to keep pointer-events non none for cursor position on completer click
-
-    // text is not selectable
-    user-select: none;
     color: gray;
+    font-style: italic;
+  }
 
-    // if inline or inline used then user-select: none brakes triple click
-    display: contents;
+  .ql-snow .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
 
-    font-style: italic;
+  }
+  .ql-snow button:hover .ql-stroke,
+  .ql-snow [role="button"]:hover .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
+    filter: brightness(1.3);
+  }
+
+  .ql-snow .ql-fill {
+    @apply dark:fill-darkPrimary;
+    @apply fill-lightPrimary;
+  }
+
+  .ql-snow button:hover .ql-fill {
+    @apply dark:fill-darkPrimary;
+    @apply fill-lightPrimary;
+    filter: brightness(1.3);
   }
 
 }

package/dist/custom/quillEditor.vue

@@ -32,10 +32,11 @@ function dbg(title: string,...args: any[]) {
   console.log(title, ...args.map(a =>JSON.stringify(a, null, 1))); 
 }
 
-const BlockEmbed = Quill.import('blots/block/embed');
+// blots/embed: Represents inline embed elements, like images or videos that can be inserted into the text flow.
+const Embed = Quill.import('blots/embed');
 
 // @ts-ignore
-class CompleteBlot extends BlockEmbed {
+class CompleteBlot extends Embed {
   static blotName = 'complete';
   static tagName = 'span';
 
@@ -88,12 +89,13 @@ onMounted(() => {
     modules: {
       toolbar: props.meta.toolbar || [
         ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-        ['blockquote', 'code-block', 'link'],
+        ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
         // [
         //   // 'image', 
         //   // 'video', 
         //   // 'formula'
         // ],
+        
 
         [{ 'header': 2 }, { 'header': 3 }],               // custom button values
         [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
@@ -278,6 +280,8 @@ function approveCompletion(type: 'all' | 'word') {
 
   let shouldComplete = false;
   if (type === 'all') {
+    dbg(`👇 insert all at ${cursorPosition.index}, ${completion.value.join('')}`);
+    deleteCompleteEmbed();
     quill.insertText(cursorPosition.index, completion.value.join(''), 'silent');
     shouldComplete = true;
   } else {
@@ -306,7 +310,6 @@ async function startCompletion() {
     return;
   }
   completion.value = null;
-  // return;
   deleteCompleteEmbed();
 
   if (tmt) {
@@ -336,12 +339,10 @@ async function startCompletion() {
       return;
     }
 
-    // deleteCompleteEmbed();
-    // insert on +1 to insert after \n
-    quill.insertEmbed(cursorPosition.index + 1, 'complete', { text: completionAnswer.join('') }, 'silent');
+    quill.insertEmbed(cursorPosition.index, 'complete', { text: completionAnswer.join('') }, 'silent');
 
-    dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
-    quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
+    // dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
+    // quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
 
     completion.value = completionAnswer;
 
@@ -372,7 +373,6 @@ function removeCompletionOnBlur() {
   .ql-toolbar.ql-snow[class] {
     border: none;
     padding: 0 0 1rem 0;
-
     .ql-picker-label{
       padding-left: 0;
     }
@@ -380,12 +380,10 @@ function removeCompletionOnBlur() {
 
   .ql-container {
     border: 0;
-
     .ql-editor {
       position: relative;
       padding: 0;
       min-height: 100px;
-
       &.ql-blank::before {
         left: 0px;
         font-style: normal;
@@ -393,29 +391,36 @@ function removeCompletionOnBlur() {
     }
   }
 
-  p:has(+ [completer]) br {
+  .ql-editor:not(:focus) [completer] {
     display: none;
   }
-  p:has(+ [completer]) {
-    // background: rgb(255 227 227);  // debug
-    display: inline;
-  }
-
- .ql-editor:not(:focus) [completer] {
-   display: none;
- }
 
   .ql-editor [completer] {
-    // important to keep pointer-events non none for cursor position on completer click
-
-    // text is not selectable
-    user-select: none;
     color: gray;
+    font-style: italic;
+  }
 
-    // if inline or inline used then user-select: none brakes triple click
-    display: contents;
+  .ql-snow .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
 
-    font-style: italic;
+  }
+  .ql-snow button:hover .ql-stroke,
+  .ql-snow [role="button"]:hover .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
+    filter: brightness(1.3);
+  }
+
+  .ql-snow .ql-fill {
+    @apply dark:fill-darkPrimary;
+    @apply fill-lightPrimary;
+  }
+
+  .ql-snow button:hover .ql-fill {
+    @apply dark:fill-darkPrimary;
+    @apply fill-lightPrimary;
+    filter: brightness(1.3);
   }
 
 }

package/dist/index.js

@@ -8,10 +8,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { AdminForthPlugin } from "adminforth";
+// options:
+// attachments: {
+//   attachmentResource: 'description_images',
+//   attachmentFieldName: 'image_path',
+//   attachmentRecordIdFieldName: 'record_id',
+//   attachmentResourceIdFieldName: 'resource_id',
+// },
 export default class RichEditorPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
-        this.resourceConfig = undefined;
+        this.activationOrder = 100000;
         this.options = options;
     }
     modifyResourceConfig(adminforth, resourceConfig) {
@@ -19,19 +26,35 @@ export default class RichEditorPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a, _b, _c;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
-            this.resourceConfig = resourceConfig;
             const c = resourceConfig.columns.find(c => c.name === this.options.htmlFieldName);
             if (!c) {
                 throw new Error(`Column ${this.options.htmlFieldName} not found in resource ${resourceConfig.label}`);
             }
+            if (this.options.attachments) {
+                const resource = adminforth.config.resources.find(r => r.resourceId === this.options.attachments.attachmentResource);
+                if (!resource) {
+                    throw new Error(`Resource '${this.options.attachments.attachmentResource}' not found`);
+                }
+                const field = resource.columns.find(c => c.name === this.options.attachments.attachmentFieldName);
+                if (!field) {
+                    throw new Error(`Field '${this.options.attachments.attachmentFieldName}' not found in resource '${this.options.attachments.attachmentResource}'`);
+                }
+                const plugin = adminforth.activatedPlugins.find(p => p.resourceConfig.resourceId === this.options.attachments.attachmentResource &&
+                    p.pluginOptions.pathColumnName === this.options.attachments.attachmentFieldName);
+                if (!plugin) {
+                    throw new Error(`Plugin for attachment field '${this.options.attachments.attachmentFieldName}' not found in resource '${this.options.attachments.attachmentResource}', please check if Upload Plugin is installed on the field ${this.options.attachments.attachmentFieldName}`);
+                }
+                this.uploadPlugin = plugin;
+            }
             const filed = {
                 file: this.componentPath('quillEditor.vue'),
                 meta: {
                     pluginInstanceId: this.pluginInstanceId,
                     debounceTime: ((_b = (_a = this.options.completion) === null || _a === void 0 ? void 0 : _a.expert) === null || _b === void 0 ? void 0 : _b.debounceTime) || 300,
                     shouldComplete: !!this.options.completion,
+                    uploadPluginInstanceId: (_c = this.uploadPlugin) === null || _c === void 0 ? void 0 : _c.pluginInstanceId,
                 }
             };
             if (!c.components) {

package/index.ts

@@ -2,10 +2,19 @@
 import { IAdminForth, IHttpServer, AdminForthPlugin, AdminForthResource } from "adminforth";
 import { PluginOptions } from './types.js';
 
+// options:
+// attachments: {
+//   attachmentResource: 'description_images',
+//   attachmentFieldName: 'image_path',
+//   attachmentRecordIdFieldName: 'record_id',
+//   attachmentResourceIdFieldName: 'resource_id',
+// },
 
 export default class RichEditorPlugin extends AdminForthPlugin {
   options: PluginOptions;
-  resourceConfig?: AdminForthResource = undefined;
+  uploadPlugin: AdminForthPlugin;
+
+  activationOrder: number = 100000;
 
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
@@ -14,27 +23,46 @@ export default class RichEditorPlugin extends AdminForthPlugin {
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
-    this.resourceConfig = resourceConfig;
-
 
     const c = resourceConfig.columns.find(c => c.name === this.options.htmlFieldName);
     if (!c) {
       throw new Error(`Column ${this.options.htmlFieldName} not found in resource ${resourceConfig.label}`);
     }
+    
+    if (this.options.attachments) {
+      const resource = adminforth.config.resources.find(r => r.resourceId === this.options.attachments!.attachmentResource);
+      if (!resource) {
+        throw new Error(`Resource '${this.options.attachments!.attachmentResource}' not found`);
+      }
+      const field = resource.columns.find(c => c.name === this.options.attachments!.attachmentFieldName);
+      if (!field) {
+        throw new Error(`Field '${this.options.attachments!.attachmentFieldName}' not found in resource '${this.options.attachments!.attachmentResource}'`);
+      }
+      const plugin = adminforth.activatedPlugins.find(p => 
+        p.resourceConfig!.resourceId === this.options.attachments!.attachmentResource && 
+        p.pluginOptions.pathColumnName === this.options.attachments!.attachmentFieldName);
+      if (!plugin) {
+        throw new Error(`Plugin for attachment field '${this.options.attachments!.attachmentFieldName}' not found in resource '${this.options.attachments!.attachmentResource}', please check if Upload Plugin is installed on the field ${this.options.attachments!.attachmentFieldName}`);
+      }
+      this.uploadPlugin = plugin;
+    }
+
     const filed = {
       file: this.componentPath('quillEditor.vue'),
       meta: {
         pluginInstanceId: this.pluginInstanceId,
         debounceTime: this.options.completion?.expert?.debounceTime || 300,
         shouldComplete: !!this.options.completion,
+        uploadPluginInstanceId: this.uploadPlugin?.pluginInstanceId,
       }
     }
+
     if (!c.components) {
       c.components = {};
     }
     c.components.create = filed;
     c.components.edit = filed;
-    
+
   }
   
   validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
@@ -42,6 +70,8 @@ export default class RichEditorPlugin extends AdminForthPlugin {
     if (this.options.completion && this.options.completion.provider !== 'openai-chat-gpt') {
       throw new Error(`Invalid provider ${this.options.completion.provider}`);
     }
+
+
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "",
   "type": "module",
   "main": "dist/index.js",

package/types.ts

@@ -134,6 +134,35 @@ export interface PluginOptions {
 
   }
 
- 
+  /**
+   * Allows to attach images to the HTML text
+   * Requires to have a separate resource with Upload Plugin installed on attachment field.
+   * Each attachment used in HTML will create one record in the attachment resource.
+   */
+  attachments?: {
+    /**
+     * Resource name where images are stored. Should point to the existing resource.
+     */
+    attachmentResource: string;
+
+    /**
+     * Field name in the attachment resource where image is stored. Should point to the existing field in the attachment resource.
+     * Also there should be upload plugin installed on this field.
+     */
+    attachmentFieldName: 'image_path',
+
+    /**
+     * When attachment is created, it will be linked to the record with this field name.
+     * For example when RichEditor installed on description field of appartment resource,
+     * field in attachment resource describet hear will store id of appartment record.
+     */
+    attachmentRecordIdFieldName: 'record_id',
+
+    /**
+     * When attachment is created, it will be linked to the resource with this field name.
+     * For example when RichEditor installed on description field of appartment resource, it will store id of appartment resource.
+     */
+    attachmentResourceIdFieldName: 'resource_id',
+  },
 }