From 38e057820b3e0d60748af1dd7ec3fe51a2328f9f Mon Sep 17 00:00:00 2001 From: Jason Woltje Date: Mon, 23 Feb 2026 19:35:26 -0600 Subject: [PATCH] feat(web): add markdown round-trip and replace textarea with Tiptap editor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add tiptap-markdown extension for markdown ↔ rich text conversion. Update KnowledgeEditor to accept/emit markdown content. Replace EntryEditor textarea with KnowledgeEditor (Tiptap WYSIWYG). Update tests for the new editor component. Content flow: markdown (stored) → Tiptap (editing) → markdown (saved). The backend markdown → HTML rendering pipeline remains unchanged. Implements TW-EDT-002. Co-Authored-By: Claude Opus 4.6 --- apps/web/package.json | 3 +- .../src/components/knowledge/EntryEditor.tsx | 64 ++----- .../components/knowledge/KnowledgeEditor.tsx | 21 ++- .../knowledge/__tests__/EntryEditor.test.tsx | 165 ++++++------------ docs/TASKS.md | 22 +-- pnpm-lock.yaml | 39 +++++ 6 files changed, 132 insertions(+), 182 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 458202a..f4df651 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -46,7 +46,8 @@ "react-dom": "^19.0.0", "react-grid-layout": "^2.2.2", "recharts": "^3.7.0", - "socket.io-client": "^4.8.3" + "socket.io-client": "^4.8.3", + "tiptap-markdown": "^0.9.0" }, "devDependencies": { "@mosaic/config": "workspace:*", diff --git a/apps/web/src/components/knowledge/EntryEditor.tsx b/apps/web/src/components/knowledge/EntryEditor.tsx index e7aaf64..de352a8 100644 --- a/apps/web/src/components/knowledge/EntryEditor.tsx +++ b/apps/web/src/components/knowledge/EntryEditor.tsx @@ -1,7 +1,7 @@ "use client"; -import React, { useState, useRef } from "react"; -import { LinkAutocomplete } from "./LinkAutocomplete"; +import React from "react"; +import { KnowledgeEditor } from "./KnowledgeEditor"; interface EntryEditorProps { content: string; @@ -9,57 +9,21 @@ interface EntryEditorProps { } /** - * EntryEditor - Markdown editor with live preview and link autocomplete + * EntryEditor - WYSIWYG editor for knowledge entries. + * Wraps KnowledgeEditor (Tiptap) with markdown round-trip. + * Content is stored as markdown; the editor provides rich text editing. */ export function EntryEditor({ content, onChange }: EntryEditorProps): React.JSX.Element { - const [showPreview, setShowPreview] = useState(false); - const textareaRef = useRef(null); - return ( -
-
- - -
- - {showPreview ? ( -
-
{content}
-
- ) : ( -
-