JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="text" style="height:200px;width:100%;">
Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save.

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or save. 

Try scroll and move the cursor and then refresh the page. You will see that the scroll and cursor positions have been memorized. The textbox is also auto-focused so that the editing position is completely intact after a page refresh or...

JavaScript

/* 
 * This recipe memorizes both the current scroll and cursor positions when editing using
 * local storage. The scroll/cursor positions are therefore memorized after hitting 
 * "Save and edit", or a page refresh. Each PmWiki page has a separate local storage,
 * which means the scroll/cursor positions are memorized separately for each page.
 *
 * This program is free software; you can redistribute it
 * and/or modify it under the terms of the GNU General
 * Public License as published by the Free Software
 * Foundation; either version 3 of the License, or (at your
 * option) any later version. Available at
 * https://www.gnu.org/licenses/gpl.txt
 *
 * Copyright 2016 Ling-San Meng (f95942117@gmail.com)
 * Version 20160728
 */

var EditPosFix = {
  pagename: '',
  action: 'edit',

  // Set a local storage item "name" with key/value pair "key" and "value".
  // If "key" is null then the item is treated as a simple variable; otherwise it is an 
  // array. If "value" is null then the local storage is deleted in the former case; the 
  // key entry is deleted in the latter case.
  setStorageByKey: function(name, key, value) {
    if (key == null) {
      if (value == null) {
        localStorage.removeItem(name);
      } else {
        localStorage.setItem(name, value);
      }
    } else {
      var content = JSON.parse(localStorage.getItem(name));

      if (content == null) {
        content = new Object();
      }
      if (value == null) {
        delete content[key];
      } else {
        content[key] = value;
      }
      localStorage.setItem(name, JSON.stringify(content));
    }
  },

  // Get the value of key "key" in local storage item "name"
  // If "key" is null then the whole content of "name" is returned;
  getStorageByKey(name, key) {
    if (key == null) {
      return JSON.parse(localStorage.getItem(name));
    }

    try {
      var value = JSON.parse(localStorage.getItem(name))[key];
    } catch (e) {}

    return value;
  },

  // Set the...