如何在HTML元素后放置文本光标？

Question

我有一个div和一个contentEditable = true。 div内部有文本节点和一些React（HTML）节点。简单设置的代码如下：

import React from "react";
import ReactDOM from "react-dom";
import { Tag } from "antd";
import 'antd/dist/antd.css';
import "./styles.css";

function App() {
return (
    <div contentEditable={true} class="test-div">

     <Tag closable contentEditable={false} className="tag">
        Tag1
     </Tag>

     some-text

     <Tag closable contentEditable={false} className="tag">
        Tag2
     </Tag>

     some-text

     <Tag closable contentEditable={false} className="tag">
        Tag3
     </Tag>

    </div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这里也正在摆弄小提琴：https://codesandbox.io/s/93kjq4o88r

输出看起来类似于：

如您所见，尽管tag不可编辑，但光标位于标签的顶端。

我尝试了多种方法，包括：

.tag {
    cursor: none;
    caret-color: transparent;
}

但是不能按照我想要的方式工作。我不希望光标位于tag内。我该怎么办？

Answer 1

Css添加：

.text-div{
   cursor: crosshair; //your cursor
}

或JS

document.getElementsByClassName("test-div").style.cursor = "crosshair";