Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added paste support to mobiledoc when copying from lexical

Browse source 
refs https://github.com/TryGhost/Team/issues/3199

- when content is copied from the Lexical editor the converted mobiledoc post is placed in the clipboardData's `application/x-mobiledoc-editor` mimetype
- added custom paste handling to extract that data and place it into the html content in the same format as a typical mobiledoc copy/paste so that it can then be handled internally by mobiledoc
This commit is contained in:
Kevin Ansfield 2023-05-25 12:19:32 +01:00
parent 6f2424976c
commit 365a143c64
No known key found for this signature in database
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
View file

@ -192,7 +192,7 @@ export default class KoenigEditor extends Component {
cards,
unknownCardHandler: ({env}) => {
console.warn(`Unknown card encountered: ${env.name}`); //eslint-disable-line
env.remove();
}
}, options);
@ -992,6 +992,41 @@ export default class KoenigEditor extends Component {
return;
}
// if the event has a application/x-editor-mobiledoc mimetype, modify
// the text/html content to mimic the behaviour of a normal mobiledoc paste
if (event.clipboardData.getData('application/x-mobiledoc-editor')) {
// prevent mobiledoc's default paste event handler firing
event.preventDefault();
event.stopImmediatePropagation();
// extract mobiledoc and update html to match how mobiledoc handles it's own copy data
const mobiledoc = event.clipboardData.getData('application/x-mobiledoc-editor');
const html = event.clipboardData.getData('text/html');
const modifiedHtml = `<div data-mobiledoc='${mobiledoc}'>${html}</div>`;
const text = event.clipboardData.getData('text/plain');
// we can't modify the paste event itself so we trigger a mock
// paste event with our own data
const pasteEvent = {
type: 'paste',
preventDefault() { },
target: editor.element,
clipboardData: {
getData(type) {
if (type === 'text/plain') {
return text;
}
if (type === 'text/html') {
return modifiedHtml;
}
}
}
};
editor.triggerEvent(editor.element, 'paste', pasteEvent);
return;
}
// if we have files pasted, create a card for each and set the
// payload.files property which will cause the file to be auto-uploaded
if (canInsertCardsFromFiles(event.clipboardData.files)) {