Microsoft/monaco-editor

Monaco Editor Colorize - Break Word Problem

Open

#2,701 opened on Oct 22, 2021

View on GitHub
 (0 comments) (0 reactions) (1 assignee)JavaScript (1,283 forks)batch import
bughelp wanted

Repository metrics

Stars
 (14,836 stars)
PR merge metrics
 (Avg merge 6h 26m) (15 merged PRs in 30d)

Description

When we use monaco editor colorize for highlighting content, break-word is not happening properly. The reason is that you use   content for making spaces in content. So that we can't break word properly using CSS.

Example Code like this :

<span>
    <span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(</span>
    <span class="mtk40">'.zc-branchesBody&nbsp;.dropdown-content'</span>
    <span class="mtk1">).css(</span>
    <span class="mtk40">'max-height'</span>
     <span class="mtk1">,&nbsp;</span>
</span>

If the span tag containing like this "word-break: break-word" is not possible using CSS and javascript.

Any idea for "breakword containing   content" ?

Contributor guide

Research direction
Examine the colorize function in the Monaco editor source to see how it creates HTML spans with `&nbsp;`. Consider replacing `&nbsp;` with regular spaces or adding a CSS rule like `word break: break word` or `overflow wrap: anywhere` on the container element to fix word breaking.
Tech stack
javascripttypescriptcss
Domain
frontendtooling
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSHTMLJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75