wiki: Add a little JS editor for highlighting text

[ipfire.org.git] / src / templates / wiki / edit.html

{% extends "base.html" %}

{% block title %}{% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}{% end block %}

{% block sidebar %}
	{% set help = backend.wiki.get_page("/wiki/edit") %}

	{% if help %}
		{% raw help.html %}
	{% end %}
{% end block %}

{% block main %}
	<div class="card mb-4">
		<div class="card-body">
			<h4 class="card-title">
				{% if page %}{{ _("Edit %s") % page.title }}{% else %}{{ _("Create A New Page") }}{% end %}
			</h4>

			<form action="" method="POST">
				{% raw xsrf_form_html() %}

				<div class="form-group editor">
					<div class="btn-toolbar mb-3" role="toolbar">
						<div class="btn-group btn-group-sm" role="group">
							<button type="button" class="btn btn-secondary" id="bold">
								<i class="fas fa-bold"></i>
							</button>
							<button type="button" class="btn btn-secondary" id="italic">
								<i class="fas fa-italic"></i>
							</button>
						</div>
					</div>

					<textarea class="form-control" rows="16" name="content" id="content" placeholder="{{ _("Text") }}"
						>{% if page and page.markdown %}{{ page.markdown }}{% end %}</textarea>
				</div>

				<div class="form-group row">
					<label class="col-sm-4 col-form-label">{{ _("What has changed?") }}</label>
					<div class="col-sm-8">
						<input type="text" class="form-control" name="changes" required>
					</div>
				</div>

				{% if page and not page.is_watched_by(current_user) %}
					<div class="form-group form-check">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" class="custom-control-input" name="watch" id="watch" checked>
							<label class="custom-control-label" for="watch">{{ _("Watch this page") }}</label>
						</div>

						<small class="form-text text-muted">
							{{ _("Get notified when this page is changed") }}
						</small>
					</div>
				{% end %}

				<button type="submit" class="btn btn-primary btn-block">
					{% if page %}{{ _("Save Page") }}{% else %}{{ _("Create Page") }}{% end %}
				</button>
			</form>
		</div>
	</div>

	<div id="preview" class="fade show">
		<div class="d-flex align-items-center mb-4">
			<h4 class="mb-0">{{ _("Preview") }}</h4>
			<div id="spinner" class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
		</div>

		<div class="card">
			<div class="card-body mb-0">
				<div id="preview-content" class="wiki-content mb-0">
					{{ _("Loading...") }}
				</div>
			</div>
		</div>
	</div>
{% end block %}

{% block javascript %}
	{% import os.path %}

	<script src="{{ static_url("js/editor.js") }}"></script>
	<script type="text/javascript">
		var update = null;

		$(document).ready(function() {
			var preview = $("#preview");
			preview.hide();

			$("#content").on("keyup", function(e) {
				if (update)
					clearTimeout(update);

				var content = $(this).val();

				// If the field is all empty, we will hide it
				if (content)
					preview.show();
				else
					preview.hide();

				// Go into update mode
				preview.addClass("updating");

				update = setTimeout(function() {
					var c = $("#preview-content");

					$.post("{{ os.path.join(path, "_render") }}", { content : content },
						function(data) {
							c.html(data);

							// Update finished
							preview.removeClass("updating");
						}
					);
				}, 750);
			});
		});
	</script>
{% end block %}