@humandialog/forms.svelte 1.6.9 → 1.7.1

package/components/document/editor.svelte

@@ -26,6 +26,8 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { getAttributes } from "@tiptap/core";
 import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
@@ -69,6 +71,7 @@ export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
 export let onRemoveImage = void 0;
+export let onLinkClick = void 0;
 export let c = "";
 export let pushChangesImmediately = true;
 export let chat = void 0;
@@ -555,6 +558,45 @@ const additionalShortcuts = Extension.create({
     };
   }
 });
+export const CustomLink = Link.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false
+      //showMap: () => {},
+      //setMapQuery: () => {},
+    };
+  },
+  addProseMirrorPlugins() {
+    const plugins = this.parent?.() || [];
+    const extensionOptions = this.options;
+    const clickHandler = new Plugin({
+      key: new PluginKey("handleControlClick"),
+      props: {
+        handleClick(view, pos, event) {
+          if (event.button !== 0) {
+            return false;
+          }
+          if (!view.editable) {
+            return false;
+          }
+          const attrs = getAttributes(view.state, "link");
+          const link = event.target?.closest("a");
+          if (link && attrs.href) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onLinkClick)
+              onLinkClick(attrs.href, attrs.target);
+            return true;
+          }
+          return false;
+        }
+      }
+    });
+    plugins.push(clickHandler);
+    return plugins;
+  }
+});
 onMount(() => {
   editor = new Editor({
     editable: !readOnly,
@@ -598,7 +640,11 @@ onMount(() => {
       Italic,
       Strike,
       Underline,
-      Link,
+      ...onLinkClick ? [
+        CustomLink.configure({
+          //showMap: () => { showMap(true); },
+        })
+      ] : [Link],
       Dropcursor,
       Gapcursor,
       History,
@@ -834,6 +880,9 @@ export function removeTemporaryImage(temporarySrc) {
     return;
   editor.commands.deleteRange(image.range);
 }
+export function addLink(title, href) {
+  editor.chain().setLink({ href }).insertContent(title).unsetMark("link").insertContent(" ").focus().run();
+}
 export function getInnerHtml() {
   return editor.getHTML();
 }
@@ -1014,50 +1063,50 @@ export function hasChanged() {
   return hasChangedValue;
 }
 const paletteMarksCommands = () => [
-  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
-  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
-  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
-  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
+  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong,bold", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "italic,em", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", tags: "under", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", tags: "strike", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
 ];
 const paletteStylesCommands = () => [
-  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
-    if (range)
-      editor.chain().focus().deleteRange(range).setParagraph().run();
-    else
-      editor.chain().focus().setParagraph().run();
-  }, is_active: () => editor?.isActive("paragraph") },
-  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1,head", icon: IcH1, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.chain().focus().setHeading({ level: 1 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 1 }) },
-  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2,head", icon: IcH2, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.chain().focus().setHeading({ level: 2 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
-  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3,head", icon: IcH3, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
     else
       editor.chain().focus().setHeading({ level: 3 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 3 }) },
-  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4,head", icon: IcH4, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
     else
       editor.chain().focus().setHeading({ level: 4 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 4 }) },
-  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
+  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text,normal", icon: FaRemoveFormat, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setParagraph().run();
+    else
+      editor.chain().focus().setParagraph().run();
+  }, is_active: () => editor?.isActive("paragraph") },
+  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", tags: "code", icon: FaCode, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
   //    {   caption: 'Comment',      description: 'With this you can comment the above paragraph',   icon: FaComment,                    on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsComment().run(); else editor.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
-  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
+  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", tags: "quote", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
@@ -1065,7 +1114,7 @@ const paletteStylesCommands = () => [
   }, is_active: () => editor?.isActive("QuoteBlock") },
   //    {   caption: 'Warning',      description: 'An important warning to above paragraph',         icon: FaExclamationTriangle,        on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsWarning().run(); else editor.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
   //    {   caption: 'Info',         description: 'An important info about above paragraph',         icon: FaInfo,                       on_choice: (range) => { if(range) editor.chain().focus().deleteRange(range).setAsInfo().run(); else editor.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
-  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
+  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", tags: "bullet", icon: FaListUl, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     else
@@ -1079,13 +1128,13 @@ const paletteInsertCommands = () => [
     if (onAddImage)
       onAddImage(onAddedImageReady);
   } },
-  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", icon: FaTable, on_choice: (range) => {
+  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", tags: "table", icon: FaTable, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).insertTable().run();
     else
       editor.chain().focus().insertTable().run();
   }, is_active: () => editor?.isActive("table") },
-  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
+  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr,line", icon: FaGripLines, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     else

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

@@ -15,6 +15,7 @@ declare const __propDef: {
         onBlurCb?: undefined;
         onAddImage?: undefined;
         onRemoveImage?: undefined;
+        onLinkClick?: Function | undefined;
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
         chat?: object | undefined;
@@ -43,10 +44,12 @@ declare const __propDef: {
             tbr: string;
         }) | undefined;
         scrollIntoView?: ((param: any) => void) | undefined;
+        CustomLink?: import("@tiptap/core").Mark<{}, any> | undefined;
         save?: (() => Promise<void>) | undefined;
         addTemporaryImage?: ((src: any) => void) | undefined;
         replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
         removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
+        addLink?: ((title: any, href: any) => void) | undefined;
         getInnerHtml?: (() => any) | undefined;
         setInnerHtml?: ((content: any) => void) | undefined;
         setBold?: (() => void) | undefined;
@@ -116,10 +119,12 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
         tbr: string;
     };
     get scrollIntoView(): (param: any) => void;
+    get CustomLink(): import("@tiptap/core").Mark<{}, any>;
     get save(): () => Promise<void>;
     get addTemporaryImage(): (src: any) => void;
     get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
     get removeTemporaryImage(): (temporarySrc: any) => void;
+    get addLink(): (title: any, href: any) => void;
     get getInnerHtml(): () => any;
     get setInnerHtml(): (content: any) => void;
     get setBold(): () => void;

package/components/document/internal/palette.svelte

@@ -57,10 +57,12 @@ export function show(x, y, up = false) {
   visible = true;
   dispatch("palette_shown");
   closeButtonPos = "";
-  setTimeout(() => {
-    const rect = paletteElement.getBoundingClientRect();
-    closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
-  }, 0);
+  if (isDeviceSmallerThan("sm")) {
+    setTimeout(() => {
+      const rect = paletteElement.getBoundingClientRect();
+      closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
+    }, 0);
+  }
 }
 export function show_fullscreen(_width_px, _height_px) {
   isToolbox = false;

package/components/list/List.d.ts

@@ -48,6 +48,8 @@ export declare class rList_definition {
     onInsert: Function | undefined;
     inserter_icon: boolean;
     onOpen: Function | undefined;
+    downloadable: boolean;
+    downloadableFunc: Function | undefined;
     properties: rList_property[];
     tags: rList_property_tags | null;
 }

package/components/list/List.js

@@ -56,6 +56,8 @@ export class rList_definition {
     onInsert = undefined;
     inserter_icon = false;
     onOpen = undefined;
+    downloadable = false;
+    downloadableFunc = undefined;
     properties = [];
     tags = null;
 }

package/components/list/internal/list.element.svelte

@@ -16,6 +16,7 @@ import Summary from "./list.element.summary.svelte";
 import Properties from "./list.element.props.svelte";
 import { isDeviceSmallerThan } from "../../../utils";
 import Icon from "../../icon.svelte";
+import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
 import { FaExternalLinkAlt, FaRegSquare, FaRegCheckSquare } from "svelte-icons/fa/";
@@ -44,7 +45,9 @@ $:
 $:
   focused_class = is_row_active ? "bg-stone-200 dark:bg-stone-700" : "";
 $:
-  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func);
+  download = is_row_active && (definition.downloadable || (definition.downloadableFunc ? definition.downloadableFunc(item) : false));
+$:
+  is_link_like = is_row_active && (!!definition.title_href || !!definition.title_href_func || download);
 if (!typename) {
   if (item.$type)
     typename = item.$type;
@@ -272,6 +275,15 @@ function onToggleMultiSelect(e) {
   if (e)
     e.stopPropagation();
 }
+let isDownloading = false;
+async function onDownloadFile(e) {
+  isDownloading = true;
+  e.preventDefault();
+  e.stopPropagation();
+  if (definition.onOpen)
+    await definition.onOpen(item);
+  isDownloading = false;
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -290,7 +302,11 @@ function onToggleMultiSelect(e) {
                 on:click={onToggleMultiSelect}/>
     {/if}
     
-    <slot name="left" element={item}/>
+    {#if isDownloading}
+        <Spinner class="mt-0.5  ml-2  mr-1" size={5} delay={0}/>
+    {:else}
+        <slot name="left" element={item}/>
+    {/if}
     
     <i class="hidden sm:w-1/2 sm:w-2/3 sm:w-1/3"></i>   <!-- just to force tailwind classes including -->
     
@@ -315,10 +331,19 @@ function onToggleMultiSelect(e) {
                                         onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
                                     }}
                             >  <!--on:click|stopPropagation={followDefinedHRef}-->
-                            <a  class="sm:hover:cursor-pointer underline" 
-                                href={getHRef()} use:link>
-                                {element_title}
-                            </a>
+                            {#if download}
+                                <a  class="sm:hover:cursor-pointer underline" 
+                                    download
+                                    href={getHRef()}
+                                    on:click={onDownloadFile}>
+                                    {element_title}
+                                </a>
+                            {:else}
+                                <a  class="sm:hover:cursor-pointer underline" 
+                                    href={getHRef()} use:link>
+                                    {element_title}
+                                </a>
+                            {/if}
                         </p>
                     {:else}
                         <p  class=" text-base font-semibold 

package/components/list/list.svelte

@@ -252,34 +252,40 @@ function reorderElements(items2, from = null) {
   }
   pushChanges();
 }
-async function insert(title2, summary, after) {
-  let newElement = {
-    [definition.title]: title2,
-    [definition.summary]: summary
-  };
-  if (after && orderAttrib) {
+export function assignOrder(after) {
+  if (!orderAttrib)
+    return 0;
+  if (after) {
     const leftElement = after;
     const leftOrder = leftElement[orderAttrib];
     const rightElement = getNext(items, leftElement);
     if (rightElement) {
       let rightOrder = rightElement[orderAttrib];
       if (rightOrder - leftOrder >= 2)
-        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+        return leftOrder + Math.floor((rightOrder - leftOrder) / 2);
       else {
         reorderElements(items, leftElement);
         rightOrder = rightElement[orderAttrib];
-        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+        return leftOrder + Math.floor((rightOrder - leftOrder) / 2);
       }
     } else
-      newElement[orderAttrib] = leftOrder + ORDER_STEP;
-  } else if (orderAttrib) {
+      return leftOrder + ORDER_STEP;
+  } else {
     const lastElement = getLast(items);
     if (lastElement) {
       const lastOrder = lastElement[orderAttrib];
-      newElement[orderAttrib] = lastOrder + ORDER_STEP;
+      return lastOrder + ORDER_STEP;
     } else
-      newElement[orderAttrib] = MIN_ORDER;
+      return MIN_ORDER;
   }
+}
+async function insert(title2, summary, after) {
+  let newElement = {
+    [definition.title]: title2,
+    [definition.summary]: summary
+  };
+  if (orderAttrib)
+    newElement[orderAttrib] = assignOrder(after);
   await definition.onInsert(newElement);
   return;
   let insertedElement = await definition.onInsert(newElement);

package/components/list/list.svelte.d.ts

@@ -30,6 +30,7 @@ declare const __propDef: {
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
         toggleMultiselection?: (() => void) | undefined;
+        assignOrder?: ((after: object | null) => number) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -60,5 +61,6 @@ export default class List extends SvelteComponentTyped<ListProps, ListEvents, Li
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
     get toggleMultiselection(): () => void;
+    get assignOrder(): (after: object | null) => number;
 }
 export {};

package/components/list/list.title.svelte

@@ -6,6 +6,8 @@ export let onOpen = void 0;
 export let readonly = false;
 export let href = void 0;
 export let hrefFunc = void 0;
+export let downloadable = false;
+export let downloadableFunc = void 0;
 let definition = getContext("rList-definition");
 definition.title = a;
 definition.title_editable = editable;
@@ -14,4 +16,6 @@ definition.title_readonly = readonly;
 definition.title_href = href;
 definition.title_href_func = hrefFunc;
 definition.onOpen = onOpen;
+definition.downloadable = downloadable;
+definition.downloadableFunc = downloadableFunc;
 </script>

package/components/list/list.title.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         readonly?: boolean | undefined;
         href?: string | undefined;
         hrefFunc?: Function | undefined;
+        downloadable?: boolean | undefined;
+        downloadableFunc?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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