Как создать функционирующий элемент «вкладка» в текстовом редакторе HTML (например, tinymce) ⇐ CSS

[Anonymous]

Я пытаюсь создать элемент, похожий на таб, в текстовом редакторе React tinymce, который не сжимается. В идеале это работает как вкладка в Microsoft Word, так как я использую редактор для редактирования транскрипций в отчеты. Поэтому я сбиваю свой путь, чтобы создать пользовательский элемент вкладки, который не нарушает поток печати, когда он выбран. Когда машине сталкивается с ним, он может получить фокус курсора и не позволить многим ключам работать нормально. Или это может работать так, как должно. В любом случае, это не так гладко, как в Microsoft Word, что раздражает.

Код: Выделить всё

.mce-tab {
display: inline-block;
width: 3ch;
min-width: 3ch;
white-space: nowrap;
user-select: none;
font: inherit;
color: inherit;
background: none;
pointer-events: auto;
}
< /code>
export const HTML_TAB = `


 


`;

const handleTab = (editor) => {
editor.on("keydown", (event) => {
const { key } = event;
if (key === 'Tab') {
// Entering in the custom 'tab'-like element
event.preventDefault();
editor.insertContent(HTML_TAB);
} else {
// Check if the 'tab' is in the selection and write over it as applicable
const sel = editor.selection;
const node = sel.getNode();
if (node) {
const tabSpan = node.closest?.('.mce-tab');
if (tabSpan) {
const isPrintableKey = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
if (isPrintableKey) {
// Replace content and set cursor to appropriate point
event.preventDefault();
const charNode = document.createTextNode(key);
tabSpan.replaceWith(charNode);
const range = document.createRange();
range.setStartAfter(charNode);
range.collapse(true);
editor.selection.setRng(range);
}
}
}
}
});
}

Любая справка или советы по созданию фактической работы «вкладка», подобная функции, будет оценена.


Подробнее здесь: https://stackoverflow.com/questions/796 ... -g-tinymce