Install the Drupal CKEditor CodeMirror module and enable it for use with the Solo Theme.

Created on 12 May 2024, 7 months ago
Updated 27 June 2024, 5 months ago

To highlight the source code I use the Codemirror module.
With the Olivero theme the code is correctly aligned to the left, while with Solo it is centered and therefore unusable.
What could it depend on?

Thank you and greetings

💬 Support request
Status

Fixed

Version

1.0

Component

Code

Created by

🇮🇹Italy giordy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @giordy
  • 🇺🇸United States flashwebcenter Austin TX

    Hello,

    I have installed the CKEditor Codemirror module from https://www.drupal.org/project/ckeditor_codemirror and it's working fine on the Solo theme without any issues. I've attached a screen recording to show you how the module appears for me using the Solo theme. Do you use a sub-theme? If so, does it contain any custom code?

  • 🇬🇧United Kingdom aaron.ferris

    I can't seem to reproduce this either

    1. Drupal 10.2.4
    2. Latest version of this theme
    3. Latest version of the codemirror module
    4. Enable both
    5. Add a new text format, configure to use Codemirror
    6. Allow this text format on a rich text field, in a content type
    7. Add a new node of the above content type
    8. Switch to the Codemirror text format
    9. Toggle between source/wysiwyg

    = Everything aligned left.

    I wonder if im missing a particular config step to reproduce.

  • 🇮🇹Italy giordy

    Thanks for the quick response.
    I use the sub-theme you prepared: https://www.drupal.org/project/solo/issues/3437337 💬 How to create custom menu template in sidebar first/second. Fixed

    Thank you and greetings

  • 🇳🇱Netherlands tzsl

    The codemirror works with my subtheme solomayo also without any problems.

    drupal 10.2.6
    solo 1.0.5
    codemirror latest version.

  • 🇮🇹Italy giordy

    I checked, and the problem is in the sub-theme. If I uninstall it, Codemirror works fine.
    We should figure out what affects the code, but I don't know where to look.
    I could give up the sub-theme, but there are essential instructions in info.yml and libraries.yml and I wouldn't know where to put them without the sub-theme.

    Unfortunately in the new site the theme does not work correctly: main menu, sidebar menu, animations, rounded edges etc...
    Compare the test site: http://testns.gmpe.it/cms/ with the new site https://prova.gmpe.it/
    I am going crazy!

    Thank you and greetings

  • 🇺🇸United States fkelly

    I install using Composer. The code goes into project files (really just a directory) managed by PHPstorm. I use a subtheme which I named TSZL based on some suggestions in the issue queue here. It goes in a "custom" directory under \themes. This keeps it from getting overwritten by Composer. As far as I can tell the only things that matter in the subtheme are the line in its inf.yml that says:

    base theme: solo

    and then the fact that I've copied menu--sidebar-first.html.twig from the solo base theme.

    After the composer update, my default theme in appearance changed from the tszl theme to the solo_subtheme. I went into appearance and changed it back to tszl. Then everything (which in my case is the menu--sidebar) worked again.

    I have no idea or interest in what codemirror does. PHPstorm in conjunction with Composer does what I need. It would sure be nice if a Composer update to the Solo theme could retain customizations we've made but I realize that may be technically impossible. It is not a great difficulty once you realize that you may need to redo customizations after you update to a new release of Solo.

  • 🇺🇸United States flashwebcenter Austin TX

    @fkelly12054@gmail.com, running a Composer update should not alter any customizations made in the ../web/themes/custom/... or ../web/modules/custom/... directories. If after updating you notice changes in the default theme, it's possible that some configurations were reverted. You can check this in the Drupal admin panel at ../admin/config/development/configuration. Also, in your Drupal root directory, the Composer setup should look similar to this:

            "installer-paths": {
                "web/core": [
                    "type:drupal-core"
                ],
                "web/libraries/{$name}": [
                    "type:drupal-library"
                ],
                "web/modules/contrib/{$name}": [
                    "type:drupal-module"
                ],
                "web/profiles/contrib/{$name}": [
                    "type:drupal-profile"
                ],
                "web/themes/contrib/{$name}": [
                    "type:drupal-theme"
                ],
                "drush/Commands/contrib/{$name}": [
                    "type:drupal-drush"
                ],
                "web/modules/custom/{$name}": [
                    "type:drupal-custom-module"
                ],
                "web/profiles/custom/{$name}": [
                    "type:drupal-custom-profile"
                ],
                "web/themes/custom/{$name}": [
                    "type:drupal-custom-theme"
                ]
            },

    @giordy, could you please upload a copy of your sub-theme? The sub-theme available at https://www.drupal.org/project/solo/issues/3437337 💬 How to create custom menu template in sidebar first/second. Fixed appears to be functioning correctly.

    Additionally, visit https://prova.gmpe.it/ and access the theme settings under the global site section. I recommend transferring all CSS from the CSS Injector to CSS Dynamic. Drupal sanitizes the CSS Injector field, which can prevent certain CSS characters from being rendered correctly.

    Best wishes,
    Alaa

  • Assigned to flashwebcenter
  • Status changed to Fixed 6 months ago
  • 🇺🇸United States flashwebcenter Austin TX

    @giordy, I've been inspecting the live site at https://prova.gmpe.it and managed to track down the issue after copying the additional CSS to a sub-theme. There was a CSS rule aligning text within the PRE tag to the center which was causing the problem. I've removed this rule, and now CodeMirror is functioning correctly.

    I'm attaching the updated CSS file for you. You can either incorporate it into the sub-theme or add it to the dynamic CSS field.

    Best wishes,
    Alaa

  • 🇮🇹Italy giordy

    Thank you for your attention and patience.
    I didn't think a simple tag could create these problems.

    I point out that I don't use Composer and I do everything manually.

    A question.
    Why don't the View, edit... tabs of the sub-theme have the animation, which was so beautiful?

    Thank you and greetings

  • 🇺🇸United States flashwebcenter Austin TX

    Thank you for your patience as well. Handling things manually can indeed introduce unexpected challenges, especially without the use of tools like Composer which help manage dependencies and updates more smoothly.

    To enable the system tab animation, navigate to your default theme settings. Under the 'Global Sites' section, you'll find a checkbox to activate this feature.

    Best wishes,
    Alaa

  • 🇮🇹Italy giordy

    It's beautiful! Thank you so much.

    I don't use Composer because it's not included in the hosting plan. The site owner does not intend to upgrade to a higher hosting plan. I'm happy with the Ludwig module.

    Thank you and greetings

  • Automatically closed - issue fixed for 2 weeks with no activity.

  • 🇺🇸United States flashwebcenter Austin TX
Production build 0.71.5 2024