@djangocfg/ui-tools 2.1.417 → 2.1.419

package/src/tools/forms/MarkdownEditor/styles.css

@@ -2,49 +2,88 @@
   outline: none;
 }
 
-/* Inherit semantic foreground so the editor renders correctly in both
-   light + dark themes (and under any active preset). Without this the
-   browser falls back to UA black on a token-driven background. */
+/* ─────────────────────────────────────────────────────────────────────
+ * Typography — Notion-inspired: comfy line-height, generous heading
+ * scale, restrained spacing. Calibrated so the chat composer (compact,
+ * single-paragraph) and the document-preview editor (long-form, with
+ * many headings) both feel right without a variant prop.
+ *
+ * Inherit semantic foreground so the editor renders correctly in both
+ * light + dark themes (and under any active preset).
+ * ───────────────────────────────────────────────────────────────────── */
 .markdown-editor .tiptap,
 .markdown-editor .ProseMirror {
   color: var(--color-foreground, var(--foreground));
+  font-family:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 .markdown-editor .tiptap a,
 .markdown-editor .ProseMirror a {
   color: var(--color-primary, var(--primary));
   text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
 }
 
+.markdown-editor .tiptap a:hover,
+.markdown-editor .ProseMirror a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Headings — Notion scale. Top-padding > bottom so a heading sits
+ * visually grouped with the paragraph below it. */
 .markdown-editor .tiptap h1 {
-  font-size: 1.5em;
+  font-size: 1.875em;
   font-weight: 700;
-  margin: 0.5em 0 0.25em;
-  line-height: 1.3;
+  line-height: 1.25;
+  margin: 1em 0 0.25em;
+  letter-spacing: -0.015em;
 }
 
 .markdown-editor .tiptap h2 {
-  font-size: 1.25em;
+  font-size: 1.5em;
   font-weight: 600;
-  margin: 0.5em 0 0.25em;
   line-height: 1.3;
+  margin: 0.9em 0 0.25em;
+  letter-spacing: -0.01em;
 }
 
 .markdown-editor .tiptap h3 {
+  font-size: 1.25em;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0.8em 0 0.2em;
+}
+
+.markdown-editor .tiptap h4 {
   font-size: 1.1em;
   font-weight: 600;
-  margin: 0.4em 0 0.2em;
-  line-height: 1.3;
+  line-height: 1.4;
+  margin: 0.7em 0 0.2em;
+}
+
+/* First heading at the very top of the document has no leading air —
+ * Notion convention. */
+.markdown-editor .tiptap > :is(h1, h2, h3, h4):first-child {
+  margin-top: 0;
 }
 
 .markdown-editor .tiptap p {
   margin: 0.25em 0;
 }
 
+/* Lists — Notion uses tighter row spacing than browser default. */
 .markdown-editor .tiptap ul,
 .markdown-editor .tiptap ol {
   padding-left: 1.5em;
-  margin: 0.25em 0;
+  margin: 0.35em 0;
 }
 
 .markdown-editor .tiptap ul {
@@ -56,29 +95,138 @@
 }
 
 .markdown-editor .tiptap li {
-  margin: 0.1em 0;
+  margin: 0.15em 0;
+}
+
+.markdown-editor .tiptap li > p {
+  margin: 0;
+}
+
+/* Nested lists get a subtler marker. */
+.markdown-editor .tiptap ul ul {
+  list-style: circle;
+}
+.markdown-editor .tiptap ul ul ul {
+  list-style: square;
+}
+
+/* Task list (GFM `- [ ] item`). StarterKit ships TaskList extension. */
+.markdown-editor .tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0.25em;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5em;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li > label {
+  flex-shrink: 0;
+  margin-top: 0.3em;
+  user-select: none;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li > div {
+  flex: 1;
+  min-width: 0;
+}
+
+.markdown-editor .tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
+  opacity: 0.55;
+  text-decoration: line-through;
 }
 
+/* Blockquote — Notion uses a chunky left bar without italic. */
 .markdown-editor .tiptap blockquote {
   border-left: 3px solid var(--color-border, var(--border));
-  padding-left: 1em;
-  margin: 0.5em 0;
-  opacity: 0.8;
+  padding: 0.2em 0 0.2em 1em;
+  margin: 0.6em 0;
+  color: color-mix(in oklab, var(--color-foreground, var(--foreground)) 80%, transparent);
+}
+
+.markdown-editor .tiptap blockquote > :first-child {
+  margin-top: 0;
+}
+.markdown-editor .tiptap blockquote > :last-child {
+  margin-bottom: 0;
 }
 
+/* Divider — full-width thin rule with breathing room. */
 .markdown-editor .tiptap hr {
   border: none;
   border-top: 1px solid var(--color-border, var(--border));
-  margin: 0.75em 0;
+  margin: 1.5em 0;
 }
 
+/* Inline code — monospace pill, restrained tint. */
 .markdown-editor .tiptap code {
+  background: color-mix(in oklab, var(--color-muted, var(--muted)) 70%, transparent);
+  color: var(--color-foreground, var(--foreground));
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+  font-size: 0.875em;
+  font-family:
+    "SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas,
+    monospace;
+  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 60%, transparent);
+}
+
+/* Code block — darker surface so it stands apart from inline code. */
+.markdown-editor .tiptap pre {
   background: var(--color-muted, var(--muted));
-  color: var(--color-muted-foreground, var(--muted-foreground));
-  padding: 0.15em 0.3em;
-  border-radius: 0.25em;
-  font-size: 0.9em;
-  font-family: monospace;
+  color: var(--color-foreground, var(--foreground));
+  padding: 0.9em 1em;
+  border-radius: 6px;
+  margin: 0.75em 0;
+  font-family:
+    "SF Mono", ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas,
+    monospace;
+  font-size: 0.875em;
+  line-height: 1.55;
+  overflow-x: auto;
+  border: 1px solid color-mix(in oklab, var(--color-border, var(--border)) 50%, transparent);
+}
+
+.markdown-editor .tiptap pre code {
+  background: transparent;
+  border: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Tables — borderless, subtle row separators (Notion-flavour). */
+.markdown-editor .tiptap table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+  font-size: 0.95em;
+  table-layout: fixed;
+}
+
+.markdown-editor .tiptap th,
+.markdown-editor .tiptap td {
+  border: 1px solid var(--color-border, var(--border));
+  padding: 0.45em 0.75em;
+  vertical-align: top;
+  text-align: left;
+  min-width: 4ch;
+}
+
+.markdown-editor .tiptap th {
+  background: color-mix(in oklab, var(--color-muted, var(--muted)) 60%, transparent);
+  font-weight: 600;
+}
+
+/* Images — rounded, never overflow. */
+.markdown-editor .tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin: 0.5em 0;
 }
 
 .markdown-editor .tiptap strong {
@@ -93,6 +241,11 @@
   text-decoration: line-through;
 }
 
+/* Selection highlight — semantic ring colour, not browser-blue. */
+.markdown-editor .tiptap ::selection {
+  background: color-mix(in oklab, var(--color-primary, var(--primary)) 25%, transparent);
+}
+
 .markdown-editor .tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;

package/src/tools/forms/NotionEditor/CustomKeymap.ts

@@ -0,0 +1,48 @@
+import { Extension } from '@tiptap/core';
+import { TextSelection } from '@tiptap/pm/state';
+
+/**
+ * Notion-style smart Cmd/Ctrl+A:
+ *   1st press → select the current text block
+ *   2nd press → select the whole document
+ *
+ * Default editor behaviour selects everything on first press, which is
+ * jarring in long documents where the user almost always wants "select
+ * paragraph" first. Ported from Novel (`extensions/custom-keymap.ts`).
+ */
+export const CustomKeymap = Extension.create({
+  name: 'notion-custom-keymap',
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-a': ({ editor }) => {
+        const { selection, doc } = editor.state;
+        const { $from, $to, from, to } = selection;
+
+        // Resolve the boundaries of the current text block. `start`/`end`
+        // on $from/$to give the inclusive content range of the parent
+        // textblock (a paragraph, heading, code block, list item body).
+        const blockStart = $from.start();
+        const blockEnd = $to.end();
+
+        const isWholeBlockSelected = from === blockStart && to === blockEnd;
+        // If the block is already fully selected → escalate to whole doc.
+        if (isWholeBlockSelected) {
+          editor
+            .chain()
+            .setTextSelection({ from: 0, to: doc.content.size })
+            .run();
+          return true;
+        }
+
+        editor
+          .chain()
+          .setTextSelection(
+            TextSelection.create(editor.state.doc, blockStart, blockEnd),
+          )
+          .run();
+        return true;
+      },
+    };
+  },
+});

package/src/tools/forms/NotionEditor/LinkDialog.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+/**
+ * Cmd/Ctrl+K link prompt. Modeless dialog with a single URL input and
+ * Save/Remove/Cancel actions. Mounted as a side-channel above the editor
+ * so it survives selection collapse — without this, focusing the input
+ * would unset the selection and TipTap couldn't apply the mark.
+ *
+ * We snapshot `from`/`to` of the selection on open and re-apply it
+ * before running the link command. ProseMirror tolerates this because
+ * the dialog is rendered in a portal (Radix's `DialogPortal`) and the
+ * editor's view does not lose its `state` — only its DOM focus.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+} from '@djangocfg/ui-core';
+import type { Editor } from '@tiptap/react';
+
+/** Reject `javascript:`, `data:`, `vbscript:` schemes. Plain anchors,
+ *  http(s), mailto, tel, and relative paths pass. Same allow-list TipTap
+ *  uses internally when `validate` is omitted, made explicit here. */
+function isSafeHref(value: string): boolean {
+  const trimmed = value.trim();
+  const colon = trimmed.indexOf(':');
+  if (colon === -1) return true; // relative or hash link
+  const scheme = trimmed.slice(0, colon).toLowerCase();
+  return ['http', 'https', 'mailto', 'tel', 'sms', 'ftp'].includes(scheme);
+}
+
+interface LinkDialogProps {
+  editor: Editor;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function LinkDialog({ editor, open, onOpenChange }: LinkDialogProps) {
+  const [href, setHref] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // Remember the selection range when the dialog opened — focusing the
+  // input collapses selection in the editor; we re-apply the snapshot
+  // before running the link command.
+  const rangeRef = useRef<{ from: number; to: number } | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const { from, to } = editor.state.selection;
+    rangeRef.current = { from, to };
+    const existing = editor.getAttributes('link').href as string | undefined;
+    setHref(existing ?? '');
+    // Focus is handled by Radix's `onOpenAutoFocus` below — that fires
+    // after the dialog DOM is in the document and avoids racing the
+    // built-in focus trap.
+  }, [open, editor]);
+
+  const applyLink = (value: string) => {
+    const range = rangeRef.current;
+    if (range) {
+      editor.chain().focus().setTextSelection(range).run();
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+      editor.chain().focus().unsetLink().run();
+    } else if (isSafeHref(trimmed)) {
+      editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run();
+    }
+    onOpenChange(false);
+  };
+
+  const removeLink = () => {
+    const range = rangeRef.current;
+    if (range) {
+      editor.chain().focus().setTextSelection(range).run();
+    }
+    editor.chain().focus().unsetLink().run();
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        className="sm:max-w-md"
+        // Override Radix's default auto-focus (first focusable). We want
+        // the URL input focused + selected — combining `preventDefault`
+        // here with a direct `focus()` call sequences cleanly with the
+        // dialog mount; the earlier queueMicrotask version raced Radix.
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+          inputRef.current?.select();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Link</DialogTitle>
+        </DialogHeader>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            applyLink(href);
+          }}
+        >
+          <Input
+            ref={inputRef}
+            type="url"
+            placeholder="https://example.com"
+            value={href}
+            onChange={(e) => setHref(e.target.value)}
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <DialogFooter className="mt-4 gap-2 sm:gap-2">
+            {editor.isActive('link') ? (
+              <Button type="button" variant="outline" onClick={removeLink}>
+                Remove
+              </Button>
+            ) : null}
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit">Save</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}