@humandialog/forms.svelte 1.2.4 → 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";
@@ -133,7 +133,8 @@ const suggestion = {
         if (!props.clientRect) {
           return;
         }
-        show_command_palette();
+        const cursorRect = props.clientRect();
+        show_command_palette(cursorRect);
         palette.set_current_editor_range(props.range);
         palette.filter("");
       },
@@ -355,7 +356,8 @@ function prepareFullImagePath(url) {
           } else {
             fullPath += "?";
           }
-        }
+        } else
+          fullPath += "&";
         fullPath += param.key.toLowerCase();
         fullPath += "=" + param.value;
       }
@@ -380,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,
@@ -394,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 {};
@@ -451,7 +490,7 @@ onMount(() => {
     onTransaction({ editor: editor2, transaction }) {
       hasChangedValue = true;
       changedValue = editor2.getHTML();
-      handleImagesDeletions(transaction);
+      handleImagesChanges(transaction);
     },
     onFocus({ editor: editor2, event }) {
       if (onFocusCb)
@@ -464,6 +503,8 @@ onMount(() => {
     },
     onContentError({ editor: editor2, error, disableCollaboration }) {
       console.log("editor content error:", error);
+    },
+    onUpdate({ editor: editor2 }) {
     }
   });
 });
@@ -528,8 +569,8 @@ function on_palette_shown() {
 function on_palette_hidden() {
   is_command_palette_visible = false;
 }
-function show_command_palette() {
-  let rect = get_selection_bbox();
+function show_command_palette(cursorRect) {
+  let rect = cursorRect;
   let client_rect = get_window_box();
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
@@ -569,19 +610,16 @@ function show_command_palette() {
   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) => {
@@ -597,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/components/document/internal/palette.svelte

@@ -26,19 +26,21 @@ export function showAsToolbox(rect) {
   const windowWidth = window.innerWidth - 2 * margin;
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
-  const mainContentDiv = document.getElementById("__hd_svelte_main_content_container");
   toolboxY += window.scrollY;
   css_style = `position: absolute; left:${toolboxX}px; top:${toolboxY}px;`;
   dispatch("palette_shown");
 }
-let toolboxElement;
+let paletteElement;
 afterUpdate(
   async () => {
-    if (isToolbox && visible && toolboxElement) {
+    if (
+      /*isToolbox && */
+      visible && paletteElement
+    ) {
       let layoutRoot = document.getElementById("__hd_svelte_layout_root");
-      if (!!layoutRoot && toolboxElement.parentElement != layoutRoot) {
+      if (!!layoutRoot && paletteElement.parentElement != layoutRoot) {
         await tick();
-        layoutRoot.appendChild(toolboxElement);
+        layoutRoot.appendChild(paletteElement);
       }
     }
   }
@@ -181,7 +183,7 @@ function mouseup(e) {
             on:touchstart={mousedown}
             on:touchmove={mousemove}
             on:touchend={mouseup}
-            bind:this={toolboxElement}>
+            bind:this={paletteElement}>
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
                 {@const id = "cpi_" + idx}
@@ -208,7 +210,8 @@ function mouseup(e) {
 {:else}
     <div    class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30" 
             hidden={!visible}
-            style={css_style}>
+            style={css_style}
+            bind:this={paletteElement}>
         {#if filtered_commands && filtered_commands.length}
             {#each filtered_commands as cmd, idx (cmd.caption)}
                 {@const id = "cpi_" + idx}

package/package.json

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