address comments.

This commit is contained in:
Darshan
2026-02-02 17:20:34 +05:30
parent c372b37936
commit 337c458e2f
8 changed files with 20 additions and 78 deletions
+1 -1
View File
@@ -36,7 +36,7 @@ export default ts.config(
// TODO: @itznotabug, this requires a big refactor!
'svelte/no-navigation-without-resolve': 'warn',
'svelte/prefer-svelte-reactivity': 'warn',
'svelte/prefer-writable-derived': 'warn'
'svelte/prefer-writable-derived': 'off'
}
},
{
@@ -112,7 +112,7 @@
<Seekbar
max={100}
extraBlockStart
breakpointCount={8}
breakpointCount={5}
bind:value={$randomDataModalState.value} />
</Layout.Stack>
{/if}
@@ -5,10 +5,7 @@ export const SYSTEM_KEYS = new Set(['$id:', '$createdAt:', '$updatedAt:']);
// timing constants
export const LINTER_DELAY = 250;
export const DEBOUNCE_DELAY = 200;
export const SUGGESTIONS_HIDE_DELAY = 3000;
export const AUTOSAVE_DELAY = 2000;
export const ENABLE_AUTOSAVE = false;
export const SAVE_UNDO_TOOLBAR_TIMEOUT = 8000;
// regex patterns
/* export const UNQUOTED_KEY_REGEX = /([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/g; */
@@ -25,7 +25,7 @@ export const customTheme = EditorView.theme({
},
'.cm-line': {
padding: '0',
lineHeight: '1.6'
lineHeight: '140%'
}
});
@@ -45,7 +45,7 @@
import { onMount, onDestroy } from 'svelte';
import Id, { truncateId } from '$lib/components/id.svelte';
import { Icon, Layout, Skeleton, Tooltip } from '@appwrite.io/pink-svelte';
import { IconDuplicate, IconX } from '@appwrite.io/pink-icons-svelte';
import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import { Button } from '$lib/elements/forms';
import { copy } from '$lib/helpers/copy';
import { isSmallViewport } from '$lib/stores/viewport';
@@ -66,7 +66,6 @@
ALLOWED_DOLLAR_PROPS,
DEBOUNCE_DELAY,
LINTER_DELAY,
AUTOSAVE_DELAY,
INDENT_REGEX,
SCALAR_VALUE_REGEX,
TRAILING_COMMA_REGEX,
@@ -74,12 +73,12 @@
WHITESPACE_ONLY_REGEX,
SKELETON_LINES,
getIndent,
ENABLE_AUTOSAVE
SAVE_UNDO_TOOLBAR_TIMEOUT
} from './helpers/constants';
import { toLocaleDateTime } from '$lib/helpers/date';
import { ID } from '@appwrite.io/console';
import { Suggestions, Error as ErrorSonner, Save as SavingSonner } from '../sonners';
import { sleep } from '$lib/helpers/promises';
import { toLocaleDateTime } from '$lib/helpers/date';
import { Suggestions, Error as ErrorSonner, Save as SavingSonner } from '../sonners';
import { json5, json5ParseCache, json5ParseLinter } from 'codemirror-json5';
interface Props {
@@ -122,7 +121,6 @@
let errorMessage = $state<string | null>(null);
let warningMessage = $state<string | null>(null);
let changeTimer: ReturnType<typeof setTimeout> | null = null; // debounce timer for parse + onChange
let autoSaveTimer: ReturnType<typeof setTimeout> | null = null; // debounce timer for auto-save
let tooltipTimer: ReturnType<typeof setTimeout> | null = null; // timer for tooltip message reset
let pendingCanonicalize = false; // set when a full-document replace (paste-all) occurs
let lastExpectedContent = ''; // track latest serialized data to avoid spurious rewrites
@@ -1094,12 +1092,6 @@
changeTimer = null;
}
// Clear auto-save timer when user starts typing again
if (autoSaveTimer) {
clearTimeout(autoSaveTimer);
autoSaveTimer = null;
}
changeTimer = setTimeout(async () => {
const state = update.view.state;
const parseCache = state.field(json5ParseCache, false);
@@ -1119,42 +1111,6 @@
data = parsed;
onChange?.(parsed, hasDataChanged);
lastExpectedContent = serializeData(parsed);
// Check if this was a manual edit (not undo) and trigger auto-save
const isUndoOrRedo = update.transactions.some(
(tr) =>
tr.annotation(Transaction.userEvent) === 'undo' ||
tr.annotation(Transaction.userEvent) === 'redo'
);
if (!isUndoOrRedo && !$isSmallViewport && hasDataChanged && onSave) {
// Clear existing auto-save timer
if (autoSaveTimer) {
clearTimeout(autoSaveTimer);
autoSaveTimer = null;
}
// Set new auto-save timer
if (ENABLE_AUTOSAVE) {
autoSaveTimer = setTimeout(() => {
const parseCache = editorView?.state.field(json5ParseCache, false);
if (parseCache?.err || errorMessage) {
autoSaveTimer = null;
return;
}
if (
editorView &&
getLintWarningSummary(editorView.state).hasWarning
) {
autoSaveTimer = null;
return;
}
handleSave();
autoSaveTimer = null;
}, AUTOSAVE_DELAY);
}
}
}, DEBOUNCE_DELAY);
}),
readOnlyCompartment.of(EditorState.readOnly.of(readonly))
@@ -1176,10 +1132,6 @@
clearTimeout(changeTimer);
changeTimer = null;
}
if (autoSaveTimer) {
clearTimeout(autoSaveTimer);
autoSaveTimer = null;
}
if (tooltipTimer) {
clearTimeout(tooltipTimer);
tooltipTimer = null;
@@ -1284,7 +1236,7 @@
saveSonnerState = 'saving';
} else if (saveSonnerState === 'saving') {
saveSonnerState = 'saved';
sleep(AUTOSAVE_DELAY).then(() => {
sleep(SAVE_UNDO_TOOLBAR_TIMEOUT).then(() => {
if (saveSonnerState === 'saved') {
saveSonnerState = null;
}
@@ -1311,19 +1263,9 @@
{#if documentId}
<Layout.Stack direction="row" inline gap="s">
{#if isNew && onCancel}
<Tooltip placement="top">
<Button
icon
secondary
size="xs"
class="icon-button"
disabled={loading}
on:click={onCancel}>
<Icon icon={IconX} size="s" />
</Button>
<span slot="tooltip">Cancel</span>
</Tooltip>
<Button text size="xs" disabled={loading} on:click={onCancel}>
Cancel
</Button>
{/if}
<Button secondary size="xs" disabled={!hasDataChanged} on:click={handleSave}>
@@ -1549,11 +1491,11 @@
}
:global(.cm-line.cm-error-line) {
background-color: var(--bgColor-error-weak, rgba(255, 69, 58, 0.28)) !important;
background-color: var(--bgcolor-error-weak) !important;
}
:global(.cm-gutterElement.cm-error-lineGutter) {
background-color: var(--bgColor-error-weak, rgba(255, 69, 58, 0.28)) !important;
background-color: var(--bgcolor-error-weak) !important;
}
// Subtle indicator for read-only system-field lines
@@ -59,6 +59,7 @@
<InputTags
max={5}
required
bind:tags={names}
id="custom-columns-{collectionId}"
placeholder="Enter fields"
@@ -1,6 +1,6 @@
<script lang="ts">
import { FloatingActionBar, Icon, Layout } from '@appwrite.io/pink-svelte';
import { IconExclamationCircle } from '@appwrite.io/pink-icons-svelte';
import { IconExclamationCircle, IconExclamation } from '@appwrite.io/pink-icons-svelte';
let {
message,
@@ -10,6 +10,7 @@
severity?: 'error' | 'warning';
} = $props();
const properIcon = $derived(severity === 'warning' ? IconExclamation : IconExclamationCircle);
const iconColor = $derived(severity === 'warning' ? '--fgcolor-warning' : '--fgcolor-error');
</script>
@@ -23,7 +24,7 @@
direction="row"
alignItems="center"
style="width: max-content;">
<Icon icon={IconExclamationCircle} color={iconColor} />
<Icon icon={properIcon} color={iconColor} />
<div class="sonner-message">
{message}
@@ -10,6 +10,7 @@
} from '@appwrite.io/pink-svelte';
import { sleep } from '$lib/helpers/promises';
import { isSmallViewport } from '$lib/stores/viewport';
import { SAVE_UNDO_TOOLBAR_TIMEOUT } from '../editor/helpers/constants';
let {
state = null,
@@ -23,7 +24,7 @@
$effect(() => {
if (state === 'saved' && previousState !== 'saved') {
sleep(3000).then(() => {
sleep(SAVE_UNDO_TOOLBAR_TIMEOUT).then(() => {
previousState = state;
state = null;
});