textarea 自动换行实现

note.mk 笔记在使用中，会遇到一行文字太长，而不好复制的问题或者滚动条左右拖着查看的难题。解决这个问题很简单加一个warp="hard" 就好了，但是如果要左边的行数也能对齐的话，就需要花一点小心思了。

用来实现的是采用画布来计算每个文字的宽度，文字宽度累加，超过 textarea 的可视宽度后进行换行。同时在数组设置一个值，记录触发换行的次数，然后左侧行数根据文档换行的次数进行空行。这样可以做到了和实际行数的一致。

以下代码非拿到即用的。了解实现的方法，具体代码可给到 AI 实现。具体实现效果请移步 https://note.mk

let text = textarea.value;
let textareaWidth = textarea.clientWidth - 30; // 获取 textarea 的实际宽度
let lines = text.split("\n");
let results = [];

lines.forEach((line, index) => {

let currentWidth = 0;
let wrapCount = 0; // 记录触发换行的次数

for (let char of line) {
    // 动态计算每个字符的宽度
    let charWidth = context.measureText(char).width;// 获取字符宽度
    currentWidth += charWidth;// 累加字符宽度

    // 如果当前宽度超出 textarea 宽度，记录一次换行
    if (currentWidth > textareaWidth) {
        wrapCount++;// 记录换行次数
        currentWidth = charWidth; // 重置宽度，假设当前字符是下一行第一个字符
    }
}

results.push({// 记录行号、内容、换行次数
    line: index + 1,
    content: line,
    wrapCount, // 记录换行次数
    });
});

let lineNumberArea = contentline;//
let outarr = [];
results.forEach((result) => {
outarr.push(result.line.toString());//
    // 根据 wrapCount 添加对应数量的空行
    for (let i = 0; i < result.wrapCount; i++) {
        outarr.push(""); // 添加空行，保持行号和内容的对应关系
    }
});
lineNumberArea.value = outarr.join("\n");// 更新行号区域的内容