mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
d1e1c8b11c
no issue - we had some code in `<KoenigEditor>` that was automatically saving a card when exiting edit mode based on some flawed logic, this meant we were making multiple editor updates simultaneously resulting in usage+change of the upstream `post` model within the same render loop (add paragraph code deselected the card, starts adding new paragraph, the deselection triggered the exit-edit mode which then caused a simultaneous post update) - passed card env through to `<KoenigEditor>` so that it can compare current payload state against the "saved" payload state to determine if it should save when leaving edit mode - renamed `_textReplacementEditor` to `_calloutTextEditor` to better match it's usage - removed unnecessary `onNewline` handling, it wasn't being called because we overrode `ENTER` key
86 lines
3.7 KiB
Handlebars
86 lines
3.7 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@class={{concat (kg-style "container-card") " kg-card-callout-container"}}
|
|
@headerOffset={{@headerOffset}}
|
|
@toolbar={{this.toolbar}}
|
|
@payload={{@payload}}
|
|
@isSelected={{@isSelected}}
|
|
@isEditing={{@isEditing}}
|
|
@selectCard={{@selectCard}}
|
|
@deselectCard={{@deselectCard}}
|
|
@editCard={{@editCard}}
|
|
@hasEditMode={{true}}
|
|
@saveCard={{@saveCard}}
|
|
@saveAsSnippet={{@saveAsSnippet}}
|
|
@onLeaveEdit={{this.leaveEditMode}}
|
|
@addParagraphAfterCard={{@addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{@moveCursorToNextSection}}
|
|
@editor={{@editor}}
|
|
{{did-insert this.registerElement}}
|
|
as |card|
|
|
>
|
|
{{#if @isEditing}}
|
|
|
|
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
|
|
{{#if @payload.calloutEmoji}}
|
|
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}" {{on "click" this.changeEmoji}}>{{@payload.calloutEmoji}}</div>
|
|
{{/if}}
|
|
<KoenigBasicHtmlInput
|
|
@html={{@payload.calloutText}}
|
|
@placeholder="Callout text..."
|
|
@autofocus={{true}}
|
|
@class="w-100 bn bg-transparent"
|
|
@onChange={{this.setCalloutText}}
|
|
@onFocus={{fn (mut this.isFocused) true}}
|
|
@onBlur={{fn (mut this.isFocused) false}}
|
|
@didCreateEditor={{this.registerEditor}}
|
|
/>
|
|
<KoenigSettingsPanel>
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Emoji</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="for-switch x-small">
|
|
<label class="switch" for="has-emoji">
|
|
<input
|
|
type="checkbox"
|
|
checked={{@payload.calloutEmoji}}
|
|
id="has-emoji"
|
|
{{on "click" this.toggleEmoji}}
|
|
data-test-has-emoji
|
|
>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kg-settings-panel-control">
|
|
<div class="kg-settings-panel-control-label">Background color</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="kg-callout-palette">
|
|
{{#each this.backgroundColors as |option| }}
|
|
<span class="kg-callout-palette-swatch {{if (eq this.selectedBackgroundColor option) "selected-swatch"}}" title={{option.name}} {{on "click" (fn this.setBackgroundColor option)}}>
|
|
<div class="kg-callout-palette-swatch-{{option.color}} w-100 h-100 br2"></div>
|
|
</span>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</KoenigSettingsPanel>
|
|
</div>
|
|
|
|
{{else}}
|
|
|
|
<div class="kg-card kg-card-callout kg-card-callout-{{@payload.backgroundColor}}">
|
|
{{#if @payload.calloutEmoji}}
|
|
<div class="kg-callout-emoji {{if this.isPickerVisible "kg-emoji-picker-active"}}">{{@payload.calloutEmoji}}</div>
|
|
{{/if}}
|
|
<div><p>{{{@payload.calloutText}}}</p></div>
|
|
</div>
|
|
<div class="koenig-card-click-overlay"></div>
|
|
|
|
{{/if}}
|
|
</KoenigCard>
|