@humandialog/forms.svelte 1.4.7 → 1.4.8

package/components/Fab.svelte

@@ -1,10 +1,19 @@
-<script>import { each } from "svelte/internal";
-import { contextToolbarOperations, pageToolbarOperations, contextItemsStore, toolsActionsOperations, fabCollapsed } from "../stores.js";
+<script>import { contextToolbarOperations, pageToolbarOperations, leftHandedFAB, toolsActionsOperations, fabCollapsed, bottom_bar_visible_store, main_sidebar_visible_store } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle, FaEllipsisV, FaRegDotCircle, FaDotCircle } from "svelte-icons/fa/";
 import { isDeviceSmallerThan } from "../utils.js";
+import { tick } from "svelte";
+export let mainPageCoords = void 0;
 $:
-  setupCurrentContextOperations($pageToolbarOperations, $contextToolbarOperations, $toolsActionsOperations, $fabCollapsed);
+  setupCurrentContextOperations(
+    $pageToolbarOperations,
+    $contextToolbarOperations,
+    $toolsActionsOperations,
+    $fabCollapsed,
+    $bottom_bar_visible_store,
+    $main_sidebar_visible_store,
+    $leftHandedFAB
+  );
 let operations = [];
 let mainOperation = null;
 let secondaryOperation = null;
@@ -13,7 +22,8 @@ let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
 let isDirectPositioningMode = false;
-function setupCurrentContextOperations(...args) {
+async function setupCurrentContextOperations(...args) {
+  await tick();
   let opVer = 0;
   let main_FAB_position = "";
   isDirectPositioningMode = false;
@@ -179,7 +189,6 @@ function getSelectionPos() {
     return 0;
 }
 function calculatePosition(operation) {
-  const isLeftHanded = false;
   let result = "";
   const fab = operation.fab;
   if (fab.length != 3)
@@ -192,46 +201,62 @@ function calculatePosition(operation) {
   const width = 55;
   const height = 55;
   const margin = 10;
-  if (!isLeftHanded) {
+  let lShift = 0;
+  let tShift = 0;
+  let rShift = 0;
+  let bShift = 0;
+  let vMiddle = "50vh";
+  if (!isDeviceSmallerThan("sm")) {
+    const container = document.getElementById("__hd_svelte_main_content_container");
+    if (container) {
+      const containerRect = container?.getBoundingClientRect();
+      lShift = containerRect.x;
+      tShift = containerRect.y;
+      bShift = window.innerHeight - containerRect.bottom;
+      rShift = window.innerWidth - containerRect.right;
+      vMiddle = `${containerRect.x + containerRect.width / 2}px`;
+    }
+  }
+  if (!$leftHandedFAB) {
     switch (section) {
       case "M":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   } else {
     switch (section) {
       case "M":
-        result = `left: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "S":
-        result = `right: ${margin + col_no * width}px; bottom: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; bottom: ${bShift + margin + row_no * height}px`;
         break;
       case "A":
-        result = `left: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `left: ${lShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "C":
-        result = `right: ${margin + col_no * width}px; top: calc(50vh - ${row_no * height}px)`;
+        result = `right: ${rShift + margin + col_no * width}px; top: calc(${vMiddle} - ${row_no * height}px)`;
         break;
       case "T":
-        result = `left: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `left: ${lShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
       case "F":
-        result = `right: ${margin + col_no * width}px; top: ${margin + row_no * height}px`;
+        result = `right: ${rShift + margin + col_no * width}px; top: ${tShift + margin + row_no * height}px`;
         break;
     }
   }
@@ -246,8 +271,13 @@ function operationVisible(operation) {
     if (operation.fab == "M10")
       return true;
     return false;
-  } else
+  } else {
+    if (operation.disabledFunc)
+      return !operation.disabledFunc();
+    else if (operation.disabled)
+      return false;
     return true;
+  }
 }
 </script>
 
@@ -266,7 +296,7 @@ function operationVisible(operation) {
                                 fixed m-0                            
                                 flex items-center justify-center
                                 disable-dbl-tap-zoom
-                                cursor-pointer z-40"
+                                cursor-pointer z-20"
                                 style={position}
                                 on:click|stopPropagation={(e) => {on_click(e, operation)}}
                                 on:mousedown={mousedown} >

package/components/Fab.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        mainPageCoords?: undefined;
         activateMainOperation?: (() => void) | undefined;
     };
     events: {

package/components/Floating_container.svelte

@@ -2,6 +2,7 @@
 import { isDeviceSmallerThan } from "../utils";
 import { pushToolsActionsOperations, popToolsActionsOperations } from "../stores";
 import { FaTimes } from "svelte-icons/fa";
+import Icon from "./icon.svelte";
 let x;
 let y;
 let visible = false;
@@ -10,6 +11,7 @@ let props = {};
 let around_rect;
 let rootElement;
 let internalElement;
+let closeButtonPos = "";
 export async function show(around, _toolbar, _props = {}) {
   if (around instanceof DOMRect) {
     x = around.left;
@@ -34,7 +36,7 @@ export async function show(around, _toolbar, _props = {}) {
   props.onSizeChanged = () => onSizeChanged();
   hide_window_indicator = 0;
   window.addEventListener("click", on_before_window_click, true);
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -63,7 +65,7 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (visible)
+  if (false)
     popToolsActionsOperations();
   visible = false;
   cssPosition = calculatePosition(x, y, around_rect, false, false);
@@ -124,6 +126,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
+    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -144,15 +147,28 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; width: max-content; height:max-content; display: block`;
+    closeButtonPos = ``;
   }
   return result;
 }
 </script>
 
 <div    id="__hd_svelte_floating_container"
-        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-30 fixed "
+        class="p-2 bg-stone-100 dark:bg-stone-800 rounded-lg shadow-md shadow-stone-500 dark:shadow-black z-40 fixed "
         style={cssPosition}
         bind:this={rootElement}>
+        {#if closeButtonPos}
+    <button class="     fixed w-6 h-6 flex items-center justify-center
+                        text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                        focus:outline-none font-medium rounded-full text-sm text-center
+                        dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                        focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+            style={closeButtonPos}
+            on:click={ hide }>
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
     <svelte:component this={toolbar} {...props} bind:this={internalElement} />
 </div>
 

package/components/combo/combo.svelte

@@ -6,6 +6,7 @@ import { rCombo_definition, rCombo_item, cached_sources } from "./combo";
 import { FaChevronDown, FaTimes } from "svelte-icons/fa";
 import Icon from "../icon.svelte";
 import { reef } from "@humandialog/auth.svelte/dist/index.js";
+import { showMenu } from "../menu.js";
 export let label = "";
 export let self = null;
 export let a = "";
@@ -140,13 +141,19 @@ afterUpdate(() => {
   if (is_dropdown_open && textbox && document.activeElement != textbox)
     textbox.focus();
 });
+let closeButtonPos = "";
+let dropdownElement;
 function dropdown_action(node) {
-  if (is_dropdown_open)
-    dropdown_height = node.getBoundingClientRect().height;
+  if (is_dropdown_open) {
+    const rect = node.getBoundingClientRect();
+    dropdown_height = rect.height;
+  }
   return {
     update() {
-      if (is_dropdown_open)
-        dropdown_height = node.getBoundingClientRect().height;
+      if (is_dropdown_open) {
+        const rect = node.getBoundingClientRect();
+        dropdown_height = rect.height;
+      }
     },
     destroy() {
     }
@@ -174,58 +181,7 @@ export function show(event, hide_callback) {
   client_rect.y = 0;
   client_rect.width = window.innerWidth;
   client_rect.height = window.innerHeight;
-  let rect;
-  if (is_compact)
-    rect = textbox.getBoundingClientRect();
-  else
-    rect = combo.getBoundingClientRect();
-  let top_space = rect.y;
-  let bottom_space = client_rect.height - (rect.y + rect.height);
-  let palette_max_height_px = 500;
-  let palette_width_px = rect.width;
-  if (palette_width_px < 120)
-    palette_width_px = 120;
-  let preferred_palette_height = dropdown_height > 0 ? dropdown_height : palette_max_height_px;
-  let preferred_palette_width = palette_width_px;
-  let x = 0, y = 0;
-  let show_above = false;
-  let show_fullscreen = false;
-  if (client_rect.width < preferred_palette_width)
-    show_fullscreen = true;
-  else if (rect.x + preferred_palette_width > client_rect.width)
-    x = client_rect.width - preferred_palette_width;
-  else
-    x = rect.x;
-  if (client_rect.height < preferred_palette_height)
-    show_fullscreen = true;
-  else if (bottom_space >= preferred_palette_height)
-    y = rect.y + rect.height;
-  else if (top_space >= preferred_palette_height) {
-    y = rect.y;
-    show_above = true;
-  } else
-    y = rect.y + rect.height;
-  if (isDeviceSmallerThan("sm")) {
-    let screenRect = new DOMRect();
-    screenRect.x = 0;
-    screenRect.y = 0;
-    screenRect.width = window.innerWidth;
-    screenRect.height = window.innerHeight;
-    const margin = 5;
-    const maxHeight = screenRect.height / 2 - margin;
-    const width = screenRect.width - 2 * margin;
-    x = margin;
-    y = screenRect.bottom - margin;
-    dropdown_position = `position: fixed; left: ${x}px; top: ${y}px; transform: translate(0, -100%); width: ${width}px; max-height: ${maxHeight}px; display: block`;
-  } else if (show_fullscreen) {
-    dropdown_position = `position: fixed; left: 0px; top: 0px; width: ${client_rect.width}px; height: ${client_rect.height}px;`;
-  } else {
-    dropdown_position = `min-width: ${palette_width_px}px; max-height:${palette_max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
-    if (show_above)
-      dropdown_position += " transform: translate(0, -100%);";
-    if (!is_compact)
-      dropdown_position += `width: ${preferred_palette_width}px`;
-  }
+  openDropdownAsMenu();
   is_dropdown_open = true;
   if (filtered) {
     if (!textbox)
@@ -243,7 +199,7 @@ export function show(event, hide_callback) {
       subtree: true
     });
   }
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -264,13 +220,37 @@ export function show(event, hide_callback) {
     });
   }
 }
+function openDropdownAsMenu() {
+  let rect;
+  if (is_compact)
+    rect = textbox.getBoundingClientRect();
+  else
+    rect = combo.getBoundingClientRect();
+  let operations = [];
+  if (hasNone)
+    operations.push({
+      caption: "<none>",
+      action: (f) => on_choose(null)
+    });
+  if (definition && definition.collection)
+    source_fetched(definition.collection);
+  const _filtered_source = filtered_source ? filtered_source : definition.source;
+  _filtered_source.forEach((i) => {
+    operations.push({
+      caption: i.Name ?? i.Key,
+      icon: i.Icon ?? void 0,
+      action: (f) => on_choose(i)
+    });
+  });
+  console.log("operations", operations);
+  showMenu(rect, operations);
+}
 export function hide() {
   if (!is_dropdown_open)
     return;
   if (mutation_observer)
     mutation_observer.disconnect();
   is_dropdown_open = false;
-  popToolsActionsOperations();
   dropdown_position = "display: none;";
   combo_text = get_combo_text();
   if (!!textbox)
@@ -464,7 +444,7 @@ function on_input_change() {
   if (!is_dropdown_open)
     return;
   filtered_source = get_filtered_source();
-  highlighted_option = filtered_source.length > 0 ? filtered_source[0] : null;
+  openDropdownAsMenu();
 }
 let new_item_option;
 function get_filtered_source() {
@@ -664,71 +644,91 @@ function on_focus_out(e) {
         
     </div>
 
-    <div    hidden={!is_dropdown_open} 
-            class="not-prose {cs} 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 overflow-y-auto cursor-pointer z-30"
-            style={dropdown_position}
-            use:dropdown_action>
-        <ul class="py-1">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!--div    hidden={!is_dropdown_open}>
+        {#if closeButtonPos}
+            {#key closeButtonPos}
+                <button class="     fixed w-6 h-6 flex items-center justify-center
+                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                    focus:outline-none font-medium rounded-full text-sm text-center
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                        style={closeButtonPos}
+                        on:click={ hide }>
+                    <Icon component={FaTimes} s="md"/>
+                </button>
+            {/key}
+        {/if}
 
-            {#if definition.source && definition.source.length}
-                {#if hasNone}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 ml-12 sm:ml-0" 
-                        class:bg-stone-100={highlighted_option == null}
-                        class:dark:bg-stone-700={highlighted_option == null}
-                        class:dark:hover:bg-stone-700={highlighted_option == null}
-                        on:mousemove={() => on_mouse_move(null)}
-                        on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
-                        tabindex="-1">
+        <div    class="not-prose {cs} 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 overflow-y-auto cursor-pointer z-40
+                    fixed"
+                style={dropdown_position}
+                bind:this={dropdownElement}
+                use:dropdown_action>
+            
+                
 
-                        <h4 class="ml-2">
-                            &lt;none&gt;
-                        </h4>
-                    </li>
-                {/if}
+            <ul class="py-1">
 
-                {@const _filtered_source = filtered_source ? filtered_source : definition.source}
-                {#if _filtered_source.length > 0}
-                    {#each _filtered_source as item (item.Key)}
-                        {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                {#if definition.source && definition.source.length}
+                    {#if hasNone}
+                        
                         <li class="rounded flex flex-row items-center {font_size}
-                                space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
-                            on:mousemove={() => on_mouse_move(item)}
-                            on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                    space-x-10 px-4 py-2 ml-12 sm:ml-0" 
+                            class:bg-stone-100={highlighted_option == null}
+                            class:dark:bg-stone-700={highlighted_option == null}
+                            class:dark:hover:bg-stone-700={highlighted_option == null}
+                            on:mousemove={() => on_mouse_move(null)}
+                            on:click|preventDefault|stopPropagation={async () => await on_choose(null)}
                             tabindex="-1">
 
-                            {#if icon}
-                                {#if item.Color}
-                                    <Icon s="md" circle={true} color={item.Color}/>
-                                {:else if item.Avatar} 
-                                    <Icon s="md" circle={true} symbol={item.Avatar}/>
-                                {:else if item.Icon}
-                                    <Icon s="md" component={item.Icon}/>
-                                {:else if item.Icon == null}
-                                    <div class="w-4 h-4"></div>
-                                {:else if item.Name}
-                                    <Icon s="md" circle={true} label={item.Name}/>
-                                {:else}
-                                    <Icon s="md" circle={true}/>
-                                {/if}
-                            {/if}
-                            <h4 class="ml-2">
-                            {#if item.Name}
-                                {item.Name}
-                            {:else if item.Key}
-                                {item.Key}
-                            {/if}
+                            <h4 class="ml-2 text-stone-400 dark:text-stone-500">
+                                &lt;none&gt;
                             </h4>
                         </li>
-                    {/each}
-                {:else}
-                    <li class="rounded p-2">No options</li>
+                    {/if}
+
+                    {@const _filtered_source = filtered_source ? filtered_source : definition.source}
+                    {#if _filtered_source.length > 0}
+                        {#each _filtered_source as item (item.Key)}
+                            {@const active=(highlighted_option == item) ? 'bg-stone-400/30 dark:bg-stone-400/30' : ''}
+                            <li class="rounded flex flex-row items-center {font_size}
+                                    space-x-10 px-4 py-2 pl-12 sm:pl-2 {active}" 
+                                on:mousemove={() => on_mouse_move(item)}
+                                on:click|preventDefault|stopPropagation={async () => await on_choose(item)}
+                                tabindex="-1">
+
+                                {#if icon}
+                                    {#if item.Color}
+                                        <Icon s="md" circle={true} color={item.Color}/>
+                                    {:else if item.Avatar} 
+                                        <Icon s="md" circle={true} symbol={item.Avatar}/>
+                                    {:else if item.Icon}
+                                        <Icon s="md" component={item.Icon}/>
+                                    {:else if item.Icon == null}
+                                        <div class="w-4 h-4"></div>
+                                    {:else if item.Name}
+                                        <Icon s="md" circle={true} label={item.Name}/>
+                                    {:else}
+                                        <Icon s="md" circle={true}/>
+                                    {/if}
+                                {/if}
+                                <h4 class="ml-2">
+                                {#if item.Name}
+                                    {item.Name}
+                                {:else if item.Key}
+                                    {item.Key}
+                                {/if}
+                                </h4>
+                            </li>
+                        {/each}
+                    {:else}
+                        <li class="rounded p-2">No options</li>
+                    {/if}
                 {/if}
-            {/if}
-        </ul>
-    </div>
+            </ul>
+        </div>
+    </div-->
 </div>
 {/if}
 

package/components/contextmenu.svelte

@@ -18,6 +18,7 @@ let menu_items = [];
 let submenus = [];
 let around_rect;
 let css_position = "";
+let closeButtonPos = "";
 $:
   display = visible ? "block" : "none";
 function calculatePosition(x2, y2, around, visible2, fresh) {
@@ -53,6 +54,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
       y2 = screenRect.bottom - maxHeight - margin;
       result = `left: ${x2}px; top: ${y2}px; width: ${width}px; max-height: ${maxHeight}px; display: block`;
     }
+    closeButtonPos = `right: ${margin}px; top: calc(${y2}px - 1.75rem)`;
   } else {
     let myRect = null;
     if (!fresh) {
@@ -86,6 +88,7 @@ function calculatePosition(x2, y2, around, visible2, fresh) {
         y2 = screenRect.top;
     }
     result = `left:${x2}px; top:${y2}px; display: block; min-width: 15rem`;
+    closeButtonPos = "";
   }
   return result;
 }
@@ -108,7 +111,7 @@ export async function show(around, _operations) {
     hide_window_indicator = 0;
     window.addEventListener("click", on_before_window_click, true);
   }
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -139,7 +142,7 @@ export function isVisible() {
   return visible;
 }
 export function hide() {
-  if (visible)
+  if (false)
     popToolsActionsOperations();
   visible = false;
   css_position = calculatePosition(x, y, around_rect, false, false);
@@ -324,14 +327,27 @@ function calculateBackground(is_highlighted, active) {
 }
 </script>
 
+
 <div id="__hd_svelte_contextmenu"
     class=" bg-white dark:bg-stone-800
             text-stone-800 dark:text-stone-400 rounded-lg border
             border-stone-200 dark:border-stone-700 shadow-md
-            z-30 fixed min-w-60 max-h-screen overflow-y-auto"
+            z-40 fixed min-w-60 max-h-screen overflow-y-auto"
     style={css_position}
     bind:this={menu_root}>
 
+    {#if closeButtonPos}
+        <button class="     fixed w-6 h-6 flex items-center justify-center
+                            text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                            focus:outline-none font-medium rounded-full text-sm text-center
+                            dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                            focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                style={closeButtonPos}
+                on:click={ hide }>
+            <Icon component={FaTimes} s="md"/>
+        </button>
+    {/if}
+
     {#each operations as operation, index}
         {@const is_separator = operation.separator}
         {#if is_separator}

package/components/document/editor.svelte

@@ -62,7 +62,8 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let compact = false;
-export let onChange = void 0;
+export let onSingleChange = void 0;
+export let onApplyChanges = void 0;
 export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
@@ -612,6 +613,10 @@ onMount(() => {
       if (wasContentChanged) {
         hasChangedValue = true;
         changedValue = editor2.getHTML();
+        if (onSingleChange)
+          onSingleChange(changedValue);
+        else
+          logChanges();
         handleImagesChanges(transaction);
       }
       refreshToolbarOperations();
@@ -671,32 +676,34 @@ function on_blur() {
     $data_tick_store = last_tick;
   }
 }
-export function save() {
+export async function save() {
   if (saveData()) {
     last_tick = $data_tick_store + 1;
     $data_tick_store = last_tick;
-    refreshToolbarOperations();
   }
 }
 function saveData() {
   if (!hasChangedValue)
     return false;
   hasChangedValue = false;
-  if (onChange) {
-    onChange(changedValue);
+  if (onApplyChanges) {
+    onApplyChanges(changedValue);
     return true;
   } else if (item && a) {
-    item[a] = changedValue;
-    if (typename)
-      informModification(item, a, typename);
-    else
-      informModification(item, a);
+    logChanges();
     if (pushChangesImmediately)
-      pushChanges();
+      pushChanges(refreshToolbarOperations);
     return true;
   }
   return false;
 }
+function logChanges() {
+  item[a] = changedValue;
+  if (typename)
+    informModification(item, a, typename);
+  else
+    informModification(item, a);
+}
 let palette = null;
 let is_command_palette_visible = false;
 function get_selection_bbox() {
@@ -717,7 +724,7 @@ function on_palette_mouse_click() {
 }
 function on_palette_shown() {
   is_command_palette_visible = true;
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -740,8 +747,9 @@ function on_palette_shown() {
   }
 }
 function on_palette_hidden() {
-  if (is_command_palette_visible)
+  if (false)
     popToolsActionsOperations();
+  editor?.commands.focus();
   is_command_palette_visible = false;
 }
 function show_command_palette(cursor_rect) {

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

@@ -9,7 +9,8 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         compact?: boolean | undefined;
-        onChange?: undefined;
+        onSingleChange?: Function | undefined;
+        onApplyChanges?: Function | undefined;
         onFocusCb?: undefined;
         onBlurCb?: undefined;
         onAddImage?: undefined;
@@ -42,7 +43,7 @@ declare const __propDef: {
             tbr: string;
         }) | undefined;
         scrollIntoView?: ((param: any) => void) | undefined;
-        save?: (() => void) | undefined;
+        save?: (() => Promise<void>) | undefined;
         addTemporaryImage?: ((src: any) => void) | undefined;
         replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
         removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
@@ -115,7 +116,7 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
         tbr: string;
     };
     get scrollIntoView(): (param: any) => void;
-    get save(): () => void;
+    get save(): () => Promise<void>;
     get addTemporaryImage(): (src: any) => void;
     get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
     get removeTemporaryImage(): (temporarySrc: any) => void;

package/components/document/internal/palette.svelte

@@ -4,6 +4,7 @@ import Pallete_row from "./palette.row.svelte";
 import { createEventDispatcher } from "svelte";
 import Icon from "../../icon.svelte";
 import { isDeviceSmallerThan, UI } from "../../../utils.js";
+import { FaTimes } from "svelte-icons/fa";
 export let commands;
 export let width_px = 400;
 export let max_height_px = 500;
@@ -27,7 +28,7 @@ export function showAsToolbox(rect) {
   toolboxX = margin;
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
-  css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  css_style = `left:${toolboxX}px; top:${toolboxY}px;`;
   console.log("toolbox: ", css_style);
   dispatch("palette_shown");
 }
@@ -48,19 +49,26 @@ afterUpdate(
     }
   }
 );
+let closeButtonPos = "";
 export function show(x, y, up = false) {
   isToolbox = false;
-  css_style = `width: ${width_px}px; max-height:${max_height_px}px; position: fixed; left:${x}px; top:${y}px;`;
+  css_style = `width: ${width_px}px; max-height:${max_height_px}px; left:${x}px; top:${y}px;`;
   if (up)
     css_style += " transform: translate(0, -100%);";
   visible = true;
   dispatch("palette_shown");
+  closeButtonPos = "";
+  setTimeout(() => {
+    const rect = paletteElement.getBoundingClientRect();
+    closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
+  }, 0);
+  console.trace();
 }
 export function show_fullscreen(_width_px, _height_px) {
   isToolbox = false;
   width_px = _width_px;
   max_height_px = _height_px;
-  css_style = `position: fixed; left: 0px; top: 0px; width: ${_width_px}px; height: ${_height_px}px; z-index: 1055;`;
+  css_style = `left: 0px; top: 0px; width: ${_width_px}px; height: ${_height_px}px; z-index: 1055;`;
   visible = true;
   dispatch("palette_shown");
 }
@@ -231,7 +239,7 @@ function mousemove(e) {
     const touch = e.touches.item(0);
     const trackDelta = new DOMPoint(touch.clientX - beforeTrackingClient.x, touch.clientY - beforeTrackingClient.y);
     toolboxX = beforeTrackingPos.x + trackDelta.x;
-    css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+    css_style = `left:${toolboxX}px; top:${toolboxY}px;`;
     e.stopPropagation();
   }
 }
@@ -250,8 +258,8 @@ function isRowActive(cmd) {
 
 {#if isToolbox}
     <menu   class="  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
-                    flex flex-row flex-nowrap"
+                    z-40
+                    flex flex-row flex-nowrap fixed"
             style={css_style}
             hidden={!visible}
             on:touchstart={mousedown}
@@ -287,37 +295,56 @@ function isRowActive(cmd) {
         {/if}
     </menu>
 {:else}
-    <div    class="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 overflow-y-auto z-20"
-            id="__hd_FormattingPalette"
-            bind:this={paletteElement}
-            hidden={!visible}
-            style={css_style} >
-        
-        {#if filtered_commands && filtered_commands.length}
-            {#each filtered_commands as cmd, idx (cmd.caption)}
-                {#if cmd.separator}
-                    {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
-                        <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
-                    {/if}
-                {:else}
-                    {@const id = "cpi_" + idx}
-                    {@const active=isRowActive(cmd)}
-                    <Pallete_row    {id}
-                                    cmd={cmd}
-                                    is_highlighted={cmd == current_command}
-                                    on:click={ () => { execute_mouse_click(cmd.on_choice); }}
-                                    on:mousemove={ () => { on_mouse_over(cmd); }}
-                                    on:mousedown={buttonMousedown}
-                                    bind:this={rows[idx]}
-                                    {active}
-                                    />
-                {/if}
-            {/each}
-        {:else}
-            <p class="text-sm text-stone-500">No results</p>
+    <!--div hidden={!visible}-->
+
+        {#if visible &&  closeButtonPos}
+            {#key closeButtonPos}
+                <button class="     fixed w-6 h-6 flex items-center justify-center
+                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
+                                    focus:outline-none font-medium rounded-full text-sm text-center
+                                    dark:text-stone-500 dark:bg-stone-700/80 dark:hover:bg-stone-700 
+                                    focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800" 
+                        style={closeButtonPos}
+                        on:mousedown={buttonMousedown}
+                        on:click={ () => hide() }>
+                    <Icon component={FaTimes} s="md"/>
+                </button>
+            {/key}
         {/if}
+    
+        <div    hidden={!visible}
+                class="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 overflow-y-auto z-40 fixed"
+                id="__hd_FormattingPalette"
+                bind:this={paletteElement}
+                style={css_style} >
 
-    </div>
+            {#if filtered_commands && filtered_commands.length}
+                {#each filtered_commands as cmd, idx (cmd.caption)}
+                    {#if cmd.separator}
+                        {#if idx>0 && idx<filtered_commands.length-1}   <!-- not first or last place -->
+                            <hr class="mx-4 my-1 border-stone-300 dark:border-stone-700"/>
+                        {/if}
+                    {:else}
+                        {@const id = "cpi_" + idx}
+                        {@const active=isRowActive(cmd)}
+                        <Pallete_row    {id}
+                                        cmd={cmd}
+                                        is_highlighted={cmd == current_command}
+                                        on:click={ () => { execute_mouse_click(cmd.on_choice); }}
+                                        on:mousemove={ () => { on_mouse_over(cmd); }}
+                                        on:mousedown={buttonMousedown}
+                                        bind:this={rows[idx]}
+                                        {active}
+                                        />
+                    {/if}
+                {/each}
+            {:else}
+                <p class="text-sm text-stone-500">No results</p>
+            {/if}
+
+        </div>
+    <!---/div-->
+    
     
 {/if}
 

package/desk.svelte

@@ -17,7 +17,7 @@
             set_dark_mode_default,
             sidebar_left_pos,
             wholeAppReloader,
-            alerts, removeAlert } from './stores.js'
+            alerts, removeAlert, showFABAlways} from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
     import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
@@ -130,17 +130,31 @@
 
         if(tools_visible)
         {
-            tools_visibility = "hidden sm:block sm:fixed"
-            //fab_base_visibility = "fixed sm:hidden"
-            fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
-
-            content_top = 'top-[50px] sm:top-[40px]'
             
-            if(bottom_bar_visible)
-                content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
-            else    
-                content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
-               
+            const alwaysShowFAB = (!is_small) && $showFABAlways
+
+            if(alwaysShowFAB)
+            {
+                fab_visibility_mode = FAB_VISIBLE_ALWAYS
+                tools_visibility = "hidden"
+                content_top = 'top-[50px] sm:top-[0px]'
+                
+                if(bottom_bar_visible)
+                    content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-240px)]`
+                else    
+                    content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-0px)]` 
+            }
+            else
+            {
+                fab_visibility_mode = FAB_VISIBLE_ON_MOBILE
+                tools_visibility = "hidden sm:block sm:fixed"
+                content_top = 'top-[50px] sm:top-[40px]'
+                
+                if(bottom_bar_visible)
+                    content_height = `min-h-[calc(100vh-290px)] sm:h-[calc(100vh-280px)]`
+                else    
+                    content_height = `min-h-[calc(100vh-50px)] sm:h-[calc(100vh-40px)]` 
+            }
         }
         else
         {
@@ -414,11 +428,7 @@
                         <Operations bind:this={operationsComponent} />
                     </div>
 
-                    {#if is_fab_visible}
-                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
-                        <Fab bind:this={fabComponent}/>
-                    <!---/div-->
-                    {/if}
+                   
 
                     <!--#######################################################-->
                     <!--##  CONTENT                          ##################-->
@@ -438,7 +448,11 @@
                             </Configurable>
                     </div>    
 
-
+                     {#if is_fab_visible}
+                    <!--div class="{fab_visibility} left-3 {fab_bottom} mb-1 cursor-pointer z-10"-->
+                        <Fab bind:this={fabComponent} />
+                    <!---/div-->
+                    {/if}
 
                     <!--###########################################################-->
                     <!--##  BOTTOM SIDEBAR          ###############################-->
@@ -480,7 +494,7 @@
                     <!-- #########################################################-->
                     <!-- ## MODAL DIALOG #########################################-->
                     <!-- #########################################################-->
-                    <div id="__hd_svelte_modal_root" class="z-30">
+                    <div id="__hd_svelte_modal_root" class="z-30 sm:z-40">
                         <!-- after <Modal/> component is shown it's rettached to above div
                             see: modal.svelte afterUpdate -->
                     </div>

package/horizontal.toolbar.svelte

@@ -3,7 +3,7 @@
     //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import {showMenu} from './components/menu'
     import {push, pop, location} from 'svelte-spa-router'
-    import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
+    import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store, leftHandedFAB} from './stores.js'
     //import Menu from './components/contextmenu.svelte'
 
     import {
@@ -238,6 +238,12 @@
                 });
         }
 
+         options.push({
+                caption: 'Left-handed floating actions',
+                icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
+                action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
+            })
+
         if(has_selection_details)
         {
             options.push( {

package/index.d.ts

@@ -59,11 +59,11 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';
-export { informModification, informModificationEx, informItem, pushChanges } from './updates';
+export { informModification, informModificationEx, informItem, pushChanges, hasModifications } from './updates';
 export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';

package/index.js

@@ -65,11 +65,11 @@ export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
 export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store } from './stores.js';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp
-export { informModification, informModificationEx, informItem, pushChanges } from './updates'; // tmp
+export { informModification, informModificationEx, informItem, pushChanges, hasModifications } from './updates'; // tmp
 export { default as IcH1 } from './components/document/internal/h1.icon.svelte';
 export { default as IcH2 } from './components/document/internal/h2.icon.svelte';
 export { default as IcH3 } from './components/document/internal/h3.icon.svelte';

package/modal.svelte

@@ -19,7 +19,7 @@ export let onCancelCallback = void 0;
 export function show(on_close_callback = void 0) {
   open = true;
   close_callback = on_close_callback;
-  if (isDeviceSmallerThan("sm")) {
+  if (false) {
     pushToolsActionsOperations({
       opver: 1,
       operations: [
@@ -44,7 +44,6 @@ export function hide() {
   if (!open)
     return;
   open = false;
-  popToolsActionsOperations();
 }
 let root;
 afterUpdate(
@@ -75,7 +74,7 @@ function on_cancel(event) {
 </script>
 
 {#if open}
-<div class="relative z-20" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
+<div class="relative z-30" aria-labelledby="modal-title" role="dialog" aria-modal="true" bind:this={root}>
     <!--
       Background backdrop, show/hide based on modal state.
   
@@ -88,7 +87,7 @@ function on_cancel(event) {
     -->
     <div class="fixed w-screen h-screen inset-0 bg-stone-500 dark:bg-stone-800 bg-opacity-75 dark:bg-opacity-75 transition-opacity"></div>
   
-    <div class="fixed z-20 inset-0 w-screen overflow-y-auto">
+    <div class="fixed z-30 inset-0 w-screen overflow-y-auto">
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <!--
           Modal panel, show/hide based on modal state.

package/package.json

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

package/stores.d.ts

@@ -49,3 +49,5 @@ export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
 export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;
 export const visible_property_tab_store: import("svelte/store").Writable<string>;
 export const fabCollapsed: import("svelte/store").Writable<any>;
+export const showFABAlways: import("svelte/store").Writable<any>;
+export const leftHandedFAB: import("svelte/store").Writable<any>;

package/stores.js

@@ -160,6 +160,12 @@ export const visible_property_tab_store = writable('');
 export const fabCollapsed = writable( (localStorage.fabCollapsed && localStorage.fabCollapsed == 'true') || false )
 fabCollapsed.subscribe( (value) => { localStorage.fabCollapsed = (value ? 'true' : '') } );
 
+export const showFABAlways = writable( (localStorage.showFABAlways && localStorage.showFABAlways == 'true') || false )
+showFABAlways.subscribe( (value) => { localStorage.showFABAlways = (value ? 'true' : '') } );
+
+export const leftHandedFAB = writable( (localStorage.leftHandedFAB && localStorage.leftHandedFAB == 'true') || false )
+leftHandedFAB.subscribe( (value) => { localStorage.leftHandedFAB = (value ? 'true' : '') } );
+
 export function restore_defults()
 {
     
@@ -169,6 +175,8 @@ export function restore_defults()
     right_sidebar_visible_store.set(false);
     visible_property_tab_store.set('');
     fabCollapsed.set(false)
+    showFABAlways.set(false)
+    leftHandedFAB.set(false)
 }
 
 export function toggle_sidebar(index)

package/updates.d.ts

@@ -1,4 +1,5 @@
 export function informModification(itm: any, field_name: any, type_name?: undefined): boolean;
 export function informModificationEx(typeName: any, itemId: any, attribName: any, attribValue: any): boolean;
+export function hasModifications(): boolean;
 export function informItem(itm: any, type_name?: undefined): boolean;
-export function pushChanges(): void;
+export function pushChanges(afterPushCallback?: undefined): void;

package/updates.js

@@ -51,6 +51,12 @@ export function informModificationEx(typeName, itemId, attribName, attribValue)
     return true;
 }
 
+export function hasModifications()
+{
+    //console.log('hasModifications', modified_items_map.size)
+    return modified_items_map.size > 0
+}
+
 export function informItem(itm, type_name=undefined)
 {
     if(type_name == undefined)
@@ -81,8 +87,15 @@ export function informItem(itm, type_name=undefined)
 
 const update_request_ticket = writable(0);
 let last_update_ticket = 0;
-export function pushChanges()
+let afterPushCallbacks = []
+
+export function pushChanges(afterPushCallback=undefined)
 {
+    //console.trace()
+
+    if(afterPushCallback)
+        afterPushCallbacks.push(afterPushCallback);
+
     update_request_ticket.update(n => n + 1);
 }
 
@@ -140,13 +153,18 @@ update_request_ticket.subscribe(async (v) => {
                 body: JSON.stringify( { Items: changes } )
             })
             if (res.ok) {
+
                 modified_items_map.clear();
+                afterPushCallbacks.forEach( cb => cb())
+                afterPushCallbacks = []
             }
             else
             {
                 if(res.status == 400)   // basic exception like access rights 
                 {
                     modified_items_map.clear();
+                    afterPushCallbacks.forEach( cb => cb())
+                    afterPushCallbacks = []
                 }
 
                 const err = await res.text()

package/utils.js

@@ -84,21 +84,32 @@ export function clearActiveItem(context_level)
 
 export function refreshToolbarOperations()
 {
+    
+    let refreshed = false
+
     const contextOperations = get(contextToolbarOperations)
     if(contextOperations)
     {
+        
         if(Array.isArray(contextOperations))
         {
-            if(contextOperations.length)
+            if(contextOperations.length > 0)
+            {
                 contextToolbarOperations.set([...contextOperations])
+                refreshed = true
+            }
         }
         else
         {
-            if(contextOperations.operations.length)
+            if(contextOperations.operations && contextOperations.operations.length > 0)
+            {
                 contextToolbarOperations.set({...contextOperations})
+                refreshed = true
+            }
         }
     }
-    else
+    
+    if(!refreshed)
     {
         const pageOperations = get(pageToolbarOperations);
         if(pageOperations)
@@ -108,6 +119,7 @@ export function refreshToolbarOperations()
                 if(pageOperations.length > 0)
                 {
                     pageToolbarOperations.set([...pageOperations])
+                    refreshed = true
                 }
             }
             else
@@ -115,6 +127,7 @@ export function refreshToolbarOperations()
                 if(pageOperations.operations && pageOperations.operations.length > 0)
                 {
                     pageToolbarOperations.set({...pageOperations})
+                    refreshed = true
                 }
             }
         }
@@ -159,6 +172,7 @@ export function editable(node, params)
     let onRemove = undefined;
     let onFinish = undefined;
     let onSoftEnter = undefined;
+    let onSingleChange = undefined
     if(params instanceof Object)
     {
         action = params.action ?? params;
@@ -166,6 +180,7 @@ export function editable(node, params)
         onRemove = params.remove ?? undefined
         onFinish = params.onFinish ?? undefined
         onSoftEnter = params.onSoftEnter ?? undefined;
+        onSingleChange = params.onSingleChange ?? undefined
        
         if(params.readonly)
             return;
@@ -323,7 +338,12 @@ export function editable(node, params)
         currentEditable = node;
         node.addEventListener("save", save_listener)
         
-        observer = new MutationObserver(() => { has_changed = true; });
+        observer = new MutationObserver(() => { 
+            has_changed = true; 
+            if(onSingleChange)
+                onSingleChange(node.textContent)
+        });
+
         observer.observe(   node,  {
                                 childList: true,
                                 attributes: true,

package/vertical.toolbar.svelte

@@ -19,13 +19,15 @@
             context_info_store,
             contextToolbarOperations,
             data_tick_store,
-            reloadWholeApp
+            reloadWholeApp,
+            showFABAlways,
+            leftHandedFAB
         } from "./stores.js";     
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 	import { pop, push } from 'svelte-spa-router';
 	import { tick } from 'svelte';
-	import { popNavigationPage } from './utils';
+	import { isDeviceSmallerThan, popNavigationPage } from './utils';
     
 
     export let appConfig = undefined;
@@ -218,6 +220,22 @@
                 });
         }
 
+        if(!isDeviceSmallerThan("sm"))
+        {
+            options.push({
+                caption: 'Floating actions',
+                icon: $showFABAlways ? FaToggleOn : FaToggleOff,
+                action: (f) => { $showFABAlways = !$showFABAlways; }
+            })
+
+            options.push({
+                caption: 'Left-handed floating actions',
+                icon: $leftHandedFAB ? FaToggleOn : FaToggleOff,
+                disabled: !$showFABAlways,
+                action: (f) => { $leftHandedFAB = !$leftHandedFAB; }
+            })
+        }
+
         if(has_selection_details)
         {
             options.push( {