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 {{editor.headerClass}}">
            <div class="gh-editor-status">
                {{gh-editor-post-status
                    post=post
                    isSaving=(or autosave.isRunning saveTasks.isRunning)
                }}
            </div>
            {{#gh-scheduled-post-countdown post=post as |post countdown|}}
                <time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule" data-test-schedule-countdown>
                    Post will be published {{countdown}}.
                </time>
            {{/gh-scheduled-post-countdown}}
            <section class="view-actions">
                {{#unless post.isNew}}
                    {{gh-publishmenu
                        post=post
                        saveTask=save
                        setSaveType=(action "setSaveType")
                        onOpen=(action "cancelAutosave")}}
                {{/unless}}

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

        {{#if useKoenig}}
            <div class="gh-editor-container needsclick">
                <div class="gh-editor-inner">
                    {{!--
                        NOTE: the mobiledoc property is unbound so that the setting the
                        serialized version onChange doesn't cause a deserialization and
                        re-render of the editor on every key press / editor change

                        TODO: note above is no longer correct, changed to readonly to
                        fix a persistent editor content bug that occurred due to the
                        editor not being re-rendered on edit->new transition.

                        Needs perf investigation!
                    --}}
                    {{#gh-koenig
                        mobiledoc=(readonly model.scratch)
                        onChange=(action "updateScratch")
                        autofocus=shouldFocusEditor
                        tabindex="2"
                        titleSelector="#kg-title-input"
                        containerSelector=".gh-editor-container"
                        wordcountDidChange=(action "setWordcount")
                        as |koenig|
                    }}
                        {{koenig-title-input
                            id="koenig-title-input"
                            val=(readonly model.titleScratch)
                            onChange=(action "updateTitleScratch")
                            tabindex="1"
                            autofocus=shouldFocusTitle
                            focusOut=(action (perform saveTitle))
                            editor=(readonly koenig.editor)
                            editorHasRendered=koenig.hasRendered
                            editorMenuIsOpen=koenig.isMenuOpen
                        }}
                    {{/gh-koenig}}
                </div>
            </div>
            <div class="gh-editor-wordcount">{{pluralize wordcount 'word'}}.</div>

        {{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
                mobiledoc=(readonly post.scratch)
                isFullScreen=editor.isFullScreen
                onChange=(action "updateScratch")
                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 post.titleScratch
                        class="gh-editor-title"
                        placeholder="Post Title"
                        tabindex="1"
                        autoExpand=".gh-markdown-editor-pane"
                        update=(action "updateTitleScratch")
                        focusOut=(action (perform saveTitle))
                        keyEvents=(hash
                            9=(action markdown.focus 'bottom')
                            13=(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>{{inline-svg "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 --}}
    {{/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}}