uiwjs / uiwjs/react-md-editor

Setting background color overwrites the textarea font color

Open
#701 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.9k
Forks
201
Avg merge
12m
Merged PRs (30d)
1

Description

Awesome tool, I grabbed the latest version and added it to my project. Only problem I encountered was adding some really basic styles to the editor.

The problem is
When I set a background color for the editor, the font color is changed to match the background color.

Tested on latest version of chrome.

In doing some research I found this issue that was logged back in 2022:
Editor Font #425 (https://github.com/uiwjs/react-md-editor/issues/425)

I used the code sandbox that was set up with the work around there to repo problem and verify that I wasn't picking up some stray CSS.

https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark

I change the css in the example to the following:

.w-md-editor-text-pre > code,
.w-md-editor-text-input {
color: #000000;
background-color: #fffaf0;
}

If you remove the background color setting, everything renders fine. If you highlight the textarea you can see the text, so it is there.

The requested fix
Minimal fix would be to get the background-color property to not alter color property

Bonus points if you can get the color and background-color wired into the actual editor properties. CodeMirror might make general css styling tricky, but there are a few basic styles that users are going to be commonly set (ex: color,bg color, font, font size). Some sort of capacity for these props would be nice.

Ping me if I can help with fix, thx.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and inspect the editor styles around .w-md-editor-text-pre > code and .w-md-editor-text-input. Confirm that setting background-color changes the rendered font color, then verify that the minimal fix preserves an independently configured color; the requested editor properties are an optional broader scope.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.