@dosgato/dialog 0.0.65 → 0.0.66

package/dist/FieldAutocomplete.svelte

@@ -73,16 +73,12 @@ function reactToValue(value, setVal) {
             setVal(finaldeserialize(''));
     }
 }
-let portal;
-onMount(() => {
-    portal = inputelement.closest('.dialog-content');
-});
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={finalserialize} deserialize={finaldeserialize} let:value let:setVal let:valid let:invalid let:id let:onBlur let:messagesid let:helptextid>
   {@const _ = reactToValue(value, setVal)}
   <input bind:this={inputelement} bind:value={inputvalue} {id} {placeholder} class="dialog-input {className}" class:valid class:invalid aria-invalid={invalid} aria-expanded={false} aria-controls={menuid} on:blur={onBlur} on:keyup={onKeyUp(setVal)} autocapitalize="none" type="text" autocomplete="off" aria-autocomplete="list" role="combobox" {disabled} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])}>
-  <PopupMenu bind:menushown bind:menuid align="bottomleft" usePortal={portal} items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
+  <PopupMenu bind:menushown bind:menuid align="bottomleft" items={filteredChoices} buttonelement={inputelement} bind:value={popupvalue} on:change={onchangepopup(setVal)} emptyText="No options available"/>
   <ScreenReaderOnly arialive="polite" ariaatomic={true} id={liveTextId}>
     {filteredChoices.length} {filteredChoices.length === 1 ? 'option' : 'options'} available.
   </ScreenReaderOnly>

package/dist/FieldChooserLink.svelte

@@ -1,17 +1,12 @@
-<script context="module">function reconstructUrl(url) {
-    const urlToTest = (/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9])/.test(url)) ? `https://${url}` : url;
-    return new URL(urlToTest).toString();
-}
-</script>
-<script>import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
+<script>import arrowClockwiseFill from '@iconify-icons/ph/arrow-clockwise-fill';
+import deleteOutline from '@iconify-icons/mdi/delete-outline';
+import { FORM_CONTEXT, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
 import { getContext } from 'svelte';
 import { isBlank, isNotBlank, randomid } from 'txstate-utils';
-import { Chooser, ChooserStore, CHOOSER_API_CONTEXT } from './chooser';
+import { Chooser, ChooserStore, CHOOSER_API_CONTEXT, cleanUrl } from './chooser';
 import Details from './chooser/Details.svelte';
 import Thumbnail from './chooser/Thumbnail.svelte';
-import FieldStandard from './FieldStandard.svelte';
-import InlineMessage from './InlineMessage.svelte';
-import { getDescribedBy } from './';
+import { getDescribedBy, FieldStandard, InlineMessage, Icon } from './';
 export let id = undefined;
 export let path;
 export let label = '';
@@ -61,6 +56,7 @@ function userUrlEntry() {
 }
 async function userUrlEntryDebounced() {
     const url = this.value;
+    const cleanedUrl = cleanUrl(url);
     store.clearPreview();
     if (isBlank(url)) {
         selectedAsset = undefined;
@@ -69,7 +65,9 @@ async function userUrlEntryDebounced() {
     }
     let found = false;
     if (chooserClient.findByUrl) {
-        const item = await chooserClient.findByUrl(url);
+        let item = await chooserClient.findByUrl(url);
+        if (!item && isNotBlank(cleanedUrl))
+            item = await chooserClient.findByUrl(cleanedUrl);
         if (url !== this.value)
             return;
         if (item) {
@@ -98,20 +96,19 @@ async function userUrlEntryDebounced() {
             selectedAsset = { type: 'raw', id: urlToValueCache[url], url };
         }
         else {
-            try {
-                const reconstructed = reconstructUrl(url);
-                selectedAsset = {
-                    type: 'raw',
-                    id: chooserClient.urlToValue?.(reconstructed) ?? reconstructed,
-                    url
-                };
-            }
-            catch {
+            if (isBlank(cleanedUrl) || cleanedUrl.startsWith('/')) {
                 // here we "select" a raw url so that we do not interrupt the users' typing, but
                 // we set its id to 'undefined' so that nothing makes it into the form until it's
                 // a valid URL
                 selectedAsset = { type: 'raw', id: undefined, url };
             }
+            else {
+                selectedAsset = {
+                    type: 'raw',
+                    id: chooserClient.urlToValue?.(cleanedUrl) ?? cleanedUrl,
+                    url
+                };
+            }
         }
     }
     formStore.setField(finalPath, selectedAsset?.id);
@@ -128,14 +125,19 @@ async function updateSelected(..._) {
         try {
             if (!selectedAsset) {
                 const urlFromValue = chooserClient.valueToUrl?.($value) ?? $value;
-                try {
-                    selectedAsset = { type: 'raw', id: $value, url: reconstructUrl(urlFromValue) };
+                const cleanedUrlFromValue = cleanUrl(urlFromValue);
+                if (isBlank(cleanedUrlFromValue)) {
+                    selectedAsset = undefined;
+                }
+                else if (cleanedUrlFromValue.startsWith('/')) {
+                    selectedAsset = { type: 'broken', id: $value, url: cleanedUrlFromValue };
                 }
-                catch {
-                    selectedAsset = { type: 'broken', id: $value, url: $value };
+                else {
+                    selectedAsset = { type: 'raw', id: $value, url: cleanedUrlFromValue };
                 }
             }
-            urlToValueCache[selectedAsset.url] = $value;
+            if (selectedAsset)
+                urlToValueCache[selectedAsset.url] = $value;
         }
         catch (e) {
             console.error(e);
@@ -149,15 +151,27 @@ $: updateSelected($value);
   {#if selectedAsset?.id}
     <div class="dialog-chooser-container">
       <Thumbnail item={selectedAsset} />
-      <Details item={selectedAsset} />
+      <div class="dialog-chooser-right">
+        <Details item={selectedAsset} singleLine />
+        {#if !urlEntry}
+          <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+            <Icon icon={arrowClockwiseFill} /> Replace
+          </button>
+        {/if}
+        <button type="button" on:click={() => { selectedAsset = undefined; setVal(undefined) }} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>
+          <Icon icon={deleteOutline} /> Remove
+        </button>
+    </div>
+    </div>
+  {/if}
+  {#if urlEntry || !selectedAsset?.id}
+    <div class="dialog-chooser-entry">
+      {#if urlEntry}
+        <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
+      {/if}
+      <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
     </div>
   {/if}
-  <div class="dialog-chooser-entry">
-    {#if urlEntry}
-      <input type="text" value={selectedAsset?.url ?? ''} on:change={userUrlEntry} on:keyup={userUrlEntry}>
-    {/if}
-    <button type="button" on:click={show} aria-describedby={getDescribedBy([descid, messagesid, helptextid, extradescid])}>Select {#if value}New{/if} {#if assets && pages}Link Target{:else if images}Image{:else if assets}Asset{:else}Page{/if}</button>
-  </div>
   {#if selectedAsset?.url.length && !selectedAsset.id}
     <InlineMessage message={{ message: 'Entry does not match an internal resource and is not a valid URL. Nothing will be saved.', type: 'warning' }} />
   {/if}
@@ -169,6 +183,7 @@ $: updateSelected($value);
 <style>
   .dialog-chooser-container {
     display: flex;
+    flex-wrap: wrap;
     margin-bottom: 0.25em;
     font-size: 0.9em;
   }
@@ -177,6 +192,9 @@ $: updateSelected($value);
     padding-top: 0;
     height: 5em;
   }
+  .dialog-chooser-right button {
+    margin-top: 0.5em;
+  }
   .dialog-chooser-entry {
     display: flex;
   }

package/dist/FieldIdentifier.svelte

@@ -2,8 +2,9 @@
 import { randomid } from 'txstate-utils';
 export let path;
 export let conditional = undefined;
+export let length = 10;
 </script>
 
-<Field {path} {conditional} defaultValue={randomid()} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value>
+<Field {path} {conditional} defaultValue={randomid(length)} serialize={nullableSerialize} deserialize={nullableDeserialize} let:value>
   <input type="hidden" name={path} {value}>
 </Field>

package/dist/FieldIdentifier.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         path: string;
         conditional?: boolean | undefined;
+        length?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/FieldMultiselect.svelte

@@ -47,9 +47,7 @@ async function wrapGetOptions(search) {
 const selectedStore = new Store([]);
 let hasInit = !defaultValue.length;
 let inputelement;
-let portal;
 onMount(async () => {
-    portal = inputelement.closest('.dialog-content');
     await reactToValue(defaultValue);
     hasInit = true;
 });
@@ -73,7 +71,7 @@ async function reactToValue(value) {
   <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
     {@const _ = reactToValue(value)}
     <div class:valid class:invalid>
-      <MultiSelect {id} name={path} usePortal={portal} descid={getDescribedBy([messagesid, helptextid, extradescid])}
+      <MultiSelect {id} name={path} descid={getDescribedBy([messagesid, helptextid, extradescid])}
         {disabled} {maxSelections} selected={$selectedStore} {placeholder} getOptions={wrapGetOptions}
         inputClass='multiselect-input'
         on:change={e => setVal(e.detail.map(itm => itm.value))} on:blur={onBlur}

package/dist/FieldSelect.svelte

@@ -10,7 +10,7 @@ export let placeholder = 'Select' + (label ? ' ' + label : '');
 export let notNull = false;
 export let disabled = false;
 export let choices;
-export let defaultValue = notNull ? choices[0].value : undefined;
+export let defaultValue = notNull ? choices[0]?.value : undefined;
 export let conditional = undefined;
 export let required = false;
 export let inputelement = undefined;
@@ -32,10 +32,12 @@ function updateValue(valu, sVal, fDes) {
 function reactToChoices(..._) {
     if (!stVal)
         return;
-    if (!choices.length)
+    if (!choices.length) {
         stVal(finalDeserialize(''));
+        return;
+    }
     if (!choices.some(o => o.value === val))
-        stVal(notNull ? choices[0].value : finalDeserialize(''));
+        stVal(notNull ? defaultValue : finalDeserialize(''));
 }
 $: reactToChoices(choices);
 onMount(reactToChoices);

package/dist/FieldText.svelte

@@ -1,6 +1,8 @@
 <script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
 import Input from './Input.svelte';
+import MaxLength from './MaxLength.svelte';
+import { isNotNull } from 'txstate-utils';
 let className = '';
 export { className as class };
 export let id = undefined;
@@ -22,5 +24,8 @@ export let helptext = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <Input bind:inputelement {type} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {maxlength} {messagesid} {helptextid} {extradescid} {use}></Input>
+  <Input bind:inputelement {type} {autocomplete} name={path} {value} {id} class="dialog-input {className}" {allowlastpass} {onChange} {onBlur} {valid} {invalid} {messagesid} {helptextid} {extradescid} {use}></Input>
+  {#if isNotNull(maxlength)}
+    <MaxLength {value} {maxlength}/>
+  {/if}
 </FieldStandard>

package/dist/FieldTextArea.svelte

@@ -2,6 +2,8 @@
 import { passActions } from '@txstate-mws/svelte-components';
 import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
 import FieldStandard from './FieldStandard.svelte';
+import MaxLength from './MaxLength.svelte';
+import { isNotNull } from 'txstate-utils';
 let className = '';
 export { className as class };
 export let id = undefined;
@@ -21,7 +23,10 @@ export let helptext = undefined;
 </script>
 
 <FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste {maxlength} use:passActions={use}></textarea>
+  <textarea bind:this={inputelement} name={path} {value} {id} {rows} class="dialog-input dialog-textarea {className}" class:valid class:invalid aria-invalid={invalid} aria-describedby={getDescribedBy([messagesid, helptextid, extradescid])} on:change={onChange} on:blur={onBlur} on:keyup={onChange} on:paste use:passActions={use}></textarea>
+  {#if isNotNull(maxlength)}
+    <MaxLength {value} {maxlength}/>
+  {/if}
 </FieldStandard>
 
 <style>

package/dist/FormDialog.svelte

@@ -21,7 +21,7 @@ async function onSubmit() {
 setContext(CHOOSER_API_CONTEXT, chooserClient);
 </script>
 
-<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size}>
+<Dialog continueText="Save" continueIcon={contentSave} cancelText="Cancel" on:escape on:continue={onSubmit} {title} {icon} {size} escapable={false}>
   <Form bind:store {submit} {validate} {chooserClient} {autocomplete} {name} {preload} on:saved let:messages let:allMessages let:showingInlineErrors let:saved let:valid let:invalid let:validating let:submitting let:data>
     <slot {messages} {allMessages} {saved} {validating} {submitting} {valid} {invalid} {data} {showingInlineErrors} />
   </Form>

package/dist/MaxLength.svelte

@@ -0,0 +1,36 @@
+<script>export let maxlength;
+export let value;
+let overLimit = false;
+$: message = getMaxlengthMessage(value.length);
+function getMaxlengthMessage(length) {
+    overLimit = false;
+    if (length === 0) {
+        return `${maxlength} characters allowed`;
+    }
+    else if (length <= maxlength) {
+        const diff = maxlength - length;
+        return `${diff} character${diff === 1 ? '' : 's'} remaining`;
+    }
+    else {
+        overLimit = true;
+        const diff = length - maxlength;
+        return `${diff} character${diff === 1 ? '' : 's'} over limit`;
+    }
+}
+</script>
+
+<div class:over={overLimit} aria-live="polite">{message}</div>
+
+<style>
+  div {
+    font-size: 0.9em;
+    color: #595959;
+    line-height: 1.25em;
+    margin-top: 0.4em;
+  }
+  .over {
+    color: #9a3332;
+    font-weight: bold;
+  }
+
+</style>

package/dist/MaxLength.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        maxlength: number;
+        value: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MaxLengthProps = typeof __propDef.props;
+export type MaxLengthEvents = typeof __propDef.events;
+export type MaxLengthSlots = typeof __propDef.slots;
+export default class MaxLength extends SvelteComponentTyped<MaxLengthProps, MaxLengthEvents, MaxLengthSlots> {
+}
+export {};

package/dist/Tooltip.svelte

@@ -4,8 +4,6 @@ export let right = false;
 export let bottom = false;
 export let left = false;
 export let active = false;
-export let color = "#fff";
-let style = `background-color: ${color}; border: 1px solid black;`;
 </script>
 
 <style>

package/dist/Tooltip.svelte.d.ts

@@ -7,7 +7,6 @@ declare const __propDef: {
         bottom?: boolean | undefined;
         left?: boolean | undefined;
         active?: boolean | undefined;
-        color?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/chooser/ChooserStore.d.ts

@@ -61,4 +61,5 @@ export declare class ChooserStore<F = any> extends Store<IAssetStore> {
     clearPreview(): void;
     setSource(name?: string, init?: boolean): void;
 }
+export declare function cleanUrl(url: string): string;
 export {};

package/dist/chooser/ChooserStore.js

@@ -95,3 +95,23 @@ export class ChooserStore extends Store {
         });
     }
 }
+export function cleanUrl(url) {
+    if (url.startsWith('//'))
+        url = 'https:' + url;
+    if (url.startsWith('/'))
+        return url;
+    try {
+        const _ = new URL(url);
+        return url;
+    }
+    catch (e) {
+        const fixed = 'https://' + url;
+        try {
+            const _ = new URL(fixed);
+            return fixed;
+        }
+        catch (e) {
+            return '';
+        }
+    }
+}

package/dist/chooser/Details.svelte

@@ -1,54 +1,53 @@
-<script>import { bytesToHuman } from './ChooserStore';
+<script>import { bytesToHuman, cleanUrl } from './ChooserStore';
 export let item;
+export let singleLine = false;
 </script>
 
-<dl class="dialog-chooser-info" aria-live="polite">
+<dl class="dialog-chooser-info" aria-live="polite" class:multiLine={!singleLine}>
   {#if item.type === 'raw' && item.id}
-    <div>
+    <div class="top-row">
       <dt>External Link:</dt>
-      <dd>{item.url}</dd>
+      <dd>{cleanUrl(item.url)}</dd>
     </div>
   {:else if item.type === 'broken'}
-    <div>
-      <dt>Unknown Link (this resource may have been deleted):</dt>
+    <div class="top-row">
+      <dt>Unknown Link (may have been deleted):</dt>
       <dd>{item.url}</dd>
     </div>
   {:else if item.type !== 'raw'}
     <div class="top-row">
       <dt>Name:</dt>
-      <dd>{item.path}</dd>
+      <dd>{item.name}</dd>
     </div>
   {/if}
   {#if item.type === 'asset'}
-    <div class="horizontal-group">
-      {#if item.image}
-        <div>
-          <dt>Dimensions:</dt>
-          <dd>{item.image.width}x{item.image.height}</dd>
-        </div>
-      {/if}
+    {#if item.image}
       <div>
-        <dt>File Type:</dt>
-        <dd>{item.mime}</dd>
-      </div>
-      <div>
-        <dt>File Size:</dt>
-        <dd>{bytesToHuman(item.bytes)}</dd>
+        <dt>Dimensions:</dt>
+        <dd>{item.image.width}x{item.image.height}</dd>
       </div>
+    {/if}
+    <div>
+      <dt>File Type:</dt>
+      <dd>{item.mime}</dd>
+    </div>
+    <div>
+      <dt>File Size:</dt>
+      <dd>{bytesToHuman(item.bytes)}</dd>
     </div>
   {:else if item.type === 'page' && item.title}
-    <dt>Title:</dt>
-    <dd>{item.title}</dd>
+    <div>
+      <dt>Title:</dt>
+      <dd>{item.title}</dd>
+    </div>
   {:else if item.type === 'folder'}
-    <div class="horizontal-group">
-      <div>
-        <dt>Path:</dt>
-        <dd>{item.path}</dd>
-      </div>
-      <div>
-        <dt>Contents:</dt>
-        <dd>{item.childCount} sub-items</dd>
-      </div>
+    <div>
+      <dt>Path:</dt>
+      <dd>{item.path}</dd>
+    </div>
+    <div>
+      <dt>Contents:</dt>
+      <dd>{item.childCount} sub-items</dd>
     </div>
   {/if}
   <slot />
@@ -56,6 +55,10 @@ export let item;
 
 <style>
   .dialog-chooser-info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 1em 1.5em;
     padding: 0;
     margin: 0;
     list-style: none;
@@ -66,18 +69,8 @@ export let item;
   .dialog-chooser-info dd {
     margin: 0;
   }
-  .top-row {
-    margin-bottom: 1em;
-  }
-  .horizontal-group {
-    display: flex;
-    justify-content: space-between;
-  }
-  :global([data-eq~="1400px"]) .horizontal-group {
-    flex-direction: column;
-  }
-  :global([data-eq~="1400px"]) .horizontal-group div:not(:last-child){
-    margin-bottom: 1em;
+  .multiLine .top-row {
+    width: 100%;
   }
 
 </style>

package/dist/chooser/Details.svelte.d.ts

@@ -4,6 +4,7 @@ import { type BrokenURL, type RawURL } from './ChooserStore';
 declare const __propDef: {
     props: {
         item: AnyItem | RawURL | BrokenURL;
+        singleLine?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/code/CodeEditor.svelte

@@ -0,0 +1,85 @@
+<script>import { passActions } from '@txstate-mws/svelte-components';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { getDescribedBy } from '..';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let rows = 8;
+export let language;
+export let use = [];
+export let inputelement = undefined;
+export let extradescid = undefined;
+export let helptextid = undefined;
+export let messagesid = undefined;
+export let valid = undefined;
+export let invalid = undefined;
+export let value;
+const dispatch = createEventDispatcher();
+let updateCode;
+let editorelement;
+let editor;
+onMount(async () => {
+    const { EditorView, minimalSetup } = await import('codemirror');
+    const { indentWithTab } = await import('@codemirror/commands');
+    const { lineNumbers, highlightActiveLine, highlightActiveLineGutter, keymap } = await import('@codemirror/view');
+    const { langmap } = await import('./langs.js');
+    editor = new EditorView({
+        extensions: [
+            minimalSetup,
+            lineNumbers(),
+            highlightActiveLine(),
+            highlightActiveLineGutter(),
+            langmap[language],
+            keymap.of([indentWithTab]),
+            EditorView.updateListener.of((v) => {
+                if (v.docChanged) {
+                    const newval = editor.state.doc.toString();
+                    if (value !== newval)
+                        dispatch('change', newval);
+                }
+            })
+        ],
+        parent: editorelement
+    });
+    updateCode = code => {
+        if (editor.state.doc.toString() !== code)
+            editor.update([editor.state.update({ changes: { from: 0, to: editor.state.doc.length, insert: code } })]);
+    };
+    inputelement = editorelement?.querySelector('.cm-content') ?? undefined;
+    if (id)
+        inputelement?.setAttribute('id', id);
+    if (className)
+        inputelement?.classList.add(...className.split(' '), ...[]);
+    updateValidState();
+});
+onDestroy(() => {
+    editor?.destroy();
+});
+$: updateCode?.(value ?? '');
+function updateValidState(..._) {
+    inputelement?.setAttribute('aria-invalid', String(!!invalid));
+    const descby = getDescribedBy([messagesid, helptextid, extradescid]);
+    if (descby)
+        inputelement?.setAttribute('aria-describedby', descby);
+    else
+        inputelement?.removeAttribute('aria-describedby');
+}
+$: updateValidState(invalid, messagesid);
+</script>
+
+<div bind:this={editorelement} style:--cm-editor-minh="{rows * 1.5}em" class:valid class:invalid on:paste on:focusout use:passActions={use}></div>
+
+<style>
+  div {
+    background-color: white;
+  }
+  div :global(.cm-content), div :global(.cm-gutter) {
+    min-height: var(--cm-editor-minh, 10em);
+  }
+
+  div :global(.cm-scroller) {
+    overflow: auto;
+    resize: vertical;
+  }
+
+</style>

package/dist/code/CodeEditor.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        id?: string | undefined;
+        rows?: number | undefined;
+        language: 'js' | 'css' | 'html';
+        use?: HTMLActionEntry[] | undefined;
+        inputelement?: HTMLElement | undefined;
+        extradescid?: string | undefined;
+        helptextid?: string | undefined;
+        messagesid?: string | undefined;
+        valid?: boolean | undefined;
+        invalid?: boolean | undefined;
+        value: any;
+    };
+    events: {
+        paste: ClipboardEvent;
+        focusout: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeEditorProps = typeof __propDef.props;
+export type CodeEditorEvents = typeof __propDef.events;
+export type CodeEditorSlots = typeof __propDef.slots;
+export default class CodeEditor extends SvelteComponentTyped<CodeEditorProps, CodeEditorEvents, CodeEditorSlots> {
+}
+export {};

package/dist/code/FieldCodeEditor.svelte

@@ -0,0 +1,24 @@
+<script>import { nullableSerialize, nullableDeserialize } from '@txstate-mws/svelte-forms';
+import { FieldStandard } from '..';
+import CodeEditor from './CodeEditor.svelte';
+let className = '';
+export { className as class };
+export let id = undefined;
+export let path;
+export let label = '';
+export let notNull = false;
+export let defaultValue = notNull ? '' : undefined;
+export let rows = 8;
+export let conditional = undefined;
+export let required = false;
+export let use = [];
+export let inputelement = undefined;
+export let related = 0;
+export let extradescid = undefined;
+export let helptext = undefined;
+export let language;
+</script>
+
+<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:setVal let:messagesid let:helptextid>
+  <CodeEditor {id} bind:inputelement {language} {rows} class={className} {value} {valid} {invalid} {helptextid} {messagesid} {extradescid} on:paste on:focusout={onBlur} {use} on:change={e => setVal(e.detail)}/>
+</FieldStandard>

package/dist/{FieldCodeEditor.svelte.d.ts → code/FieldCodeEditor.svelte.d.ts}

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { type HTMLActionEntry } from '@txstate-mws/svelte-components';
+import type { HTMLActionEntry } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         class?: string | undefined;
@@ -12,7 +12,7 @@ declare const __propDef: {
         conditional?: boolean | undefined;
         required?: boolean | undefined;
         use?: HTMLActionEntry[] | undefined;
-        inputelement?: HTMLTextAreaElement | undefined;
+        inputelement?: HTMLElement | undefined;
         related?: number | true | undefined;
         extradescid?: string | undefined;
         helptext?: string | undefined;

package/dist/code/index.d.ts

@@ -0,0 +1 @@
+export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';

package/dist/code/index.js

@@ -0,0 +1 @@
+export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';

package/dist/code/langs.d.ts

@@ -0,0 +1,5 @@
+export declare const langmap: {
+    js: import("@codemirror/language").LanguageSupport;
+    css: import("@codemirror/language").LanguageSupport;
+    html: import("@codemirror/language").LanguageSupport;
+};

package/dist/code/langs.js

@@ -0,0 +1,8 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+export const langmap = {
+    js: javascript(),
+    css: css(),
+    html: html()
+};

package/dist/index.d.ts

@@ -7,7 +7,6 @@ export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
-export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
@@ -41,3 +40,4 @@ export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
+export * from './code/index.js';

package/dist/index.js

@@ -7,7 +7,6 @@ export { default as FieldAutocomplete } from './FieldAutocomplete.svelte';
 export { default as FieldCheckbox } from './FieldCheckbox.svelte';
 export { default as FieldChoices } from './FieldChoices.svelte';
 export { default as FieldChooserLink } from './FieldChooserLink.svelte';
-export { default as FieldCodeEditor } from './FieldCodeEditor.svelte';
 export { default as FieldDate } from './FieldDate.svelte';
 export { default as FieldDateTime } from './FieldDateTime.svelte';
 export { default as FieldDualListbox } from './FieldDualListbox.svelte';
@@ -41,3 +40,4 @@ export * from './colorpicker/index.js';
 export * from './helpers.js';
 export * from './tree/index.js';
 export * from './cropper/index.js';
+export * from './code/index.js';

package/dist/tree/TreeNode.svelte

@@ -303,7 +303,7 @@ $: if ($dragging) {
     </div>
     {#each headers as header, i (header.id)}
       <div
-        class={(header.class ? toArray(header.class(item)) : []).concat([header.id]).join(' ')}
+        class={(header.class ? toArray(header.class(item)) : []).concat([header.id, 'tree-cell']).join(' ')}
         style:width={$headerSizes?.[i] ?? '1px'}
         style:padding-left={i === 0 ? `calc(min(${(level - 1) * 1.6}em, ${(level - 1) * 2.7}vw) + 1.4em)` : undefined}
         class:left={i === 0}
@@ -418,6 +418,10 @@ $: if ($dragging) {
     background-position: left top, right bottom, left bottom, right   top;
     animation: border-dance 1s infinite linear;
   }
+  .tree-cell {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
   @keyframes border-dance {
     0% {
       background-position: left top, right bottom, left bottom, right   top;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",
@@ -20,19 +20,21 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@txstate-mws/svelte-components": "^1.4.5",
-    "@txstate-mws/svelte-forms": "^1.3.4",
+    "@codemirror/lang-javascript": "^6.1.7",
+    "@codemirror/lang-css": "^6.2.0",
+    "@codemirror/lang-html": "^6.4.3",
     "@iconify/svelte": "^3.0.0",
     "@iconify-icons/mdi": "^1.2.22",
     "@iconify-icons/ph": "^1.2.2",
-    "codeflask": "^1.4.1",
+    "@txstate-mws/svelte-components": "^1.5.3",
+    "@txstate-mws/svelte-forms": "^1.3.4",
+    "codemirror": "^6.0.1",
     "txstate-utils": "^1.8.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/kit": "^1.0.1",
     "@sveltejs/package": "^2.0.1",
-    "@types/codeflask": "^1.4.3",
     "eslint-config-standard-with-typescript": "^34.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "svelte-check": "^3.0.1",

package/dist/FieldCodeEditor.svelte

@@ -1,71 +0,0 @@
-<script>import { passActions } from '@txstate-mws/svelte-components';
-import { nullableSerialize, nullableDeserialize, FORM_CONTEXT, FormStore, FORM_INHERITED_PATH } from '@txstate-mws/svelte-forms';
-import CodeFlask from 'codeflask';
-import { getContext, onMount } from 'svelte';
-import { isNotBlank } from 'txstate-utils';
-import { getDescribedBy, FieldStandard } from './';
-let className = '';
-export { className as class };
-export let id = undefined;
-export let path;
-export let label = '';
-export let notNull = false;
-export let defaultValue = notNull ? '' : undefined;
-export let rows = 8;
-export let conditional = undefined;
-export let required = false;
-export let use = [];
-export let inputelement = undefined;
-export let related = 0;
-export let extradescid = undefined;
-export let helptext = undefined;
-export let language;
-const store = getContext(FORM_CONTEXT);
-const inheritedPath = getContext(FORM_INHERITED_PATH);
-const finalPath = [inheritedPath, path].filter(isNotBlank).join('.');
-const value = store.getField(finalPath);
-let editorelement;
-let flask;
-onMount(() => {
-    flask = new CodeFlask(editorelement, { language, lineNumbers: true, areaId: id });
-    inputelement = editorelement.querySelector(`#${id}`);
-    if (className)
-        inputelement.classList.add(...className.split(' '));
-    inputelement.addEventListener('change', onChange);
-    updateValidState(invalid, messagesid);
-});
-$: flask?.updateCode($value ?? '');
-let invalid;
-let messagesid;
-let helptextid;
-let onChange;
-function setSlotProps(helptextidIn, onChangeIn) {
-    helptextid = helptextidIn;
-    onChange = onChangeIn;
-}
-function updateValidState(invalidIn, messagesIdIn) {
-    invalid = !!invalidIn;
-    messagesid = messagesIdIn;
-    inputelement?.setAttribute('aria-invalid', String(!!invalid));
-    const descby = getDescribedBy([messagesid, helptextid, extradescid]);
-    if (descby)
-        inputelement?.setAttribute('aria-describedby', descby);
-    else
-        inputelement?.removeAttribute('aria-describedby');
-}
-</script>
-
-<FieldStandard bind:id {label} {path} {required} {defaultValue} {conditional} {related} {helptext} serialize={!notNull ? nullableSerialize : undefined} deserialize={!notNull ? nullableDeserialize : undefined} let:value let:valid let:invalid let:id let:onBlur let:onChange let:messagesid let:helptextid>
-  {@const _ = setSlotProps(helptextid, onChange)}
-  {@const __ = updateValidState(invalid, messagesid)}
-  <div bind:this={editorelement} style:height="{rows * 1.333}em" class:valid class:invalid on:paste on:focusout={onBlur} use:passActions={use}></div>
-</FieldStandard>
-
-<style>
-  div {
-    position: relative;
-    overflow: hidden;
-    resize: vertical;
-  }
-
-</style>