devs/PCv5
devs
/
PCv5
7
10
Fork 4
Code Issues 25 Pull Requests Releases Wiki Activity

Remplacer simpleMDE par un éditeur maison #110

Merged
Darks merged 34 commits from new_editor into dev 2022-12-18 00:08:52 +01:00
Conversation 12 Commits 34 Files Changed 26 +53 -36
2 changed files with 53 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5eaf1cc207 - Show all commits

60
app/static/scripts/editor.js
View File

@ -96,42 +96,42 @@ function editor_act_on_lines(event, fn)
ta.selectionEnd = end;
}
/*
* Create a modal used to get input from the user when generating some M⬇
*/
function editor_create_modal(event, content = document.createElement("div"), fn = {}) {
// The anchor is two levels above because the event.srcElement/event.target
// are the path inside the button.
const anchor = event.currentTarget;
function editor_clear_modals(event, close = true) {
// Stop the propagation of the event
event.stopPropagation()
const modal = document.createElement("div");
const contentDiv = document.createElement("div");
const btnDiv = document.createElement("div");
const validateBtn = document.createElement("button");
const cancelBtn = document.createElement("button");
// Reset all modal inputs
document.getElementById('img-alt-input').value = '';
document.getElementById('img-link-input').value = '';
document.getElementById('link-desc-input').value = '';
document.getElementById('link-desc-input').value = '';
modal.classList.add("modal");
// Close all modal if requested
if (!close) { return }
const modals = document.getElementsByClassName('modal');
for (const i of modals) {i.style.display = 'none'};
}
validateBtn.onclick = function() {
modal.remove()
function editor_insert_link(event, link, text = "", image = false)
{
const [editor, button, ta] = editor_event_source(event);
ta.focus();
let indexStart = ta.selectionStart;
let indexEnd = ta.selectionEnd;
fn(event, content);
};
validateBtn.textContent = "Valider";
validateBtn.classList = ["bg-ok"];
editor_clear_modals(event);
cancelBtn.onclick = function() {
modal.remove()
};
cancelBtn.textContent = "Annuler";
cancelBtn.classList = ["bg-error"];
let [start, end] = editor_replace_range(ta, indexStart, indexEnd,
`[${text.length === 0 ? ta.value.substring(indexStart, indexEnd) : text}]${image ? "!" : ""}(${link})`);
contentDiv.appendChild(content);
modal.appendChild(contentDiv);
btnDiv.appendChild(validateBtn);
btnDiv.appendChild(cancelBtn);
modal.appendChild(btnDiv);
anchor.appendChild(modal);
/* Restore selection */
if(indexStart != indexEnd) {
ta.selectionStart = start;
ta.selectionEnd = end;
}
else {
ta.selectionStart = ta.selectionEnd = start + 1;
}
}
function editor_set_title(event, level, diff)

29
app/templates/widgets/editor.html
View File

@ -103,30 +103,47 @@
</svg>
</button>
-->
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'} /* toggle display on div */" title="Lien">
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" 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>
Content
<label for="link-desc-input">Description</label>
<input type="text" id="link-desc-input" name="link-desc-input">
<label for="link-link-input">Lien</label>
<input type="url" id="link-link-input" name="link-link-input">
</div>
<div>
<a type="button" class="button bg-ok" onclick="">Valider</a>
<a type="button" class="button bg-error" onclick="">Annuler</a>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('link-link-input').value, document.getElementById('link-desc-input').value)">Valider</a>
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
</div>
</div>
</button>
<button type="button" onclick="editor_create_modal(event)" title="Image">
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" 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="img-alt-input">Texte alternatif (sera affiché en cas d'erreur de chargement)</label>
<input type="text" id="img-alt-input" name="img-alt-input">
<label for="img-link-input">Lien vers l'image</label>
<input type="url" id="img-link-input" name="img-link-input">
</div>
<div>
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('img-link-input').value, document.getElementById('img-alt-input').value, true)">Valider</a>
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
</div>
</div>
</button>
<!-- 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>
</button>
-->
<div class="filler"></div>
<a href="#">Aide</a>
</div>