hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Drag-and-drop image insertion for Milkdown and Monaco editors (#47)

Browse Source 
* Initial plan

* Implement drag-and-drop image insertion for both Milkdown and Monaco editors

Co-authored-by: rfc1437 <774975+rfc1437@users.noreply.github.com>

* Address code review: simplify Monaco type assertion, fix lint warning

Co-authored-by: rfc1437 <774975+rfc1437@users.noreply.github.com>

* feat: additional work on image drag-and-drop

* chore: updated documentation

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: rfc1437 <774975+rfc1437@users.noreply.github.com>
Co-authored-by: hugo <hugoms@me.com>
This commit is contained in:
Copilot
2026-03-12 21:04:45 +01:00
committed by GitHub
parent 16d5eb5a28
commit b57e50f4a9
20 changed files with 892 additions and 688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
tests/ipc/handlers.test.ts
View File

@@ -78,6 +78,7 @@ const mockMediaEngine = {
setProjectContext: vi.fn(),
setSearchLanguage: vi.fn(),
importMedia: vi.fn(),
importMediaBuffer: vi.fn(),
updateMedia: vi.fn(),
deleteMedia: vi.fn(),
getMedia: vi.fn(),
@@ -92,6 +93,7 @@ const mockMediaEngine = {
getThumbnailDataUrl: vi.fn(),
regenerateMissingThumbnails: vi.fn(),
getRelativePath: vi.fn(),
generateThumbnails: vi.fn().mockResolvedValue({}),
getMediaTranslations: vi.fn(),
};
@@ -341,11 +343,13 @@ vi.mock('fs/promises', () => ({
let mockOfflineMode = false;
const mockAutoTranslatePost = vi.fn().mockResolvedValue({ success: true });
const mockAutoTranslateMediaMetadata = vi.fn().mockResolvedValue({ success: true });
const mockAutoAnalyzeMediaImage = vi.fn().mockResolvedValue({ success: true, title: 'AI Title', alt: 'AI alt text', caption: 'AI caption' });
vi.mock('../../src/main/ipc/chatHandlers', () => ({
isOfflineModeActive: vi.fn(() => mockOfflineMode),
autoTranslatePost: (...args: any[]) => mockAutoTranslatePost(...args),
autoTranslateMediaMetadata: (...args: any[]) => mockAutoTranslateMediaMetadata(...args),
autoAnalyzeMediaImage: (...args: any[]) => mockAutoAnalyzeMediaImage(...args),
}));
// Helper to invoke a registered handler
@@ -1569,6 +1573,21 @@ describe('IPC Handlers', () => {
expect(mockMetaEngine.updateProjectMetadata).toHaveBeenCalledWith(updates);
expect(result).toEqual(updatedMetadata);
});
it('should pass blogLanguages through to meta engine', async () => {
const activeProject = createMockProject({ id: 'project-langs', dataPath: '/langs/data' });
mockProjectEngine.getActiveProject.mockResolvedValue(activeProject);
mockProjectEngine.getDataDir.mockReturnValue('/resolved/langs-data');
mockMetaEngine.updateProjectMetadata.mockResolvedValue(undefined);
const updatedMetadata = { name: 'Test', blogLanguages: ['en', 'de', 'fr'] };
mockMetaEngine.getProjectMetadata.mockResolvedValue(updatedMetadata);
const updates = { blogLanguages: ['en', 'de', 'fr'] };
const result = await invokeHandler('meta:updateProjectMetadata', updates);
expect(mockMetaEngine.updateProjectMetadata).toHaveBeenCalledWith(updates);
expect(result).toEqual(updatedMetadata);
});
});
});
@@ -1739,6 +1758,154 @@ describe('IPC Handlers', () => {
expect(result).toBe(true);
});
});
describe('postMedia:dropImport', () => {
it('should import media, run AI analysis, link to post, and return result', async () => {
const mockMedia = createMockMedia({ id: 'drop-media-1', filename: 'drop-media-1.jpg', mimeType: 'image/jpeg' });
mockMediaEngine.importMedia.mockResolvedValue(mockMedia);
mockMetaEngine.getProjectMetadata.mockResolvedValue({ name: 'Test', mainLanguage: 'en', blogLanguages: ['en', 'de'] });
mockPostMediaEngine.linkMediaToPost.mockResolvedValue(undefined);
mockMediaEngine.updateMedia.mockResolvedValue(mockMedia);
mockMediaEngine.getRelativePath.mockResolvedValue('media/2026/03/drop-media-1.jpg');
mockPostEngine.getPost.mockResolvedValue(createMockPost({ id: 'post-1', status: 'draft' }));
mockAutoAnalyzeMediaImage.mockResolvedValue({ success: true, title: 'AI Title', alt: 'AI alt', caption: 'AI caption' });
// Mock DB query for filePath used by generateThumbnails
mockDatabase.getLocal.mockReturnValue({
select: vi.fn(() => ({
from: vi.fn(() => ({
where: vi.fn(() => ({
get: vi.fn().mockResolvedValue({ filePath: '/mock/media/drop-media-1.jpg' }),
})),
})),
})),
});
const result = await invokeHandler('postMedia:dropImport', 'post-1', '/tmp/photo.jpg');
expect(mockMediaEngine.importMedia).toHaveBeenCalledWith('/tmp/photo.jpg', expect.objectContaining({ language: 'en' }));
expect(mockPostMediaEngine.linkMediaToPost).toHaveBeenCalledWith('post-1', 'drop-media-1');
expect(mockAutoAnalyzeMediaImage).toHaveBeenCalledWith('drop-media-1', 'en');
expect(mockMediaEngine.updateMedia).toHaveBeenCalledWith('drop-media-1', expect.objectContaining({
title: 'AI Title',
alt: 'AI alt',
caption: 'AI caption',
}));
expect(mockAutoTranslateMediaMetadata).toHaveBeenCalledWith('drop-media-1', 'de');
expect(result).toEqual({
mediaId: 'drop-media-1',
alt: 'AI alt',
relativePath: 'media/2026/03/drop-media-1.jpg',
});
});
it('should transition published post to draft', async () => {
const mockMedia = createMockMedia({ id: 'drop-media-2', filename: 'drop-media-2.png', mimeType: 'image/png' });
mockMediaEngine.importMedia.mockResolvedValue(mockMedia);
mockMetaEngine.getProjectMetadata.mockResolvedValue({ name: 'Test', mainLanguage: 'en' });
mockPostMediaEngine.linkMediaToPost.mockResolvedValue(undefined);
mockMediaEngine.updateMedia.mockResolvedValue(mockMedia);
mockMediaEngine.getRelativePath.mockResolvedValue('media/2026/03/drop-media-2.png');
const publishedPost = createMockPost({ id: 'post-2', status: 'published', content: 'Published content' });
mockPostEngine.getPost.mockResolvedValue(publishedPost);
mockPostEngine.updatePost.mockResolvedValue({ ...publishedPost, status: 'draft' });
mockAutoAnalyzeMediaImage.mockResolvedValue({ success: true, title: 'Title', alt: 'Alt', caption: 'Cap' });
mockDatabase.getLocal.mockReturnValue({
select: vi.fn(() => ({
from: vi.fn(() => ({
where: vi.fn(() => ({
get: vi.fn().mockResolvedValue({ filePath: '/mock/media/drop-media-2.png' }),
})),
})),
})),
});
await invokeHandler('postMedia:dropImport', 'post-2', '/tmp/image.png');
expect(mockPostEngine.updatePost).toHaveBeenCalledWith('post-2', expect.objectContaining({ status: 'draft' }));
});
it('should handle AI analysis failure gracefully', async () => {
const mockMedia = createMockMedia({ id: 'drop-media-3', filename: 'drop-media-3.jpg', mimeType: 'image/jpeg', alt: undefined });
mockMediaEngine.importMedia.mockResolvedValue(mockMedia);
mockMetaEngine.getProjectMetadata.mockResolvedValue({ name: 'Test', mainLanguage: 'en' });
mockPostMediaEngine.linkMediaToPost.mockResolvedValue(undefined);
mockMediaEngine.getRelativePath.mockResolvedValue('media/2026/03/drop-media-3.jpg');
mockPostEngine.getPost.mockResolvedValue(createMockPost({ id: 'post-3', status: 'draft' }));
mockAutoAnalyzeMediaImage.mockResolvedValue({ success: false, error: 'No API key' });
mockDatabase.getLocal.mockReturnValue({
select: vi.fn(() => ({
from: vi.fn(() => ({
where: vi.fn(() => ({
get: vi.fn().mockResolvedValue({ filePath: '/mock/media/drop-media-3.jpg' }),
})),
})),
})),
});
const result = await invokeHandler('postMedia:dropImport', 'post-3', '/tmp/photo.jpg');
// Should still return a result even without AI metadata
expect(result).toEqual({
mediaId: 'drop-media-3',
alt: '',
relativePath: 'media/2026/03/drop-media-3.jpg',
});
// Should NOT call updateMedia or translate when analysis fails
expect(mockMediaEngine.updateMedia).not.toHaveBeenCalled();
expect(mockAutoTranslateMediaMetadata).not.toHaveBeenCalled();
});
it('should reject non-image files before importing them into the media library', async () => {
await expect(invokeHandler('postMedia:dropImport', 'post-1', '/tmp/document.pdf')).rejects.toThrow(/image/i);
expect(mockMediaEngine.importMedia).not.toHaveBeenCalled();
expect(mockPostMediaEngine.linkMediaToPost).not.toHaveBeenCalled();
});
});
describe('postMedia:dropImportBuffer', () => {
it('should import screenshot-like image buffers without a native file path', async () => {
const mockMedia = createMockMedia({ id: 'drop-media-buffer-1', filename: 'drop-media-buffer-1.png', mimeType: 'image/png' });
mockMediaEngine.importMediaBuffer.mockResolvedValue(mockMedia);
mockMetaEngine.getProjectMetadata.mockResolvedValue({ name: 'Test', mainLanguage: 'en', blogLanguages: ['en', 'de'] });
mockPostMediaEngine.linkMediaToPost.mockResolvedValue(undefined);
mockMediaEngine.updateMedia.mockResolvedValue(mockMedia);
mockMediaEngine.getRelativePath.mockResolvedValue('media/2026/03/drop-media-buffer-1.png');
mockPostEngine.getPost.mockResolvedValue(createMockPost({ id: 'post-4', status: 'draft' }));
mockAutoAnalyzeMediaImage.mockResolvedValue({ success: true, title: 'AI Title', alt: 'AI alt', caption: 'AI caption' });
mockDatabase.getLocal.mockReturnValue({
select: vi.fn(() => ({
from: vi.fn(() => ({
where: vi.fn(() => ({
get: vi.fn().mockResolvedValue({ filePath: '/mock/media/drop-media-buffer-1.png' }),
})),
})),
})),
});
const result = await invokeHandler(
'postMedia:dropImportBuffer',
'post-4',
{ fileName: 'pasted-image.png', mimeType: 'image/png', bytes: new Uint8Array() },
);
expect(mockMediaEngine.importMediaBuffer).toHaveBeenCalledWith(
expect.any(Uint8Array),
'pasted-image.png',
expect.objectContaining({ language: 'en', mimeType: 'image/png' }),
);
expect(mockPostMediaEngine.linkMediaToPost).toHaveBeenCalledWith('post-4', 'drop-media-buffer-1');
expect(result).toEqual({
mediaId: 'drop-media-buffer-1',
alt: 'AI alt',
relativePath: 'media/2026/03/drop-media-buffer-1.png',
});
});
});
});
// ============ App Handlers ============