@humandialog/forms.svelte 1.3.5 → 1.3.7

package/components/Fab.svelte

@@ -1,4 +1,5 @@
-<script>import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
+<script>import { each } from "svelte/internal";
+import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "../stores.js";
 import { showFloatingToolbar, showMenu, showGridMenu } from "./menu.js";
 import { FaChevronUp, FaChevronDown, FaChevronLeft, FaChevronRight, FaCircle } from "svelte-icons/fa/";
 $:
@@ -10,11 +11,17 @@ let toolboxOperations = [];
 let isExpandable = false;
 let vToolboxExpanded = false;
 let hToolboxExpanded = false;
+let isMain = false;
 function update(...args) {
   if ($contextToolbarOperations && $contextToolbarOperations.length > 0)
     operations = $contextToolbarOperations;
   else
     operations = $pageToolbarOperations;
+  if (operations && operations.length > 0 && operations[0].main) {
+    isMain = true;
+  } else {
+    isMain = false;
+  }
   if (operations.length > 0)
     mainOperation = operations[0];
   else
@@ -39,6 +46,7 @@ export function activateMainOperation() {
   const mainOperationButton = document.getElementById("__hd_fab_mainOperation");
   if (!mainOperationButton)
     return;
+  console.log("activateMainOperation");
   mainOperationButton.click();
 }
 function on_click(e, operation) {
@@ -91,80 +99,163 @@ function getSelectionPos() {
   } else
     return 0;
 }
+function calculatePosition(operation) {
+  let right = 0;
+  let result = `bottom: 10px; right:${right}px`;
+  return result;
+}
+function operationVisible(operation) {
+  return false;
+}
 </script>
 
-{#if operations && operations.length > 0}
-    {@const topPosition = 350}
-    {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
-    <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]
-                    dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-                    flex items-center justify-center
-                    disable-dbl-tap-zoom"
-                    style={verticalPosition}
-                    on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
-                    on:mousedown={mousedown} >
-        <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
-    </button>
+{#if isMain}
+    {#if operations && operations.length > 0}
+        {#each operations as operation, idx}
+            {#if operationVisible(operation)}
+            <button  
+                    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
+                        dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                        flex items-center justify-center
+                        disable-dbl-tap-zoom"
+                        style={calculatePosition(operation)}
+                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
+                        on:mousedown={mousedown} >
+            <div class="w-7 h-7"><svelte:component this={operation.icon}/></div>
+        </button>
+        {/if}
+        {/each}
+    {/if}
+{:else}
 
-    {#if secondaryOperation || isExpandable}
-        
-        <!-- horizontal container -->
-        <div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
-        
-            {#if isExpandable}
-                <!-- Expander -->
-                <button class=" bg-transparent mr-2
-                                w-[55px] h-[55px] 
-                                flex items-center justify-center
-                                disable-dbl-tap-zoom"
-                                on:click|stopPropagation={toggleExpandToolboxH}
-                                on:mousedown={mousedown}>
-                    <div class="    w-10 h-10
-                                    text-white bg-zinc-500 hover:bg-zinc-500 
-                                    font-medium rounded-full text-sm text-center shadow-md
-                                    dark:bg-zinc-500 dark:hover:bg-zinc-500
-                                    flex items-center justify-center">
-                        <div class="w-2 h-2">
-                            {#if hToolboxExpanded}
-                                <FaCircle/>
-                            {:else}
-                                <FaCircle/>
-                            {/if}
-                        </div>
-                    </div>
-                </button>
+    {#if operations && operations.length > 0}
+        {@const topPosition = 350}
+        {@const verticalPosition = mainOperation.aboveKeyboard ? `bottom: ${topPosition}px` : "bottom: 10px"}
+        <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]
+                        dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
+                        flex items-center justify-center
+                        disable-dbl-tap-zoom"
+                        style={verticalPosition}
+                        on:click|stopPropagation={(e) => {on_click(e, mainOperation)}} 
+                        on:mousedown={mousedown} >
+            <div class="w-7 h-7"><svelte:component this={mainOperation.icon}/></div>
+        </button>
 
-                {#if hToolboxExpanded}
-                    {#if secondaryOperation}
-                        <button class="     bg-transparent
-                                            mx-0 mr-2 w-[55px] h-[55px] 
-                                            flex items-center justify-center
-                                            disable-dbl-tap-zoom"
-                                            on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
-                                            on:mousedown={mousedown}>
-                            <div class="    w-10 h-10
-                                            text-white bg-zinc-500 group-hover:bg-zinc-500 
-                                            dark:bg-zinc-500 dark:group-hover:bg-zinc-500
-                                            font-medium rounded-full text-sm text-center shadow-md
-                                            flex items-center justify-center">
-                                <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
+        {#if secondaryOperation || isExpandable}
+            
+            <!-- horizontal container -->
+            <div class="flex flex-row m-0 absolute bottom-[10px] right-[60px]">
+            
+                {#if isExpandable}
+                    <!-- Expander -->
+                    <button class=" bg-transparent mr-2
+                                    w-[55px] h-[55px] 
+                                    flex items-center justify-center
+                                    disable-dbl-tap-zoom"
+                                    on:click|stopPropagation={toggleExpandToolboxH}
+                                    on:mousedown={mousedown}>
+                        <div class="    w-10 h-10
+                                        text-white bg-zinc-500 hover:bg-zinc-500 
+                                        font-medium rounded-full text-sm text-center shadow-md
+                                        dark:bg-zinc-500 dark:hover:bg-zinc-500
+                                        flex items-center justify-center">
+                            <div class="w-2 h-2">
+                                {#if hToolboxExpanded}
+                                    <FaCircle/>
+                                {:else}
+                                    <FaCircle/>
+                                {/if}
                             </div>
-                        </button>
-                    {:else if toolboxOperations.length > 0}
-                        {@const toolbox=toolboxOperations.reverse()}
-                        {#each toolbox as operation}
-                            {#if !operation.separator}
-                                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        </div>
+                    </button>
+
+                    {#if hToolboxExpanded}
+                        {#if secondaryOperation}
+                            <button class="     bg-transparent
+                                                mx-0 mr-2 w-[55px] h-[55px] 
+                                                flex items-center justify-center
+                                                disable-dbl-tap-zoom"
+                                                on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
+                                                on:mousedown={mousedown}>
+                                <div class="    w-10 h-10
+                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                                font-medium rounded-full text-sm text-center shadow-md
+                                                flex items-center justify-center">
+                                    <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
+                                </div>
+                            </button>
+                        {:else if toolboxOperations.length > 0}
+                            {@const toolbox=toolboxOperations.reverse()}
+                            {#each toolbox as operation}
+                                {#if !operation.separator}
+                                    <!-- svelte-ignore a11y-click-events-have-key-events -->
+                                    <button class=" bg-transparent
+                                                        mx-0 mr-2 w-[55px] h-[55px] 
+                                                        flex items-center justify-center
+                                                        disable-dbl-tap-zoom"
+                                                        on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                                                        on:mousedown={mousedown}>
+                                        <div class="    w-10 h-10
+                                                        text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                                        dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                                        font-medium rounded-full text-sm text-center shadow-md
+                                                        flex items-center justify-center">
+                                            <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
+                                        </div>
+                                    </button>
+                                {/if}
+                            {/each}
+
+                        {/if}
+                    {/if}
+                {:else}
+                    <button class=" bg-transparent
+                                    mx-0 mr-2 w-[55px] h-[55px] 
+                                    flex items-center justify-center
+                                    disable-dbl-tap-zoom"
+                            on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
+                            on:mousedown={mousedown}>
+                        <div class="    w-10 h-10
+                                        text-white bg-zinc-500 group-hover:bg-zinc-500 
+                                        dark:bg-zinc-500 dark:group-hover:bg-zinc-500
+                                        font-medium rounded-full text-sm text-center shadow-md
+                                        flex items-center justify-center">
+                            <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
+                        </div>
+                    </button>
+                {/if}
+
+            </div>
+        {/if}
+
+        {#if operations.length > 2} <!-- has vertical operations -->
+            <!-- vertical tools container  -->
+            <ul class="list-none m-0 absolute bottom-[70px] right-0">
+                {#if (isExpandable && vToolboxExpanded) || !isExpandable}
+                    {@const verticalOperations = operations.slice(2).reverse()}
+                    {#each verticalOperations as operation}
+                        {#if !operation.separator}
+                            <!-- svelte-ignore a11y-click-events-have-key-events -->
+                            <li class="flex flex-row px-0 py-0 justify-end group"
+                                on:click|stopPropagation={(e) => {on_click(e, operation)}}
+                                on:mousedown={mousedown}>
+                                {#if operation.caption}
+                                    <div>
+                                        <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
+                                    </div>
+                                {/if}
                                 <button class=" bg-transparent
-                                                    mx-0 mr-2 w-[55px] h-[55px] 
-                                                    flex items-center justify-center
-                                                    disable-dbl-tap-zoom"
-                                                    on:click|stopPropagation={(e) => {on_click(e, operation)}}
-                                                    on:mousedown={mousedown}>
+                                                mx-0 mb-2 w-[55px] h-[55px] 
+                                                flex items-center justify-center
+                                                disable-dbl-tap-zoom">
                                     <div class="    w-10 h-10
                                                     text-white bg-zinc-500 group-hover:bg-zinc-500 
                                                     dark:bg-zinc-500 dark:group-hover:bg-zinc-500
@@ -173,66 +264,14 @@ function getSelectionPos() {
                                         <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
                                     </div>
                                 </button>
-                            {/if}
-                        {/each}
-
-                    {/if}
+                            </li>
+                        {/if}
+                    {/each}
                 {/if}
-            {:else}
-                <button class=" bg-transparent
-                                mx-0 mr-2 w-[55px] h-[55px] 
-                                flex items-center justify-center
-                                disable-dbl-tap-zoom"
-                        on:click|stopPropagation={(e) => {on_click(e, secondaryOperation)}}
-                        on:mousedown={mousedown}>
-                    <div class="    w-10 h-10
-                                    text-white bg-zinc-500 group-hover:bg-zinc-500 
-                                    dark:bg-zinc-500 dark:group-hover:bg-zinc-500
-                                    font-medium rounded-full text-sm text-center shadow-md
-                                    flex items-center justify-center">
-                        <div class="w-5 h-5"><svelte:component this={secondaryOperation.icon}/></div>
-                    </div>
-                </button>
-            {/if}
+            </ul>
+        {/if}
 
-        </div>
     {/if}
-
-    {#if operations.length > 2} <!-- has vertical operations -->
-        <!-- vertical tools container  -->
-        <ul class="list-none m-0 absolute bottom-[70px] right-0">
-            {#if (isExpandable && vToolboxExpanded) || !isExpandable}
-                {@const verticalOperations = operations.slice(2).reverse()}
-                {#each verticalOperations as operation}
-                    {#if !operation.separator}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <li class="flex flex-row px-0 py-0 justify-end group"
-                            on:click|stopPropagation={(e) => {on_click(e, operation)}}
-                            on:mousedown={mousedown}>
-                            {#if operation.caption}
-                                <div>
-                                    <span class="block whitespace-nowrap text-sm mt-3 font-semibold text-white mr-3     select-none bg-stone-700 group-hover:bg-stone-800 px-1 shadow-lg rounded">{operation.caption}</span>
-                                </div>
-                            {/if}
-                            <button class=" bg-transparent
-                                            mx-0 mb-2 w-[55px] h-[55px] 
-                                            flex items-center justify-center
-                                            disable-dbl-tap-zoom">
-                                <div class="    w-10 h-10
-                                                text-white bg-zinc-500 group-hover:bg-zinc-500 
-                                                dark:bg-zinc-500 dark:group-hover:bg-zinc-500
-                                                font-medium rounded-full text-sm text-center shadow-md
-                                                flex items-center justify-center">
-                                    <div class="w-5 h-5"><svelte:component this={operation.icon}/></div>
-                                </div>
-                            </button>
-                        </li>
-                    {/if}
-                {/each}
-            {/if}
-        </ul>
-    {/if}
-
 {/if}
 
 <style>

package/components/document/editor.svelte

@@ -11,6 +11,13 @@ 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 CodeBlock from "@tiptap/extension-code-block";
+import BulletList from "@tiptap/extension-bullet-list";
+import ListItem from "@tiptap/extension-list-item";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
 import Bold from "@tiptap/extension-bold";
 import Code from "@tiptap/extension-code";
 import Italic from "@tiptap/extension-italic";
@@ -37,7 +44,9 @@ import {
   FaUnderline,
   FaStrikethrough,
   FaArrowLeft,
-  FaGripLines
+  FaGripLines,
+  FaListUl,
+  FaTable
 } from "svelte-icons/fa";
 import IcH1 from "./internal/h1.icon.svelte";
 import IcH2 from "./internal/h2.icon.svelte";
@@ -175,7 +184,8 @@ const suggestion = {
           lockNextBlurCallbacks++;
           suggestionRange = props.range;
           editor.commands.blur();
-          setTimeout(() => UI.fab?.activateMainOperation(), 100);
+          const cursorRect = props.clientRect();
+          setTimeout(() => show_command_palette(cursorRect), 100);
         } else {
           const cursorRect = props.clientRect();
           show_command_palette(cursorRect);
@@ -219,7 +229,7 @@ const suggestion = {
 let editorElement;
 let editor;
 const codeBlockClass = "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600";
-const CodeBlock = Paragraph.extend({
+const _CodeBlock = Paragraph.extend({
   name: "CodeBlock",
   priority: 999,
   addAttributes() {
@@ -440,7 +450,7 @@ onMount(() => {
       Paragraph,
       Text,
       Heading.configure({
-        levels: [1, 2]
+        levels: [1, 2, 3, 4]
       }),
       /*Image.configure({
           HTMLAttributes: {
@@ -450,6 +460,14 @@ onMount(() => {
       CrossImage,
       HardBreak,
       HorizontalRule,
+      BulletList,
+      ListItem,
+      Table.configure({
+        resizable: true
+      }),
+      TableRow,
+      TableHeader,
+      TableCell,
       // custom
       CodeBlock,
       CommentBlock,
@@ -558,13 +576,26 @@ function on_palette_shown() {
 function on_palette_hidden() {
   is_command_palette_visible = false;
 }
-function show_command_palette(cursorRect) {
-  let rect = cursorRect;
+function show_command_palette(cursor_rect) {
   let client_rect = get_window_box();
+  if (isDeviceSmallerThan("sm"))
+    show_small_command_palette(client_rect);
+  else
+    show_big_command_palette(cursor_rect, client_rect);
+}
+function show_small_command_palette(client_rect) {
+  palette.max_height_px = client_rect.height - 64;
+  palette.width_px = client_rect.width - 96;
+  let x = 64, y = 32;
+  let show_above = false;
+  palette.show(x, y, show_above);
+}
+function show_big_command_palette(cursor_rect, client_rect) {
+  let rect = cursor_rect;
   let top_space = rect.y;
   let bottom_space = client_rect.height - (rect.y + rect.height);
   palette.max_height_px = 500;
-  palette.width_px = 400;
+  palette.width_px = 200;
   let preferred_palette_height = palette.max_height_px;
   let preferred_palette_width = palette.width_px;
   let x = 0, y = 0;
@@ -628,11 +659,7 @@ 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: '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();
@@ -651,11 +678,23 @@ let commands = [
     else
       editor.commands.setHeading({ level: 2 });
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
+  { caption: "Heading 3", description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
+    else
+      editor.commands.setHeading({ level: 3 });
+  }, is_active: () => editor?.isActive("heading", { level: 3 }) },
+  { caption: "Heading 4", description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
+    else
+      editor.commands.setHeading({ level: 4 });
+  }, is_active: () => editor?.isActive("heading", { level: 4 }) },
   { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
     if (range)
-      editor.chain().focus().deleteRange(range).setAsCode().run();
+      editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
-      editor.commands.setAsCode();
+      editor.commands.setCodeBlock();
   }, is_active: () => editor?.isActive("CodeBlock") },
   { caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComment, on_choice: (range) => {
     if (range)
@@ -681,6 +720,23 @@ let commands = [
     else
       editor.commands.setAsInfo();
   }, is_active: () => editor?.isActive("InfoBlock") },
+  { caption: "Bullet list", description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).toggleBulletList().run();
+    else
+      editor.commands.toggleBulletList();
+  }, is_active: () => editor?.isActive("bulletList") },
+  { caption: "Table", description: "Table", icon: FaTable, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).insertTable().run();
+    else
+      editor.commands.insertTable();
+  }, is_active: () => editor?.isActive("table") },
+  { caption: "Format", separator: true },
+  { 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: "Other blocks", separator: true },
   { caption: "Image", description: "Add image to document", icon: FaImage, on_choice: (range) => {
     if (range)

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

@@ -0,0 +1,59 @@
+<svelte:options accessors={true}/>
+<script>import Icon from "../../icon.svelte";
+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 ?? "";
+$:
+  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
+     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}/>
+        {/if}
+    </div>
+    <div class ="">
+        <p>{cmd.caption}</p>
+        {#if cmd.description}
+            {@const shortcut_width_px = cmd.shortcut ? 80 : 0}
+            <p  class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
+                style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
+        {/if}
+    </div>
+    {#if cmd.shortcut}
+        <div class="pr-1 text-sm font-mono text-stone-500" 
+             style:width={"80px"} >{cmd.shortcut}</div>
+    {/if}
+</div>
+

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

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Document_command } from './Document_command';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        cmd: Document_command;
+        width_px?: number | undefined;
+        is_highlighted?: boolean | undefined;
+        active?: boolean | undefined;
+        scrollToView?: (() => void) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mousemove: MouseEvent;
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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);
+    get cmd(): Document_command;
+    /**accessor*/
+    set cmd(_: Document_command);
+    get width_px(): number | undefined;
+    /**accessor*/
+    set width_px(_: number | undefined);
+    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 {};

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

@@ -5,8 +5,8 @@ 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 icon_size = cmd.icon_size ? cmd.icon_size : 4;
+let icon_placeholder_size = icon_size + 4;
 let cl = $$props.class ?? "";
 $:
   active_class = calculateBackground(is_highlighted, active);
@@ -33,27 +33,17 @@ export function scrollToView() {
 </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}" 
+<div id={id} class="w-full text-left flex flew-row cursor-context-menu {active_class} {cl}" 
      on:click 
      on:mousemove
      on:mousedown
      bind:this={element}>
-    <div class="flex items-center justify-center" style:width={`${icon_placeholder_size*0.25}rem`}>
+    <div class="flex items-center justify-center space-x-10 px-4 py-2" >
         {#if cmd.icon}
             <Icon size={icon_size} component={cmd.icon}/>
         {/if}
     </div>
-    <div class ="">
-        <p>{cmd.caption}</p>
-        {#if cmd.description}
-            {@const shortcut_width_px = cmd.shortcut ? 80 : 0}
-            <p  class="text-sm font-normal text-stone-400 dark:text-stone-500 truncate inline-block"
-                style:max-width={`calc(${width_px-shortcut_width_px} - 3rem)`} >{cmd.description}</p>
-        {/if}
-    </div>
-    {#if cmd.shortcut}
-        <div class="pr-1 text-sm font-mono text-stone-500" 
-             style:width={"80px"} >{cmd.shortcut}</div>
-    {/if}
+    
+    <h4>{cmd.caption}</h4>
 </div>
 

package/components/document/internal/palette.svelte

@@ -28,6 +28,7 @@ export function showAsToolbox(rect) {
   toolboxY = rect.bottom + margin;
   toolboxY += window.scrollY;
   css_style = `position: fixed; left:${toolboxX}px; top:${toolboxY}px;`;
+  console.log("toolbox: ", css_style);
   dispatch("palette_shown");
 }
 let paletteElement;
@@ -220,7 +221,7 @@ function isRowActive(cmd) {
 </script>
 
 {#if isToolbox}
-    <menu   class=" not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md 
+    <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"
             style={css_style}
@@ -259,7 +260,7 @@ function isRowActive(cmd) {
     </menu>
 {:else}
     <div    id="__hd_FormattingPalette"
-            class="not-prose bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400 rounded-lg border border-stone-200 dark:border-stone-700 shadow-md z-30 overflow-y-auto" 
+            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 overflow-y-auto" 
             hidden={!visible}
             style={css_style}
             bind:this={paletteElement}>

package/components/sidebar/sidebar.item.svelte

@@ -91,7 +91,6 @@ function editable_if_needed(node, editable2) {
     _editable(node, editable2);
 }
 function on_link_clicked(e) {
-  auto_hide_sidebar();
   if (selectable)
     handleSelect(e);
   else if (item)
@@ -101,8 +100,10 @@ function on_link_clicked(e) {
       e.preventDefault();
     } else
       e.stopPropagation();
-  } else
+  } else {
     e.stopPropagation();
+    auto_hide_sidebar();
+  }
 }
 function on_contextmenu(e) {
   if (!operations)

package/desk.svelte

@@ -20,8 +20,9 @@
             alerts } from './stores.js'
     
     //import { AuthorizedView} from '@humandialog/auth.svelte'
-    import { handleSelect, isDeviceSmallerThan, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
+    import { handleSelect, isDeviceSmallerThan, isOnNavigationPage, isOnScreenKeyboardVisible, removeAt, UI } from './utils'
     import { afterUpdate, onMount } from 'svelte';
+    import {location} from 'svelte-spa-router'
     
     export let layout;
 
@@ -75,16 +76,26 @@
 
     $: { visible_sidebar = $main_sidebar_visible_store
         
-        if(visible_sidebar == "*")
+        if(!is_small)
         {
-            main_side_panel_visibility = "hidden"
-            lg_content_area_horizontal_dim = ""
+            if(visible_sidebar == "*")
+            {
+                main_side_panel_visibility = "hidden"
+                lg_content_area_horizontal_dim = ""
+            }
+            else
+            {
+                main_side_panel_visibility = "fixed lg:block"
+                lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
+            }    
         }
         else
         {
-            main_side_panel_visibility = "fixed lg:block"
-            lg_content_area_horizontal_dim = `lg:left-[360px] lg:w-[calc(100vw-360px)]`
-        }      
+            main_side_panel_visibility = "hidden"
+            lg_content_area_horizontal_dim = ""
+        }
+          
+        console.log('main_side_panel_visibility', main_side_panel_visibility)
     }
     
     let tools_visibility = "hidden"
@@ -95,6 +106,9 @@
     let fab_base_visibility = "hidden"
     let fab_visibility = fab_base_visibility;
     let fab_bottom = "bottom-0"
+    let vertical_toolbar_visibility = "hidden sm:block"
+    let content_left = "left-0 sm:left-[40px]";
+    let content_width = "w-screen  sm:w-[calc(100vw-40px)] ";
                                 
     let content_top = ""
     let content_height = ""                                
@@ -147,6 +161,36 @@
         fab_visibility = fab_base_visibility;
     }
 
+
+    $: navigationPageVisible = navigationPageSetup($location);
+    function navigationPageSetup(...args)
+    {
+        if(!is_small)
+        {
+            vertical_toolbar_visibility = "hidden sm:block"
+            content_left = "left-0 sm:left-[40px]";
+            content_width = "w-screen  sm:w-[calc(100vw-40px)]";
+            return false;
+        }
+        else
+        {
+            if(isOnNavigationPage())
+            {
+                vertical_toolbar_visibility = "block"
+                content_left = "left-[50px]";
+                content_width = "w-[calc(100vw-50px)] ";
+                return true;
+            }
+            else
+            {
+                vertical_toolbar_visibility = "hidden sm:block"
+                content_left = "left-0 sm:left-[40px]";
+                content_width = "w-screen  sm:w-[calc(100vw-40px)] ";
+                return false;
+            }
+        }
+    }
+
     //$: screen.width = innerWidth;  
 
     $: switchBodyClass($dark_mode_store);
@@ -284,9 +328,9 @@
                 <!--#######################################################-->
                 <!--##  VERTICAL TOOLBAR                 ##################-->
                 <!--#######################################################-->
-                <div  class="hidden sm:block fixed left-0 top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
-                    <div class="sticky top-0 flex h-full w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
-                        <VerticalToolbar appConfig={layout}/>
+                <div  class="{vertical_toolbar_visibility} fixed left-0 top-[50px] sm:top-0 w-[50px] sm:w-[40px] h-screen z-20 inset-0   overflow-hidden">
+                    <div class="sticky top-0 flex h-full w-12 sm:w-10 bg-stone-800 dark:bg-stone-950 flex-col items-center text-stone-100 shadow">
+                        <VerticalToolbar appConfig={layout} mobile={is_small}/>
                     </div>    
                 </div>
 
@@ -318,7 +362,7 @@
                     behaviour is the content expand vertically, and only vertical scrollbar can be visible.
                     When content on the main page needs to be expanded horizontally (like kanban chart for example) then
                     that component should define overflow-x-* itself -->
-                <section on:click|capture={auto_hide_sidebar} class="">
+                <section on:click|capture={() => { if(!navigationPageVisible) auto_hide_sidebar()}  } class="">
 
                     <!--###########################################################-->
                     <!--##  HORIZONTAL TOOLS                 ######################-->
@@ -344,8 +388,9 @@
                     <!--#######################################################-->
                     <!-- fixed => relative, content-height => min content height -- -->
                     <div    id="__hd_svelte_main_content_container"
-                            class="relative left-0  w-screen  
-                                    sm:left-[40px]  sm:w-[calc(100vw-40px)]    
+                            class="relative 
+                                    {content_left}
+                                    {content_width}   
                                     {content_top}
                                     {lg_content_area_horizontal_dim}
                                     z-0 overflow-x-hidden 

package/horizontal.toolbar.svelte

@@ -2,7 +2,7 @@
     import {FaUsers, FaCog, FaSignInAlt, FaSignOutAlt, FaBars, FaToggleOn, FaToggleOff} from 'svelte-icons/fa/'
     //import GoPrimitiveDot from 'svelte-icons/go/GoPrimitiveDot.svelte'
     import {showMenu} from './components/menu'
-    import {push} from 'svelte-spa-router'
+    import {push, pop, location} from 'svelte-spa-router'
     import {contextItemsStore, context_info_store, contextToolbarOperations, data_tick_store} from './stores.js'
     //import Menu from './components/contextmenu.svelte'
 
@@ -24,7 +24,7 @@
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
 
     import VerticalToolbar from './vertical.toolbar.svelte'
-	import { isDeviceSmallerThan } from './utils.js';
+	import { isDeviceSmallerThan, isOnNavigationPage, pushNavigationPage, popNavigationPage } from './utils.js';
     
 
     export let appConfig;
@@ -82,7 +82,36 @@
     function toggle_navigator(e)
     {
         if(isDeviceSmallerThan('sm'))
-            push('/')
+        {
+            if(isOnNavigationPage())
+            {
+                popNavigationPage();
+            }
+            else
+            {
+                if(tabs.length == 1)
+                {
+                    $sidebar_left_pos = 0;
+                    show_sidebar(tabs[0]);
+                }
+                else
+                {
+                    let sidebar = $main_sidebar_visible_store;
+                    if(sidebar == "*")
+                    {
+                        if((!previously_visible_sidebar) || previously_visible_sidebar === '*')
+                            sidebar = Object.keys(appConfig.sidebar)[0];
+                        else
+                            sidebar = previously_visible_sidebar;
+                    }
+
+                    $sidebar_left_pos = 40;
+                    show_sidebar(sidebar)
+                }
+
+                pushNavigationPage();
+            }
+        }
         else
         {
 
@@ -282,7 +311,7 @@
 
 </div>
 
-{#if tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
+{#if false && tabs.length > 1 &&  $main_sidebar_visible_store != "*"}
     <div  class="no-print flex-none block fixed left-0 top-[40px] w-[40px] h-screen z-20 inset-0   overflow-hidden">
         <div class="sticky top-0 flex h-full w-10 bg-stone-900 flex-col items-center text-stone-100 shadow">
             <VerticalToolbar {appConfig} mobile={true}/>

package/index.d.ts

@@ -4,6 +4,7 @@ export { default as Row } from "./tiles.row.svelte";
 export { default as Box } from "./form.box.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
+export { default as VerticalToolbar } from './vertical.toolbar.svelte';
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
 export { default as Checkbox } from './components/checkbox.svelte';
@@ -53,8 +54,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores';

package/index.js

@@ -8,6 +8,7 @@ export { default as Box } from "./form.box.svelte";
 //export { default as TilesVerticalRow } from "./tiles.vertical.row.svelte";
 export { default as Operations } from './operations.svelte';
 export { default as Layout } from './desk.svelte';
+export { default as VerticalToolbar } from './vertical.toolbar.svelte';
 // @ts-ignore
 export { default as Icon } from "./components/icon.svelte";
 export { default as Button } from './components/button.svelte';
@@ -59,8 +60,8 @@ export { default as KanbanComboProperty } from './components/kanban/kanban.combo
 export { default as KanbanTagsProperty } from './components/kanban/kanban.tags.svelte';
 export { default as KanbanCallbacks } from './components/kanban/kanban.callbacks.svelte';
 export { KanbanColumnTop, KanbanColumnBottom } from './components/kanban/Kanban';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible } from './utils';
-export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert } from './stores.js';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, editable, startEditing, saveCurrentEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, isOnScreenKeyboardVisible, randomString, } from './utils';
+export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store } from './stores.js';
 export { data_tick_store, // tmp
 hasSelectedItem, hasDataItem, setNavigatorTitle } from "./stores";
 export { contextToolbarOperations, pageToolbarOperations, contextItemsStore, contextTypesStore } from './stores'; // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -28,8 +28,15 @@
   "dependencies": {
     "@humandialog/auth.svelte": "^1.8.3",
     "@tiptap/core": "^2.11.0",
+    "@tiptap/extension-bullet-list": "^2.11.5",
+    "@tiptap/extension-code-block": "^2.11.5",
     "@tiptap/extension-image": "^2.11.0",
     "@tiptap/extension-link": "^2.11.3",
+    "@tiptap/extension-list-item": "^2.11.5",
+    "@tiptap/extension-table": "^2.11.5",
+    "@tiptap/extension-table-cell": "^2.11.5",
+    "@tiptap/extension-table-header": "^2.11.5",
+    "@tiptap/extension-table-row": "^2.11.5",
     "@tiptap/extension-underline": "^2.11.3",
     "@tiptap/pm": "^2.11.0",
     "@tiptap/starter-kit": "^2.11.0",
@@ -75,6 +82,7 @@
     "./components/document/internal/h2.icon.svelte": "./components/document/internal/h2.icon.svelte",
     "./components/document/internal/h3.icon.svelte": "./components/document/internal/h3.icon.svelte",
     "./components/document/internal/h4.icon.svelte": "./components/document/internal/h4.icon.svelte",
+    "./components/document/internal/palette.row.big.svelte": "./components/document/internal/palette.row.big.svelte",
     "./components/document/internal/palette.row.svelte": "./components/document/internal/palette.row.svelte",
     "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
     "./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",

package/stores.d.ts

@@ -37,7 +37,7 @@ export function onErrorShowAlert(txt: any): void;
 export const dark_mode_store: import("svelte/store").Writable<any>;
 export const main_sidebar_visible_store: import("svelte/store").Writable<any>;
 export let previously_visible_sidebar: string;
-export let sidebar_left_pos: import("svelte/store").Writable<number>;
+export const sidebar_left_pos: import("svelte/store").Writable<number>;
 export const tools_visible_store: import("svelte/store").Writable<any>;
 export const bottom_bar_visible_store: import("svelte/store").Writable<any>;
 export const right_sidebar_visible_store: import("svelte/store").Writable<boolean>;

package/stores.js

@@ -80,7 +80,7 @@ export const main_sidebar_visible_store = writable((localStorage.main_sidebar_vi
 main_sidebar_visible_store.subscribe( (value) => { localStorage.main_sidebar_visible_store = value });
 
 export let previously_visible_sidebar = "";
-export let sidebar_left_pos = writable(0)
+export const sidebar_left_pos = writable(0)
 
 let has_saved_tools_visible = false;
 function create_tools_visible_store()
@@ -110,6 +110,7 @@ export const visible_property_tab_store = writable('');
 
 export function restore_defults()
 {
+    
     main_sidebar_visible_store.set('*');
     tools_visible_store.set(false);
     bottom_bar_visible_store.set(false);
@@ -121,6 +122,8 @@ export function toggle_sidebar(index)
 {
     previously_visible_sidebar = get(main_sidebar_visible_store);
 
+    console.log('toggle_sidebar', previously_visible_sidebar, '=>', index)
+
     if(get(main_sidebar_visible_store) == index)
         main_sidebar_visible_store.set('*')
     else
@@ -129,8 +132,8 @@ export function toggle_sidebar(index)
 
 export function auto_hide_sidebar()
 {
+    console.log('auto_hide_sidebar')
     //console.log("sw: " + window.innerWidth, SCREEN_SIZES.lg)
-    
     if(window.innerWidth < SCREEN_SIZES.lg)
         hide_sidebar()
 }

package/utils.d.ts

@@ -28,6 +28,11 @@ export function remove(array: any, element: any): any;
 export function swapElements(array: any, e1: any, e2: any): any;
 export function resizeImage(file: any, maxWidth?: number, maxHeight?: number, contentType?: string, quality?: number): Promise<any>;
 export function isOnScreenKeyboardVisible(): boolean;
+export function isOnNavigationPage(): boolean;
+export function pushNavigationPage(): void;
+export function popNavigationPage(): void;
+export function dec2hex(dec: any): any;
+export function randomString(len: any): string;
 export namespace icons {
     const symbols: null;
 }
@@ -42,3 +47,4 @@ export namespace UI {
     const operations: null;
     const fab: null;
 }
+export const NAVIGATION_PAGE_PATH: "/";

package/utils.js

@@ -1,7 +1,7 @@
 import { getContext, tick } from "svelte";
 import {get} from 'svelte/store'
 import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store } from "./stores";
-import { Img } from "flowbite-svelte";
+import {location, push, pop} from 'svelte-spa-router' 
 
 export let icons = {symbols :null}
 
@@ -623,3 +623,37 @@ export const UI = {
     operations: null,
     fab: null
 }
+
+export const NAVIGATION_PAGE_PATH = '/'
+export function isOnNavigationPage()
+{
+    const loc = get(location)
+    if(loc == NAVIGATION_PAGE_PATH)
+        return true;
+    else
+        return false;
+}
+
+export function pushNavigationPage()
+{
+    push(NAVIGATION_PAGE_PATH)
+}
+
+export function popNavigationPage()
+{
+    if(isOnNavigationPage())
+        pop();
+}
+
+export function dec2hex (dec) 
+{
+    return dec.toString(16).padStart(2, "0")
+}
+  
+
+export function randomString(len) 
+{
+    var arr = new Uint8Array((len || 16) / 2)
+    window.crypto.getRandomValues(arr)
+    return Array.from(arr, dec2hex).join('')
+}

package/vertical.toolbar.svelte

@@ -23,8 +23,9 @@
         } from "./stores.js";     
     import Icon from './components/icon.svelte';
     import {session, signInHRef, signOutHRef} from '@humandialog/auth.svelte'
-	import { push } from 'svelte-spa-router';
+	import { pop, push } from 'svelte-spa-router';
 	import { tick } from 'svelte';
+	import { popNavigationPage } from './utils';
     
 
     export let appConfig;
@@ -98,7 +99,12 @@
         if(!mobile)
             toggle_sidebar(key);
         else
-            show_sidebar(key);
+        {
+            if($main_sidebar_visible_store == key)
+                popNavigationPage();
+            else
+                show_sidebar(key);
+        }
     }
 
     function show_options(e)
@@ -319,7 +325,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 
 <section class="no-print flex flex-col w-full h-full" on:click={clearSelection}>
-    <div class="px-0 w-10">
+    <div class="px-0 w-12 sm:w-10">
         {#each tabs as tab}
             {@const isSelected = $main_sidebar_visible_store == tab.key}
             <button