This package has been deprecated

    Author message:

    please use ep_upload_images

    ep_copy_paste_images

    0.0.28 • Public • Published

    Paste images from clipboard into Etherpad

    Screenshot

    Features

    • Drag and drop from file system
    • Paste from Clipboard
    • Drag and drop images on pad
    • Copy and paste images on pad
    • Cut and paste images on pad
    • Resize image (not optimized for delivery)
    • Touch / Mobile devices supported
    • Can drag/drop onto both blank lines and pre-populated lines (automatically generates new lines)
    • Timeslider support

    Warning

    This plugin is WIP and isn't stable

    How do I wrap content around an image and vice versa?

    You don't. It's as simple as that. Etherpad is a line based editor meaning having lines wrap around other lines will be a mess. We're not willing to accommodate this as your users will end up making messy horrible documents and you will feel bad.

    TODO:

    • [x] Find someone to sponsor development

    • [x] Make it work on develop branch (see https://github.com/ether/etherpad-lite/pull/2497/files)

    • [x] Support image resize

    • [x] Support image drag and drop

    • [x] Fix IE being able to resize image IE problems.... Y'know... -Should be fixed now, needs testing

    • [x] Fix mobile issue where mouseout never fires so resize is always shown -Should be a relatively easy fix but will require handling aceEditEvent events

    • [x] Show span as active on click of "control" element

    • [x] Fix issue when a user selects content then hits paste (it currently throws up an error and breaks editing) -Creating a new line "might" fix this but other than that I don't have any other ideas other than inserting a special character

    • [x] Support image drag and drop to already populated lines (it currently does not allow the image to be uploaded to this point, imho it should create a new line with the image on) -Hopefully creating a "new line" event should fix this

    • [x] Fix issue with large images being distorted

    • [x] BUG: ALL: Fix copy/paste within editor creating 2 copies Currently if you copy/paste an image inside the pad <-- Seems to create n copies based on number of line breaks that have been copied IE if
      is copied it will create 2 copies. The fix here is to use cc.doAttrib probably assuming that applies attrib on a line and not a selection

    • [x] BUG: ALL: Fix copy/paste creating two copies when copying from web browser

    • [x] BUG: ALL: Fix issue where dragging and dropping in same location nukes the imag (easy to fix in all browsers except firefox, see below)

    • [x] BUG: FIREFOX: Fix issue with Firefox not being able to drag an image UP towards the top of the pad due to race condition (firefox thinks start and end position is always the same)

    • [x] BUG: IE/CHROME: Drag and Drop from File system wont import image (Chrome bug) http://stackoverflow.com/questions/23548745/drag-and-drop-image-file-into-contenteditable-div-works-fine-in-ff-fails-miser

    • [x] BUG: IE: Unable to drag an drop contens in a pad

    • [x] BUG: FIREFOX/IE: Copy/Pasting text and images only pastes text

    • [ ] BUG: ALL: Image size is lost on cut/copy/paste & drag/drop

    • [ ] MINOR BUG: ALL: Drag and Drop onto line ONE LINE ABOVE WITH CONTENT doesn't remove old content -- Because the DOM is rewritten the line number is changed.. I'm a bit unsure how to fix this

    • [ ] MINOR BUG: ALL: Under certain (I don't know what yet) conditions an image can get distorted (x/y) -- I need steps to replicate really

    #V2:

    #VNever:

    MANUAL TESTS:

    On each release of this plugin due to browser restrictions we have to do a lot of manual tests.

    Devices to test on

    1. Mobile Phone (small / touch screen)
    2. IE9/10/11
    3. Firefox
    4. Chrome

    Different methods for each test below

    1. Drag and drop image using mouse
    2. Copy image to clipboard from a native application (such as gimp)
    3. Copy image to clipboard from this web browser (such as firefox)
    4. Copy image to clipboard from the pad

    Drag and Drop (using mouse)

    1. Drag and Drop onto a blank line
    2. Drag and drop onto content with a line
    3. Original copy of image is removed
    4. New image is visible
    5. Image size is maintained

    Copy / Paste (using control c / v AND right click copy/paste AND mobile copy/paste)

    1. Paste onto a blank line
    2. Paste onto a line populated with content (IE Type Hello world first)
    3. Original copy of image is kept
    4. New image is visible
    5. Image size is maintained
    6. No text is lost

    Cut / Paste (using control x / v AND right click copy/paste AND mobile copy/paste)

    1. Paste onto a blank line
    2. Paste onto a line populated with content (IE Type Hello world first)
    3. Original copy of image is removed
    4. New image is visible
    5. Image size is maintained
    6. No text is lost

    Image appearance

    1. Image is never distorted
    2. Image has correct color balance

    Alignment

    1. Image can be aligned using ep_align

    Resize

    1. Can resize the image small/medium/large

    Browser Resize

    1. Can still nagivate the page.
    2. Images can be moved / selected / resized

    Keyboard

    1. Caret 1. Caret can be moved between images 1. Caret can still be moved before and after the image using arrow keys and page up/down
    2. Backspace deletes an image when caret is placed after the image
    3. Delete deletes an image when caret is placed before the image

    License

    Apache 2

    Donations

    Etherpad Foundation

    Keywords

    none

    Install

    npm i ep_copy_paste_images

    DownloadsWeekly Downloads

    12

    Version

    0.0.28

    License

    none

    Unpacked Size

    53.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar