Problem with autocompletion tooltip display within SVG

v6
1

I have a problem with the display of the autocompletion tooltip when I embed an EditorView within an SVG element (by embedding the view in an SVG ForeignObject. After a bunch of debugging I realized that the position of the tooltip was far from the text and in some cases not even visible on the screen. The degree of the incorrect offset seems to be directly related to the SVG’s position on the screen. I.e., CodeMirror appears to add the X and Y values of the SVG element (with respect to the browser window) to the X and Y coordinates of the autocompletion element.

Here is some relatively simple code to demonstrate the issue:

Put the following HTML in your page:

  <div id="codeMirrorDiv" style="width: 300px; height: 300px; background-color: antiquewhite">
    <svg id="codeMirrorSvg" style="width: 250px; height: 250px; background-color: grey">
      <foreignObject id="foreignObject" x="0" y="0" height="200" width="200" />
    </svg>
  </div>

And execute the following JavaScript function (e.g. in your document loaded event):

const setupCodeMirrorEditor = function() {
    const widthNum = 200;
    const widthStr = widthNum.toString() + 'px';
    const heightNum = 200;
    const heightStr = heightNum.toString() + 'px';
    const backgroundColor = 'beige';
    const divElement = document.createElement('div');
    divElement.style.height = heightStr;
    divElement.style.width = widthStr;
    divElement.style.backgroundColor = backgroundColor;
    const foreignObject = document.getElementById('foreignObject');
    let view = new EditorView({
        doc: 'foo();',
        parent: divElement,
        extensions: [basicSetup, javascript()]
    })
    foreignObject.appendChild(divElement);
    const codeMirrorSvg = document.getElementById('codeMirrorSvg');
    codeMirrorSvg.appendChild(foreignObject);
}

Then start typing something which will produce an autocomplete tooltip, you should see the problem. If the div above, containing the code editor, is near the top left of the browser window you’ll see relatively little mis-positioning of the tooltip. If the div is further away from the top left, you will see more a significant offset and possible not even be able to see the autocomplete tooltip. However, you should be able to see it in the browser’s inspector and verify that its position is way off.

Is there, perhaps, a workaround for this problem? Am I doing something wrong? If I should just create a GitHub issue for this, let me know.

Note that due to how I am using it, I need to be able to put the EditorView within an SVG element.

Thanks in advance.

-Mark

2

Seems fixed positioning within an SVG image is somehow offset by the position of the image. You should be able to work around this by configuring tooltips to either use absolute positioning (tooltips({position: "absolute"})) or put the tooltip outside of the SVG image (tooltips({parent: document.body})).

1 Like
3

Thanks, @marjin, tooltips({parent: document.body}) worked for me!

1 Like