betancourtl/draft-js-custom-styles

Create custom inline styles for draft-js in a sane way

draft-js-custom-styles's Issues

Multiple Custom styles

I'm sorry - I am confused and am probably going about this the wrong way. Can you help me?

I would like for a single action to trigger multiple styles at the same time. For instance, I have a font drop-down and a font-variant drop-down working pulling in a list of fonts, and when the user hits "Ultra Italic" for a variant, I want it to apply font-weight: 900 and font-style: italic. I've tried something like concurrent calls to styles[property].add(editorState, value). Only the final style getting applied and some weird breakage of the text. It looks like what is happening is that the first style gets applies, but before it updates it attempts the second style, and so on. This also breaks my string into nodes the length of each character...

Is there a way to add an array of styles?

Styles Do Not Apply On Collapsed Selection State

Since Modifier.applyInlineStyles is used to modify the inline styles, I think for this reason the styles aren't applied if the selection state is collapsed. For example, in this poetry editor that I'm coding up, when I change the slider and use draft-js-custom-styles to change the inline styles (font size), it only works if some text is selected.

My intended behaviour is that, even if nothing is selected (collapsed selection state), then also the inline styles should be applied to the character that will be entered there after (I think RichUtils.toggleInlineStyles does that). Any idea how could I do that ?

Thanks!

Instantiate EditorState from HTML

Hi,
Thanks for developing such a useful library!
My question might seem dumb but I can't figure how to do it... How can I generate an EditorState out of exported HTML, which preserves inline styles?

I use the following chunk of code to get HTML from an editorState, which works perfectly:

import { stateToHTML } from 'draft-js-export-html'

const inlineStyles = exporter(editorState)
const content = editorState.getCurrentContent()
const html = stateToHTML(content, { inlineStyles })

But then, when I do:

import { stateFromHTML } from 'draft-js-import-html'

EditorState.createWithContent(stateFromHTML("<p><span style="font-size: 34px">yo</span></p> "))

I lose the font-size. Any hints?
Thanks a lot!

Requires peer dependency of [email protected]

Currently, I see that draft-js-custom-styles requires a peer dependency of [email protected]:

npm ERR! peer dep missing: [email protected], required by [email protected]

but draft-js is currently on version 0.11.7. I would be happy to make a PR updating to [email protected].

Suggestions for setting font family?

It seems to be missing from most of the Draft.js-related documentation I’m finding, yet is one of the more common setting people tend to use.

I’m working on a type testing tool that requires a “font” feature where you can choose the font you’d like applied to the selected text. There will most definitely be lots of overlapping selections. Any recommendations on how to pull this off?

export function fails with draft-js 10.5 works in draft 10.4

Hi @webdeveloperpr
same issue was reported here, jpuri/react-draft-wysiwyg#599.
As this library depends on draft-js 10.5 how can I tell this package to use the 10.4 draft js version ?

note: I've just copied my draft 10.4 version into ./node-modules/draft-js-custom-styles/node_modules/draftjs and it works

Add support for vendor prefixes

React uses PascalCase to handle vendor prefixed inline styles. This means that if in your project you encountered a situation, where you need to add something like -webkit-text-stroke-color, this library wont be able to handle it and as a result JSX element will receive this css property with camelCased key webkitTextStrokeColor.

I would like to make a pull request that addresses this issue by slightly changing the behaviour of functions used to change casing of css properies' keys.

I have already forked this project and made some changes

Why are property values lowercase?

Hi,
In https://github.com/webdeveloperpr/draft-js-custom-styles/blob/master/src/index.js#L226, why is match[2] transformed into lowercase?
This is causing issues when dealing font font-family names.
If there's no reason behind, I will happily submit a PR to change that.

styles.color.remove not work

Hey, thanks for your library, I found a problem with the remove color in my use, but the remove font size is normal. Can you check the problem?

...

Toggle style with nothing selected seems not work

Hi,
Thank you very much for this wonderful lib.

I tried to use it to toggle the color. It works great if I have selected some text in the editor, but if I don't select any text, it seems the style cannot be toggled. Is there any solution to resolve this? Or am I doing anything incorrectly?

Thanks.

A buggy remove / toggle style realisation.

Version 2.1.1.

Steps to reproduce.

1. Add any 2 or more styles for a selection. For example custom color and custom font-size

2. Remove one of the styles. For example, switch off the custom font-size.

You will see, that each letter in a selection becomes wrapped with an additional span.

This realization is not acceptable for languages such Arabic. Because each letter in a <span> in Arabic becomes detached from the word.

Like in this example

Before

After

For my project, I've fixed the issue using custom remove and toggle realization, based on RichUtils.toggleInlineStyle. It works ok.

Something like

  const currentValue = styles.color.current(editorState);
  if (currentValue) {
    const id = `CUSTOM_COLOR_${currentValue}`;
    return RichUtils.toggleInlineStyle(editorState, id);
  }

Guys. I really appreciate your plugin. It is very handy!
Could you please fix this issue, to make it even more useful?

Are you able to use it for alignment of selected text?

Can this be used for alignment of selected texts?

Managing focus

Thanks so much for such a great package. So super useful.

I had a question about managing focus. In the example you have in the current README.md, clicking any of the buttons or making a selection in the select menus steals focus away from the selected content and onto the element you clicked. Native browser behavior, but undesirable for a rich text editor. It does still apply the change to the previously-selected text, but you can no longer type or use keys to navigate the content until you manually click back into the editor.

I saw the “Managing Focus” documentation on the draft.js site. Is managing focus something you need to handle yourself or are there built-in methods for this?

Thank you!

Exporter does not work with ContentState

Hi Luis and first of all thank you for making and maintaining this library.

I've encountered the following situation where I need to use exporter without having access to an EditorState object, but a ContentState object. The reason behind this is that I need to render HTML in another part of our application where a DraftJS editor is not instantiated.
That being said, the only data I can get is a ContentState object returned by the convertFromRaw function. The problem arises when exporter tries to access the getCurrentContent() method from the editorState object passed as argument.

I think this is somewhat related to this issue, in my case converting from raw content rather than HTML.

I managed to make a fork and fix this and I'm more than happy to make a pull request, but I wanted to discuss this first.

Is there a reason for requiring EditorState in in the export process or is this just an edge case?
Am I missing something and is there the possibility of converting from raw directly to EditorState?

Thanks :)

Set initial state with inline styling on HTML

I am using draft-js and draft-js-custom-styles libraries. I don't really know if my problem is something you can fix, but maybe you have some implementation to do it.

I want to set the initial EditorState with inline styles on HTML. I am doing the following:

const allStyles = `<span style="color: blue"><em style="font-style: italic">testing</em></span>`;

const blocksFromHTML = convertFromHTML(allStyles);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap
);

const [editorState, setEditorState] = React.useState(() =>
  EditorState.createWithContent(state)
);

I want to initialize the component with the testing label with the color blue and with an italic font. The italic font-style is being applied but the ones that should be applied with the style tag are not. It happens with whatever style that I pass into the style. I am using the same code that the draft-js component generates and it doesn't work!
Please help me.

I am using React and Typescript.
package.json:

  "dependencies": {
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "@svgr/webpack": "^5.5.0",
    "html-to-draftjs": "^1.5.0",
    "react-date-picker": "^8.0.3",
    "react-datetime-picker": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-essentials": "^6.1.14",
    "@storybook/react": "^6.1.14",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "draft-js": "^0.11.7",
    "draft-js-custom-styles": "^2.1.1",
    "draft-js-export-html": "^1.4.1",
    "draft-js-import-html": "^1.4.1",
    "hex-rgb": "^4.2.0",
    "node-sass": "^4.14.1",
    "postcss-import": "^12.0.1",
    "react": "^17.0.1",
    "react-click-outside": "^3.0.1",
    "react-dom": "^17.0.1",
    "rollup": "^2.29.0",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-css-only": "^2.1.0",
    "rollup-plugin-peer-deps-external": "^2.2.3",
    "rollup-plugin-postcss": "^3.1.8",
    "rollup-plugin-svg": "^2.0.0",
    "rollup-plugin-typescript2": "^0.27.3",
    "rollup-plugin-url": "^3.0.1",
    "semantic-ui-react": "^1.3.1",
    "styled-components": "^5.2.0",
    "typescript": "^4.0.3"
  },
  "peerDependencies": {
    "@types/react": "^16.9.52",
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "semantic-ui-css": "^2.4.1"
  },

only working with selection text .

I am using it to give font color to my text editor ,but if I am not selecting text it is not working .
Expected Behaviour
it should set font color to selected color .