@adminforth/rich-editor 1.0.6 → 1.0.8

package/custom/quillEditor.vue

@@ -89,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' }],
@@ -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,7 +391,6 @@ function removeCompletionOnBlur() {
     }
   }
 
-
   .ql-editor:not(:focus) [completer] {
     display: none;
   }
@@ -403,6 +400,29 @@ function removeCompletionOnBlur() {
     font-style: italic;
   }
 
+  .ql-snow .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
+
+  }
+  .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

@@ -89,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' }],
@@ -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,7 +391,6 @@ function removeCompletionOnBlur() {
     }
   }
 
-
   .ql-editor:not(:focus) [completer] {
     display: none;
   }
@@ -403,6 +400,29 @@ function removeCompletionOnBlur() {
     font-style: italic;
   }
 
+  .ql-snow .ql-stroke {
+    @apply dark:stroke-darkPrimary;
+    @apply stroke-lightPrimary;
+
+  }
+  .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.6",
+  "version": "1.0.8",
   "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',
+  },
 }