cpolis/web/templates/editor.html

{{define "page-content"}}
<h2>Editor</h2>

<form class="flex flex-col gap-4" id="edit-area" hx-encoding="multipart/form-data">
    <div class="flex flex-col gap-y-1">
        {{template "article-banner-template" .}}

        <div class="grid grid-cols-2 gap-4 items-center">
            <div class="flex flex-col">
                <h3>Titel</h3>
                <input name="article-title" type="text" value="{{.Article.Title}}" />
            </div>

            <div class="flex">
                <label class="btn text-center" for="article-banner">Titelbild</label>
                <input class="hidden" id="article-banner" name="article-banner" type="file" required
                    hx-post="/article/upload-banner" hx-swap="outerHTML" hx-target="#article-banner-container" />
            </div>
        </div>
    </div>

    <div class="flex flex-col gap-1">
        <h3>Beschreibung</h3>
        <textarea name="article-summary">{{.Article.Summary}}</textarea>
    </div>

    <div class="flex flex-col gap-1">
        <h3>Artikel</h3>
        <div id="editor"></div>
        <input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
    </div>

    <div>
        <h3>Tags</h3>
        <div class="flex flex-wrap gap-4">
            <div>
                <input id="issue" name="issue" type="checkbox" {{if .Article.IsInIssue}}checked{{end}} />
                <label for="issue">Orient Express</label>
            </div>

            {{range .Tags}}
            <div>
                <input id="tag-{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" {{if index $.Selected
                    .ID}}checked{{end}} />
                <label for="tag-{{.Name}}">{{.Name}}</label>
            </div>
            {{end}}
        </div>
    </div>

    <div>
        <h3>Beteiligte</h3>
        {{range .ArticleUsers}}
        <div class="border border-slate-200 dark:border-slate-800 flex gap-4 px-2 py-1 rounded-md">
            <span>{{.FirstName}} {{.LastName}}: </span>

            <div>
                <input id="{{.ID}}-author" name="user-{{.ID}}" type="radio" value="author" {{if eq .ArticleRole
                    1}}checked{{end}} />
                <label for="{{.ID}}-author">Autor</label>
            </div>

            <div>
                <input id="{{.ID}}-contributor" name="user-{{.ID}}" type="radio" value="contributor" {{if eq
                    .ArticleRole 2}}checked{{end}} />
                <label for="{{.ID}}-contributor">Mitwirkender</label>
            </div>

            <div>
                <input id="{{.ID}}-none" name="user-{{.ID}}" type="radio" {{if eq .ArticleRole 0}}checked{{end}} />
                <label for="{{.ID}}-none">Unbeteiligt</label>
            </div>
        </div>
        {{end}}
    </div>

    <div>
        <input id="creator" name="creator" type="checkbox" value="author" {{if eq .Creator.ArticleRole
            1}}checked{{end}} />
        <label for="creator">Ich bin Autor.</label>
    </div>

    <div class="btn-area">
        <input class="action-btn" type="submit" value="Senden" hx-post="/article/{{.Action}}"
            hx-target="#page-content" />
        <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
    </div>
</form>

<script>
    var editor = new toastui.Editor({
        el: document.querySelector('#editor'),
        height: '500px',
        hooks: {
            addImageBlobHook: (blob, callback) => {
                const formData = new FormData();
                formData.append('article-image', blob);

                fetch('/article/upload-image', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        callback(data, 'Alternativtext');
                    })
                    .catch(error => {
                        htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
                        console.error('Upload fehlgeschlagen:', error);
                    });
            }
        },
        initialEditType: 'wysiwyg',
        initialValue: '{{.Content}}',
        language: 'de',
        theme: localStorage.theme,
        usageStatistics: 'false'
    });

    editor.on('change', () => {
        document.getElementById('article-content').value = editor.getMarkdown();
    });
</script>
{{end}}

{{define "article-banner-template"}}
<div id="article-banner-container">
    <img src="/image/serve/{{.Image}}" alt="" />
    <input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.Image}}" />
</div>
{{end}}