Comments (13)
It's possible to create a color picker. Here is an example https://webdeveloperpr.github.io/draft-js-color-picker/
from draft-js.
You can also create custom styles with this package https://www.npmjs.com/package/draft-js-custom-styles
from draft-js.
I think I’ve got that part figured out thus far, and it’s working wonderfully. My question is more about the CSS property values themselves, and whether or not they can be dynamic.
Here’s the thing: I’m working with many hundreds of font styles (~700) that each require their own CSS properties (font-family
, font-style
and font-weight
). I could create the styles for every possible font file that may be loaded up front, but that would clearly be a lot more data for the user to load than is really necessary.
So, I’m wondering if there is a way to make the value of the CSS property dynamic, and only set when requested by the user?
For instance, say I have a select menu with 100 different fonts in it that the user can choose from. To avoid preloading 100 fonts worth of CSS classes/properties, I’d like to only create and apply them when requested. So when selecting “Fancy Font Number 5” in the menu I need to:
- Create the CSS class and properties (
font-family
,font-style
andfont-weight
); - Load the font file with a Webpack require; and
- Apply the CSS class to the selection.
Can I add styles to the customStyleMap
object after the Editor is already mounted?
For what it’s worth, I’ve been working on a proprietary tool very much like Draft.js for the last 6 months or so using Rangy, Scribe and JSS. This is what I currently do when the user selects a font to load:
loadFont = () => {
const {
selectedFamily,
selectedStyle,
sheet
} = this.props;
// Stop here if user hasn’t selected a style yet
if (!selectedFamily || selectedFamily === null || selectedStyle === null) return false;
// Create the CSS based on the product data
const fontStyles = {
'font-family': selectedStyle.value,
'font-style': selectedStyle.style,
'font-weight': selectedStyle.weight
};
// Create CSS class
const className = fontClassName(selectedFamily.label, selectedStyle.id);
// Add the CSS to the JSS sheet
const theRule = sheet.addRule(`.${className}`, fontStyles, { named: false });
global.scribe.transactionManager.run(() => {
// Create the CSS class and inline styles based on the font
// parameters passed in from the JSON
theRangyClass = rangy.createClassApplier(className, {
applyToEditableOnly: true,
tagNames: ['p'],
useExistingElements: true
});
// Apply the class and styles to the selected text
theRangyClass.applyToSelection();
});
// Load the font CSS and associated file
require(`font/css/${selectedStyle.value}.css`);
// Return the JSS generated className
return theRule.className;
};
from draft-js.
Can I add styles to the customStyleMap object after the Editor is already mounted?
You can define a new customStyleMap
to pass in as the prop, though that won't currently trigger a re-render of the entire editor if the ContentState
hasn't changed along with it.
What we could do is make customStyleMap
an immutable Map (which we probably should have done anyway), then allow a full re-render if it changes so that the newly defined styles can be picked up. That way, when you want to load your fonts, once they are available you could create a new customStyleMap
and pass it through.
from draft-js.
What we could do is make customStyleMap an immutable Map (which we probably should have done anyway), then allow a full re-render if it changes so that the newly defined styles can be picked up. That way, when you want to load your fonts, once they are available you could create a new customStyleMap and pass it through.
so it means I could also show a color picker to select a wathever color ?
from draft-js.
Take a look at the "Color" editor example. This example should give you an idea of how inline styles can be named and defined via the customStyleMap
prop. In the "Color" example, the styles are treated as mutually exclusive (since it's font color) but inline styles do not have to be mutually exclusive in this way.
For instance, we could include something like this within the customStyleMap
with color values in it:
small: {
fontSize: '8px',
},
medium: {
fontSize: '12px',
},
large: {
fontSize: '16px',
},
Then, by using RichUtil
, you could add these styles to ranges as needed. Characters could then have styles like OrderedSet(['small', 'red'])
or OrderedSet(['large', 'blue'])
.
At render time, these style values will be merged. In this way, you can define distinct inline styles and let React (more specifically, DraftEditorLeaf
) worry about merging the values together.
Does this help?
from draft-js.
That sounds nice.
from draft-js.
PR landed and fixed the issue, so closing this out.
from draft-js.
@Linzerui super super late response, but yes - it seems like you could achieve dynamic styles by updating the customStyleMap and referencing the class name you use in customStyleMap
from draft-js.
@Linzerui were you able to implement the colour picker ?
from draft-js.
@webdeveloperpr, I already stumbled upon both of these, and used it (http://bit.ly/poetry-editor) (and spent a lot of time understanding it, because I'm new to draft-js), needless to stay star-ed 'em! Kudos to you! 💛.
from draft-js.
@webdeveloperpr hi, did you use your package to make this color-picker ? I'm trying to figure it out :| Do you have code for draft-js-color-picker
example?
from draft-js.
https://github.com/webdeveloperpr/draft-js-color-picker
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.