translateX and translateY on parent breaks tooltip position

v6
1

The library supports having CSS transforms applied to its parent elements that do 2D scaling and translation. Anything else (rotation, 3D transformation, shearing) will break the editor.

This states that the editor supports translation in the style of translateX and translateY
I have editors within elements that are transformed using translateX and translateY (no 3D transformation) and the autocompletion tooltips are placed way off

Is there a way to solve this issue?

Thanks for your answers,
Simon

2

Can you provide a minimal reproduction demo of this issue?

3

Hi @marijn

I can workaround this issue by providing the following extension:

tooltips({
	position: 'absolute' | 'fixed',
	parent: document.body,
})

but I then need to override its z-index.
Do you think that’s the preferred way to do it?

I’ll try adding a minimal example here.
Basically I’m using the muuri library which lays out elements transformed by translateX and translateY and within each of those elements there’s an editor instance

4

While technically being valid JavaScript, 'absolute' | 'fixed' evaluates to 0 and is probably not what you want to do here, so I’m a bit confused about the intention of this code.

What tooltips configuration are you using when this goes wrong?

5

Hi @marijn

I’m using the following extensions that have to do with autocompletion:

EditorState.languageData.of(function() { return [{autocomplete: completeAnyWord}]; }),
autocompletion({tooltipClass: function() { return "cm-autocomplete-tooltip"}, selectOnOpen: selectOnOpen}),
Prec.high(htmlLanguage.data.of({autocomplete: myCompletionSource}))

The tooltips configuration from above was only an attempt to fix the problem, there’s no other tooltips configuration

I’m also using

EditorView.perLineTextDirection.of(true),

Might that be the problem? no, that’s not the problem

I’ll investigate