hmn/src/templates/src/editor.html

{{ template "base.html" . }}

{{ define "extrahead" }}
    {{ template "markdown_previews.html" . }}

    <script src="{{ static "js/base64.js" }}"></script>
    <script src="{{ static "js/markdown_upload.js" }}"></script>

    <style>
        #editor {
            resize: vertical;
        }

        #editor.drop {
            box-shadow: inset 0px 0px 5px yellow;
        }
    </style>
{{ end }}

{{ define "content" }}
<div class="content-block ph3 ph0-ns">
    {{ if not .CanEditPostTitle }}
        <h2>{{ .PostTitle }}</h2>
    {{ end }}
    <div class="flex flex-column flex-row-ns">
        <form id="form" action="{{ .SubmitUrl }}" method="post" class="flex-fair-ns overflow-hidden">
            {{ csrftoken .Session }}

            {{ if .CanEditPostTitle }}
                <input id="title" class="b w-100 mb1" name="title" type="text" placeholder="Post title..." value="{{ .PostTitle }}" />
            {{ end }}
            {{/* TODO: Reintroduce the toolbar in a way that makes sense for Markdown */}}
            {{/*
            <div class="toolbar" id="toolbar">
                <input type="button" id="bold" value="B" />
                <input type="button" id="italic" value="I" /> 
                <input type="button" id="underline" value="U" /> 
                <input type="button" id="monospace" value="monospace" /> 
                <input type="button" id="url" value="url" /> 
                <input type="button" id="img" value="img" /> 
                <input type="button" id="code" value="code" /> 
                <input type="button" id="quote_simple" value="quote (anon)" /> 
                <input type="button" id="quote_member" value="quote (member)" /> 
                <input type="button" id="spoiler" value="spoiler" /> 
                <input type="button" id="lalign" value="Left" /> 
                <input type="button" id="calign" value="Center" /> 
                <input type="button" id="ralign" value="Right" />
                <input type="button" id="ulist" value="ul" />
                <input type="button" id="olist" value="ol" />
                <input type="button" id="litem" value="li" />
                <input type="button" id="youtube" value="youtube" />
            </div>
            */}}
            <textarea id="editor" class="w-100 h6 minh-6 pa2 mono lh-copy" name="body">{{ .EditInitialContents }}</textarea>

            <div class="flex justify-end items-center mt2">
                <div class="upload_bar flex-grow-1">
                    <div class="instructions">
                        Upload files by dragging & dropping, pasting, or <label class="pointer link" for="file_input">selecting</label> them.
                    </div>
                    <div class="progress flex">
                        <div class="progress_text mr3"></div>
                        <div class="progress_bar flex-grow-1 flex-shrink-1 pa1"><div class=""></div></div>
                    </div>
                </div>
                <input type="submit" class="button ml2 flex-grow-0 flex-shrink-0" name="submit" value="{{ .SubmitLabel }}" />
            </div>

            {{ if .IsEditing }}
                <span class="editreason">
                    <label for="editreason">Edit reason:</label>
                    <input name="editreason" maxlength="255" type="text" id="editreason" />
                </span>
            {{ end }}

            {{ with .PostReplyingTo }}
                <h4 class="mt3">The post you're replying to:</h4>
                <div class="mh-6 overflow-y-auto">
                    {{ template "forum_post_standalone.html" . }}
                </div>
            {{ end }}

            {{ if .ShowEduOptions }}
                {{/* Hope you have a .Article field! */}}
                <div class="bg--dim br3 pa3 mt3">
                    <h4>Education Options</h4>
                    <div class="mb2">
                        <label for="slug">Slug:</label>
                        <input name="slug" maxlength="255" type="text" id="slug" required value="{{ .Article.Slug }}" />
                    </div>
                    <div class="mb2">
                        <label for="type">Type:</label>
                        <select name="type" id="type">
                            <option value="article"  {{ if eq .Article.Type "article"  }}selected{{ end }}>Article</option>
                            <option value="glossary" {{ if eq .Article.Type "glossary" }}selected{{ end }}>Glossary Term</option>
                        </select>
                    </div>
                    <div class="mb2">
                        <label for="description">Description:</label>
                        <div>
                            <textarea name="description" id="slug" required>{{ .Article.Description }}</textarea>
                        </div>
                    </div>
                    <div class="mb2">
                        <label for="published">Published:</label>
                        <input name="published" id="published" type="checkbox" {{ if .Article.Published }}checked{{ end }}>
                    </div>
                </div>
            {{ end }}
        </form>
        <div id="preview-container" class="post post-preview mathjax flex-fair-ns overflow-auto mv3 mv0-ns ml3-ns pa3 br3 bg--dim {{ .PreviewClass }}">
            <div id="preview" class="post-content"></div>
        </div>
        <input type="file" multiple name="file_input" id="file_input" class="dn" />{{/* NOTE(asaf): Placing this outside the form to avoid submitting it to the server by accident */}}
    </div>
</div>

<script>
    const maxFileSize = {{ .MaxFileSize }};
    const uploadUrl = {{ .UploadUrl }};

    const form = document.querySelector('#form');
    const titleField = document.querySelector('#title'); // may be undefined, be careful!
    const textField = document.querySelector('#editor');
    const preview = document.querySelector('#preview');

    // Save content on change, clear on submit
    const clearFuncs = [];
    if (titleField) {
        const { clear: clearTitle } = autosaveContent({
            inputEl: titleField,
            storageKey: `post-title/${window.location.host}${window.location.pathname}`,
        });
        clearFuncs.push(clearTitle);
    }
    const { clear: clearContent } = autosaveContent({
        inputEl: textField,
        storageKey: `post-content/${window.location.host}${window.location.pathname}`,
    });
    clearFuncs.push(clearContent);
    form.addEventListener('submit', e => {
        for (const clear of clearFuncs) {
            clear();
        }
    });

    // Do live Markdown previews
    let doMarkdown = initLiveMarkdown({ inputEl: textField, previewEl: preview });

    /*
    / Asset upload
    */ 
    setupMarkdownUpload(
        document.querySelectorAll("#form input[type=submit]"),
        document.querySelector('#file_input'),
        document.querySelector('.upload_bar'),
        textField,
        doMarkdown,
        maxFileSize,
        uploadUrl
    );
</script>
{{ end }}