Ghost/ghost/admin/app/templates/lexical-editor.hbs
Kevin Ansfield 3e8a0c5028
🎨 Added word count to beta editor
closes https://github.com/TryGhost/Team/issues/3242

- the beta editor now provides `<WordCountPlugin>` for tracking word count so we can add the UI for it back
2023-06-14 17:56:03 +01:00

145 lines
6.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">
<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}}
{{#if this.fromAnalytics }}
<LinkTo @route="posts.analytics" @model={{this.post}} class="gh-btn-editor gh-editor-back-button">
<span>
{{svg-jar "arrow-left"}}
Analytics
</span>
</LinkTo>
{{else}}
<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}}
{{/if}}
{{#if (or (not this.ui.isFullScreen) (not this.fromAnalytics) this.post.didEmailFail) }}
<div class="gh-editor-post-status">
<span>
<GhEditorPostStatus
@post={{this.post}}
@publishManagement={{publishManagement}}
@hasDirtyAttributes={{this.hasDirtyAttributes}}
@isSaving={{or this.autosaveTask.isRunning this.saveTasks.isRunning}}
@openUpdateFlow={{publishManagement.openUpdateFlow}}
/>
</span>
</div>
{{/if}}
</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.lexicalScratch}}
@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}}
@updateWordCount={{this.updateWordCount}}
@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
snippets=this.snippets
deleteSnippet=(if this.canManageSnippets this.confirmDeleteSnippet)
createSnippet=(if this.canManageSnippets this.createSnippet)
}}
@postType={{this.post.displayName}}
@registerAPI={{this.registerEditorAPI}}
/>
{{#if (feature 'lexicalEditor')}}
<FeedbackLexical::EditorDropdown @post={{this.post}} />
{{/if}}
<div class="gh-editor-wordcount-container">
<div class="gh-editor-wordcount">
{{gh-pluralize this.wordCount "word"}}
</div>
{{!-- <a href="https://github.com/TryGhost/Koenig/tree/main/packages/koenig-lexical" target="_blank" rel="noopener noreferrer" class="gh-lexical-indicator">Lexical</a> --}}
<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}}
@editorAPI={{this.editorAPI}}
@toggleSettingsMenu={{this.toggleSettingsMenu}}
/>
{{/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.showPostHistory}}
<GhFullscreenModal
@modal="post-history"
@model={{this.post}}
@close={{this.closePostHistory}}
@modifier="total-overlay post-history" />
{{/if}}
{{/if}}
{{outlet}}