Add Tiptap inline-preview editor, layout improvements, and README

Replace plain textarea with Tiptap (ProseMirror) WYSIWYG editor for notes and tasks. Headings, bold, lists, and code blocks now render inline while editing. Tags and wikilinks get visual highlighting via decoration plugins, and autocomplete uses @tiptap/suggestion with heading disambiguation. Layout: pin navbar with app-shell flex column (100dvh), sticky editor toolbar above scrolling content, AI Assist panel fixed at bottom 1/3 with full-height section selector and prompt. Increase max-width to 960px across all views. Hide assist controls during streaming/review. Other fixes: markdown paste handling, auto-syncing assist sections via body watcher, trailing newline on AI accept, ChatView height fix. Add README.md describing the app, usage guide, and technical overview. Update summary.md with Phase 5.2 roadmap and current status. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-11 21:24:35 -05:00
parent cbfdf5289e
commit 586026bff6
29 changed files with 2088 additions and 438 deletions
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { watch, onBeforeUnmount } from "vue";
+import { Editor, EditorContent } from "@tiptap/vue-3";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import { marked } from "marked";
+import DOMPurify from "dompurify";
+import { serializeToMarkdown } from "@/utils/markdownSerializer";
+import { TagDecoration } from "@/extensions/TagDecoration";
+import { WikilinkDecoration } from "@/extensions/WikilinkDecoration";
+import { TagSuggestion } from "@/extensions/TagSuggestion";
+import { WikilinkSuggestion } from "@/extensions/WikilinkSuggestion";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    placeholder?: string;
+    fetchTags?: (query: string) => Promise<string[]>;
+  }>(),
+  {
+    placeholder: "",
+    fetchTags: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  selectionChange: [payload: { text: string; start: number; end: number }];
+}>();
+
+let updatingFromProp = false;
+let lastEmittedMarkdown = props.modelValue;
+
+function markdownToHtml(md: string): string {
+  const html = marked(md) as string;
+  return DOMPurify.sanitize(html);
+}
+
+let editor: Editor | null = null;
+
+try {
+  editor = new Editor({
+    content: markdownToHtml(props.modelValue),
+    editable: true,
+    editorProps: {
+      handlePaste: (_view, event) => {
+        const text = event.clipboardData?.getData("text/plain");
+        if (!text || !editor) return false;
+        // If clipboard already has HTML (e.g. copying from a webpage), let Tiptap handle it
+        const html = event.clipboardData?.getData("text/html");
+        if (html) return false;
+        // Check if the pasted text looks like it contains markdown formatting
+        const hasMd = /(?:^#{1,6}\s|^\s*[-*+]\s|^\s*\d+\.\s|^\s*>|```|\*\*|__|~~|\[.+\]\(.+\))/m.test(text);
+        if (!hasMd) return false;
+        // Convert markdown to HTML and insert as formatted content
+        const converted = markdownToHtml(text);
+        editor.chain().focus().deleteSelection().insertContent(converted).run();
+        return true;
+      },
+    },
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
+      }),
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+      }),
+      Placeholder.configure({
+        placeholder: props.placeholder,
+      }),
+      TagDecoration,
+      WikilinkDecoration,
+      TagSuggestion.configure({
+        fetchTags: props.fetchTags ?? (async () => []),
+      }),
+      WikilinkSuggestion,
+    ],
+    onUpdate({ editor: ed }) {
+      if (updatingFromProp) return;
+      const md = serializeToMarkdown(ed.getJSON());
+      lastEmittedMarkdown = md;
+      emit("update:modelValue", md);
+    },
+    onSelectionUpdate({ editor: ed }) {
+      const { from, to } = ed.state.selection;
+      if (from === to) return;
+      const selectedText = ed.state.doc.textBetween(from, to, "\n");
+      if (!selectedText) return;
+
+      const md = lastEmittedMarkdown;
+      const idx = md.indexOf(selectedText);
+      if (idx !== -1) {
+        emit("selectionChange", {
+          text: selectedText,
+          start: idx,
+          end: idx + selectedText.length,
+        });
+      }
+    },
+  });
+} catch (e) {
+  console.error("Tiptap editor creation failed:", e);
+}
+
+onBeforeUnmount(() => {
+  editor?.destroy();
+});
+
+// Watch for external modelValue changes (e.g. AI assist accept)
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (!editor) return;
+    if (newVal === lastEmittedMarkdown) return;
+
+    updatingFromProp = true;
+    editor.commands.setContent(markdownToHtml(newVal));
+    lastEmittedMarkdown = newVal;
+    updatingFromProp = false;
+  }
+);
+
+defineExpose({ editor });
+</script>
+
+<template>
+  <div class="tiptap-wrapper tiptap-editor">
+    <EditorContent v-if="editor" :editor="editor" class="prose" />
+    <div v-else class="editor-error">Editor failed to load. Check console.</div>
+  </div>
+</template>
+
+<style scoped>
+.editor-error {
+  padding: 1rem;
+  color: var(--color-danger);
+  font-size: 0.9rem;
+}
+</style>