update
This commit is contained in:
Juergen Kunz
477
ts_web/elements/wysiwyg/blocks/media/attachment.block.ts
Normal file
477
ts_web/elements/wysiwyg/blocks/media/attachment.block.ts
Normal file
@ -0,0 +1,477 @@
|
||||
import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
|
||||
import type { IBlock } from '../../wysiwyg.types.js';
|
||||
import { cssManager } from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* AttachmentBlockHandler - Handles file attachments
|
||||
*
|
||||
* Features:
|
||||
* - Multiple file upload support
|
||||
* - Click to upload or drag and drop
|
||||
* - File type icons
|
||||
* - Remove individual files
|
||||
* - Base64 encoding (TODO: server upload in production)
|
||||
*/
|
||||
export class AttachmentBlockHandler extends BaseBlockHandler {
|
||||
type = 'attachment';
|
||||
|
||||
render(block: IBlock, isSelected: boolean): string {
|
||||
const files = block.metadata?.files || [];
|
||||
|
||||
return `
|
||||
<div class="attachment-block-container${isSelected ? ' selected' : ''}"
|
||||
data-block-id="${block.id}"
|
||||
tabindex="0">
|
||||
<div class="attachment-header">
|
||||
<div class="attachment-icon">📎</div>
|
||||
<div class="attachment-title">File Attachments</div>
|
||||
</div>
|
||||
<div class="attachment-list">
|
||||
${files.length > 0 ? this.renderFiles(files) : this.renderPlaceholder()}
|
||||
</div>
|
||||
<input type="file"
|
||||
class="attachment-file-input"
|
||||
multiple
|
||||
style="display: none;" />
|
||||
${files.length > 0 ? '<button class="add-more-files">Add More Files</button>' : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderPlaceholder(): string {
|
||||
return `
|
||||
<div class="attachment-placeholder">
|
||||
<div class="placeholder-text">Click to add files</div>
|
||||
<div class="placeholder-hint">or drag and drop</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderFiles(files: any[]): string {
|
||||
return files.map((file: any) => `
|
||||
<div class="attachment-item" data-file-id="${file.id}">
|
||||
<div class="file-icon">${this.getFileIcon(file.type)}</div>
|
||||
<div class="file-info">
|
||||
<div class="file-name">${this.escapeHtml(file.name)}</div>
|
||||
<div class="file-size">${this.formatFileSize(file.size)}</div>
|
||||
</div>
|
||||
<button class="remove-file" data-file-id="${file.id}">×</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
|
||||
const container = element.querySelector('.attachment-block-container') as HTMLElement;
|
||||
const fileInput = element.querySelector('.attachment-file-input') as HTMLInputElement;
|
||||
|
||||
if (!container || !fileInput) {
|
||||
console.error('AttachmentBlockHandler: Could not find required elements');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize files array if needed
|
||||
if (!block.metadata) block.metadata = {};
|
||||
if (!block.metadata.files) block.metadata.files = [];
|
||||
|
||||
// Click to upload on placeholder
|
||||
const placeholder = container.querySelector('.attachment-placeholder');
|
||||
if (placeholder) {
|
||||
placeholder.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fileInput.click();
|
||||
});
|
||||
}
|
||||
|
||||
// Add more files button
|
||||
const addMoreBtn = container.querySelector('.add-more-files') as HTMLButtonElement;
|
||||
if (addMoreBtn) {
|
||||
addMoreBtn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fileInput.click();
|
||||
});
|
||||
}
|
||||
|
||||
// File input change
|
||||
fileInput.addEventListener('change', async (e) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const files = input.files;
|
||||
if (files && files.length > 0) {
|
||||
await this.handleFileAttachments(files, block, handlers);
|
||||
input.value = ''; // Clear input for next selection
|
||||
}
|
||||
});
|
||||
|
||||
// Remove file buttons
|
||||
container.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.classList.contains('remove-file')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const fileId = target.getAttribute('data-file-id');
|
||||
if (fileId) {
|
||||
this.removeFile(fileId, block, handlers);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
container.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
container.classList.add('drag-over');
|
||||
});
|
||||
|
||||
container.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
container.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
container.addEventListener('drop', async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
container.classList.remove('drag-over');
|
||||
|
||||
const files = e.dataTransfer?.files;
|
||||
if (files && files.length > 0) {
|
||||
await this.handleFileAttachments(files, block, handlers);
|
||||
}
|
||||
});
|
||||
|
||||
// Focus/blur
|
||||
container.addEventListener('focus', () => handlers.onFocus());
|
||||
container.addEventListener('blur', () => handlers.onBlur());
|
||||
|
||||
// Keyboard navigation
|
||||
container.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
// Only remove all files if container is focused, not when removing individual files
|
||||
if (document.activeElement === container && block.metadata?.files?.length > 0) {
|
||||
e.preventDefault();
|
||||
block.metadata.files = [];
|
||||
handlers.onRequestUpdate?.();
|
||||
return;
|
||||
}
|
||||
}
|
||||
handlers.onKeyDown(e);
|
||||
});
|
||||
}
|
||||
|
||||
private async handleFileAttachments(
|
||||
files: FileList,
|
||||
block: IBlock,
|
||||
handlers: IBlockEventHandlers
|
||||
): Promise<void> {
|
||||
if (!block.metadata) block.metadata = {};
|
||||
if (!block.metadata.files) block.metadata.files = [];
|
||||
|
||||
for (const file of Array.from(files)) {
|
||||
try {
|
||||
const dataUrl = await this.fileToDataUrl(file);
|
||||
const fileData = {
|
||||
id: this.generateId(),
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
data: dataUrl
|
||||
};
|
||||
|
||||
block.metadata.files.push(fileData);
|
||||
} catch (error) {
|
||||
console.error('Failed to attach file:', file.name, error);
|
||||
}
|
||||
}
|
||||
|
||||
// Update block content with file count
|
||||
block.content = `${block.metadata.files.length} file${block.metadata.files.length !== 1 ? 's' : ''} attached`;
|
||||
|
||||
// Request UI update
|
||||
handlers.onRequestUpdate?.();
|
||||
}
|
||||
|
||||
private removeFile(fileId: string, block: IBlock, handlers: IBlockEventHandlers): void {
|
||||
if (!block.metadata?.files) return;
|
||||
|
||||
block.metadata.files = block.metadata.files.filter((f: any) => f.id !== fileId);
|
||||
|
||||
// Update content
|
||||
block.content = block.metadata.files.length > 0
|
||||
? `${block.metadata.files.length} file${block.metadata.files.length !== 1 ? 's' : ''} attached`
|
||||
: '';
|
||||
|
||||
// Request UI update
|
||||
handlers.onRequestUpdate?.();
|
||||
}
|
||||
|
||||
private fileToDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const result = e.target?.result;
|
||||
if (typeof result === 'string') {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(new Error('Failed to read file'));
|
||||
}
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
private getFileIcon(mimeType: string): string {
|
||||
if (mimeType.startsWith('image/')) return '🖼️';
|
||||
if (mimeType.startsWith('video/')) return '🎥';
|
||||
if (mimeType.startsWith('audio/')) return '🎵';
|
||||
if (mimeType.includes('pdf')) return '📄';
|
||||
if (mimeType.includes('zip') || mimeType.includes('rar') || mimeType.includes('tar')) return '🗄️';
|
||||
if (mimeType.includes('sheet')) return '📊';
|
||||
if (mimeType.includes('document') || mimeType.includes('msword')) return '📝';
|
||||
if (mimeType.includes('presentation')) return '📋';
|
||||
if (mimeType.includes('text')) return '📃';
|
||||
return '📁';
|
||||
}
|
||||
|
||||
private formatFileSize(bytes: number): string {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
private generateId(): string {
|
||||
return `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getContent(element: HTMLElement): string {
|
||||
// Content is the description of attached files
|
||||
const block = this.getBlockFromElement(element);
|
||||
return block?.content || '';
|
||||
}
|
||||
|
||||
setContent(element: HTMLElement, content: string): void {
|
||||
// Content is the description of attached files
|
||||
const block = this.getBlockFromElement(element);
|
||||
if (block) {
|
||||
block.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
private getBlockFromElement(element: HTMLElement): IBlock | null {
|
||||
const container = element.querySelector('.attachment-block-container');
|
||||
const blockId = container?.getAttribute('data-block-id');
|
||||
if (!blockId) return null;
|
||||
|
||||
// Simplified version - in real implementation would need access to block data
|
||||
return {
|
||||
id: blockId,
|
||||
type: 'attachment',
|
||||
content: '',
|
||||
metadata: {}
|
||||
};
|
||||
}
|
||||
|
||||
getCursorPosition(element: HTMLElement): number | null {
|
||||
return null; // Attachment blocks don't have cursor position
|
||||
}
|
||||
|
||||
setCursorToStart(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
setCursorToEnd(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
focus(element: HTMLElement): void {
|
||||
const container = element.querySelector('.attachment-block-container') as HTMLElement;
|
||||
container?.focus();
|
||||
}
|
||||
|
||||
focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end'): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
getSplitContent(element: HTMLElement): { before: string; after: string } | null {
|
||||
return null; // Attachment blocks can't be split
|
||||
}
|
||||
|
||||
getStyles(): string {
|
||||
return `
|
||||
/* Attachment Block Container */
|
||||
.attachment-block-container {
|
||||
position: relative;
|
||||
margin: 12px 0;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#111827')};
|
||||
}
|
||||
|
||||
.attachment-block-container.selected {
|
||||
border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
}
|
||||
|
||||
.attachment-block-container.drag-over {
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
|
||||
border-color: ${cssManager.bdTheme('#6366f1', '#818cf8')};
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.attachment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
|
||||
}
|
||||
|
||||
.attachment-icon {
|
||||
font-size: 18px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.attachment-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
}
|
||||
|
||||
/* File List */
|
||||
.attachment-list {
|
||||
padding: 8px;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Placeholder */
|
||||
.attachment-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.attachment-placeholder:hover {
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.placeholder-hint {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
}
|
||||
|
||||
/* File Items */
|
||||
.attachment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.attachment-item:hover {
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#374151')};
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#111827', '#f9fafb')};
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 11px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.remove-file {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.remove-file:hover {
|
||||
background: ${cssManager.bdTheme('#fee2e2', '#991b1b')};
|
||||
border-color: ${cssManager.bdTheme('#fca5a5', '#dc2626')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#fca5a5')};
|
||||
}
|
||||
|
||||
/* Add More Files Button */
|
||||
.add-more-files {
|
||||
margin: 8px;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
.add-more-files:hover {
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
|
||||
border-color: ${cssManager.bdTheme('#d1d5db', '#4b5563')};
|
||||
}
|
||||
|
||||
/* Hidden file input */
|
||||
.attachment-file-input {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
406
ts_web/elements/wysiwyg/blocks/media/image.block.ts
Normal file
406
ts_web/elements/wysiwyg/blocks/media/image.block.ts
Normal file
@ -0,0 +1,406 @@
|
||||
import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
|
||||
import type { IBlock } from '../../wysiwyg.types.js';
|
||||
import { cssManager } from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* ImageBlockHandler - Handles image upload, display, and interactions
|
||||
*
|
||||
* Features:
|
||||
* - Click to upload
|
||||
* - Drag and drop support
|
||||
* - Base64 encoding (TODO: server upload in production)
|
||||
* - Loading states
|
||||
* - Alt text from filename
|
||||
*/
|
||||
export class ImageBlockHandler extends BaseBlockHandler {
|
||||
type = 'image';
|
||||
|
||||
render(block: IBlock, isSelected: boolean): string {
|
||||
const imageUrl = block.metadata?.url;
|
||||
const altText = block.content || 'Image';
|
||||
const isLoading = block.metadata?.loading;
|
||||
|
||||
return `
|
||||
<div class="image-block-container${isSelected ? ' selected' : ''}"
|
||||
data-block-id="${block.id}"
|
||||
data-has-image="${!!imageUrl}"
|
||||
tabindex="0">
|
||||
${isLoading ? this.renderLoading() :
|
||||
imageUrl ? this.renderImage(imageUrl, altText) :
|
||||
this.renderPlaceholder()}
|
||||
<input type="file"
|
||||
class="image-file-input"
|
||||
accept="image/*"
|
||||
style="display: none;" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderPlaceholder(): string {
|
||||
return `
|
||||
<div class="image-upload-placeholder" style="cursor: pointer;">
|
||||
<div class="upload-icon" style="pointer-events: none;">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"/>
|
||||
<polyline points="21 15 16 10 5 21"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="upload-text" style="pointer-events: none;">Click to upload an image</div>
|
||||
<div class="upload-hint" style="pointer-events: none;">or drag and drop</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderImage(url: string, altText: string): string {
|
||||
return `
|
||||
<div class="image-container">
|
||||
<img src="${url}" alt="${this.escapeHtml(altText)}" />
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderLoading(): string {
|
||||
return `
|
||||
<div class="image-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading-text">Uploading image...</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
|
||||
const container = element.querySelector('.image-block-container') as HTMLElement;
|
||||
const fileInput = element.querySelector('.image-file-input') as HTMLInputElement;
|
||||
|
||||
if (!container) {
|
||||
console.error('ImageBlockHandler: Could not find container');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fileInput) {
|
||||
console.error('ImageBlockHandler: Could not find file input');
|
||||
return;
|
||||
}
|
||||
|
||||
// Click to upload (only on placeholder)
|
||||
const placeholder = container.querySelector('.image-upload-placeholder');
|
||||
if (placeholder) {
|
||||
placeholder.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('ImageBlockHandler: Placeholder clicked, opening file selector');
|
||||
fileInput.click();
|
||||
});
|
||||
}
|
||||
|
||||
// Container click for focus
|
||||
container.addEventListener('click', () => {
|
||||
handlers.onFocus();
|
||||
});
|
||||
|
||||
// File input change
|
||||
fileInput.addEventListener('change', async (e) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (file) {
|
||||
console.log('ImageBlockHandler: File selected:', file.name);
|
||||
await this.handleFileUpload(file, block, handlers);
|
||||
}
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
container.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!block.metadata?.url) {
|
||||
container.classList.add('drag-over');
|
||||
}
|
||||
});
|
||||
|
||||
container.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
container.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
container.addEventListener('drop', async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
container.classList.remove('drag-over');
|
||||
|
||||
const file = e.dataTransfer?.files[0];
|
||||
if (file && file.type.startsWith('image/') && !block.metadata?.url) {
|
||||
await this.handleFileUpload(file, block, handlers);
|
||||
}
|
||||
});
|
||||
|
||||
// Focus/blur
|
||||
container.addEventListener('focus', () => handlers.onFocus());
|
||||
container.addEventListener('blur', () => handlers.onBlur());
|
||||
|
||||
// Keyboard navigation
|
||||
container.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
if (block.metadata?.url) {
|
||||
// Clear the image
|
||||
block.metadata.url = undefined;
|
||||
block.metadata.loading = false;
|
||||
block.content = '';
|
||||
handlers.onInput(new InputEvent('input'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
handlers.onKeyDown(e);
|
||||
});
|
||||
}
|
||||
|
||||
private async handleFileUpload(
|
||||
file: File,
|
||||
block: IBlock,
|
||||
handlers: IBlockEventHandlers
|
||||
): Promise<void> {
|
||||
console.log('ImageBlockHandler: Starting file upload', {
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
blockId: block.id
|
||||
});
|
||||
|
||||
// Validate file
|
||||
if (!file.type.startsWith('image/')) {
|
||||
console.error('Invalid file type:', file.type);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check file size (10MB limit)
|
||||
const maxSize = 10 * 1024 * 1024;
|
||||
if (file.size > maxSize) {
|
||||
console.error('File too large. Maximum size is 10MB');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set loading state
|
||||
if (!block.metadata) block.metadata = {};
|
||||
block.metadata.loading = true;
|
||||
block.metadata.fileName = file.name;
|
||||
block.metadata.fileSize = file.size;
|
||||
block.metadata.mimeType = file.type;
|
||||
|
||||
console.log('ImageBlockHandler: Set loading state, requesting update');
|
||||
// Request immediate UI update for loading state
|
||||
handlers.onRequestUpdate?.();
|
||||
|
||||
try {
|
||||
// Convert to base64
|
||||
const dataUrl = await this.fileToDataUrl(file);
|
||||
|
||||
// Update block
|
||||
block.metadata.url = dataUrl;
|
||||
block.metadata.loading = false;
|
||||
|
||||
// Set default alt text from filename
|
||||
const nameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
|
||||
block.content = nameWithoutExt;
|
||||
|
||||
console.log('ImageBlockHandler: Upload complete, requesting update', {
|
||||
hasUrl: !!block.metadata.url,
|
||||
urlLength: dataUrl.length,
|
||||
altText: block.content
|
||||
});
|
||||
|
||||
// Request immediate UI update to show uploaded image
|
||||
handlers.onRequestUpdate?.();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to upload image:', error);
|
||||
block.metadata.loading = false;
|
||||
// Request UI update to clear loading state
|
||||
handlers.onRequestUpdate?.();
|
||||
}
|
||||
}
|
||||
|
||||
private fileToDataUrl(file: File): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const result = e.target?.result;
|
||||
if (typeof result === 'string') {
|
||||
resolve(result);
|
||||
} else {
|
||||
reject(new Error('Failed to read file'));
|
||||
}
|
||||
};
|
||||
reader.onerror = reject;
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getContent(element: HTMLElement): string {
|
||||
// Content is the alt text
|
||||
const block = this.getBlockFromElement(element);
|
||||
return block?.content || '';
|
||||
}
|
||||
|
||||
setContent(element: HTMLElement, content: string): void {
|
||||
// Content is the alt text
|
||||
const block = this.getBlockFromElement(element);
|
||||
if (block) {
|
||||
block.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
private getBlockFromElement(element: HTMLElement): IBlock | null {
|
||||
const container = element.querySelector('.image-block-container');
|
||||
const blockId = container?.getAttribute('data-block-id');
|
||||
if (!blockId) return null;
|
||||
|
||||
// This is a simplified version - in real implementation,
|
||||
// we'd need access to the block data
|
||||
return {
|
||||
id: blockId,
|
||||
type: 'image',
|
||||
content: '',
|
||||
metadata: {}
|
||||
};
|
||||
}
|
||||
|
||||
getCursorPosition(element: HTMLElement): number | null {
|
||||
return null; // Images don't have cursor position
|
||||
}
|
||||
|
||||
setCursorToStart(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
setCursorToEnd(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
focus(element: HTMLElement): void {
|
||||
const container = element.querySelector('.image-block-container') as HTMLElement;
|
||||
container?.focus();
|
||||
}
|
||||
|
||||
focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end'): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
getSplitContent(element: HTMLElement): { before: string; after: string } | null {
|
||||
return null; // Images can't be split
|
||||
}
|
||||
|
||||
getStyles(): string {
|
||||
return `
|
||||
/* Image Block Container */
|
||||
.image-block-container {
|
||||
position: relative;
|
||||
margin: 12px 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-block-container.selected {
|
||||
box-shadow: 0 0 0 2px ${cssManager.bdTheme('#6366f1', '#818cf8')};
|
||||
}
|
||||
|
||||
/* Upload Placeholder */
|
||||
.image-upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
border: 2px dashed ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 6px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.image-block-container:hover .image-upload-placeholder {
|
||||
border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#111827')};
|
||||
}
|
||||
|
||||
.image-block-container.drag-over .image-upload-placeholder {
|
||||
border-color: ${cssManager.bdTheme('#6366f1', '#818cf8')};
|
||||
background: ${cssManager.bdTheme('#eff6ff', '#1e1b4b')};
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin-bottom: 12px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
||||
}
|
||||
|
||||
/* Image Container */
|
||||
.image-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 200px;
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#111827')};
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.image-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 24px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-top-color: ${cssManager.bdTheme('#6366f1', '#818cf8')};
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
}
|
||||
|
||||
/* File input hidden */
|
||||
.image-file-input {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
337
ts_web/elements/wysiwyg/blocks/media/youtube.block.ts
Normal file
337
ts_web/elements/wysiwyg/blocks/media/youtube.block.ts
Normal file
@ -0,0 +1,337 @@
|
||||
import { BaseBlockHandler, type IBlockEventHandlers } from '../block.base.js';
|
||||
import type { IBlock } from '../../wysiwyg.types.js';
|
||||
import { cssManager } from '@design.estate/dees-element';
|
||||
|
||||
/**
|
||||
* YouTubeBlockHandler - Handles YouTube video embedding
|
||||
*
|
||||
* Features:
|
||||
* - YouTube URL parsing and validation
|
||||
* - Video ID extraction from various YouTube URL formats
|
||||
* - Embedded iframe player
|
||||
* - Clean minimalist design
|
||||
*/
|
||||
export class YouTubeBlockHandler extends BaseBlockHandler {
|
||||
type = 'youtube';
|
||||
|
||||
render(block: IBlock, isSelected: boolean): string {
|
||||
const videoId = block.metadata?.videoId;
|
||||
const url = block.metadata?.url || '';
|
||||
|
||||
return `
|
||||
<div class="youtube-block-container${isSelected ? ' selected' : ''}"
|
||||
data-block-id="${block.id}"
|
||||
data-has-video="${!!videoId}">
|
||||
${videoId ? this.renderVideo(videoId) : this.renderPlaceholder(url)}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderPlaceholder(url: string): string {
|
||||
return `
|
||||
<div class="youtube-placeholder">
|
||||
<div class="placeholder-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="placeholder-text">Enter YouTube URL</div>
|
||||
<input type="url"
|
||||
class="youtube-url-input"
|
||||
placeholder="https://youtube.com/watch?v=..."
|
||||
value="${this.escapeHtml(url)}" />
|
||||
<button class="youtube-embed-btn">Embed Video</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderVideo(videoId: string): string {
|
||||
return `
|
||||
<div class="youtube-container">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/${videoId}"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
setup(element: HTMLElement, block: IBlock, handlers: IBlockEventHandlers): void {
|
||||
const container = element.querySelector('.youtube-block-container') as HTMLElement;
|
||||
if (!container) return;
|
||||
|
||||
// If video is already embedded, just handle focus/blur
|
||||
if (block.metadata?.videoId) {
|
||||
container.setAttribute('tabindex', '0');
|
||||
container.addEventListener('focus', () => handlers.onFocus());
|
||||
container.addEventListener('blur', () => handlers.onBlur());
|
||||
|
||||
// Handle deletion
|
||||
container.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
handlers.onKeyDown(e);
|
||||
} else {
|
||||
handlers.onKeyDown(e);
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup placeholder interactions
|
||||
const urlInput = element.querySelector('.youtube-url-input') as HTMLInputElement;
|
||||
const embedBtn = element.querySelector('.youtube-embed-btn') as HTMLButtonElement;
|
||||
|
||||
if (!urlInput || !embedBtn) return;
|
||||
|
||||
// Focus management
|
||||
urlInput.addEventListener('focus', () => handlers.onFocus());
|
||||
urlInput.addEventListener('blur', () => handlers.onBlur());
|
||||
|
||||
// Handle embed button click
|
||||
embedBtn.addEventListener('click', () => {
|
||||
this.embedVideo(urlInput.value, block, handlers);
|
||||
});
|
||||
|
||||
// Handle Enter key in input
|
||||
urlInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
this.embedVideo(urlInput.value, block, handlers);
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
urlInput.blur();
|
||||
}
|
||||
});
|
||||
|
||||
// Handle paste event
|
||||
urlInput.addEventListener('paste', (e) => {
|
||||
// Allow paste to complete first
|
||||
setTimeout(() => {
|
||||
const pastedUrl = urlInput.value;
|
||||
if (this.extractYouTubeVideoId(pastedUrl)) {
|
||||
// Auto-embed if valid YouTube URL was pasted
|
||||
this.embedVideo(pastedUrl, block, handlers);
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// Update URL in metadata as user types
|
||||
urlInput.addEventListener('input', () => {
|
||||
if (!block.metadata) block.metadata = {};
|
||||
block.metadata.url = urlInput.value;
|
||||
});
|
||||
}
|
||||
|
||||
private embedVideo(url: string, block: IBlock, handlers: IBlockEventHandlers): void {
|
||||
const videoId = this.extractYouTubeVideoId(url);
|
||||
|
||||
if (!videoId) {
|
||||
// Could show an error message here
|
||||
console.error('Invalid YouTube URL');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update block metadata
|
||||
if (!block.metadata) block.metadata = {};
|
||||
block.metadata.videoId = videoId;
|
||||
block.metadata.url = url;
|
||||
|
||||
// Set content as video title (could be fetched from API in the future)
|
||||
block.content = `YouTube Video: ${videoId}`;
|
||||
|
||||
// Request immediate UI update to show embedded video
|
||||
handlers.onRequestUpdate?.();
|
||||
}
|
||||
|
||||
private extractYouTubeVideoId(url: string): string | null {
|
||||
// Handle various YouTube URL formats
|
||||
const patterns = [
|
||||
/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/,
|
||||
/youtube\.com\/embed\/([^"&?\/ ]{11})/,
|
||||
/youtube\.com\/watch\?v=([^"&?\/ ]{11})/,
|
||||
/youtu\.be\/([^"&?\/ ]{11})/
|
||||
];
|
||||
|
||||
for (const pattern of patterns) {
|
||||
const match = url.match(pattern);
|
||||
if (match) {
|
||||
return match[1];
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
private escapeHtml(text: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
getContent(element: HTMLElement): string {
|
||||
// Content is the video description/title
|
||||
const block = this.getBlockFromElement(element);
|
||||
return block?.content || '';
|
||||
}
|
||||
|
||||
setContent(element: HTMLElement, content: string): void {
|
||||
// Content is the video description/title
|
||||
const block = this.getBlockFromElement(element);
|
||||
if (block) {
|
||||
block.content = content;
|
||||
}
|
||||
}
|
||||
|
||||
private getBlockFromElement(element: HTMLElement): IBlock | null {
|
||||
const container = element.querySelector('.youtube-block-container');
|
||||
const blockId = container?.getAttribute('data-block-id');
|
||||
if (!blockId) return null;
|
||||
|
||||
// Simplified version - in real implementation would need access to block data
|
||||
return {
|
||||
id: blockId,
|
||||
type: 'youtube',
|
||||
content: '',
|
||||
metadata: {}
|
||||
};
|
||||
}
|
||||
|
||||
getCursorPosition(element: HTMLElement): number | null {
|
||||
return null; // YouTube blocks don't have cursor position
|
||||
}
|
||||
|
||||
setCursorToStart(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
setCursorToEnd(element: HTMLElement): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
focus(element: HTMLElement): void {
|
||||
const container = element.querySelector('.youtube-block-container') as HTMLElement;
|
||||
const urlInput = element.querySelector('.youtube-url-input') as HTMLInputElement;
|
||||
|
||||
if (urlInput) {
|
||||
urlInput.focus();
|
||||
} else if (container) {
|
||||
container.focus();
|
||||
}
|
||||
}
|
||||
|
||||
focusWithCursor(element: HTMLElement, position: 'start' | 'end' | number = 'end'): void {
|
||||
this.focus(element);
|
||||
}
|
||||
|
||||
getSplitContent(element: HTMLElement): { before: string; after: string } | null {
|
||||
return null; // YouTube blocks can't be split
|
||||
}
|
||||
|
||||
getStyles(): string {
|
||||
return `
|
||||
/* YouTube Block Container */
|
||||
.youtube-block-container {
|
||||
position: relative;
|
||||
margin: 12px 0;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.youtube-block-container.selected {
|
||||
box-shadow: 0 0 0 2px ${cssManager.bdTheme('#6366f1', '#818cf8')};
|
||||
}
|
||||
|
||||
/* YouTube Placeholder */
|
||||
.youtube-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 24px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 6px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
}
|
||||
|
||||
.youtube-url-input {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#374151')};
|
||||
border-radius: 4px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#111827')};
|
||||
color: ${cssManager.bdTheme('#111827', '#f9fafb')};
|
||||
font-size: 13px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.youtube-url-input:focus {
|
||||
border-color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#1f2937')};
|
||||
}
|
||||
|
||||
.youtube-url-input::placeholder {
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
|
||||
}
|
||||
|
||||
.youtube-embed-btn {
|
||||
padding: 6px 16px;
|
||||
background: ${cssManager.bdTheme('#111827', '#f9fafb')};
|
||||
color: ${cssManager.bdTheme('#f9fafb', '#111827')};
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.youtube-embed-btn:hover {
|
||||
background: ${cssManager.bdTheme('#374151', '#e5e7eb')};
|
||||
}
|
||||
|
||||
.youtube-embed-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* YouTube Container */
|
||||
.youtube-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%; /* 16:9 aspect ratio */
|
||||
background: ${cssManager.bdTheme('#000000', '#000000')};
|
||||
}
|
||||
|
||||
.youtube-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user