@taon-dev/cms 21.0.24 → 21.0.27

package/ts-source/websql-code/taon-posts/taon-cms-post/taon-cms-post.component.ts

@@ -10,13 +10,16 @@
   
  * ========================================================================== */
 
-import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, TemplateRef, ViewChild, computed, effect, inject, input, model, output, signal, untracked, viewChild, } from '@angular/core';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, DestroyRef, ElementRef, TemplateRef, ViewChild, computed, effect, inject, input, model, output, signal, untracked, viewChild, OnDestroy, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDialog } from '@angular/material/dialog';
-import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -30,18 +33,25 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { Translation } from '@taon-dev/i18n/websql';
 import { TaonPermissionApiService } from '@taon-dev/session/websql';
 import type { TaonPermissionEntity } from '@taon-dev/session/websql';
-import { TaonConfirmDialogComponent } from '@taon-dev/ui/websql';
+import { editorTableSchema, TaonConfirmDialogComponent, } from '@taon-dev/ui/websql';
+import { createTableEditor, insertTable } from '@taon-dev/ui/websql';
 import { Editor, NgxEditorModule, toHTML } from 'ngx-editor';
 import type { Toolbar } from 'ngx-editor';
+import type { Command } from 'prosemirror-state';
+import { addRowBefore, addRowAfter, deleteRow, addColumnBefore, addColumnAfter, deleteColumn, deleteTable, } from 'prosemirror-tables';
+import { tableEditing } from 'prosemirror-tables';
 import { Observable, Subscription, finalize, firstValueFrom, forkJoin, from, of, switchMap, take, } from 'rxjs';
 import { Taon } from 'taon/websql';
+import type { TaonStorageObject } from 'taon/websql';
 import { _ } from 'tnp-core/websql';
 import type { TaonCmsApplicationHookEntity } from '../../taon-cms-application-hook/taon-cms-application-hook.entity';
 import type { TaonCmsApplicationHook } from '../../taon-cms-application-hooks';
 import { TaonCmsCategoryApiService } from '../../taon-cms-category/taon-cms-category-api.service';
 import type { TaonCmsCategoryEntity } from '../../taon-cms-category/taon-cms-category.entity';
+import { TaonCmsCommentsComponent } from '../../taon-cms-comment/taon-cms-comments.component';
 import { TaonCmsContentApiService } from '../../taon-cms-content/taon-cms-content-api.service';
 import { TaonCmsContentConfigService } from '../../taon-cms-content/taon-cms-content.config.service';
+import { TAON_CMS_MAX_UPLOAD_BYTES } from '../../taon-cms-content/taon-cms-content.constants';
 import type { TaonCmsContentEntity } from '../../taon-cms-content/taon-cms-content.entity';
 import type { TaonCmsUpdateContent } from '../../taon-cms-content/taon-cms-content.models';
 import type { TaonCmsContentFields } from '../../taon-cms-content/taon-cms-content.models';
@@ -52,17 +62,32 @@ import type { TaonCmsTemplateVariable } from '../../taon-cms-content/taon-cms-te
 import { TaonCmsTagApiService } from '../../taon-cms-tag/taon-cms-tag-api.service';
 import type { TaonCmsTagEntity } from '../../taon-cms-tag/taon-cms-tag.entity';
 import { TaonCmsTaxonomyQuickCreateDialogComponent } from '../../taon-cms-taxonomy-backoffice/taon-cms-taxonomy-quick-create-dialog.component';
+import { TaonSpreadsheetTableComponent } from '../../taon-spreadsheet-table/taon-spreadsheet-table.component';
+import type { TaonSpreadsheetData } from '../../taon-spreadsheet-table/taon-spreadsheet-table.models';
+import { parseSpreadsheetDocument, validateSpreadsheetData } from '../../taon-spreadsheet-table/taon-spreadsheet-table.utils';
 import { TaonCmsRevisionChooserComponent } from '../taon-cms-revision-chooser/taon-cms-revision-chooser.component';
 import { TaonRelatedPostChooserComponent } from '../taon-related-post-chooser/taon-related-post-chooser.component';
 import type { TaonRelatedPostChooserData } from '../taon-related-post-chooser/taon-related-post-chooser.component';
-import { TaonCmsPostChoiceDialogComponent, } from './taon-cms-post-choice-dialog.component';
-import type { TaonCmsPostChoiceDialogData } from './taon-cms-post-choice-dialog.component';
+import { extractDocumentHtml } from './taon-cms-document-extractor';
 import { TaonCmsEditableDirective } from './taon-cms-editable.directive';
-import { TaonCmsCommentsComponent } from '../../taon-cms-comment/taon-cms-comments.component';
+import { TaonCmsPostChoiceDialogComponent } from './taon-cms-post-choice-dialog.component';
+import type { TaonCmsPostChoiceDialogData } from './taon-cms-post-choice-dialog.component';
+import { TaonCmsPostThumbnailComponent } from './taon-cms-post-thumbnail.component';
 import type { TaonCmsPostDraft, TaonCmsPostMode } from './taon-cms-post.models';
 import { defaultThumbnailKey, defaultThumbnailUrl, generateVideoThumbnail, } from './taon-cms-thumbnail';
-import { NgTemplateOutlet } from '@angular/common';
-const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.ts.de-DE.i18n.data')).default } } as any);
+const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts', { "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-choice-dialog.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-choice-dialog.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post-thumbnail.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post-thumbnail.component.ts.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.html": { "en-US": async () => (await import('./i18n/taon-cms-post.component.html.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.html.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.html.de-DE.i18n.data')).default }, "src/lib/taon-posts/taon-cms-post/taon-cms-post.component.ts": { "en-US": async () => (await import('./i18n/taon-cms-post.component.ts.en-US.i18n.data')).default, "pl-PL": async () => (await import('./i18n/taon-cms-post.component.ts.pl-PL.i18n.data')).default, "de-DE": async () => (await import('./i18n/taon-cms-post.component.ts.de-DE.i18n.data')).default } } as any);
+interface RelatedChildFileSelection {
+    id: number;
+    file: File;
+    status: 'pending' | 'processing' | 'success' | 'error';
+    progress: number;
+    error: string;
+    createdTitle?: string;
+    uploads?: {
+        source?: TaonStorageObject;
+        thumbnail?: TaonStorageObject;
+    };
+}
 @Component({
     selector: 'taon-cms-post',
     templateUrl: './taon-cms-post.component.html',
@@ -87,6 +112,11 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         TaonCmsEditableDirective,
         TaonCmsCommentsComponent,
         NgTemplateOutlet,
+        MatDividerModule,
+        DragDropModule,
+        TaonCmsPostThumbnailComponent,
+        TaonSpreadsheetTableComponent,
+        JsonPipe,
     ],
     providers: [
         TaonCmsContentApiService,
@@ -96,8 +126,9 @@ const t = Translation.for('src/lib/taon-posts/taon-cms-post/taon-cms-post.compon
         TaonCmsTagApiService,
     ],
 })
-export class TaonCmsPostComponent implements AfterViewInit {
+export class TaonCmsPostComponent implements AfterViewInit, OnDestroy {
     readonly t = t.for(this);
+    readonly contentType = TaonCmsContentType;
     readonly post = input<TaonCmsContentEntity | null>(null);
     readonly mode = model<TaonCmsPostMode>('view');
     readonly changed = output<TaonCmsContentEntity>();
@@ -126,6 +157,12 @@ export class TaonCmsPostComponent implements AfterViewInit {
         categoryId: null,
         tagIds: [],
     });
+    readonly jsonTableData = signal<TaonSpreadsheetData>({
+        version: 1,
+        columns: [],
+        rows: [],
+    });
+    readonly jsonTableValidationError = signal('');
     readonly postTypes = [
         {
             value: TaonCmsContentType.Normal,
@@ -137,6 +174,10 @@ export class TaonCmsPostComponent implements AfterViewInit {
             value: TaonCmsContentType.Attachment,
             label: this.t.gettext('Attachment post'),
         },
+        {
+            value: TaonCmsContentType.JsonTable,
+            label: this.t.gettext('JSON Table post'),
+        },
     ];
     readonly currentPostType = computed(() => this.postTypes.find(type => type.value === this.draft().type) ??
         this.postTypes[0]);
@@ -148,6 +189,8 @@ export class TaonCmsPostComponent implements AfterViewInit {
                 return 'audiotrack';
             case TaonCmsContentType.Attachment:
                 return 'attach_file';
+            case TaonCmsContentType.JsonTable:
+                return 'table_chart';
             default:
                 return 'article';
         }
@@ -175,6 +218,15 @@ export class TaonCmsPostComponent implements AfterViewInit {
             accept: '',
         },
     ] as const;
+    protected readonly tableCommands = [
+        { label: 'Add row above', command: addRowBefore },
+        { label: 'Add row below', command: addRowAfter },
+        { label: 'Delete row', command: deleteRow },
+        { label: 'Add column before', command: addColumnBefore },
+        { label: 'Add column after', command: addColumnAfter },
+        { label: 'Delete column', command: deleteColumn },
+        { label: 'Delete table', command: deleteTable },
+    ];
     readonly mediaAttachment = computed(() => this.mediaAttachments.find(media => media.type === this.draft().type));
     readonly busy = signal(false);
     readonly thumbnailPreviewUrl = signal('');
@@ -203,6 +255,9 @@ export class TaonCmsPostComponent implements AfterViewInit {
     } | null>(null);
     readonly uploading = signal(false);
     readonly uploadProgress = signal(0);
+    private mediaUploadAbort: AbortController | null = null;
+    private childUploadAbort: AbortController | null = null;
+    readonly childUploadRunning = signal(false);
     readonly mediaPreviewUrl = signal('');
     readonly mediaPreviewLoading = signal(false);
     readonly mediaPreviewError = signal('');
@@ -219,6 +274,52 @@ export class TaonCmsPostComponent implements AfterViewInit {
     readonly relatedPosts = signal<TaonCmsContentEntity[]>([]);
     readonly relatedPostsLoading = signal(false);
     readonly relatedPostsError = signal('');
+    readonly childTitlePrefix = signal('');
+    readonly childFiles = signal<RelatedChildFileSelection[]>([]);
+    readonly childBatchError = signal('');
+    readonly canUploadRelatedChildren = computed(() => !!this.currentPost() &&
+        !!this.childTitlePrefix().trim() &&
+        !this.relatedPostsLoading() &&
+        !this.relatedPostsError() &&
+        !this.busy() &&
+        !this.dialogOpen() &&
+        this.childFiles().some(file => file.status !== 'success'));
+    readonly childOverallProgress = computed(() => {
+        const files = this.childFiles();
+        return files.length
+            ? Math.round(files.reduce((total, file) => total +
+                (file.status === 'success' ? 100 : Math.max(0, file.progress)), 0) / files.length)
+            : 0;
+    });
+    readonly childTitlePreviews = computed(() => {
+        const prefix = this.childTitlePrefix().trim();
+        let highest = 0;
+        if (prefix) {
+            for (const post of this.relatedPosts()) {
+                const titlePrefix = `${prefix} `;
+                if (!post.title.startsWith(titlePrefix)) {
+                    continue;
+                }
+                const suffix = post.title.slice(titlePrefix.length);
+                if (/^\d+$/.test(suffix)) {
+                    const number = Number(suffix);
+                    if (Number.isSafeInteger(number)) {
+                        highest = Math.max(highest, number);
+                    }
+                }
+            }
+        }
+        return this.childFiles().map(file => {
+            if (file.status === 'success' && file.createdTitle) {
+                return file.createdTitle;
+            }
+            highest += 1;
+            return prefix ? `${prefix} ${String(highest).padStart(2, '0')}` : '';
+        });
+    });
+    private childFileSequence = 0;
+    private childTitlePrefixParentId: number | null = null;
+    private childTitlePrefixEdited = false;
     readonly parentPost = signal<TaonCmsContentEntity | null>(null);
     readonly parentPostLoading = signal(false);
     readonly parentPostError = signal('');
@@ -279,11 +380,13 @@ export class TaonCmsPostComponent implements AfterViewInit {
         !this.permissionsLoading() &&
         !this.permissionsError() &&
         !this.taxonomyLoading() &&
-        !this.taxonomyError());
+        !this.taxonomyError() &&
+        (this.draft().type !== TaonCmsContentType.JsonTable ||
+            !this.jsonTableValidationError()));
     readonly statusLabel = computed(() => {
         const status = this.mode() === 'add'
             ? this.draftStatus()
-            : this.currentPost()?.status ?? 'draft';
+            : (this.currentPost()?.status ?? 'draft');
         switch (status) {
             case 'published':
                 return this.t.gettext('Status: Published');
@@ -301,6 +404,13 @@ export class TaonCmsPostComponent implements AfterViewInit {
         (this.mode() === 'edit' && !this.canSave()));
     private readonly api = inject(TaonCmsContentApiService);
     private readonly contentConfig = inject(TaonCmsContentConfigService);
+    get requiredSlugs(): string[] {
+        return this.contentConfig.requiredSlugs;
+    }
+    readonly selectedRequiredSlug = computed(() => {
+        const slug = this.draft().slug;
+        return this.requiredSlugs.includes(slug) ? slug : null;
+    });
     readonly contentTab = signal(0);
     readonly contentEditor = signal<Editor | null>(null);
     readonly rawContent = viewChild<ElementRef<HTMLTextAreaElement>>('rawContent');
@@ -338,13 +448,21 @@ export class TaonCmsPostComponent implements AfterViewInit {
     private postVersionLinksRequest = 0;
     private applicationHooksLoad?: Subscription;
     private permissionsLoad?: Subscription;
+    protected insertTable(event: MouseEvent): void {
+        event.preventDefault();
+        const editor = this.contentEditor();
+        if (!editor || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        insertTable(editor);
+    }
     ngAfterViewInit(): void {
         if (this.actionButtonsTemplateRef) {
             this.actionButtonsTemplate.emit(this.actionButtonsTemplateRef);
         }
     }
     constructor() {
-        const editor = new Editor({
+        const editor = createTableEditor({
             attributes: {
                 'aria-label': this.t.gettext('Post body'),
                 style: 'min-height: 20rem',
@@ -512,6 +630,10 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.releaseThumbnailPreview();
         });
     }
+    ngOnDestroy(): void {
+        this.mediaUploadAbort?.abort();
+        this.childUploadAbort?.abort();
+    }
     loadTaxonomy(preserveSelectedTags = false): void {
         this.taxonomyLoad?.unsubscribe();
         const session = this.editorSession;
@@ -627,6 +749,10 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.error.set(this.t.gettext('Please select an image for the thumbnail.'));
             return;
         }
+        if (file.size > TAON_CMS_MAX_UPLOAD_BYTES) {
+            this.error.set(this.fileTooLargeMessage(file));
+            return;
+        }
         this.busy.set(true);
         this.error.set('');
         try {
@@ -893,6 +1019,21 @@ export class TaonCmsPostComponent implements AfterViewInit {
             });
         });
     }
+    reorderRelatedPosts(event: CdkDragDrop<TaonCmsContentEntity[]>): void {
+        if (!this.editing() ||
+            this.busy() ||
+            this.dialogOpen() ||
+            this.relatedPostsLoading() ||
+            this.relatedPostsError() ||
+            event.previousContainer !== event.container) {
+            return;
+        }
+        this.relatedPosts.update(posts => {
+            const reordered = [...posts];
+            moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+            return reordered;
+        });
+    }
     removeRelatedPost(id: number): void {
         if (!this.editing() ||
             this.busy() ||
@@ -1087,6 +1228,23 @@ export class TaonCmsPostComponent implements AfterViewInit {
             },
         });
     }
+    protected canRunTableCommand(command: Command): boolean {
+        const editor = this.contentEditor();
+        return (!!editor &&
+            !this.busy() &&
+            !this.dialogOpen() &&
+            command(editor.view.state));
+    }
+    protected runTableCommand(event: MouseEvent, command: Command): void {
+        event.preventDefault();
+        const editor = this.contentEditor();
+        if (!editor || this.busy() || this.dialogOpen()) {
+            return;
+        }
+        const view = editor.view;
+        command(view.state, transaction => view.dispatch(transaction), view);
+        view.focus();
+    }
     updateRawContent(event: Event): void {
         if (event.target instanceof HTMLTextAreaElement) {
             this.updateDraft('body', event.target.value);
@@ -1128,6 +1286,33 @@ export class TaonCmsPostComponent implements AfterViewInit {
         }
     }
     updateDraft<K extends keyof TaonCmsPostDraft>(field: K, value: TaonCmsPostDraft[K]): void {
+        if (field === 'type' &&
+            value === TaonCmsContentType.JsonTable &&
+            this.draft().type !== TaonCmsContentType.JsonTable) {
+            let tableData: TaonSpreadsheetData = {
+                version: 1,
+                columns: [],
+                rows: [],
+            };
+            if (this.draft().body.trim()) {
+                try {
+                    tableData = parseSpreadsheetDocument(this.draft().body);
+                }
+                catch {
+                    if (!globalThis.confirm('Changing the post to a JSON Table will replace its current body. Continue?')) {
+                        return;
+                    }
+                }
+            }
+            this.jsonTableData.set(tableData);
+            this.jsonTableValidationError.set('');
+            this.draft.update(draft => ({
+                ...draft,
+                type: value,
+                body: JSON.stringify(tableData),
+            }));
+            return;
+        }
         if (field === 'title' && this.mode() === 'add') {
             const title = String(value);
             this.draft.update(draft => ({
@@ -1139,6 +1324,300 @@ export class TaonCmsPostComponent implements AfterViewInit {
         }
         this.draft.update(draft => ({ ...draft, [field]: value }));
     }
+    updateChildTitlePrefix(event: Event): void {
+        if (event.target instanceof HTMLInputElement) {
+            this.childTitlePrefixEdited = true;
+            this.childTitlePrefix.set(event.target.value);
+        }
+    }
+    relatedChildFilesSelected(event: Event): void {
+        if (!(event.target instanceof HTMLInputElement)) {
+            this.childBatchError.set(this.t.gettext('Unable to read the selected files.'));
+            return;
+        }
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        if (!this.currentPost() || this.busy() || !files.length) {
+            return;
+        }
+        const oversized = files.filter(file => file.size > TAON_CMS_MAX_UPLOAD_BYTES);
+        this.childBatchError.set(oversized.map(file => this.fileTooLargeMessage(file)).join(' '));
+        this.childFiles.update(selected => [
+            ...selected,
+            ...files
+                .filter(file => file.size <= TAON_CMS_MAX_UPLOAD_BYTES)
+                .map(file => ({
+                id: ++this.childFileSequence,
+                file,
+                status: 'pending' as const,
+                progress: 0,
+                error: '',
+            })),
+        ]);
+    }
+    removeRelatedChildFile(id: number): void {
+        if (this.busy()) {
+            return;
+        }
+        this.childFiles.update(files => files.filter(file => file.id !== id));
+    }
+    async uploadAndCreateChildren(): Promise<void> {
+        const parent = this.currentPost();
+        const titlePrefix = this.childTitlePrefix().trim();
+        if (!parent ||
+            !titlePrefix ||
+            this.busy() ||
+            !this.childFiles().some(file => file.status !== 'success')) {
+            return;
+        }
+        const pendingFiles = this.childFiles()
+            .map((file, index) => ({ file, index }))
+            .filter(({ file }) => file.status !== 'success');
+        const abort = new AbortController();
+        this.childUploadAbort = abort;
+        this.childUploadRunning.set(true);
+        this.busy.set(true);
+        this.childBatchError.set('');
+        try {
+            for (const { file: selectedFile, index } of pendingFiles) {
+                if (abort.signal.aborted) {
+                    break;
+                }
+                const expectedTitle = this.childTitlePreviews()[index];
+                this.updateRelatedChildFile(selectedFile.id, {
+                    status: 'processing',
+                    progress: selectedFile.uploads ? 75 : 0,
+                    error: '',
+                });
+                const type = this.relatedChildFileType(selectedFile.file);
+                let body: string | null = null;
+                try {
+                    if (type === TaonCmsContentType.Normal) {
+                        body = await extractDocumentHtml(selectedFile.file);
+                        this.updateRelatedChildFile(selectedFile.id, { progress: 10 });
+                    }
+                    let uploads = this.childFiles().find(file => file.id === selectedFile.id)?.uploads;
+                    if (!uploads?.source) {
+                        abort.signal.throwIfAborted();
+                        const source = await this.api.uploadMedia(selectedFile.file, percentage => this.updateRelatedChildFile(selectedFile.id, {
+                            progress: type === TaonCmsContentType.Video
+                                ? Math.round(percentage * 0.65)
+                                : Math.round(percentage * 0.8),
+                        }), abort.signal);
+                        uploads = { ...uploads, source };
+                        this.updateRelatedChildFile(selectedFile.id, { uploads });
+                    }
+                    if (type === TaonCmsContentType.Video && !uploads.thumbnail) {
+                        const thumbnailBlob = await generateVideoThumbnail(selectedFile.file);
+                        const extension = thumbnailBlob.type === 'image/webp' ? 'webp' : 'png';
+                        abort.signal.throwIfAborted();
+                        const thumbnail = await this.api.uploadMedia(new File([thumbnailBlob], `thumbnail.${extension}`, {
+                            type: thumbnailBlob.type,
+                        }), percentage => this.updateRelatedChildFile(selectedFile.id, {
+                            progress: 65 + Math.round(percentage * 0.25),
+                        }), abort.signal);
+                        uploads = { ...uploads, thumbnail };
+                        this.updateRelatedChildFile(selectedFile.id, { uploads });
+                    }
+                    this.updateRelatedChildFile(selectedFile.id, { progress: 95 });
+                    const thumbnailKey = type === TaonCmsContentType.Video
+                        ? uploads.thumbnail?.key
+                        : type === TaonCmsContentType.Audio
+                            ? defaultThumbnailKey(TaonCmsContentType.Audio)
+                            : defaultThumbnailKey(TaonCmsContentType.Normal);
+                    if (!thumbnailKey) {
+                        throw new Error('The video thumbnail could not be uploaded.');
+                    }
+                    const sourceUpload = uploads.source;
+                    if (!sourceUpload) {
+                        throw new Error('The uploaded source file is unavailable.');
+                    }
+                    abort.signal.throwIfAborted();
+                    const result = await this.api.createRelatedChild(parent.id, {
+                        titlePrefix,
+                        expectedTitle,
+                        fileName: selectedFile.file.name,
+                        mimeType: selectedFile.file.type,
+                        sourceKey: sourceUpload.key,
+                        type,
+                        body,
+                        videoKey: type === TaonCmsContentType.Video ? sourceUpload.key : null,
+                        audioKey: type === TaonCmsContentType.Audio ? sourceUpload.key : null,
+                        attachmentKey: type === TaonCmsContentType.Attachment ? sourceUpload.key : null,
+                        thumbnailKey,
+                    });
+                    this.recordRelatedChildSuccess(selectedFile.id, result.child, result.parentVersion);
+                    if (type === TaonCmsContentType.Normal) {
+                        const cleanupErrors = await this.cleanupRelatedChildUploads(selectedFile.id, uploads, [sourceUpload]);
+                        if (cleanupErrors.length) {
+                            this.updateRelatedChildFile(selectedFile.id, {
+                                error: cleanupErrors.join(' '),
+                            });
+                        }
+                    }
+                }
+                catch (error: unknown) {
+                    console.error('[taon-cms-post] Unable to create related child from file', selectedFile.file.name, error);
+                    let relatedPosts: TaonCmsContentEntity[] | null = null;
+                    try {
+                        relatedPosts = await firstValueFrom(this.api.listRelatedPosts(parent.id));
+                        this.relatedPosts.set(relatedPosts);
+                    }
+                    catch (refreshError: unknown) {
+                        console.error('[taon-cms-post] Unable to verify related child creation', refreshError);
+                    }
+                    const uploads = this.childFiles().find(file => file.id === selectedFile.id)?.uploads;
+                    const existingChild = relatedPosts?.find(post => post.title === expectedTitle &&
+                        this.relatedChildMatchesFile(post, type, body, uploads));
+                    if (existingChild) {
+                        this.recordRelatedChildSuccess(selectedFile.id, existingChild, this.currentPost()?.version ?? parent.version);
+                        if (type === TaonCmsContentType.Normal && uploads?.source) {
+                            const cleanupErrors = await this.cleanupRelatedChildUploads(selectedFile.id, uploads, [uploads.source]);
+                            if (cleanupErrors.length) {
+                                this.updateRelatedChildFile(selectedFile.id, {
+                                    error: cleanupErrors.join(' '),
+                                });
+                            }
+                        }
+                        continue;
+                    }
+                    const cleanupErrors = uploads
+                        ? relatedPosts
+                            ? await this.cleanupRelatedChildUploads(selectedFile.id, uploads)
+                            : []
+                        : [];
+                    const reason = abort.signal.aborted
+                        ? this.t.gettext('Upload cancelled. No child post was created.')
+                        : (error as any)?.body?.json?.message ||
+                            (error instanceof Error ? error.message : String(error));
+                    const verificationError = relatedPosts
+                        ? ''
+                        : `${this.t.gettext('The creation result could not be verified; retrying will not duplicate an existing child.')} `;
+                    this.updateRelatedChildFile(selectedFile.id, {
+                        status: 'error',
+                        error: `${verificationError}${reason}` +
+                            (cleanupErrors.length ? ` ${cleanupErrors.join(' ')}` : ''),
+                    });
+                    break;
+                }
+            }
+        }
+        finally {
+            if (this.childUploadAbort === abort) {
+                this.childUploadAbort = null;
+            }
+            this.childUploadRunning.set(false);
+            this.busy.set(false);
+            this.loadRelatedPosts();
+        }
+    }
+    private relatedChildFileType(file: File): TaonCmsContentType {
+        const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
+        if (['doc', 'docx', 'rtf', 'txt'].includes(extension)) {
+            return TaonCmsContentType.Normal;
+        }
+        if (file.type.startsWith('video/') ||
+            [
+                '3gp',
+                'avi',
+                'm4v',
+                'mkv',
+                'mov',
+                'mp4',
+                'mpeg',
+                'mpg',
+                'ogv',
+                'webm',
+            ].includes(extension)) {
+            return TaonCmsContentType.Video;
+        }
+        if (file.type.startsWith('audio/') ||
+            [
+                'aac',
+                'flac',
+                'm4a',
+                'mp3',
+                'oga',
+                'ogg',
+                'opus',
+                'wav',
+                'weba',
+                'wma',
+            ].includes(extension)) {
+            return TaonCmsContentType.Audio;
+        }
+        return TaonCmsContentType.Attachment;
+    }
+    private relatedChildMatchesFile(post: TaonCmsContentEntity, type: TaonCmsContentType, body: string | null, uploads?: RelatedChildFileSelection['uploads']): boolean {
+        const thumbnailKey = type === TaonCmsContentType.Video
+            ? uploads?.thumbnail?.key
+            : type === TaonCmsContentType.Audio
+                ? defaultThumbnailKey(TaonCmsContentType.Audio)
+                : defaultThumbnailKey(TaonCmsContentType.Normal);
+        return (post.type === type &&
+            post.body === body &&
+            post.videoKey ===
+                (type === TaonCmsContentType.Video ? uploads?.source?.key : null) &&
+            post.audioKey ===
+                (type === TaonCmsContentType.Audio ? uploads?.source?.key : null) &&
+            post.attachmentKey ===
+                (type === TaonCmsContentType.Attachment
+                    ? uploads?.source?.key
+                    : null) &&
+            post.thumbnailKey === thumbnailKey);
+    }
+    private recordRelatedChildSuccess(fileId: number, child: TaonCmsContentEntity, parentVersion: number): void {
+        this.relatedPosts.update(posts => posts.some(post => post.id === child.id) ? posts : [...posts, child]);
+        this.currentPost.update(post => post
+            ? ({
+                ...post,
+                version: parentVersion,
+                relatedPosts: this.relatedPosts(),
+            } as TaonCmsContentEntity)
+            : post);
+        this.updateRelatedChildFile(fileId, {
+            status: 'success',
+            progress: 100,
+            createdTitle: child.title,
+            error: '',
+            uploads: undefined,
+        });
+    }
+    private async cleanupRelatedChildUploads(fileId: number, uploads: NonNullable<RelatedChildFileSelection['uploads']>, only?: TaonStorageObject[]): Promise<string[]> {
+        const objects = only ??
+            [uploads.thumbnail, uploads.source].filter((object): object is TaonStorageObject => !!object);
+        const remaining = new Set<string>();
+        const errors: string[] = [];
+        for (const object of objects) {
+            try {
+                if (!(await this.api.deleteUnattachedMedia(object.key))) {
+                    remaining.add(object.key);
+                    errors.push(this.t.gettext('An uploaded file is still linked to a post and was not deleted.'));
+                }
+            }
+            catch (error: unknown) {
+                console.error('[taon-cms-post] Unable to clean up uploaded media', object.key, error);
+                remaining.add(object.key);
+                errors.push(this.t.gettext('An uploaded file could not be cleaned up.'));
+            }
+        }
+        const retained = {
+            ...(uploads.source && remaining.has(uploads.source.key)
+                ? { source: uploads.source }
+                : {}),
+            ...(uploads.thumbnail && remaining.has(uploads.thumbnail.key)
+                ? { thumbnail: uploads.thumbnail }
+                : {}),
+        };
+        this.updateRelatedChildFile(fileId, {
+            uploads: Object.keys(retained).length ? retained : undefined,
+        });
+        return errors;
+    }
+    private updateRelatedChildFile(id: number, changes: Partial<RelatedChildFileSelection>): void {
+        this.childFiles.update(files => files.map(file => (file.id === id ? { ...file, ...changes } : file)));
+    }
     async fileSelected(event: Event): Promise<void> {
         if (!(event.target instanceof HTMLInputElement)) {
             this.error.set(this.t.gettext('Unable to read the selected media file.'));
@@ -1154,7 +1633,14 @@ export class TaonCmsPostComponent implements AfterViewInit {
             input.value = '';
             return;
         }
+        if (file.size > TAON_CMS_MAX_UPLOAD_BYTES) {
+            input.value = '';
+            this.error.set(this.fileTooLargeMessage(file));
+            return;
+        }
         const session = this.editorSession;
+        const abort = new AbortController();
+        this.mediaUploadAbort = abort;
         this.busy.set(true);
         this.uploading.set(true);
         this.uploadProgress.set(0);
@@ -1164,7 +1650,7 @@ export class TaonCmsPostComponent implements AfterViewInit {
                 if (!this.destroyRef.destroyed) {
                     this.uploadProgress.set(percentage);
                 }
-            });
+            }, abort.signal);
             if (!this.destroyRef.destroyed && this.editorSession === session) {
                 const fileName = object.fileName || file.name;
                 this.mediaFileNames.update(names => ({
@@ -1193,16 +1679,40 @@ export class TaonCmsPostComponent implements AfterViewInit {
             }
         }
         catch (error: unknown) {
-            console.error('[taon-cms-post] Unable to upload media', error);
-            this.error.set(this.t.gettext('The media could not be uploaded. Please try again.'));
+            if (abort.signal.aborted) {
+                if (!this.destroyRef.destroyed) {
+                    this.error.set(this.t.gettext('The media upload was cancelled.'));
+                }
+            }
+            else {
+                console.error('[taon-cms-post] Unable to upload media', error);
+                this.error.set(`${this.t.gettext('The media could not be uploaded. Please try again.')}${this.uploadErrorDetails(error)}`);
+            }
         }
         finally {
+            if (this.mediaUploadAbort === abort) {
+                this.mediaUploadAbort = null;
+            }
             this.busy.set(false);
             this.uploading.set(false);
             this.uploadProgress.set(0);
             input.value = '';
         }
     }
+    cancelMediaUpload(): void {
+        this.mediaUploadAbort?.abort();
+    }
+    cancelRelatedChildUploads(): void {
+        this.childUploadAbort?.abort();
+    }
+    private fileTooLargeMessage(file: File): string {
+        return this.t.gettext('The file "[[ fileName ]]" is too large. The maximum upload size is 1 GB.', { fileName: file.name });
+    }
+    private uploadErrorDetails(error: unknown): string {
+        const message = (error as any)?.body?.json?.message ||
+            (error instanceof Error ? error.message : '');
+        return message ? ` (${message})` : '';
+    }
     removeMedia(): void {
         const media = this.mediaAttachment();
         if (!media || !this.editing() || this.busy() || this.dialogOpen()) {
@@ -1265,6 +1775,11 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.updateDraft('slug', event.target.value);
         }
     }
+    selectRequiredSlug(slug: string | null): void {
+        if (slug && this.requiredSlugs.includes(slug)) {
+            this.updateDraft('slug', slug);
+        }
+    }
     edit(): void {
         if (this.mode() !== 'view' || this.busy() || this.dialogOpen()) {
             return;
@@ -1592,6 +2107,16 @@ export class TaonCmsPostComponent implements AfterViewInit {
         this.uploadedMediaPreview.set(null);
         this.mediaPreviewSignature = '';
         this.mediaPreviewRequest += 1;
+        if ((post?.id ?? null) !== this.childTitlePrefixParentId) {
+            this.childTitlePrefixParentId = post?.id ?? null;
+            this.childTitlePrefixEdited = false;
+            this.childTitlePrefix.set(post ? `${post.title} child` : '');
+            this.childFiles.set([]);
+            this.childBatchError.set('');
+        }
+        else if (post && !this.childTitlePrefixEdited) {
+            this.childTitlePrefix.set(`${post.title} child`);
+        }
         this.currentPost.set(post);
         this.loadVisibilityConfiguration(post && this.mode() !== 'view-clean' ? post : null);
         this.loadParentPost(post && this.mode() !== 'view-clean' ? post : null);
@@ -1619,6 +2144,13 @@ export class TaonCmsPostComponent implements AfterViewInit {
             categoryId: post?.categoryId ?? null,
             tagIds: [],
         });
+        if ((post?.type ?? TaonCmsContentType.Normal) === TaonCmsContentType.JsonTable) {
+            this.loadJsonTableData(post?.body ?? null);
+        }
+        else {
+            this.jsonTableData.set({ version: 1, columns: [], rows: [] });
+            this.jsonTableValidationError.set('');
+        }
         if (post &&
             post.relatedPosts === undefined &&
             this.mode() !== 'view-clean') {
@@ -1631,6 +2163,34 @@ export class TaonCmsPostComponent implements AfterViewInit {
             this.loadTaxonomy();
         }
     }
+    setJsonTableData(value: TaonSpreadsheetData): void {
+        try {
+            const data = validateSpreadsheetData(value);
+            this.jsonTableData.set(data);
+            this.draft.update(draft => ({
+                ...draft,
+                body: JSON.stringify(data),
+            }));
+        }
+        catch (error) {
+            this.jsonTableValidationError.set(error instanceof Error ? error.message : 'JSON Table data is invalid.');
+        }
+    }
+    private loadJsonTableData(body: string | null): void {
+        try {
+            const data = parseSpreadsheetDocument(body);
+            this.jsonTableData.set(data);
+            this.draft.update(draft => ({
+                ...draft,
+                body: JSON.stringify(data),
+            }));
+            this.jsonTableValidationError.set('');
+        }
+        catch (error) {
+            this.jsonTableData.set({ version: 1, columns: [], rows: [] });
+            this.jsonTableValidationError.set(error instanceof Error ? error.message : 'JSON Table data is invalid.');
+        }
+    }
     private setApplicationHookSelection(post: TaonCmsContentEntity | null, hooks: TaonCmsApplicationHookEntity[]): void {
         const assignedHook = post?.applicationHook !== undefined
             ? post.applicationHook?.hook