@adminforth/rich-editor 1.0.17 → 1.1.0

package/.woodpecker/buildRelease.sh

@@ -0,0 +1,13 @@
+
+#!/bin/bash
+
+# write npm run output both to console and to build.log
+npm run build 2>&1 | tee build.log
+build_status=${PIPESTATUS[0]}
+
+# if exist status from the npm run build is not 0
+# then exit with the status code from the npm run build
+if [ $build_status -ne 0 ]; then
+  echo "Build failed. Exiting with status code $build_status"
+  exit $build_status
+fi

package/.woodpecker/buildSlackNotify.sh

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+set -x
+
+COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
+
+
+if [ "$CI_STEP_STATUS" = "success" ]; then
+  MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+
+  curl  -s -X POST -H "Content-Type: application/json" -d '{
+    "username": "'"$CI_COMMIT_AUTHOR"'",
+    "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+    "attachments": [
+      {
+          "mrkdwn_in": ["text", "pretext"],
+          "color": "#36a64f",
+          "text": "'"$MESSAGE"'"
+      }
+    ]
+  }' "$DEVELOPERS_SLACK_WEBHOOK"
+  exit 0
+fi
+export BUILD_LOG=$(cat ./build.log)
+
+BUILD_LOG=$(echo $BUILD_LOG | sed 's/"/\\"/g')
+
+MESSAGE="Broke \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\` with commit _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
+CODE_BLOCK="\`\`\`$BUILD_LOG\n\`\`\`"
+
+echo "Sending slack message to developers $MESSAGE"
+# Send the message
+curl -sS -X POST -H "Content-Type: application/json" -d '{
+  "username": "'"$CI_COMMIT_AUTHOR"'",
+  "icon_url": "'"$CI_COMMIT_AUTHOR_AVATAR"'",
+  "attachments": [
+    {
+        "mrkdwn_in": ["text", "pretext"],
+        "color": "#8A1C12",
+        "text": "'"$CODE_BLOCK"'",
+        "pretext": "'"$MESSAGE"'"
+    }
+  ]
+}' "$DEVELOPERS_SLACK_WEBHOOK" 2>&1

package/.woodpecker/release.yml

@@ -0,0 +1,43 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      partial: false
+      depth: 5
+
+steps:
+  init-secrets:
+    when:
+      - event: push
+    image: infisical/cli
+    environment:
+      INFISICAL_TOKEN:
+        from_secret: VAULT_TOKEN
+    commands:
+      - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
+    secrets:
+      - VAULT_TOKEN
+
+  release:
+    image: node:20
+    when:
+      - event: push
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - npm clean-install
+      - /bin/bash ./.woodpecker/buildRelease.sh
+      - npm audit signatures
+      - npx semantic-release
+
+  slack-on-failure:
+    when:
+      - event: push
+        status: [failure, success]
+      - event: push
+    image: curlimages/curl
+    commands:
+      - export $(cat /woodpecker/deploy.vault.env | xargs)
+      - /bin/sh ./.woodpecker/buildSlackNotify.sh
+

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+
+# Changelog
+
+The complete changelog is available on the [GitHub Releases page](https://github.com/devforth/adminforth-rich-editor/releases).
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/build.log

@@ -0,0 +1,4 @@
+
+> @adminforth/rich-editor@1.0.18 build
+> tsc
+

package/custom/quillEditor.vue

@@ -1,5 +1,4 @@
 <template>
-
   <div 
     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
@@ -22,6 +21,8 @@
 import { onMounted, ref, onUnmounted, watch, type Ref } from "vue";
 import { callAdminForthApi } from '@/utils';
 import { AdminForthColumnCommon } from '@/types/Common';
+import adminforth from '@/adminforth';
+
 import AsyncQueue from './async-queue';
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
@@ -129,7 +130,7 @@ async function saveToServer(file: File) {
   });
 
   if (error) {
-    window.adminforth.alert({
+    adminforth.alert({
       message: `File was not uploaded because of error: ${error}`,
       variant: 'danger'
     });
@@ -154,7 +155,7 @@ async function saveToServer(file: File) {
     xhr.send(file);
   });
   if (!success) {
-    window.adminforth.alert({
+    adminforth.alert({
       messageHtml: `<div>Sorry but the file was not uploaded because of S3 Request Error: </div>
       <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
         xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -200,6 +201,7 @@ onMounted(() => {
 
   quill = new Quill(editor.value as HTMLElement, {
     theme: "snow",
+    readOnly:props.column?.editReadonly,
     placeholder: 'Type here...',
     // formats : ['complete'],
     modules: {
@@ -431,7 +433,7 @@ function approveCompletion(type: 'all' | 'word') {
 }
 
 async function startCompletion() {
-  if (!props.meta.shouldComplete) {
+  if (!props.meta.shouldComplete || props.column?.editReadonly ) {
     return;
   }
   completion.value = null;

package/custom/tsconfig.json

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

package/dist/index.js

@@ -112,7 +112,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
                         });
                     })));
                 });
-                resourceConfig.hooks.create.afterSave.push((_d) => __awaiter(this, [_d], void 0, function* ({ record, adminUser }) {
+                (resourceConfig.hooks.create.afterSave).push((_a) => __awaiter(this, [_a], void 0, function* ({ record, adminUser }) {
                     // find all s3Paths in the html
                     const s3Paths = getAttachmentPathes(record[this.options.htmlFieldName]);
                     process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths', s3Paths);
@@ -122,7 +122,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
                 }));
                 // after edit we need to delete attachments that are not in the html anymore
                 // and add new ones
-                resourceConfig.hooks.edit.afterSave.push((_e) => __awaiter(this, [_e], void 0, function* ({ recordId, record, adminUser }) {
+                (resourceConfig.hooks.edit.afterSave).push((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, record, adminUser }) {
                     process.env.HEAVY_DEBUG && console.log('⚓ Cought hook', recordId, 'rec', record);
                     if (record[this.options.htmlFieldName] === undefined) {
                         // field was not changed, do nothing
@@ -147,7 +147,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
                     return { ok: true };
                 }));
                 // after delete we need to delete all attachments
-                resourceConfig.hooks.delete.afterSave.push((_f) => __awaiter(this, [_f], void 0, function* ({ record, adminUser }) {
+                (resourceConfig.hooks.delete.afterSave).push((_a) => __awaiter(this, [_a], void 0, function* ({ record, adminUser }) {
                     const existingAparts = yield adminforth.resource(this.options.attachments.attachmentResource).list([
                         Filters.EQ(this.options.attachments.attachmentRecordIdFieldName, record[editorRecordPkField.name]),
                         Filters.EQ(this.options.attachments.attachmentResourceIdFieldName, resourceConfig.resourceId)
@@ -161,7 +161,11 @@ export default class RichEditorPlugin extends AdminForthPlugin {
         });
     }
     validateConfigAfterDiscover(adminforth, resourceConfig) {
+        var _a, _b;
         this.adminforth = adminforth;
+        if ((_a = this.options.completion) === null || _a === void 0 ? void 0 : _a.adapter) {
+            (_b = this.options.completion) === null || _b === void 0 ? void 0 : _b.adapter.validate();
+        }
         // optional method where you can safely check field types after database discovery was performed
         if (this.options.completion && !this.options.completion.adapter) {
             throw new Error(`Completion adapter is required`);

package/index.ts

@@ -1,5 +1,5 @@
 
-import type { IAdminForth, IHttpServer, AdminForthResource, AdminUser, AfterSaveFunction } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthResource, AdminUser } from "adminforth";
 import type { PluginOptions } from './types.js';
 import { AdminForthPlugin, Filters, RateLimiter } from "adminforth";
 import * as cheerio from 'cheerio';
@@ -142,7 +142,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
       }
       
 
-      (resourceConfig.hooks.create.afterSave as Array<AfterSaveFunction>).push(async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
+      (resourceConfig.hooks.create.afterSave).push(async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
         // find all s3Paths in the html
         const s3Paths = getAttachmentPathes(record[this.options.htmlFieldName])
         
@@ -157,7 +157,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
 
       // after edit we need to delete attachments that are not in the html anymore
       // and add new ones
-      (resourceConfig.hooks.edit.afterSave as Array<AfterSaveFunction>).push(
+      (resourceConfig.hooks.edit.afterSave).push(
         async ({ recordId, record, adminUser }: { recordId: any, record: any, adminUser: AdminUser }) => {
           process.env.HEAVY_DEBUG && console.log('⚓ Cought hook', recordId, 'rec', record);
           if (record[this.options.htmlFieldName] === undefined) {
@@ -188,7 +188,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
       );
 
       // after delete we need to delete all attachments
-      (resourceConfig.hooks.delete.afterSave as Array<AfterSaveFunction>).push(
+      (resourceConfig.hooks.delete.afterSave).push(
         async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
           const existingAparts = await adminforth.resource(this.options.attachments.attachmentResource).list(
             [
@@ -202,12 +202,15 @@ export default class RichEditorPlugin extends AdminForthPlugin {
 
           return { ok: true };
         }
-    );
+      );
     }
   }
   
   validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     this.adminforth = adminforth;
+    if (this.options.completion?.adapter) {
+      this.options.completion?.adapter.validate();
+    }
     // optional method where you can safely check field types after database discovery was performed
     if (this.options.completion && !this.options.completion.adapter) {
       throw new Error(`Completion adapter is required`);

package/package.json

@@ -1,18 +1,55 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "1.0.17",
-  "description": "",
+  "version": "1.1.0",
+  "description": "Rich editor plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "rollout": "tsc && rsync -av --exclude 'node_modules' custom dist/ && npm version patch && npm publish --access public",
-    "prepare": "npm link adminforth"
+    "prepare": "npm link adminforth",
+    "build": "tsc"
   },
-  "keywords": [],
-  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devforth/adminforth-rich-editor.git"
+  },
+  "keywords": [
+    "adminforth",
+    "rich editor"
+  ],
+  "author": "devforth",
   "license": "ISC",
   "dependencies": {
     "cheerio": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.7",
+    "semantic-release": "^24.2.1",
+    "semantic-release-slack-bot": "^4.0.2",
+    "typescript": "^5.7.3"
+  },
+  "release": {
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github",
+      [
+        "semantic-release-slack-bot",
+        {
+          "notifyOnSuccess": true,
+          "notifyOnFail": true,
+          "slackIcon": ":package:",
+          "markdownReleaseNotes": true
+        }
+      ]
+    ],
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ]
   }
 }

package/ChangeLog.md

@@ -1,11 +0,0 @@
-## [1.0.17] - 2024-12-06
-
-### Added
-
-- Reworked completion for adapter
-
-## [1.0.12] - 2021-10-07
-
-### Added
-
-- Rate limiting for openai requests support

package/dist/custom/async-queue.ts

@@ -1,31 +0,0 @@
-
-
-export default class AsyncQueue {
-  queue: (() => Promise<any>)[];
-  processing: boolean;
-
-  constructor() {
-    this.queue = [];
-    this.processing = false;
-  }
-
-  async add(task: () => Promise<any>) {
-    this.queue.push(task);
-    if (!this.processing) {
-      this.process();
-    }
-  }
-
-  async process() {
-    this.processing = true;
-    while (this.queue.length > 0) {
-      const task = this.queue.shift()!;
-      try {
-        await task();
-      } catch (error) {
-        console.error('Task encountered an error:', error);
-      }
-    }
-    this.processing = false;
-  }
-}

package/dist/custom/package-lock.json

@@ -1,74 +0,0 @@
-{
-  "name": "custom",
-  "version": "1.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "custom",
-      "version": "1.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "quill": "^2.0.2"
-      }
-    },
-    "node_modules/eventemitter3": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
-      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
-    },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
-    },
-    "node_modules/lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
-    },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
-    },
-    "node_modules/parchment": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
-      "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A=="
-    },
-    "node_modules/quill": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.2.tgz",
-      "integrity": "sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "eventemitter3": "^5.0.1",
-        "lodash-es": "^4.17.21",
-        "parchment": "^3.0.0",
-        "quill-delta": "^5.1.0"
-      },
-      "engines": {
-        "npm": ">=8.2.3"
-      }
-    },
-    "node_modules/quill-delta": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
-      "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
-      "dependencies": {
-        "fast-diff": "^1.3.0",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.isequal": "^4.5.0"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      }
-    }
-  }
-}

package/dist/custom/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "custom",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "quill": "^2.0.2"
-  }
-}

package/dist/custom/quillEditor.vue

@@ -1,560 +0,0 @@
-<template>
-
-  <div 
-    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"
-  >
-    <div  
-      ref="editor"
-      @keydown.tab.prevent.stop="approveCompletion('all')"
-      @keydown.ctrl.right.prevent.stop="approveCompletion('word')"
-      @keydown.ctrl.down.prevent.stop="startCompletion()"
-    >
-      
-    </div>
-  </div>
-
-
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch, type Ref } from "vue";
-import { callAdminForthApi } from '@/utils';
-import { AdminForthColumnCommon } from '@/types/Common';
-import AsyncQueue from './async-queue';
-import Quill from "quill";
-import "quill/dist/quill.snow.css";
-
-
-function dbg(title: string,...args: any[]) {
-  // return; // comment for debug
-  console.log(title, ...args.map(a =>JSON.stringify(a, null, 1))); 
-}
-
-// blots/embed: Represents inline embed elements, like images or videos that can be inserted into the text flow.
-const Embed = Quill.import('blots/embed');
-const BlockEmbed = Quill.import('blots/block/embed');
-
-// @ts-ignore
-class CompleteBlot extends Embed {
-  static blotName = 'complete';
-  static tagName = 'span';
-  // https://stackoverflow.com/a/78434756/27379293
-  static className = "complete-blot";
-
-  static create(value: { text: string }) {
-    let node = super.create();
-    // we should keep contenteditable=true for case when user clicks on empty area
-    // node.setAttribute('contenteditable', 'false');
-    node.setAttribute('completer', '');
-    node.innerText = value.text;
-    return node;
-  }
-  
-  static value(node: HTMLElement) {
-    return {
-      text: node.innerText,
-    };
-  }
-}
-
-// @ts-ignore
-class ImageBlot extends BlockEmbed {
-  static blotName = 'image';
-  static tagName = 'img';
-
-  static create(value) {
-    let node = super.create();
-    node.setAttribute('alt', value.alt);
-    node.setAttribute('src', value.url);
-    node.setAttribute('data-s3path', value['s3Path']);
-    return node;
-  }
-  
-  static value(node) {
-    return {
-      alt: node.getAttribute('alt'),
-      url: node.getAttribute('src'),
-      s3Path: node.getAttribute('data-s3path'),
-    };
-  }
-}
-
-// @ts-ignore
-Quill.register(CompleteBlot);
-// @ts-ignore
-Quill.register(ImageBlot);
-
-const updaterQueue = new AsyncQueue();
-
-const props = defineProps<{
-  column: AdminForthColumn,
-  record: any,
-  meta: any,
-}>();
-
-const emit = defineEmits([
-  'update:value',
-]);
-
-const currentValue: Ref<string> = ref('');
-
-const editor = ref<HTMLElement>();
-const completion = ref<string[] | null>(null);
-let quill: any = null;
-const editorFocused = ref(false);
-
-let lastText: string | null = null;
-
-const imageProgress = ref(0);
-
-
-async function saveToServer(file: File) {
-  const fd = new FormData();
-  fd.append('image', file);
-
-  const originalFilename = file.name.split('.').slice(0, -1).join('.');
-  const originalExtension = file.name.split('.').pop();
-  // send fd to s3
-  const { uploadUrl, tagline, previewUrl, s3Path, error } = await callAdminForthApi({
-      path: `/plugin/${props.meta.uploadPluginInstanceId}/get_s3_upload_url`,
-      method: 'POST',
-      body: {
-        originalFilename,
-        contentType: file.type,
-        size: file.size,
-        originalExtension,
-      },
-  });
-
-  if (error) {
-    window.adminforth.alert({
-      message: `File was not uploaded because of error: ${error}`,
-      variant: 'danger'
-    });
-    return;
-  }
-
-  const xhr = new XMLHttpRequest();
-  const success = await new Promise((resolve) => {
-    xhr.upload.onprogress = (e) => {
-      if (e.lengthComputable) {
-        imageProgress.value = Math.round((e.loaded / e.total) * 100);
-      }
-    };
-    xhr.addEventListener('loadend', () => {
-      const success = xhr.readyState === 4 && xhr.status === 200;
-      // try to read response
-      resolve(success);
-    });
-    xhr.open('PUT', uploadUrl, true);
-    xhr.setRequestHeader('Content-Type', file.type);
-    xhr.setRequestHeader('x-amz-tagging', tagline);
-    xhr.send(file);
-  });
-  if (!success) {
-    window.adminforth.alert({
-      messageHtml: `<div>Sorry but the file was not uploaded because of S3 Request Error: </div>
-      <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
-        xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
-      }</pre>`,
-      variant: 'danger',
-      timeout: 30,
-    });
-    imageProgress.value = 0;
-    return;
-  }
-
-  // here we have s3Path, call createResource to save the image
-  const range = quill.getSelection();
-  quill.insertEmbed(range.index, 'image', { 
-    url: previewUrl, 
-    s3Path: s3Path, 
-    alt: file.name 
-  }, 'user');
-
-}
-
-async function imageHandler() {
-  const input = document.createElement('input');
-  input.setAttribute('type', 'file');
-  input.click();
-
-  // Listen upload local image and save to server
-  input.onchange = () => {
-    const file = input.files[0];
-
-    // file type is only image.
-    if (/^image\//.test(file.type)) {
-      saveToServer(file);
-    } else {
-      console.warn('You could only upload images.');
-    }
-  };
-}
-
-onMounted(() => {
-  currentValue.value = props.record[props.column.name] || '';
-  editor.value.innerHTML = currentValue.value;
-
-  quill = new Quill(editor.value as HTMLElement, {
-    theme: "snow",
-    placeholder: 'Type here...',
-    // formats : ['complete'],
-    modules: {
-      toolbar: {
-        container: props.meta.toolbar || [
-            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-            ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
-            // [
-            //   // 'image', 
-            //   // 'video', 
-            //   // 'formula'
-            // ],
-            
-
-            [{ 'header': 2 }, { 'header': 3 }],               // custom button values
-            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
-            // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-            // [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-            // [{ 'direction': 'rtl' }],                         // text direction
-
-            // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
-            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-            // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-            // [{ 'font': [] }],
-            [{ 'align': [] }],
-
-            ['clean']                                         // remove formatting button
-        ],
-        handlers: {
-          image: imageHandler,
-        },
-      },
-      keyboard: {
-        bindings: {
-          tab: {
-            key: 9,
-            handler: function (range: any, context: any) {
-              if (completion.value !== null) {
-                return true;
-              }
-            },
-          },
-        },
-      }
-    },
-  });
-
-  lastText = quill.getText();
-
-  quill.on(Quill.events.TEXT_CHANGE, async (delta: any, oldDelta: any, source: string) => {
-    dbg('🪽 TEXT_CHANGE fired ', delta, oldDelta, source);
-    updaterQueue.add(emitTextUpdate);
-    startCompletion();
-  });
-  
-  quill.on('selection-change', (range: any, oldRange: any, source: string) => {
-    dbg('🪽 selection changed', range, oldRange, source);
-    if (range === null) {
-      // blur event
-      removeCompletionOnBlur();
-      editorFocused.value = false;
-      return;
-    } else {
-      editorFocused.value = true;
-      startCompletion();
-    }
-    const text = quill.getText();
-    // don't allow to select after completion
-    // TODO
-    // if (range?.index === text.length) {
-    //   console.log('RANGE IDX', range.index, text.length, 'text', JSON.stringify(text, null, 1));
-    //   dbg('✋ prevent selection after completion');
-    //   quill.setSelection(text.length - 1, 0, 'silent');
-    // }
-  });
-
-
-  // handle right swipe on mobile uding document/window, and console log if swiped in right direction
-  if ('ontouchstart' in window) {
-    document.addEventListener('touchstart', handleTouchStart, false);
-    document.addEventListener('touchmove', handleTouchMove, false);
-  }
-
-});
-
-
-async function emitTextUpdate() {
-  const editorHtml = quill.root.innerHTML;
-  // remove completion from html
-  const html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
-
-  if (lastText === html) {
-    return;
-  }
-
-  lastText = html;
-
-  await (new Promise((resolve) => setTimeout(resolve, 0)));
-
-  dbg('⬆️ emit value suggestion-input', html);
-  emit('update:value', html);
-}
-
-// Auto-Completion functions
-let tmt: null | ReturnType<typeof setTimeout> = null;
-
-let xDown: null | number = null;
-let yDown: null | number = null;
-
-function handleTouchStart(evt: TouchEvent) {
-  xDown = evt.touches[0].clientX;
-  yDown = evt.touches[0].clientY;
-}
-
-function handleTouchMove(evt: TouchEvent) {
-  if (!xDown || !yDown) {
-    return;
-  }
-
-  let xUp = evt.touches[0].clientX;
-  let yUp = evt.touches[0].clientY;
-
-  let xDiff = xDown - xUp;
-  let yDiff = yDown - yUp;
-
-  if (Math.abs(xDiff) > Math.abs(yDiff)) {
-    if (xDiff < 0) {
-      // complete word if completion and input is focused
-      dbg('👇 swipe right', completion.value, editorFocused.value);
-      if (completion.value !== null && editorFocused.value) {
-        approveCompletion('word');
-        // [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/feature/5093566007214080
-        // evt.preventDefault();
-        evt.stopPropagation();
-      }
-    }
-  }
-
-  xDown = null;
-  yDown = null;
-}
-
-onUnmounted(() => {
-  quill.off(Quill.events.TEXT_CHANGE);
-  quill.off('selection-change');
-
-  if ('ontouchstart' in window) {
-    document.removeEventListener('touchstart', handleTouchStart);
-    document.removeEventListener('touchmove', handleTouchMove);
-  }
-});
-
-
-async function complete(textBeforeCursor: string) {
-  const res = await callAdminForthApi({
-      path: `/plugin/${props.meta.pluginInstanceId}/doComplete`,
-      method: 'POST',
-      body: {
-        record: {...props.record, [props.column.name]: textBeforeCursor},
-      },
-  });
-
-  return res.completion;
-}
-
-function updateCompleteEmbed(text: string) {
-  const curCursorPos = quill.getSelection();
-  const d = quill.getContents();
-  const c = d.ops.find((op: any) => op.insert.complete);
-  if (!c) {
-    return;
-  }
-  c.insert.complete.text = text;
-  quill.setContents(d.ops, 'silent');
-  quill.setSelection(curCursorPos.index, curCursorPos.length, 'silent');
-}
-
-function deleteCompleteEmbed() {
-  const completeNode = quill.root.querySelector('[completer]');
-  const completeBlot = Quill.find(completeNode);
-  const blotIdx: number | null = completeBlot ? quill.getIndex(completeBlot) : null;
-
-  dbg('👇 complete blot idx', blotIdx);
-
-  if (blotIdx !== null) {
-    quill.deleteText(blotIdx, 1, 'silent');
-  }
-}
-
-function approveCompletion(type: 'all' | 'word') { 
-  if (!props.meta.shouldComplete) {
-    return;
-  }
-
-  dbg('💨 approveCompletion')
-
-  if (completion.value === null) {
-    return;
-  }
-
-  const cursorPosition = quill.getSelection();
-
-  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 {
-    const word = completion.value[0];
-    quill.insertText(cursorPosition.index, word, 'silent');
-    completion.value = completion.value.slice(1);
-    if (completion.value.length === 0) {
-      shouldComplete = true;
-    } else {
-      // update completion
-      // TODO probably better way to update Embed?
-      updateCompleteEmbed(completion.value.join(''));
-    }
-  }
-
-  updaterQueue.add(emitTextUpdate);
-
-  if (shouldComplete) {
-    startCompletion();
-  }
-
-}
-
-async function startCompletion() {
-  if (!props.meta.shouldComplete) {
-    return;
-  }
-  completion.value = null;
-  deleteCompleteEmbed();
-
-  if (tmt) {
-    clearTimeout(tmt);
-  }
-  tmt = setTimeout(async () => {
-    const currentTmt = tmt;
-    const cursorPosition = quill.getSelection();
-    dbg('👇 get pos', cursorPosition.index, cursorPosition.length)
-    if (cursorPosition.length !== 0) {
-      // we will not complete if text selected
-      return;
-    }
-
-    const charAfterCursor = quill.getText(cursorPosition.index, 1);
-    dbg('👇 charAfterCursor', charAfterCursor);
-    if (charAfterCursor !== '\n') {
-      // we will not complete if not at the end of the line
-      return;
-    }
-
-    const textBeforeCursor = quill.getText(0, cursorPosition.index);
-
-    const completionAnswer = await complete(textBeforeCursor);
-    if (currentTmt !== tmt) {
-      // while we were waiting for completion, new completion was started
-      return;
-    }
-
-    quill.insertEmbed(cursorPosition.index, 'complete', { text: completionAnswer.join('') }, 'silent');
-
-    //dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
-    //quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
-
-    completion.value = completionAnswer;
-
-    dbg('👇 completion finished', quill.getContents());
-
-  }, props.meta.debounceTime || 300);
-}
-
-function removeCompletionOnBlur() {
-  if (lastText?.trim().length === 0) {
-    completion.value = null;
-    const d = quill.getContents();
-    const i = d.ops.findIndex((op: any) => op.insert.complete);
-    if (i !== -1) {
-      d.ops.splice(i, 1);
-      quill.setContents(d, 'silent');
-      dbg('🧹 Cleaned completion from ops to make ph visible');
-    }
-  }
-}
-
-</script>
-
-<style lang="scss">
-
-.af-quill-editor {
-
-  .ql-toolbar.ql-snow[class] {
-    border: none;
-    padding: 0 0 1rem 0;
-    .ql-picker-label{
-      padding-left: 0;
-    }
-  }
-
-  .ql-container {
-    border: 0;
-    .ql-editor {
-      position: relative;
-      padding: 0;
-      min-height: 100px;
-      &.ql-blank::before {
-        left: 0px;
-        font-style: normal;
-      }
-    }
-  }
-
-  // .ql-editor:not(:focus) [completer] {
-  //   display: none;
-  // }
-
-  .ql-editor [completer] {
-    color: gray;
-    font-style: italic;
-  }
-
-  .ql-editor p {
-    margin-bottom: 0.5rem;
-  }
-
-  .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);
-  }
-
-}
-
-
-
-
-</style>