feat(TKPlugin): implemented list-item-level TK detection and positioning

packages/koenig-lexical/src/plugins/TKPlugin.jsx

@@ -1,6 +1,7 @@
 import CardContext from '../context/CardContext';
 import {$createTKNode, $isTKNode, ExtendedTextNode, TKNode} from '@tryghost/kg-default-nodes';
 import {$getNodeByKey, $getSelection, $isDecoratorNode, $isRangeSelection, TextNode} from 'lexical';
+import {$isListItemNode, $isListNode} from '@lexical/list';
 import {SELECT_CARD_COMMAND} from './KoenigBehaviourPlugin';
 import {createPortal} from 'react-dom';
 import {useCallback, useContext, useEffect, useState} from 'react';
@@ -11,6 +12,41 @@ import {useTKContext} from '../context/TKContext';
 const REGEX = new RegExp(/(^|.)([^\p{L}\p{N}\s]*(TK|Tk|tk)+[^\p{L}\p{N}\s]*)(.)?/u);
 const WORD_CHAR_REGEX = new RegExp(/\p{L}|\p{N}/u);
 
+// TK Indicator positioning constants
+const INDICATOR_OFFSET_RIGHT = -56;
+const INDICATOR_OFFSET_TOP = 4;
+
+// Node type constants
+const NODE_TYPES = {
+    LIST_ITEM: 'LI'
+};
+
+// Helper function to get effective top-level element, treating list items as containers
+function getEffectiveTopLevelElement(node) {
+    const topLevel = node.getTopLevelElement();
+
+    if (!topLevel) {
+        return null;
+    }
+
+    // If the top-level element is not a list, return it directly
+    if (!$isListNode(topLevel)) {
+        return topLevel;
+    }
+
+    // Find the containing list item for list nodes
+    let currentNode = node;
+    while (currentNode?.getParent()) {
+        if ($isListItemNode(currentNode)) {
+            return currentNode;
+        }
+        currentNode = currentNode.getParent();
+    }
+
+    // Fallback to top-level element if no list item found
+    return topLevel;
+}
+
 function TKIndicator({editor, rootElement, parentKey, nodeKeys}) {
     const tkClasses = editor._config.theme.tk?.split(' ') || [];
     const tkHighlightClasses = editor._config.theme.tkHighlighted?.split(' ') || [];
@@ -20,14 +56,18 @@ function TKIndicator({editor, rootElement, parentKey, nodeKeys}) {
     // position element relative to the TK Node containing element
     const calculatePosition = useCallback(() => {
         let top = 0;
-        let right = -56;
+        let right = INDICATOR_OFFSET_RIGHT;
 
         const rootElementRect = rootElement.getBoundingClientRect();
 
-        const positioningElement = containingElement.querySelector('[data-kg-card]') || containingElement;
+        // Determine positioning element based on container type
+        const positioningElement = containingElement.nodeName === NODE_TYPES.LIST_ITEM
+            ? containingElement
+            : containingElement.querySelector('[data-kg-card]') || containingElement;
+
         const positioningElementRect = positioningElement.getBoundingClientRect();
 
-        top = positioningElementRect.top - rootElementRect.top + 4;
+        top = positioningElementRect.top - rootElementRect.top + INDICATOR_OFFSET_TOP;
 
         if (positioningElementRect.right > rootElementRect.right) {
             right = right - (positioningElementRect.right - rootElementRect.right);
@@ -83,12 +123,17 @@ function TKIndicator({editor, rootElement, parentKey, nodeKeys}) {
         }
 
         nodeKeys.forEach((key) => {
+            const element = editor.getElementByKey(key);
+            if (!element) {
+                return;
+            }
+
             if (isHighlighted) {
-                editor.getElementByKey(key).classList.remove(...tkClasses);
-                editor.getElementByKey(key).classList.add(...tkHighlightClasses);
+                element.classList.remove(...tkClasses);
+                element.classList.add(...tkHighlightClasses);
             } else {
-                editor.getElementByKey(key).classList.add(...tkClasses);
-                editor.getElementByKey(key).classList.remove(...tkHighlightClasses);
+                element.classList.add(...tkClasses);
+                element.classList.remove(...tkHighlightClasses);
             }
         });
     };
@@ -115,6 +160,11 @@ function TKIndicator({editor, rootElement, parentKey, nodeKeys}) {
         };
     }, [rootElement, containingElement, calculatePosition]);
 
+    // Early return if containing element is not available (after all hooks)
+    if (!containingElement) {
+        return null;
+    }
+
     const style = {
         top: `${position.top}px`,
         right: `${position.right}px`
@@ -157,7 +207,8 @@ export default function TKPlugin() {
                     if (mutation === 'destroyed') {
                         removeEditorTkNode(editor.getKey(), tkNodeKey);
                     } else {
-                        const parentNodeKey = $getNodeByKey(tkNodeKey).getTopLevelElement()?.getKey();
+                        const effectiveTopLevel = getEffectiveTopLevelElement($getNodeByKey(tkNodeKey));
+                        const parentNodeKey = effectiveTopLevel?.getKey();
                         const topLevelNodeKey = parentEditorNodeKey || parentNodeKey;
                         addEditorTkNode(editor.getKey(), topLevelNodeKey, tkNodeKey);
                     }
@@ -247,7 +298,7 @@ export default function TKPlugin() {
         const parentContainer = editor.getElementByKey(parentKey);
 
         if (!parentContainer) {
-            return false;
+            return null;
         }
 
         return (

packages/koenig-lexical/test/e2e/plugins/TKPlugin.test.js

@@ -115,6 +115,42 @@ test.describe('TK Plugin', async function () {
             await expect(page.getByTestId('tk-indicator')).toHaveCount(3);
         });
 
+        test('creates separate TK indicators for each list item containing TK', async function () {
+            await focusEditor(page);
+
+            await page.keyboard.type('- First item with TK');
+            await page.keyboard.press('Enter');
+            await page.keyboard.type('Second item with TK');
+            await page.keyboard.press('Enter');
+            await page.keyboard.type('Third item without placeholder');
+            await page.keyboard.press('Enter');
+            await page.keyboard.type('Fourth item with TK');
+
+            // Should have 3 separate TK indicators, one for each list item containing TK
+            await expect(page.getByTestId('tk-indicator')).toHaveCount(3);
+        });
+
+        test('positions TK indicators correctly for individual list items', async function () {
+            await focusEditor(page);
+
+            await page.keyboard.type('- First TK item');
+            await page.keyboard.press('Enter');
+            await page.keyboard.type('Second TK item');
+
+            const indicators = page.getByTestId('tk-indicator');
+            await expect(indicators).toHaveCount(2);
+
+            // Get positions to verify they're different (one per list item)
+            const firstIndicator = indicators.first();
+            const secondIndicator = indicators.last();
+
+            const firstBox = await firstIndicator.boundingBox();
+            const secondBox = await secondIndicator.boundingBox();
+
+            // The indicators should have different vertical positions
+            expect(Math.abs(firstBox.y - secondBox.y)).toBeGreaterThan(10);
+        });
+
         test('clicking the indicator selects the first TK node in the parent', async function () {
             await focusEditor(page);
             await page.keyboard.type('TK and TK and TK');