ReactJS: отобразить другой элемент пользовательского интерфейса поверх редактора codemirror - PullRequest
Новая
       40

ReactJS: отобразить другой элемент пользовательского интерфейса поверх редактора codemirror

1 голос
/ 24 сентября 2019

У меня есть объект codemirror.Я хотел бы отобразить подсказку над редактором codemirror, когда курсор находится над кодом.

Пока что я могу определить, когда мышь зависла, но не могу ничего отобразить поверх редактора.Мой код ниже, у меня также есть песочница здесь 

import React from "react";
import ReactDOM from "react-dom";
import { Controlled as CodeMirror } from "react-codemirror2";


var codeSample = `
openssl rand -base64 756 > <path-to-keyfile>
chmod 400 ~/KeyFilePath`

class App extends React.Component {
  state = {
    valueTit: "Hello"
  };

  constructor() {
    super();
  this.instance = null;

  }
  _onMouseMove(e) {
    console.log("mouse moved!!!")
      this.setState({ x: e.screenX, y: e.screenY });
      var node = event.srcElement;
      console.log(node.innerText);
      return(<Tooltip id="sib" interactive='true' title="hi"></Tooltip>)
    }
  render() {
    const { valueTit } = this.state;
    return (

      <Tooltip id="sib" interactive='true' title={valueTit}>
      <div onMouseMove={this._onMouseMove.bind(this)}>
        <CodeMirror
          value= {codeSample}
          options={{
            mode: "clike",
            theme: "material",
            lineNumbers: true
          }}
          editorDidMount={editor => { this.instance = editor }}
        />
        </div>
      </Tooltip>
    );
  }
}

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

export default App;

Моя другая идея состоит в том, чтобы попытаться обернуть жетоны в подсказку?Но я не уверен, как это сделать в реакции.Я взглянул на эту реагирующую подсветку синтаксиса , которая использует синтаксический анализатор codemirror, и я считаю, что нашел код, который сизилизирует блок кода: 

    const pushElement = (token, style) => {
      elements.push(_react["default"].createElement("span", {
        className: style ? prefix + style : '',
        key: ++index
      }, token));
    };

    const mode = codeMirror.findModeByName(language);
    codeMirror.runMode(value, mode ? mode.mime : language, (token, style) => {
      if (lastStyle === style) {
        tokenBuf += token;
        lastStyle = style;
      } else {
        if (tokenBuf) {
          pushElement(tokenBuf, lastStyle);
        }

        tokenBuf = token;
        lastStyle = style;
      }
    });
    pushElement(tokenBuf, lastStyle);

    const code = _react["default"].createElement("code", {
      className: inline ? `inline ${prefix}s-${theme}` : ''
    }, elements);

    return inline ? code : _react["default"].createElement("pre", {
      className: `${className} ${prefix}s-${theme}`
    }, code);
  }

Буду ли я делать что-то вроде createElementсоздать подсказки?

...