Compatibility challenges with Carta + PicoCSS

[jstjoe]

First, thanks for making a great tool for the Svelte community.

I'm trying to get Carta to work with my minimal site using PicoCSS. I've managed to isolate the issues to a minimal example using only Svelte, PicoCSS, and Carta.

Reproduction steps

1- I created a boilerplate Svelte app

npm create svelte@latest my-app

2- Installed Carta & Pico

npm install @picocss/pico npm i carta-md

3- Edited the example from Carta's README to include Pico:

<script lang="ts">
    import { Carta, MarkdownEditor } from 'carta-md';
    // Component default theme
    import 'carta-md/default.css';
        import '@picocss/pico';

    const carta = new Carta({
            sanitizer: false
    });
</script>

<MarkdownEditor {carta} />

<style>
    /* Or in global stylesheet */
    /* Set your monospace font (Required to have the editor working correctly!) */
    :global(.carta-font-code) {
        font-family: '...', monospace;
        font-size: 1.1rem;
    }
</style>

4- This is the result:

Problems:

• Cursor position is shifted.
• Text selection is shifted.
• Scroll position is shifted?
• Toolbar buttons aren't visible.

Would it be possible to add a clearfix to the Carta components so that they don't inherit any styles from the parent app? Or maybe a Pico clearfix or compatibility mode? I hate to ask for something framework-specific but I don't know know what the correct fix is.

[jstjoe]

Also I'm happy to help contribute something with some direction. Thanks again.

[BearToCode]

I tried out the example and by using the following rules it works as expected:

.carta-highlight code {
  padding: 0;
  box-shadow: none;
}

.carta-input textarea:focus {
  box-shadow: none;
}

.carta-icon {
  padding: 0;
}

Let me know if it is enough

[jstjoe]

It's aligned at the top of a document, but gets misaligned further down the document.

Also the toolbar is still invisible.

I think a much more reliable fix would be to clear all inherited styles from the component, no? I'll be happy if it starts working but I'm concerned about other conflicting styles. It'd be great to know that there won't be any conflicts.

[BearToCode]

Did you specify a font here?

<style>
    /* Or in global stylesheet */
    /* Set your monospace font (Required to have the editor working correctly!) */
    :global(.carta-font-code) {
        font-family: '...', monospace;
        font-size: 1.1rem;
    }
</style>

To me the toolbar icons are working correctly.

How would you prevent the styles from being inherited? I don't think that would work since how would you know which styles are "wrong" (like the one from pico) and which one are purposely set? Also, I would have to specify a lot of unset or none styles that are most likely useless.

I think that pico is kind of a unique problem, as, from what I understand, it already sets default styles for all HTML tags. Usually css libraries/frameworks do not come with embedded rules.

[jstjoe]

Could you maybe provide an option so that when initializing the Component I can say “all: initial”? Then the component just needs to set the same.

That should avoid the problems you mentioned. And that way we can know that the Component isn’t relying on - or conflicting with - any inherited styles.

Re: Pico being a unique problem, honestly that’s more of a philosophical question. But there are lots of camps on either side. The more recent trend is to put style information (see Tailwind) in the class names and “pollute” the markup but that runs counter to the original intent of separating semantic markup from style/presentation concerns. Of course there are valid concerns on either side.

On Mon, Jul 8, 2024 at 06:13 Davide @.***> wrote:

Did you specify a font here?

To me the toolbar icons are working correctly.

How would you prevent the styles from being inherited? I don't think that would work since how would you know which styles are "wrong" (like the one from pico) and which one are purposely set? Also, I would have to specify a lot of unset or none styles that are most likely useless.

I think that pico is kind of a unique problem, as, from what I understand, it already sets default styles for all HTML tags. Usually css libraries/frameworks do not come with embedded rules.

— Reply to this email directly, view it on GitHub https://github.com/BearToCode/carta/issues/99#issuecomment-2213716346, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPMC5AQYDBK6C5BQLI537TZLJX5PAVCNFSM6AAAAABKN7HV2SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMJTG4YTMMZUGY . You are receiving this because you authored the thread.Message ID: @.***>

[BearToCode]

Ok, so I tried using all: initial but it's not working that well: setting it for everything(.carta-editor *) breaks certain styles, but not doing so does basically anything.

Honestly I think the best course of action is to just determine which rules from Pico causes issues by inspecting the broken elements, and manually fix them.

If you manage to find a working to make that work or have any other idea just tell me.

[warren-bank]

https://github.com/picocss/pico/issues/378

https://picocss.com/docs/conditional

---

quick test:

1. load this page in browser

2. enter this script in javascript console:

   {
     // optional
     document.documentElement.setAttribute('data-theme', 'light');
   
     // optional
     [...document.querySelectorAll('.carta-renderer')].forEach(el => {
       el.classList.add('pico')
     });
   
     [
       'https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.conditional.min.css'
     ].forEach(url => {
       const el = document.createElement('link')
       el.setAttribute('rel', 'stylesheet')
       el.setAttribute('href', url)
       document.head.appendChild(el)
     });
   }

[jstjoe]

I appreciate you both looking into it. I switched to Pico Conditional as you suggested, and manually added the Pico class to all of the other elements. The icons are back (yay) but the text selection and cursor is still completely off making it unusable. IDK what else to do here. I'll close it out but my issue is unresolved :/

[jstjoe]

FWIW, I don't need syntax highlighting so if you could offer a way to disable that it might be the workaround I need. Cheers.

[jstjoe]

Wait I figured it out. Conditional Pico got me close, but even Conditional Pico includes some root styles.

All I need to fix this is to set line-height: initial; as a style on the .carta-editor element. See screenshots for the difference. Everything else is the boilerplate from the readme.

I don't think there's a way for me to set the style directly on the component though? I'd really rather not apply it via CSS, can you make an option to pass style props or does that exist already?

[BearToCode]

Probably adding line-height here does the trick:

:global(.carta-font-code) {
    font-family: '...', monospace;
    font-size: 1.1rem;
    line-height: 1.25rem;
}

Let me know!

[jstjoe]

Got the line height working, thank you. Now the next challenge: I can't seem to set the caret color to be compatible with pico's dark mode. This is driving me crazy.

Here's my CSS where I tried the drastic !important with no luck:

:global(.carta-editor) {
    line-height: initial !important;
    caret-color: white !important;
}

But that is being overridden somehow? I always thought !important was the nuclear option but alas it's still black. How to override caret-color to make Carta work with dark mode?

[BearToCode]

From the screenshot the caret color comes from the default theme. You just need to copy the theme and edit it!