refactor(markdown-editor): migrate to tiptap for WYSIWYG editing, standardize UI spacing, and update export engine

This commit is contained in:
Dwindi Ramadhana
2026-06-14 00:54:01 +07:00
parent 13e694aa82
commit 7b3dce06ea
16 changed files with 2946 additions and 1343 deletions

View File

@@ -1,34 +1,165 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
darkMode: 'class', // Enable manual dark mode control via class
content: ["./src/**/*.{js,jsx,ts,tsx}"],
darkMode: "class", // Enable manual dark mode control via class
theme: {
extend: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
50: "#f0f9ff",
100: "#e0f2fe",
200: "#bae6fd",
300: "#7dd3fc",
400: "#38bdf8",
500: "#0ea5e9",
600: "#0284c7",
700: "#0369a1",
800: "#075985",
900: "#0c4a6e",
},
},
fontFamily: {
mono: ['JetBrains Mono', 'Monaco', 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Code', 'Droid Sans Mono', 'Courier New', 'monospace'],
mono: [
"JetBrains Mono",
"Monaco",
"Cascadia Code",
"Segoe UI Mono",
"Roboto Mono",
"Oxygen Mono",
"Ubuntu Monospace",
"Source Code Pro",
"Fira Code",
"Droid Sans Mono",
"Courier New",
"monospace",
],
},
maxWidth: {
'1/4': '25%',
'1/2': '50%',
'3/4': '75%',
}
typography: (theme) => ({
DEFAULT: {
css: {
"--tw-prose-body": "#24292f",
"--tw-prose-headings": "#24292f",
"--tw-prose-lead": "#57606a",
"--tw-prose-links": "#0969da",
"--tw-prose-bold": "#24292f",
"--tw-prose-counters": "#57606a",
"--tw-prose-bullets": "#d0d7de",
"--tw-prose-hr": "#d0d7de",
"--tw-prose-quotes": "#57606a",
"--tw-prose-quote-borders": "#d0d7de",
"--tw-prose-captions": "#57606a",
"--tw-prose-code": "#24292f",
"--tw-prose-pre-code": "#24292f",
"--tw-prose-pre-bg": "#f6f8fa",
"--tw-prose-th-borders": "#d0d7de",
"--tw-prose-td-borders": "#d0d7de",
// Invert colors for dark mode
"--tw-prose-invert-body": "#c9d1d9",
"--tw-prose-invert-headings": "#c9d1d9",
"--tw-prose-invert-lead": "#8b949e",
"--tw-prose-invert-links": "#58a6ff",
"--tw-prose-invert-bold": "#c9d1d9",
"--tw-prose-invert-counters": "#8b949e",
"--tw-prose-invert-bullets": "#30363d",
"--tw-prose-invert-hr": "#21262d",
"--tw-prose-invert-quotes": "#8b949e",
"--tw-prose-invert-quote-borders": "#30363d",
"--tw-prose-invert-captions": "#8b949e",
"--tw-prose-invert-code": "#c9d1d9",
"--tw-prose-invert-pre-code": "#c9d1d9",
"--tw-prose-invert-pre-bg": "#161b22",
"--tw-prose-invert-th-borders": "#30363d",
"--tw-prose-invert-td-borders": "#30363d",
// Adjust margins and sizes (Standardizing to GitHub Markdown / Modern defaults)
maxWidth: "none",
lineHeight: "1.4",
p: {
marginTop: "0",
marginBottom: "0.65em",
},
"h1, h2, h3, h4, h5, h6": {
marginTop: "1em",
marginBottom: "0.65em",
fontWeight: "600",
lineHeight: "1.2",
},
h1: {
fontSize: "2em",
paddingBottom: "0.2em",
borderBottomWidth: "1px",
},
h2: {
fontSize: "1.5em",
paddingBottom: "0.2em",
borderBottomWidth: "1px",
},
h3: { fontSize: "1.25em" },
h4: { fontSize: "1em" },
h5: { fontSize: "0.875em" },
h6: { fontSize: "0.85em", color: "var(--tw-prose-lead)" },
"ul, ol": {
marginTop: "0",
marginBottom: "0.65em",
paddingLeft: "1.5em",
},
li: {
marginTop: "0.15em",
marginBottom: "0.15em",
},
"li > p": {
marginTop: "0",
marginBottom: "0",
},
blockquote: {
marginTop: "0",
marginBottom: "0.65em",
paddingLeft: "1em",
fontStyle: "normal",
borderLeftWidth: "4px",
},
pre: {
marginTop: "0",
marginBottom: "0.65em",
padding: "0.75em",
borderRadius: "6px",
},
code: {
backgroundColor: "rgba(175, 184, 193, 0.2)",
padding: "0.2em 0.4em",
borderRadius: "6px",
fontWeight: "inherit",
},
"code::before": { content: '""' },
"code::after": { content: '""' },
"pre code": {
backgroundColor: "transparent",
padding: "0",
},
table: {
marginTop: "0",
marginBottom: "0.65em",
},
"thead th": {
padding: "0.4em 0.75em",
borderWidth: "1px",
},
"tbody td": {
padding: "0.4em 0.75em",
borderWidth: "1px",
},
hr: {
marginTop: "1em",
marginBottom: "1em",
height: "0.25em",
borderWidth: "0",
backgroundColor: "var(--tw-prose-hr)",
},
},
},
}),
},
},
plugins: [],
}
plugins: [require("@tailwindcss/typography")],
};