From 7e4a277163acab73d1283895de8d979fe9d1a6ca Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 29 Nov 2021 13:13:07 +0000 Subject: [PATCH] Extracted `insertImageCards` function into utils file no issue - preparation for adding additional files->cards utility functions for video/audio/file cards --- .../addon/components/koenig-editor.js | 64 +------------------ .../addon/utils/insert-cards-from-files.js | 62 ++++++++++++++++++ 2 files changed, 63 insertions(+), 63 deletions(-) create mode 100644 ghost/admin/lib/koenig-editor/addon/utils/insert-cards-from-files.js diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js index ad289b173b..d826e5f520 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js @@ -29,6 +29,7 @@ import {getOwner} from '@ember/application'; import {getParent} from '../lib/dnd/utils'; import {utils as ghostHelperUtils} from '@tryghost/helpers'; import {guidFor} from '@ember/object/internals'; +import {insertImageCards} from '../utils/insert-cards-from-files'; import {run} from '@ember/runloop'; import {inject as service} from '@ember/service'; import {svgJar} from 'ghost-admin/helpers/svg-jar'; @@ -120,69 +121,6 @@ export function toggleSpecialFormatEditState(editor) { } } -// helper function to insert image cards at or after the current active section -// used when pasting or dropping image files -function insertImageCards(files, postEditor) { - let {builder, editor} = postEditor; - let collection = editor.post.sections; - let section = editor.activeSection; - - // when dropping an image on the editor before it's had focus there will be - // no active section so we insert the image at the end of the document - if (!section) { - section = editor.post.sections.tail; - - // create a blank paragraph at the end of the document if needed because - // we use `insertSectionBefore` and don't want the image to be added - // before the last card - if (!section.isMarkerable) { - let blank = builder.createMarkupSection(); - postEditor.insertSectionAtEnd(blank); - postEditor.setRange(blank.toRange()); - section = postEditor._range.head.section; - } - } - - // place the card after the active section - if (!section.isBlank && !section.isListItem && section.next) { - section = section.next; - } - - // list items cannot contain card sections so insert a blank paragraph after - // the whole list ready to be replaced by the image cards - if (section.isListItem) { - let list = section.parent; - let blank = builder.createMarkupSection(); - if (list.next) { - postEditor.insertSectionBefore(collection, blank, list.next); - } else { - postEditor.insertSectionAtEnd(blank); - } - postEditor.setRange(blank.toRange()); - section = postEditor._range.head.section; - } - - // insert an image card for each image, keep track of the last card to be - // inserted so that the cursor can be placed on it at the end - let lastImageSection; - files.forEach((file) => { - let payload = { - files: [file] - }; - lastImageSection = builder.createCardSection('image', payload); - postEditor.insertSectionBefore(collection, lastImageSection, section); - }); - - // remove the current section if it's blank - avoids unexpected blank - // paragraph after the insert is complete - if (section.isBlank) { - postEditor.removeSection(section); - } - - // place cursor on the last inserted image - postEditor.setRange(lastImageSection.tailPosition()); -} - export default Component.extend({ feature: service(), koenigDragDropHandler: service(), diff --git a/ghost/admin/lib/koenig-editor/addon/utils/insert-cards-from-files.js b/ghost/admin/lib/koenig-editor/addon/utils/insert-cards-from-files.js new file mode 100644 index 0000000000..bcee36fe05 --- /dev/null +++ b/ghost/admin/lib/koenig-editor/addon/utils/insert-cards-from-files.js @@ -0,0 +1,62 @@ +// helper function to insert image cards at or after the current active section +// used when pasting or dropping image files +export function insertImageCards(files, postEditor) { + let {builder, editor} = postEditor; + let collection = editor.post.sections; + let section = editor.activeSection; + + // when dropping an image on the editor before it's had focus there will be + // no active section so we insert the image at the end of the document + if (!section) { + section = editor.post.sections.tail; + + // create a blank paragraph at the end of the document if needed because + // we use `insertSectionBefore` and don't want the image to be added + // before the last card + if (!section.isMarkerable) { + let blank = builder.createMarkupSection(); + postEditor.insertSectionAtEnd(blank); + postEditor.setRange(blank.toRange()); + section = postEditor._range.head.section; + } + } + + // place the card after the active section + if (!section.isBlank && !section.isListItem && section.next) { + section = section.next; + } + + // list items cannot contain card sections so insert a blank paragraph after + // the whole list ready to be replaced by the image cards + if (section.isListItem) { + let list = section.parent; + let blank = builder.createMarkupSection(); + if (list.next) { + postEditor.insertSectionBefore(collection, blank, list.next); + } else { + postEditor.insertSectionAtEnd(blank); + } + postEditor.setRange(blank.toRange()); + section = postEditor._range.head.section; + } + + // insert an image card for each image, keep track of the last card to be + // inserted so that the cursor can be placed on it at the end + let lastImageSection; + files.forEach((file) => { + let payload = { + files: [file] + }; + lastImageSection = builder.createCardSection('image', payload); + postEditor.insertSectionBefore(collection, lastImageSection, section); + }); + + // remove the current section if it's blank - avoids unexpected blank + // paragraph after the insert is complete + if (section.isBlank) { + postEditor.removeSection(section); + } + + // place cursor on the last inserted image + postEditor.setRange(lastImageSection.tailPosition()); +}