the opt-in can be a <--RGH:PreviewInline or <--RGH:Checklist

also some functionality:

• in Checklist Mode:

  • the user has to click some checkboxes and only if all are checked then submit button becomes activated

• In PreviewInline Mode:

  • the comments are visible as rendered text, and then in between there are always an textarea
  • maybe there is a fancy editor component which renders the inline comments styled, but the other text as code? so the user can use normal the cursors in this textfield like before...

• the user has to click some checkboxes and only if all are checked then submit button becomes activated

We can't make RG enforce requirements; users will just disable the feature.

• maybe there is a fancy editor component which renders the inline comments styled, but the other text as code?

I don't think most fields need that. We can just add fields above the regular editor.

I was thinking about this feature today. I think it's important that the feature doesn't require awkward text in the templates. Most people won't see the rendered version, so it's important that they're not bothered by it.

1. Enable the feature if the template starts with <!-- Please follow the template --->

2. Render the whole field by sending it to GH

3. Add a <textarea> after every line that ends with :

   • then, if it looks like this:

     <pre> Enter your code: const your = 'code' </pre>

     it's rendered as

     <pre> Enter your code: +---------------------------+ | const your = 'code' | | | | | | | +---------------------------+ </pre>

     and then it's concatenated back to

     <pre> Enter your code: whatever the user entered </pre>

4. Prepend the rendered form above the regular editor and empty the editor

The best part the step 2 is that we get checkboxes for free (they're rendered by GitHub) and that we don't have to do any Markdown parsing. Step 3 currently only means something like:

for (const line of select.all('.markdown-body > *')) {
  if (line.textContent.trim().endsWith(':')) {
    const next = line.nextElementSibling;
    // Preserve demo content
    if (next.matches('pre, .highlight') || next.textContent.startsWith('e.g.')) {
      next.replaceWith(<textarea>{next.textContent}</textarea>)
    } else {
      next.before(<textarea/>)
    }
  }
}

BUT

Actually the hard part isn't rendering: It's merging the content of these textareas back into original template. 🤔 So I think we have to pre-parse the text, insert placeholders (like #$%1, #$%2) and then send them to GitHub for rendering.

@fregante using this as a basic non-intrusive checklist for tasks sounds a lot useful than having to handle user input inputs along with it too. It just sounds more complicated (even if we find a very optimised solution for it).

https://github.blog/changelog/2021-06-23-issues-forms-beta-for-public-repositories/ !!

Yooooooooo! Turning this into a meta issue 👇