Completion overlay is being improperly positioned

birdcar · September 3, 2023, 5:19pm

I’m attempting to build a markdown editor for my app, and behaviorally things are working extremely well but styling it has been extremely difficult.

The issue I’m running into is that the completion overlay (the classes applied to it are cm-tooltip-overlay, cm-tooltip, and cm-tooltip-below) seems to display fairly inconsistently. Sometimes, it will display as expected. Other times it appears to place itself below the editor entirely relative to where the cursor is in the viewport (see images):

Any idea how to fix this? All the display code at play is available in the gist here:

gist.github.com

https://gist.github.com/birdcar/5e24d8420bcae6416bbd6cf12412c68a

darkTheme.ts

import { EditorView } from '@codemirror/view'
import { Extension } from '@codemirror/state'
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
import { tags as t } from '@lezer/highlight'

export const config = {
  name: 'yettoDark',
  dark: true,
  background: '#020617',
  foreground: '#f8fafc',

This file has been truncated. show original

lightTheme.ts

import { EditorView } from '@codemirror/view'
import { Extension } from '@codemirror/state'
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
import { tags as t } from '@lezer/highlight'

export const config = {
  name: 'yettoLight',
  dark: false,
  background: '#fafafa',
  foreground: '#171717',

This file has been truncated. show original

template.html.erb

<%# The Editor starts here %>
  <div class="py-5 px-4">
    <div class="w-full flex justify-end">
      <markdown-toolbar class="isolate inline-flex rounded-md shadow-sm" data-editor-target="toolbar">
        <md-bold
            class="relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-sm font-semibold text-slate-900 ring-1 ring-inset ring-slate-300 hover:bg-slate-50 focus:z-10 cursor-pointer"
            data-action="click->editor#wrap" data-editor-mark-param="**">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="fill-black h-4 w-4">
            <path
                d="M4 2h4.5a3.501 3.501 0 0 1 2.852 5.53A3.499 3.499 0 0 1 9.5 14H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm1 7v3h4.5a1.5 1.5 0 0 0 0-3Zm3.5-2a1.5 1.5 0 0 0 0-3H5v3Z">

This file has been truncated. show original

marijn · September 3, 2023, 7:31pm

Do you have any transform or isolate styles on parent elements of the editor?

birdcar · September 3, 2023, 10:08pm

@marijn on any ancestor? Or on the direct parent? There’s both isolate and translate in the dom, but they’re on peers not parents in this context.

I had position: relative on both the view div and also a grandparent of it recently, but I just removed it to no effect

marijn · September 4, 2023, 6:13am

On any ancestor. By default, the editor uses position: fixed elements appended to its wrapper element for tooltips, but due to the mess that is CSS, the behavior of such positioned elements is changed by transform and overlay styles up the tree. You might be able to use the parent option to tooltips to work around this.

birdcar · September 5, 2023, 7:22am

That was absolutely the tip I needed. I wasn’t doing any configuration there, and being able to set the parent and also the config element in that extension fixed it immediately.

Cheers and thank you for the help (and the deeply incredible library)