使monaco编辑器的诊断窗口超出分配面板

Question

我通过 https://github.com/johnwalley/allotment制作了一个可拖动的分割面板。

在面板面板中，我有一个摩纳哥编辑器。当我将鼠标悬停在摩纳哥编辑器上时，会出现一个诊断窗口。目前，即使

.monaco-hover { z-index: 1000 !important }

中有

style.css

，诊断窗口也不会超过第一个面板。有谁知道如何使诊断窗口超过第一个面板？

CodeSandbox：https://codesandbox.io/s/reset-forked-7wvrbj?file=/src/App.js

import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";

import "./style.css";

import Editor, { monaco } from "@monaco-editor/react";

monaco
  .init()
  .then((monaco) => {
    monaco.languages.registerHoverProvider("html", {
      provideHover: function (model, position) {
        console.log(position);
        return {
          range: new monaco.Range(
            1,
            1,
            model.getLineCount(),
            model.getLineMaxColumn(model.getLineCount())
          ),
          contents: [
            { value: "**SOURCE**" },
            { value: "hey man, how are you?" }
          ]
        };
      }
    });
  })
  .catch((error) =>
    console.error("An error occurred during initialization of Monaco: ", error)
  );

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toExpand: true
    };
    this.myRef = React.createRef();
  }

  handleChange = (sizes) => {
    if (sizes.length > 1) {
      if (sizes[1] < 31) {
        this.setState({ toExpand: true });
      } else {
        this.setState({ toExpand: false });
      }
    }
  };

  render() {
    return (
      <div
        style={{
          minWidth: 200,
          height: "100vh",
          overflowX: "auto",
          width: "auto",
          margin: "0px 0px 0px 0px"
        }}
      >
        <Allotment
          vertical
          onChange={this.handleChangeAllotment}
          ref={this.myRef}
        >
          <Allotment.Pane>
            <Editor
              height="30vh"
              language="html"
              value={`
<section>
  <div>
    <span>
      {{ some_value }}
    </span>
  </div>
</section>
    `}
              options={{
                selectOnLineNumber: true,
                lineNumbersMinChars: 0,
                glyphMargin: true,
                readOnly: true,
                hover: {
                  enabled: true
                }
              }}
            />
          </Allotment.Pane>
          <Allotment.Pane preferredSize="0%" minSize={20}>
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
            short <br /> short <br />
          </Allotment.Pane>
        </Allotment>
      </div>
    );
  }
}

Answer 1

我不确定你所说的诊断窗口是什么意思，但我假设它是显示“嘿伙计，你好吗？”的框当代码悬停时，我也会假设您希望该框显示在面板上，其中有“短”文本。如果这就是你想要的，那么它没有显示在另一个面板上的原因似乎是因为父窗口有overflow: hidden，你需要做的就是将面板overflow

更改为

visible

。为此，您可以使用此 CSS：

...
div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"] {
  overflow: visible;
}

div[data-testid="split-view-view"][data-testid="split-view-view"][data-testid="split-view-view"]:nth-child(2) {
  background: white;
}
...

为什么我重复

[data-testid="split-view-view"]

这么多次？这是为了增加规则的特异性（或者，您可以将

!important

 添加到 

overflow: visible

 中，而不重复 

[data-testid="split-view-view"]

）。至于为什么第二个面板的背景是白色的，是因为当不隐藏溢出时，第一个面板的元素会与第二个面板重叠。

这

是工作代码和盒子叉子。

我想通了，所以

Answer 2

有

position: fixed