Replace manual HTML editor with WYSIWYG and add bidirectional Markdown conversion #17

Merged

Copilot merged 3 commits from copilot/remove-rich-text-editor into main

2025-11-19 15:33:29 -06:00

Copilot commented

2025-11-19 15:17:19 -06:00

(Migrated from github.com)

The "Rich Text" mode required users to manually type HTML tags (<strong>, <em>, etc.) in a textarea. This PR replaces it with a true WYSIWYG editor and implements automatic content conversion when switching between Markdown and WYSIWYG modes.

Changes

Editor Implementation

Added Quill-based WYSIWYG editor with visual formatting toolbar
Implemented bidirectional conversion using showdown (MD→HTML) and turndown (HTML→MD)
Content automatically converts when switching modes, preserving formatting
Removed manual HTML toolbar component (no longer needed)

Content Type Migration

Changed content type from 'html' to 'wysiwyg'
Added backward compatibility: existing 'html' content auto-converts to 'wysiwyg' on load
Updated PageView and PendingEditDetail to render wysiwyg content

Styling

Added theme-aware Quill CSS that respects light/dark mode
Toolbar and editor container match existing design system variables

Code Example

const handleContentTypeChange = (newType) => {
  if (newType === 'wysiwyg' && contentType === 'markdown') {
    const htmlContent = markdownToHtml(content);
    setContent(htmlContent);
  } else if (newType === 'markdown' && contentType === 'wysiwyg') {
    const markdownContent = htmlToMarkdown(content);
    setContent(markdownContent);
  }
  setContentType(newType);
};

Screenshot

The WYSIWYG mode now provides rich text editing with toolbar buttons for bold, italic, headings, lists, links, code blocks, and blockquotes. No database migration required—content_type column already supports arbitrary string values.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

backend

Triggering command: node /home/REDACTED/work/noodlenook/noodlenook/frontend/node_modules/.bin/vite (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled

Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Remove Rich Text. The editors available should be markdown and WYSIWYG. When composing in Markdown, if you switch to WYSIWYG, it should convert and vice versa

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

The "Rich Text" mode required users to manually type HTML tags (`<strong>`, `<em>`, etc.) in a textarea. This PR replaces it with a true WYSIWYG editor and implements automatic content conversion when switching between Markdown and WYSIWYG modes. ## Changes ### Editor Implementation - Added Quill-based WYSIWYG editor with visual formatting toolbar - Implemented bidirectional conversion using `showdown` (MD→HTML) and `turndown` (HTML→MD) - Content automatically converts when switching modes, preserving formatting - Removed manual HTML toolbar component (no longer needed) ### Content Type Migration - Changed content type from `'html'` to `'wysiwyg'` - Added backward compatibility: existing `'html'` content auto-converts to `'wysiwyg'` on load - Updated PageView and PendingEditDetail to render wysiwyg content ### Styling - Added theme-aware Quill CSS that respects light/dark mode - Toolbar and editor container match existing design system variables ## Code Example ```jsx const handleContentTypeChange = (newType) => { if (newType === 'wysiwyg' && contentType === 'markdown') { const htmlContent = markdownToHtml(content); setContent(htmlContent); } else if (newType === 'markdown' && contentType === 'wysiwyg') { const markdownContent = htmlToMarkdown(content); setContent(markdownContent); } setContentType(newType); }; ``` ## Screenshot ![WYSIWYG Editor](https://github.com/user-attachments/assets/692b0247-f5dd-402d-a6e5-5ec7048a35c2) The WYSIWYG mode now provides rich text editing with toolbar buttons for bold, italic, headings, lists, links, code blocks, and blockquotes. No database migration required—content_type column already supports arbitrary string values. > [!WARNING] > > <details> > <summary>Firewall rules blocked me from connecting to one or more addresses (expand for details)</summary> > > #### I tried to connect to the following addresses, but was blocked by firewall rules: > > - `backend` > - Triggering command: `node /home/REDACTED/work/noodlenook/noodlenook/frontend/node_modules/.bin/vite` (dns block) > > If you need me to access, download, or install something from one of these locations, you can either: > > - Configure [Actions setup steps](https://gh.io/copilot/actions-setup-steps) to set up my environment, which run before the firewall is enabled > - Add the appropriate URLs or hosts to the custom allowlist in this repository's [Copilot coding agent settings](https://github.com/SluberskiHomeLab/noodlenook/settings/copilot/coding_agent) (admins only) > > </details>  <details> <summary>Original prompt</summary> > Remove Rich Text. The editors available should be markdown and WYSIWYG. When composing in Markdown, if you switch to WYSIWYG, it should convert and vice versa </details>  --- ✨ Let Copilot coding agent [set things up for you](https://github.com/SluberskiHomeLab/noodlenook/issues/new?title=✨+Set+up+Copilot+instructions&body=Configure%20instructions%20for%20this%20repository%20as%20documented%20in%20%5BBest%20practices%20for%20Copilot%20coding%20agent%20in%20your%20repository%5D%28https://gh.io/copilot-coding-agent-tips%29%2E%0A%0A%3COnboard%20this%20repo%3E&assignees=copilot) — coding agent works faster and does higher quality work when set up for your repo.

SluberskiHomeLab (Migrated from github.com) reviewed

2025-11-19 15:17:19 -06:00