# WYSIWYG Editor — Manual

> Full feature reference for the WYSIWYG Editor: every toolbar function, all TipTap extensions, import/export formats, architecture, and limits.

Source: https://www.jpkc.com/db/en/tools/wysiwyg/manual/

Back to the overview: [WYSIWYG Editor](https://www.jpkc.com/db/en/tools/wysiwyg/) · Open the tool live: [www.jpkc.com/tools/wysiwyg/](https://www.jpkc.com/tools/wysiwyg/)

This manual describes the **WYSIWYG Editor** in full: every toolbar function, the underlying TipTap extensions, all import and export formats, the architecture, and the technical limits. The tool's interface is in English, so the button and menu names below are quoted in their original spelling.

## Core concept

The editor is a **single formatted writing surface** (no split source pane). You type text, format it via the toolbar or keyboard shortcuts, and the editor maintains a clean document model underneath. Technically it is [TipTap 3](https://tiptap.dev/) — a headless rich text framework on top of ProseMirror — bundled into a finished application. A two-row toolbar sits above the surface, a status bar with document stats below.

As you start typing, **live Markdown input rules** (from the TipTap StarterKit) help out: `# ` at the start of a line makes a heading, `- ` a bullet list, `1. ` a numbered list, `> ` a quote, ` ``` ` a code block, `**bold**` and `*italic*` set marks. The empty-editor placeholder hints at this: "Start writing… (type '# ' for a heading, '- ' for a list)".

## The toolbar, row 1 — file, history, formats, view

### File operations

Four buttons for file-level document input and output:

- **Open local HTML file** — opens a local `.html`/`.htm`/`.txt` file and loads its content into the editor (replacing the current content).
- **Save as HTML file** — saves the current content as a **standalone, light-themed HTML file** (`document.html`) with an embedded stylesheet, so the result is readable on white regardless of the editor theme. Code is statically syntax-highlighted, formulas are rendered with KaTeX, and collapsible sections are expanded.
- **Insert HTML from URL** — opens a dialog where you enter an absolute http(s) address; that page's HTML is fetched through the server-side proxy and loaded into the editor (see [architecture](#architecture-and-privacy)).
- **Clear editor content** — empties the editor after a confirmation and clears local storage.

### Clipboard and history

- **Cut / Copy / Paste** (`Ctrl+X` / `Ctrl+C` / `Ctrl+V`) — within the editor, a paste keeps the exact inline/block context; external content is taken preferentially as rich HTML, otherwise as plain text.
- **Undo / Redo** (`Ctrl+Z` / `Ctrl+Y`) — via the TipTap history.

### Markdown (Import / Export)

- **Import** — opens the Markdown import dialog: paste Markdown, load a `.md` file, or fetch Markdown from a URL. Confirming replaces the editor content.
- **Export** — converts the current content to Markdown and shows it in a dialog, from where it can be copied or saved as `document.md`.

Round-trip details are under [Markdown processing](#markdown-import-and-export).

### JSON (Import / Export)

- **Import** — loads a **TipTap/ProseMirror document as JSON** (pasted or as a `.json` file). This is the editor's native, **lossless** document model — but only meaningful to this very editor, because it depends on the node schema. Invalid or foreign JSON is rejected and the previous content restored (an error instead of an emptied editor).
- **Export** — outputs the current document as formatted JSON (copyable or saveable as `document.json`).

### Editor theme

Three writing-surface themes: **Dark**, **Light**, **Sepia**. The choice is remembered in the browser. Important: this is only the look of the writing surface — **preview, print, HTML, and PDF export are always light-themed** so the result is readable everywhere.

### Find / Replace

- **Find** (`Ctrl+F`) and **Find & Replace** (`Ctrl+H`) open a search bar above the surface. It uses `prosemirror-search` and highlights all matches.
- Options: **Case** (case-sensitive), **Word** (whole words only), **Regex** (regular expression). **Replace** / **Replace all** replace the current or all matches. `Enter` jumps to the next match, `Shift+Enter` to the previous, `Esc` closes.

### Preview / view

- **Show invisible characters** — toggles whitespace and break markers.
- **Table of contents** — opens a side panel of all headings; a click jumps to the spot.
- **Preview (Light)** — shows the content read-only and light-rendered in a dialog (with its own buttons to save as HTML, print, and PDF).
- **Print (Light)** — opens a light-themed print window.
- **Save as PDF** — produces a PDF (`document.pdf`) via html2pdf (html2canvas + jsPDF).
- **Toggle fullscreen** — distraction-free fullscreen mode; `Esc` exits.

## The toolbar, row 2 — formatting

### Block type

A dropdown that switches the current block: **Paragraph**, **Heading 1**–**Heading 6**, **Code block**, **Quote**. The label shows the active block type.

### Code language

Sets the syntax-highlighting language of the current code block (or creates one if the cursor is not inside one). Choices: **Plain text** plus 17 languages — HTML/XML, CSS, JavaScript, PHP, Python, Java, C, C++, C#, Ruby, Go, Rust, SQL, Bash, JSON, YAML, Markdown. Highlighting is done by `lowlight` wrapping the highlight.js engine (see [Syntax highlighting](#syntax-highlighting)).

### Font family

Sets the font of the selection: **Default font** plus nine stacks (Arial, Times New Roman, Georgia, Courier New, Verdana, Trebuchet MS, Tahoma, Comic Sans MS, Monospace).

### Inline marks

The inline marks: **Bold** (`Ctrl+B`), **Italic** (`Ctrl+I`), **Underline** (`Ctrl+U`), **Strikethrough**, **Inline code**, **Subscript**, **Superscript**. Active marks are highlighted in the toolbar.

### Color & highlight

- **Apply text color** — applies the last chosen text color; a color-picker swatch next to it lets you choose a new one.
- **Highlight** — marker-pen highlight (multicolor capable).
- **Clear formatting** — removes all marks and resets blocks.

### Lists

**Bullet list**, **Numbered list**, **Task list** (checkboxes, nestable).

### Alignment

**Align left / center / right** and **Justify** for headings and paragraphs.

### Insert

- **Add link** / **Remove link** — set or remove a link on the selection (autolink and link-on-paste are active; links don't open on click inside the editor).
- **Insert image** — dropdown: **From URL** (enter an image URL) or **Upload (base64)** (a local file as an embedded base64 image). Images can also be dragged and dropped into the editor.
- **Table** — **Insert table** (3×3 with header row) plus operations: add column/row before or after, delete column/row, **Toggle header row**, **Merge / split cells**, **Delete table**. Tables are resizable.
- **Horizontal rule**.
- **Collapsible section** — an expandable `<details>` block with a title and content.
- **Math (KaTeX)** — **Inline math ($…$)** or **Block math ($$…$$)**; you're prompted for LaTeX, which is rendered with KaTeX. Clicking a rendered formula reopens it for editing.
- **Emoji** — a searchable emoji picker. Alternatively, type `:` in the text for shortcode autocomplete.

### Bubble menu and drag handle

When text is selected, a **selection bubble** appears with Bold, Italic, Underline, Strikethrough, Inline code, and Add link. Hovering over a block reveals a **drag handle** on the left for moving the block.

## The extensions at a glance

The editor bundles these TipTap extensions (the factual list from the bundle):

- **StarterKit** — base nodes and marks: paragraph, headings (H1–H6), bold, italic, strikethrough, inline code, quote, bullet/numbered lists, horizontal rule, hard break, history (undo/redo), and the Markdown input rules. (The built-in link and code block are disabled and replaced by the specialized versions.)
- **Link** — configured standalone (autolink, link-on-paste, no open-on-click in the editor).
- **CodeBlockLowlight** — code blocks with syntax highlighting.
- **TextStyle, Color, FontFamily** — text color and font.
- **Highlight** (multicolor), **Subscript**, **Superscript**.
- **TextAlign** — alignment for headings and paragraphs.
- **TaskList / TaskItem** — task lists (nestable).
- **Table / TableRow / TableHeader / TableCell** — tables (resizable).
- **Image** — images, base64 allowed.
- **Details / DetailsSummary / DetailsContent** — collapsible sections.
- **Typography** — typographic substitutions (e.g. quotes, dashes).
- **Mathematics** — KaTeX formulas, inline and block.
- **CharacterCount** — word and character count (for the status bar).
- **InvisibleCharacters** — show invisible characters.
- **FileHandler** — drag-and-drop of images (as base64) and of HTML/Markdown files (open as a new document).
- **Placeholder** — placeholder text in the empty editor.
- **Emoji** — emoji nodes with `:shortcode:` autocomplete.
- **TableOfContents** — table of contents from the headings.
- **prosemirror-search** — find and replace.
- **BubbleMenu** — the selection bubble.
- **DragHandle** — the block drag handle.

## Markdown import and export

Markdown is processed through an **HTML round-trip** using the project's established libraries:

- **Import (Markdown → HTML):** [markdown-it](https://github.com/markdown-it/markdown-it) with `linkify` and HTML pass-through on, plus plugins for task lists, subscript (`~x~`), superscript (`^x^`), and highlight (`==x==`). YAML front matter at the top of the document is converted into a `yaml` code block instead of being mangled. LaTeX math (`$…$` / `$$…$$`) is detected and inserted as formula nodes; `$` signs inside code blocks are protected.
- **Export (HTML → Markdown):** [Turndown](https://github.com/mixmark-io/turndown) with the GitHub Flavored Markdown extension (tables, task lists, strikethrough). ATX-style headings (`#`), `-` bullets, fenced code blocks. Custom rules keep headings and links single-line and translate sub/superscript back to `~x~` / `^x^` and formulas to `$…$` / `$$…$$`.

### Limits of the Markdown round-trip

- **SVG images as `data:` URLs do not survive the Markdown round-trip** (deliberately, for security, because a link to an SVG could run its scripts). They work through the HTML round-trip. Raster images (PNG, JPEG, GIF, WebP …) as base64 are preserved.
- **Highlight (`==x==`)** is recognized on **import**; there is no rule for it on Markdown export — a highlight therefore becomes plain text when exporting to Markdown. (It is preserved in HTML and JSON export.)
- Markdown has no native syntax for sub/superscript — hence the `~x~`/`^x^` conventions, which not every Markdown renderer understands.

## Syntax highlighting

Code blocks are color-highlighted — via **`lowlight`**, which wraps the **highlight.js** engine. In the live editor, TipTap draws the colors with ProseMirror decorations (view-only). Because those decorations do **not** appear in the serialized HTML, the tool re-highlights the code blocks **statically** with highlight.js for preview, print, and export. The registered language set covers the 17 languages listed above; you pick a block's language via the **Code language** menu.

## Status bar and auto-save

Below the surface, a status bar shows the document stats in the format **"HTML: N bytes | N words | N blocks | ~N min read"** (HTML byte size, word count, block count, estimated reading time at ~200 words/minute).

The content is **saved automatically in local browser storage** (debounced after edits). On the next visit the editor restores it. There is **one** storage slot (a single document); **Clear editor content** wipes it. The storage badge at the top right shows the status.

## Architecture and privacy

The editor runs **almost entirely client-side**:

- **In the browser:** all editing, the Markdown, JSON, and HTML export, the PDF export, preview and print, and auto-save. Your content is held **only in local browser storage** and never uploaded to a server.
- **Server-side — only the URL fetch:** the **Insert HTML from URL** and **Load from URL** (in the Markdown import) features fetch the remote page through a **server-side JPKCom proxy**, because the browser cannot load remote pages directly due to CORS. The target page thus sees a request from the JPKCom server (with its user agent), **not your IP address**.

The two server-side endpoints (a fetch proxy and a token-based authentication endpoint) are **not a public API** you can call yourself — they are used exclusively by the tool's JavaScript and hardened against abuse:

- **Token authentication:** before each fetch the tool obtains a fresh, daily-rotating two-factor token (SHA-256); the token endpoint validates the referer and a daily API secret.
- **SSRF protection:** private, local, and internal IP addresses are blocked; only HTTP/HTTPS.
- **Limits:** maximum response size **950 KB**, timeout **10 s**, maximum execution time **20 s**.

There is an optional **Expert Mode** with a local proxy (`http://127.0.0.1:<port>`): instead of going through the JPKCom server, a self-hosted local proxy fetches the page. Setup is advanced and not needed for normal use.

## Operating limits — in brief

- **One document, one storage slot.** No multiple documents, no collaboration. Clearing browser data means losing the content — export it as a file first.
- **base64 images bloat the document.** Uploaded images land as base64 directly in the HTML and in local storage; many or large images can make the document big and exceed the storage quota. Resize images first (see [tips](https://www.jpkc.com/db/en/tools/wysiwyg/tips/)).
- **JSON only from this editor.** JSON import is meant only for JSON this editor exported; foreign JSON is rejected.
- **URL fetch:** public http(s) addresses only, max 950 KB, no localhost/intranet.
- **Emojis:** only those with a native Unicode glyph (up to Unicode 15); newer or image-only emojis are removed for rendering and privacy reasons.

For the introduction and target audiences see the [overview](https://www.jpkc.com/db/en/tools/wysiwyg/), for workflows the [examples](https://www.jpkc.com/db/en/tools/wysiwyg/examples/), and for tricks the [tips & tricks](https://www.jpkc.com/db/en/tools/wysiwyg/tips/). You can try everything directly in the [tool](https://www.jpkc.com/tools/wysiwyg/).