+
+
+
+
+
+
+
+
+
+
+
+
@@ -2561,6 +3109,7 @@ function initNoteView(linkList, container) {
+
@@ -2590,12 +3139,30 @@ function initNoteView(linkList, container) {
renderNotes(contentArea, notes, "list");
});
- // Close Modal
- modalOverlay.querySelector("#note-modal-close").addEventListener("click", () => {
- modalOverlay.classList.remove("open");
+ const saveAndCloseModal = async () => {
+ try {
+ await saveOpenNoteEditorModal(modalOverlay);
+ modalOverlay.classList.remove("open");
+ document.body.classList.remove("note-modal-open");
+ } catch (e) {
+ console.error("Error saving note from modal:", e);
+ alert("Erreur lors de la sauvegarde de la note.");
+ }
+ };
+
+ modalOverlay.querySelector("#note-modal-close").addEventListener("click", (e) => {
+ e.preventDefault();
+ saveAndCloseModal();
});
modalOverlay.addEventListener("click", (e) => {
- if (e.target === modalOverlay) modalOverlay.classList.remove("open");
+ if (e.target === modalOverlay) saveAndCloseModal();
+ });
+
+ modalOverlay.querySelector("#note-modal-edit").addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const titleInput = modalOverlay.querySelector("#note-modal-title");
+ titleInput?.focus({ preventScroll: true });
});
const modalPinBtn = modalOverlay.querySelector("#note-modal-pin");
@@ -2682,6 +3249,7 @@ function initNoteView(linkList, container) {
if (index > -1) notes.splice(index, 1);
modalOverlay.classList.remove("open");
+ document.body.classList.remove("note-modal-open");
})
.catch((err) => {
console.error("Error archiving note:", err);
@@ -3051,12 +3619,11 @@ function renderNotes(container, notes, viewMode, isArchiveMode = false) {
}
// Body (truncated in grid, maybe?)
- if (note.descHtml) {
+ if (note.descHtml || note._noteMarkdown) {
const body = document.createElement("div");
body.className = "note-body";
- // Start simple: use innerHTML but maybe strip big images if we used cover?
- // For now, let's just dump it and style images to fit or hide if first child
- body.innerHTML = note.descHtml;
+ const content = note._noteMarkdown || note.descHtml || "";
+ body.innerHTML = renderMarkdown(content);
inner.appendChild(body);
}
@@ -3091,10 +3658,18 @@ function renderNotes(container, notes, viewMode, isArchiveMode = false) {
-
+
`;
+ const openEditorBtn = actions.querySelector(".note-open-editor-btn");
+ openEditorBtn?.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ syncNoteFromCardElement(note, card);
+ openNoteModal(note);
+ });
+
// Palette Toggle
const paletteBtn = actions.querySelector(`#${paletteBtnId}`);
paletteBtn.addEventListener("click", (e) => {
@@ -3178,12 +3753,14 @@ function openNoteModal(note) {
if (!modal) return;
const modalCard = modal.querySelector(".note-modal");
- const title = modal.querySelector("#note-modal-title");
- const content = modal.querySelector(".note-modal-content");
+ const titleInput = modal.querySelector("#note-modal-title");
+ const descriptionSource = modal.querySelector("#note-modal-description-source");
const tagsContainer = modal.querySelector("#note-modal-tags");
const editLink = modal.querySelector("#note-modal-edit");
const pinButton = modal.querySelector("#note-modal-pin");
const modalColorPopup = modal.querySelector("#note-modal-color-popup");
+ const formatToggleBtn = modal.querySelector("#note-modal-format-btn");
+ const formattingBar = modal.querySelector("#note-modal-formatting");
modal.currentNote = note;
@@ -3197,8 +3774,8 @@ function openNoteModal(note) {
const visibleTags = (note.tags || []).filter((tag) => tag && !isTechnicalTag(tag));
modalCard.dataset.tags = visibleTags.join("||");
- title.textContent = note.title || "Sans titre";
- content.innerHTML = `
${note.descHtml || ""}
`;
+ if (titleInput) titleInput.value = note.title || "";
+ if (descriptionSource) descriptionSource.value = (note._noteMarkdown || note.descText || "").trim();
renderModalTags(tagsContainer, visibleTags);
if (editLink) {
@@ -3212,7 +3789,131 @@ function openNoteModal(note) {
setModalPinButtonState(pinButton, !!note.isPinned);
+ if (!modal._noteEditorState) {
+ modal._noteEditorState = { hasChanges: false, isSaving: false, lastSavedTitle: "", lastSavedMarkdown: "" };
+ }
+
+ const state = modal._noteEditorState;
+ state.hasChanges = false;
+ state.lastSavedTitle = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
+ state.lastSavedMarkdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
+
+ if (!modal._noteEditorBound) {
+ modal._noteEditorBound = true;
+ titleInput?.addEventListener("input", () => {
+ if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
+ });
+ descriptionSource?.addEventListener("input", () => {
+ if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
+ });
+
+ const setFormattingVisible = (visible) => {
+ const fb = modal.querySelector("#note-modal-formatting");
+ if (!fb) return;
+ if (visible) {
+ fb.classList.add("open");
+ fb.setAttribute("aria-hidden", "false");
+ modal.classList.add("show-formatting");
+ } else {
+ fb.classList.remove("open");
+ fb.setAttribute("aria-hidden", "true");
+ modal.classList.remove("show-formatting");
+ }
+ };
+
+ modal._setNoteModalFormattingVisible = setFormattingVisible;
+
+ const ftb = modal.querySelector("#note-modal-format-btn");
+ ftb?.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const fb = modal.querySelector("#note-modal-formatting");
+ const isOpen = fb && fb.classList.contains("open");
+ setFormattingVisible(!isOpen);
+ });
+
+ modal.querySelectorAll(".note-format-btn").forEach((btnEl) => {
+ btnEl.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const src = modal.querySelector("#note-modal-description-source");
+ if (!src) return;
+ applyKeepNoteFormatting(src, btnEl.dataset.noteFormat || "");
+ if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
+ });
+ });
+ }
+
+ if (typeof modal._setNoteModalFormattingVisible === "function") {
+ modal._setNoteModalFormattingVisible(false);
+ }
+
+ hydrateNoteFromEditForm(note).then(() => {
+ if (modal.currentNote !== note) return;
+ if (titleInput && note._noteTitle) {
+ titleInput.value = note._noteTitle;
+ }
+ if (descriptionSource) {
+ descriptionSource.value = (note._noteMarkdown || "").trim();
+ }
+ state.lastSavedTitle = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
+ state.lastSavedMarkdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
+ });
+
modal.classList.add("open");
+ document.body.classList.add("note-modal-open");
+ titleInput?.focus({ preventScroll: true });
+}
+
+async function saveOpenNoteEditorModal(modal) {
+ if (!modal || !modal.currentNote) return;
+ const note = modal.currentNote;
+
+ const titleInput = modal.querySelector("#note-modal-title");
+ const descriptionSource = modal.querySelector("#note-modal-description-source");
+
+ const title = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
+ const markdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
+ const state = modal._noteEditorState || { hasChanges: false, isSaving: false, lastSavedTitle: "", lastSavedMarkdown: "" };
+
+ if (!title && !markdown) {
+ return;
+ }
+
+ const changed =
+ state.hasChanges ||
+ title !== (state.lastSavedTitle || "") ||
+ markdown !== (state.lastSavedMarkdown || "");
+
+ if (!changed || state.isSaving) return;
+
+ state.isSaving = true;
+ modal._noteEditorState = state;
+
+ await hydrateNoteFromEditForm(note);
+ await persistNoteChanges(note, { title, markdown });
+
+ note.title = title;
+ note._noteTitle = title;
+ note._noteMarkdown = markdown;
+ note.descText = markdown;
+
+ const card = document.querySelector(`.note-card[data-id="${CSS.escape(String(note.id))}"]`);
+ if (card) {
+ const titleEl = card.querySelector(".note-inner .note-title");
+ if (titleEl) titleEl.textContent = title;
+
+ const bodyEl = card.querySelector(".note-inner .note-body");
+ if (bodyEl) {
+ bodyEl.innerHTML = renderMarkdown(markdown);
+ note.descHtml = bodyEl.innerHTML;
+ }
+ }
+
+ state.lastSavedTitle = title;
+ state.lastSavedMarkdown = markdown;
+ state.hasChanges = false;
+ state.isSaving = false;
}
function generateModalPaletteButtons(note) {
@@ -3964,10 +4665,18 @@ function closeColorPickerPanel() {
const type = panel.dataset.type || "background";
const skipRestore = panel.dataset.skipRestore === "1";
+ const mode = panel.dataset.mode || "entity";
+ const entityId = panel.dataset.entityId || "";
+
+ if (!skipRestore && mode === "draft") {
+ panel.dataset.skipRestore = "0";
+ panel.classList.remove("open");
+ panel.style.display = "none";
+ panel.setAttribute("aria-hidden", "true");
+ return;
+ }
if (!skipRestore && type === "font") {
const prevFontColorKey = panel.dataset.prevFontColorKey || "auto";
- const mode = panel.dataset.mode || "entity";
- const entityId = panel.dataset.entityId || "";
if (mode === "modal") {
setModalNoteFontColorVisual(prevFontColorKey);
} else {
@@ -3977,8 +4686,6 @@ function closeColorPickerPanel() {
if (!skipRestore && type === "background") {
const prevColorKey = panel.dataset.prevColorKey || "default";
- const mode = panel.dataset.mode || "entity";
- const entityId = panel.dataset.entityId || "";
if (mode === "modal") {
setModalNoteColorVisual(prevColorKey);
} else {
@@ -4007,6 +4714,10 @@ function openColorPickerPanel({ mode, entityId, editUrl, type }) {
if ((type || "background") === "font") {
let prevFontColorKey = "auto";
+ if ((mode || "entity") === "draft") {
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ prevFontColorKey = bgPanel ? (bgPanel.dataset.fontColor || "auto") : "auto";
+ } else
if ((mode || "entity") === "modal") {
const modal = getOpenModalOverlay();
const modalCard = modal ? modal.querySelector(".note-modal") : null;
@@ -4023,6 +4734,12 @@ function openColorPickerPanel({ mode, entityId, editUrl, type }) {
if ((type || "background") === "background") {
let prevColorKey = "default";
+ if ((mode || "entity") === "draft") {
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ if (bgPanel) {
+ prevColorKey = bgPanel.dataset.color || "default";
+ }
+ } else
if ((mode || "entity") === "modal") {
const modal = getOpenModalOverlay();
const modalCard = modal ? modal.querySelector(".note-modal") : null;
@@ -4142,7 +4859,12 @@ function openColorPickerPanel({ mode, entityId, editUrl, type }) {
const previewKey = `custom:${currentHex}`;
const pMode = panel.dataset.mode || "entity";
const pEntityId = panel.dataset.entityId || "";
- if (pMode === "modal") {
+ if (pMode === "draft") {
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ if (bgPanel && typeof bgPanel.__draftApply === "function") {
+ bgPanel.__draftApply({ fontColor: previewKey });
+ }
+ } else if (pMode === "modal") {
setModalNoteFontColorVisual(previewKey);
} else {
setNoteFontColorVisual(pEntityId, previewKey);
@@ -4153,7 +4875,12 @@ function openColorPickerPanel({ mode, entityId, editUrl, type }) {
const previewKey = `custom:${currentHex}`;
const pMode = panel.dataset.mode || "entity";
const pEntityId = panel.dataset.entityId || "";
- if (pMode === "modal") {
+ if (pMode === "draft") {
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ if (bgPanel && typeof bgPanel.__draftApply === "function") {
+ bgPanel.__draftApply({ color: previewKey });
+ }
+ } else if (pMode === "modal") {
setModalNoteColorVisual(previewKey);
} else {
setNoteColorVisual(pEntityId, previewKey);
@@ -4300,6 +5027,24 @@ document.addEventListener("click", (e) => {
const hexInput = panel.querySelector("#hex-input");
const color = hexInput ? hexInput.value : "#ffffff";
+ if (mode === "draft") {
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ if (bgPanel && typeof bgPanel.__draftApply === "function") {
+ if (type === "font") {
+ bgPanel.dataset.fontColor = `custom:${color}`;
+ bgPanel.__draftApply({ fontColor: `custom:${color}` });
+ } else {
+ bgPanel.dataset.color = `custom:${color}`;
+ bgPanel.__draftApply({ color: `custom:${color}` });
+ }
+ renderBackgroundStudioPanel(bgPanel);
+ }
+
+ panel.dataset.skipRestore = "1";
+ closeColorPickerPanel();
+ return;
+ }
+
if (type === "font") {
if (mode === "modal") {
setModalCustomFontColor(color);
@@ -4371,7 +5116,7 @@ function setNoteColorVisual(noteId, colorKey) {
if (typeof colorKey === "string" && colorKey.startsWith("custom:")) {
const hex = colorKey.substring(7);
- element.classList.forEach((cls) => {
+ Array.from(element.classList).forEach((cls) => {
if (cls.startsWith("note-color-")) element.classList.remove(cls);
});
element.classList.add("note-color-custom");