Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

semmelei: News Post editor toolbar and live preview

Open
#83 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript
Domain
frontend

Research direction

Start from the admin News Post editor and find the existing NewsPostBody component used by /news. Check the project’s i18n rules and frontend checks before adding the toolbar, live preview, and responsive editor and preview views. Done means toolbar actions work with and without selected text, the preview updates through NewsPostBody, and the wide screen and phone layouts meet the acceptance criteria.

Written by the indexing model from the issue text.

Description

ready-for-agent

Parent

#77

What to build

The News Post editor gets a small Markdown toolbar and a live preview, so Admins don't need to know Markdown and see exactly what customers will see.

Toolbar: bold, italic, heading, list, link. Each wraps the selected text, or inserts a placeholder when nothing is selected. Plain textarea, no editor library (no Monaco, no CodeMirror).

Preview: rendered with the same NewsPostBody component as /news, live while typing. Side by side with the editor on wide screens; two tabs (editor / preview) on a phone.

Acceptance criteria

  • Each toolbar button wraps the selection, or inserts a placeholder without a selection (checked by hand)
  • Preview renders through NewsPostBody and updates live
  • Side by side on wide screens, tabs on a phone (checked by hand)
  • i18n rules followed; frontend checks green
Dominant language
TypeScript
Stars
0
Forks
1
Avg merge
10h 56m
Merged PRs (30d)
34

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from myOmikron/code

All issues in myOmikron/code

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.