@humandialog/forms.svelte 1.2.2 → 1.2.3

package/components/document/editor.svelte

@@ -1,4 +1,5 @@
 <script>import { onMount, onDestroy, getContext } from "svelte";
+import { session } from "@humandialog/auth.svelte";
 import { Editor } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
 import Document from "@tiptap/extension-document";
@@ -8,6 +9,7 @@ import Heading from "@tiptap/extension-heading";
 import Blockquote from "@tiptap/extension-blockquote";
 import HardBreak from "@tiptap/extension-hard-break";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Image from "@tiptap/extension-image";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import Italic from "@tiptap/extension-italic";
@@ -19,7 +21,7 @@ import { data_tick_store, contextItemsStore, contextTypesStore } from "../../sto
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
-import { FaFont, FaRemoveFormat, FaCode, FaComment, FaQuoteRight, FaExclamationTriangle, FaInfo } from "svelte-icons/fa";
+import { FaFont, FaRemoveFormat, FaCode, FaComment, FaQuoteRight, FaExclamationTriangle, FaInfo, FaImage } from "svelte-icons/fa";
 import IcH1 from "./internal/h1.icon.svelte";
 import IcH2 from "./internal/h2.icon.svelte";
 import IcH3 from "./internal/h3.icon.svelte";
@@ -35,6 +37,8 @@ export let typename = "";
 export let compact = false;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
+export let onAddImage = void 0;
+export let onRemoveImage = void 0;
 export let c = "";
 export let pushChangesImmediately = true;
 let onFinishEditing = void 0;
@@ -67,7 +71,9 @@ else
                             dark:bg-stone-700 dark:border-stone-600 
                             px-2.5`;
 let last_tick = -1;
-$: {
+$:
+  updateAfterUIChanges($data_tick_store);
+function updateAfterUIChanges(...args) {
   if (last_tick < $data_tick_store) {
     if (hasChangedValue)
       saveData();
@@ -312,6 +318,77 @@ const QuoteBlock = Paragraph.extend({
     };
   }
 });
+function prepareFullImagePath(url) {
+  if (!url.startsWith("/json/")) {
+    const apiVer = $session.configuration.api_version ?? "anyv";
+    if (url.startsWith("/"))
+      url = `/json/${apiVer}${url}`;
+    else
+      url = `/json/${apiVer}/${url}`;
+  }
+  let fullPath = "";
+  let absolute_pattern = /^https?:\/\//i;
+  if (!absolute_pattern.test(url)) {
+    fullPath = $session.apiAddress;
+    if (fullPath.endsWith("/")) {
+      if (url.startsWith("/"))
+        fullPath = fullPath + url.substr(1);
+      else
+        fullPath = fullPath + url;
+    } else {
+      if (url.startsWith("/"))
+        fullPath = fullPath + url;
+      else
+        fullPath = fullPath + "/" + url;
+    }
+  } else
+    fullPath = url;
+  if ($session.tenants.length > 0) {
+    const currentGroupInfo = $session.tenants.find((t) => t.id == $session.tid);
+    if (currentGroupInfo && currentGroupInfo.headers && currentGroupInfo.headers.length > 0) {
+      const paramsNo = currentGroupInfo.headers.length;
+      for (let i = 0; i < paramsNo; i++) {
+        const param = currentGroupInfo.headers[i];
+        if (i == 0) {
+          if (fullPath.includes("?")) {
+            fullPath += "&";
+          } else {
+            fullPath += "?";
+          }
+        }
+        fullPath += param.key.toLowerCase();
+        fullPath += "=" + param.value;
+      }
+    }
+  }
+  return fullPath;
+}
+const CrossImage = Image.extend({
+  addAttributes() {
+    return {
+      crossorigin: {
+        default: "use-credentials"
+      },
+      dataPath: {
+        default: null,
+        parseHTML: (element) => {
+          return element.getAttribute("data-path");
+        },
+        renderHTML: (attributes) => {
+          const dataPath = attributes.dataPath;
+          if (dataPath) {
+            return {
+              "data-path": dataPath,
+              src: prepareFullImagePath(dataPath)
+            };
+          } else {
+            return {};
+          }
+        }
+      }
+    };
+  }
+});
 onMount(() => {
   editor = new Editor({
     editorProps: {
@@ -327,6 +404,12 @@ onMount(() => {
       Heading.configure({
         levels: [1, 2]
       }),
+      /*Image.configure({
+          HTMLAttributes: {
+              crossorigin: 'use-credentials'
+          }
+      }),*/
+      CrossImage,
       HardBreak,
       HorizontalRule,
       // custom
@@ -351,6 +434,7 @@ onMount(() => {
     onTransaction({ editor: editor2, transaction }) {
       hasChangedValue = true;
       changedValue = editor2.getHTML();
+      handleImagesDeletions(transaction);
     },
     onFocus({ editor: editor2, event }) {
       if (onFocusCb)
@@ -468,6 +552,36 @@ function show_command_palette() {
   else
     palette.show(x, y, show_above);
 }
+function onAddedImageReady(dataPath) {
+  const imgFullPath = prepareFullImagePath(dataPath);
+  editor.commands.insertContent({
+    type: "image",
+    attrs: {
+      src: imgFullPath,
+      dataPath
+    }
+  });
+}
+function handleImagesDeletions(transaction) {
+  if (!onRemoveImage)
+    return;
+  const getImageSrcs = (fragment) => {
+    let srcs = /* @__PURE__ */ new Set();
+    fragment.forEach((node) => {
+      if (node.type.name === "image") {
+        srcs.add(node.attrs.dataPath);
+      }
+    });
+    return srcs;
+  };
+  let currentSrcs = getImageSrcs(transaction.doc.content);
+  let previousSrcs = getImageSrcs(transaction.before.content);
+  if (currentSrcs.size === 0 && previousSrcs.size === 0) {
+    return;
+  }
+  let deletedImageSrcs = [...previousSrcs].filter((src) => !currentSrcs.has(src));
+  deletedImageSrcs.forEach((src) => onRemoveImage(src));
+}
 let commands = [
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
@@ -516,6 +630,12 @@ let commands = [
       editor.chain().focus().deleteRange(range).setAsInfo().run();
     else
       editor.commands.setAsInfo();
+  } },
+  { caption: "Image", description: "Add image to document", icon: FaImage, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).run();
+    if (onAddImage)
+      onAddImage(onAddedImageReady);
   } }
 ];
 </script>

package/components/document/editor.svelte.d.ts

@@ -11,6 +11,8 @@ declare const __propDef: {
         compact?: boolean | undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
+        onAddImage?: undefined;
+        onRemoveImage?: undefined;
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
         run?: ((onStop?: undefined) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -28,10 +28,12 @@
   "dependencies": {
     "@humandialog/auth.svelte": "^1.8.3",
     "@tiptap/core": "^2.11.0",
+    "@tiptap/extension-image": "^2.11.0",
     "@tiptap/pm": "^2.11.0",
     "@tiptap/starter-kit": "^2.11.0",
     "@tiptap/suggestion": "^2.11.0",
     "flowbite-svelte": "^0.44.4",
+    "pdfjs-dist": "^4.10.38",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"
   },

package/utils.js

@@ -23,6 +23,11 @@ export function isDeviceSmallerThan(br)
 export function selectItem(itm)
 {
     let data_context = get(contextItemsStore);
+
+    const prevSel = data_context['sel'];
+    if(prevSel === itm)
+        return;
+
     data_context['sel'] = itm;
     data_context.focused = 'sel';
     contextItemsStore.set( {...data_context} )
@@ -43,6 +48,7 @@ export function activateItem(context_level, itm, operations=null)
     data_context.focused = context_level;
     contextItemsStore.set( {...data_context} )
 
+    
     let ticket = get(data_tick_store)
     ticket++;
     data_tick_store.set(ticket)
@@ -60,6 +66,7 @@ export function clearActiveItem(context_level)
     data_context.focused = context_level;
     contextItemsStore.set( {...data_context} )
 
+    
     let ticket = get(data_tick_store)
     ticket++;
     data_tick_store.set(ticket)