Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-header.hbs

<KoenigCard
    @env={{@env}}
    @class="flex flex-column mih10 miw-100 relative koenig-breakout-full"
    @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-header-card kg-size-{{@payload.size}} kg-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
            <KoenigBasicHtmlInput
                @html={{@payload.header}}
                @placeholder="Enter heading text"
                @class="w-100 fw4 bn bg-transparent kg-header-card-header"
                @name="header"
                @defaultTag="h2"
                @onChange={{action "setHeader"}}
                @didCreateEditor={{action "registerHeaderEditor"}}
            />
            <KoenigBasicHtmlInput
                @html={{@payload.subheader}}
                @placeholder="Enter subheading text"
                @class="w-100 fw4 bg-transparent kg-header-card-subheader"
                @name="subheader"
                @defaultTag="h3"
                @onChange={{action "setSubheader"}}
                @didCreateEditor={{action "registerSubheaderEditor"}}
                @allowBr={{true}}
            />
            {{#if @payload.buttonEnabled}}
                <a href="javascript:void(0)" class="gh-btn kg-header-card-button" disabled={{not @payload.buttonText}}>
                    <span>
                        {{or @payload.buttonText "Add button text"}}
                    </span>
                </a>
            {{/if}}
        </div>

        <KoenigSettingsPanel>
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                <div class="kg-settings-panel-control-label">Size</div>
                <div class="kg-settings-panel-control-input">
                    <div class="gh-btn-group icons">
                        <button type="button" title="Small" class="gh-btn gh-btn-icon {{if (eq @payload.size "small") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "small")}}><span>S</span></button>
                        <button type="button" title="Medium" class="gh-btn gh-btn-icon {{if (eq @payload.size "medium") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "medium")}}><span>M</span></button>
                        <button type="button" title="Large" class="gh-btn gh-btn-icon {{if (eq @payload.size "large") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "large")}}><span>L</span></button>
                    </div>
                </div>
            </div>
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal-top">
                <div class="kg-settings-panel-control-label">Style</div>
                <div class="kg-settings-panel-control-input">
                    <div class="gh-btn-group kg-settings-headerstyle-btn-group">
                        <button type="button" class="gh-btn kg-headerstyle-btn-dark {{if (eq @payload.style "dark") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "dark")}}></button>
                        <button type="button" class="gh-btn kg-headerstyle-btn-light {{if (eq @payload.style "light") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "light")}}></button>
                        <button type="button" class="gh-btn kg-headerstyle-btn-accent {{if (eq @payload.style "accent") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "accent")}}></button>
                        <button type="button" class="gh-btn kg-headerstyle-btn-image {{if (eq @payload.style "image") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "image")}}>{{svg-jar "plus"}}</button>
                    </div>
                </div>
            </div>
            <div>
                <GhUploader
                        @uploadUrl="/images/upload/"
                        @accept={{this.imageMimeTypes}}
                        @extensions={{this.imageExtensions}}
                        @onComplete={{this.backgroundImageUploadCompleted}}
                        as |uploader|
                    >
                {{#if (eq @payload.style "image")}}
                    <div class="relative w-100">
                        {{#if uploader.isUploading}}
                            <div class="kg-upload-thumbnail-xl">
                                {{uploader.progressBar}}
                            </div>
                        {{else if @payload.backgroundImageSrc}}
                            <div class="kg-thumbnail-xl-container">
                                <img class="kg-thumbnail-xl" src={{@payload.backgroundImageSrc}} {{on "click" uploader.triggerFileDialog}}>
                                <div class="image-overlay">
                                    <div class="flex flex-row-reverse">
                                        <button class="bg-white-90 br3 pe-auto" type="button" {{on "click" this.deleteBackgroundImage}}>
                                            {{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {{else}}
                            <button type="button" class="gh-btn kg-upload-thumbnail-xl with-label" {{on "click" uploader.triggerFileDialog}}>
                                {{svg-jar "upload-fill"}}
                                <span>Click to add background image</span>
                            </button>
                        {{/if}}
                    </div>
                {{/if}}
                    <div style="display:none">
                        <GhFileInput
                            @multiple={{false}}
                            @action={{uploader.setFiles}}
                            @accept={{this.imageMimeTypes}}
                            @onInsert={{uploader.registerFileInput}}
                        />
                    </div>
                </GhUploader>
            </div>
            <hr class="kg-settings-panel-divider">
            <div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
                <div class="kg-settings-panel-control-label">Button</div>
                <div class="kg-settings-panel-control-input">
                    <div class="for-switch x-small">
                        <label class="switch" for="has-button">
                            <input
                                type="checkbox"
                                checked={{@payload.buttonEnabled}}
                                id="has-button"
                                {{on "click" this.toggleButton}}
                            >
                            <span class="input-toggle-component mt1"></span>
                        </label>
                    </div>
                </div>
            </div>
            {{#if @payload.buttonEnabled}}
            <div class="kg-settings-panel-control">
                <label class="kg-settings-panel-control-label" for="header-button-input">Text</label>
                <div class="kg-settings-panel-control-input">
                    <input
                        type="text"
                        class="gh-input"
                        id="header-button-input"
                        name="header-button"
                        value={{@payload.buttonText}}
                        placeholder="Add button text"
                        {{on "input" this.setButtonText}}
                        {{on-key "Enter" (fn this.focusElement "#header-button-input")}}
                    >
                </div>
            </div>
            <div class="kg-settings-panel-control">
                <label class="kg-settings-panel-control-label" for="header-url-input">URL</label>
                <div class="kg-settings-panel-control-input">
                    <input
                        type="text"
                        class="gh-input"
                        id="header-url-input"
                        name="header-url"
                        value={{@payload.buttonUrl}}
                        placeholder="Add URL"
                        {{on "input" this.setButtonUrl}}
                        {{on-key "Enter" (fn this.focusElement "#header-url-input")}}
                    >
                </div>
            </div>
            {{/if}}
        </KoenigSettingsPanel>

    {{else}}

        <div class="kg-header-card kg-size-{{@payload.size}} kg-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
            <h2 class="kg-header-card-header">{{{@payload.header}}}</h2>
            {{#if this.hasSubheader}}
                <h3 class="kg-header-card-subheader">{{{@payload.subheader}}}</h3>
            {{/if}}
            {{#if @payload.buttonEnabled}}
                <a href="javascript:void(0)" class="gh-btn kg-header-card-button {{if this.isButtonIncomplete "o-50"}}" disabled={{not @payload.buttonText}}>
                    <span>
                        {{or @payload.buttonText "Add button text"}}
                    </span>
                </a>
            {{/if}}
        </div>
    {{/if}}
</KoenigCard>