HTML Comment

[Krombik]

Goals

1. Add HTML Comments: Introduce a component that allows insertion HTML comments into JSX, enabling better handling of specific HTML structures.

Background

React does not natively support adding HTML comments in JSX. The common workaround, using the dangerouslySetInnerHTML prop, is limited as it only works inside of HTML element. This limitation becomes apparent when HTML comments need to act as wrappers around other Components, such as:

<!--[if !mso]><!-->
<img src="dark-logo" className="hidden dark:block">
<!--<![endif]-->

Proposal

Introduce a Comment component and a replaceCommentPlaceholder method to manage HTML comments effectively:

type Props = {
  children: string;
};

const CommentPlaceholder = "c-" as keyof JSX.IntrinsicElements;

const Comment: FC<Props> = ({ children }) => (
  <CommentPlaceholder hidden dangerouslySetInnerHTML={{ __html: `<!--${children}-->` }} />
);

const regex = /<c- hidden="true">(.*)<\/c->/g;

export const replaceCommentPlaceholder = (html: string) =>
  html.replace(regex, (_, comment) => comment);

export default Comment;

• Comment Component: This component acts as a custom HTML tag, which will be ignored by the browser due to the hidden attribute during development.
• replaceCommentPlaceholder Method: This method replaces all comment placeholders with actual HTML comments. It should be used for all render methods to ensure that the comments are correctly inserted into the final HTML output.

[gabrielmfern]

Interesting idea to use a <c-> element for this. We've been thinking on how to best do this for a while, I'll get this one to the team and see what everyone thinks. This seems wonderful, though, thanks for writing it up.

[gabrielmfern]

Looking at how we would use the component you proposed, and it would work in the case you mentioned but not with comments that include React inside, such as:

<!--[if mso]>
  <p>This is meant for Outlook only</p>
<![endif]-->

Another, more general idea would be to have a sort of <IncludeAsRaw> component that would include the exact content you pass to it, and remove itself on rendering similar to how you mentioned, this would allow for both kinds of comments.

[Krombik]

This is ultimate solution:

const enum FakeTag {
  COMMENT = "a",
  MSO = "b",
  NON_MSO_OPENER = "c",
  NON_MSO_CLOSER = "d",
}

const OPENERS: Record<FakeTag, string> = {
  [FakeTag.COMMENT]: "",
  [FakeTag.MSO]: "[if mso]>",
  [FakeTag.NON_MSO_OPENER]: "[if !mso]><!",
  [FakeTag.NON_MSO_CLOSER]: "<![endif]",
};

const CLOSERS: Record<FakeTag, string> = {
  [FakeTag.COMMENT]: "",
  [FakeTag.MSO]: "<![endif]",
  [FakeTag.NON_MSO_OPENER]: "",
  [FakeTag.NON_MSO_CLOSER]: "",
};

const createFakeTagComponent = (tag: FakeTag) =>
  `${tag}-` as any as FC<PropsWithChildren>;

export const Comment = createFakeTagComponent(FakeTag.COMMENT);

export const MSO = createFakeTagComponent(FakeTag.MSO);

const NonMsoOpener = createFakeTagComponent(FakeTag.NON_MSO_OPENER);
const NonMsoCloser = createFakeTagComponent(FakeTag.NON_MSO_CLOSER);

export const NonMSO: FC<PropsWithChildren> = ({ children }) => (
  <>
    <NonMsoOpener />
    {children}
    <NonMsoCloser />
  </>
);

const regex = /<([a-d])->(.*?)<\/\1->/g;

export const replaceCommentPlaceholders = (html: string) =>
  html.replace(
    regex,
    (_, tag: FakeTag, comment) =>
      `<!--${OPENERS[tag]}${comment}${CLOSERS[tag]}-->`
  );

I remove hidden prop because it has no sense, replaceCommentPlaceholders will be called before it will be displayed in browser
Also by this pattern can be created same components for another mso comments with versions

[Krombik]

This is final version, it supports all mso version conditions:

type MSOVersion = "9" | "10" | "11" | "12" | "14" | "15" | "16";

type MSOConditions = "gt" | "lt" | "gte" | "lte";

const enum FakeTag {
  COMMENT = "a",
  MSO = "b",
  NON_MSO_OPENER = "c",
  NON_MSO_CLOSER = "d",
}

const OPENERS: Record<FakeTag, (data: string | undefined) => string> = {
  [FakeTag.COMMENT]: () => "",
  [FakeTag.MSO]: (data) =>
    data
      ? `[if ${data
          .split(",")
          .map((item) => {
            const t = item.split(" ");

            return t.length === 1 ? `mso ${t[0]}` : `${t[0]} mso ${t[1]}`;
          })
          .join(" | ")}]>`
      : "[if mso]>",
  [FakeTag.NON_MSO_OPENER]: (data) =>
    data
      ? `[if ${data
          .split(",")
          .map((item) => `!mso ${item}`)
          .join(" | ")}]><!`
      : "[if !mso]><!",
  [FakeTag.NON_MSO_CLOSER]: () => "<![endif]",
};

const createFakeTagComponent = (tag: FakeTag) =>
  `${tag}-` as any as FC<PropsWithChildren>;

export const Comment = createFakeTagComponent(FakeTag.COMMENT);

type ConditionalVersion = MSOVersion | `${MSOConditions} ${MSOVersion}`;

type MSOProps = { version?: ConditionalVersion | ConditionalVersion[] };

export const MSO: FC<PropsWithChildren<MSOProps>> = ({ children, version }) => {
  const Component = `${FakeTag.MSO}-` as any;

  return (
    <Component
      {...(version
        ? { a: typeof version !== "object" ? version : version.join(",") }
        : {})}
    >
      {children}
    </Component>
  );
};

const NonMsoOpener: FC<NonMSOProps> = ({ version }) => {
  const Component = `${FakeTag.NON_MSO_OPENER}-` as any;

  return (
    <Component
      {...(version
        ? { a: typeof version !== "object" ? version : version.join(",") }
        : {})}
    />
  );
};

const NonMsoCloser = createFakeTagComponent(FakeTag.NON_MSO_CLOSER);

type NonMSOProps = {
  version?: MSOVersion | MSOVersion[];
};

export const NonMSO: FC<PropsWithChildren<NonMSOProps>> = ({
  children,
  version,
}) => (
  <>
    <NonMsoOpener version={version} />
    {children}
    <NonMsoCloser />
  </>
);

const regex = /<([a-d])-(?: a="(.*?)")?>(.*?)<\/\1->/g;

export const replaceCommentPlaceholders = (html: string) =>
  html.replace(
    regex,
    (_, tag: FakeTag, data, comment) =>
      `<!--${OPENERS[tag](data)}${comment}${
        tag !== FakeTag.MSO ? "" : "<![endif]"
      }-->`
  );

[Krombik]

in this version all string children will be passed throught dangerouslySetInnerHtml, so if it some outlook code - it will stay as it

type MSOVersion = "9" | "10" | "11" | "12" | "14" | "15" | "16";

type MSOConditions = "gt" | "lt" | "gte" | "lte";

const enum FakeTag {
  COMMENT = "a",
  MSO = "b",
  NON_MSO_OPENER = "c",
  NON_MSO_CLOSER = "d",
}

const OPENERS: Record<FakeTag, (data: string | undefined) => string> = {
  [FakeTag.COMMENT]: () => "",
  [FakeTag.MSO]: (data) =>
    data
      ? `[if ${data
          .split(",")
          .map((item) => {
            const t = item.split(" ");

            return t.length === 1 ? `mso ${t[0]}` : `${t[0]} mso ${t[1]}`;
          })
          .join(" | ")}]>`
      : "[if mso]>",
  [FakeTag.NON_MSO_OPENER]: (data) =>
    data
      ? `[if ${data
          .split(",")
          .map((item) => `!mso ${item}`)
          .join(" | ")}]><!`
      : "[if !mso]><!",
  [FakeTag.NON_MSO_CLOSER]: () => "<![endif]",
};

const createFakeTagComponent = (tag: FakeTag) => `${tag}-`;

export const Comment: FC<PropsWithChildren> = ({ children }) => {
  const Component = createFakeTagComponent(
    FakeTag.COMMENT
  ) as keyof JSX.IntrinsicElements;

  return (
    <Component
      {...(typeof children === "string"
        ? { dangerouslySetInnerHTML: { __html: children } }
        : { children })}
    />
  );
};

type ConditionalVersion = MSOVersion | `${MSOConditions} ${MSOVersion}`;

type MSOProps = { version?: ConditionalVersion | ConditionalVersion[] };

export const MSO: FC<PropsWithChildren<MSOProps>> = ({ children, version }) => {
  const Component = createFakeTagComponent(
    FakeTag.MSO
  ) as keyof JSX.IntrinsicElements;

  return (
    <Component
      {...(version
        ? { a: typeof version !== "object" ? version : version.join(",") }
        : {})}
      {...(typeof children === "string"
        ? { dangerouslySetInnerHTML: { __html: children } }
        : { children })}
    />
  );
};

const NonMsoOpener: FC<NonMSOProps> = ({ version }) => {
  const Component = createFakeTagComponent(FakeTag.NON_MSO_OPENER) as any;

  return (
    <Component
      {...(version
        ? { a: typeof version !== "object" ? version : version.join(",") }
        : {})}
    />
  );
};

const NonMsoCloser = createFakeTagComponent(FakeTag.NON_MSO_CLOSER);

type NonMSOProps = {
  version?: MSOVersion | MSOVersion[];
};

export const NonMSO: FC<PropsWithChildren<NonMSOProps>> = ({
  children,
  version,
}) => (
  <>
    <NonMsoOpener version={version} />
    {children}
    <NonMsoCloser />
  </>
);

const regex = /<([a-d])-(?: a="(.*?)")?>(.*?)<\/\1->/g;

export const replaceCommentPlaceholders = (html: string) =>
  html.replace(
    regex,
    (_, tag: FakeTag, data, comment) =>
      `<!--${OPENERS[tag](data)}${comment}${
        tag !== FakeTag.MSO ? "" : "<![endif]"
      }-->`
  );