Ghost/ghost/admin/app/templates/editor.hbs
Kevin Ansfield daa7f2e781 Added ability to update snippet contents
refs https://github.com/TryGhost/Team/issues/973

- added `@showCreate` option to `<GhInputWithSelect>` that enables the create option without having to pass a function in `@showCreateWhen`
- fixed autofocus not focusing input element in `<GhInputWithSelect>` when `autofocus="true"` isn't enough by itself
- updated `selectOrCreate` in `<GhInputWithSelect>` to trigger `onChange` if it's passed in rather than `onInput`
- swapped input in labs snippet input to `<GhInputWithSelect>`
- added actions for updating a snippet when an existing snippet is selected
- added action to editor control for saving an updated snippet
2021-08-23 16:00:01 +01:00

185 lines
7.9 KiB
Handlebars

{{#if this.post}}
<div class="flex flex-row">
<GhEditor
@tagName="section"
@class="gh-editor gh-view relative"
as |editor|
>
<header class="gh-editor-header br2 pe-none">
<div class="flex items-center pe-auto">
{{#if this.ui.isFullScreen}}
<div class="ml3 flex items-center">
<LinkTo @route={{pluralize this.post.displayName }} @classNames="gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
<span>
{{svg-jar "arrow-left"}}
{{capitalize (pluralize this.post.displayName)}}
</span>
</LinkTo>
</div>
{{/if}}
<div class="gh-editor-post-status">
<span>
<GhEditorPostStatus
@post={{this.post}}
@hasDirtyAttributes={{this.hasDirtyAttributes}}
@isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
/>
</span>
</div>
</div>
<section class="flex" style="pointer-events: auto">
{{#unless this.post.isNew}}
{{#if this.post.isDraft}}
<div>
<button type="button" class="gh-btn gh-editor-preview-trigger" {{on "click" (action "togglePostPreviewModal")}}>
<span>Preview</span>
</button>
</div>
{{/if}}
{{#if this.session.user.isContributor}}
<GhTaskButton @buttonText="Save"
@task={{this.save}}
@runningText="Saving"
@class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
data-test-contributor-save=true />
{{else}}
<GhPublishmenu
@post={{this.post}}
@postStatus={{this.post.status}}
@saveTask={{this.saveTask}}
@setSaveType={{action "setSaveType"}}
@onOpen={{action "cancelAutosave"}} />
{{/if}}
{{#unless this.showSettingsMenu}}
<div class="settings-menu-toggle-spacer"></div>
{{/unless}}
{{/unless}}
</section>
</header>
{{!--
gh-koenig-editor acts as a wrapper around the title input and
koenig editor canvas to support Ghost-specific editor behaviour
--}}
<GhKoenigEditor
@title={{readonly this.post.titleScratch}}
@titleAutofocus={{this.shouldFocusTitle}}
@titlePlaceholder={{concat (capitalize this.post.displayName) " title"}}
@onTitleChange={{action "updateTitleScratch"}}
@onTitleBlur={{action (perform this.saveTitleTask)}}
@body={{readonly this.post.scratch}}
@bodyPlaceholder={{concat "Begin writing your " this.post.displayName "..."}}
@onBodyChange={{action "updateScratch"}}
@headerOffset={{editor.headerHeight}}
@scrollContainerSelector=".gh-koenig-editor"
@scrollOffsetBottomSelector=".gh-mobile-nav-bar"
@onEditorCreated={{action "setKoenigEditor"}}
@onWordCountChange={{action "updateWordCount"}}
@snippets={{this.snippets}}
@saveSnippet={{if this.canManageSnippets this.saveSnippet}}
@updateSnippet={{if this.canManageSnippets this.updateSnippet}}
@deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
@featureImage={{this.post.featureImage}}
@featureImageAlt={{this.post.featureImageAlt}}
@featureImageCaption={{this.post.featureImageCaption}}
@setFeatureImage={{action "setFeatureImage"}}
@setFeatureImageAlt={{action "setFeatureImageAlt"}}
@setFeatureImageCaption={{action "setFeatureImageCaption"}}
@clearFeatureImage={{action "clearFeatureImage"}}
/>
<div class="gh-editor-wordcount-container">
<div class="gh-editor-wordcount">
{{gh-pluralize this.wordCount.wordCount "word"}}
</div>
<a href="https://ghost.org/help/using-the-editor/" class="flex" target="_blank">{{svg-jar "help"}}</a>
</div>
</GhEditor>
{{#if this.showSettingsMenu}}
<GhPostSettingsMenu
@post={{this.post}}
@toggleEmailPreviewModal={{action "toggleEmailPreviewModal"}}
@deletePost={{action "toggleDeletePostModal"}}
@updateSlugTask={{this.updateSlugTask}}
@savePostTask={{this.savePostTask}}
/>
{{/if}}
</div>
<button type="button" class="settings-menu-toggle gh-btn gh-btn-editor gh-btn-icon icon-only gh-btn-action-icon" title="Settings" {{on "click" this.toggleSettingsMenu}} data-test-psm-trigger>
{{#if this.showSettingsMenu}}
<span class="settings-menu-open">{{svg-jar "sidemenu-open"}}</span>
{{else}}
<span>{{svg-jar "sidemenu"}}</span>
{{/if}}
</button>
{{#if this.showDeletePostModal}}
<GhFullscreenModal @modal="delete-post"
@model={{hash post=this.post onSuccess=(route-action 'redirectToContentScreen' this.post.displayName)}}
@close={{action "toggleDeletePostModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showLeaveEditorModal}}
<GhFullscreenModal @modal="leave-editor"
@confirm={{action "leaveEditor"}}
@close={{action "toggleLeaveEditorModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showReAuthenticateModal}}
<GhFullscreenModal @modal="re-authenticate"
@close={{action "toggleReAuthenticateModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showPostPreviewModal}}
<GhFullscreenModal @modal="post-preview"
@model={{hash
post=this.post
saveTask=this.saveTask
setEditorSaveType=(action "setSaveType")
memberCount=this.memberCount
}}
@close={{action "togglePostPreviewModal"}}
@modifier="full-overlay email-preview" />
{{/if}}
{{#if this.showEmailPreviewModal}}
<GhFullscreenModal @modal="post-email-preview"
@model={{this.post}}
@close={{action "toggleEmailPreviewModal"}}
@modifier="full-overlay email-preview" />
{{/if}}
{{#if this.showUpgradeModal}}
<GhFullscreenModal
@modal="upgrade-host-limit"
@model={{hash
message=hostLimitError.context
details=hostLimitError.details
}}
@close={{action "closeUpgradeModal"}}
@modifier="action wide"
/>
{{/if}}
{{#if this.snippetToDelete}}
<GhFullscreenModal
@modal="delete-snippet"
@model={{this.snippetToDelete}}
@confirm={{this.deleteSnippet}}
@close={{this.toggleDeleteSnippetModal}}
@modifier="action wide"
/>
{{/if}}
{{/if}}
{{outlet}}