2020-01-16 18:14:03 +03:00
|
|
|
<KoenigCard
|
2020-10-21 14:16:04 +03:00
|
|
|
@class={{concat "ba b--white relative kg-card-hover miw-100" (if this.isEditing " bw2 pt1 pb1 pl2 nl6 pr6 nr6")}}
|
2020-01-16 18:14:03 +03:00
|
|
|
@style={{this.cardStyle}}
|
|
|
|
@headerOffset={{this.headerOffset}}
|
|
|
|
@toolbar={{this.toolbar}}
|
|
|
|
@payload={{this.payload}}
|
|
|
|
@isSelected={{this.isSelected}}
|
|
|
|
@isEditing={{this.isEditing}}
|
|
|
|
@selectCard={{action this.selectCard}}
|
|
|
|
@deselectCard={{action this.deselectCard}}
|
|
|
|
@editCard={{action this.editCard}}
|
|
|
|
@saveCard={{action this.saveCard}}
|
2020-10-21 14:16:04 +03:00
|
|
|
@saveAsSnippet={{this.saveAsSnippet}}
|
2020-01-16 18:14:03 +03:00
|
|
|
@onEnterEdit={{action "enterEditMode"}}
|
|
|
|
@onLeaveEdit={{action "leaveEditMode"}}
|
|
|
|
@addParagraphAfterCard={{this.addParagraphAfterCard}}
|
|
|
|
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
|
|
|
|
@moveCursorToNextSection={{this.moveCursorToNextSection}}
|
|
|
|
@editor={{this.editor}}
|
2019-04-30 19:14:49 +03:00
|
|
|
as |card|
|
2020-01-16 18:14:03 +03:00
|
|
|
>
|
|
|
|
{{#if this.isEditing}}
|
|
|
|
<GhCmEditor @value={{this.payload.code}}
|
|
|
|
@class="koenig-card-code--editor koenig-card-html--editor"
|
|
|
|
@textareaClass="o-0"
|
|
|
|
@autofocus={{true}}
|
|
|
|
@lineWrapping={{true}}
|
|
|
|
@update={{action "updateCode"}}
|
|
|
|
@mode={{this.cmMode}}
|
|
|
|
/>
|
2019-04-30 17:46:29 +03:00
|
|
|
<input
|
|
|
|
type="text"
|
2020-01-16 18:14:03 +03:00
|
|
|
value={{readonly this.payload.language}}
|
|
|
|
onblur={{action (mut this.payload.language) value="target.value"}}
|
2019-04-30 17:46:29 +03:00
|
|
|
placeholder="Language..."
|
2019-04-30 18:03:06 +03:00
|
|
|
class="absolute w-20 pa1 ba b--lightgrey br2 f8 tracked-2 fw4 z-999 outline-0 anim-normal"
|
2020-01-16 18:14:03 +03:00
|
|
|
style={{this.languageInputStyle}}
|
2019-04-30 17:46:29 +03:00
|
|
|
/>
|
2018-05-15 17:26:34 +03:00
|
|
|
{{else}}
|
|
|
|
<div class="koenig-card-html-rendered">
|
2020-01-16 18:14:03 +03:00
|
|
|
<pre><code class="line-numbers {{if this.payload.language (concat "language-" this.payload.language)}}">{{this.escapedCode}}</code></pre>
|
2018-05-15 17:26:34 +03:00
|
|
|
</div>
|
2020-01-16 18:14:03 +03:00
|
|
|
{{#if this.payload.language}}
|
2019-04-30 17:46:29 +03:00
|
|
|
<div class="absolute top-2 right-2 flex justify-center items-center pa2">
|
2020-01-16 18:14:03 +03:00
|
|
|
<span class="db nudge-top--2 fw5 f8 midlightgrey">{{this.payload.language}}</span>
|
2019-04-30 17:46:29 +03:00
|
|
|
</div>
|
|
|
|
{{/if}}
|
2018-05-15 17:26:34 +03:00
|
|
|
<div class="koenig-card-click-overlay"></div>
|
|
|
|
{{/if}}
|
2019-04-30 19:14:49 +03:00
|
|
|
|
2020-01-16 18:14:03 +03:00
|
|
|
{{#if (and (not this.isEditing) (or this.isSelected (clean-basic-html this.payload.caption)))}}
|
|
|
|
<card.CaptionInput
|
|
|
|
@class="z-999"
|
|
|
|
@caption={{this.payload.caption}}
|
|
|
|
@update={{action "updateCaption"}}
|
|
|
|
@placeholder="Type caption for code block (optional)"
|
|
|
|
/>
|
2019-04-30 19:14:49 +03:00
|
|
|
{{/if}}
|
2020-01-16 18:14:03 +03:00
|
|
|
</KoenigCard>
|