notion-to-md icon indicating copy to clipboard operation
notion-to-md copied to clipboard

Feature Request: A way to add markup before and after children blocks

Open m4rrc0 opened this issue 1 year ago • 1 comments

Hi. It would be really useful to be able to add markup before and after children blocks. It would allow us to inject html tags more easily. The "outline structure" of Notion blocks could be used to specify children of a tag in a natural way. Since most (all?) markdown parsers accept html, it makes sense to me to easily allow replacing blocks with html tags.

One obvious candidate for such feature is the toggle block. I saw that you currently need to re-fetch children blocks inside the toggle transform function. Wouldn't it be more consistent if the parent toggle block only outputs <details><summary>${summary}</summary> as 'opening output' and </details> as 'closing output'? Then the children's outputs would be injected in between the opening and closing strings of the parent.

Of course, there would be some considerations to keep in mind. For example, children would need to be aware of all their parents' types because we shouldn't mistakenly create <p> elements inside <p> elements for example.
That is not really up to this library to make this check but simply allow one to implement her own logic with the setCustomTransformer function.

Example

n2m.setCustomTransformer("toggle", async (block, ancestors) => {
  const { has_children, toggle } = block;
  let toggle_rich_md = "";
  let toggle_plain_text = "";
  toggle.rich_text.forEach((rich_text) => {
    toggle_rich_md += n2m.annotatePlainText(
      rich_text.plain_text,
      rich_text.annotations
    );
    toggle_plain_text += rich_text.plain_text
  });

  // if a string is returned, it is the 'opening output' and there is no 'closing output'
  // (so it stays consistent with the current API)
  if (!has_children) return `<p>${toggle_rich_md}</p>`

  // if an object is returned, children of this block will be written between the 'open' string and the 'close' string
  return { open: `<details><summary>${toggle_plain_text}</summary>`, close: `</details>`};
});

m4rrc0 avatar Sep 28 '22 12:09 m4rrc0