@humandialog/forms.svelte 1.8.1 → 1.8.3

package/components/kanban/internal/kanban.card.svelte

@@ -11,11 +11,13 @@ import {
   informModification,
   pushChanges,
   startEditing,
-  Ricon
+  Ricon,
+  focusEditable
 } from "../../..";
 import { FaRegFileAlt } from "svelte-icons/fa";
 import Properties from "./kanban.props.svelte";
 import { KanbanCardTop, KanbanCardMiddle, KanbanCardBottom } from "../Kanban";
+import Editable from "../../r.editable.svelte";
 export let item;
 let definition = getContext("rKanban-definition");
 $:
@@ -82,43 +84,18 @@ function onSummaryChanged(text) {
     pushChanges();
   }
 }
-function setSelectionAtEnd(element) {
-  const textNode = element.childNodes[0];
-  const text = textNode.textContent;
-  let range = document.createRange();
-  let end_offset = text.length;
-  let end_container = textNode;
-  range.setStart(end_container, end_offset);
-  range.setEnd(end_container, end_offset);
-  let sel = window.getSelection();
-  sel.removeAllRanges();
-  sel.addRange(range);
-}
 let topProps;
 let middleProps;
 let bottomProps;
-let titleElement;
-let summaryElement;
 let summaryPlaceholder = false;
 export async function editProperty(field) {
   if (field == "Title") {
-    if (isLinkLike) {
-      startEditing(titleElement);
-    } else {
-      titleElement.focus();
-      await tick();
-      setSelectionAtEnd(titleElement);
-    }
+    focusEditable("#__or_kanban_ctrl_Title");
   } else if (field == "Summary") {
-    if (!!summaryElement) {
-      summaryElement.focus();
-      await tick();
-      setSelectionAtEnd(summaryElement);
-    } else {
+    if (!focusEditable("#__or_kanban_ctrl_Summary")) {
       summaryPlaceholder = true;
       await tick();
-      if (!!summaryElement)
-        summaryElement.focus();
+      focusEditable("#__or_kanban_ctrl_Summary");
     }
   } else {
     const property = definition.properties.find((p) => p.name == field);
@@ -209,23 +186,22 @@ function showAttachementIcon() {
         {@const showIcon = showAttachementIcon()}
             <!-- whitespace-nowrap overflow-clip  -->
             <h4     class = "font-semibold relative"
-                    use:editable={{
-                    action: (text) => onTitleChanged(text),
-                    active: false,
-                    readonly: definition.titleReadOnly,
-                    onFinish: (d) => {titleElement.blur()},
-                    onSoftEnter: async (text) => { onTitleChanged(text); await editProperty('Summary') }
-                    }}
                 use:conditionalClick={{
                     condition: hasOpen,
-                    callback: performOpen}}
-                bind:this={titleElement}>
+                    callback: performOpen}}>
                 {#if isLinkLike}
                     <a class= "font-semibold" href={getHRef()} use:link>
-                        {item[definition.titleAttrib]}
+                        <Editable   self={item} 
+                                    a={definition.titleAttrib} 
+                                    readonly={definition.titleReadOnly}
+                                    focusOnClick={false}
+                                    id="__or_kanban_ctrl_Title"/>
                     </a>
                 {:else}
-                    {item[definition.titleAttrib]}
+                    <Editable   self={item} 
+                                a={definition.titleAttrib} 
+                                readonly={definition.titleReadOnly}
+                                id="__or_kanban_ctrl_Title"/>
                 {/if}
 
 
@@ -258,13 +234,9 @@ function showAttachementIcon() {
     {#if item[definition.summaryAttrib] || summaryPlaceholder}
         {#key item[definition.summaryAttrib]}
             {#if isCardActive}
-                <figcaption use:editable={{
-                                action: (text) => onSummaryChanged(text),
-                                active: true,
-                                readonly: definition.summaryReadOnly,
-                                onFinish: (d) => {summaryPlaceholder = false}}}
-                            bind:this={summaryElement}>
-                    {item[definition.summaryAttrib]}
+                <figcaption><Editable   self={item} 
+                                        a={definition.summaryAttrib} 
+                                        id="__or_kanban_ctrl_Summary"/>
                 </figcaption>
             {:else}
                 <figcaption>

package/components/kanban/internal/kanban.column.svelte

@@ -145,7 +145,7 @@ export async function add(after = KanbanColumnTop) {
     if (detail.cancel)
       activateAfterDomUpdate = lastActivatedElement;
     else {
-      if (detail.incremental) {
+      if (false) {
         let currentActive = activateAfterDomUpdate ?? getActive("props");
         if (currentActive)
           await add(currentActive);

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

@@ -8,7 +8,8 @@ import {
   editable,
   startEditing,
   addActiveItem,
-  removeActiveItem
+  removeActiveItem,
+  focusEditable
 } from "../../../utils";
 import { showGridMenu, showMenu } from "../../menu";
 import { pushChanges, informModification } from "../../../updates";
@@ -16,12 +17,10 @@ import { isDeviceSmallerThan } from "../../../utils";
 import Circle from "../../ricons/circle.svelte";
 import CircleCheck from "../../ricons/circle-check.svelte";
 import Ricon from "../../r.icon.svelte";
-import Spinner from "../../delayed.spinner.svelte";
 import { rList_definition, rList_property_type } from "../List";
 import { push, link } from "svelte-spa-router";
-import { FaExternalLinkAlt, FaRegCircle, FaRegCheckCircle } from "svelte-icons/fa/";
-import Tags from "../../tags.svelte";
 import { ext } from "../../../i18n";
+import Editable from "../../r.editable.svelte";
 export let item;
 export let element_title = "";
 export let list_properties = void 0;
@@ -188,33 +187,12 @@ export function editProperty(field) {
   }
 }
 async function force_editing(field) {
-  let element_id = `__or_list_ctrl_${getItemKey(item)}_${field}`;
-  let element_node = document.getElementById(element_id);
-  if (!element_node) {
+  let element_id = `#__or_list_ctrl_${getItemKey(item)}_${field}`;
+  if (!focusEditable(element_id)) {
     placeholder = field;
     await tick();
-    element_node = document.getElementById(element_id);
-    if (!element_node)
-      return;
+    focusEditable(element_id);
   }
-  if (!element_node.classList.contains("editable")) {
-    return;
-  }
-  startEditing(element_node, () => {
-    placeholder = "";
-  });
-}
-function setSelectionAtEnd(element) {
-  const textNode = element.childNodes[0];
-  const text = textNode.textContent;
-  let range = document.createRange();
-  let end_offset = text.length;
-  let end_container = textNode;
-  range.setStart(end_container, end_offset);
-  range.setEnd(end_container, end_offset);
-  let sel = window.getSelection();
-  sel.removeAllRanges();
-  sel.addRange(range);
 }
 let rootElement;
 export function scrollToView() {
@@ -408,36 +386,30 @@ async function onDownloadFile(e) {
             href={element_href}
             on:click={onDownloadFile}>
 
-            <h4 class="-indent-8"
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={isDownloading ? 'loader-circle' : element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else if element_href}
         <a  class="sm:hover:cursor-pointer"
             href={element_href} use:link>
 
-            <h4 class="-indent-8 "
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8 ">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else if element_open_handler}
@@ -445,33 +417,26 @@ async function onDownloadFile(e) {
             href="/#"
             on:click|preventDefault={() => element_open_handler(item)}>
 
-            <h4 class="-indent-8"
-                id="__or_list_ctrl_{getItemKey(item)}_Title"
-                use:editable={{
-                    action: (text) => {change_property(element_title, text)},
-                    active: false,
-                    readonly: title_readonly,
-                    onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-                }}>
+            <h4 class="-indent-8">
                 <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                         text-stone-700 dark:text-stone-400 ">
                         <Ricon icon={element_icon} />
-                </div>{translated_element_title}
+                </div><Editable     self={item} 
+                                    a={element_title} 
+                                    id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                    readonly={title_readonly} 
+                                    focusOnClick={false}/>
             </h4>
         </a>
     {:else}
-        <h4 class="-indent-8 "
-            id="__or_list_ctrl_{getItemKey(item)}_Title"
-            use:editable={{
-                action: (text) => {change_property(element_title, text)},
-                active: false,
-                readonly: title_readonly,
-                onSoftEnter: (text) => {change_name(text); editProperty('Summary')}
-            }}>
+        <h4 class="-indent-8">
             <div class="inline-block w-4 h-4 ml-0 mr-4 align-baseline
                     text-stone-700 dark:text-stone-400 ">
                     <Ricon icon={element_icon} />
-            </div>{translated_element_title}
+            </div><Editable     self={item} 
+                                a={element_title} 
+                                id="__or_list_ctrl_{getItemKey(item)}_Title" 
+                                readonly={title_readonly}/>
         </h4>
     {/if}
 
@@ -485,25 +450,14 @@ async function onDownloadFile(e) {
     </figcaption>
     -------------------------------->
 
-    {#if summary && (item[summary])}
-        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary" use:editable={{
-                    action: (text) => {change_property(summary, text)},
-                    readonly: summary_readonly,
-                    onFinish: (d) => {placeholder='';},
-                    active: true
-                }}>{item[summary]}
-        </figcaption>
-
-    {:else if placeholder=='Summary'}
-        <figcaption id="__or_list_ctrl_{getItemKey(item)}_Summary"
-                    use:editable={{
-                    action: (text) => {change_property(summary, text)},
-                    readonly: summary_readonly,
-                    onFinish: (d) => {placeholder='';},
-                    active: true
-                }}>&nbsp;
+    {#if (summary && (item[summary])) || (placeholder=='Summary')}
+        <figcaption><Editable   self={item} 
+                            a={summary}
+                            id="__or_list_ctrl_{getItemKey(item)}_Summary"
+                            readonly={summary_readonly} />
         </figcaption>
     {/if}
+
 </figure>
 </div>
 

package/components/list/internal/list.inserter.svelte

@@ -59,39 +59,3 @@ async function onSummaryChanged(text) {
         {/if}
 </figure>
 
-
-<!--section    class=" my-1 w-full text-base text-stone-700 dark:text-stone-400 cursor-default rounded-md border border-transparent bg-stone-200 dark:bg-stone-700">
-    <div class="flex flex-row">
-        {#if icon}
-
-            <div class="h-5 w-5 sm:h-4 sm:w-4 mt-2 sm:mt-1.5 ml-2"></div>
-        {/if}
-
-        <p  class=" ml-3 py-1
-                    text-base font-semibold min-h-[1.75rem]
-                    sm:min-h-[1.25rem]
-                    whitespace-nowrap overflow-clip flex-none w-1/2 sm:w-1/3" tabindex="0"
-            bind:this={titleElement}
-            use:editable={{
-                action: (text) => onInsert(text, ''),
-                active: false,
-                onSoftEnter: softEnter
-                }} >
-        </p>
-    </div>
-
-    {#if editSummary}
-        <p  bind:this={summaryElement}
-            class="     ml-10 sm:ml-9
-                        sm:min-h-[1rem]
-                        text-sm min-h-[1.5rem]
-                        text-stone-400"
-                use:editable={{
-                    action: onSummaryChanged,
-                    active: false,
-                    onFinish: (d) => {editSummary=false}
-                }}>
-            {summary}
-        </p>
-    {/if}
-</section-->

package/components/list/list.svelte

@@ -214,7 +214,7 @@ export async function addRowAfter(after = null) {
     if (detail.cancel)
       activate_after_dom_update = last_activated_element;
     else {
-      if (detail.incremental && definition.insert_incremental) {
+      if (false) {
         let current_active = getActive(selectionKey);
         await addRowAfter(current_active);
       }
@@ -411,10 +411,7 @@ function read_from_def(propName) {
                             {selectionKey}
                             bind:this={rows[i]}
                             >
-
-                <span slot="left" let:element>
-                    <slot name="left" {element}/>
-                </span>
+   
             </ListElement>
 
             {#if show_insertion_row_after_element == element}

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

@@ -43,9 +43,6 @@ declare const __propDef: {
     };
     slots: {
         default: {};
-        left: {
-            element: any;
-        };
     };
 };
 export type ListProps = typeof __propDef.props;

package/components/r.editable.svelte

@@ -64,9 +64,7 @@
 				}}
 				on:focus={focus}
 				on:blur={blur}
->
-	{ext(self[a])}
-</span>
+>{ext(self[a])}</span>
 
 <!--style>
 	span:empty:focus::before {

package/desk.svelte

@@ -409,8 +409,8 @@
                                 overflow-auto" >
 
                     <div class="    flex flex-row justify-between  h-full
-                                    text-stone-500 bg-stone-200/70 hover:bg-stone-200
-                                    dark:text-orange-200 dark:bg-stone-700/70 dark:hover:bg-stone-700
+                                    text-stone-500 bg-stone-200/70
+                                    dark:text-orange-200 dark:bg-stone-700/70
                                     bg-stone-200 dark:bg-stone-800/70
                                     border-t border-stone-500 ">
                         <HorizontalNavigatorTabs appConfig={layout}/>
@@ -430,12 +430,12 @@
                                 left-0 bottom-[50px]
                                 sm:left-[40px] sm:top-0
                                 w-full sm:w-[320px]
-                                h-[calc(100vh-100px)] sm:h-full
+                                h-[calc(100svh-50px)] sm:h-full
 
                                 z-30 overflow-x-hidden
 
                                 bg-stone-50 dark:bg-stone-900
-                                border-2 sm:border-r border-stone-300 dark:border-stone-300/50
+                                border-t sm:border-t-0 sm:border-r border-stone-300 dark:border-stone-300/50
                                 sm:shadow-lg sm:shadow-stone-500
                                 sm:dark:shadow-black">
 

package/index.d.ts

@@ -71,7 +71,7 @@ export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
 export { default as EditableSpan } from './components/prose.editable.span.svelte';
 export { default as EditableParagraph } from './components/prose.editable.p.svelte';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, focusEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail, localStorageSave, localStorageRead, sessionStorageSave, sessionStorageRead, hasLocalStorage, getCurrentGroupName, getGroupsMenu } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, focusEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail, localStorageSave, localStorageRead, sessionStorageSave, sessionStorageRead, hasLocalStorage, getCurrentGroupName, getGroupsMenu, fetchHandlers } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/index.js

@@ -77,7 +77,7 @@ export { default as Breadcrumb } from './components/breadcrumb.svelte';
 export { breadcrumbAdd, breadcrumbParse, breadcrumbStringify, breadcrumbClipName } from './components/breadcrumb_utils';
 export { default as EditableSpan } from './components/prose.editable.span.svelte';
 export { default as EditableParagraph } from './components/prose.editable.p.svelte';
-export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, focusEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail, localStorageSave, localStorageRead, sessionStorageSave, sessionStorageRead, hasLocalStorage, getCurrentGroupName, getGroupsMenu } from './utils';
+export { selectItem, activateItem, clearActiveItem, isActive, isSelected, getActive, getActiveItems, getActiveCount, addActiveItem, removeActiveItem, editable, startEditing, saveCurrentEditable, focusEditable, selectable, handleSelect, isDeviceSmallerThan, resizeImage, refreshToolbarOperations, reloadPageToolbarOperations, isOnScreenKeyboardVisible, randomString, UI, NAV_MODE_SIDEBAR, NAV_MODE_FULL_PAGE, navGetMode, navIsVisible, navGetKey, navShow, navHide, navToggle, navPrevVisibleKey, navAutoHide, insertAt, insertAfter, getPrev, getNext, getFirst, getLast, removeAt, remove, swapElements, setSelectionAtEnd, isValidEmail, localStorageSave, localStorageRead, sessionStorageSave, sessionStorageRead, hasLocalStorage, getCurrentGroupName, getGroupsMenu, fetchHandlers } from './utils';
 export { getNiceStringDateTime, getFormattedStringDate, getNiceStringDate, dayName, monthName } from './components/date_utils';
 export { mainContentPageReloader, reloadMainContentPage, reloadWholeApp, wholeAppReloader, alerts, addAlert, onErrorShowAlert, main_sidebar_visible_store, navKey, tagsReloader, reloadVisibleTags, dark_mode_store, showFABAlways } from './stores.js';
 export { data_tick_store, // tmp

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.8.1",
+  "version": "1.8.3",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -27,7 +27,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@humandialog/auth.svelte": "^1.8.21",
+    "@humandialog/auth.svelte": "^1.9.2",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.5",
     "@tiptap/extension-code-block": "^2.11.5",

package/updates.d.ts

@@ -6,4 +6,5 @@ export function hasModifications(): boolean;
 export function informItem(itm: any, type_name?: undefined): boolean;
 export function pushChanges(afterPushCallback?: undefined): void;
 export function xpushChanges(afterPushCallback?: undefined): void;
+export function pushChangesImmediately(): Promise<void>;
 export const unsavedModificationsTicket: import("svelte/store").Writable<number>;

package/updates.js

@@ -11,6 +11,10 @@ const modified_item_store = writable(null);
 export function setjItemProperty(item, field_name, value)
 {
     console.log('setjItemProperty ' + field_name)
+    
+    if(item[field_name] == value)
+        return
+    
     let type_name = item.$type;
     item[field_name] = value;
     informModification(item, field_name, type_name);
@@ -118,6 +122,9 @@ export function pushChanges(afterPushCallback=undefined)
 {
     //console.trace()
 
+    if(!modified_items_map.size)
+        return;
+
     if(afterPushCallback)
         afterPushCallbacks.push(afterPushCallback);
 
@@ -154,9 +161,25 @@ modified_item_store.subscribe((mod_item) => {
 export const unsavedModificationsTicket = writable(0);
 
 update_request_ticket.subscribe(async (v) => {
-    if(v != last_update_ticket)
+    flushChanges(v)
+})
+
+export async function pushChangesImmediately()
+{
+    if(!modified_items_map.size)
+        return;
+
+    const ticket = get(update_request_ticket) + 1
+    update_request_ticket.set(ticket)
+
+    await flushChanges(ticket);
+}
+
+async function flushChanges(ticket)
+{
+    if(ticket != last_update_ticket)
     {
-        last_update_ticket = v;
+        last_update_ticket = ticket;
 
         if(!modified_items_map.size)
             return;
@@ -203,7 +226,7 @@ update_request_ticket.subscribe(async (v) => {
                 {
                     modified_items_map.clear();
                     unsavedModificationsTicket.set( get(unsavedModificationsTicket) + 1 )
-                    
+
                     afterPushCallbacks.forEach( cb => cb())
                     afterPushCallbacks = []
                 }
@@ -220,4 +243,4 @@ update_request_ticket.subscribe(async (v) => {
         }
 
     }
-})
+} 

package/utils.d.ts

@@ -83,3 +83,7 @@ export namespace UI {
 export const NAVIGATION_PAGE_PATH: "/nav";
 export const NAV_MODE_SIDEBAR: 0;
 export const NAV_MODE_FULL_PAGE: 1;
+export namespace fetchHandlers {
+    const onBefore: ((path: any) => void)[];
+    const onError: ((err: any, res: any) => void)[];
+}

package/utils.js

@@ -1,9 +1,10 @@
 import { getContext, tick } from "svelte";
 import {derived, get} from 'svelte/store'
-import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store, main_sidebar_visible_store, show_sidebar, hide_sidebar, previously_visible_sidebar, auto_hide_sidebar, reloadWholeApp} from "./stores";
+import { contextItemsStore, contextToolbarOperations, pageToolbarOperations, data_tick_store, main_sidebar_visible_store, show_sidebar, hide_sidebar, previously_visible_sidebar, auto_hide_sidebar, reloadWholeApp, onErrorShowAlert} from "./stores";
 import {location, push, pop} from 'svelte-spa-router'
 import {session, reef} from '@humandialog/auth.svelte'
 import { i18n } from "./i18n";
+import {pushChangesImmediately} from './updates'
 
 export let icons = {symbols :null}
 
@@ -366,8 +367,8 @@ export function editable(node, params)
 
     let observer = null;
     let has_changed = false;
+    let org_text = '';
 
-    const org_text = node.textContent;
     const blur_listener = async (e) =>
     {
         if(currentEditable == node)
@@ -403,13 +404,9 @@ export function editable(node, params)
         {
         case 'Esc':
         case 'Escape':
-            if(!active)
-            {
-                e.stopPropagation();
-                e.preventDefault();
-
-                await finish_editing({ cancel: true });
-            }
+            e.stopPropagation();
+            e.preventDefault();
+            await finish_editing({ cancel: true });
             break;
 
         case 'Enter':
@@ -447,16 +444,17 @@ export function editable(node, params)
         const cancel = params.cancel ?? false;
         const incremental = params.incremental ?? false;
 
+        node.removeEventListener("blur", blur_listener);
+        node.removeEventListener("keydown", key_listener);
+        node.removeEventListener("save", save_listener);
+
        if(!active)
-       {
-            node.removeEventListener("blur", blur_listener);
-            node.removeEventListener("keydown", key_listener);
-            node.removeEventListener("save", save_listener);
             node.contentEditable = "false"
+       else
+            node.blur()
 
-            let sel = window.getSelection();
-            sel.removeAllRanges();
-       }
+        let sel = window.getSelection();
+        sel.removeAllRanges();
 
         if(cancel)
         {
@@ -468,17 +466,11 @@ export function editable(node, params)
         }
         else if(action)
         {
-            if(active)
+            if(has_changed)
             {
-                if(has_changed)
-                {
-                    has_changed = false;
-                    await action(node.textContent)
-                }
-
-            }
-            else
+                has_changed = false;
                 await action(node.textContent)
+            }
         }
 
         const finish_event  = new CustomEvent("finish", {
@@ -505,28 +497,23 @@ export function editable(node, params)
     const edit_listener = async (e) =>
     {
         node.contentEditable = "true"
-        node.addEventListener("blur", blur_listener);
-        node.addEventListener("keydown", key_listener);
-
-        currentEditable = node;
-        node.addEventListener("save", save_listener)
-
         node.focus();
 
-        /*await tick();
+        await tick();
+
         let range = document.createRange();
         range.selectNodeContents(node);
         let end_offset = range.endOffset;
         let end_container = range.endContainer;
         range.setStart(end_container, 0)
-        range.setEnd(end_container, end_offset)
+        range.setEnd(end_container, 0)
         //range.setStart(node, 0)
         //range.setEnd(node, 0)
        // console.log('range rect: ', range.getBoundingClientRect())
         let sel = window.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
-        */
+        
     }
 
     const focus_listener = async (e) =>
@@ -543,6 +530,8 @@ export function editable(node, params)
                 onSingleChange(node.textContent)
         });
 
+        org_text = node.textContent;
+
         observer.observe(   node,  {
                                 childList: true,
                                 attributes: true,
@@ -553,28 +542,26 @@ export function editable(node, params)
     node.classList.add("editable")
     node.classList.add("focus:outline-none")
 
+    node.addEventListener('focus', focus_listener);
+    node.addEventListener("edit", edit_listener);
+
+    if(onFinish)
+        node.addEventListener("finish", (e) => { onFinish(e.detail) })
+    
     if(active)
-    {
         node.contentEditable = "true"
-        node.addEventListener('focus', focus_listener);
-
-        if(onFinish)
-        {
-            node.addEventListener("finish", (e) => { onFinish(e.detail) })
-        }
-    }
-    else
-    {
-        node.addEventListener("edit", edit_listener);
+    
+    return {
+        destroy() {
 
-        return {
-            destroy() {
+            node.removeEventListener("edit", edit_listener)
+            node.removeEventListener('focus', focus_listener);
+            if(onFinish)
+                node.removeEventListener("finish", (e) => { onFinish(e.detail) })
 
-                node.removeEventListener("edit", edit_listener)
-                node.classList.remove("editable")
-                node.contentEditable = "false"
-            }};
-    }
+            node.classList.remove("editable")
+            
+        }};
 }
 
 export function startEditing(element, finish_callback)
@@ -1289,4 +1276,17 @@ function launchNewGroupWizzard(afterGroupCreated=undefined)
     });
     
     dialog.show()    
+}
+
+
+
+export const fetchHandlers = {
+    onBefore: [
+        (path) => { pushChangesImmediately() }
+    ],
+
+    //onAfter: [],
+    onError: [
+        (err, res) => onErrorShowAlert(err)
+    ]
 }