How do I insert text within a cell at cursor position?

How do I insert text within a cell at cursor position?

Posted by: alex.grant1 on 9 April 2024, 8:58 pm EST

• 

  alex.grant1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 April 2024, 8:58 pm EST - Updated 9 April 2024, 8:59 pm EST

  Is it possible to insert text in a cell at the cursor position? At the moment when I try to inert text in a cell the cell’s current content is over written.

  I’ve read through the documentation but can’t find anything that shows how to do this.

  Any help would be much appreciated.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 10 April 2024, 8:42 pm EST

  Hi,

  Based on my understanding, when you start typing in a cell that has existing content, the content is cleared, and text will be added from scratch when typing. You can refer to the attached video “issue.mp4” to understand the behavior I’m referring to.

  This behavior is by design and mirrors Excel’s behavior. To begin adding text from the end to the cell that has existing content, you can double-click on the cell and start typing. This will allow text to be appended from the end. Alternatively, if you prefer text to be added from the end as soon as typing starts, you can achieve this by handling the “keydown” event. Whenever typing begins, you can insert the existing content into the editing element first time and move the cursor to the end. Refer attached snippet, video “Video.mp4” and sample.

  // event 
      spread.getHost().addEventListener("keydown", (e) => {
          const sheet = spread.getActiveSheet();
          const activeRow = sheet.getActiveRowIndex();
          const activeCol = sheet.getActiveColumnIndex();
  
          const activeCellValue = sheet.getValue(activeRow, activeCol);
  
          const editorEleText = document.querySelector('[gcuielement="gcEditingInput"]').textContent;
  
          if (!editorEleText) {
              const editorEle = document.querySelector('[gcuielement="gcEditingInput"]');
  
              // Append text to the input value
              if (activeCellValue) {
                  editorEle.textContent += activeCellValue;
                  // Set focus on the input
                  editorEle.focus();
  
                  const selection = window.getSelection();
                  const range = document.createRange();
                  range.selectNodeContents(editorEle);
                  range.collapse(false); // Collapse the range to the end
                  selection.removeAllRanges();
                  selection.addRange(range);
              }
          }
      }, true)

  Video: Video.zip

  Issue video: Issue.zip

  Sample: https://jscodemine.mescius.io/share/wYSeuALp_kqE_q_h8UvYCg/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fpackage.json"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Regards,
  
  Priyam