sqlite-hub 0.16.0 → 0.17.2

package/frontend/js/app.js

@@ -24,6 +24,9 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    chooseCreateDatabasePath,
+    createDocument,
+    createDocumentFromMarkdownExport,
     clearCurrentQuery,
     clearDataRowSelection,
     clearEditorRowSelection,
@@ -48,12 +51,15 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteQueryChartModal,
     openDataExportModal,
+    openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
     openEditConnectionModal,
     openCreateQueryChartModal,
     openCopyColumnModal,
     openEditQueryChartModal,
+    openDocumentInsertNoteModal,
+    openDocumentInsertTableModal,
     preserveCurrentDataRowSelectionForReload,
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
@@ -66,6 +72,7 @@ import {
     runQueryHistoryItem,
     skipCurrentMediaTaggingItem,
     saveCurrentQueryChartDraft,
+    saveCurrentDocument,
     saveCurrentMediaTaggingConfig,
     selectDataRow,
     selectEditorRow,
@@ -90,6 +97,9 @@ import {
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
+    submitDeleteDocumentConfirmation,
+    submitDocumentInsertNote,
+    submitDocumentInsertTable,
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
@@ -100,6 +110,7 @@ import {
     setQueryHistorySearchInput,
     setQueryHistoryTab,
     setCopyColumnModalError,
+    setCopyColumnModalEditedText,
     setCopyColumnModalSubmitting,
     setRoute,
     saveQueryHistoryNotes,
@@ -107,6 +118,8 @@ import {
     saveCurrentTableDesignerDraft,
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
+    toggleCurrentDocumentTodo,
+    toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
@@ -124,6 +137,8 @@ import {
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
     updateCopyColumnModalFormatField,
+    updateCurrentDocumentDraftField,
+    updateDocumentInsertQuerySelection,
     updateCurrentQueryChartDraftConfigField,
     updateCurrentQueryChartDraftField,
     updateCurrentTableDesignerColumnField,
@@ -136,6 +151,7 @@ import {
 import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
+import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
 import { renderMediaTaggingView } from './views/mediaTagging.js';
@@ -163,10 +179,19 @@ import {
     stringifyRowEditorJson,
 } from './utils/rowEditorJson.js';
 import { getTimestampPreviewForField } from './utils/timestampPreview.js';
+import {
+    buildRowEditorSubmittedValues,
+    getRowEditorValueState,
+    getRowEditorValueStateLabel,
+} from './utils/rowEditorValues.js';
 import {
     formatTextCellCharacterCount,
     getTextCellCharacterCount,
 } from './utils/textCellStats.js';
+import {
+    captureTableHorizontalScrollState,
+    restoreTableHorizontalScrollState,
+} from './utils/tableScrollState.js';
 
 const appRoot = document.querySelector('#app');
 
@@ -197,6 +222,10 @@ let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
 let pendingMediaTaggingTagSearchFocus = false;
+let documentAutosaveTimer = null;
+let pendingDocumentAutosaveId = null;
+
+const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
 
 const APP_TITLE = 'SQLite Hub';
 const ROUTE_TITLE_SEGMENTS = {
@@ -207,6 +236,7 @@ const ROUTE_TITLE_SEGMENTS = {
     editor: 'SQL Editor',
     editorResults: 'SQL Editor',
     charts: 'Charts',
+    documents: 'Documents',
     tableDesigner: 'Table Designer',
     mediaTaggingSetup: 'Media Tagging',
     mediaTaggingQueue: 'Tagging Queue',
@@ -797,13 +827,58 @@ function readFileAsText(file) {
             resolve(String(reader.result ?? ''));
         };
         reader.onerror = () => {
-            reject(reader.error ?? new Error('The selected CSV file could not be read.'));
+            reject(reader.error ?? new Error('The selected file could not be read.'));
         };
 
         reader.readAsText(file);
     });
 }
 
+function clearDocumentAutosaveTimer() {
+    if (documentAutosaveTimer !== null) {
+        window.clearTimeout(documentAutosaveTimer);
+    }
+
+    documentAutosaveTimer = null;
+    pendingDocumentAutosaveId = null;
+}
+
+function scheduleDocumentAutosave(documentId) {
+    clearDocumentAutosaveTimer();
+
+    if (!documentId) {
+        return;
+    }
+
+    pendingDocumentAutosaveId = String(documentId);
+    documentAutosaveTimer = window.setTimeout(async () => {
+        const state = getState();
+        const scheduledDocumentId = pendingDocumentAutosaveId;
+
+        documentAutosaveTimer = null;
+        pendingDocumentAutosaveId = null;
+
+        if (
+            state.route.name !== 'documents' ||
+            String(state.documents.selectedId ?? '') !== scheduledDocumentId ||
+            !state.documents.dirty
+        ) {
+            return;
+        }
+
+        if (state.documents.saving) {
+            scheduleDocumentAutosave(scheduledDocumentId);
+            return;
+        }
+
+        if (state.documents.deleting) {
+            return;
+        }
+
+        await saveCurrentDocument({ toast: false });
+    }, DOCUMENT_AUTOSAVE_DELAY_MS);
+}
+
 async function buildConnectionLogoUpload(file) {
     if (!(file instanceof File) || !file.size) {
         return null;
@@ -852,6 +927,8 @@ function resolveView(state) {
             return renderOverviewView(state);
         case 'charts':
             return renderChartsView(state);
+        case 'documents':
+            return renderDocumentsView(state);
         case 'data':
             return renderDataView(state);
         case 'editor':
@@ -1101,6 +1178,39 @@ async function handleTableDesignerCsvImport(fileInput) {
     }
 }
 
+async function handleDocumentMarkdownImport(fileInput) {
+    if (!(fileInput instanceof HTMLInputElement)) {
+        return;
+    }
+
+    const file = fileInput.files?.[0];
+
+    if (!(file instanceof File)) {
+        return;
+    }
+
+    try {
+        const content = await readFileAsText(file);
+        const document = await createDocumentFromMarkdownExport({
+            filename: file.name,
+            content,
+        });
+
+        if (!document?.id) {
+            showToast('Markdown document could not be imported.', 'alert');
+            return;
+        }
+
+        clearDocumentAutosaveTimer();
+        showToast(`Document "${document.filename}" imported.`, 'success');
+        router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+    } catch (error) {
+        showToast(error?.message || 'Markdown import failed.', 'alert');
+    } finally {
+        fileInput.value = '';
+    }
+}
+
 function renderApp(state) {
     syncDocumentTitle(state);
 
@@ -1118,6 +1228,7 @@ function renderApp(state) {
         'editorResults',
         'data',
         'charts',
+        'documents',
         'structure',
         'tableDesigner',
         'mediaTaggingSetup',
@@ -1156,6 +1267,10 @@ function renderApp(state) {
 
     const focusedInput = captureFocusedInputState();
     const queryHistoryScrollState = captureQueryHistoryScrollState();
+    const tableHorizontalScrollState = captureTableHorizontalScrollState({
+        routeName: lastRenderedRouteName,
+        scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+    });
     const isEnteringNewTableDesignerRoute =
         state.route.name === 'tableDesigner' && state.route.params?.isNew && previousRoutePath !== state.route.path;
 
@@ -1228,6 +1343,14 @@ function renderApp(state) {
         restoreQueryHistoryScrollState(queryHistoryScrollState);
     }
 
+    if (mainChanged && !mainPatched) {
+        restoreTableHorizontalScrollState({
+            snapshot: tableHorizontalScrollState,
+            routeName: state.route.name,
+            scrollNodes: shellRefs.view.querySelectorAll('[data-table-horizontal-scroll]'),
+        });
+    }
+
     if (pendingQueryEditorFocus && (state.route.name === 'editor' || state.route.name === 'editorResults')) {
         if (focusQueryEditorInput()) {
             pendingQueryEditorFocus = false;
@@ -1471,6 +1594,53 @@ function syncRowEditorFilePathPreview(inputNode) {
     previewNode.hidden = false;
 }
 
+function getRowEditorValueStateClassName(state) {
+    if (state === 'null') {
+        return 'border px-2 py-1 text-[9px] border-primary-container/35 bg-primary-container/15 text-primary-container';
+    }
+
+    if (state === 'empty') {
+        return 'border px-2 py-1 text-[9px] border-outline-variant/35 bg-surface-container-high text-on-surface-variant';
+    }
+
+    return 'border px-2 py-1 text-[9px] border-outline-variant/20 bg-surface-container text-on-surface-variant';
+}
+
+function syncRowEditorValueState(controlNode) {
+    const fieldNode = controlNode.closest('[data-row-editor-field]');
+    const valueInput = fieldNode?.querySelector('[data-row-editor-value-source]');
+    const stateBadge = fieldNode?.querySelector('[data-row-editor-value-state]');
+
+    if (!fieldNode || !valueInput || !stateBadge) {
+        return;
+    }
+
+    const valueState = getRowEditorValueState(valueInput.value);
+
+    valueInput.dataset.rowEditorDirty = 'true';
+    stateBadge.dataset.valueState = valueState;
+    stateBadge.className = getRowEditorValueStateClassName(valueState);
+    stateBadge.textContent = getRowEditorValueStateLabel(valueState);
+
+    syncRowEditorTimestampPreview(valueInput);
+    syncRowEditorFilePathPreview(valueInput);
+    syncRowEditorCharacterCount(valueInput);
+}
+
+function getRowEditorFieldMetadata(form) {
+    return Object.fromEntries(
+        Array.from(form.elements)
+            .filter(element => element.name?.startsWith('field:'))
+            .map(element => [
+                element.name.slice('field:'.length),
+                {
+                    initialState: element.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState,
+                    dirty: element.dataset.rowEditorDirty === 'true',
+                },
+            ]),
+    );
+}
+
 function closeCopyColumnMenus(exceptMenu = null) {
     document.querySelectorAll('[data-copy-column-menu][open]').forEach(menu => {
         if (menu !== exceptMenu && menu instanceof HTMLDetailsElement) {
@@ -1520,6 +1690,69 @@ function buildCopyColumnExportFilename(columnName, copyMode) {
     return `${columnSlug}-${metadata.suffix}.${metadata.extension}`;
 }
 
+function normalizeMarkdownDownloadFilename(value) {
+    let filename = String(value ?? '')
+        .trim()
+        .replace(/[\u0000-\u001f\u007f]/g, ' ')
+        .replace(/[\\/]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/^\.+/, '')
+        .trim();
+
+    if (!filename) {
+        filename = 'document.md';
+    }
+
+    if (!/\.md$/i.test(filename)) {
+        filename = `${filename}.md`;
+    }
+
+    return filename;
+}
+
+function countEditedMarkdownTodoItems(text) {
+    const lines = String(text ?? '')
+        .split(/\r\n|\r|\n/g)
+        .filter(line => line.trim());
+
+    return lines.length;
+}
+
+function buildDocumentTimestampSlug(date = new Date()) {
+    const pad = value => String(value).padStart(2, '0');
+
+    return [
+        date.getFullYear(),
+        pad(date.getMonth() + 1),
+        pad(date.getDate()),
+        pad(date.getHours()),
+        pad(date.getMinutes()),
+    ].join('-');
+}
+
+function buildCopyColumnDocumentFilename(columnName) {
+    const columnSlug = slugifyExportFilenamePart(columnName);
+
+    return `${columnSlug}-todos-${buildDocumentTimestampSlug()}.md`;
+}
+
+function buildCopyColumnDocumentContent({ state, columnName, text, valueCount }) {
+    const activeConnection = state.connections.active;
+    const lines = [
+        `# ${columnName || 'Column'} todos`,
+        '',
+        `- Database: ${activeConnection?.label || 'Active database'}`,
+        `- Column: ${columnName || 'N/A'}`,
+        `- Items: ${valueCount}`,
+        `- Generated: ${new Date().toLocaleString()}`,
+        '',
+    ];
+
+    lines.push('## Todos', '', String(text ?? '').trim(), '');
+
+    return lines.join('\n');
+}
+
 function downloadTextFile({ text, filename, mimeType }) {
     const blob = new Blob([text], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -1568,21 +1801,24 @@ function applyChangedRowEditorFormValues(rowObject) {
 
     const nextRowObject = { ...rowObject };
     const formData = new FormData(form);
+    const submittedValues = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
-    for (const [key, value] of formData.entries()) {
-        if (!key.startsWith('field:')) {
-            continue;
-        }
-
+    for (const [fieldName, value] of Object.entries(submittedValues)) {
+        const key = `field:${fieldName}`;
         const control = Array.from(form.elements).find(element => element.name === key);
         const initialValue = control?.dataset?.rowEditorInitialValue;
-        const currentValue = String(value ?? '');
+        const initialState = control?.closest('[data-row-editor-field]')?.dataset?.rowEditorInitialState;
+        const currentState = getRowEditorValueState(value);
+        const currentValue = value === null ? null : String(value);
 
-        if (initialValue !== undefined && currentValue === initialValue) {
+        if (
+            initialState === currentState &&
+            (currentState === 'null' || (initialValue !== undefined && currentValue === initialValue))
+        ) {
             continue;
         }
 
-        nextRowObject[key.slice('field:'.length)] = currentValue;
+        nextRowObject[fieldName] = currentValue;
     }
 
     return nextRowObject;
@@ -1677,6 +1913,37 @@ function exportRowEditorJson() {
     showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
 }
 
+function exportCurrentDocumentMarkdown() {
+    const documents = getState().documents;
+
+    if (!documents.selectedId) {
+        showToast('No document is selected.', 'alert');
+        return;
+    }
+
+    const filename = normalizeMarkdownDownloadFilename(documents.draftFilename || documents.selected?.filename);
+
+    downloadTextFile({
+        text: documents.draftContent ?? '',
+        filename,
+        mimeType: 'text/markdown;charset=utf-8',
+    });
+    showToast(`Document "${filename}" exported.`, 'success');
+}
+
+function getCurrentDocumentEditorInsertionRange() {
+    const textarea = document.querySelector('.documents-editor-input');
+
+    if (!(textarea instanceof HTMLTextAreaElement)) {
+        return null;
+    }
+
+    return {
+        start: textarea.selectionStart,
+        end: textarea.selectionEnd,
+    };
+}
+
 function preserveDataRowEditorSelectionForReload() {
     preserveCurrentDataRowSelectionForReload();
 }
@@ -1698,6 +1965,9 @@ async function submitCopyColumnModal(formData) {
     const outputSeparator = lineBreaks ? '\n' : separator;
     const intent = String(formData.get('intent') ?? 'copy');
     const isExportIntent = intent === 'export';
+    const isDocumentIntent = intent === 'document';
+    const isMarkdownTodo = isMarkdownTodoCopyColumnMode(copyMode);
+    const editedText = formData.has('editedText') ? String(formData.get('editedText') ?? '') : null;
     const result = getCopyColumnResult(state, scope);
     const hasColumn = (result?.columns ?? []).some(column => String(column) === columnName);
 
@@ -1710,20 +1980,57 @@ async function submitCopyColumnModal(formData) {
         return;
     }
 
-    if (!isMarkdownTodoCopyColumnMode(copyMode)) {
+    if (!isMarkdownTodo) {
         storeCopyColumnPreferences({ separator, wrapper, lineBreaks });
+    } else if (editedText !== null) {
+        setCopyColumnModalEditedText(editedText);
     }
     setCopyColumnModalSubmitting(true);
 
-    const { text, valueCount } = buildCopyColumnText({
+    const generatedOutput = buildCopyColumnText({
         result,
         columnName,
         copyMode,
         separator: outputSeparator,
         wrapper,
     });
+    const text = isMarkdownTodo && editedText !== null ? editedText : generatedOutput.text;
+    const valueCount = isMarkdownTodo && editedText !== null
+        ? countEditedMarkdownTodoItems(editedText)
+        : generatedOutput.valueCount;
 
     try {
+        if (isDocumentIntent) {
+            if (!isMarkdownTodo) {
+                throw new Error('Document export is only available for Markdown Todo columns.');
+            }
+
+            const document = await createDocumentFromMarkdownExport({
+                filename: buildCopyColumnDocumentFilename(columnName),
+                title: `${columnName || 'Column'} todos`,
+                content: buildCopyColumnDocumentContent({
+                    state,
+                    columnName,
+                    text,
+                    valueCount,
+                }),
+            });
+
+            if (!document) {
+                throw new Error('Document could not be created.');
+            }
+
+            closeModal();
+            showToast(
+                `Document "${document.filename}" created · ${formatNumber(valueCount)} ${
+                    valueCount === 1 ? 'item' : 'items'
+                }`,
+                'success',
+            );
+            router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            return;
+        }
+
         if (isExportIntent) {
             const metadata = getCopyColumnExportMetadata(copyMode);
 
@@ -1754,10 +2061,23 @@ async function submitCopyColumnModal(formData) {
         );
     } catch (error) {
         setCopyColumnModalError({
-            code: isExportIntent ? 'COPY_COLUMN_EXPORT_FAILED' : 'CLIPBOARD_ACCESS_FAILED',
-            message: error?.message || (isExportIntent ? 'Column export failed.' : 'Clipboard access failed.'),
+            code: isDocumentIntent
+                ? 'COPY_COLUMN_DOCUMENT_EXPORT_FAILED'
+                : isExportIntent
+                  ? 'COPY_COLUMN_EXPORT_FAILED'
+                  : 'CLIPBOARD_ACCESS_FAILED',
+            message:
+                error?.message ||
+                (isDocumentIntent
+                    ? 'Document export failed.'
+                    : isExportIntent
+                      ? 'Column export failed.'
+                      : 'Clipboard access failed.'),
         });
-        showToast(isExportIntent ? 'Column export failed.' : 'Clipboard access failed.', 'alert');
+        showToast(
+            isDocumentIntent ? 'Document export failed.' : isExportIntent ? 'Column export failed.' : 'Clipboard access failed.',
+            'alert',
+        );
     }
 }
 
@@ -1794,6 +2114,58 @@ async function handleAction(actionNode) {
                 mode: actionNode.dataset.copyMode,
             });
             return;
+        case 'create-document': {
+            const document = await createDocument();
+
+            if (document?.id) {
+                router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            }
+            return;
+        }
+        case 'select-document': {
+            const documentId = String(actionNode.dataset.documentId ?? '').trim();
+
+            if (documentId) {
+                clearDocumentAutosaveTimer();
+                router.navigate(`/documents/${encodeURIComponent(documentId)}`);
+            }
+            return;
+        }
+        case 'save-document':
+            clearDocumentAutosaveTimer();
+            await saveCurrentDocument();
+            return;
+        case 'export-document-markdown':
+            exportCurrentDocumentMarkdown();
+            return;
+        case 'open-document-insert-table-modal':
+            await openDocumentInsertTableModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'open-document-insert-note-modal':
+            await openDocumentInsertNoteModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'import-document-markdown': {
+            const fileInput = document.querySelector('[data-bind="document-import-file"]');
+
+            if (!(fileInput instanceof HTMLInputElement)) {
+                return;
+            }
+
+            fileInput.value = '';
+            fileInput.click();
+            return;
+        }
+        case 'delete-document':
+            clearDocumentAutosaveTimer();
+            openDeleteDocumentModal();
+            return;
+        case 'toggle-document-pane':
+            toggleDocumentsPane(actionNode.dataset.pane);
+            return;
+        case 'toggle-document-todo':
+            clearDocumentAutosaveTimer();
+            await toggleCurrentDocumentTodo(actionNode.dataset.lineIndex);
+            return;
         case 'open-create-query-chart-modal':
             openCreateQueryChartModal();
             return;
@@ -1809,6 +2181,33 @@ async function handleAction(actionNode) {
         case 'edit-connection':
             openEditConnectionModal(actionNode.dataset.connectionId);
             return;
+        case 'choose-create-database-path': {
+            const labelNode = actionNode.querySelector('[data-create-database-path-button-label]');
+
+            actionNode.setAttribute('disabled', '');
+            if (labelNode) {
+                labelNode.textContent = 'Choosing...';
+            }
+
+            const selectedPath = await chooseCreateDatabasePath();
+            const pathInput = document.querySelector(
+                '[data-form="create-connection"] [data-create-database-path]',
+            );
+
+            if (selectedPath && pathInput instanceof HTMLInputElement) {
+                pathInput.value = selectedPath;
+                pathInput.focus({ preventScroll: true });
+                pathInput.setSelectionRange(pathInput.value.length, pathInput.value.length);
+            }
+
+            if (actionNode.isConnected) {
+                actionNode.removeAttribute('disabled');
+                if (labelNode) {
+                    labelNode.textContent = 'Browse...';
+                }
+            }
+            return;
+        }
         case 'close-modal':
             closeModal();
             return;
@@ -2284,6 +2683,20 @@ document.addEventListener('keydown', event => {
     const target = event.target;
     const state = getState();
 
+    if (
+        (event.key === 's' || event.key === 'S') &&
+        (event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey &&
+        !event.defaultPrevented &&
+        state.route.name === 'documents'
+    ) {
+        event.preventDefault();
+        clearDocumentAutosaveTimer();
+        void saveCurrentDocument();
+        return;
+    }
+
     // Handle Enter key in tag form fields to trigger create tag
     if (
         event.key === 'Enter' &&
@@ -2375,6 +2788,7 @@ document.addEventListener('keydown', event => {
 
 document.addEventListener('input', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueInput = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2387,6 +2801,10 @@ document.addEventListener('input', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueInput) {
+        syncRowEditorValueState(valueInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -2409,6 +2827,12 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-field') {
+        updateCurrentDocumentDraftField(bindNode.dataset.field, bindNode.value);
+        scheduleDocumentAutosave(getState().documents.selectedId);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -2525,6 +2949,7 @@ document.addEventListener(
 
 document.addEventListener('change', event => {
     const target = event.target instanceof Element ? event.target : null;
+    const valueControl = target?.closest('[data-row-editor-value-source]');
     const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
     const textCellInput = target?.closest('[data-row-editor-text-source]');
 
@@ -2537,6 +2962,10 @@ document.addEventListener('change', event => {
         syncRowEditorCharacterCount(textCellInput);
     }
 
+    if (valueControl) {
+        syncRowEditorValueState(valueControl);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -2579,6 +3008,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-import-file') {
+        void handleDocumentMarkdownImport(bindNode);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'document-insert-query-select') {
+        updateDocumentInsertQuerySelection(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-field') {
         if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
             updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
@@ -2757,6 +3196,32 @@ document.addEventListener('submit', async event => {
         case 'delete-query-history-confirm':
             await submitDeleteQueryHistoryConfirmation();
             return;
+        case 'delete-document-confirm': {
+            const result = await submitDeleteDocumentConfirmation();
+
+            if (result.deleted) {
+                router.navigate(
+                    result.nextDocumentId ? `/documents/${encodeURIComponent(result.nextDocumentId)}` : '/documents',
+                );
+            }
+            return;
+        }
+        case 'document-insert-table': {
+            const inserted = await submitDocumentInsertTable();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
+        case 'document-insert-note': {
+            const inserted = submitDocumentInsertNote();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
         case 'apply-row-update-preview':
             await submitRowUpdatePreviewConfirmation();
             return;
@@ -2770,15 +3235,7 @@ document.addEventListener('submit', async event => {
             await submitCopyColumnModal(formData);
             return;
         case 'save-data-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             let rowIdentity = null;
             const rawRowIdentity = String(formData.get('rowIdentity') ?? '').trim();
@@ -2795,15 +3252,7 @@ document.addEventListener('submit', async event => {
             return;
         }
         case 'save-editor-row': {
-            const values = {};
-
-            for (const [key, value] of formData.entries()) {
-                if (!key.startsWith('field:')) {
-                    continue;
-                }
-
-                values[key.slice('field:'.length)] = String(value ?? '');
-            }
+            const values = buildRowEditorSubmittedValues(formData, getRowEditorFieldMetadata(form));
 
             await openEditorRowUpdatePreview(String(formData.get('rowIndex') ?? ''), values);
             return;