living-ai-documentation 1.6.0 → 1.8.0

package/dist/src/frontend/i18n/en.json

@@ -314,6 +314,24 @@
   "snippet.inline_delete_detail": "This action will remove the selected Markdown block.",
   "snippet.inline_delete_confirm_btn": "Delete",
   "snippet.inline_delete_failed": "Inline block deletion failed: ",
+  "snippet.inline_insert_btn": "Insert a snippet here",
+  "snippet.inline_insert_modal_title": "Insert a snippet",
+  "snippet.inline_insert_failed": "Inline insertion failed: ",
+  "snippet.inline_edit_btn_table": "Edit table",
+  "snippet.inline_edit_btn_code_block": "Edit code block",
+  "snippet.inline_edit_btn_blockquote": "Edit blockquote",
+  "snippet.inline_edit_btn_ordered_list": "Edit numbered list",
+  "snippet.inline_edit_btn_unordered_list": "Edit bullet list",
+  "snippet.inline_edit_btn_tree": "Edit tree",
+  "snippet.inline_edit_btn_colored_section": "Edit colored section",
+  "snippet.inline_edit_btn_colored_text": "Edit colored text",
+  "snippet.inline_edit_btn_collapsible": "Edit collapsible block",
+  "snippet.inline_edit_btn_link": "Edit link",
+  "snippet.inline_edit_btn_doc_link": "Edit document link",
+  "snippet.inline_edit_btn_anchor_link": "Edit anchor link",
+  "snippet.inline_edit_btn_anchor_doc_link": "Edit document + anchor link",
+  "snippet.inline_edit_btn_image": "Edit image",
+  "snippet.inline_edit_btn_separator": "Edit separator",
   "snippet.diagram_existing": "Existing diagram",
   "snippet.diagram_new": "New diagram",
   "snippet.diagram_select_label": "Select diagram",

package/dist/src/frontend/i18n/fr.json

@@ -314,6 +314,24 @@
   "snippet.inline_delete_detail": "Cette action retirera le bloc Markdown sélectionné.",
   "snippet.inline_delete_confirm_btn": "Supprimer",
   "snippet.inline_delete_failed": "Échec de la suppression inline : ",
+  "snippet.inline_insert_btn": "Insérer un snippet ici",
+  "snippet.inline_insert_modal_title": "Insérer un snippet",
+  "snippet.inline_insert_failed": "Échec de l'insertion inline : ",
+  "snippet.inline_edit_btn_table": "Éditer le tableau",
+  "snippet.inline_edit_btn_code_block": "Éditer le bloc de code",
+  "snippet.inline_edit_btn_blockquote": "Éditer la citation",
+  "snippet.inline_edit_btn_ordered_list": "Éditer la liste numérotée",
+  "snippet.inline_edit_btn_unordered_list": "Éditer la liste à puces",
+  "snippet.inline_edit_btn_tree": "Éditer l'arborescence",
+  "snippet.inline_edit_btn_colored_section": "Éditer la section colorée",
+  "snippet.inline_edit_btn_colored_text": "Éditer le texte coloré",
+  "snippet.inline_edit_btn_collapsible": "Éditer le bloc repliable",
+  "snippet.inline_edit_btn_link": "Éditer le lien",
+  "snippet.inline_edit_btn_doc_link": "Éditer le lien vers un document",
+  "snippet.inline_edit_btn_anchor_link": "Éditer le lien d'ancre",
+  "snippet.inline_edit_btn_anchor_doc_link": "Éditer le lien document + ancre",
+  "snippet.inline_edit_btn_image": "Éditer l'image",
+  "snippet.inline_edit_btn_separator": "Éditer le séparateur",
   "snippet.diagram_existing": "Diagramme existant",
   "snippet.diagram_new": "Nouveau diagramme",
   "snippet.diagram_select_label": "Sélectionner un diagramme",

package/dist/src/frontend/inline-snippet-edit.js

@@ -21,6 +21,30 @@ const _INLINE_SNIPPET_TYPES = new Set([
   "unordered-list",
 ]);
 
+const _INLINE_EDIT_AFFORDANCE_BY_TYPE = {
+  table: { labelKey: "snippet.inline_edit_btn_table", iconClass: "fa-solid fa-table-cells" },
+  "code-block": { labelKey: "snippet.inline_edit_btn_code_block", iconClass: "fa-solid fa-code" },
+  blockquote: { labelKey: "snippet.inline_edit_btn_blockquote", iconClass: "fa-solid fa-quote-right" },
+  "ordered-list": { labelKey: "snippet.inline_edit_btn_ordered_list", iconClass: "fa-solid fa-list-ol" },
+  "unordered-list": { labelKey: "snippet.inline_edit_btn_unordered_list", iconClass: "fa-solid fa-list-ul" },
+  tree: { labelKey: "snippet.inline_edit_btn_tree", iconClass: "fa-solid fa-folder-tree" },
+  "colored-section": { labelKey: "snippet.inline_edit_btn_colored_section", iconClass: "fa-solid fa-fill-drip" },
+  "colored-text": { labelKey: "snippet.inline_edit_btn_colored_text", iconClass: "fa-solid fa-highlighter" },
+  collapsible: { labelKey: "snippet.inline_edit_btn_collapsible", iconClass: "fa-solid fa-caret-right" },
+  link: { labelKey: "snippet.inline_edit_btn_link", iconClass: "fa-solid fa-link" },
+  "doc-link": { labelKey: "snippet.inline_edit_btn_doc_link", iconClass: "fa-solid fa-file-lines" },
+  "anchor-link": { labelKey: "snippet.inline_edit_btn_anchor_link", iconClass: "fa-solid fa-anchor" },
+  "anchor-doc-link": { labelKey: "snippet.inline_edit_btn_anchor_doc_link", iconClass: "fa-solid fa-anchor" },
+  image: { labelKey: "snippet.inline_edit_btn_image", iconClass: "fa-solid fa-image" },
+  separator: { labelKey: "snippet.inline_edit_btn_separator", iconClass: "fa-solid fa-minus" },
+};
+
+function _inlineEditAffordance(type) {
+  const known = _INLINE_EDIT_AFFORDANCE_BY_TYPE[type];
+  if (known) return known;
+  return { labelKey: "snippet.inline_edit_btn", iconClass: "fa-solid fa-pen-to-square" };
+}
+
 const _INLINE_TYPE_SELECTORS = [
   { types: ["collapsible"], selector: "details" },
   { types: ["colored-section"], selector: 'div[style*="border-left"]' },
@@ -67,10 +91,39 @@ function _inlineAddRegexRanges(ranges, content, regex, groupIndex = 0) {
   }
 }
 
+function _inlineLineIndentBefore(content, idx) {
+  let i = idx;
+  while (i > 0 && content[i - 1] !== "\n") i -= 1;
+  const prefix = content.slice(i, idx);
+  return /^[ \t]+$/.test(prefix) ? prefix : "";
+}
+
+function _inlineAddCodeBlockRanges(ranges, content) {
+  const regex = /```[\s\S]*?```/g;
+  let match;
+  while ((match = regex.exec(content))) {
+    const raw = match[0];
+    if (!raw.trim()) {
+      if (raw.length === 0) regex.lastIndex += 1;
+      continue;
+    }
+    const type = detectSnippetType(raw);
+    if (!type || !_INLINE_SNIPPET_TYPES.has(type)) continue;
+    const indent = _inlineLineIndentBefore(content, match.index);
+    const start = match.index - indent.length;
+    const end = match.index + raw.length;
+    const candidate = { start, end, type, indent };
+    if (ranges.some((existing) => _inlineRangesOverlap(existing, candidate))) {
+      continue;
+    }
+    ranges.push(candidate);
+  }
+}
+
 function _inlineCollectSnippetRanges(content) {
   const ranges = [];
 
-  _inlineAddRegexRanges(ranges, content, /```[\s\S]*?```/g);
+  _inlineAddCodeBlockRanges(ranges, content);
   _inlineAddRegexRanges(ranges, content, /<details[\s\S]*?<\/details>/gi);
   _inlineAddRegexRanges(
     ranges,
@@ -144,10 +197,12 @@ function _inlineClosePopup() {
   }
 }
 
-function _inlineShowPopup(event, range) {
+function _inlineShowPopup(event, { iconClass, labelKey, onActivate, dataAction, dataType }) {
   _inlineClosePopup();
   const popup = document.createElement("div");
   popup.id = "inline-snippet-popup";
+  if (dataAction) popup.dataset.action = dataAction;
+  if (dataType) popup.dataset.snippetType = dataType;
   popup.className =
     "fixed z-50 rounded-lg border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-900 shadow-lg p-1";
   const btn = document.createElement("button");
@@ -155,16 +210,16 @@ function _inlineShowPopup(event, range) {
   btn.className =
     "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900/30";
   const icon = document.createElement("i");
-  icon.className = "fa-solid fa-pen-to-square";
+  icon.className = iconClass;
   icon.setAttribute("aria-hidden", "true");
   const label = document.createElement("span");
-  label.textContent = window.t("snippet.inline_edit_btn");
+  label.textContent = window.t(labelKey);
   btn.append(icon, label);
   btn.addEventListener("click", (e) => {
     e.preventDefault();
     e.stopPropagation();
     _inlineClosePopup();
-    openSnippetsModalForInlineEdit(range);
+    onActivate();
   });
   popup.appendChild(btn);
   document.body.appendChild(popup);
@@ -181,6 +236,124 @@ function _inlineShowPopup(event, range) {
   _inlineSnippetPopup = popup;
 }
 
+function _inlineTopLevelBlock(contentEl, target) {
+  let block = target instanceof Element ? target : null;
+  while (block && block.parentElement && block.parentElement !== contentEl) {
+    block = block.parentElement;
+  }
+  if (!block || block === contentEl || block.parentElement !== contentEl) {
+    return null;
+  }
+  return block;
+}
+
+function _inlineNearestBlockByY(contentEl, clientY) {
+  if (typeof clientY !== "number") return null;
+  const children = Array.from(contentEl.children);
+  if (!children.length) return null;
+  let above = null;
+  let below = null;
+  for (const child of children) {
+    const rect = child.getBoundingClientRect();
+    if (rect.bottom < clientY) above = child;
+    else if (rect.top > clientY) {
+      if (!below) below = child;
+    } else return child;
+  }
+  return above || below;
+}
+
+function _inlineResolveBlockEnd(block, candidates) {
+  if (block.matches("[data-inline-snippet-index]")) {
+    const range = candidates[Number(block.dataset.inlineSnippetIndex)];
+    if (range) return range.end;
+  }
+  let anchorIdx = null;
+  const desc = Array.from(
+    block.querySelectorAll("[data-inline-snippet-index]"),
+  );
+  if (desc.length > 0) {
+    let maxEnd = -1;
+    for (const d of desc) {
+      const range = candidates[Number(d.dataset.inlineSnippetIndex)];
+      if (range && range.end > maxEnd) maxEnd = range.end;
+    }
+    if (maxEnd >= 0) anchorIdx = maxEnd;
+  } else {
+    const text = (block.textContent || "").trim();
+    if (text) {
+      const firstLine = text.split("\n")[0].trim().slice(0, 60);
+      if (firstLine) {
+        const idx = currentDocContent.indexOf(firstLine);
+        if (idx >= 0) anchorIdx = idx;
+      }
+    }
+  }
+  if (anchorIdx === null) return null;
+  const blankIdx = currentDocContent.indexOf("\n\n", anchorIdx);
+  return blankIdx >= 0 ? blankIdx : currentDocContent.length;
+}
+
+function _inlineResolveBlockStart(block, candidates) {
+  if (block.matches("[data-inline-snippet-index]")) {
+    const range = candidates[Number(block.dataset.inlineSnippetIndex)];
+    if (range) return range.start;
+  }
+  const desc = Array.from(
+    block.querySelectorAll("[data-inline-snippet-index]"),
+  );
+  if (desc.length > 0) {
+    let minStart = Infinity;
+    for (const d of desc) {
+      const range = candidates[Number(d.dataset.inlineSnippetIndex)];
+      if (range && range.start < minStart) minStart = range.start;
+    }
+    if (minStart < Infinity) return minStart;
+  }
+  const text = (block.textContent || "").trim();
+  if (text) {
+    const firstLine = text.split("\n")[0].trim().slice(0, 60);
+    if (firstLine) {
+      const idx = currentDocContent.indexOf(firstLine);
+      if (idx >= 0) return idx;
+    }
+  }
+  return null;
+}
+
+function _inlineFindInsertPosition(contentEl, target, candidates, clientY) {
+  if (typeof currentDocContent !== "string") return null;
+  const topBlock =
+    _inlineTopLevelBlock(contentEl, target) ||
+    _inlineNearestBlockByY(contentEl, clientY);
+  if (!topBlock) return currentDocContent.length;
+
+  const directEnd = _inlineResolveBlockEnd(topBlock, candidates);
+  if (directEnd !== null) return directEnd;
+
+  let prev = topBlock.previousElementSibling;
+  while (prev) {
+    const end = _inlineResolveBlockEnd(prev, candidates);
+    if (end !== null) {
+      const next = currentDocContent.indexOf("\n\n", end + 1);
+      return next >= 0 ? next : currentDocContent.length;
+    }
+    prev = prev.previousElementSibling;
+  }
+
+  let nxt = topBlock.nextElementSibling;
+  while (nxt) {
+    const start = _inlineResolveBlockStart(nxt, candidates);
+    if (start !== null) {
+      const prevBlank = currentDocContent.lastIndexOf("\n\n", start);
+      return prevBlank >= 0 ? prevBlank : 0;
+    }
+    nxt = nxt.nextElementSibling;
+  }
+
+  return currentDocContent.length;
+}
+
 function initInlineSnippetEditing(contentEl) {
   if (!contentEl || typeof currentDocContent !== "string") return;
   const candidates = _inlineCollectSnippetRanges(currentDocContent);
@@ -194,11 +367,35 @@ function initInlineSnippetEditing(contentEl) {
   }
   contentEl._inlineSnippetContextHandler = (event) => {
     const target = event.target.closest("[data-inline-snippet-index]");
-    if (!target || !contentEl.contains(target)) return;
-    const range = candidates[Number(target.dataset.inlineSnippetIndex)];
-    if (!range) return;
+    if (target && contentEl.contains(target)) {
+      const range = candidates[Number(target.dataset.inlineSnippetIndex)];
+      if (!range) return;
+      event.preventDefault();
+      const affordance = _inlineEditAffordance(range.type);
+      _inlineShowPopup(event, {
+        iconClass: affordance.iconClass,
+        labelKey: affordance.labelKey,
+        dataAction: "edit",
+        dataType: range.type,
+        onActivate: () => openSnippetsModalForInlineEdit(range),
+      });
+      return;
+    }
+    if (!contentEl.contains(event.target)) return;
+    const insertPos = _inlineFindInsertPosition(
+      contentEl,
+      event.target,
+      candidates,
+      event.clientY,
+    );
+    if (insertPos === null) return;
     event.preventDefault();
-    _inlineShowPopup(event, range);
+    _inlineShowPopup(event, {
+      iconClass: "fa-solid fa-plus",
+      labelKey: "snippet.inline_insert_btn",
+      dataAction: "insert",
+      onActivate: () => openSnippetsModalForInlineInsert(insertPos),
+    });
   };
   contentEl.addEventListener(
     "contextmenu",

package/dist/src/frontend/snippets.js

@@ -7,6 +7,8 @@
 let _snippetSelStart = 0;
 let _snippetSelEnd = 0;
 let _snippetInlineEdit = false;
+let _snippetInlineInsert = false;
+let _snippetInlineIndent = "";
 const _SNIPPET_PANELS = [
   "collapsible",
   "link",
@@ -630,34 +632,40 @@ async function snippetAnchorDocChanged() {
   snippetUpdatePreview();
 }
 
-function _setSnippetModalMode(isInlineEdit) {
-  _snippetInlineEdit = !!isInlineEdit;
+function _setSnippetModalMode(mode) {
+  const isInlineEdit = mode === "inline-edit";
+  const isInlineInsert = mode === "inline-insert";
+  const isInline = isInlineEdit || isInlineInsert;
+  _snippetInlineEdit = isInlineEdit;
+  _snippetInlineInsert = isInlineInsert;
+  if (!isInlineEdit) _snippetInlineIndent = "";
   const title = document.getElementById("snippet-modal-title");
   if (title) {
-    title.textContent = window.t(
-      _snippetInlineEdit ? "snippet.inline_modal_title" : "snippet.modal_title",
-    );
+    let key = "snippet.modal_title";
+    if (isInlineEdit) key = "snippet.inline_modal_title";
+    else if (isInlineInsert) key = "snippet.inline_insert_modal_title";
+    title.textContent = window.t(key);
   }
   const submit = document.getElementById("snippet-submit-btn");
   if (submit) {
     submit.textContent = window.t(
-      _snippetInlineEdit ? "snippet.inline_save_btn" : "snippet.insert_btn",
+      isInlineEdit ? "snippet.inline_save_btn" : "snippet.insert_btn",
     );
   }
   const typeSelect = document.getElementById("snippet-type");
   if (typeSelect) {
-    typeSelect.disabled = _snippetInlineEdit;
-    typeSelect.classList.toggle("cursor-not-allowed", _snippetInlineEdit);
-    typeSelect.classList.toggle("opacity-70", _snippetInlineEdit);
+    typeSelect.disabled = isInlineEdit;
+    typeSelect.classList.toggle("cursor-not-allowed", isInlineEdit);
+    typeSelect.classList.toggle("opacity-70", isInlineEdit);
   }
   const deleteBtn = document.getElementById("snippet-delete-btn");
   if (deleteBtn) {
-    deleteBtn.classList.toggle("hidden", !_snippetInlineEdit);
+    deleteBtn.classList.toggle("hidden", !isInlineEdit);
   }
   const card = document.getElementById("snippet-modal-card");
   if (card) {
-    card.classList.toggle("max-w-lg", !_snippetInlineEdit);
-    card.classList.toggle("max-w-5xl", _snippetInlineEdit);
+    card.classList.toggle("max-w-lg", !isInline);
+    card.classList.toggle("max-w-5xl", isInline);
   }
 }
 
@@ -719,7 +727,7 @@ function openSnippetsModal() {
   const editor = document.getElementById("doc-editor");
   _snippetSelStart = editor.selectionStart;
   _snippetSelEnd = editor.selectionEnd;
-  _setSnippetModalMode(false);
+  _setSnippetModalMode("insert");
   _openSnippetsModalForText(editor.value.slice(_snippetSelStart, _snippetSelEnd));
 }
 
@@ -727,14 +735,27 @@ function openSnippetsModalForInlineEdit(range) {
   if (!range || typeof currentDocContent !== "string") return;
   _snippetSelStart = range.start;
   _snippetSelEnd = range.end;
-  _setSnippetModalMode(true);
+  _setSnippetModalMode("inline-edit");
+  _snippetInlineIndent = range.indent || "";
   const selectedText = currentDocContent.slice(_snippetSelStart, _snippetSelEnd);
   _openSnippetsModalForText(selectedText, range.type || null);
 }
 
+function openSnippetsModalForInlineInsert(insertPos) {
+  if (typeof currentDocContent !== "string") return;
+  const pos = Math.max(
+    0,
+    Math.min(currentDocContent.length, Number(insertPos) || 0),
+  );
+  _snippetSelStart = pos;
+  _snippetSelEnd = pos;
+  _setSnippetModalMode("inline-insert");
+  _openSnippetsModalForText("");
+}
+
 function closeSnippetsModal() {
   document.getElementById("snippets-modal").classList.add("hidden");
-  _setSnippetModalMode(false);
+  _setSnippetModalMode("insert");
 }
 
 function snippetTypeChanged() {
@@ -932,7 +953,14 @@ function buildSnippetMarkdown() {
       const lang = document.getElementById("snip-code-lang").value || "";
       const code =
         document.getElementById("snip-code-content").value || "// code ici";
-      return `\`\`\`${lang}\n${code}\n\`\`\``;
+      const block = `\`\`\`${lang}\n${code}\n\`\`\``;
+      if (_snippetInlineEdit && _snippetInlineIndent) {
+        return block
+          .split("\n")
+          .map((line) => _snippetInlineIndent + line)
+          .join("\n");
+      }
+      return block;
     }
     case "blockquote": {
       const content =
@@ -1001,7 +1029,10 @@ function snippetUpdatePreview() {
 
 async function insertSnippet() {
   const type = document.getElementById("snippet-type").value;
-  if (_snippetInlineEdit && (type === "diagram" || type === "attachment")) {
+  if (
+    (_snippetInlineEdit || _snippetInlineInsert) &&
+    (type === "diagram" || type === "attachment")
+  ) {
     return;
   }
   if (type === "diagram") {
@@ -1015,6 +1046,7 @@ async function insertSnippet() {
   }
   const text = buildSnippetMarkdown();
   const wasInlineEdit = _snippetInlineEdit;
+  const wasInlineInsert = _snippetInlineInsert;
   closeSnippetsModal();
   if (wasInlineEdit) {
     const before = currentDocContent.slice(0, _snippetSelStart);
@@ -1029,6 +1061,32 @@ async function insertSnippet() {
     }
     return;
   }
+  if (wasInlineInsert) {
+    const before = currentDocContent.slice(0, _snippetSelStart);
+    const after = currentDocContent.slice(_snippetSelStart);
+    const leadingBlank =
+      before.length === 0 || /\n\n$/.test(before)
+        ? ""
+        : before.endsWith("\n")
+          ? "\n"
+          : "\n\n";
+    const trailingBlank =
+      after.length === 0 || /^\n\n/.test(after)
+        ? ""
+        : after.startsWith("\n")
+          ? "\n"
+          : "\n\n";
+    const payload = leadingBlank + text + trailingBlank;
+    try {
+      await saveCurrentDocumentContent(before + payload + after);
+    } catch (err) {
+      alert(
+        window.t("snippet.inline_insert_failed") +
+          (err && err.message ? err.message : String(err)),
+      );
+    }
+    return;
+  }
   const editor = document.getElementById("doc-editor");
   const before = editor.value.slice(0, _snippetSelStart);
   const after = editor.value.slice(_snippetSelEnd);
@@ -1237,9 +1295,20 @@ function parseAndFillSnippet(text, type) {
       break;
     }
     case "code-block": {
-      const m = t.match(/^```\s*([^\n]*)\n([\s\S]*?)\n```$/);
+      const m = t.match(/^```[ \t]*([^\n]*)\n([\s\S]*?)\n[ \t]*```$/);
       document.getElementById("snip-code-lang").value = m ? m[1].trim() : "";
-      document.getElementById("snip-code-content").value = m ? m[2] : "";
+      let codeContent = m ? m[2] : "";
+      if (m && _snippetInlineIndent) {
+        const escapedIndent = _snippetInlineIndent.replace(
+          /[.*+?^${}()|[\]\\]/g,
+          "\\$&",
+        );
+        codeContent = codeContent.replace(
+          new RegExp("^" + escapedIndent, "gm"),
+          "",
+        );
+      }
+      document.getElementById("snip-code-content").value = codeContent;
       break;
     }
     case "blockquote": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-ai-documentation",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Local Markdown documentation hub with a built-in MCP server — coding agents create ADRs, draw diagrams and detect drift while you code.",
   "main": "dist/src/server.js",
   "bin": {