sqlite-hub 0.12.0 → 0.16.0

package/frontend/js/app.js

@@ -52,7 +52,9 @@ import {
     openDataRowByIdentity,
     openEditConnectionModal,
     openCreateQueryChartModal,
+    openCopyColumnModal,
     openEditQueryChartModal,
+    preserveCurrentDataRowSelectionForReload,
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
     refreshCurrentRoute,
@@ -97,6 +99,8 @@ import {
     sortEditorResultsByColumn,
     setQueryHistorySearchInput,
     setQueryHistoryTab,
+    setCopyColumnModalError,
+    setCopyColumnModalSubmitting,
     setRoute,
     saveQueryHistoryNotes,
     saveQueryHistoryTitle,
@@ -107,6 +111,7 @@ import {
     setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
     showToast,
+    storeCopyColumnPreferences,
     submitCreateConnection,
     createCurrentMediaTag,
     submitDeleteRowConfirmation,
@@ -118,9 +123,11 @@ import {
     toggleQueryHistorySavedState,
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
+    updateCopyColumnModalFormatField,
     updateCurrentQueryChartDraftConfigField,
     updateCurrentQueryChartDraftField,
     updateCurrentTableDesignerColumnField,
+    updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
@@ -137,7 +144,29 @@ import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
 import { replaceChildrenFromRenderedMarkup, replaceElementFromRenderedMarkup } from './utils/dom.js';
-import { highlightSql } from './utils/format.js';
+import {
+    buildCopyColumnText,
+    getCopyColumnExportMetadata,
+    isMarkdownTodoCopyColumnMode,
+    normalizeCopyColumnMode,
+} from './utils/copyColumnExport.js';
+import { formatNumber, highlightSql } from './utils/format.js';
+import {
+    compactPathForDisplay,
+    detectFilePathValue,
+    getPathTypeLabel,
+} from './utils/filePathPreview.js';
+import { formatSqlQuery } from './utils/sqlFormatter.js';
+import {
+    buildDataRowEditorJsonObject,
+    buildEditorRowEditorJsonObject,
+    stringifyRowEditorJson,
+} from './utils/rowEditorJson.js';
+import { getTimestampPreviewForField } from './utils/timestampPreview.js';
+import {
+    formatTextCellCharacterCount,
+    getTextCellCharacterCount,
+} from './utils/textCellStats.js';
 
 const appRoot = document.querySelector('#app');
 
@@ -1254,6 +1283,39 @@ async function executeEditorQueryAndNavigate() {
     router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
+function formatCurrentQuery() {
+    const currentQuery = getState().editor.sqlText ?? '';
+    const formattedQuery = formatSqlQuery(currentQuery);
+
+    if (!formattedQuery) {
+        showToast('No SQL query to format.', 'alert');
+        return;
+    }
+
+    if (formattedQuery === currentQuery) {
+        focusQueryEditorInput();
+        showToast('SQL query is already formatted.', 'muted');
+        return;
+    }
+
+    invalidateMainRenderCache();
+    setCurrentQuery(formattedQuery);
+
+    const input = document.querySelector('[data-bind="current-query"]');
+
+    if (input instanceof HTMLTextAreaElement) {
+        input.value = formattedQuery;
+        syncQueryEditorHighlight(input);
+        syncQueryEditorScroll(input);
+        input.focus({ preventScroll: true });
+        input.setSelectionRange(input.value.length, input.value.length);
+    } else {
+        pendingQueryEditorFocus = true;
+    }
+
+    showToast('SQL query formatted.', 'success');
+}
+
 const OPENABLE_URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
 function getOpenableUrl(value) {
@@ -1291,6 +1353,414 @@ function openRowEditorUrl(actionNode) {
     link.remove();
 }
 
+function getExportFilenameFromAction(actionNode) {
+    const input = actionNode.closest('[data-export-modal]')?.querySelector('input[name="filename"]');
+    return input instanceof HTMLInputElement ? input.value : '';
+}
+
+function syncRowEditorTimestampPreview(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const previewNode = fieldNode?.querySelector('[data-row-editor-timestamp-preview]');
+
+    if (!fieldNode || !previewNode) {
+        return;
+    }
+
+    const columnName = fieldNode.dataset.rowEditorColumnName ?? '';
+    const protectedKeyColumn = fieldNode.dataset.rowEditorProtectedKey === 'true';
+    const tableMeta = {
+        columns: [
+            {
+                name: columnName,
+                primaryKeyPosition: protectedKeyColumn ? 1 : 0,
+                foreignKey: protectedKeyColumn,
+            },
+        ],
+        foreignKeys: [],
+    };
+    const preview = getTimestampPreviewForField({
+        columnName,
+        value: inputNode.value,
+        tableMeta,
+    });
+
+    if (preview.kind !== 'timestamp') {
+        previewNode.hidden = true;
+        previewNode.textContent = '';
+        return;
+    }
+
+    previewNode.hidden = false;
+    previewNode.textContent = `Interpretiert als Datum: ${preview.formatted}`;
+}
+
+function syncRowEditorCharacterCount(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const countNode = fieldNode?.querySelector('[data-row-editor-char-count]');
+
+    if (!fieldNode || !countNode) {
+        return;
+    }
+
+    const count = getTextCellCharacterCount(inputNode.value);
+
+    if (count === null) {
+        countNode.hidden = true;
+        countNode.textContent = '';
+        return;
+    }
+
+    countNode.hidden = false;
+    countNode.textContent = formatTextCellCharacterCount(count);
+}
+
+function syncRowEditorFilePathPreview(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const previewNode = fieldNode?.querySelector('[data-row-editor-filepath-preview]');
+
+    if (!fieldNode || !previewNode) {
+        return;
+    }
+
+    const columnName = fieldNode.dataset.rowEditorColumnName ?? '';
+    const protectedKeyColumn = fieldNode.dataset.rowEditorProtectedKey === 'true';
+    const tableMeta = {
+        columns: [
+            {
+                name: columnName,
+                primaryKeyPosition: protectedKeyColumn ? 1 : 0,
+                foreignKey: protectedKeyColumn,
+            },
+        ],
+        foreignKeys: [],
+    };
+    const preview = detectFilePathValue(inputNode.value, columnName, tableMeta);
+
+    if (!preview) {
+        previewNode.hidden = true;
+        return;
+    }
+
+    const filenameNode = previewNode.querySelector('[data-row-editor-filepath-filename]');
+    const directoryRowNode = previewNode.querySelector('[data-row-editor-filepath-directory-row]');
+    const directoryNode = previewNode.querySelector('[data-row-editor-filepath-directory]');
+    const extensionNode = previewNode.querySelector('[data-row-editor-filepath-extension]');
+    const typeNode = previewNode.querySelector('[data-row-editor-filepath-type]');
+
+    if (filenameNode) {
+        filenameNode.textContent = preview.fileName ?? 'N/A';
+    }
+
+    if (directoryRowNode) {
+        directoryRowNode.hidden = !preview.directory;
+    }
+
+    if (directoryNode) {
+        directoryNode.textContent = preview.directory ? compactPathForDisplay(preview.directory, 72) : '';
+        directoryNode.setAttribute('title', preview.directory ?? '');
+    }
+
+    if (extensionNode) {
+        extensionNode.textContent = preview.extension ?? 'N/A';
+    }
+
+    if (typeNode) {
+        typeNode.textContent = getPathTypeLabel(preview.pathType);
+    }
+
+    previewNode.hidden = false;
+}
+
+function closeCopyColumnMenus(exceptMenu = null) {
+    document.querySelectorAll('[data-copy-column-menu][open]').forEach(menu => {
+        if (menu !== exceptMenu && menu instanceof HTMLDetailsElement) {
+            menu.open = false;
+        }
+    });
+}
+
+function closeSidebarDatabasePickers(exceptPicker = null) {
+    document.querySelectorAll('.sidebar-db-picker[open]').forEach(picker => {
+        if (picker !== exceptPicker && picker instanceof HTMLDetailsElement) {
+            picker.open = false;
+        }
+    });
+}
+
+function openCopyColumnMenu(headerNode) {
+    const menu = headerNode?.querySelector('[data-copy-column-menu]');
+
+    if (!(menu instanceof HTMLDetailsElement)) {
+        return;
+    }
+
+    closeCopyColumnMenus(menu);
+    menu.open = true;
+    menu.querySelector('summary')?.focus({ preventScroll: true });
+}
+
+function getCopyColumnResult(state, scope) {
+    return scope === 'charts' ? state.charts.result : state.editor.result;
+}
+
+function slugifyExportFilenamePart(value, fallback = 'column') {
+    const slug = String(value ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+
+    return slug || fallback;
+}
+
+function buildCopyColumnExportFilename(columnName, copyMode) {
+    const metadata = getCopyColumnExportMetadata(copyMode);
+    const columnSlug = slugifyExportFilenamePart(columnName);
+
+    return `${columnSlug}-${metadata.suffix}.${metadata.extension}`;
+}
+
+function downloadTextFile({ text, filename, mimeType }) {
+    const blob = new Blob([text], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+
+function getSelectedDataBrowserRowForJson(state) {
+    if (state.dataBrowser.selectedRow) {
+        return state.dataBrowser.selectedRow;
+    }
+
+    const rowIndex = state.dataBrowser.selectedRowIndex;
+
+    if (typeof rowIndex !== 'number') {
+        return null;
+    }
+
+    return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
+}
+
+function getSelectedEditorResultRowForJson(state) {
+    const rowIndex = state.editor.selectedRowIndex;
+
+    if (typeof rowIndex !== 'number') {
+        return null;
+    }
+
+    return state.editor.result?.rows?.[rowIndex] ?? null;
+}
+
+function applyChangedRowEditorFormValues(rowObject) {
+    const form = shellRefs.panel.querySelector(
+        'form[data-form="save-data-row"], form[data-form="save-editor-row"]',
+    );
+
+    if (!form) {
+        return rowObject;
+    }
+
+    const nextRowObject = { ...rowObject };
+    const formData = new FormData(form);
+
+    for (const [key, value] of formData.entries()) {
+        if (!key.startsWith('field:')) {
+            continue;
+        }
+
+        const control = Array.from(form.elements).find(element => element.name === key);
+        const initialValue = control?.dataset?.rowEditorInitialValue;
+        const currentValue = String(value ?? '');
+
+        if (initialValue !== undefined && currentValue === initialValue) {
+            continue;
+        }
+
+        nextRowObject[key.slice('field:'.length)] = currentValue;
+    }
+
+    return nextRowObject;
+}
+
+function buildRowEditorJsonPayload(state) {
+    if (state.route.name === 'data') {
+        const row = getSelectedDataBrowserRowForJson(state);
+        const table = state.dataBrowser.table;
+        const tableName = table?.name ?? state.dataBrowser.selectedTable ?? 'row';
+
+        if (!row || !table) {
+            return null;
+        }
+
+        const rowObject = applyChangedRowEditorFormValues(
+            buildDataRowEditorJsonObject({
+                row,
+                columns: table.columns ?? table.columnMeta ?? [],
+            }),
+        );
+
+        return {
+            filename: `${slugifyExportFilenamePart(tableName, 'row')}-row.json`,
+            label: tableName,
+            text: stringifyRowEditorJson(rowObject),
+        };
+    }
+
+    if (state.route.name === 'editorResults') {
+        const row = getSelectedEditorResultRowForJson(state);
+        const result = state.editor.result;
+        const rowIndex = state.editor.selectedRowIndex;
+        const tableName = result?.editing?.tableName ?? 'query-result';
+
+        if (!row || !result) {
+            return null;
+        }
+
+        const rowObject = applyChangedRowEditorFormValues(
+            buildEditorRowEditorJsonObject({
+                row,
+                editingColumns: result.editing?.columns ?? [],
+                resultColumns: result.columns ?? [],
+            }),
+        );
+
+        return {
+            filename: `${slugifyExportFilenamePart(tableName, 'query-result')}-row-${Number(rowIndex) + 1}.json`,
+            label: tableName,
+            text: stringifyRowEditorJson(rowObject),
+        };
+    }
+
+    return null;
+}
+
+async function copyRowEditorJson() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+        showToast('Clipboard API is not available.', 'alert');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(payload.text);
+        showToast(`Row from "${payload.label}" copied as JSON.`, 'success');
+    } catch (error) {
+        showToast('Row JSON could not be copied.', 'alert');
+    }
+}
+
+function exportRowEditorJson() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    downloadTextFile({
+        text: payload.text,
+        filename: payload.filename,
+        mimeType: 'application/json;charset=utf-8',
+    });
+    showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
+}
+
+function preserveDataRowEditorSelectionForReload() {
+    preserveCurrentDataRowSelectionForReload();
+}
+
+async function submitCopyColumnModal(formData) {
+    const state = getState();
+    const modal = state.modal;
+
+    if (modal?.kind !== 'copy-column') {
+        return;
+    }
+
+    const scope = String(formData.get('scope') ?? modal.scope ?? 'editor');
+    const columnName = String(formData.get('columnName') ?? modal.columnName ?? '');
+    const copyMode = normalizeCopyColumnMode(String(formData.get('copyMode') ?? modal.copyMode ?? 'column'));
+    const separator = String(formData.get('separator') ?? ',');
+    const wrapper = String(formData.get('wrapper') ?? '');
+    const lineBreaks = formData.get('lineBreaks') === 'on';
+    const outputSeparator = lineBreaks ? '\n' : separator;
+    const intent = String(formData.get('intent') ?? 'copy');
+    const isExportIntent = intent === 'export';
+    const result = getCopyColumnResult(state, scope);
+    const hasColumn = (result?.columns ?? []).some(column => String(column) === columnName);
+
+    if (!hasColumn) {
+        setCopyColumnModalError({
+            code: 'COPY_COLUMN_UNAVAILABLE',
+            message: 'Column is no longer available in the current result set.',
+        });
+        showToast('Column could not be copied.', 'alert');
+        return;
+    }
+
+    if (!isMarkdownTodoCopyColumnMode(copyMode)) {
+        storeCopyColumnPreferences({ separator, wrapper, lineBreaks });
+    }
+    setCopyColumnModalSubmitting(true);
+
+    const { text, valueCount } = buildCopyColumnText({
+        result,
+        columnName,
+        copyMode,
+        separator: outputSeparator,
+        wrapper,
+    });
+
+    try {
+        if (isExportIntent) {
+            const metadata = getCopyColumnExportMetadata(copyMode);
+
+            downloadTextFile({
+                text,
+                filename: buildCopyColumnExportFilename(columnName, copyMode),
+                mimeType: metadata.mimeType,
+            });
+            closeModal();
+            showToast(
+                `Column "${columnName}" exported as ${metadata.label} · ${formatNumber(valueCount)} ${
+                    valueCount === 1 ? 'value' : 'values'
+                }`,
+                'success',
+            );
+            return;
+        }
+
+        if (!navigator.clipboard?.writeText) {
+            throw new Error('Clipboard API is not available.');
+        }
+
+        await navigator.clipboard.writeText(text);
+        closeModal();
+        showToast(
+            `Column "${columnName}" copied · ${formatNumber(valueCount)} ${valueCount === 1 ? 'value' : 'values'}`,
+            'success',
+        );
+    } catch (error) {
+        setCopyColumnModalError({
+            code: isExportIntent ? 'COPY_COLUMN_EXPORT_FAILED' : 'CLIPBOARD_ACCESS_FAILED',
+            message: error?.message || (isExportIntent ? 'Column export failed.' : 'Clipboard access failed.'),
+        });
+        showToast(isExportIntent ? 'Column export failed.' : 'Clipboard access failed.', 'alert');
+    }
+}
+
 async function handleAction(actionNode) {
     const { action } = actionNode.dataset;
 
@@ -1304,8 +1774,25 @@ async function handleAction(actionNode) {
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
+        case 'copy-row-editor-json':
+            await copyRowEditorJson();
+            return;
+        case 'export-row-editor-json':
+            exportRowEditorJson();
+            return;
         case 'open-modal':
-            openModal(actionNode.dataset.modal);
+            openModal(actionNode.dataset.modal, {
+                columnId: actionNode.dataset.columnId,
+                columnName: actionNode.dataset.columnName,
+            });
+            return;
+        case 'open-copy-column-modal':
+            closeCopyColumnMenus();
+            openCopyColumnModal({
+                scope: actionNode.dataset.resultScope,
+                columnName: actionNode.dataset.columnName ?? '',
+                mode: actionNode.dataset.copyMode,
+            });
             return;
         case 'open-create-query-chart-modal':
             openCreateQueryChartModal();
@@ -1329,6 +1816,7 @@ async function handleAction(actionNode) {
             dismissToast(actionNode.dataset.toastId);
             return;
         case 'select-connection': {
+            closeSidebarDatabasePickers();
             resetStructureGraphForDatabaseChange();
             const next = await selectConnection(actionNode.dataset.connectionId);
             if (next) {
@@ -1384,6 +1872,9 @@ async function handleAction(actionNode) {
             await executeEditorQueryAndNavigate();
             return;
         }
+        case 'format-current-query':
+            formatCurrentQuery();
+            return;
         case 'delete-data-row':
             openDeleteDataRowModal(actionNode.dataset.rowIndex);
             return;
@@ -1507,9 +1998,10 @@ async function handleAction(actionNode) {
             return;
         case 'export-query-format': {
             const format = actionNode.dataset.exportFormat;
+            const filename = getExportFilenameFromAction(actionNode);
 
             if (format === 'table') {
-                const imported = await duplicateCurrentQueryAsTable();
+                const imported = await duplicateCurrentQueryAsTable(filename);
 
                 if (imported) {
                     router.navigate('/table-designer/new');
@@ -1518,7 +2010,7 @@ async function handleAction(actionNode) {
                 return;
             }
 
-            await exportCurrentQueryFormat(format);
+            await exportCurrentQueryFormat(format, filename);
             return;
         }
         case 'open-data-export-modal':
@@ -1526,9 +2018,10 @@ async function handleAction(actionNode) {
             return;
         case 'export-data-format': {
             const format = actionNode.dataset.exportFormat;
+            const filename = getExportFilenameFromAction(actionNode);
 
             if (format === 'table') {
-                const imported = await duplicateCurrentDataTableAsTable();
+                const imported = await duplicateCurrentDataTableAsTable(filename);
 
                 if (imported) {
                     router.navigate('/table-designer/new');
@@ -1537,7 +2030,7 @@ async function handleAction(actionNode) {
                 return;
             }
 
-            await exportCurrentDataTableFormat(format);
+            await exportCurrentDataTableFormat(format, filename);
             return;
         }
         case 'toggle-data-tables':
@@ -1715,6 +2208,7 @@ async function handleAction(actionNode) {
             }
             return;
         case 'reload-data-route':
+            preserveDataRowEditorSelectionForReload();
             await refreshCurrentRoute();
             return;
         default:
@@ -1735,7 +2229,37 @@ function canApplyMediaTaggingShortcut(state) {
 }
 
 document.addEventListener('click', event => {
-    const actionNode = event.target.closest('[data-action]');
+    const target = event.target instanceof Element ? event.target : null;
+
+    if (!target) {
+        return;
+    }
+
+    const copyColumnMenu = target.closest('[data-copy-column-menu]');
+
+    if (!copyColumnMenu) {
+        closeCopyColumnMenus();
+    } else if (target.closest('.query-result-column-menu__toggle')) {
+        window.requestAnimationFrame(() => {
+            if (copyColumnMenu instanceof HTMLDetailsElement && copyColumnMenu.open) {
+                closeCopyColumnMenus(copyColumnMenu);
+            }
+        });
+    }
+
+    const sidebarDatabasePicker = target.closest('.sidebar-db-picker');
+
+    if (!sidebarDatabasePicker) {
+        closeSidebarDatabasePickers();
+    } else if (target.closest('.sidebar-footer-card')) {
+        window.requestAnimationFrame(() => {
+            if (sidebarDatabasePicker instanceof HTMLDetailsElement && sidebarDatabasePicker.open) {
+                closeSidebarDatabasePickers(sidebarDatabasePicker);
+            }
+        });
+    }
+
+    const actionNode = target.closest('[data-action]');
 
     if (!actionNode) {
         return;
@@ -1744,6 +2268,18 @@ document.addEventListener('click', event => {
     handleAction(actionNode);
 });
 
+document.addEventListener('contextmenu', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const headerNode = target?.closest('[data-result-column-header]');
+
+    if (!headerNode) {
+        return;
+    }
+
+    event.preventDefault();
+    openCopyColumnMenu(headerNode);
+});
+
 document.addEventListener('keydown', event => {
     const target = event.target;
     const state = getState();
@@ -1810,6 +2346,18 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (document.querySelector('[data-copy-column-menu][open]')) {
+        event.preventDefault();
+        closeCopyColumnMenus();
+        return;
+    }
+
+    if (document.querySelector('.sidebar-db-picker[open]')) {
+        event.preventDefault();
+        closeSidebarDatabasePickers();
+        return;
+    }
+
     if (
         state.route.name === 'data' &&
         (typeof state.dataBrowser.selectedRowIndex === 'number' || Boolean(state.dataBrowser.selectedRow))
@@ -1826,12 +2374,33 @@ document.addEventListener('keydown', event => {
 });
 
 document.addEventListener('input', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
+    const textCellInput = target?.closest('[data-row-editor-text-source]');
+
+    if (timestampInput) {
+        syncRowEditorTimestampPreview(timestampInput);
+        syncRowEditorFilePathPreview(timestampInput);
+    }
+
+    if (textCellInput) {
+        syncRowEditorCharacterCount(textCellInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
         return;
     }
 
+    if (bindNode.dataset.bind === 'copy-column-format-field') {
+        updateCopyColumnModalFormatField(
+            bindNode.dataset.field,
+            bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox' ? bindNode.checked : bindNode.value,
+        );
+        return;
+    }
+
     if (bindNode.dataset.bind === 'current-query') {
         invalidateMainRenderCache();
         syncQueryEditorHighlight(bindNode);
@@ -1873,7 +2442,12 @@ document.addEventListener('input', event => {
             return;
         }
 
-        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value, { notify: false });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -1882,7 +2456,14 @@ document.addEventListener('input', event => {
             return;
         }
 
-        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value, {
+            notify: false,
+        });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -1943,6 +2524,19 @@ document.addEventListener(
 );
 
 document.addEventListener('change', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
+    const textCellInput = target?.closest('[data-row-editor-text-source]');
+
+    if (timestampInput) {
+        syncRowEditorTimestampPreview(timestampInput);
+        syncRowEditorFilePathPreview(timestampInput);
+    }
+
+    if (textCellInput) {
+        syncRowEditorCharacterCount(textCellInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -2001,7 +2595,12 @@ document.addEventListener('change', event => {
             return;
         }
 
-        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value, { notify: false });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -2018,7 +2617,14 @@ document.addEventListener('change', event => {
             return;
         }
 
-        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value, {
+            notify: false,
+        });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -2027,6 +2633,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'table-designer-constraint-field') {
+        updateCurrentTableDesignerConstraintField(
+            bindNode.dataset.constraintKind,
+            bindNode.dataset.constraintId,
+            bindNode.dataset.field,
+            bindNode.value,
+        );
+        return;
+    }
+
     if (bindNode.dataset.bind === 'query-chart-draft:chartType') {
         updateCurrentQueryChartDraftField('chartType', bindNode.value);
         return;
@@ -2057,7 +2673,8 @@ document.addEventListener('submit', async event => {
     }
 
     event.preventDefault();
-    const formData = new FormData(form);
+    const submitter = event.submitter instanceof HTMLElement ? event.submitter : null;
+    const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
         case 'open-connection': {
@@ -2149,6 +2766,9 @@ document.addEventListener('submit', async event => {
         case 'create-media-tagging-mapping-table':
             await submitCreateMediaTaggingMappingTable();
             return;
+        case 'copy-column':
+            await submitCopyColumnModal(formData);
+            return;
         case 'save-data-row': {
             const values = {};