dasmikko / strapi-tiptap-editor

A drop-in replacement for the strapi editor
MIT License
64 stars 29 forks source link

Inline `code` styling issues #28

Closed karmaral closed 2 years ago

karmaral commented 2 years ago

Hello. First of all, thanks for this wonderful plugin. I've been using tiptap a lot lately and it was painful not to have it inside Strapi. I've noticed the code styling gets overriden by some CSS reset directives:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font: inherit; /* here */
  vertical-align: baseline;
}

I've managed to fix this by simply specifying the font family explicitly in the stlying. However a few questions appear:

Font family

There's a specified JetBrainsMono font family in the pre directive:

pre {
  background: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

Is that font supposed to be included in the package? I don't have it installed on my machine and it simply defaults to monospace to me.

Background

Also. the code directive states:

code {
  background-color: rgba(#616161, 0.1);
  color: #616161;
}

But the built output loses the background color

.iGEXnP .ProseMirror code {
  color: rgb(97, 97, 97);
}

This shouldn't happen either, right?


If it's okay with you I can make a PR adressing all of this stuff.

dasmikko commented 2 years ago

The font issue is simply an oversight from me.

The background one seems odd to me. You are more than welcome to make a PR.

karmaral commented 2 years ago

Alright, great. I'm not clear on the font though, should I just use monospace or package JetBrainsMono? Or just leave it as the pre directive? Aplogies if it's rather fine-grained 😂

dasmikko commented 2 years ago

I would just leave it as the pre directive, and drop the jetbrains mono font :)

SalahAdDin commented 2 years ago

I would just leave it as the pre directive, and drop the JetBrains mono font :)

could you open a pull request about this?