{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/draft-js/issues/342","repository_url":"https://api.github.com/repos/facebook/draft-js","labels_url":"https://api.github.com/repos/facebook/draft-js/issues/342/labels{/name}","comments_url":"https://api.github.com/repos/facebook/draft-js/issues/342/comments","events_url":"https://api.github.com/repos/facebook/draft-js/issues/342/events","html_url":"https://github.com/facebook/draft-js/issues/342","id":151413949,"number":342,"title":"`customStyleMap` is too limiting","user":{"login":"guitardave24","id":1735553,"avatar_url":"https://avatars.githubusercontent.com/u/1735553?v=3","gravatar_id":"","url":"https://api.github.com/users/guitardave24","html_url":"https://github.com/guitardave24","followers_url":"https://api.github.com/users/guitardave24/followers","following_url":"https://api.github.com/users/guitardave24/following{/other_user}","gists_url":"https://api.github.com/users/guitardave24/gists{/gist_id}","starred_url":"https://api.github.com/users/guitardave24/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/guitardave24/subscriptions","organizations_url":"https://api.github.com/users/guitardave24/orgs","repos_url":"https://api.github.com/users/guitardave24/repos","events_url":"https://api.github.com/users/guitardave24/events{/privacy}","received_events_url":"https://api.github.com/users/guitardave24/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/facebook/draft-js/labels/question","name":"question","color":"cc317c"}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2016-04-27T15:22:31Z","updated_at":"2016-07-17T22:46:03Z","closed_at":null,"body":"`customStyleMap` works by identifying inline styles and iteratively building a style map by concatenating the maps together in order. For example, a character with BOLD and ITALIC would apply `font-weight: bold` and `font-style: italic`, which works well for thise case.\r\n\r\nHowever, sometimes, you want to apply a single style based on having two overlapping ranges. For example, assuming the ordered set `['BOLD', 'ITALIC']` I want:\r\n```js\r\nstyle: {\r\n  fontFamily: 'MyFont-BoldItalic';\r\n}\r\n```\r\n\r\nThis is because I don't control the weights via CSS transforms alone, but a custom font.\r\n\r\nI thought of a couple hacky solutions:\r\n1. Define and apply a new custom style `BOLD_ITALIC` when I detect overlapping ranges, and use the `customStyleMap` but this just feels like sadness.\r\n2. Use a decorator, but sadly, I would have to switch entirely to using a decorator for single styles because otherewise `customStyleMap``creates a new, styled span within the decorator's span, overriding styles. \r\n\r\nThe better solution, I think, may be to allow for a `customStyleFn` which takes a character and returns the styleMap you want to apply. This means that you'd lose the ability to \"stack\" styles via `customStyleMap`. Maybe this is a bit too heavy for this use case, but I'm not seeing anything more elegant right now."},"comment":{"url":"https://api.github.com/repos/facebook/draft-js/issues/comments/233208697","html_url":"https://github.com/facebook/draft-js/issues/342#issuecomment-233208697","issue_url":"https://api.github.com/repos/facebook/draft-js/issues/342","id":233208697,"user":{"login":"mjomble","id":2202751,"avatar_url":"https://avatars.githubusercontent.com/u/2202751?v=3","gravatar_id":"","url":"https://api.github.com/users/mjomble","html_url":"https://github.com/mjomble","followers_url":"https://api.github.com/users/mjomble/followers","following_url":"https://api.github.com/users/mjomble/following{/other_user}","gists_url":"https://api.github.com/users/mjomble/gists{/gist_id}","starred_url":"https://api.github.com/users/mjomble/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mjomble/subscriptions","organizations_url":"https://api.github.com/users/mjomble/orgs","repos_url":"https://api.github.com/users/mjomble/repos","events_url":"https://api.github.com/users/mjomble/events{/privacy}","received_events_url":"https://api.github.com/users/mjomble/received_events","type":"User","site_admin":false},"created_at":"2016-07-17T22:46:03Z","updated_at":"2016-07-17T22:46:03Z","body":"What about something like this for block styles as well?\r\n\r\nFor example, storing the amount of spacing before/after a block in the block-level metadata and then converting that dynamically to a React style object with the appropriate marginTop and marginBottom values.\r\n\r\nI know something like this can already be done with `blockStyleFn` but that requires predefined classes. So if, for example, I wanted margin options for 4px, 5px, 6px... 19px, 20px, I would have to create a separate CSS class for each of them.\r\nWould be much nicer to just return { ... marginTop: data.spaceBefore, ... } from a function.\r\n\r\nHmm, perhaps I should create a separate issue for that :)"}}
{"actor":{"display_login":"mjomble"}}