Fix image paste handling in WYSIWYG editor #21

Merged

Copilot merged 4 commits from copilot/fix-copy-paste-images into main

2025-11-19 16:31:32 -06:00

Copilot commented

2025-11-19 16:03:37 -06:00

(Migrated from github.com)

Image upload via toolbar button works, but copy-paste does not insert images into the editor.

Changes

Event interception (frontend/src/components/WysiwygEditor.jsx)

Use capture phase ({ capture: true }) to intercept paste events before Quill's clipboard module
Add e.stopPropagation() to prevent event bubbling to Quill's handlers

Type checking

Replace indexOf('image') !== -1 with startsWith('image/') for precise MIME type matching

Selection handling

Remove redundant getSelection() fallback (same result as getSelection(true))
Fallback to index 0 when no selection exists

const handlePaste = (e) => {
  const items = e.clipboardData?.items;
  if (!items) return;

  for (let i = 0; i < items.length; i++) {
    if (items[i].type.startsWith('image/')) {
      e.preventDefault();
      e.stopPropagation();  // Key addition
      
      const file = items[i].getAsFile();
      if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
          const range = quill.getSelection(true);
          const index = range ? range.index : 0;
          quill.insertEmbed(index, 'image', event.target.result);
          quill.setSelection(index + 1);
        };
        reader.readAsDataURL(file);
      }
      break;
    }
  }
};

editorContainer.addEventListener('paste', handlePaste, { capture: true });

Images are inserted as base64 data URLs at cursor position or document start.

Original prompt

This section details on the original issue you should resolve

<issue_title>Copy and Pasting Images into the WYSIWYG editor does not work</issue_title>
<issue_description>I can upload images but cannot copy/paste into the editor</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes SluberskiHomeLab/noodlenook#20

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Image upload via toolbar button works, but copy-paste does not insert images into the editor. ### Changes **Event interception** (`frontend/src/components/WysiwygEditor.jsx`) - Use capture phase (`{ capture: true }`) to intercept paste events before Quill's clipboard module - Add `e.stopPropagation()` to prevent event bubbling to Quill's handlers **Type checking** - Replace `indexOf('image') !== -1` with `startsWith('image/')` for precise MIME type matching **Selection handling** - Remove redundant `getSelection()` fallback (same result as `getSelection(true)`) - Fallback to index 0 when no selection exists ```javascript const handlePaste = (e) => { const items = e.clipboardData?.items; if (!items) return; for (let i = 0; i < items.length; i++) { if (items[i].type.startsWith('image/')) { e.preventDefault(); e.stopPropagation(); // Key addition const file = items[i].getAsFile(); if (file) { const reader = new FileReader(); reader.onload = (event) => { const range = quill.getSelection(true); const index = range ? range.index : 0; quill.insertEmbed(index, 'image', event.target.result); quill.setSelection(index + 1); }; reader.readAsDataURL(file); } break; } } }; editorContainer.addEventListener('paste', handlePaste, { capture: true }); ``` Images are inserted as base64 data URLs at cursor position or document start.  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>Copy and Pasting Images into the WYSIWYG editor does not work</issue_title> > <issue_description>I can upload images but cannot copy/paste into the editor</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> - Fixes SluberskiHomeLab/noodlenook#20  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/SluberskiHomeLab/noodlenook/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

SluberskiHomeLab (Migrated from github.com) approved these changes

2025-11-19 16:31:25 -06:00