Ghost/ghost/admin/app/templates/editor/edit.hbs
Kevin Ansfield 756b6627a9 Editor refactors (#679)
no issue

* split key commands and text expansions into separate files for easier file searches

* basic formatting, added a few comments

* move editor title input into addon
- the editor and title are now tightly integrated so that it's possible to use up/down cursor navigation so it makes more sense to keep them together
- start of a deeper component restructure so that we don't need to leak properties/actions to parent components

* first pass at refactor of gh-koenig and koenig-title-input
- remove need for editor reference to be held outside of the `gh-koenig` component by yielding it from the component so that the integrated title element can sit inside the container's scope
- refactor `gh-koenig` to more closely match the default ember mobiledoc addon
  - fixes runloop issues by starting/ending a manual runloop
- refactored the mutation observer and event handlers in `koenig-title-input` so that we're not doing unecessary work on every render/key press
- rename CSS classes to be more specific (these may still need more separation between `.gh` and `.kg` later)
  - `.editor-holder` to `.gh-koenig-container`
  - `.surface` to `.gh-koenig-surface`

* fix tests and start testing refactor

* move gh-koenig integration tests into addon, remove empty test files

* first-pass at component template cleanup

* first pass at koenig-toolbar-button refactor
2017-05-08 10:44:02 +01:00

92 lines
3.4 KiB
Handlebars

{{#gh-editor tagName="section" class="gh-view" navIsClosed=navIsClosed as |headerClass|}}
<header class="gh-editor-header {{headerClass}}">
<div class="gh-editor-status">
{{gh-editor-post-status
post=model
isSaving=autosave.isRunning
}}
</div>
{{#if scheduleCountdown}}
<time datetime="{{post.publishedAtUTC}}" class="gh-notification gh-notification-schedule" data-test-schedule-countdown>
Post will be published {{scheduleCountdown}}.
</time>
{{/if}}
<section class="view-actions">
{{gh-publishmenu
post=model
saveTask=save
setSaveType=(action "setSaveType")
onOpen=(action "cancelAutosave")}}
<button type="button" class="post-settings" title="Settings" {{action "openSettingsMenu"}} data-test-psm-trigger>
{{inline-svg "settings"}}
</button>
</section>
</header>
<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
--}}
{{#gh-koenig
mobiledoc=(unbound model.scratch)
onChange=(action "updateScratch")
onFirstChange=(action "autoSaveNew")
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 (mut model.titleScratch))
tabindex="1"
autofocus=shouldFocusTitle
focus-out="updateTitle"
update=(action (perform updateTitle))
editor=(readonly koenig.editor)
editorHasRendered=koenig.hasRendered
editorMenuIsOpen=koenig.isMenuOpen
}}
{{/gh-koenig}}
</div>
</div>
<div class="gh-editor-wordcount">{{pluralize wordcount 'word'}}.</div>
{{/gh-editor}}
{{#if showDeletePostModal}}
{{gh-fullscreen-modal "delete-post"
model=(hash post=model 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
model=model
showSettingsMenu=application.showSettingsMenu
closeNavMenu=(action "closeNavMenu")
closeMenus=(action "closeMenus")
deletePost=(action "toggleDeletePostModal")
}}
{{/liquid-wormhole}}