Resolve "Content Auszeichnung"
Proposed changes
Participant
- Render the content body with markdown
Creator
- Support the creator with writing markdown by adding a toolbar
- Show a preview of the written markdown
Testing
Creator
- Join a room
- Create new content
- Write markdown in the body section
- Clicking the buttons should place the proper markup around the text selection or at the cursor's location if there is no text selected
- Check if the content gets previewed correctly
Participant
- Join a room
- Visit the content section
- Check if the content gets rendered correctly
As the content api is not finished yet you have to add markdown to the
content
attribute in the content components (e.g.ContentTextParticipantComponent
) manually.
Hiccups
Directive
The first and cleanest approach, to add the toolbar via directive directly to the textarea to avoid DOM traversal and listener handling, failed because the injected HTML doesn't get styled. See https://github.com/angular/angular/issues/7845 for reference.
Bypassed issue by using a separate component.
Tabs
As the content creation gets rendered in angular material tabs (separated by content type) and the tab element doesn't render the html of inactive tabs in the DOM, the component is not able to resolve the reference to the textarea on creation.
Tab inactive
Tab active
Bypassed issue by retrieving textarea on button click.
Follow up
In the future (when !107 (merged) got merged) we should consider creating a component holding the form's part that is used by all content types:
- Subject
- Body
- Body Preview
Closes #156 (closed)