Textarea field in modules

Develop, Build & Integrate CMS Development
1

I am building a Code Block Web Component following this blog How to Build a Code Block Web Component
I cannot get the text box to wrap and display the whole text. It just shows the whole code in a single line. I am using prismjs to display the code as suggested.
The field type is restricted to text, how do I get textarea? Would that help

SGonsalves5_1-1742824587942.png
SGonsalves5_1-1742824587942.png836×664 53.7 KB

SGonsalves5_0-1742824488320.png
SGonsalves5_0-1742824488320.png2238×1222 310 KB

2

Hi, @SGonsalves5 :waving_hand: Thanks for your post. I haven’t tried this project myself, and I noticed it was published in 2022. Hey @Anton @DaveParry @Anonymous have you done the project that @SGonsalves5 linked to in their OP? Or do you have any general feedback or troubleshooting tips for them?

Thank you very much for taking a look! — Jaycee

3

Hey @SGonsalves5,

most likely you’ll need to add some CSS to the code block like max-width, white-space etc.

Try this code instead of the one from the guide:

 .code-block-container {
 margin: 2rem 0;
 border-radius: 4px;
 overflow: hidden;
 }

 .code-block-header {
 background: #1e1e1e;
 padding: 0.5rem 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 }

 .code-block-title {
 color: #fff;
 margin: 0;
 font-size: 0.9rem;
 }

 .code-block-content {
 margin: 0;
 padding: 1rem;
 background: #1e1e1e;
 }

 .code-block-content pre {
 margin: 0;
 padding: 0;
 white-space: pre-wrap;
 word-wrap: break-word;
 }

 .code-block-content code {
 font-family: 'Fira Code', monospace;
 font-size: 0.9rem;
 display: block;
 white-space: pre;
 tab-size: 4;
 }

 /* Add line numbers if enabled */
 .code-block-content pre.line-numbers {
 position: relative;
 padding-left: 3.8em;
 counter-reset: linenumber;
 }

 .code-block-content pre.line-numbers > code {
 position: relative;
 white-space: inherit;
 }

 .code-block-content .line-numbers .line-numbers-rows {
 position: absolute;
 pointer-events: none;
 top: 0;
 font-size: 100%;
 left: -3.8em;
 width: 3em;
 letter-spacing: -1px;
 border-right: 1px solid #999;
 user-select: none;
 }

 .code-block-content .line-numbers-rows > span {
 pointer-events: none;
 display: block;
 counter-increment: linenumber;
 }

 .code-block-content .line-numbers-rows > span:before {
 content: counter(linenumber);
 color: #999;
 display: block;
 padding-right: 0.8em;
 text-align: right;
 }

And also enable the “allow_new_line” in the text block for the code

best,

Anton

4

Hi @SGonsalves5

It sounds like you’re having trouble getting text to wrap properly in your code block web component. The issue is likely related to your CSS settings and how Prism.js applies styles. Here’s a simple breakdown of what’s happening and how to fix it:
Why the Text Stays on One Line:
CSS White-Space Property: By default, elements like <pre> and <code> often have white-space: nowrap; , which prevents text from wrapping and causes horizontal scrolling.
Prism.js Styles: Prism.js, which handles syntax highlighting, might not automatically enable text wrapping, and its default or custom styles could be affecting this behavior.
Container Size: If the container holding your code block is too narrow, long lines of code won’t fit and will remain on a single line.
How to Fix It:
Update Your CSS: Set white-space: pre-wrap; on the <pre> element in your component’s CSS. This allows text to wrap while keeping formatting intact. Adding overflow-x: auto; can also help with scrolling when needed.
Use a <textarea> for Input (If Possible): If you’re dealing with user input, a <textarea> makes handling multi-line code easier and preserves line breaks naturally. Combined with white-space: pre-wrap;, this will ensure text wraps correctly.
These changes should help your code block display text properly across multiple lines.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.
Thanks!