Pricing Blog

[Resolved] Help with custom action and Selection API

  • tomthebigtree-1290358679719383060

    Tom Ireland

    1 year ago

    Does anyone in the community or toddle-hero team have experience with the Selection API? If so, I'm looking for your help with solving a problem in my toddle rich text editor.

    TLDR: I'm looking for a way to check a node type before setting a range with offset (to move cursor to a specific position). If it's a text node, set the cursor based on the offset; if an element node, figure out a way to get a different offset.

    Video explanation: https://youtu.be/c7gsybOpUUE
    1
  • tomthebigtree-1290566915466465364

    Tom Ireland

    1 year ago

    No further help needed - fixed it.

    /**
    * @param {Args} args
    * @param {Ctx} ctx
    */
    function setCursorAtEnd ({node_id, offset}) {
    const range = document.createRange();
    const node = document.getElementById(node_id);
    const child_node = node.childNodes[0];

    // Check for child node
    if (child_node) {
    range.setStart(child_node.firstChild, offset); // If there is a child node, it's a span, so set the offset based on the text node
    } else {
    range.setStart(node, offset); // Otherwise, set the offset based on the node
    }

    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    }
  • tomthebigtree-1290567489968672829

    Tom Ireland

    1 year ago

    [Resolved] Help with custom action and Selection API
  • tomthebigtree-1290567976629698613

    Tom Ireland

    1 year ago