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.
https://i.sstatic.net/b5yK5.png
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 am currently integrating a material table into my project and I have encountered an issue. Instead of getting the name of a city, I am receiving numbers like 63 or 32 in alerts or console logs. For reference, here is the link to the CodeSandbox: https:/ ...
Looking to nest elements using flexbox in order to achieve the following layout: Does anyone know how to make this happen? ...
I have developed an API that can receive post requests and save asset cards for rent (similar to Airbnb) along with images. Additionally, I am using React for the frontend development. The data stored in MongoDB has the following structure: _id:objec ...
Setting up my first Gatsby website has been a bit challenging. Following the instructions on this website, I ran npm install -g gatsby-cli and then gatsby new gatsby-starter-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world to download the ...
Is there a way to modify the background color of an entire component? I want the color to cover the full width and height of the component. I attempted using the body tag, but it was ineffective. Do I need to enclose all components in a div and then appl ...
I'm working on an authentication page with an <AppBar> that has two <TabPanel>s. After a user submits their information in the register tab, I want to automatically redirect them to the login tab. I've tried looking for a solution to ...
I'm currently working on a Next.js application that utilizes next-auth for managing Keycloak authentication. Below is the configuration I have set up: const keycloak = KeycloakProvider({ clientId: process.env.KEYCLOAK_ID, clientSecret: process ...
Does anyone know how to disable the outside click option in the ant design drawer component for my react project? Here is a link to a working example on StackBlitz Below is the code snippet: import React from 'react'; import ReactDOM from &apo ...
My backend system provides a JWT token upon successful authentication, but for security reasons, the cookie containing the token should not be visible from the client-side. In my frontend application using React, I have created a functional component to ...
THE ISSUE: Facing a problem in my project where on mobile, when a button is selected and then unselected, it remains dark due to focus which can be confusing. To see the issue in action, check out this screen recording: Screen recording You can view the ...
I'm facing a common CORS issue in my application while trying to call an API. The API I am attempting to access can be found here: https://github.com/nickypangers/passport-visa-api Below is the code snippet used for making the API call: const getVi ...
Currently experimenting with frontEnd development, I have incorporated the 'react-infinite-scroll-component' as a dependency. My goal is to apply this effect to my local Json data without relying on any API calls at this stage. I'm encounter ...
I am seeking assistance with React development as I am facing challenges in mapping the data retrieved from a simple API call using Axios. This problem has been troubling me for a few days now. Below, you will find my App.js App Component along with the AP ...
Just diving into React and I'm faced with a challenge - how to update the CSS of a class based on a condition. let customizeColumn = document.querySelector(".main-table-body"); !expandFilter ? customizeColumn.setAttribute("style", ...
I am encountering an issue while using React JS with SSR (express). When I try to start the server, I receive the following error message: C:\PROPJECTS\SSR+1\plusone\node_modules\antd\es\empty\style\css.js:1 imp ...
Auto Suggest Box Component: <AutoSuggestBox filterSuggestions multiSelect size="small" renderInput={(params) => ( <TextBox {...params} label="Choose Event" /> )} ...
I am currently learning React JS and encountered an error when calling my first API in React. I keep getting the message "Unhandled Rejection (TypeError): this.setState is not a function." I have been trying to troubleshoot this issue on my own but haven ...
I am currently encountering an issue in my React application where I am trying to add multiple divs to a page and send the inputted values to an API. The problem arises when each new div is created, the user's answer gets stored based on states which ...
Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...
Dealing with a grid layout that includes spacers between certain items, I attempted to use the :nth-of-type selector in CSS to style only the first column of items and not apply those styles to the right side. However, it seems that the CSS gets confused w ...