collavre 0.23.0 → 0.24.1

data/app/javascript/components/plugins/markdown_shortcuts_plugin.jsx

@@ -6,16 +6,19 @@ import {
   ORDERED_LIST,
   CODE
 } from "@lexical/markdown"
+import { registerCodeFenceShortcut } from "../../lib/lexical/code_fence_shortcut"
 
 /**
  * Markdown-style shortcuts for the creative inline editor:
  *
  * - "* " / "- " / "+ " at line start → unordered list
  * - "1. " (any number) at line start → ordered list
- * - "```" + space at line start → code block
+ * - "```" (optionally "```lang") on its own line → code block
  *
- * These fire on text change (not on Enter), so they don't conflict
- * with the Enter→addNew() shortcut on desktop.
+ * The list transformers fire on text change. The built-in CODE transformer
+ * needs "``` " (trailing space); registerCodeFenceShortcut adds the Enter path,
+ * converting a "```" (or "```lang") line to a code block when Enter is pressed —
+ * so the language can be typed before the fence commits.
  */
 const CREATIVE_MARKDOWN_TRANSFORMERS = [
   UNORDERED_LIST,
@@ -27,7 +30,15 @@ export default function MarkdownShortcutsPlugin() {
   const [editor] = useLexicalComposerContext()
 
   useEffect(() => {
-    return registerMarkdownShortcuts(editor, CREATIVE_MARKDOWN_TRANSFORMERS)
+    const unregisterShortcuts = registerMarkdownShortcuts(
+      editor,
+      CREATIVE_MARKDOWN_TRANSFORMERS
+    )
+    const unregisterFence = registerCodeFenceShortcut(editor)
+    return () => {
+      unregisterShortcuts()
+      unregisterFence()
+    }
   }, [editor])
 
   return null

data/app/javascript/controllers/__tests__/search_popup_controller.test.js

@@ -0,0 +1,104 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+
+const { default: SearchPopupController } = await import('../search_popup_controller')
+
+describe('SearchPopupController Ctrl+K shortcut', () => {
+  let application
+  let container
+  let popup
+
+  function pressCtrlK(target) {
+    const event = new KeyboardEvent('keydown', {
+      key: 'k',
+      ctrlKey: true,
+      bubbles: true,
+      cancelable: true
+    })
+    target.dispatchEvent(event)
+    return event
+  }
+
+  beforeEach(async () => {
+    document.body.innerHTML = ''
+
+    container = document.createElement('div')
+    container.innerHTML = `
+      <div data-controller="search-popup">
+        <input type="text" data-search-popup-target="input" />
+        <div data-search-popup-target="popup"></div>
+      </div>
+    `
+    document.body.appendChild(container)
+
+    application = Application.start()
+    application.register('search-popup', SearchPopupController)
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    popup = container.querySelector('[data-search-popup-target="popup"]')
+  })
+
+  afterEach(() => {
+    application?.stop()
+    document.body.innerHTML = ''
+    jest.restoreAllMocks()
+  })
+
+  test('opens the popup on Ctrl+K when focus is not in an editable element', () => {
+    const event = pressCtrlK(document.body)
+
+    expect(popup.classList.contains('open')).toBe(true)
+    expect(event.defaultPrevented).toBe(true)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a text input', () => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    document.body.appendChild(input)
+    input.focus()
+
+    const event = pressCtrlK(input)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a textarea', () => {
+    const textarea = document.createElement('textarea')
+    document.body.appendChild(textarea)
+    textarea.focus()
+
+    const event = pressCtrlK(textarea)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside a contenteditable element', () => {
+    const editable = document.createElement('div')
+    editable.setAttribute('contenteditable', 'true')
+    document.body.appendChild(editable)
+    editable.focus()
+
+    const event = pressCtrlK(editable)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+
+  test('does not open the popup when Ctrl+K is pressed inside the inline Lexical editor', () => {
+    const lexicalRoot = document.createElement('div')
+    lexicalRoot.setAttribute('data-lexical-editor-root', '')
+    const inner = document.createElement('p')
+    lexicalRoot.appendChild(inner)
+    document.body.appendChild(lexicalRoot)
+
+    const event = pressCtrlK(inner)
+
+    expect(popup.classList.contains('open')).toBe(false)
+    expect(event.defaultPrevented).toBe(false)
+  })
+})

data/app/javascript/controllers/__tests__/topic_list_controller.test.js

@@ -0,0 +1,82 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import { Application } from '@hotwired/stimulus'
+import TopicListController from '../topic_list_controller'
+
+describe('TopicListController', () => {
+    let application, controller
+
+    const mount = () => {
+        document.body.innerHTML = `
+          <div id="topic-list-modal" class="common-popup" data-controller="topic-list">
+            <button data-topic-list-target="close">×</button>
+            <input data-topic-list-target="input">
+            <ul class="common-popup-list" data-popup-list data-topic-list-target="list"></ul>
+          </div>
+        `
+        application = Application.start()
+        application.register('topic-list', TopicListController)
+        return new Promise((resolve) => setTimeout(resolve, 0)).then(() => {
+            controller = application.getControllerForElementAndIdentifier(
+                document.getElementById('topic-list-modal'), 'topic-list'
+            )
+        })
+    }
+
+    const RECT = { top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0 }
+    const DATA = {
+        topics: [{ id: 1, name: 'Main' }, { id: 2, name: 'Alpha' }],
+        archivedTopics: [{ id: 3, name: 'Zeta' }],
+        mainTopicId: '1',
+        allMessagesLabel: 'All Messages'
+    }
+
+    const items = () => Array.from(document.querySelectorAll('#topic-list-modal li.common-popup-item'))
+
+    beforeEach(() => {
+        global.requestAnimationFrame = (fn) => { fn(); return 0 }
+        return mount()
+    })
+
+    afterEach(() => {
+        document.body.innerHTML = ''
+        application.stop()
+        jest.clearAllMocks()
+    })
+
+    test('builds items in bar order: main, others, All Messages, archived', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        const labels = items().map((li) => li.textContent.trim())
+        expect(labels).toEqual(['#Main', '#Alpha', '📋 All Messages', '#Zeta'])
+    })
+
+    test('marks archived items with the distinguishing class', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        const archived = items().filter((li) => li.querySelector('.topic-list-item--archived'))
+        expect(archived).toHaveLength(1)
+        expect(archived[0].textContent).toContain('#Zeta')
+    })
+
+    test('filters by label substring and adds NO create option', () => {
+        controller.openForTopics(DATA, RECT, () => {})
+        controller.inputTarget.value = 'alpha'
+        controller._onInput()
+        const labels = items().map((li) => li.textContent.trim())
+        expect(labels).toEqual(['#Alpha'])
+
+        controller.inputTarget.value = 'brandnew'
+        controller._onInput()
+        expect(items()).toHaveLength(0) // no "create and move" pseudo-item
+    })
+
+    test('select invokes the callback with the item and closes', () => {
+        const cb = jest.fn()
+        controller.openForTopics(DATA, RECT, cb)
+        const item = { id: 2, label: '#Alpha', archived: false }
+        controller.select(item)
+        expect(cb).toHaveBeenCalledWith(item)
+        expect(controller.popup.isOpen()).toBe(false)
+    })
+})

data/app/javascript/controllers/comments/__tests__/form_controller_review.test.js

@@ -343,4 +343,30 @@ describe('FormController - Review Quote Chips', () => {
       expect(controller.textareaTarget.value).toBe('fb2')
     })
   })
+
+  describe('active chip re-click - programmatic scroll', () => {
+    // Re-clicking the active chip scrolls its quoted comment into view. That is a
+    // programmatic list scroll, so it must drop the prev-message anchor the same way
+    // scrollToBottom/highlightComment do — otherwise a stale anchor inside the corridor
+    // survives and the next previous-message click skips the comment now in view.
+    test('re-clicking the active chip notifies the list of a programmatic scroll', () => {
+      const commentEl = document.createElement('div')
+      commentEl.setAttribute('data-comment-id', '1')
+      commentEl.scrollIntoView = jest.fn() // jsdom has no scrollIntoView
+      document.body.appendChild(commentEl)
+
+      const notifyProgrammaticScroll = jest.fn()
+      jest
+        .spyOn(controller, 'listController', 'get')
+        .mockReturnValue({ notifyProgrammaticScroll })
+
+      controller.appendReviewQuote(1, 'first') // freshly appended quote is active
+      container.querySelector('.review-quote-chip-text').click()
+
+      expect(commentEl.scrollIntoView).toHaveBeenCalled()
+      expect(notifyProgrammaticScroll).toHaveBeenCalled()
+
+      commentEl.remove()
+    })
+  })
 })

data/app/javascript/controllers/comments/__tests__/list_controller_prev_message.test.js

@@ -0,0 +1,230 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/**
+ * Covers the previous-message wiring in list_controller: anchor lifecycle across
+ * connect/disconnect, list reloads, and the scroll action itself.
+ *
+ * jsdom has no layout engine, so item geometry is stubbed. `scrollTo` records
+ * the request without moving `scrollTop` — that models the smooth-scroll
+ * animation still being in flight, which is the state the original bug needed.
+ */
+
+import { jest } from '@jest/globals'
+import ListController from '../list_controller'
+
+const ITEM_HEIGHT = 100
+
+function buildController({ itemCount = 5 } = {}) {
+  const state = { scrollTop: 0 }
+
+  const element = document.createElement('div')
+  const list = document.createElement('div')
+  element.appendChild(list)
+  document.body.appendChild(element)
+
+  for (let i = 0; i < itemCount; i++) {
+    const item = document.createElement('div')
+    item.className = 'comment-item'
+    item.dataset.commentId = `c${i}`
+    Object.defineProperty(item, 'offsetTop', { get: () => i * ITEM_HEIGHT })
+    item.getBoundingClientRect = () => ({ top: i * ITEM_HEIGHT - state.scrollTop })
+    list.appendChild(item)
+  }
+
+  list.getBoundingClientRect = () => ({ top: 0 })
+  Object.defineProperty(list, 'offsetTop', { get: () => 0 })
+  list.scrollTo = jest.fn()
+
+  // Stand the controller up without a Stimulus application: `element` is a
+  // getter on Controller.prototype, so it has to be shadowed rather than set.
+  const controller = Object.create(ListController.prototype)
+  Object.defineProperty(controller, 'element', { value: element })
+  Object.defineProperty(controller, 'listTarget', { value: list })
+  controller.connect()
+
+  return {
+    controller,
+    list,
+    element,
+    // Apply the last requested scroll, i.e. let the smooth animation finish.
+    settle() {
+      const call = list.scrollTo.mock.calls.at(-1)
+      if (call) state.scrollTop = call[0].top
+    },
+    // Move the list without going through the button, as a user gesture would.
+    scrollTo(top) {
+      state.scrollTop = top
+    },
+    lastScrollTop() {
+      return list.scrollTo.mock.calls.at(-1)?.[0].top
+    },
+  }
+}
+
+describe('list_controller previous-message navigation', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('connect installs a navigator', () => {
+    const { controller } = buildController()
+    expect(controller.prevMsgNavigator).toBeTruthy()
+  })
+
+  test('walks backwards one message per click when settled', () => {
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT) // parked on the last item
+
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(3 * ITEM_HEIGHT)
+    h.settle()
+
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(2 * ITEM_HEIGHT)
+  })
+
+  test('keeps stepping back when clicked mid-animation', () => {
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT)
+
+    // Three clicks with no settle between them: the list never reaches the
+    // requested offset, which is exactly when the old geometry-only code
+    // bounced back to the item it had just left.
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(3 * ITEM_HEIGHT)
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(2 * ITEM_HEIGHT)
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(1 * ITEM_HEIGHT)
+  })
+
+  test('releases stick-to-bottom so incoming comments do not yank the view', () => {
+    const h = buildController()
+    h.controller.stickToBottom = true
+    h.scrollTo(4 * ITEM_HEIGHT)
+
+    h.controller.scrollToPreviousMessage()
+
+    expect(h.controller.stickToBottom).toBe(false)
+  })
+
+  test('does nothing when the list is empty', () => {
+    const h = buildController({ itemCount: 0 })
+
+    h.controller.scrollToPreviousMessage()
+
+    expect(h.list.scrollTo).not.toHaveBeenCalled()
+  })
+
+  test('loads older comments once past the oldest message', () => {
+    const h = buildController()
+    h.controller.allOlderLoaded = false
+    h.controller.loadOlderComments = jest.fn()
+
+    h.controller.scrollToPreviousMessage() // lands on the oldest item
+    h.settle()
+    h.controller.scrollToPreviousMessage() // nothing older in the DOM
+
+    expect(h.controller.loadOlderComments).toHaveBeenCalled()
+  })
+
+  test('stops at the oldest message when everything is already loaded', () => {
+    const h = buildController()
+    h.controller.allOlderLoaded = true
+    h.controller.loadOlderComments = jest.fn()
+
+    h.controller.scrollToPreviousMessage()
+    h.settle()
+    const before = h.list.scrollTo.mock.calls.length
+    h.controller.scrollToPreviousMessage()
+
+    expect(h.controller.loadOlderComments).not.toHaveBeenCalled()
+    expect(h.list.scrollTo.mock.calls.length).toBe(before)
+  })
+
+  describe.each(['wheel', 'touchstart', 'keydown', 'pointerdown'])(
+    'user input via %s',
+    (eventName) => {
+      test('drops the anchor so the next click resolves from where the user landed', () => {
+        const h = buildController()
+        h.scrollTo(4 * ITEM_HEIGHT)
+
+        h.controller.scrollToPreviousMessage() // anchor = c3
+        h.settle()
+
+        // User scrolls back down to the bottom themselves.
+        h.list.dispatchEvent(new Event(eventName))
+        h.scrollTo(4 * ITEM_HEIGHT)
+
+        h.controller.scrollToPreviousMessage()
+
+        // Resolved from geometry (c4 at top -> c3), not from the stale anchor.
+        expect(h.lastScrollTop()).toBe(3 * ITEM_HEIGHT)
+      })
+    }
+  )
+
+  test('a programmatic jump to the bottom drops the anchor', () => {
+    // form_controller (after sending) and the fullscreen handlers call
+    // scrollToBottom() with no user gesture. A small jump can leave the anchor
+    // inside the corridor, where geometry cannot tell it from our own in-flight
+    // scroll, so the next click would step off the stale anchor (c3 -> c2)
+    // instead of resolving from where the list actually is (c4 -> c3).
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT)
+
+    h.controller.scrollToPreviousMessage() // anchor = c3, in flight
+    expect(h.controller.prevMsgNavigator.anchorId).toBe('c3')
+
+    h.controller.scrollToBottom()
+    expect(h.controller.prevMsgNavigator.anchorId).toBeNull()
+
+    h.controller.scrollToPreviousMessage()
+    expect(h.lastScrollTop()).toBe(3 * ITEM_HEIGHT) // c3 from geometry, not c2
+  })
+
+  test('a permalink highlight jump drops the anchor', () => {
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT)
+
+    h.controller.scrollToPreviousMessage() // anchor = c3
+    expect(h.controller.prevMsgNavigator.anchorId).toBe('c3')
+
+    // highlightComment looks the target up by DOM id and scrolls it into view
+    // (jsdom has no scrollIntoView, so stub it).
+    const target = h.list.querySelector('[data-comment-id="c1"]')
+    target.id = 'comment_c1'
+    target.scrollIntoView = () => {}
+    h.controller.highlightComment('c1')
+
+    expect(h.controller.prevMsgNavigator.anchorId).toBeNull()
+  })
+
+  test('disconnect unhooks the user-input listeners', () => {
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT)
+    h.controller.scrollToPreviousMessage() // anchor = c3
+    h.settle()
+
+    h.controller.disconnect()
+    h.list.dispatchEvent(new Event('wheel'))
+
+    // Anchor survived because the listener is gone.
+    expect(h.controller.prevMsgNavigator.anchorId).toBe('c3')
+  })
+
+  test('reloading the list drops the anchor', () => {
+    const h = buildController()
+    h.scrollTo(4 * ITEM_HEIGHT)
+    h.controller.scrollToPreviousMessage()
+    expect(h.controller.prevMsgNavigator.anchorId).toBe('c3')
+
+    h.controller.creativeId = '1'
+    h.controller.fetchComments = jest.fn(() => new Promise(() => {}))
+    h.controller.loadInitialComments()
+
+    expect(h.controller.prevMsgNavigator.anchorId).toBeNull()
+  })
+})

data/app/javascript/controllers/comments/__tests__/prev_message_navigator.test.js

@@ -0,0 +1,129 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import PrevMessageNavigator from '../prev_message_navigator'
+
+// Items are ordered oldest -> newest, matching DOM order of `.comment-item`.
+// `top` is the item's viewport-relative top, as measured by the controller.
+function items(...tops) {
+  return tops.map((top, i) => ({ id: String(i), top }))
+}
+
+describe('PrevMessageNavigator', () => {
+  const VIEWPORT_TOP = 100
+
+  let nav
+
+  beforeEach(() => {
+    nav = new PrevMessageNavigator()
+  })
+
+  describe('without an anchor (geometry fallback)', () => {
+    test('steps to the previous item when the current one is flush with the top', () => {
+      // item 2 is exactly at the viewport top -> previous message is item 1
+      expect(nav.resolveTargetIndex(items(-200, -100, 100, 300), VIEWPORT_TOP)).toBe(1)
+    })
+
+    test('scrolls the partially visible item to the top first', () => {
+      // item 2 is cut off above the fold -> bring item 2 fully into view
+      expect(nav.resolveTargetIndex(items(-200, -100, 130, 330), VIEWPORT_TOP)).toBe(2)
+    })
+
+    test('starts from the last item when everything is scrolled above the fold', () => {
+      expect(nav.resolveTargetIndex(items(-300, -200, -100), VIEWPORT_TOP)).toBe(2)
+    })
+
+    test('returns -1 at the oldest item so the caller can load older comments', () => {
+      expect(nav.resolveTargetIndex(items(100, 300), VIEWPORT_TOP)).toBe(-1)
+    })
+
+    test('returns -1 for an empty list', () => {
+      expect(nav.resolveTargetIndex([], VIEWPORT_TOP)).toBe(-1)
+    })
+  })
+
+  describe('with an anchor (rapid clicks)', () => {
+    test('keeps stepping backwards while the smooth scroll is still in flight', () => {
+      // First click: item 2 is flush with the top, so we head for item 1.
+      expect(nav.resolveTargetIndex(items(-200, -100, 100, 300), VIEWPORT_TOP)).toBe(1)
+      nav.commit('1', -100)
+
+      // Second click lands mid-animation: item 1 has not reached the top yet, so
+      // geometry alone would send us back down to item 1. The anchor must win.
+      expect(nav.resolveTargetIndex(items(-150, -50, 150, 350), VIEWPORT_TOP)).toBe(0)
+    })
+
+    test('keeps stepping when the first click started from a partially visible item', () => {
+      // First click from between messages: item 2 is cut off *below* the top, so
+      // we scroll it up into place and the anchor starts below the viewport top.
+      expect(nav.resolveTargetIndex(items(-200, -100, 130, 330), VIEWPORT_TOP)).toBe(2)
+      nav.commit('2', 130)
+
+      // Second click mid-animation: item 2 is on its way down to the top. The
+      // anchor must still win, otherwise we re-target item 2 and stall.
+      expect(nav.resolveTargetIndex(items(-215, -115, 115, 315), VIEWPORT_TOP)).toBe(1)
+    })
+
+    test('survives older comments being prepended (anchor is id based)', () => {
+      // Prepending shifts scrollTop but leaves the anchor where it is on screen,
+      // so it is still on its way from -300 up to the viewport top.
+      nav.commit('c5', -300)
+      const prepended = [
+        { id: 'c3', top: -500 },
+        { id: 'c4', top: -300 },
+        { id: 'c5', top: -100 },
+      ]
+      expect(nav.resolveTargetIndex(prepended, VIEWPORT_TOP)).toBe(1)
+    })
+
+    test('falls back to geometry when the anchored comment is gone', () => {
+      nav.commit('deleted-comment', -100)
+      expect(nav.resolveTargetIndex(items(-200, -100, 100, 300), VIEWPORT_TOP)).toBe(1)
+    })
+
+    test('returns -1 when the anchor is already the oldest item', () => {
+      nav.commit('0', -100)
+      expect(nav.resolveTargetIndex(items(100, 300), VIEWPORT_TOP)).toBe(-1)
+    })
+
+    test('ignores an anchor the list has scrolled away from', () => {
+      // A programmatic jump (new message arriving, permalink highlight) moves the
+      // list without any user gesture, so nothing drops the anchor. It is now far
+      // above where it started, which our own animation can never produce - that
+      // only ever walks the anchor down towards the viewport top.
+      nav.commit('0', -100)
+      expect(nav.resolveTargetIndex(items(-900, -700, 100, 300), VIEWPORT_TOP)).toBe(1)
+    })
+
+    test('a stale anchor stops wedging the button at the oldest message', () => {
+      // Regression: anchored on the oldest item, every later click returned -1
+      // forever once there was nothing more to load, so the button went dead.
+      nav.commit('0', -100)
+      nav.resolveTargetIndex(items(100, 300), VIEWPORT_TOP)
+
+      // The list is jumped back to the bottom; clicking must resume stepping.
+      expect(nav.resolveTargetIndex(items(-900, -700, 100, 300), VIEWPORT_TOP)).toBe(1)
+    })
+  })
+
+  describe('anchor invalidation', () => {
+    test('drops the anchor when the user moves the list', () => {
+      nav.commit('1', -100)
+      nav.notifyUserInput()
+      expect(nav.anchorId).toBeNull()
+    })
+
+    test('reset clears the anchor', () => {
+      nav.commit('1', -100)
+      nav.reset()
+      expect(nav.anchorId).toBeNull()
+    })
+
+    test('after a user scroll, geometry drives the next click again', () => {
+      nav.commit('1', -100)
+      nav.notifyUserInput()
+      expect(nav.resolveTargetIndex(items(-200, -100, 130, 330), VIEWPORT_TOP)).toBe(2)
+    })
+  })
+})