openclacky 1.5.12 → 1.5.13

data/lib/clacky/web/components/composer.js

@@ -14,6 +14,8 @@
 
 const Composer = (() => {
   const CHIP_CLASS = "mention-chip";
+  const ELEMENT_NODE = 1;
+  const TEXT_NODE = 3;
 
   // Lucide-style 24×24 stroke paths for the chip type icons (matches the
   // inline SVGs used across the UI).
@@ -48,7 +50,7 @@ const Composer = (() => {
   }
 
   function _isChip(node) {
-    return !!node && node.nodeType === 1 && node.classList && node.classList.contains(CHIP_CLASS);
+    return !!node && node.nodeType === ELEMENT_NODE && node.classList && node.classList.contains(CHIP_CLASS);
   }
 
   // Plain text of the composer, excluding chips. Newlines are reconstructed
@@ -57,11 +59,11 @@ const Composer = (() => {
     let out = "";
     const walk = (node) => {
       for (const n of Array.from(node.childNodes)) {
-        if (n.nodeType === 3) {
+        if (n.nodeType === TEXT_NODE) {
           out += n.nodeValue;
           continue;
         }
-        if (n.nodeType !== 1) continue;
+        if (n.nodeType !== ELEMENT_NODE) continue;
         if (_isChip(n)) continue;
         switch (n.tagName) {
           case "BR":
@@ -175,6 +177,14 @@ const Composer = (() => {
     range.insertNode(chipEl);
     chipEl.parentNode.insertBefore(space, chipEl.nextSibling);
 
+    // A leading zero-width guard keeps the caret from sitting on the bare
+    // block boundary before an atomic chip, where browsers insert a <br>/<div>
+    // on input/delete and push the chip onto its own line.
+    const prev = chipEl.previousSibling;
+    if (!prev || prev.nodeType !== TEXT_NODE) {
+      chipEl.parentNode.insertBefore(document.createTextNode("\u200B"), chipEl);
+    }
+
     const after = document.createRange();
     after.setStartAfter(space);
     after.collapse(true);
@@ -184,15 +194,42 @@ const Composer = (() => {
     _emitInput(el);
   }
 
-  // Remove a chip DOM node and its trailing separator whitespace.
+  // Remove a chip DOM node and its surrounding zero-width guards + separator whitespace.
   function removeChip(chipEl) {
+    const prev = chipEl.previousSibling;
+    if (prev && prev.nodeType === TEXT_NODE && /^\u200B+$/.test(prev.nodeValue)) {
+      prev.remove();
+    }
     const next = chipEl.nextSibling;
-    if (next && next.nodeType === 3 && /^[\s\u00A0\u200B]*$/.test(next.nodeValue)) {
+    if (next && next.nodeType === TEXT_NODE && /^[\s\u00A0\u200B]*$/.test(next.nodeValue)) {
       next.remove();
     }
     chipEl.remove();
   }
 
+  // Re-establish a text anchor before each chip. Editing can delete the
+  // leading zero-width guard (when the caret sits inside it), after which the
+  // browser drops a <br>/<div> line anchor before the chip and wraps it onto
+  // its own line. Runs on every input event.
+  function _ensureChipGuards(el) {
+    for (const chip of Array.from(el.querySelectorAll("." + CHIP_CLASS))) {
+      let prev = chip.previousSibling;
+      // A stray <br> that has no visible text before it is the browser's line
+      // anchor, not a user Shift+Enter break — drop it so the chip rejoins the
+      // current line.
+      if (prev && prev.nodeType === ELEMENT_NODE && prev.tagName === "BR") {
+        const beforeBr = prev.previousSibling;
+        const noTextBefore = !beforeBr ||
+          (beforeBr.nodeType === TEXT_NODE && /^[\u200B]*$/.test(beforeBr.nodeValue));
+        if (noTextBefore) prev.remove();
+      }
+      const before = chip.previousSibling;
+      if (!before || before.nodeType !== TEXT_NODE || before.nodeValue === "") {
+        chip.parentNode.insertBefore(document.createTextNode("\u200B"), chip);
+      }
+    }
+  }
+
   // Backspace/Delete at a chip boundary removes the chip atomically.
   function _handleKeydown(el, e) {
     if (e.key !== "Backspace" && e.key !== "Delete") return false;
@@ -204,13 +241,13 @@ const Composer = (() => {
 
     let target = null;
     if (e.key === "Backspace") {
-      if (container.nodeType === 3) {
+      if (container.nodeType === TEXT_NODE) {
         if (offset === 0) target = container.previousSibling;
       } else if (container === el) {
         target = container.childNodes[offset - 1];
       }
     } else {
-      if (container.nodeType === 3) {
+      if (container.nodeType === TEXT_NODE) {
         if (offset === container.nodeValue.length) target = container.nextSibling;
       } else if (container === el) {
         target = container.childNodes[offset];
@@ -262,6 +299,7 @@ const Composer = (() => {
     // Browsers leave a stray <br> after deleting all text, which breaks the
     // :empty::before placeholder. Clear it so the placeholder shows again.
     el.addEventListener("input", () => {
+      _ensureChipGuards(el);
       if (text(el).trim() === "" && !el.querySelector("." + CHIP_CLASS) && el.innerHTML !== "") {
         el.innerHTML = "";
       }

data/lib/clacky/web/components/custom-select.js

@@ -0,0 +1,136 @@
+// Generic single-choice dropdown shared by settings/onboard.
+// DOM contract:
+//   wrapper > .custom-select-trigger > .custom-select-value (+ .custom-select-arrow)
+//          + .custom-select-dropdown > .custom-select-option[data-value][data-label]
+// Business code owns the option markup (populate); this module owns the
+// open/close/selection mechanics so every dropdown behaves identically.
+window.CustomSelect = (function () {
+  "use strict";
+
+  const instances = [];
+  let globalBound = false;
+
+  function bindGlobalClose() {
+    if (globalBound) return;
+    globalBound = true;
+    document.addEventListener("click", () => {
+      for (let i = instances.length - 1; i >= 0; i--) {
+        const inst = instances[i];
+        if (!inst._trigger.isConnected) { instances.splice(i, 1); continue; }
+        inst.close();
+      }
+    });
+  }
+
+  function positionFixed(dropdown, anchor) {
+    const rect = anchor.getBoundingClientRect();
+    dropdown.style.position = "fixed";
+    dropdown.style.top = (rect.bottom + 4) + "px";
+    dropdown.style.left = rect.left + "px";
+    // min-width:100% resolves against the viewport once position:fixed,
+    // so pin it to the anchor width; leave width to the CSS max-content
+    // rule so narrow triggers (search type filter) still fit their options.
+    dropdown.style.minWidth = rect.width + "px";
+    dropdown.style.right = "auto";
+    dropdown.style.zIndex = "9999";
+  }
+
+  function resetPosition(dropdown) {
+    dropdown.style.position = "";
+    dropdown.style.top = "";
+    dropdown.style.left = "";
+    dropdown.style.width = "";
+    dropdown.style.minWidth = "";
+    dropdown.style.right = "";
+    dropdown.style.zIndex = "";
+  }
+
+  function init(opts) {
+    const trigger = opts.trigger;
+    const dropdown = opts.dropdown;
+    const valueSpan = trigger.querySelector(".custom-select-value");
+    const home = dropdown.parentElement;
+    const anchor = opts.anchor || home;
+    const placeholderText = valueSpan ? valueSpan.textContent.trim() : "";
+    const selectedOption = dropdown.querySelector(".custom-select-option.selected");
+
+    const instance = {
+      _trigger: trigger,
+      value: selectedOption ? (selectedOption.dataset.value || "") : "",
+      open: function () {
+        instances.forEach(function (other) {
+          if (other !== instance) other.close();
+        });
+        if (opts.portal) {
+          positionFixed(dropdown, anchor);
+          document.body.appendChild(dropdown);
+        }
+        dropdown.classList.add("open");
+        trigger.classList.add("open");
+      },
+      close: function () {
+        if (!dropdown.classList.contains("open")) return;
+        dropdown.classList.remove("open");
+        trigger.classList.remove("open");
+        if (opts.portal && home) {
+          resetPosition(dropdown);
+          home.appendChild(dropdown);
+        }
+      },
+      setValue: function (value, text) {
+        if (valueSpan) {
+          let label = text;
+          if (typeof label !== "string") {
+            const opt = dropdown.querySelector('.custom-select-option[data-value="' + value + '"]');
+            label = opt ? (opt.dataset.label || opt.textContent.trim()) : "";
+          }
+          if (!value && !label) label = placeholderText;
+          valueSpan.textContent = label;
+          valueSpan.classList.toggle("placeholder", !value);
+        }
+        dropdown.querySelectorAll(".custom-select-option").forEach(function (opt) {
+          opt.classList.toggle("selected", opt.dataset.value === value);
+        });
+        instance.value = value;
+      }
+    };
+
+    trigger.addEventListener("click", function (e) {
+      e.stopPropagation();
+      if (dropdown.classList.contains("open")) {
+        instance.close();
+      } else {
+        instance.open();
+      }
+    });
+
+    trigger.addEventListener("keydown", function (e) {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (dropdown.classList.contains("open")) {
+        instance.close();
+      } else {
+        instance.open();
+      }
+    });
+
+    dropdown.addEventListener("click", function (e) {
+      const option = e.target.closest(".custom-select-option");
+      if (!option) return;
+      e.stopPropagation();
+      const value = option.dataset.value || "";
+      const text = option.dataset.label || option.textContent.trim();
+      instance.setValue(value, text);
+      instance.close();
+      if (typeof opts.onSelect === "function") opts.onSelect(value, text, option);
+    });
+
+    instances.push(instance);
+    dropdown.__customSelect = instance;
+    bindGlobalClose();
+    return instance;
+  }
+
+  return { init: init };
+})();

data/lib/clacky/web/components/mentions.js

@@ -404,6 +404,49 @@ const MentionAC = (() => {
     el.dispatchEvent(new Event("input", { bubbles: true }));
   }
 
+  // Promote an "@" already committed by the browser into the tracked marker.
+  // Windows IMEs may suppress the printable keydown (or expose it as Process),
+  // so the input/composition events are the only reliable character boundary.
+  function _adoptCommittedAtMarker() {
+    const el = _inputEl();
+    const sel = window.getSelection();
+    if (!el || !sel || !sel.rangeCount || !sel.isCollapsed) return false;
+
+    const caret = sel.getRangeAt(0);
+    if (!el.contains(caret.startContainer)) return false;
+
+    let node = caret.startContainer;
+    let offset = caret.startOffset;
+    if (node.nodeType !== Node.TEXT_NODE) {
+      if (node.nodeType !== Node.ELEMENT_NODE || offset === 0) return false;
+      const previousChildIndex = offset - 1;
+      node = node.childNodes[previousChildIndex];
+      while (node && node.lastChild) node = node.lastChild;
+      if (!node || node.nodeType !== Node.TEXT_NODE) return false;
+      offset = node.nodeValue.length;
+    }
+    const atOffset = offset - 1;
+    if (atOffset < 0 || node.nodeValue[atOffset] !== "@") return false;
+
+    const at = document.createRange();
+    at.setStart(node, atOffset);
+    at.setEnd(node, offset);
+    at.deleteContents();
+
+    const marker = document.createElement("span");
+    marker.className = "mention-at-marker";
+    marker.textContent = "@";
+    at.insertNode(marker);
+
+    const after = document.createRange();
+    after.setStartAfter(marker);
+    after.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(after);
+    _atNode = marker;
+    return true;
+  }
+
   // Cancel path: turn the tracked "@" marker back into plain text so the user
   // keeps the character they typed.
   function _unwrapAtMarker() {
@@ -569,14 +612,27 @@ const MentionAC = (() => {
       }
     });
 
-    // If the user deletes the "@" while the menu is open, close the menu.
-    el.addEventListener("input", () => {
+    // Keydown is not reliable while a Windows IME is active. Once the browser
+    // commits a literal "@", adopt it into the existing marker state machine.
+    // Composing input waits for compositionend so we never rewrite active IME
+    // text; non-composing input can be handled immediately.
+    el.addEventListener("input", (e) => {
+      _cfg = cfg;
+      if (!_visible && !e.isComposing && e.data === "@" && _adoptCommittedAtMarker()) {
+        open("root");
+        return;
+      }
       if (_visible && _atNode && !el.contains(_atNode)) {
         _atNode = null;
         hide();
       }
     });
 
+    el.addEventListener("compositionend", (e) => {
+      _cfg = cfg;
+      if (!_visible && e.data === "@" && _adoptCommittedAtMarker()) open("root");
+    });
+
     // Optional @ button removed — @ is opened via the keyboard only.
 
     return {