Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix CSS so TinyMCE sslink popup windows show over fullscreen #1817

Draft
wants to merge 1 commit into
base: 2.2
Choose a base branch
from

Conversation

lianna-blanca
Copy link

@lianna-blanca lianna-blanca commented Aug 23, 2024

[WIP WIP WIP]

Description

When using TinyMCE in CMS 5.2, the editor's fullscreen plugin hides the pop-up windows which allow users to configure links. This applies to all types of links (internal, external, file, anchor, email, phone).

This appears to be due to the TinyMCE fullscreen plugin having a z-index of 1200, whereas our popup windows are at 1050. When I manually change this in chrome dev tools, the popups appear over the full screen as they should.

A very similar problem was brought up as an issue on the TinyMCE repo in 2021, but the issue was closed as intended behaviour. (There also appears to be a number of other related issues, but none that look like they'll be remedied in the near future.) Therefore we will need to address the issue here.

Steps to reproduce

Steps for reproducing in project skeleton, or a similar project:

  1. Go to any TinyMCE editor field which has both sslink (which we have by default in this repo and the fullscreen plugin:
// Project Skeleton file: `app/_config.php`
// Add fullscreen plugin:
$cmsEditor = TinyMCEConfig::get('cms');
$cmsEditor->enablePlugins('fullscreen');
$cmsEditor->addButtonsToLine(2, 'fullscreen');
  1. Open full screen mode
    image
  2. Press the sslink button, and select any option from the dropdown field
    image
  3. Observe that no popup appears
  4. Close full screen mode; observe that the popup for editing that link type is now visible.
    image

Manual testing steps

Issues

Pull request checklist

  • The target branch is correct
  • All commits are relevant to the purpose of the PR (e.g. no debug statements, unrelated refactoring, or arbitrary linting)
    • Small amounts of additional linting are usually okay, but if it makes it hard to concentrate on the relevant changes, ask for the unrelated changes to be reverted, and submitted as a separate PR.
  • The commit messages follow our commit message guidelines
  • The PR follows our contribution guidelines
  • Code changes follow our coding conventions
  • This change is covered with tests (or tests aren't necessary for this change)
  • Any relevant User Help/Developer documentation is updated; for impactful changes, information is added to the changelog for the intended release
  • CI is green

@lianna-blanca lianna-blanca force-pushed the bugfix/Zindex-for-TinyMCE-popups branch from 745f807 to a0c45ad Compare October 24, 2024 03:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant