Hi @Daniel Johnson,

You can achieve this using JavaScript. You’ll need to capture the highlighted text using window.getSelection(). To associate the highlighted text with the paragraph ID, you can pass the paragraph’s ID as a data attribute in your HTML elements. Here’s a simple example:

document.addEventListener('mouseup', function() {

    let selectedText = window.getSelection().toString();

    if (selectedText) {

        let paragraphId = event.target.getAttribute('data-paragraph-id');

        console.log('Selected text:', selectedText, 'Paragraph ID:', paragraphId);

    }

});

Make sure to add the data-paragraph-id attribute to your paragraph elements in the list widget. This way, you’ll capture both the highlighted text and the corresponding paragraph ID.

hope this helps!

Thanks for the response @Abhinav Shilwant ! How do I capture the text so that I can use it for processing though and not just print it to the console?

I ended up using @Abhinav Shilwant's JavaScript as the jumping off point. The feature needs to be available in a specific step of a form that used the Navigation/Wizard widget. So, when the user gets to that step this JS runs in the client action that starts that step:

window.handleMouseUp = function(event) {
    let selectedText = window.getSelection().toString();

    if (selectedText) {
        let targetElement = event.target.closest('[data-paragraph-id]');
        if (targetElement) {
            let paragraphIdAttr = targetElement.getAttribute('data-paragraph-id');
            let speakerAttr = targetElement.getAttribute('data-speaker');

            let paragraphId = parseInt(paragraphIdAttr, 10); 
            if (!isNaN(paragraphId)) {
                $actions.Step3_HandleTextSelection(selectedText, paragraphId, speakerAttr);
            }
        }
    }
};

document.addEventListener('mouseup', window.handleMouseUp);

I had to define handleMousUp globally so that I could remove the event listener at the end of that step using this one line in the client action that ends that step:

document.removeEventListener('mouseup', window.handleMouseUp);

And then I just had to setup the Step3_HandleTextSelection client action which just opens a popup and uses the selected text and other attributes in a server action.

Some other notes, to target the text element and get the paragraph ID or any other entity attributes associated to that item I had to add the custom attributes to my Expression widget, not to the outer container.