React Light 代码编辑器与选项卡有问题答案

【问题标题】：React light code editor having issues with tabReact Light 代码编辑器与选项卡有问题
【发布时间】：2021-10-06 13:30:42
【问题描述】：

我使用this tutorial 在我的应用程序中添加了一个轻量级代码编辑器。 PrismJS 和教程添加的功能都运行良好，但是当我从其他地方粘贴一些代码时遇到问题。在某些行中，制表符的作用类似于输入中的制表符，但在输出中却是一个空格，这导致两个文本彼此不对齐。

我尝试将我的 textarea（输入）放在 pre 标记中，我尝试更改它的空白或字间距 CSS 样式，但没有任何改进。

我是否应该创建一个正则表达式来将这些选项卡放在任何地方的简单空间中？对我来说，这看起来有点矫枉过正。

这是教程中的代码：

import React, { useState, useEffect } from "react";
import Prism from "prismjs";

const CodeEditor = props => {
  const [content, setContent] = useState(props.content);

  const handleKeyDown = evt => {
    let value = content,
      selStartPos = evt.currentTarget.selectionStart;

    console.log(evt.currentTarget);

    // handle 4-space indent on
    if (evt.key === "Tab") {
      value =
        value.substring(0, selStartPos) +
        " " +
        value.substring(selStartPos, value.length);
      evt.currentTarget.selectionStart = selStartPos + 3;
      evt.currentTarget.selectionEnd = selStartPos + 4;
      evt.preventDefault();

      setContent(value);
    }
  };

  useEffect(() => {
    Prism.highlightAll();
  }, []);

  useEffect(() => {
    Prism.highlightAll();
  }, [props.language, content]);

  return (
    <div className="code-edit-container">
      <textarea
        className="code-input"
        value={content}
        onChange={evt => setContent(evt.target.value)}
        onKeyDown={handleKeyDown}
      />
      <pre className="code-output">
        <code className={`language-${props.language}`}>{content}</code>
      </pre>
    </div>
  );
};

export default CodeEditor;

.code-edit-container {
  position: relative;
  height: 500px;
  border: 1px solid hsl(0, 0%, 60%);
  background-color: hsl(212, 35%, 95%);
  margin: 1em 0;
}

.code-input,
.code-output {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
  border: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 0.8rem;
  background: transparent;
  white-space: pre-wrap;
  line-height: 1.5em;
  word-wrap: break-word;
  font-size: 1rem;
}

.code-input {
  opacity: 1;
  margin: 0;
  color: hsl(0, 0%, 40%);
  resize: none;
}

.code-output {
  pointer-events: none;
  z-index: 3;
  margin: 0;
  overflow-y: auto;
}

code {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1rem;
  display: block;
  color: hsl(0, 0%, 40%);
  font-size: 0.8rem;
  font-family: "PT Mono", monospace;
}

/* overrides */
.code-edit-container :not(pre) > code[class*="language-"],
.code-edit-container pre[class*="language-"] {
  background: transparent;
  margin: 0;
}

编辑：我希望我的输入和输出文本彼此重叠（就像在教程中一样），让我的用户认为他们正在编辑输出（带有突出显示关键字的输出）。但是现在，当我将一些代码粘贴到其他地方时，选项卡会弄乱输入（文本前有更多空白）和输出之间的对齐方式。所以当用户试图选择一个单词时，他的光标可能不在它看起来的单词上。

【问题讨论】：

实际上并不清楚你在这里问什么。尝试更新您的问题，以更清楚您真正需要帮助的内容。也许描述你在做什么，你认为会发生什么，以及实际发生了什么。如果这与 UI 中的某些内容有关，那么屏幕截图可能会有所帮助。
好的，我想我现在明白了。将来提前说明您的问题的背景会很有帮助。类似于：“我使用 z-index 创建了一个 textarea 输入，并在其顶部直接输出一个预输出。文本应该在它们之间对齐，因此用户编辑总是发生在正确的位置，但是当我使用标签粘贴代码时，文本会错位。”这将对您的问题的可读性产生巨大影响。我认为您应该在粘贴时将制表符转换为空格，就像教程在按下制表键时所做的那样。
好吧，对不起！你能重新打开我的问题吗？

标签： javascript html css reactjs

【解决方案1】：

我使用了相同的教程并遇到了同样的问题。解决方案是在 .code-input 中添加这行 CSS：

tab-size: 4;

标签只是在两个组件上具有不同的大小。

【讨论】：