josdejong/jsoneditor

Error tooltip position offset when editor inside container with css `contain: layout;`

Ouverte

#1 147 ouverte le 23 oct. 2020

 (2 commentaires) (0 réaction) (0 personne assignée)JavaScript (2 078 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (12 263 étoiles)
Métriques de merge PR
 (Métriques PR en attente)

Description

This seems like an edge case, but I'm using a huge third-party component utilising css like contain: layout; or contain: content; and need to embed the editor inside one of these containers. When I do so tooltips either disappear (are hidden) or are positioned with undesired offsets.

Here is a small example:

  1. Create a new TS CRA project with npx create-react-app je_test --template typescript
  2. Create the Page component and associated files, as detailed below and use <Page/> inside App.
  3. In the editor, make a syntax mistake and mouse-over the error icon in the left bar.
  4. Notice the tooltip offset (which appears offset from the desired position)

index.css

.page {
  background: orange;
  display: flex;
  height: 100%;
}

.section--menu {
  width: 260px;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

.section--info {
  display: flex;
  background: blue;
  width: calc(100% - 260px);
  contain: layout;
}

.section--live {
  background: green;
}

Page.tsx

import React from "react";
import JsonEditorReact from "./JsonEditorReact";
import "./index.css";

const json = {
  name: "Felix",
  status: "available",
  petType: "cat",
  huntingSkill: "adventurous",
};

const testStr = JSON.stringify(json, null, 2);

class Page extends React.Component {
  render() {
    return (
      <div className="page">
        <div className="section--menu"></div>
        <div className="section--info">
          <div className="section--live">
            <JsonEditorReact text={testStr} />
          </div>
        </div>
      </div>
    );
  }
}

export default Page;

JsonEditorReact.tsx

import * as React from "react";
import JSONEditor from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";

interface Editor extends Object {
  setText: (text?: string) => void;
}

export default class JsonEditorReact extends React.Component<{ text: string }> {
  container: HTMLDivElement | null = null;
  componentDidMount() {
    const editor: Editor = new JSONEditor(this.container, { mode: "code" });
    editor.setText(this.props.text);
  }
  render() {
    return <div ref={(elem) => (this.container = elem)} />;
  }
}

Guide contributeur