{% macro text_editor(field, label=True, autofocus=false) %}
	<div id="editor_{{ field.name}}" class="editor">
		<!-- Field label if needed -->
		{{ field.label if label }}

		<!-- Buttons for the text editor -->
		<div class="btn-group">
			<!-- Underline, Bold, Italic, Strikethrough -->
			<button type="button" onclick="editor_inline(event, 'underline')" title="__Souligné__">
				<svg viewBox="0 0 24 24">
					<path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_inline(event, 'bold')" title="**Gras**">
				<svg viewBox="0 0 24 24">
					<path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_inline(event, 'italic')" title="*Italique*">
				<svg viewBox="0 0 24 24">
					<path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_inline(event, 'strike')" title="~~Barré~~">
				<svg viewBox="0 0 24 24">
					<path d="M6.85,7.08C6.85,4.37,9.45,3,12.24,3c1.64,0,3,0.49,3.9,1.28c0.77,0.65,1.46,1.73,1.46,3.24h-3.01 c0-0.31-0.05-0.59-0.15-0.85c-0.29-0.86-1.2-1.28-2.25-1.28c-1.86,0-2.34,1.02-2.34,1.7c0,0.48,0.25,0.88,0.74,1.21 C10.97,8.55,11.36,8.78,12,9H7.39C7.18,8.66,6.85,8.11,6.85,7.08z M21,12v-2H3v2h9.62c1.15,0.45,1.96,0.75,1.96,1.97 c0,1-0.81,1.67-2.28,1.67c-1.54,0-2.93-0.54-2.93-2.51H6.4c0,0.55,0.08,1.13,0.24,1.58c0.81,2.29,3.29,3.3,5.67,3.3 c2.27,0,5.3-0.89,5.3-4.05c0-0.3-0.01-1.16-0.48-1.94H21V12z"/>
				</svg>
			</button>

			<span class="separator"></span>
			<!-- Headers/Titles -->
			<button type="button" onclick="editor_title(event, 1, 0)" title="# Titre 1">
				<svg viewBox="0 0 24 24">
					<path d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M14,18V16H16V6.31L13.5,7.75V5.44L16,4H18V16H20V18H14Z" />
				</svg>
			</button>
			<button type="button" onclick="editor_title(event, 2, 0)" title="## Titre 2">
				<svg viewBox="0 0 24 24">
					<path d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M21,18H15A2,2 0 0,1 13,16C13,15.47 13.2,15 13.54,14.64L18.41,9.41C18.78,9.05 19,8.55 19,8A2,2 0 0,0 17,6A2,2 0 0,0 15,8H13A4,4 0 0,1 17,4A4,4 0 0,1 21,8C21,9.1 20.55,10.1 19.83,10.83L15,16H21V18Z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_title(event, 3, 0)" title="### Titre 3">
				<svg viewBox="0 0 24 24">
					<path d="M3,4H5V10H9V4H11V18H9V12H5V18H3V4M15,4H19A2,2 0 0,1 21,6V16A2,2 0 0,1 19,18H15A2,2 0 0,1 13,16V15H15V16H19V12H15V10H19V6H15V7H13V6A2,2 0 0,1 15,4Z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_title(event, 0, -1)" title="Réduire le niveau de titre">
				<svg viewBox="0 0 24 24">
					<path d="M4,4H6V10H10V4H12V18H10V12H6V18H4V4M20.42,7.41L16.83,11L20.42,14.59L19,16L14,11L19,6L20.42,7.41Z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_title(event, 0, +1)" title="Augmenter le niveau de titre">
				<svg viewBox="0 0 24 24">
					<path d="M4,4H6V10H10V4H12V18H10V12H6V18H4V4M14.59,7.41L18.17,11L14.59,14.59L16,16L21,11L16,6L14.59,7.41Z"/>
				</svg>
			</button>

			<span class="separator"></span>
			<!-- Code, Citations -->
			<button type="button" onclick="editor_inline(event, 'inlinecode')" title="`code`">
				<svg viewBox="0 0 24 24">
					<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_quote(event)" title="> Citation">
				<svg viewBox="0 0 24 24">
					<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
				</svg>
			</button>

			<span class="separator"></span>

			<!-- Lists -->
			<button type="button" onclick="editor_bullet_list(event)" title="- Liste">
				<svg viewBox="0 0 24 24">
					<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_numbered_list(event)" title="1. Liste numéroté">
				<svg viewBox="0 0 24 24">
					<path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
				</svg>
			</button>

			<span class="separator"></span>
			<!-- Table, Separators -->
			<button type="button" onclick="editor_table(event)" title="Tableau">
				<svg viewBox="0 0 24 24">
					<path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/>
				</svg>
			</button>
			<button type="button" onclick="editor_separator(event)" title="Séparateur">
				<svg viewBox="0 0 24 24">
					<rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
				</svg>
			</button>
			<!-- Emojis -->
			<button type="button" onclick="editor_display_child_modal(event)" title="Emoji">
				<svg viewBox="0 0 24 24">
					<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
				</svg>

				<div class="modal" style=display:none>
					<emoji-picker data-source={{url_for('static', filename='scripts/emoji-picker-element/data.json')}}></emoji-picker>
					<a type="button" class="button bg-error editor-emoji-close-btn" onclick="editor_clear_modals(event)">Annuler</a>
				</div>
			</button>
			<!-- Links -->
			<button type="button" onclick="editor_display_link_modal(event)" title="Lien">
				<svg viewBox="0 0 24 24">
					<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
				</svg>
				<div class="modal" style="display: none">
					<div>
						<label for="link-desc-input">Description</label>
						<input type="text" class="link-desc-input" name="link-desc-input">
						<label for="link-link-input">Lien</label>
						<input type="url" class="link-link-input" name="link-link-input">
					</div>
					<div>
					<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'link-link-input', 'link-desc-input')">Valider</a>
					<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
					</div>
				</div>
			</button>
			<!-- Images -->
			<button type="button" onclick="editor_display_child_modal(event)" title="Image">
				<svg viewBox="0 0 24 24">
					<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
				</svg>
				<div class="modal" style="display: none">
					<div>
						<label for="media-alt-input">Texte alternatif (sera affiché en cas d'erreur de chargement)</label>
						<input type="text" class="media-alt-input" name="media-alt-input">
						<label for="media-link-input">Lien vers le média</label>
						<input type="url" class="media-link-input" name="media-link-input">
						<fieldset title="Optionel mais peut être important si le type de média n'est pas correctement détecté">
							<legend>
								Type de média
							</legend>
							<label for="media-type-video" title="Vidéo">Vidéo</label>
							<input type="radio" class="media-type media-type-video" name="media-type" value="video" title="Vidéo" />
							<label for="media-type-image" title="Image">Image</label>
							<input type="radio" class="media-type media-type-image" name="media-type" value="image" title="Image" />
						</fieldset>
					</div>
					<div>
					<a type="button" class="button bg-ok" onclick="editor_insert_link(event, 'media-link-input', 'media-alt-input', true)">Valider</a>
					<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
					</div>
				</div>
			</button>
			<!-- Upload -->
			<!-- Disabled because we have something similar under the form
			<button type="button" onclick="editor_btn_type()" title="Joindre un fichier">
				<svg viewBox="0 0 24 24">
					<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
				</svg>
				</button>
			-->
			<div class="filler"></div>
			<button class="manual_preview" type="button" onclick="manual_preview('{{ field.name }}')" style="display: none" title="Rafraichir la prévisualisation">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
					<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
					<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
				</svg>
			</button>
			<button class="toggle_preview" type="button" onclick="toggle_auto_preview()" title="Désactiver la prévisualisation">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
					<path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
					<path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
					<path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
				</svg>
			</button>
			<a href="#">Aide</a>
		</div>

		<!-- Field -->
		{{ field() }}

		<!-- Comment preview -->
		<div class="editor_content_preview"></div>

		<!-- Display errors -->
		{% for error in field.errors %}
			<span class="msgerror">{{ error }}</span>
		{% endfor %}
	</div>

	<script>
		window.addEventListener("load", function(){
			editor_setup("{{ field.name }}");
		});
	</script>
{% endmacro %}