Draft-js: Can `customStyleMap` specify a CSS class so the style can be managed in a CSS file?

[amireldor]

Styles defined in customStyleMap are specified in JavaScript objects. I was wondering if there's a way to specify a CSS class name instead of the hardcoded JS-based styles and have my styles managed in a separate CSS file (or LESS/Sass/Stylus/etc...). Is that possible?

[tobiasandersen]

Currently, I don't think it is. There are no classes added to those elements. It wouldn't be very hard to create something similar for a className prop though, but I have no idea if that's something they (as in the Draft team) want or not.

[amireldor]

Hmm, so can be possible for me to fork and add a className through styleObj or something like that? Is that a sane thought?

[tobiasandersen]

That's definitely possible!

[amireldor]

Hey @tobiasandersen, so I made a small hack and forked the repository but I'm facing some problems with my fork.

When I npm install using the URL to my repo, the repo won't build automatically to create the distribution files. This means I have nothing to import in my project because nothing is found. I tried building manually as the README suggests but it seems that the gulpfile defining the build process is missing, that is odd!

I haven't had to chance to dive into it yet but if you got any idea then I'd be happy to hear.

I'm not sure this issue is in scope for this stuff, so maybe I'm better off stackoverflowing or something similar, please let me know.

[tobiasandersen]

No that doesn't work. You have to either commit the build files, or git clone and build manually inside node_modules.

Join the slack channel, there's usually someone answering pretty quickly!

[dictions]

I'm also curious about the status of this issue.

I want to be able to add an underline style equivalent to this. This is only possible by adding some pseudo elements to a style selection.

I understand that we use inline styles to help with pasting into other text editors, but are there plans to allow returning a className string with either customStyleMap or customStyleFn?

[donomans]

We are currently running into a huge need for this. Our issue being font-size and line-height need to scale happily via media queries; a user chooses a font size of "5" and the output results in something that's sensible in desktop and mobile relative to the rest of the content. We have a fairly strict requirement for this type of behavior and maybe it's just late and I'm jumping towards desperation, but I'm completely failing to find another elegant way to do this without a customClassMap or customClassFn-like addition.

I wonder if there's a reason the draft team has chosen to only concentrate on inline styles. It makes me wonder if it just goes against how they see draft being used and implemented?

I'm thinking about making a PR for this, though I suspect with how swamped the team is, we'd be waiting for a while on merge (which isn't a problem in itself, but if there's a good chance it'll never be merged, that's an actual problem, because I can't justify forking draft long term). Looks like it's a fairly trivial add, at least.

[thibaudcolas]

This is really hacky but you could (ab)use CSS selectors on the style attribute to make this work without any changes in Draft.js. Here's an example:

// Pass this style map to the editor.
const styleMap = {
  'CUSTOM_STYLE_MANAGED_WITH_CSS': {
    // Pick a CSS property that has no actual impact on your styles, eg. something from SVG.
    strokeDashoffset: '0',
  },
};

// Write your styles using an attribute selector targeting this prop-value combination.
.public-DraftEditor-content [style*="stroke-dashoffset: 0"] {
    color: red;
}

// The actual styles are defined in CSS, so media queries are no problem.
@media screen and (min-width: 768px) {
    .public-DraftEditor-content [style*="stroke-dashoffset: 0"] {
        color: blue;
    }
}

Two things:

• We need to use a *= attribute selector, because if there are multiple styles applied to the same text they will all be defined in the same element's style attribute.
• If you want to do this with multiple inline styles, you need to use a different non-significant CSS property for each style, for the reason I just described.

Small demo GIF:

[flarnie]

Digging through history before Draft.js was open-sourced, it looks like the first version did take class name or names rather than inline styles. [1] The diff says "This allows us to eliminate a decent amount of CSS", but for any more context than we would need to ask @hellendag or @sophiebits .

Because the maintainers are still working on two big API improvements, I'm inclined to say we won't add or change the existing APIs for at least the next 6 months. Class names seem better to me than inline styles, but I'd rather reconsider making that change sometime in the future.