mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
3fd32ce3cf
no issue We're spending a bit of time playing with an alternative to mobiledoc-kit to test it's feasibility as a base for future editor improvements. - add `editor.lexicalUrl` config that points at the unpkg release by default - set up a route on `/ghost/#/lexical-editor/post/` for the test playground which renders `<KoenigLexicialEditor>` as the editor - adds `<KoenigLexicalEditor>` component that lazy loads the external react component
152 lines
6.4 KiB
Handlebars
152 lines
6.4 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">
|
|
<Editor::PublishManagement
|
|
@post={{this.post}}
|
|
@hasUnsavedChanges={{this.hasDirtyAttributes}}
|
|
@beforePublish={{perform this.beforeSaveTask}}
|
|
@afterPublish={{this.afterSave}}
|
|
@saveTask={{this.saveTask}}
|
|
as |publishManagement|
|
|
>
|
|
<div class="flex items-center pe-auto h-100">
|
|
{{#if this.ui.isFullScreen}}
|
|
<LinkTo @route={{pluralize this.post.displayName }} class="gh-btn-editor gh-editor-back-button" data-test-link={{pluralize this.post.displayName}}>
|
|
<span>
|
|
{{svg-jar "arrow-left"}}
|
|
{{capitalize (pluralize this.post.displayName)}}
|
|
</span>
|
|
</LinkTo>
|
|
{{/if}}
|
|
<div class="gh-editor-post-status">
|
|
<span>
|
|
<GhEditorPostStatus
|
|
@post={{this.post}}
|
|
@hasDirtyAttributes={{this.hasDirtyAttributes}}
|
|
@isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
|
|
@openUpdateFlow={{publishManagement.openUpdateFlow}}
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="flex items-center pe-auto h-100">
|
|
{{#unless this.post.isNew}}
|
|
<Editor::PublishButtons @publishManagement={{publishManagement}} />
|
|
|
|
{{#unless this.showSettingsMenu}}
|
|
<div class="settings-menu-toggle-spacer"></div>
|
|
{{/unless}}
|
|
{{/unless}}
|
|
</section>
|
|
</Editor::PublishManagement>
|
|
</header>
|
|
|
|
{{!--
|
|
gh-koenig-editor acts as a wrapper around the title input and
|
|
koenig editor canvas to support Ghost-specific editor behaviour
|
|
--}}
|
|
<GhKoenigEditorLexical
|
|
@title={{readonly this.post.titleScratch}}
|
|
@titleAutofocus={{this.shouldFocusTitle}}
|
|
@titlePlaceholder={{concat (capitalize this.post.displayName) " title"}}
|
|
@onTitleChange={{this.updateTitleScratch}}
|
|
@onTitleBlur={{perform this.saveTitleTask}}
|
|
@body={{readonly this.post.scratch}}
|
|
@bodyPlaceholder={{concat "Begin writing your " this.post.displayName "..."}}
|
|
@onBodyChange={{this.updateScratch}}
|
|
@headerOffset={{editor.headerHeight}}
|
|
@scrollContainerSelector=".gh-koenig-editor"
|
|
@scrollOffsetBottomSelector=".gh-mobile-nav-bar"
|
|
@onEditorCreated={{this.setKoenigEditor}}
|
|
@onWordCountChange={{this.updateWordCount}}
|
|
@snippets={{this.snippets}}
|
|
@saveSnippet={{if this.canManageSnippets this.saveSnippet}}
|
|
@updateSnippet={{if this.canManageSnippets this.toggleUpdateSnippetModal}}
|
|
@deleteSnippet={{if this.canManageSnippets this.toggleDeleteSnippetModal}}
|
|
@featureImage={{this.post.featureImage}}
|
|
@featureImageAlt={{this.post.featureImageAlt}}
|
|
@featureImageCaption={{this.post.featureImageCaption}}
|
|
@setFeatureImage={{this.setFeatureImage}}
|
|
@setFeatureImageAlt={{this.setFeatureImageAlt}}
|
|
@setFeatureImageCaption={{this.setFeatureImageCaption}}
|
|
@clearFeatureImage={{this.clearFeatureImage}}
|
|
@cardOptions={{hash
|
|
post=this.post
|
|
}}
|
|
@postType={{this.post.displayName}}
|
|
/>
|
|
|
|
<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" rel="noopener noreferrer">{{svg-jar "help"}}</a>
|
|
</div>
|
|
|
|
</GhEditor>
|
|
|
|
{{#if this.showSettingsMenu}}
|
|
<GhPostSettingsMenu
|
|
@post={{this.post}}
|
|
@deletePost={{this.openDeletePostModal}}
|
|
@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.showReAuthenticateModal}}
|
|
<GhFullscreenModal @modal="re-authenticate"
|
|
@close={{this.toggleReAuthenticateModal}}
|
|
@modifier="action wide" />
|
|
{{/if}}
|
|
|
|
{{#if this.showUpgradeModal}}
|
|
<GhFullscreenModal
|
|
@modal="upgrade-host-limit"
|
|
@model={{hash
|
|
message=this.hostLimitError.context
|
|
details=this.hostLimitError.details
|
|
}}
|
|
@close={{this.closeUpgradeModal}}
|
|
@modifier="action wide"
|
|
/>
|
|
{{/if}}
|
|
|
|
{{#if this.snippetToUpdate}}
|
|
<GhFullscreenModal
|
|
@modal="update-snippet"
|
|
@model={{this.snippetToUpdate}}
|
|
@confirm={{this.updateSnippet}}
|
|
@close={{this.toggleUpdateSnippetModal}}
|
|
@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}}
|