Skip to content

Can't portal inside markdown without React hydration warnings #44

Open
@aeharding

Description

@aeharding

React (and HTML, for that matter) don't really like it when <div> is inside <p>. This happens when I portal inside markdown (where virtually everything is inside a <p>), for portalling a video, for example.

So, I would like the option to use inline portal element (outputting <span>). Perhaps ELEMENT_TYPE_HTML could be renamed to ELEMENT_TYPE_HTML_BLOCK and add ELEMENT_TYPE_HTML_INLINE

Here's the error for the placeholder. There's another for the portal container. I'll make a PR to fix both of these.

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.

  ...
    <div ref={null} className="Positioned..." style={{...}}>
      <CommentContainer depth={1}>
        <render depth={1} themeName="rainbow">
          <div ref={null} className="Container_..." style={{...}}>
            <ModeratableItemBannerOutlet>
            <div>
              <CommentHeader>
              <div aria-hidden={false} className={"rah-stat..."} style={{height:"auto", ...}} ref={null}>
                <div className={undefined} style={{}} ref={function ref}>
                  <render onClick={function _temp2}>
                    <div onClick={function _temp2} ref={null} className="Content_ci...">
                      <CommentContent item={{id:4411616, ...}} showTouchFriendlyLinks={true} mdClassName="collapse-m...">
                        <CommentMarkdown className="collapse-m..." id="https://le../.">
                          <Markdown className="collapse-m..." id="https://le../." components={{...}}>
                            <Markdown className="collapse-m..." components={{...}} remarkPlugins={[...]} ...>
                              <div className="collapse-m...">
>                               <p>
                                  ...
                                    <Video alt="image" node={{type:"element", ...}} onClick={function onClick} ...>
                                      <span style={{opacity:0}} className="media smal...">
                                        <OutPortal2 alt="image" node={{...}} onClick={function onClick} ...>
>                                         <div ref={{current:null}}>
                        ...
      ...

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions