Как сделать редактор contenteditable на ReactJS с конвертацией текста обратно в json файл?

Question

[Username]

Добрый день!
Ко мне на вход приходит строка, которую я парсю и разбиваю на лексемы, в итоге у меня получается двумерный массив, где каждый элемент массива это объект который должен быть в строке.

Пример:

[
	// первая строка
	[
		{type: 'text', value: 'Привет'},
		{type: 'tag', value: 'get_users'},
	],
	// вторая строка
	[
		{type: 'text', value: 'мир'},
	],
]

Что я вывожу: Все теги я помечаю как contenteditable="false", чтобы их можно было просто удалить
Как это рендерится:

<div contenteditable="true" class="textarea">
	<div>Привет <span class="tag tag-blue" contenteditable="false">get_users</span></div>
	<div>мир</div>
</div>

Вопросы

1. Как мне при редактировании строки редактировать её в json файле?
   
2. Если к примеру за тегом get_users пользователь захочет добавить текстовое поле, как мне понять это событие и добавить новый тип текст за объектом с типом tag в двумерный массив?
   

Подытожу: Как мне научиться редактировать нужный объект в массиве и добавлять новый в случае необходимости, либо по переносу строки?

Comments

[Павел Корнилов]

А что, REACT не умеет кодировать из html самостоятельно в свои объекты?
Если передать ему содержимое блока?
https://codepen.io/KorniloFF/pen/mvjWEv?editors=1111

[Username]

Павел Корнилов, Спасибо, точно!
Проблема ещё в том что курсор у тега span в самом крайнем правом углу

[Павел Корнилов]

Username, а так? - https://codepen.io/KorniloFF/pen/mvjWEv?editors=1111

[Username]

Павел Корнилов, а как можно заблокировать к редактирования span элементы?

[Павел Корнилов]

Username, так вы определитесь: либо вам нужен курсор на редактируемом элементе, либо элемент будет заблокирован для редактирования. Третьего варианта нет, предыдущие 2 - мы уже рассмотрели.

[Username]

Павел Корнилов, Исправил косяк добавлением пустого span блока.
Только вопрос при добавлении элемента через команду

e.preventDefault();
document.execCommand("insertText", false, "hi");

Вставляет в начало строки, а не в то место где стоит курсор

[Павел Корнилов]

Username, место вставки курсора можно программно корректировать. Но в формате комментариев я не могу конкретизировать это утверждение.