flexdesk 0.15.2 → 0.16.1

package/src/ui/components/sortable_list.js

@@ -19,6 +19,12 @@
 
 import { DragReorder } from './drag_reorder.js';
 
+/** The class every row carries, and therefore what DragReorder must match. */
+const ROW_CLASS = 'twm-sortable-list__row';
+const ROW_SELECTOR = `.${ROW_CLASS}`;
+const HANDLE_CLASS = 'twm-sortable-list__handle';
+const HANDLE_SELECTOR = `.${HANDLE_CLASS}`;
+
 export class SortableList {
     /**
      * Create a sortable list.
@@ -60,6 +66,7 @@ export class SortableList {
         this.root = null;
         this.listEl = null;
         this._dragReorder = null;
+        this._pressedHandle = false;
     }
 
     /**
@@ -198,15 +205,30 @@ export class SortableList {
         // placeholder). Created once, bound to the persistent list
         // element; re-attached after each refresh to wire the rebuilt
         // rows. Drag is restricted to the grip handle.
+        //
+        // The item selector is ROW_SELECTOR, the class #createRow puts on
+        // every row: a selector that matches no row makes nothing draggable.
+        //
+        // The handle restriction cannot read `dragstart`'s target: a browser
+        // fires `dragstart` at the draggable element itself (the row), never
+        // at the child the pointer went down on. So the press is recorded on
+        // `mousedown` (which does target the handle) and the guard reads that.
         if (this.allowReorder) {
             if (!this._dragReorder) {
+                this.listEl.addEventListener('mousedown', (e) => {
+                    this._pressedHandle = !!e.target.closest?.(HANDLE_SELECTOR);
+                });
                 this._dragReorder = new DragReorder({
                     container: this.listEl,
-                    itemSelector: '.sortable-list__row',
+                    itemSelector: ROW_SELECTOR,
                     keyAttr: 'index',
                     axis: 'y',
                     indicatorClass: 'twm-sortable-list__drop',
-                    draggableGuard: (e) => !!e.target.closest('.twm-sortable-list__handle'),
+                    draggableGuard: () => {
+                        const fromHandle = this._pressedHandle;
+                        this._pressedHandle = false;
+                        return fromHandle;
+                    },
                     onReorder: (order) => this.#applyReorder(order),
                 });
             }
@@ -229,7 +251,7 @@ export class SortableList {
 
     #createRow(item, index) {
         const row = document.createElement('div');
-        row.className = 'twm-sortable-list__row';
+        row.className = ROW_CLASS;
         row.dataset.index = index;
 
         // Drag handle (if reordering enabled). The drag mechanics are
@@ -237,7 +259,7 @@ export class SortableList {
         // handle is just the grab affordance the drag is restricted to.
         if (this.allowReorder) {
             const handle = document.createElement('div');
-            handle.className = 'twm-sortable-list__handle';
+            handle.className = HANDLE_CLASS;
             handle.innerHTML = '<span class="material-symbols-outlined">drag_indicator</span>';
             row.appendChild(handle);
         }

package/src/ui/utils/native_context_menu.js

@@ -0,0 +1,61 @@
+/**
+ * native_context_menu.js — the browser's own right-click menu, only where it helps.
+ *
+ * A FlexDesk app draws its own context menus (DataTable rows and headers, tabs,
+ * tiles, the top bar). Everywhere else a right-click shows the browser's or the
+ * webview's menu: Back, Reload, Save as, Print, Inspect. In a desktop window
+ * that makes the app look like a web page and offers moves that break it.
+ *
+ * This keeps the native menu where it is the useful one, editable text (Paste)
+ * and selected text (Copy), and prevents it everywhere nobody else claimed the
+ * right-click.
+ */
+
+/** Input types that take typed text, where Paste belongs. */
+const TEXT_INPUTS = new Set(['', 'text', 'search', 'url', 'tel', 'email', 'password', 'number',
+    'date', 'datetime-local', 'month', 'week', 'time']);
+
+function isEditable(el) {
+    if (!el || el.nodeType !== 1) return false;
+    const tag = el.tagName;
+    if (tag === 'TEXTAREA' || tag === 'SELECT') return true;
+    if (tag === 'INPUT') return TEXT_INPUTS.has(String(el.getAttribute('type') || '').toLowerCase());
+    return !!el.closest?.('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]');
+}
+
+/** A non-empty selection that the click landed inside. */
+function onSelection(target, doc) {
+    const sel = doc?.getSelection?.();
+    if (!sel || sel.isCollapsed || !String(sel).trim()) return false;
+    for (let i = 0; i < sel.rangeCount; i += 1) {
+        if (sel.getRangeAt(i).intersectsNode?.(target)) return true;
+    }
+    return false;
+}
+
+/**
+ * Prevent the native context menu wherever no handler claimed the right-click.
+ *
+ * Listens in the bubble phase, so every element handler runs first: one that
+ * shows its own menu calls `preventDefault()`, and this leaves it alone. A
+ * handler that stops propagation never reaches here at all.
+ *
+ * @param {object} [opts]
+ * @param {EventTarget} [opts.root=document]
+ * @param {(e: MouseEvent) => boolean} [opts.allow]  true keeps the native menu for that event
+ * @returns {{ dispose: () => void }}
+ */
+export function suppressNativeContextMenu({ root, allow } = {}) {
+    const r = root ?? (typeof document !== 'undefined' ? document : null);
+    if (!r) return { dispose() {} };
+    const onMenu = (e) => {
+        if (e.defaultPrevented) return;
+        const t = e.target;
+        if (isEditable(t)) return;
+        if (onSelection(t, t?.ownerDocument)) return;
+        if (allow?.(e)) return;
+        e.preventDefault();
+    };
+    r.addEventListener('contextmenu', onMenu);
+    return { dispose() { r.removeEventListener('contextmenu', onMenu); } };
+}