Skip to content

Feat/tiptap email editor #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
simpros wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feat/tiptap email editor #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3593b5b
feat: add TipTap email editor primitives
simpros Apr 6, 2026
46a5dc8
feat: add TipTap email editor UI
simpros Apr 6, 2026
8209f38
feat: switch initiative emails to the TipTap editor
simpros Apr 6, 2026
bdc18b7
chore: add Jean app port metadata
simpros Apr 6, 2026
466495b
fix: remove non-reactive maps from editor menus
simpros Apr 6, 2026
8f624bd
fix: avoid query waterfalls in lead forms
simpros Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,5 +52,14 @@
"valibot": "^1.2.0",
"vite": "^8.0.0"
},
"dependencies": {}
"dependencies": {
"@tiptap/core": "^3.22.2",
"@tiptap/extension-link": "^3.22.2",
"@tiptap/extension-placeholder": "^3.22.2",
"@tiptap/extension-text-align": "^3.22.2",
"@tiptap/extension-underline": "^3.22.2",
"@tiptap/pm": "^3.22.2",
"@tiptap/starter-kit": "^3.22.2",
"@tiptap/suggestion": "^3.22.2"
}
}
165 changes: 165 additions & 0 deletions apps/web/src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,3 +168,168 @@ body {
@apply transition-all duration-100 ease-out;
}
}

/* ───────────────────────────────────────────────────
TipTap Email Editor
─────────────────────────────────────────────────── */

.tiptap-editor .tiptap {
min-height: 24rem;
padding: 1.5rem;
outline: none;
font-family: var(--font-sans);
font-size: 0.9375rem;
line-height: 1.7;
color: var(--color-foreground);
}

.tiptap-editor .tiptap:focus-visible {
outline: none;
}

/* Paragraphs */
.tiptap-editor .tiptap p {
margin-top: 0;
margin-bottom: 0.75em;
}

.tiptap-editor .tiptap > :first-child {
margin-top: 0;
}

/* Headings — match the app's uppercase bold style */
.tiptap-editor .tiptap h1,
.tiptap-editor .tiptap h2,
.tiptap-editor .tiptap h3 {
font-family: var(--font-sans);
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.02em;
margin-bottom: 0.5em;
margin-top: 1em;
color: var(--color-foreground);
}

.tiptap-editor .tiptap h1 {
font-size: 1.75rem;
line-height: 1.2;
}

.tiptap-editor .tiptap h2 {
font-size: 1.375rem;
line-height: 1.25;
}

.tiptap-editor .tiptap h3 {
font-size: 1.125rem;
line-height: 1.3;
}

/* Lists */
.tiptap-editor .tiptap ul {
list-style-type: disc;
padding-left: 1.5em;
margin-bottom: 0.75em;
}

.tiptap-editor .tiptap ol {
list-style-type: decimal;
padding-left: 1.5em;
margin-bottom: 0.75em;
}

.tiptap-editor .tiptap li {
margin-bottom: 0.25em;
}

/* Links */
.tiptap-editor .tiptap a {
color: var(--color-primary-600);
text-decoration: underline;
text-underline-offset: 2px;
}

/* Horizontal rule */
.tiptap-editor .tiptap hr {
border: none;
border-top: 2px solid var(--color-border);
margin: 1.5em 0;
}

/* Blockquote */
.tiptap-editor .tiptap blockquote {
border-left: 3px solid var(--color-secondary-400);
padding-left: 1em;
margin-left: 0;
margin-bottom: 0.75em;
color: var(--color-neutral-600);
font-style: italic;
}

/* Template variable pills */
.tiptap-template-variable {
display: inline;
background-color: var(--color-secondary-100);
color: var(--color-secondary-800);
border: 1px solid var(--color-secondary-300);
padding: 1px 6px;
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
user-select: none;
}

.tiptap-template-variable[data-preview-state="resolved"] {
background-color: #fef08a;
color: var(--color-neutral-900);
border-color: #facc15;
text-transform: none;
letter-spacing: 0;
}

.tiptap-template-variable[data-preview-state="missing"] {
background-color: #fee2e2;
color: #991b1b;
border-color: #fca5a5;
}

.tiptap-template-variable[data-preview-state="raw"] {
background-color: var(--color-secondary-100);
color: var(--color-secondary-800);
border-color: var(--color-secondary-300);
}

/* Email button blocks in editor */
.tiptap-editor .tiptap [data-type="email-button"] {
text-align: center;
padding: 1em 0;
}

.tiptap-editor .tiptap [data-type="email-button"] a {
text-decoration: none;
}

.tiptap-editor
.tiptap
[data-type="email-button"].ProseMirror-selectednode {
outline: 2px solid var(--color-primary-500);
outline-offset: 4px;
}

/* Selected node outline */
.tiptap-editor .tiptap .ProseMirror-selectednode {
outline: 2px solid var(--color-primary-400);
outline-offset: 2px;
}

/* Placeholder */
.tiptap-editor .tiptap p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
color: var(--color-neutral-400);
pointer-events: none;
float: left;
height: 0;
}
Loading
Loading