get total lines prior to rendering

[nullhook]

i have a use case where i'm streaming markdown text to the renderer and want to show a text cursor at the end of each paragraph. this seems trivial, as shown below. since the streaming means paragraph lines increase gradually, the cursor should only be visible on the last paragraph.

p: (props) => {
    return (
      <p>
        {props.children}
        {mainProps.shouldShowTextCursor && <CaretSVG />}
      </p>
    )
  }

i know i can read an individual node's position from props.node.position.end.line. ideally, i'd like to get the total lines before rendering. i could potentially read tree's positional info which seems to have end line. however, setting state here looks inefficient. is there a better api that provides this info?

const plugin = () => {
    function transformer(tree: any) { // tree.position.end }
    return transformer
}

[nullhook]

another potential solution could be to use a pseudo-selector in css to show the cursor only for the last p element.

[ChristianMurphy]

Welcome @nullhook! 👋

Handling streaming markdown text and adding a text cursor at each paragraph's end sounds straightforward, but ensuring smooth rendering requires careful consideration. Let's explore some recommendations you can apply and test.

Before delving into complex content customization or resorting to heavy state management, consider leveraging CSS for dynamic styling. You can achieve this by wrapping your markdown content within a container element and applying a CSS class to it. Then, using CSS, target the last paragraph within this container and dynamically append the text cursor.

Here's how you can implement this approach using React and the react-markdown component:

import React from 'react';
import ReactMarkdown from 'react-markdown';
import './MarkdownContainer.css'; // Assuming you have a CSS file for styling

const MarkdownContainer = ({ markdownContent, shouldShowTextCursor }) => {
  return (
    <div className="markdown-container">
      <ReactMarkdown>{markdownContent}</ReactMarkdown>
      {shouldShowTextCursor && <div className="text-cursor">|</div>}
    </div>
  );
};

export default MarkdownContainer;

In this example, MarkdownContainer is a React component that receives markdownContent as a prop, representing the streamed markdown text. It also receives a boolean prop shouldShowTextCursor, indicating whether the text cursor should be displayed.

We wrap the markdown content within a container div with the class markdown-container for easy styling and targeting child elements using CSS. Then, we conditionally render the text cursor based on the value of shouldShowTextCursor.

Now, let's define the CSS to target the last paragraph and style the text cursor:

.markdown-container {
  /* Your container styles here */
}

.markdown-container p:last-of-type {
  position: relative;
}

.text-cursor {
  position: absolute;
  bottom: 0;
  right: 0;
  /* Additional styling for the text cursor */
}

With this setup, the text cursor will dynamically appear at the end of the last paragraph as the markdown content is streamed. This CSS-first approach keeps the rendering logic simple and efficient.

While remark or rehype plugins might offer more control over markdown rendering, they could be overkill for this use case. Starting with CSS provides a lightweight and effective solution that you can play around with and test.

[nullhook]

was your reply written by chatgpt? sounds templatey.

your css solution assumes that paragraph elements fill the bounding box completely. however, there might be text within that box ending prematurely, so this method wouldn't work.

[ChristianMurphy]

was your reply written by chatgpt?

No

sounds templatey

Ask a vague generic question, get broad generic reply 😉

your css solution assumes that paragraph elements fill the bounding box completely. however, there might be text within that box ending prematurely, so this method wouldn't work.

Why do you care about the bounding box?
Cursors are inline.

[nullhook]

this is what it suppose to look like.

however, with your css solution it appends to the edge of the p element's box.

[ChristianMurphy]

I don't know what that is, or what you are trying to do.
What I do know is it is not a cursor.

Take some time to formulate your question https://github.com/remarkjs/.github/blob/main/support.md
Even ChatGPT is less lazy than what you've put so far 😉

Beyond that, a friendly reminder, remark is an open source community.
We aren't help desk for your personal or professional projects.

So:

1. take it down a notch with the passive aggression
2. since you seem to find value in the project and community support, and not interested in contributing back at a code or community level, consider sponsoring the project https://github.com/sponsors/unifiedjs

[ChristianMurphy]

With your updated message I suspect you're looking for something like https://css-tricks.com/snippets/css/typewriter-effect/ but it's still unclear.
Again, take time to frame your question, and chill.

[nullhook]

no, the typewriter effect isn't what i'm looking for. i've managed to solve this with my initial solution, but i was concerned about setting a React state within it.

thank you for your help; i appreciate your effort.

const plugin = React.useCallback(() => {
    const transformer = (ast: any) => {
      setEndLine(ast.position.end.line)
    }

    return transformer
  }, [])