Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes?
Is it possible to change the default system monospace font in Draft Editor to Consolas using Draft.css or global css classes?
The main element of the editing tool has the class DraftEditor-root.
You can apply styles using this class name like this:
.DraftEditor-root {
font-family: Consolas;
// add any other styles you desire:
font-size: 24px;
border: 1px solid black;
}
Take a look at the demonstration below. Here, I have used the "Arial" font family, but with "Consolas" it works in a similar way:
const {Editor, EditorState, ContentState} = Draft;
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createWithContent(ContentState.createFromText('Arial font-family'))
};
}
_handleChange = (editorState) => {
this.setState({ editorState });
}
render() {
return (
<Editor
placeholder="Type away :)"
editorState={this.state.editorState}
onChange={this._handleChange}
/>
);
}
}
ReactDOM.render(<Container />, document.getElementById('react-root'));.DraftEditor-root {
font-family: Arial;
font-size: 24px;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script>
<div id="react-root"></div>I can't help but wonder if I have a layout like this: <div class="container"> <div class="left"> Left </div> <div class="right> Right </div> </div> Changing the view port to 320 pixels requires the right div to ap ...
Having trouble identifying a locator using CSS. There are 10 elements with the same locator name on the webpage. Each web element has the same XPath value: //div[@class='thumb_image'] The web element list size is 10. If I want to access the 5t ...
Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...
My attempt at creating a basic font size changer was working perfectly until I integrated it with the bootstrap framework. Strangely, when I try to increase the font size, it actually decreases instead. var baseFontSize; (function () { "use strict"; ...
My react-app portfolio is live on github pages at this link: An issue arises when I click on the icon for a specific project: Projects Page Instead of opening the correct webpage, it redirects to the wrong URL shown here: Portfolio WebPage I want t ...
I am currently facing a straightforward issue with incrementing and decrementing the value in my TextField component. My project is built using Formik and Material UI within React. For more details, please check out this CodeSandbox link: VIEW HERE <T ...
I've been working on a complex navigation component using MUI Persistent Drawers within a React + Next.js setup. To achieve the desired content shrinking effect based on state changes, I ended up placing the entire navigation system inside the _app.js ...
Is there a way to invoke the function while omitting certain optional parameters without resorting to undefined and empty strings? import { MouseEvent } from "react"; import { DialogType } from "editor-constants"; export interface Dial ...
Struggling to understand how a div can occupy the entire height of a container. In this particular scenario, I am aiming for the "photo" div to take up the full height, with the yellow and green content appearing on the right side of the photo. Below is th ...
After referencing the documentation for Next.js with app router, I followed the instructions to create an error.tsx page within my app folder (app/[lang]/error.tsx). This file contains the code provided in the docs. Additionally, I included some API calls ...
Is it possible to make a div flash using CSS alone? My goal is to have this div alternate between two colors. .chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding ...
My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...
Recently, I created a dropdown component using Material UI's Menu component. However, the default behavior of the menu is to open towards the right side. I actually need it to open towards the left instead. I attempted to modify its styling, and whil ...
Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...
I am currently encountering a warning that is indicating an anonymous object in a configuration file, and even specifying a name for it does not resolve the warning. Below you will find the detailed warning message along with examples. Warning: Anonymous ...
Currently, I am working on a project that involves retrieving data from the CoinMarketCap API and presenting it in an MUI Data Table (specifically a StickyHeader Data Table). However, I have been encountering difficulties with changing the color of the tex ...
I have been extensively searching the internet for information on this topic, but I haven't come across any relevant articles. For example, in the root of my project, there's a folder called pages with the following file structure: | 404.js ...
Is there a way to apply a class using Framer Motion tag in the animate and initial props? Here's an example: <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> & ...
I have integrated a CSS dropdown menu from this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button Additionally, I am utilizing jQuery .on("click", event with an AJAX call. Following the successful AJAX call, I am using the foll ...
I have experimented with multiple solutions found on various sources, but unfortunately none have been successful. I came close to achieving the desired result, but encountered an issue with the panel's default background color not displaying properly ...