Skip to content

Cursor jumping to the end #285

@jackwshepherd

Description

@jackwshepherd

I am 100% sure there is a fix for this as there have been previous posts on this: #160

However, I don't understand how to implement the resolution. Every time the div class is updated, the cursor jumps to the end...anyone can help?


const processHTML = (paras) => {
    const htmlParas = !paras.includes("<div>") ? `<div>${paras}</div>` : paras;

    const result = htmlParas.replace(/<div>(.*?)<\/div>/g, (match, content) => {
      if (content.startsWith("### "))
        return `<div class="header-3">${content}</div>`;
      if (content.startsWith("## "))
        return `<div class="header-2">${content}</div>`;
      if (content.startsWith("# "))
        return `<div class="header-1">${content}</div>`;

      return match;
    });

    setParagraphs(result);
  };

 <ContentEditable
              innerRef={bottomDivRef}
              className="textarea-input"
              onChange={(event) => {
                processHTML(sanitizeHtml(event.target.value));
              }}
              html={paragraphs}
              onPaste={(paste) => console.log(paste)}
              onMouseOver={trackCursor}
              onKeyDown={trackCursor}
              contentEditable={true}
              onClick={trackCursor}
            />

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions