How to implement show more/less button

[mrodrigues95]

I'm trying to implement a "Show more/less" button when the editor is in readOnly mode. I'm not exactly sure how to go about doing this since I'm relatively new to this library, any pointers would be appreciated.

[sebastijandumancic]

@mrodrigues95 did you find a way?

[JohnJunior]

For anyone still looking for this: in read-only mode (editable: false) Lexical just renders your content into a plain, non-editable DOM subtree. So a "Show more / Show less" button is a purely presentational (CSS) concern - you clamp the height of the content container and toggle a class. You never touch the EditorState, the nodes, or the selection.

The three pieces are:

1. editable: false in initialConfig.
2. A CSS line clamp on the content wrapper, toggled by a class:

.content--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;      /* how many lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3. A bit of state to flip that class, plus an overflow check so the button only shows when there's actually more to reveal:

const ref = useRef<HTMLDivElement>(null);
const [expanded, setExpanded] = useState(false);
const [overflowing, setOverflowing] = useState(false);

useLayoutEffect(() => {
  const el = ref.current;
  if (el) setOverflowing(el.scrollHeight > el.clientHeight + 1);
}, []);

// ...
<div ref={ref} className={expanded ? 'content' : 'content content--clamped'}>
  <RichTextPlugin contentEditable={<ContentEditable />} ErrorBoundary={LexicalErrorBoundary} />
</div>
{overflowing && (
  <button onClick={() => setExpanded(v => !v)}>
    {expanded ? 'Show less' : 'Show more'}
  </button>
)}

If you'd rather clamp by pixel height, swap -webkit-line-clamp for max-height + overflow: hidden. And if you need to truncate by node structure ("show the first 2 paragraphs") instead of by visual height, read editor.getEditorState() and render a trimmed copy - but for the common "description card + Show more" case the CSS approach above is all you need.

I put together a minimal, runnable React + Vite example here:
👉 https://github.com/JohnJunior/lexical-react-rich-show-more

npm install && npm run dev