Skip to content

feat(legal): edit the legal documents in a WYSIWYG markdown editor #38

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

Merged
thoda-dev merged 2 commits into from
Sep 1, 2026
Merged

feat(legal): edit the legal documents in a WYSIWYG markdown editor #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
426b947
feat(legal): edit the legal documents in a WYSIWYG markdown editor
thoda-dev Sep 1, 2026
80c0da8
fix(legal): scroll wide tables instead of overflowing the page
thoda-dev Sep 1, 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
165 changes: 165 additions & 0 deletions apps/app/app/assets/css/legal-document.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
/* The only prose in the app; the tag set is fixed by shared/utils/legal-markdown.ts.
The class is doubled on purpose: UEditor styles its content with utilities of the same specificity, and the document has to look the same in the editor as on the page. */
.legal-document.legal-document {
font-size: 0.9375rem;
line-height: 1.7;
}

.legal-document.legal-document > *:first-child {
margin-top: 0;
}

.legal-document.legal-document h1 {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ui-text-highlighted);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--ui-border);
}

.legal-document.legal-document h2 {
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ui-text-highlighted);
margin-top: 2.5rem;
margin-bottom: 0.75rem;
}

.legal-document.legal-document h3,
.legal-document.legal-document h4,
.legal-document.legal-document h5,
.legal-document.legal-document h6 {
font-size: 1rem;
font-weight: 600;
color: var(--ui-text-highlighted);
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}

.legal-document.legal-document p {
margin-top: 0;
margin-bottom: 1rem;
}

.legal-document.legal-document strong {
font-weight: 600;
color: var(--ui-text-highlighted);
}

.legal-document.legal-document a {
color: var(--ui-primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}

.legal-document.legal-document a:hover {
text-decoration-thickness: 2px;
}

.legal-document.legal-document ul,
.legal-document.legal-document ol {
margin-top: 0;
margin-bottom: 1rem;
padding-left: 1.5rem;
}

.legal-document.legal-document ul {
list-style: disc;
}

.legal-document.legal-document ol {
list-style: decimal;
}

.legal-document.legal-document li {
margin-top: 0;
margin-bottom: 0.375rem;
}

.legal-document.legal-document li::marker {
color: var(--ui-text-dimmed);
}

.legal-document.legal-document blockquote {
border-left: 2px solid var(--ui-border-accented);
padding-left: 1rem;
margin: 1.25rem 0;
color: var(--ui-text-muted);
}

/* Tiptap wraps cell and list-item content in a paragraph where the published page has bare text; without this the block margins land inside every cell. */
.legal-document.legal-document :is(th, td, li) > p {
margin: 0;
line-height: inherit;
}

/* Retention and cookie tables are the reason these documents need tables at all, and they scroll rather than squeezing their columns on a phone. The frame lives on the wrapper because that is the box that scrolls; Tiptap draws one around every table and LegalTable.vue matches it on the published page. */
.legal-document.legal-document .tableWrapper {
margin-top: 0;
margin-bottom: 1.25rem;
overflow-x: auto;
border: 1px solid var(--ui-border);
border-radius: calc(var(--ui-radius) * 2);
}

/* Separate borders rather than collapsed ones: collapsed borders leak past the wrapper's rounded corners, so the cells draw the grid instead. */
.legal-document.legal-document table {
width: 100%;
font-size: 0.875rem;
border-collapse: separate;
border-spacing: 0;
}

.legal-document.legal-document th,
.legal-document.legal-document td {
padding: 0.5rem 0.75rem;
text-align: left;
vertical-align: top;
border-right: 1px solid var(--ui-border);
border-bottom: 1px solid var(--ui-border);
}

.legal-document.legal-document tr > *:last-child {
border-right: 0;
}

.legal-document.legal-document tr:last-child > * {
border-bottom: 0;
}

.legal-document.legal-document th {
background-color: var(--ui-bg-elevated);
font-weight: 600;
color: var(--ui-text-highlighted);
}

.legal-document.legal-document code {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.875em;
background-color: var(--ui-bg-elevated);
border-radius: var(--ui-radius);
padding: 0.125rem 0.25rem;
}

.legal-document.legal-document pre {
margin-top: 0;
background-color: var(--ui-bg-elevated);
border-radius: var(--ui-radius);
padding: 1rem;
overflow-x: auto;
margin-bottom: 1.25rem;
}

.legal-document.legal-document pre code {
background-color: transparent;
padding: 0;
}

.legal-document.legal-document hr {
border-top: 1px solid var(--ui-border);
margin: 2rem 0;
}
149 changes: 5 additions & 144 deletions apps/app/app/components/LegalDocument.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,16 @@
<script setup lang="ts">
// `MarkdownDocument` is registered globally by the @comark/nuxt module.
import type { MarkdownDocument as MarkdownDocumentType } from 'comark'
import LegalTable from './LegalTable.vue'

defineProps<{ value: MarkdownDocumentType }>()
</script>

<template>
<div class="legal-document">
<MarkdownDocument :value="value" />
<MarkdownDocument
:value="value"
:components="{ table: LegalTable }"
/>
</div>
</template>

<style scoped>
/* The only prose in the app; the tag set is fixed by shared/utils/legal-markdown.ts. */
.legal-document {
font-size: 0.9375rem;
line-height: 1.7;
}

.legal-document :deep(> *:first-child) {
margin-top: 0;
}

.legal-document :deep(h1) {
font-size: 1.75rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ui-text-highlighted);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--ui-border);
}

.legal-document :deep(h2) {
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ui-text-highlighted);
margin-top: 2.5rem;
margin-bottom: 0.75rem;
}

.legal-document :deep(h3),
.legal-document :deep(h4),
.legal-document :deep(h5),
.legal-document :deep(h6) {
font-size: 1rem;
font-weight: 600;
color: var(--ui-text-highlighted);
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}

.legal-document :deep(p) {
margin-bottom: 1rem;
}

.legal-document :deep(strong) {
font-weight: 600;
color: var(--ui-text-highlighted);
}

.legal-document :deep(a) {
color: var(--ui-primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}

.legal-document :deep(a:hover) {
text-decoration-thickness: 2px;
}

.legal-document :deep(ul),
.legal-document :deep(ol) {
margin-bottom: 1rem;
padding-left: 1.5rem;
}

.legal-document :deep(ul) {
list-style: disc;
}

.legal-document :deep(ol) {
list-style: decimal;
}

.legal-document :deep(li) {
margin-bottom: 0.375rem;
}

.legal-document :deep(li::marker) {
color: var(--ui-text-dimmed);
}

.legal-document :deep(blockquote) {
border-left: 2px solid var(--ui-border-accented);
padding-left: 1rem;
margin: 1.25rem 0;
color: var(--ui-text-muted);
}

/* Retention and cookie tables are the reason these documents need tables at all, and they overflow
on a phone rather than squeezing the columns. */
.legal-document :deep(table) {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
margin-bottom: 1.25rem;
font-size: 0.875rem;
}

.legal-document :deep(th),
.legal-document :deep(td) {
border: 1px solid var(--ui-border);
padding: 0.5rem 0.75rem;
text-align: left;
vertical-align: top;
}

.legal-document :deep(th) {
background-color: var(--ui-bg-elevated);
font-weight: 600;
color: var(--ui-text-highlighted);
white-space: nowrap;
}

.legal-document :deep(code) {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.875em;
background-color: var(--ui-bg-elevated);
border-radius: var(--ui-radius);
padding: 0.125rem 0.25rem;
}

.legal-document :deep(pre) {
background-color: var(--ui-bg-elevated);
border-radius: var(--ui-radius);
padding: 1rem;
overflow-x: auto;
margin-bottom: 1.25rem;
}

.legal-document :deep(pre code) {
background-color: transparent;
padding: 0;
}

.legal-document :deep(hr) {
border-top: 1px solid var(--ui-border);
margin: 2rem 0;
}
</style>
Loading