How to limit input length or lines in React-codemirror

Ryan Munil Lee — Fri, 03 Mar 2023 17:47:28 +0000

Codemirror is a powerful library that allows users to integrate a production-ready code editor into their projects. It’s a huge library with great thorough documentation, but it’s not something you can read in one sitting.

TLDR;

How to limit the length of doc:

 const lengthLimit = useCallback((tr: any): boolean => {
    // NOTE: limiting the length to 100 characters.
    return tr.startState.doc.length + tr.newDoc.length < 200;
  }, []);

<CodeMirror
  value={value}
  extensions={[
    EditorState.changeFilter.of(lengthLimit)
  ]}
  onChange={(value) => setValue(value)}
/>

Source [1], [2]

Similarly, this is how you limit line numbers.

const handleLengthLimit = () => {
   // doc will only update with the newDoc’s line number <= 10
   return tr.newDoc.lines <= 10;
}

<CodeMirror
      extensions={[                  
          EditorState.changeFilter.of(handleLengthLimit),
      ]}
      onChange={handleChange}                      
/>

In-depth

React-codemirror is the most widely used React component for Codemirror. It uses Codemirror 6 behind the scene. However, it has lots of known limitations because Codemirror does not behave in a React way. (It was there before React.)

As of Mar, 2023, React-codemirror editor is currently a uncontrolled component

So when most of React Developer would want to achieve something like this:

User input -> update input state -> mutate input state using useMemo or useEffect -> update input state -> rerender with thew new input

The above wouldn’t work since the component is uncontrolled. So the work around is going to be:

User input -> intercept input and do your stuff with EditorState.changeFilter or EditorState.transactionFilter -> update state -> rerender

If you’re using it for a production feature at your work. I highly recommend you to do a DIY React component by following this article.

About

If you run into the same problem and this article helped you a bit please:
follow my Github Repo
And check out my silly project Typing Brain

What do you call a person who does full-stack dev, DevOps, UX design, product design and everything else?

Ryan Munil Lee — Sat, 27 Mar 2021 21:41:27 +0000

"A Single Parent?"

To the software you're building, you are basically a single mom or dad.

"I came up with the product and designed the logo, branding, the landinage page, and UI. Then I designed the UX and did some user testings. Then I coded the frontend, backend, then some scripts to deploy them. I made Youtube videos and Instagram posts to promote it. Tomorrow morning, I have a sales Zoom call. I hope they buy it. I'm like a single mom, here."

But it sounds fun but not enough. We need something else that sounds more professional.

"A solopreneur?"

But anybody can be a soloprenuer and don't have to work on a load balancer.

"A person who is not good at anything."

Haha. Yes, I'm guilty. But come on.

"A generic small startup dev?"

GSSD? I don't know. That's too long.

"I propose Watchmaker."

I still like to call myself a craftsman. Watchmakers were the heroes of craftsmanship back in the days.

Watchmakers designed, made and sold watches from their workshop.

If you put a computer in front of that guy in the picture, I won't be able to distinguish myself from him.

We are essentially the digital watchmakers.

Yeah, let's call us watchmakers.

DEV Community: Ryan Munil Lee