Три Contenteditable Divs, которые соединяются как одно текстовое поле большего размера с maxChars, равным 274. ⇐ Html

[Anonymous]

Я создаю инструмент, который поможет мне с твитами, состоящими из нескольких частей, когда мне нужно разделить ограничения на количество символов на отдельные твиты. Я хочу, чтобы он был построен так, чтобы, если я скопирую большой текст или свободно наберу его в первый элемент div (Tweet1), он разобьет его по мере необходимости.
Я пробовал использовать скрипт использование ИИ, но я считаю, что на этой странице это запрещено, поэтому я не стал делиться этим ниже. После бесчисленных попыток и настроек я не могу заставить это работать очень хорошо.
Когда я использую свой текущий код, возвратное пространство работает совершенно шатко и добавляет больше строк пробелов ниже, а не удаляет его. Первый div допускает только один символ за раз, когда я печатаю перед перемещением вниз по строке. Если я вставлю текст в первый div, он переполнится ниже, но добавит большие пустые строки. Если я попытаюсь удалить или отредактировать, будет добавлено больше строк или удален конец этого элемента div вместо того места, где находится морковка.
Стиль:

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

    .Tweet {
height: 25%;
padding: 10px;
font-size: 14px;
overflow: auto;
word-wrap: break-word;
white-space: pre-wrap;
border: 1px solid black;
margin: 10px;
}

Код:

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

    Tweet 1

Tweet 2

Tweet 3

Скрипт:

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

const Tweet1 = document.getElementById("Tweet1");
const Tweet2 = document.getElementById("Tweet2");
const Tweet3 = document.getElementById("Tweet3");
const maxChars = 274;
const urlCharCount = 23;

const tweets = [Tweet1, Tweet2, Tweet3];

tweets.forEach((div, index) => {
div.addEventListener("input", () => handleInput(index));
div.addEventListener("keydown", (e) => handleBackspace(e, index));
div.addEventListener("paste", handlePaste);
});

function handleInput(index) {
redistributeText();
}

function handleBackspace(event, index) {
const currentDiv = tweets[index];
if (event.key === "Backspace" && currentDiv.innerText.trim() === "" && index > 0) {
event.preventDefault();
const previousDiv = tweets[index - 1];
previousDiv.focus();
moveCaretToEnd(previousDiv);
redistributeText();
}
}

function handlePaste(event) {
event.preventDefault();
const text = (event.clipboardData || window.clipboardData).getData("text/plain");
const targetDiv = event.target;

// Insert pasted text and redistribute
const selection = window.getSelection();
if (selection.rangeCount) {
const range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createTextNode(text));
redistributeText();
}
}

function redistributeText() {
const allText = tweets.map(div => div.innerText).join("\n");
const words = splitTextIntoWordsAndNewLines(allText);
let remainingWords = [...words];

tweets.forEach((div, index) => {
if (index < tweets.length - 1) {
const [visibleWords, remaining] = fitWordsWithUrlHandling(remainingWords, maxChars);
div.innerText = visibleWords.join("");
remainingWords = remaining;
} else {
div.innerText = remainingWords.join("");
}
});

// Restore caret position if redistribution affected typing
restoreCaret();
}

function splitTextIntoWordsAndNewLines(text) {
const wordsAndLines = text.match(/([^\s\n]+|\s+|\n)/g) || [];
return wordsAndLines;
}

function fitWordsWithUrlHandling(words, limit) {
let visibleWords = [];
let charCount = 0;

for (const word of words) {
const isUrl = isValidUrl(word.trim());
const wordLength = word.trim() === "\n" ? 1 : isUrl ? urlCharCount : word.length;

if (charCount + wordLength   {
const range = document.createRange();
range.selectNodeContents(div);
range.setStart(focusNode, focusOffset);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
});
}

// Initialize divs
tweets.forEach(div => {
div.innerText = "";
});

Скриншот макета
Я могу либо вставить большой абзац, либо произвольно набрать текст и разделить его. текст на три отдельных Contenteditable Divs, чтобы Tweet1 и Tweet2 не допускали более 274 символов, прежде чем перейти к следующему div ниже. Я хочу, чтобы он не обрезал слова, поэтому использовал слово-разрыв, чтобы продолжать двигаться вниз. Я хочу, чтобы три элемента div плавно перетекали между ними, поэтому, если я удалю или добавлю дополнительный текст в любой из трех разделов, он будет вставлять или вытягивать текст в другой элемент div или из него по мере необходимости.

Подробнее здесь: https://stackoverflow.com/questions/793 ... axchars-of