[NODE_LI] renders <p>

[guanacone]

[NODE_LI]: (children) => {
              return (
                <li className="flex items-center">
                  <span className="text-lg">
                    <IconDone />
                  </span>
                  {/* {children?.[0].props.children[0]} */}
                  {children}
                </li>
              );
            },

children is rendered with a wrapping <p> tag which causes design issues. How can this be avoided.

Other question, how do you render different <li> depending if parent is <ul> or <ol>?

[guanacone]

Found the answer to the first question in issue#36

[NODE_LI]: (children) => {
              if (Children.count(children) === 1) {
                const child = Children.toArray(children)[0];
                if (isValidElement(child)) {
                  // Check if child is a valid React element
                  if (child.type === "p") {
                    return <li>{child.props.children}</li>;
                  }
                }
              }
              return null;
            }

[claus]

how do you render different <li> depending if parent is <ul> or <ol>?

Can you tell me more about what you want to achieve? There is only one kind of <li>.. do you want to add a className or similar?

[guanacone]

My intention is to render a different <li> depending if parent is <ul> or <ol>. My approach is the following:

[NODE_LI]: (children) => {
            const childElements = Children.map(children, (child) => {
              if (isValidElement(child)) {
                const isULItem = child.props.children[0] === "UL Item";
                const textStyleClass = isULItem
                  ? "text-sm md:text-md 2xl:text-base"
                  : "text-purple text-sm md:text-md 2xl:text-base";

                if (child.type === "p") {
                  return (
                    <li
                      key={child.key}
                      className={`py-2 md:py-4 2xl:py-6 ${textStyleClass}`}
                    >
                      <span>{child.props.children}</span>
                    </li>
                  );
                }
              }
              return null;
            });

            return <>{childElements}</>;
          },