Ghost/ghost/admin/app/templates/editor.hbs

{{#if post}}
    {{#gh-editor
        tagName="section"
        class="gh-editor gh-view"
        navIsClosed=navIsClosed
        as |editor|
    }}
        <header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if infoMessage "bg-white-90"}}">
            <div class="flex items-center br2 h9 pa2 pl4 pr4 pe-auto {{unless infoMessage "bg-white-90"}}">
                <div class="flex items-baseline">
                    <span class="fw4 darkgrey-l2">
                        {{gh-editor-post-status
                            post=post
                            isSaving=(or autosave.isRunning saveTasks.isRunning)
                        }}
                    </span>
                </div>
                {{#gh-scheduled-post-countdown post=post as |post countdown|}}
                    <time datetime="{{post.publishedAtUTC}}" class="green f8 nudge-bottom--1 ml3" data-test-schedule-countdown>
                        Post will go live {{countdown}}.
                    </time>
                {{/gh-scheduled-post-countdown}}
            </div>

            {{#if infoMessage}}
            <div class="gh-koenig-info miw88 flex flex-auto justify-center" style="pointer-events: auto">
                <div class="midgrey inline-flex tracked-1 center pa1 pl4 pr4 br3 justify-center items-start {{if (eq editor.headerClass "gh-editor-header-small") "bg-white-90"}}">
                    {{svg-jar "idea" class="w7 h7 fill-blue"}}
                    <p class="ma0 pa0 ml1 nudge-top--2">
                        {{infoMessage}}
                        <button type="button" class="blue fw5" {{action (mut infoMessage "")}}>Got it</button>
                    </p>
                </div>
            </div>
            {{/if}}

            <section class="view-actions br2 {{unless infoMessage "bg-white-90"}}" style="pointer-events: auto">
                {{#unless post.isNew}}
                    {{#if session.user.isContributor}}
                        {{gh-task-button "Save"
                            task=save
                            runningText="Saving"
                            class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
                            data-test-contributor-save=true}}
                    {{else}}
                        {{gh-publishmenu
                            post=post
                            postStatus=post.status
                            saveTask=save
                            setSaveType=(action "setSaveType")
                            onOpen=(action "cancelAutosave")}}
                    {{/if}}
                {{/unless}}

                <button type="button" class="post-settings" title="Settings" {{action "openSettingsMenu" target=ui}} data-test-psm-trigger>
                    {{svg-jar "settings"}}
                </button>
            </section>
        </header>

        {{#if useKoenig}}
            {{!--
                gh-koenig-editor acts as a wrapper around the title input and
                koenig editor canvas to support Ghost-specific editor behaviour
            --}}
            {{gh-koenig-editor
                title=(readonly post.titleScratch)
                titlePlaceholder="Story Title"
                onTitleChange=(action "updateTitleScratch")
                onTitleBlur=(action (perform saveTitle))
                body=(readonly post.scratch)
                bodyPlaceholder="Begin writing your story..."
                bodyAutofocus=shouldFocusEditor
                onBodyChange=(action "updateScratch")
                headerOffset=editor.headerHeight
                scrollContainerSelector=".gh-koenig-editor"
                scrollOffsetTopSelector=".gh-editor-header-small"
                scrollOffsetBottomSelector=".gh-mobile-nav-bar"
                onEditorCreated=(action "setKoenigEditor")
                onWordCountChange=(action "updateWordCount")
            }}

        {{else}}

            {{!--
                NOTE: title is part of the markdown editor container so that it has
                access to the markdown editor's "focus" action
            --}}
            {{#gh-markdown-editor
                tabindex="2"
                placeholder="Begin writing your story..."
                autofocus=shouldFocusEditor
                uploadedImageUrls=editor.uploadedImageUrls
                markdown=(readonly markdown)
                isFullScreen=editor.isFullScreen
                onChange=(action "updateMarkdown")
                onFullScreenToggle=(action editor.toggleFullScreen)
                onPreviewToggle=(action editor.togglePreview)
                onSplitScreenToggle=(action editor.toggleSplitScreen)
                onImageFilesSelected=(action editor.uploadImages)
                imageMimeTypes=editor.imageMimeTypes
                as |markdown|
            }}
                <div class="gh-markdown-editor-pane">
                    {{gh-textarea
                        class="gh-editor-title"
                        placeholder="Post Title"
                        tabindex="1"
                        autoExpand=".gh-markdown-editor-pane"
                        value=(readonly post.titleScratch)
                        input=(action "updateTitleScratch" value="target.value")
                        focus-out=(action (perform saveTitle))
                        keyEvents=(hash
                            Tab=(action markdown.focus 'bottom')
                            Enter=(action markdown.focus 'top')
                        )
                        data-test-editor-title-input=true
                    }}
                    {{markdown.editor}}
                </div>

                {{#if markdown.isSplitScreen}}
                    <div class="gh-markdown-editor-preview">
                        <h1 class="gh-markdown-editor-preview-title">{{post.titleScratch}}</h1>
                        <div class="gh-markdown-editor-preview-content"></div>
                    </div>
                {{/if}}

                {{gh-tour-item "using-the-editor"
                    target=".gh-editor-footer"
                    throbberAttachment="top left"
                    throbberOffset="0 20%"
                    popoverTriangleClass="bottom"
                }}
            {{/gh-markdown-editor}}

            {{!-- TODO: put tool/status bar in here so that scroll area can be fixed --}}
            <footer class="gh-editor-footer"></footer>

            {{!-- files are dragged over editor pane --}}
            {{#if editor.isDraggedOver}}
                <div class="drop-target gh-editor-drop-target">
                    <div class="drop-target-message">
                        <h3>Drop image(s) here to upload</h3>
                    </div>
                </div>
            {{/if}}

            {{!-- files have been dropped ready to be uploaded --}}
            {{#if editor.droppedFiles}}
                {{#gh-uploader
                    files=editor.droppedFiles
                    accept=editor.imageMimeTypes
                    extensions=editor.imageExtensions
                    onComplete=(action editor.uploadComplete)
                    onCancel=(action editor.uploadCancelled)
                    as |upload|
                }}
                    <div class="gh-editor-image-upload {{if upload.errors "-error"}}">
                        <div class="gh-editor-image-upload-content">
                            {{#if upload.errors}}
                                <h3>Upload failed</h3>

                                {{#each upload.errors as |error|}}
                                    <div class="failed">{{error.fileName}} - {{error.message}}</div>
                                {{/each}}

                                <button class="gh-btn gh-btn-grey gh-btn-icon" {{action upload.cancel}}>
                                    <span>{{svg-jar "close"}} Close</span>
                                </button>
                            {{else}}

                                <h3>Uploading {{pluralize upload.files.length "image"}}...</h3>
                                {{upload.progressBar}}
                            {{/if}}
                        </div>
                    </div>
                {{/gh-uploader}}
            {{/if}}

        {{/if}} {{!-- end Koenig conditional --}}

        {{#if wordCount}}
            <div class="absolute flex items-center br3 bg-white-90 {{if editor.headerClass "right-4 bottom-2 h7 pa1 pl2 pr2" "right-6 bottom-6 h9 pa1 pl4 pr4"}}">
                <span class="midgrey {{if editor.headerClass "f-supersmall" "f8"}}">
                    {{pluralize wordCount.wordCount "word"}}
                </span>
            </div>
        {{/if}}
    {{/gh-editor}}

    {{#if showDeletePostModal}}
        {{gh-fullscreen-modal "delete-post"
            model=(hash post=post onSuccess=(route-action 'redirectToContentScreen'))
            close=(action "toggleDeletePostModal")
            modifier="action wide"}}
    {{/if}}

    {{#if showLeaveEditorModal}}
        {{gh-fullscreen-modal "leave-editor"
            confirm=(action "leaveEditor")
            close=(action "toggleLeaveEditorModal")
            modifier="action wide"}}
    {{/if}}

    {{#if showReAuthenticateModal}}
        {{gh-fullscreen-modal "re-authenticate"
            close=(action "toggleReAuthenticateModal")
            modifier="action wide"}}
    {{/if}}

    {{#liquid-wormhole}}
        {{gh-post-settings-menu
            post=post
            showSettingsMenu=ui.showSettingsMenu
            deletePost=(action "toggleDeletePostModal")
            updateSlug=updateSlug
            savePost=savePost
        }}
    {{/liquid-wormhole}}
{{/if}}

{{outlet}}