mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 10:21:36 +03:00
0f517ad4e6
refs https://github.com/TryGhost/Team/issues/1225 - added `scrollToCard` action to `koenig-editor` and passed it through to all card components curried to already include the card as an argument - action selects the card which places the cursor on it, then triggers our existing cursor scroll-into-view behaviour with an option to allow scrolling a card into view - updated our cursor scroll-into-view behaviour so if the cursor is large (eg, when it covers a card's height) we make sure the top of the cursor is kept in view rather than the bottom - ensures that on small-height screens, opening the gif selector doesn't result in it's search bar being scrolled off screen
129 lines
4.4 KiB
Handlebars
129 lines
4.4 KiB
Handlebars
<div class="koenig-editor__editor-wrapper" data-kg="editor-wrapper">
|
|
<div class="koenig-editor__editor" data-kg="editor"></div>
|
|
</div>
|
|
|
|
{{!-- pop-up markup toolbar is shown when there's a selection --}}
|
|
<KoenigToolbar
|
|
@editor={{this.editor}}
|
|
@editorRange={{this.selectedRange}}
|
|
@activeMarkupTagNames={{this.activeMarkupTagNames}}
|
|
@activeSectionTagNames={{this.activeSectionTagNames}}
|
|
@toggleMarkup={{action "toggleMarkup"}}
|
|
@toggleSection={{action "toggleSection"}}
|
|
@toggleHeaderSection={{action "toggleHeaderSection"}}
|
|
@editLink={{action "editLink"}}
|
|
@addSnippet={{this.addSnippetIfPossible}}
|
|
/>
|
|
|
|
{{!-- pop-up link hover toolbar --}}
|
|
<KoenigLinkToolbar
|
|
@editor={{this.editor}}
|
|
@container={{this.element}}
|
|
@linkRange={{this.linkRange}}
|
|
@selectedRange={{this.selectedRange}}
|
|
@editLink={{action "editLink"}}
|
|
/>
|
|
|
|
{{!-- pop-up link editing toolbar --}}
|
|
{{#if this.linkRange}}
|
|
<KoenigLinkInput
|
|
@editor={{this.editor}}
|
|
@linkRange={{this.linkRange}}
|
|
@linkRect={{this.linkRect}}
|
|
@selectedRange={{this.selectedRange}}
|
|
@cancel={{action "cancelEditLink"}}
|
|
/>
|
|
{{/if}}
|
|
|
|
{{!-- pop-up snippet editing toolbar --}}
|
|
{{#if this.snippetRange}}
|
|
<KoenigSnippetInput
|
|
@editor={{this.editor}}
|
|
@snippetRange={{this.snippetRange}}
|
|
@snippetRect={{this.snippetRect}}
|
|
@snippets={{@snippets}}
|
|
@save={{@saveSnippet}}
|
|
@update={{@updateSnippet}}
|
|
@cancel={{this.cancelAddSnippet}}
|
|
/>
|
|
{{/if}}
|
|
|
|
{{!-- pop-up media selector --}}
|
|
{{#if this.activeSelectorComponent}}
|
|
<KoenigMediaSelector
|
|
@editor={{this.editor}}
|
|
@editorRange={{this.selectedRange}}
|
|
@replaceWithCardSection={{action "replaceWithCardSection"}}
|
|
@scrollContainerSelector={{this.scrollContainerSelector}}
|
|
@close={{action "closeSelectorComponent"}}
|
|
as |selector|
|
|
>
|
|
{{component this.activeSelectorComponent selector=selector}}
|
|
</KoenigMediaSelector>
|
|
{{/if}}
|
|
|
|
{{!-- (+) icon and pop-up menu --}}
|
|
<KoenigPlusMenu
|
|
@editor={{this.editor}}
|
|
@editorRange={{this.selectedRange}}
|
|
@snippets={{this.snippets}}
|
|
@deleteSnippet={{this.deleteSnippet}}
|
|
@replaceWithCardSection={{action "replaceWithCardSection"}}
|
|
@replaceWithPost={{action "replaceWithPost"}}
|
|
@openSelectorComponent={{action "openSelectorComponent"}}
|
|
@postType={{@postType}}
|
|
/>
|
|
|
|
{{!-- slash menu popup --}}
|
|
<KoenigSlashMenu
|
|
@editor={{this.editor}}
|
|
@editorRange={{this.selectedRange}}
|
|
@snippets={{this.snippets}}
|
|
@deleteSnippet={{this.deleteSnippet}}
|
|
@replaceWithCardSection={{action "replaceWithCardSection"}}
|
|
@replaceWithPost={{action "replaceWithPost"}}
|
|
@openSelectorComponent={{action "openSelectorComponent"}}
|
|
@postType={{@postType}}
|
|
/>
|
|
|
|
{{!-- all component cards wormholed into the editor canvas --}}
|
|
{{#each this.componentCards as |card|}}
|
|
{{#in-element card.destinationElement}}
|
|
{{component card.componentName
|
|
editor=this.editor
|
|
postModel=card.postModel
|
|
cardName=card.cardName
|
|
payload=card.payload
|
|
env=card.env
|
|
options=card.options
|
|
headerOffset=this.headerOffset
|
|
saveCard=(action card.env.save)
|
|
cancelCard=(action card.env.cancel)
|
|
removeCard=(action card.env.remove)
|
|
scrollToCard=(action "scrollToCard" card)
|
|
isSelected=card.isSelected
|
|
isEditing=card.isEditing
|
|
selectCard=(action "selectCard" card)
|
|
deselectCard=(action "deselectCard" card)
|
|
editCard=(action "editCard" card)
|
|
deleteCard=(action "deleteCard" card)
|
|
saveAsSnippet=(if this.saveCardAsSnippetIfPossible (fn this.saveCardAsSnippetIfPossible card))
|
|
moveCursorToPrevSection=(action "moveCursorToPrevSection" card)
|
|
moveCursorToNextSection=(action "moveCursorToNextSection" card)
|
|
addParagraphAfterCard=(action "addParagraphAfterCard" card)
|
|
registerComponent=(action (mut card.component))
|
|
}}
|
|
{{/in-element}}
|
|
{{/each}}
|
|
|
|
{{!-- all component atoms wormholed into the editor canvas --}}
|
|
{{#each this.componentAtoms as |atom|}}
|
|
{{#in-element atom.destinationElement}}
|
|
{{component atom.componentName
|
|
editor=this.editor
|
|
atom=atom
|
|
saveAtom=(fn atom.env.save atom.env.value atom.env.payload)
|
|
registerComponent=(action (mut atom.component))
|
|
}}
|
|
{{/in-element}}
|
|
{{/each}} |