JPKCom DB

WYSIWYG Editor — Manual

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

Back to the overview: WYSIWYG Editor · Open the tool live: 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 — 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).
  • 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.

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).

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 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 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).
  • 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, for workflows the examples, and for tricks the tips & tricks. You can try everything directly in the tool.