@hiai-gg/hiai-docs 0.0.1

package/frontend/src/lib/components/editor/MarkdownToggle.svelte

@@ -0,0 +1,88 @@
+<!-- MarkdownToggle.svelte — Raw Markdown editing view -->
+<script lang="ts">
+import * as m from "$lib/paraglide/messages.js";
+import type { EditorOutput } from "./HiAiEditor.svelte";
+import { markdownToJson } from "./markdown";
+
+const {
+	content = "",
+	onUpdate = (_output: EditorOutput) => {},
+}: {
+	content?: string;
+	onUpdate?: (output: EditorOutput) => void;
+} = $props();
+
+let textarea = $state<HTMLTextAreaElement | null>(null);
+
+// Persist + parse the new markdown into a ProseMirror doc so the
+// `contentJson` field stays in sync. Without this the wysiwyg editor
+// would show stale content the next time the user switches modes.
+// Parsing happens synchronously on every keystroke — the underlying
+// `marked` tokenizer is fast and `generateJSON` is cheap for the
+// document sizes we expect in the editor.
+function emitUpdate(markdown: string) {
+	const json = markdownToJson(markdown);
+	onUpdate({ markdown, json });
+}
+
+function handleInput(e: Event) {
+	const target = e.target as HTMLTextAreaElement;
+	emitUpdate(target.value);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Tab") {
+		e.preventDefault();
+		const target = e.target as HTMLTextAreaElement;
+		const start = target.selectionStart;
+		const end = target.selectionEnd;
+		target.value = `${target.value.substring(0, start)}\t${target.value.substring(end)}`;
+		target.selectionStart = target.selectionEnd = start + 1;
+		emitUpdate(target.value);
+	}
+}
+</script>
+
+<div class="markdown-toggle">
+	<textarea
+		bind:this={textarea}
+		value={content}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+		class="markdown-textarea"
+		spellcheck="false"
+		placeholder={m.editor_markdown_placeholder()}
+		aria-label={m.editor_markdown_label()}
+	></textarea>
+</div>
+
+<style>
+	.markdown-toggle {
+		flex: 1;
+		display: flex;
+	}
+
+	.markdown-textarea {
+		flex: 1;
+		width: 100%;
+		min-height: 400px;
+		padding: 24px;
+		border: none;
+		outline: none;
+		resize: none;
+		font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
+		font-size: 14px;
+		line-height: 1.7;
+		color: var(--foreground);
+		background: var(--muted);
+		tab-size: 4;
+	}
+
+	.markdown-textarea::placeholder {
+		color: var(--muted-foreground);
+	}
+
+	.markdown-textarea:focus {
+		background: var(--background);
+	}
+</style>

package/frontend/src/lib/components/editor/editorExtensions.ts

@@ -0,0 +1,53 @@
+// editorExtensions.ts — Shared TipTap extension list.
+//
+// Both the live HiAiEditor and the markdown→JSON helper (used by
+// MarkdownToggle) need the same set of node/mark extensions so the parsed
+// ProseMirror JSON round-trips cleanly with the editor's schema. Keeping the
+// list here avoids drift between the two consumers.
+//
+// The collaboration extensions are deliberately excluded — the parser runs
+// in the browser on user-typed markdown and has no Yjs document to attach
+// to. The HiAiEditor pushes those on top at runtime when a `collaboration`
+// prop is supplied.
+
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { TableKit } from "@tiptap/extension-table";
+import TextAlign from "@tiptap/extension-text-align";
+import { Markdown } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+import { common, createLowlight } from "lowlight";
+
+const lowlight = createLowlight(common);
+
+export const editorExtensions = [
+	StarterKit.configure({
+		heading: { levels: [1, 2, 3] },
+		codeBlock: false,
+		link: false,
+	}),
+	Markdown.configure({}),
+	Link.configure({
+		openOnClick: false,
+		HTMLAttributes: { class: "doc-link" },
+	}),
+	Image.configure({
+		inline: false,
+		allowBase64: false,
+		HTMLAttributes: { class: "doc-image" },
+	}),
+	Highlight.configure({ multicolor: true }),
+	CodeBlockLowlight.configure({ lowlight }),
+	TextAlign.configure({ types: ["heading", "paragraph"] }),
+	// Tables: TableKit bundles Table + TableRow + TableHeader + TableCell.
+	// `resizable` lets users drag column widths; the toolbar inserts tables
+	// with a header row via `insertTable`.
+	TableKit.configure({ table: { resizable: true } }),
+	// Task lists: a checkbox list. `nested` allows task items to contain
+	// nested task lists.
+	TaskList,
+	TaskItem.configure({ nested: true }),
+];

package/frontend/src/lib/components/editor/markdown.ts

@@ -0,0 +1,38 @@
+// markdown.ts — Browser-side markdown ↔ TipTap JSON helpers.
+//
+// MarkdownToggle edits raw markdown. The server stores both the markdown
+// and the equivalent ProseMirror JSON (`contentJson`); the JSON is what the
+// wysiwyg editor uses when the user switches back. We can't just save the
+// markdown string — the JSON field has to be kept in sync, otherwise the
+// next visit to the wysiwyg mode would show stale content until the user
+// touches the editor.
+//
+// `@tiptap/markdown` ships a `MarkdownManager` that knows how to parse
+// markdown against the same set of TipTap extensions used by the editor.
+// We instantiate one with the shared `editorExtensions` list and call
+// `.parse()` for every keystroke. The instance is lazily created on first
+// use to keep the module side-effect-free in SSR contexts (MarkdownToggle
+// is only mounted in the browser, but Vite's build still evaluates this
+// file's imports).
+
+import type { JSONContent } from "@tiptap/core";
+import { MarkdownManager } from "@tiptap/markdown";
+import { editorExtensions } from "./editorExtensions";
+
+let managerSingleton: MarkdownManager | null = null;
+
+function getManager(): MarkdownManager {
+	if (managerSingleton) return managerSingleton;
+	managerSingleton = new MarkdownManager({ extensions: editorExtensions });
+	return managerSingleton;
+}
+
+/**
+ * Parse a markdown string into a ProseMirror document matching the
+ * HiAiEditor schema. Returns `{ type: "doc", content: [...] }`.
+ *
+ * Browser-only: relies on `window.DOMParser` inside `generateJSON`.
+ */
+export function markdownToJson(markdown: string): JSONContent {
+	return getManager().parse(markdown);
+}