Typewriter is a focused rich text editor built to match the War Era article editor. You type a headline, write the body, format and style the text, save your work as a draft, then copy the finished HTML and paste it into the War Era editor.

The full workflow

1. Type the headline in the title box above the editor. The title is saved automatically and stays with your draft.

2. Write in the large editor area. Everything you type is saved locally in your browser and restored the next time you open News Desk.

3. Select text and shape it with the toolbar above the editor, or use the keyboard shortcuts listed below.

4. Press the Save draft button in the panel header at any time to store the current work in the Draft Library on the right.

5. When the article is finished, press the HTML button to copy the TipTap HTML to your clipboard.

6. Press the external link button to open the War Era editor in a new tab, paste the copied HTML into the article body, and publish.

The toolbar holds every formatting and insert tool, grouped by purpose. Select text first, then press a button, or apply the tool to the paragraph the caret is in.

Block type

The select on the left switches the current block between P, H1, H2 and H3. Put the caret in a paragraph, pick a type, and the block becomes a heading or returns to a paragraph.

Text formatting

Bold thickens the selection, Italic slants it, Underline underlines it and Strikethrough draws a line through it. Ctrl+B Ctrl+I Ctrl+U

Inline code renders the selection in a monospace font, perfect for names, IDs and technical words.

Font and color

The font select changes the family of the selected text and matches the fonts the War Era editor understands. The color button () opens a color slider that accepts any hex color — not just presets — and remembers your last 20 picked colors below the slider; the icon tints to the color under the caret.

Alignment

Align the current block left, center, right or justified. These cover the paragraph, headings and quotes.

Ruler, lists and indentation

Horizontal ruler inserts a divider line. Typing --- on its own line then pressing Enter does the same thing.

Numbered list and Bulleted list convert the current paragraphs into a list. Type 1. then a space to start a numbered list, or - then a space for a bulleted list.

Indent and Outdent move a line or a nested list item in and out. Tab indents, Shift+Tab outdents.

Quote, code and collapsible

Quote block styles the paragraph as an editorial quote. Code block wraps it in a monospace, preformatted block. Collapsible section inserts an expandable details block that the War Era editor renders with a built in toggle.

Insert

Link asks for a URL and wraps the selection in a hyperlink. Pasting a URL also turns it into a link — and pasting over selected text makes that text the link label. Image asks for an image URL and inserts the image. YouTube and TikTok embed a video from its share link, ready for the War Era player.

The large area is a full rich text surface. Most formatting is inherited from the toolbar, and a few behaviors are built in.

Mentions and locked chips

Type @ anywhere to open the mention picker. Search any user, country, region or faction, then pick one to insert it as a locked newsroom chip. Chips are protected: formatting and even backspace never damage them, the whole chip is deleted at once, and the caret snaps safely around it.

Pasting a War Era entity link (e.g. app.warera.io/article/6a9b33dbe6b0d5b675a25581 or just /article/6a9b33dbe6b0d5b675a25581) works as a mention too — any entity type resolves into the same locked chip.

Smart typing

1. then space starts a numbered list. - then space starts a bulleted list. --- then Enter inserts a horizontal rule. Enter inside the summary of a collapsible section moves the caret into the collapsible body.

Live status

The counter bar under the editor shows the character count, the word count, the paragraph count (one line is one block) and the caret position as line, column and character offset. It updates while you type.

Spellcheck

Switch spellcheck on from the sidebar. It marks misspelled words in the whole document, including text that was already written, not just new words.

Zoom

Hold Ctrl and roll the mouse wheel to scale the text. The zoom level is remembered between sessions.

The narrow strip on the right of the editor holds the editor tools, from top to bottom.

Zoom in and Zoom out scale the text in 5% steps. The percentage button in the middle resets the zoom to 100%.

Undo reverts the last action and Redo replays it. Each button is grayed out when there is nothing to undo or redo. Ctrl+Z Ctrl+Y

Find and replace opens the search box. Type a term, read the live match count, and press Next to jump between matches. Tick the Replace checkbox to reveal the replace field and the Replace and Replace all buttons. Esc closes the search at any time.

Spellcheck toggles the browser spell checker for the whole document.

Clear wipes the editor back to a single empty paragraph. The cleared state is saved, so reloading keeps it clean.

Three buttons sit at the top of the Typewriter panel and cover the whole export path.

Save draft stores the current title and body in the Draft Library, stamped with the date and time. Nothing leaves your browser.

Copy HTML serializes the article into TipTap compatible HTML, exactly the format the War Era editor reads, cleans up loose markup, and puts it on your clipboard. A toast confirms the copy.

Open War Era editor opens the article editor at app.warera.io in a new tab. From there, paste the copied HTML into the article body and continue with the official War Era tools: thumbnails, categories and publishing.

The library lives on the right side of the panel, above the images. Every saved draft is a card showing the title and the date and time it was last saved. When the library is empty a hint tells you to write something and press Save draft.

Click a card to load that draft into the editor. The card you are working on is highlighted as current.

Each card has three action buttons:

Save to this draft takes the current editor state and overwrites that draft, refreshing its timestamp. Use it to update an older draft with newer changes.

Rename swaps the card for a small input so you can change the title without touching the content. Enter saves, Esc cancels.

Delete removes the draft immediately. Deleting has no undo.

The image library reuses the same images across articles instead of hunting URLs every time. It accepts direct image links from imgur, giphy and tenor.

Paste a direct image link into the small input and press the add button. Duplicates are ignored, and a toast confirms the image was added. The cloud button next to it uploads a picture from your computer to Imgur and adds the result.

You can also drop or paste an image straight into the article — it is uploaded to Imgur, inserted at the caret, and saved to the library at the same time. The toolbar's upload button does the same but only inserts.

Thumbnails appear in the grid below. Click any thumbnail to insert that image into the article at the caret. The small mark on a thumbnail removes the image from the library only, it never touches the article. Tables sent from the Table Maker wear a ▦ Table badge so you can spot auto-generated images.

Table Maker turns structured text into a styled HTML table in one click. Paste data into the input area, press Convert, and a table appears in the output panel. The format is detected automatically.

The workflow

1. Paste or type your data into the large input area.

2. Press Convert. The tool detects the format and builds the table.

3. Use the action buttons below the input to copy the table as HTML or Markdown, download it as a PNG image, or send it to the Typewriter Image Library.

4. Press Clear to reset the input and the output.

When you press Convert, Table Maker reads the pasted text line by line. It detects the format from the structure of the text, splits every line into cells, and treats the first line as the header row. The table is then drawn with computed column widths, and short all-numeric columns are centered automatically.

If the tool cannot find a header row and at least one data row, it reports an error in the status bar under the buttons instead of producing an empty table.

Each of these formats is detected automatically. The first line of the data becomes the header row built into the table.

Markdown tables

Paste a Markdown table with pipe characters. The header row and its separator line of dashes are recognised automatically.

| Name     | Score | Rank |
| -------- | ----- | ---- |
| Alpha    | 1200  | 1    |
| Bravo    | 980   | 2    |
| Charlie  | 750   | 3    |

Tab-separated values (TSV)

Columns separated by tab characters. The first line becomes the header row.

Name	Score	Rank
Alpha	1200	1
Bravo	980	2
Charlie	750	3

Comma-separated values (CSV)

Columns separated by commas. The first line becomes the header row.

Name,Score,Rank
Alpha,1200,1
Bravo,980,2
Charlie,750,3

Numbered lists

Each line starts with a number followed by a period or a closing parenthesis. Columns within a line are separated by tabs or double spaces; the first data line becomes the header row.

1. Name	Score	Rank
2. Alpha	1200	1
3. Bravo	980	2
4. Charlie	750	3

Bulleted lists

Each line starts with a bullet (•, - or *). Columns within a line are separated by tabs or double spaces; the first data line becomes the header row.

• Name	Score	Rank
• Alpha	1200	1
• Bravo	980	2
• Charlie	750	3

Plain text with delimiters

Lines of text where columns are separated by tabs or three or more spaces. The first line with several columns becomes the header row.

Name    Score   Rank
Alpha   1200    1
Bravo   980     2
Charlie 750     3

Once a table has been generated, the buttons under the input area export it in different ways.

Convert parses the input text and builds the table. If the input is empty or cannot be parsed into a header row plus data, an error appears in the status bar.

Clear empties both the input area and the output panel.

Copy HTML copies the raw HTML of the rendered table to your clipboard. Paste it into the War Era article editor or any HTML surface.

Copy Markdown copies a Markdown-formatted version of the table (header row, separator and padded cells) to your clipboard.

Download PNG

Renders the visible table as a high-resolution PNG image and downloads it to your computer as table.png. The message under the buttons reports the render progress.

Add to Image Library

Renders the table as a PNG, uploads it to Imgur, and adds the result to the Typewriter Image Library. The generated image wears a ▪ Table badge so you can spot auto-generated thumbnails. From there you can insert it into any article, just like any other library image. If the same table was added before, the duplicate is ignored.