@adminforth/rich-editor 2.1.1 → 3.0.0

package/README.md

@@ -4,6 +4,9 @@
 
 [![Ask AI](https://tluma.ai/badge)](https://tluma.ai/ask-ai/devforth/adminforth)
 
+> [!WARNING]
+> **This plugin is not recommended for new projects.** Use the [Markdown plugin](https://adminforth.dev/docs/tutorial/Plugins/markdown/) (`@adminforth/markdown`) for editing formatted text instead. It stores content as Markdown, which suits the agentic era much better than HTML: AI agents read and write Markdown reliably, it stays readable as plain text and gives clean diffs. RichEditor keeps working for apps which already store HTML.
+
 Allows to add a rich text editor to your AdminForth text columns.
 
 ## Features

package/build.log

@@ -10,5 +10,5 @@ custom/package.json
 custom/quillEditor.vue
 custom/tsconfig.json
 
-sent 35,541 bytes  received 115 bytes  71,312.00 bytes/sec
-total size is 35,118  speedup is 0.98
+sent 38,509 bytes  received 115 bytes  77,248.00 bytes/sec
+total size is 38,086  speedup is 0.99

package/custom/quillEditor.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     v-if="wasQuillInitializedSuccessfully" 
-    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 
-      focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
-      dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 whitespace-normal af-quill-editor"
-    :class="'bg-lightInputBackground placeholder-lightInputPlaceholderText text-lightInputText border-lightInputBorder dark:!bg-darkInputBackground dark:!placeholder-darkInputPlaceholderText dark:!text-darkInputText dark:!border-darkInputBorder'"
+    class="af-quill-editor block w-full whitespace-normal rounded-default border shadow-customLight transition-colors
+      bg-lightInputBackground text-lightInputText border-lightInputBorder hover:border-lightInputBorderHover
+      focus-within:border-lightInputFocusBorder focus-within:ring-[3px] focus-within:ring-lightInputFocusRing
+      dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder dark:hover:border-darkInputBorderHover
+      dark:focus-within:border-darkInputFocusBorder dark:focus-within:ring-darkInputFocusRing"
   >
     <div  
       ref="editor"
@@ -28,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, type Ref } from "vue";
+import { onMounted, ref, onUnmounted, watch, h, render, type Ref, type FunctionalComponent } from "vue";
 import { callAdminForthApi } from '@/utils';
 import { AdminForthColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
@@ -39,6 +40,11 @@ import "quill/dist/quill.snow.css";
 import QuillTableBetter from 'quill-table-better-yaroslav8765';
 import 'quill-table-better-yaroslav8765/dist/quill-table-better.css';
 import { Textarea } from '@/afcl'
+import {
+  IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight, IconBold, IconCode, IconHeading2, IconHeading3,
+  IconImage, IconItalic, IconLink, IconList, IconListChecks, IconListOrdered, IconRemoveFormatting, IconStrikethrough,
+  IconTable, IconTextQuote, IconUnderline,
+} from '@iconify-prerendered/vue-lucide';
 
 import { useI18n } from 'vue-i18n';
 import { ok } from "assert";
@@ -131,6 +137,31 @@ Quill.register({
   'modules/table-better': QuillTableBetter
 }, true);
 
+// the toolbar draws Lucide icons like the rest of the UI; Quill takes icons as SVG strings,
+// so they are set after the table module registered its own one
+function iconSvg(icon: FunctionalComponent) {
+  const holder = document.createElement('div');
+  render(h(icon), holder);
+  return holder.innerHTML;
+}
+
+const quillIcons = Quill.import('ui/icons') as Record<string, any>;
+Object.assign(quillIcons, {
+  bold: iconSvg(IconBold),
+  italic: iconSvg(IconItalic),
+  underline: iconSvg(IconUnderline),
+  strike: iconSvg(IconStrikethrough),
+  'table-better': iconSvg(IconTable),
+  blockquote: iconSvg(IconTextQuote),
+  'code-block': iconSvg(IconCode),
+  link: iconSvg(IconLink),
+  image: iconSvg(IconImage),
+  clean: iconSvg(IconRemoveFormatting),
+  header: { ...quillIcons.header, 2: iconSvg(IconHeading2), 3: iconSvg(IconHeading3) },
+  list: { ...quillIcons.list, ordered: iconSvg(IconListOrdered), bullet: iconSvg(IconList), check: iconSvg(IconListChecks) },
+  align: { ...quillIcons.align, '': iconSvg(IconAlignLeft), center: iconSvg(IconAlignCenter), right: iconSvg(IconAlignRight), justify: iconSvg(IconAlignJustify) },
+});
+
 
 const updaterQueue = new AsyncQueue();
 
@@ -630,34 +661,61 @@ function removeCompletionOnBlur() {
 
 .af-quill-editor {
 
+  // the toolbar sits on a hairline over the text, its buttons are quiet like AFCL ghost icon buttons
   .ql-toolbar.ql-snow[class] {
-    border: none;
-    padding: 0 0 1rem 0;
-    .ql-picker-label{
-      padding-left: 0;
+    @apply flex flex-wrap items-center gap-0.5 border-0 border-b border-lightInputBorder px-1.5 py-1 dark:border-darkInputBorder;
+    font-family: inherit;
+
+    .ql-formats {
+      @apply inline-flex items-center gap-0.5 mr-2;
+    }
+
+    button, .ql-picker-label {
+      @apply w-7 h-7 p-1.5 rounded-default border-0 text-lightInputIconColor transition-colors dark:text-darkInputIconColor;
+    }
+
+    button svg, .ql-picker-label svg {
+      @apply w-4 h-4;
+    }
+
+    button:hover, .ql-picker-label:hover {
+      @apply bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
+    }
+
+    button.ql-active, .ql-picker-label.ql-active, .ql-picker-item.ql-selected {
+      @apply text-lightPrimary dark:text-darkPrimary;
+    }
+
+    .ql-picker.ql-icon-picker {
+      @apply w-7 h-7;
+    }
+
+    .ql-picker-options {
+      @apply p-1 rounded-lg border-0 bg-lightDropdownOptionsBackground shadow-popover dark:bg-darkDropdownOptionsBackground dark:shadow-darkPopover;
+    }
+
+    .ql-picker-item {
+      @apply w-7 h-7 p-1.5 rounded-md text-lightInputIconColor hover:bg-lightDropdownOptionsHoverBackground hover:text-lightInputText dark:text-darkInputIconColor dark:hover:bg-darkDropdownOptionsHoverBackground dark:hover:text-darkInputText;
     }
   }
 
   .ql-container {
     border: 0;
+    font-family: inherit;
+    font-size: inherit;
+
     .ql-editor {
       position: relative;
-      padding: 0;
+      @apply px-3 py-2.5 text-sm;
       min-height: 100px;
       &.ql-blank::before {
-        left: 0px;
-        font-style: normal;
+        @apply left-3 right-3 not-italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText;
       }
     }
   }
 
-  // .ql-editor:not(:focus) [completer] {
-  //   display: none;
-  // }
-
   .ql-editor [completer] {
-    color: gray;
-    font-style: italic;
+    @apply italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText;
   }
 
   // basic typography
@@ -690,23 +748,21 @@ function removeCompletionOnBlur() {
     /* Horizontal rule */
     hr {
       margin: 0.8rem 0;
-      border: none;
-      border-top: 1px solid #ddd;
+      @apply border-0 border-t border-lightInputBorder dark:border-darkInputBorder;
     }
 
     /* Blockquotes */
     blockquote {
       margin: 0.8rem 0;
       padding-left: 0.8rem;
-      border-left: 2px solid #ccc;
+      @apply border-0 border-l-2 border-lightInputBorder text-lightInputIconColor dark:border-darkInputBorder dark:text-darkInputIconColor;
     }
 
     /* Preformatted text */
     pre {
       margin: 0.8rem 0;
       padding: 0.4rem;
-      background: #f8f9fa;
-      border-radius: 3px;
+      @apply rounded bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
     }
 
     /* Tables */
@@ -717,11 +773,11 @@ function removeCompletionOnBlur() {
 
     th, td {
       padding: 0.3rem;
-      border: 1px solid #ddd;
+      @apply border border-lightInputBorder dark:border-darkInputBorder;
     }
 
     thead th {
-      border-bottom: 1.5px solid #aaa;
+      @apply border-b-2;
     }
 
     /* Images */
@@ -732,27 +788,21 @@ function removeCompletionOnBlur() {
     }
   }
 
+  // Quill's own icons which are left (table menus) follow the muted icon color too
   .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);
+    @apply stroke-lightInputIconColor dark:stroke-darkInputIconColor;
   }
 
   .ql-snow .ql-fill {
-    @apply dark:fill-darkPrimary;
-    @apply fill-lightPrimary;
+    @apply fill-lightInputIconColor dark:fill-darkInputIconColor;
   }
 
-  .ql-snow button:hover .ql-fill {
-    @apply dark:fill-darkPrimary;
-    @apply fill-lightPrimary;
-    filter: brightness(1.3);
+  .ql-snow .ql-active .ql-stroke {
+    @apply stroke-lightPrimary dark:stroke-darkPrimary;
+  }
+
+  .ql-snow .ql-active .ql-fill {
+    @apply fill-lightPrimary dark:fill-darkPrimary;
   }
 
 }
@@ -779,11 +829,6 @@ function removeCompletionOnBlur() {
   }
 }
 
-.ql-table-better svg path  {
-  @apply dark:fill-darkPrimary;
-  @apply fill-lightPrimary;
-}
-
 .ql-table-select-container {
   @apply dark:bg-darkForm;
   @apply bg-lightForm;

package/dist/custom/quillEditor.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     v-if="wasQuillInitializedSuccessfully" 
-    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 
-      focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
-      dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 whitespace-normal af-quill-editor"
-    :class="'bg-lightInputBackground placeholder-lightInputPlaceholderText text-lightInputText border-lightInputBorder dark:!bg-darkInputBackground dark:!placeholder-darkInputPlaceholderText dark:!text-darkInputText dark:!border-darkInputBorder'"
+    class="af-quill-editor block w-full whitespace-normal rounded-default border shadow-customLight transition-colors
+      bg-lightInputBackground text-lightInputText border-lightInputBorder hover:border-lightInputBorderHover
+      focus-within:border-lightInputFocusBorder focus-within:ring-[3px] focus-within:ring-lightInputFocusRing
+      dark:bg-darkInputBackground dark:text-darkInputText dark:border-darkInputBorder dark:hover:border-darkInputBorderHover
+      dark:focus-within:border-darkInputFocusBorder dark:focus-within:ring-darkInputFocusRing"
   >
     <div  
       ref="editor"
@@ -28,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, type Ref } from "vue";
+import { onMounted, ref, onUnmounted, watch, h, render, type Ref, type FunctionalComponent } from "vue";
 import { callAdminForthApi } from '@/utils';
 import { AdminForthColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
@@ -39,6 +40,11 @@ import "quill/dist/quill.snow.css";
 import QuillTableBetter from 'quill-table-better-yaroslav8765';
 import 'quill-table-better-yaroslav8765/dist/quill-table-better.css';
 import { Textarea } from '@/afcl'
+import {
+  IconAlignCenter, IconAlignJustify, IconAlignLeft, IconAlignRight, IconBold, IconCode, IconHeading2, IconHeading3,
+  IconImage, IconItalic, IconLink, IconList, IconListChecks, IconListOrdered, IconRemoveFormatting, IconStrikethrough,
+  IconTable, IconTextQuote, IconUnderline,
+} from '@iconify-prerendered/vue-lucide';
 
 import { useI18n } from 'vue-i18n';
 import { ok } from "assert";
@@ -131,6 +137,31 @@ Quill.register({
   'modules/table-better': QuillTableBetter
 }, true);
 
+// the toolbar draws Lucide icons like the rest of the UI; Quill takes icons as SVG strings,
+// so they are set after the table module registered its own one
+function iconSvg(icon: FunctionalComponent) {
+  const holder = document.createElement('div');
+  render(h(icon), holder);
+  return holder.innerHTML;
+}
+
+const quillIcons = Quill.import('ui/icons') as Record<string, any>;
+Object.assign(quillIcons, {
+  bold: iconSvg(IconBold),
+  italic: iconSvg(IconItalic),
+  underline: iconSvg(IconUnderline),
+  strike: iconSvg(IconStrikethrough),
+  'table-better': iconSvg(IconTable),
+  blockquote: iconSvg(IconTextQuote),
+  'code-block': iconSvg(IconCode),
+  link: iconSvg(IconLink),
+  image: iconSvg(IconImage),
+  clean: iconSvg(IconRemoveFormatting),
+  header: { ...quillIcons.header, 2: iconSvg(IconHeading2), 3: iconSvg(IconHeading3) },
+  list: { ...quillIcons.list, ordered: iconSvg(IconListOrdered), bullet: iconSvg(IconList), check: iconSvg(IconListChecks) },
+  align: { ...quillIcons.align, '': iconSvg(IconAlignLeft), center: iconSvg(IconAlignCenter), right: iconSvg(IconAlignRight), justify: iconSvg(IconAlignJustify) },
+});
+
 
 const updaterQueue = new AsyncQueue();
 
@@ -630,34 +661,61 @@ function removeCompletionOnBlur() {
 
 .af-quill-editor {
 
+  // the toolbar sits on a hairline over the text, its buttons are quiet like AFCL ghost icon buttons
   .ql-toolbar.ql-snow[class] {
-    border: none;
-    padding: 0 0 1rem 0;
-    .ql-picker-label{
-      padding-left: 0;
+    @apply flex flex-wrap items-center gap-0.5 border-0 border-b border-lightInputBorder px-1.5 py-1 dark:border-darkInputBorder;
+    font-family: inherit;
+
+    .ql-formats {
+      @apply inline-flex items-center gap-0.5 mr-2;
+    }
+
+    button, .ql-picker-label {
+      @apply w-7 h-7 p-1.5 rounded-default border-0 text-lightInputIconColor transition-colors dark:text-darkInputIconColor;
+    }
+
+    button svg, .ql-picker-label svg {
+      @apply w-4 h-4;
+    }
+
+    button:hover, .ql-picker-label:hover {
+      @apply bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
+    }
+
+    button.ql-active, .ql-picker-label.ql-active, .ql-picker-item.ql-selected {
+      @apply text-lightPrimary dark:text-darkPrimary;
+    }
+
+    .ql-picker.ql-icon-picker {
+      @apply w-7 h-7;
+    }
+
+    .ql-picker-options {
+      @apply p-1 rounded-lg border-0 bg-lightDropdownOptionsBackground shadow-popover dark:bg-darkDropdownOptionsBackground dark:shadow-darkPopover;
+    }
+
+    .ql-picker-item {
+      @apply w-7 h-7 p-1.5 rounded-md text-lightInputIconColor hover:bg-lightDropdownOptionsHoverBackground hover:text-lightInputText dark:text-darkInputIconColor dark:hover:bg-darkDropdownOptionsHoverBackground dark:hover:text-darkInputText;
     }
   }
 
   .ql-container {
     border: 0;
+    font-family: inherit;
+    font-size: inherit;
+
     .ql-editor {
       position: relative;
-      padding: 0;
+      @apply px-3 py-2.5 text-sm;
       min-height: 100px;
       &.ql-blank::before {
-        left: 0px;
-        font-style: normal;
+        @apply left-3 right-3 not-italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText;
       }
     }
   }
 
-  // .ql-editor:not(:focus) [completer] {
-  //   display: none;
-  // }
-
   .ql-editor [completer] {
-    color: gray;
-    font-style: italic;
+    @apply italic text-lightInputPlaceholderText dark:text-darkInputPlaceholderText;
   }
 
   // basic typography
@@ -690,23 +748,21 @@ function removeCompletionOnBlur() {
     /* Horizontal rule */
     hr {
       margin: 0.8rem 0;
-      border: none;
-      border-top: 1px solid #ddd;
+      @apply border-0 border-t border-lightInputBorder dark:border-darkInputBorder;
     }
 
     /* Blockquotes */
     blockquote {
       margin: 0.8rem 0;
       padding-left: 0.8rem;
-      border-left: 2px solid #ccc;
+      @apply border-0 border-l-2 border-lightInputBorder text-lightInputIconColor dark:border-darkInputBorder dark:text-darkInputIconColor;
     }
 
     /* Preformatted text */
     pre {
       margin: 0.8rem 0;
       padding: 0.4rem;
-      background: #f8f9fa;
-      border-radius: 3px;
+      @apply rounded bg-lightSecondaryDarken text-lightInputText dark:bg-darkSecondaryLighten dark:text-darkInputText;
     }
 
     /* Tables */
@@ -717,11 +773,11 @@ function removeCompletionOnBlur() {
 
     th, td {
       padding: 0.3rem;
-      border: 1px solid #ddd;
+      @apply border border-lightInputBorder dark:border-darkInputBorder;
     }
 
     thead th {
-      border-bottom: 1.5px solid #aaa;
+      @apply border-b-2;
     }
 
     /* Images */
@@ -732,27 +788,21 @@ function removeCompletionOnBlur() {
     }
   }
 
+  // Quill's own icons which are left (table menus) follow the muted icon color too
   .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);
+    @apply stroke-lightInputIconColor dark:stroke-darkInputIconColor;
   }
 
   .ql-snow .ql-fill {
-    @apply dark:fill-darkPrimary;
-    @apply fill-lightPrimary;
+    @apply fill-lightInputIconColor dark:fill-darkInputIconColor;
   }
 
-  .ql-snow button:hover .ql-fill {
-    @apply dark:fill-darkPrimary;
-    @apply fill-lightPrimary;
-    filter: brightness(1.3);
+  .ql-snow .ql-active .ql-stroke {
+    @apply stroke-lightPrimary dark:stroke-darkPrimary;
+  }
+
+  .ql-snow .ql-active .ql-fill {
+    @apply fill-lightPrimary dark:fill-darkPrimary;
   }
 
 }
@@ -779,11 +829,6 @@ function removeCompletionOnBlur() {
   }
 }
 
-.ql-table-better svg path  {
-  @apply dark:fill-darkPrimary;
-  @apply fill-lightPrimary;
-}
-
 .ql-table-select-container {
   @apply dark:bg-darkForm;
   @apply bg-lightForm;

package/dist/index.d.ts

@@ -14,6 +14,5 @@ export default class RichEditorPlugin extends AdminForthPlugin {
     validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource): void;
     instanceUniqueRepresentation(pluginOptions: any): string;
     generateRecordContext(record: any, maxFields: number, inputFieldLimit: number, partsCount: number): string;
-    private parseBody;
     setupEndpoints(server: IHttpServer): void;
 }

package/dist/index.js

@@ -218,27 +218,14 @@ export default class RichEditorPlugin extends AdminForthPlugin {
         });
         return JSON.stringify(Object.fromEntries(fields));
     }
-    parseBody(schema, body, response) {
-        const parsed = schema.safeParse(body !== null && body !== void 0 ? body : {});
-        if (!parsed.success) {
-            response.setStatus(400, '');
-            return {
-                ok: false,
-                error: { error: 'Request body validation failed', details: parsed.error.issues },
-            };
-        }
-        return { ok: true, data: parsed.data };
-    }
     setupEndpoints(server) {
         server.endpoint({
             method: 'POST',
             path: `/plugin/${this.pluginInstanceId}/doComplete`,
+            request_schema: doCompleteBodySchema,
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, headers, response }) {
                 var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-                const parsed = this.parseBody(doCompleteBodySchema, body, response);
-                if ('error' in parsed)
-                    return parsed.error;
-                const data = parsed.data;
+                const data = body;
                 const { record } = data;
                 if (!record) {
                     return { completion: [] };

package/index.ts

@@ -275,30 +275,13 @@ export default class RichEditorPlugin extends AdminForthPlugin {
     return JSON.stringify(Object.fromEntries(fields));
   }
 
-  private parseBody<T>(
-    schema: z.ZodType<T>,
-    body: unknown,
-    response: { setStatus: (code: number, message: string) => void },
-  ): { ok: true; data: T } | { ok: false; error: { error: string; details: unknown } } {
-    const parsed = schema.safeParse(body ?? {});
-    if (!parsed.success) {
-      response.setStatus(400, '');
-      return {
-        ok: false,
-        error: { error: 'Request body validation failed', details: parsed.error.issues },
-      };
-    }
-    return { ok: true, data: parsed.data };
-  }
-
   setupEndpoints(server: IHttpServer) {
     server.endpoint({
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/doComplete`,
+      request_schema: doCompleteBodySchema,
       handler: async ({ body, headers, response }) => {
-        const parsed = this.parseBody(doCompleteBodySchema, body, response);
-        if ('error' in parsed) return parsed.error;
-        const data = parsed.data;
+        const data = body as z.infer<typeof doCompleteBodySchema>;
         const { record } = data;
 
         if (!record) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "2.1.1",
+  "version": "3.0.0",
   "description": "Rich editor plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",
@@ -27,11 +27,11 @@
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "adminforth": "^3.7.1"
+    "adminforth": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
-    "adminforth": "^3.7.1",
+    "adminforth": "^3.8.2",
     "semantic-release": "^24.2.1",
     "semantic-release-slack-bot": "^4.0.2",
     "typescript": "^5.7.3"