@humandialog/forms.svelte 1.2.7 → 1.3.2

package/components/Fab.svelte

@@ -35,6 +35,12 @@ function update(...args) {
   else
     isExpandable = false;
 }
+export function activateMainOperation() {
+  const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
+  if (!mainOperationButton)
+    return;
+  mainOperationButton.click();
+}
 function on_click(e, operation) {
   if (!operation)
     return;
@@ -90,7 +96,8 @@ function getSelectionPos() {
 {#if operations && operations.length > 0}
     {@const topPosition = 350}
     {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
-    <button class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
+    <button     id="__hd_fab_mainOperation"
+                class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 
                     font-medium rounded-full text-sm text-center shadow-md
                     w-[55px] h-[55px] 
                     fixed m-0 absolute bottom-0 right-[0px]

package/components/Fab.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        activateMainOperation?: (() => void) | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -10,5 +12,6 @@ export type FabProps = typeof __propDef.props;
 export type FabEvents = typeof __propDef.events;
 export type FabSlots = typeof __propDef.slots;
 export default class Fab extends SvelteComponentTyped<FabProps, FabEvents, FabSlots> {
+    get activateMainOperation(): () => void;
 }
 export {};

package/components/contextmenu.svelte

@@ -1,7 +1,7 @@
 <script>import { afterUpdate, tick } from "svelte";
 import Icon from "./icon.svelte";
 import { contextItemsStore } from "../stores";
-import { isDeviceSmallerThan } from "../utils";
+import { isDeviceSmallerThan, isOnScreenKeyboardVisible } from "../utils";
 import { hideWholeContextMenu } from "./menu";
 export let widthPx = 400;
 export let menu_items_id_prefix = "__hd_svelte_menuitem_";
@@ -24,16 +24,8 @@ afterUpdate(() => {
     return;
   const m = 15;
   let container_rect = new DOMRect(m, 0, window.innerWidth - 2 * m, window.innerHeight);
-  if (isDeviceSmallerThan("sm")) {
-    const sel = window.getSelection();
-    console.log("sel", sel);
-    if (sel && sel.rangeCount > 0 && sel.focusNode && sel.focusNode.nodeType == sel.focusNode.TEXT_NODE) {
-      const el = sel.focusNode.parentElement;
-      if (el && (el.isContentEditable || el.contentEditable == "true" || el.tagName == "INPUT")) {
-        console.log("keyboard visible, move menu 300px up", el);
-        container_rect.height -= 300;
-      }
-    }
+  if (isOnScreenKeyboardVisible()) {
+    container_rect.height -= 300;
   }
   let xShifted = false;
   if (rect.right > container_rect.right) {

package/components/document/editor.svelte

@@ -1,4 +1,4 @@
-<script>import { onMount, onDestroy, getContext, afterUpdate } from "svelte";
+<script>import { onMount, onDestroy, getContext, afterUpdate, tick } from "svelte";
 import { reef, session } from "@humandialog/auth.svelte";
 import { Editor } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
@@ -10,18 +10,35 @@ 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 Link from "@tiptap/extension-link";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import Italic from "@tiptap/extension-italic";
 import Strike from "@tiptap/extension-strike";
+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 { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
-import { isDeviceSmallerThan, parseWidthDirective } from "../../utils.js";
+import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
 import Palette from "./internal/palette.svelte";
-import { FaFont, FaRemoveFormat, FaCode, FaComment, FaQuoteRight, FaExclamationTriangle, FaInfo, FaImage } from "svelte-icons/fa";
+import {
+  FaFont,
+  FaRemoveFormat,
+  FaCode,
+  FaComment,
+  FaQuoteRight,
+  FaExclamationTriangle,
+  FaInfo,
+  FaImage,
+  FaBold,
+  FaItalic,
+  FaUnderline,
+  FaStrikethrough,
+  FaArrowLeft,
+  FaGripLines
+} 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";
@@ -46,14 +63,34 @@ export function run(onStop = void 0) {
   onFinishEditing = onStop;
   editor.commands.focus();
 }
+let suggestionRange = void 0;
 export function getFormattingOperations(withCaptions = false) {
   let result = [];
+  if (isDeviceSmallerThan("sm")) {
+    result = [
+      {
+        caption: "Back to edit",
+        icon: FaArrowLeft,
+        action: (fi) => {
+          editor?.commands.focus();
+        }
+      },
+      {
+        separator: true
+      }
+    ];
+  }
   commands.forEach((c2) => {
-    result.push({
-      caption: withCaptions ? c2.caption : "",
-      icon: c2.icon,
-      action: c2.on_choice
-    });
+    if (c2.separator) {
+      result.push({ separator: true });
+    } else {
+      result.push({
+        caption: withCaptions ? c2.caption : "",
+        icon: c2.icon,
+        action: (f) => c2.on_choice(suggestionRange),
+        activeFunc: c2.is_active
+      });
+    }
   });
   return result;
 }
@@ -71,6 +108,7 @@ else
                             dark:bg-stone-700 dark:border-stone-600 
                             px-2.5`;
 let last_tick = -1;
+let lockNextBlurCallbacks = 0;
 $:
   updateAfterUIChanges($data_tick_store);
 function updateAfterUIChanges(...args) {
@@ -133,10 +171,17 @@ const suggestion = {
         if (!props.clientRect) {
           return;
         }
-        const cursorRect = props.clientRect();
-        show_command_palette(cursorRect);
-        palette.set_current_editor_range(props.range);
-        palette.filter("");
+        if (isDeviceSmallerThan("sm")) {
+          lockNextBlurCallbacks++;
+          suggestionRange = props.range;
+          editor.commands.blur();
+          setTimeout(() => UI.fab?.activateMainOperation(), 100);
+        } else {
+          const cursorRect = props.clientRect();
+          show_command_palette(cursorRect);
+          palette.set_current_editor_range(props.range);
+          palette.filter("");
+        }
       },
       onUpdate(props) {
         if (is_command_palette_visible) {
@@ -319,69 +364,6 @@ 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 += "?";
-          }
-        } else
-          fullPath += "&";
-        fullPath += param.key.toLowerCase();
-        fullPath += "=" + param.value;
-      }
-    }
-  } else {
-    const user = $session.localDevCurrentUser;
-    if (user) {
-      if (fullPath.includes("?")) {
-        fullPath += "&";
-      } else {
-        fullPath += "?";
-      }
-      if (user.uid > 0)
-        fullPath += "x-reef-user-id=" + user.uid;
-      else
-        fullPath += "x-reef-as-user=" + user.username;
-      if (user.role)
-        fullPath += "&x-reef-access-role=" + user.role;
-      if (user.groupId)
-        fullPath += "&x-reef-group-id=" + user.groupId;
-    }
-  }
-  return fullPath;
-}
 let downloadedImages = [];
 const CrossImage = Image.extend({
   addAttributes() {
@@ -478,6 +460,8 @@ onMount(() => {
       Code,
       Italic,
       Strike,
+      Underline,
+      Link,
       Dropcursor,
       Gapcursor,
       History,
@@ -491,15 +475,20 @@ onMount(() => {
       hasChangedValue = true;
       changedValue = editor2.getHTML();
       handleImagesChanges(transaction);
+      refreshToolbarOperations();
     },
     onFocus({ editor: editor2, event }) {
       if (onFocusCb)
         onFocusCb();
     },
     onBlur({ editor: editor2, event }) {
-      on_blur();
-      if (onBlurCb)
-        onBlurCb();
+      if (lockNextBlurCallbacks > 0) {
+        lockNextBlurCallbacks--;
+      } else {
+        on_blur();
+        if (onBlurCb)
+          onBlurCb();
+      }
     },
     onContentError({ editor: editor2, error, disableCollaboration }) {
       console.log("editor content error:", error);
@@ -639,61 +628,101 @@ function handleImagesChanges(transaction) {
     deletedImageSrcs.forEach((src) => onRemoveImage(src));
 }
 let commands = [
+  { caption: "Bold", description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: "Italic", description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: "Underlie", description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: "Strikethrough", description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") },
+  { caption: "Styles", separator: true },
   { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setParagraph().run();
     else
       editor.commands.setParagraph();
-  } },
+  }, is_active: () => editor?.isActive("paragraph") },
   { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.commands.setHeading({ level: 1 });
-  } },
-  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+  }, is_active: () => editor?.isActive("heading", { level: 1 }) },
+  { caption: "Heading 2", description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.commands.setHeading({ level: 2 });
-  } },
+  }, is_active: () => editor?.isActive("heading", { level: 2 }) },
   { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsCode().run();
     else
       editor.commands.setAsCode();
-  } },
+  }, 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.commands.setAsComment();
-  } },
+  }, is_active: () => editor?.isActive("CommentBlock") },
   { caption: "Quote", description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
       editor.commands.setAsQuote();
-  } },
+  }, 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.commands.setAsWarning();
-  } },
+  }, 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.commands.setAsInfo();
-  } },
+  }, is_active: () => editor?.isActive("InfoBlock") },
+  { caption: "Other blocks", separator: true },
   { caption: "Image", description: "Add image to document", icon: FaImage, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).run();
     if (onAddImage)
       onAddImage(onAddedImageReady);
+  } },
+  { caption: "Horizontal rule", description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+    else
+      editor.commands.setHorizontalRule();
   } }
 ];
+function makeBold(range) {
+  if (range) {
+    editor.chain().focus().deleteRange(range).toggleBold().run();
+  } else {
+    editor.chain().focus().toggleBold().run();
+  }
+}
+function makeItalic(range) {
+  if (range) {
+    editor.chain().focus().deleteRange(range).toggleItalic().run();
+  } else {
+    editor.chain().focus().toggleItalic().run();
+  }
+}
+function makeUnderline(range) {
+  if (range) {
+    editor.chain().focus().deleteRange(range).toggleUnderline().run();
+  } else {
+    editor.chain().focus().toggleUnderline().run();
+  }
+}
+function makeStrikethrough(range) {
+  if (range) {
+    editor.chain().focus().deleteRange(range).toggleStrike().run();
+  } else {
+    editor.chain().focus().toggleStrike().run();
+  }
+}
 </script>
 
 

package/components/document/internal/Document_command.d.ts

@@ -6,4 +6,6 @@ export declare class Document_command {
     icon: any;
     icon_size?: number;
     on_choice: any;
+    is_active: any;
+    separator?: boolean;
 }

package/components/document/internal/Document_command.js

@@ -6,4 +6,6 @@ export class Document_command {
     icon;
     icon_size = 6;
     on_choice;
+    is_active;
+    separator = false;
 }

package/components/document/internal/palette.row.svelte

@@ -4,18 +4,40 @@ export let id;
 export let cmd;
 export let width_px = 400;
 export let is_highlighted = false;
+export let active = false;
 let icon_placeholder_size = cmd.description ? 12 : 6;
 let icon_size = cmd.icon_size ? cmd.icon_size : icon_placeholder_size - 6;
-let cl = $$props.class ? $$props.class : "";
+let cl = $$props.class ?? "";
 $:
-  active_class = is_highlighted ? "bg-stone-200 dark:bg-stone-700" : "";
+  active_class = calculateBackground(is_highlighted, active);
+function calculateBackground(...args) {
+  if (is_highlighted) {
+    if (active)
+      return "bg-stone-400/40 dark:bg-stone-400/40";
+    else
+      return "bg-stone-400/30 dark:bg-stone-400/30";
+  } else {
+    if (active)
+      return "bg-stone-400/20 dark:bg-stone-400/20";
+    else
+      return "";
+  }
+}
+let element;
+export function scrollToView() {
+  element?.scrollIntoView({
+    block: "nearest",
+    inline: "nearest"
+  });
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div id={id} class="font-medium m-0 p-0 text-sm w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
      on:click 
      on:mousemove
-     on:mousedown>
+     on:mousedown
+     bind:this={element}>
     <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>

package/components/document/internal/palette.row.svelte.d.ts

@@ -7,6 +7,8 @@ declare const __propDef: {
         cmd: Document_command;
         width_px?: number | undefined;
         is_highlighted?: boolean | undefined;
+        active?: boolean | undefined;
+        scrollToView?: (() => void) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -21,6 +23,7 @@ export type PaletteProps = typeof __propDef.props;
 export type PaletteEvents = typeof __propDef.events;
 export type PaletteSlots = typeof __propDef.slots;
 export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteEvents, PaletteSlots> {
+    get scrollToView(): () => void;
     get id(): string;
     /**accessor*/
     set id(_: string);
@@ -33,5 +36,11 @@ export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteE
     get is_highlighted(): boolean | undefined;
     /**accessor*/
     set is_highlighted(_: boolean | undefined);
+    get active(): boolean | undefined;
+    /**accessor*/
+    set active(_: boolean | undefined);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
 }
 export {};