search

OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.43k stars 2.4k forks source link

MarkdownBody editor fullscreen issue #7625

Closed jptissot closed 3 years ago

jptissot commented 3 years ago

The markdown editor is hidden by the admin's navbar when in fullscreen mode image

/cc @Skrypt

hishamco commented 3 years ago

Ya this obvious could happen, I will fix this, perhaps the same may happen for other editors

hishamco commented 3 years ago

I thought it's a z-index issue, but seems it's something else ;) I will push a fix soon ...

jptissot commented 3 years ago

@agriffard should the editor display the toobar when in full screen mode ?

agriffard commented 3 years ago

Yes, it should: https://simplemde.com/

hishamco commented 3 years ago

@jptissot I will have a look

jptissot commented 3 years ago

Reopening because the toolbar should be displayed in full screen mode

hishamco commented 3 years ago

Ok it's in my plate ;)

aaronamm commented 3 years ago

FYI, it happens to me as well. Content go under a admin navigation bar. Here is the screenshot and please ignore my dark theme.

image

@agriffard I think you mean when we set editor to full screen mode, it should show the editor toolbars as https://simplemde.com/ demo.

However, it is very minor just to not confuse others that may think we use simple mde which is an inactive project.

Right now, we use easy mde which is actively developed and its demo is at https://easymde.tk/.

Skrypt commented 3 years ago

I thought this issue was fixed I will take a look at it today.

aaronamm commented 3 years ago

@Skrypt Thanks for following up. Please let me know if there is a proplem that I need to build JavaScript to fix.

Skrypt commented 3 years ago

Tomorrow first thing.

aaronamm commented 3 years ago

@Skrypt FYI, I have tried to fix this issue by creating a custom module to override MarkdownBodyPart_Edit__Wysiwyg shape to use the latest version of EasyMDE. (https://www.npmjs.com/package/easymde)

Here are what I found. EasyMDE two main components which are:

Therefore, to make the editor shows properly in full screen mode, I need to:

Update .editor-toolbar.fullscreen to 

.editor-toolbar.fullscreen{
    z-index: 1030; 
}

because we have

:root[data-theme='darkmode'] .ta-navbar-top {
    z-index: 1030; 
}

and update :root[data-theme='darkmode'] .CodeMirror-fullscreen to 

:root[data-theme='darkmode'] .CodeMirror-fullscreen {
    z-index: 1001;
    top: 50px !important;
}

because we have

:root[data-theme='darkmode'] .left-sidebar-compact #ta-left-sidebar{
z-index: calc(1000 + 1);

FYI, I use dark mode for an admin theme.

Please let me clean up some code and I will share it to you. Thanks.

hishamco commented 3 years ago

@aaronamm could you please send a PR and share a screenshot shows the final fix

aaronamm commented 3 years ago

@hishamco I can make a PR and I want to improve it as well. Could you please reply the issue https://github.com/OrchardCMS/OrchardCore/issues/7881 that I opened?

hishamco commented 3 years ago

I saw the other issue, I think it introduces a new package or editor, Am I right?

aaronamm commented 3 years ago

@hishamco You are right. However, the idea is to use the latest version of EasyMDE and use NPM package instead of adding JavaScript file in the module. We use a fork of SimpleMDE which has been renamed to EasyMDE. Technically, I don't think we introduce a new editor.

hishamco commented 3 years ago

Please submit a PR that update the package and fix this issue, hope @agriffard don't mind with changing the package

aaronamm commented 3 years ago

@agriffard has replied me in this issue https://github.com/OrchardCMS/OrchardCore/issues/7881#issuecomment-740559462 already. @hishamco Thanks for supporting.