@humandialog/forms.svelte 1.2.5 → 1.2.7

package/components/document/editor.svelte

@@ -1,5 +1,5 @@
-<script>import { onMount, onDestroy, getContext } from "svelte";
-import { session } from "@humandialog/auth.svelte";
+<script>import { onMount, onDestroy, getContext, afterUpdate } from "svelte";
+import { reef, session } from "@humandialog/auth.svelte";
 import { Editor } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import Document from "@tiptap/extension-document";
@@ -17,7 +17,7 @@ import Strike from "@tiptap/extension-strike";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
-import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
@@ -356,7 +356,8 @@ function prepareFullImagePath(url) {
           } else {
             fullPath += "?";
           }
-        }
+        } else
+          fullPath += "&";
         fullPath += param.key.toLowerCase();
         fullPath += "=" + param.value;
       }
@@ -381,11 +382,15 @@ function prepareFullImagePath(url) {
   }
   return fullPath;
 }
+let downloadedImages = [];
 const CrossImage = Image.extend({
   addAttributes() {
     return {
-      crossorigin: {
-        default: "use-credentials"
+      //crossorigin: {
+      //    default: 'use-credentials'
+      //},
+      loading: {
+        default: "lazy"
       },
       dataPath: {
         default: null,
@@ -395,9 +400,42 @@ const CrossImage = Image.extend({
         renderHTML: (attributes) => {
           const dataPath = attributes.dataPath;
           if (dataPath) {
+            let src = "";
+            let found = downloadedImages.find((e) => e.dataPath == dataPath);
+            if (found) {
+              if (found.url)
+                src = found.url;
+            } else {
+              const newEntry = {
+                dataPath,
+                url: ""
+              };
+              downloadedImages.push(newEntry);
+              reef.fetch(`/json/anyv/${dataPath}`).then(
+                (res) => {
+                  if (res.ok) {
+                    res.blob().then((blob) => {
+                      newEntry.url = URL.createObjectURL(blob);
+                      console.log("image loaded: ", dataPath, newEntry.url);
+                      editorElement.querySelectorAll("img").forEach((img) => {
+                        if (img.getAttribute("data-path") == dataPath)
+                          img.src = newEntry.url;
+                      });
+                    });
+                  } else {
+                    res.text().then((err) => onErrorShowAlert(err));
+                  }
+                },
+                (err) => {
+                  onErrorShowAlert(err);
+                }
+              );
+            }
             return {
               "data-path": dataPath,
-              src: prepareFullImagePath(dataPath)
+              //    src: prepareFullImagePath(dataPath)
+              //      src: 'http://localhost/_hd_force_img_error'
+              src
             };
           } else {
             return {};
@@ -452,7 +490,7 @@ onMount(() => {
     onTransaction({ editor: editor2, transaction }) {
       hasChangedValue = true;
       changedValue = editor2.getHTML();
-      handleImagesDeletions(transaction);
+      handleImagesChanges(transaction);
     },
     onFocus({ editor: editor2, event }) {
       if (onFocusCb)
@@ -465,6 +503,8 @@ onMount(() => {
     },
     onContentError({ editor: editor2, error, disableCollaboration }) {
       console.log("editor content error:", error);
+    },
+    onUpdate({ editor: editor2 }) {
     }
   });
 });
@@ -570,19 +610,16 @@ function show_command_palette(cursorRect) {
   else
     palette.show(x, y, show_above);
 }
-function onAddedImageReady(dataPath) {
-  const imgFullPath = prepareFullImagePath(dataPath);
+async function onAddedImageReady(dataPath) {
   editor.commands.insertContent({
     type: "image",
     attrs: {
-      src: imgFullPath,
+      src: "",
       dataPath
     }
   });
 }
-function handleImagesDeletions(transaction) {
-  if (!onRemoveImage)
-    return;
+function handleImagesChanges(transaction) {
   const getImageSrcs = (fragment) => {
     let srcs = /* @__PURE__ */ new Set();
     fragment.forEach((node) => {
@@ -598,7 +635,8 @@ function handleImagesDeletions(transaction) {
     return;
   }
   let deletedImageSrcs = [...previousSrcs].filter((src) => !currentSrcs.has(src));
-  deletedImageSrcs.forEach((src) => onRemoveImage(src));
+  if (onRemoveImage)
+    deletedImageSrcs.forEach((src) => onRemoveImage(src));
 }
 let commands = [
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",