raymondclowe / AutoSuggestAI

A wordpress plugin that automatically suggests words in the editor as you type
1 stars 1 forks source link

Improve Cursor Positioning After Accepting Suggestion #21

Closed raymondclowe closed 1 month ago

raymondclowe commented 1 month ago

Description:

Currently, after pressing the Tab key to accept an AI-generated suggestion, the cursor sometimes fails to move to the end of the newly inserted text. This requires the user to manually click at the end of the paragraph to continue writing. This minor inconvenience disrupts the writing flow.

Expected Behavior:

After accepting a suggestion using the Tab key, the cursor should automatically position itself at the end of the inserted text, allowing the user to seamlessly continue writing.

Steps to Reproduce:

  1. Activate the AutoSuggestAI plugin.
  2. Begin writing in a paragraph within the Gutenberg editor.
  3. Wait for an AI suggestion to appear.
  4. Press the Tab key to accept the suggestion.
  5. Observe that the cursor may not be positioned at the end of the inserted text.

Proposed Solution:

Investigate the JavaScript code responsible for handling the Tab key press and insertion of the suggested text. Ensure that the logic includes explicitly setting the cursor position to the end of the newly added content. This might involve using JavaScript's Selection and Range objects to manipulate the cursor position within the editable content area.

Additional Context:

This issue is a good starting point for beginners as it involves a focused code modification within a specific area of the plugin's functionality. It provides an opportunity to learn about handling user input, manipulating the DOM, and working with text selection in JavaScript.

Possible Implementation:

Within the autosuggestai.js file, locate the function that handles the Tab key press. After the suggestion is inserted into the text, add code to:

  1. Get the current selection.
  2. Create a new range.
  3. Set the start and end positions of the range to the end of the inserted text.
  4. Collapse the range to the end.

Example Code Snippet (Conceptual):

// ... existing code ...

// After inserting the suggestion
const selection = window.getSelection();
const range = document.createRange();
range.setStart(paragraphElement, paragraphElement.childNodes.length); // Assuming paragraphElement is the container for the text
range.setEnd(paragraphElement, paragraphElement.childNodes.length);
selection.removeAllRanges();
selection.addRange(range);

// ... remaining code ...

Acceptance Criteria:

Labels:

Assigned To:

(Assign to a beginner contributor)

raymondclowe commented 1 month ago

Above is from Gemini FLash 1.5 Pro experimental. It is very bad and misses key points. The suggestios are not good. It doesn't know about how the WP block editor deals with cursor positions.