Canvas clipboard

[rashidkpc]

Need a clipboard for copying and pasting

• Elements
• Pages

[elasticmachine]

Pinging @elastic/kibana-canvas

[monfera]

(it got long; to give it away, it seems like Version D would be a Pareto-friendly path)

Version A - naive in-app copy/paste

The shortest path for copy/paste would be to add a new Redux state property, underneath transient - on copy, it'd persist clipboard: {type: 'element', workbookId, pageId, elementId}, and on paste, it'd do what current clone does.

This would provide users with the ability to copy and paste elements on the same page, or within a workbook, or even among workbooks.

A similar thing could be done for pages, putting {type: 'page', workbookId, pageId} underneath transient/clipboard

Limitations:

1. lack of persistence: it'd not work if the Redux store gets replaced, eg. due to reloading the page
2. paste by reference: if the object changed between a copy and a paste, then it'd paste the new thing, which would be cool but not what users likely expect; also, if the user deleted the source in the meantime, it'd not work
3. app-specific copy/paste: the Canvas element that was copied last time would still be remembered the next time the user pasted, even if the user has since copied something totally unrelated in the meantime, eg. an image from the internet or text from a local text file - in the future we would probably want these native copy/pastes work, eg. make an image element on pasting an image, or make a Markdown element on pasting text

Version B - Better in-app copy/paste

• persistence: resolve Limitation 1 via making the clipboard: {type: 'element', workbookId, pageId, elementId} tuple persistent, ie. even a page reload or a server restart would preserve the clipboard; the clipboard may even belong to the user, rather than the user session (could of course be erased for more native-like behavior)
• paste by value: resolve Limitation 2 by remembering the object details, rather than just an ID
• native copy/paste: resolve Limitation 3 by monitoring whether the last copy was an in-Canvas copy, or an OS-native copy, and paste accordingly (it doesn't look possible though, given that there appears to be no way of knowing when an object was put onto the OS clipboard, not even in experimental APIs)

Version C - Use of the OS clipboard

Resolve all the Version A limitations by using the OS clipboard, by using document.execCommand. This will intuitively clear the clipboard on machine reboot, the user logging on another device or copying unrelated content, while preserving clipboard content as the user expects.

Tradeoffs:

1. a lack of the clipboard-write browser permission would make even intra-page element copy/paste not work - not sure how often it's blocked, maybe in some tightly controlled corporate environments this permission is missing? @alexfrancoeur have we any data or anecdotes on this?
2. browser behavior might be uneven but it may not lead to a practical limitation
3. serialization of content is needed - while it's not difficult in theory, as our Redux store contents are serializable (no functions or non-plain objects; no object references; no circularity), it has interesting corners:

• a user may attempt copy/paste between two Kibana versions, using somewhat different state structures to serialize, or a user may "stash" elements in a text file, attempting to paste them back next year, and a version upgrade morphed the state shape (we can solve it by also putting the version number on the clipboard fragment)
• for the general case, eg. intra-workbook or intra-session paste, there would be a need to carry a lot of baggage - an image element copy would naturally need to "carry" the image itself
• therefore, upon paste, there is a need for diffing: pasting within the same workbook, or simply, encountering the same image in the target workbook already should avoid us duplicating the image in the asset store
• clipboard size limits and performance: at the time of copy, we don't know the target for paste, ie. it has to be assumed that any and all assets must be available; it could make users run into slow copy(?) or clipboard size limitations even though they may simply copy/paste intra-workbook - therefore, some fallback mechanism is needed to detect limit breaches; whether partial clipboard copy is still made; put large assets toward the end of the clipboard fragment; recognizing that paste is done on incomplete clipboard content and make it work at least within workbook
• copy should work such that pasting into another Kibana Canvas should replicate the full structure of the element / page (unless with a modifier key, pasting just the image?); while pasting into an image editor program, it should paste the image; pasting into a text editor, it should paste text content (if it was a Markup element); at the extreme, pasting into a presentation editor, it should (?) paste the graphical structures in terms of groups and layers, and pasting into a notebook or computation medium should (?) turn it into an embeddable, functioning thing, at least within Kibana (eg. pasting onto Dashboard)
• [maybe more challenges?]

Version D - Gradual implementation

This can be interesting if OS clipboard copy/paste is disabled for an important segment of corporate users, or if we want an "inner copy/paste track" for more quickly addressing in-workbook copy/paste, which is likely the most common application.

• Phase 1: implement naive in-app copy/paste (Version A, then later, iterate toward Version B)
• Phase 2a: add a parallel track for OS clipboard use (Version C)
• Phase 2b: add other copy-paste opportunities arising from the OS clipboard, eg. paste text or images directly into Canvas
• Phase 3: increase copy/paste sophistication by addressing non-Canvas sources/targets, eg. Dashboard, Google Slide, PowerPoint, Adobe Illustrator, Photoshop...

@rashidkpc @alexfrancoeur which direction should we assume for the estimation and which phase(s) should we cover for this specific target? Any other alternatives?

[clintandrewhall]

(follow)

[rashidkpc]

I'd do version D, roadmap Phase 1. I don't consider phase 2 to be particularly important. Consider storing the clipboard in localstorage instead of redux though, that way you can paste between tabs in the browser

[cqliu1]

Additional features to consider: #25890 (comment)

• copy/paste assets along with elements between workpads
• paste elements outside of Kibana
• persisting groups pasted (related to [Canvas][Layout Engine] Persistent grouping #25854?)

[timductive]

Closing, cloning pages was added.