feat: improve editors (#226)

This commit is contained in:
Carlos Florêncio
2026-02-16 09:55:04 +00:00
committed by GitHub
parent 95f1b2e13b
commit c4ef2d9ba1
68 changed files with 7389 additions and 2605 deletions
+338 -223
View File
@@ -515,229 +515,7 @@
background: color-mix(in oklab, var(--primary) 30%, var(--background));
}
/* Milkdown Editor Styles */
.milkdown-wrapper {
height: 100%;
overflow: auto;
border-radius: 0;
}
.milkdown-wrapper:not(.dark) {
background: #ffffff;
}
.milkdown-wrapper .milkdown {
height: 100%;
background: transparent;
display: flex;
flex-direction: column;
}
.milkdown-wrapper .milkdown [data-milkdown-root] {
flex: 1;
display: flex;
flex-direction: column;
}
.milkdown-wrapper .editor {
padding: 0.75rem;
flex: 1;
min-height: 100%;
outline: none;
background: transparent;
cursor: text;
}
.milkdown-wrapper .editor:focus {
outline: none;
}
/* Override nord theme colors to match app theme */
.milkdown-wrapper .milkdown {
--nord-background: transparent;
--nord-foreground: var(--foreground);
--nord-outline: var(--border);
--nord-primary: var(--primary);
--nord-secondary: var(--muted);
--nord-neutral: var(--muted-foreground);
--nord-solid: var(--card);
--nord-line: var(--border);
--nord-surface: var(--muted);
--nord-shadow: var(--border);
}
/* Base text styling - match chat text-xs */
.milkdown-wrapper .editor,
.milkdown-wrapper .editor *:not(.mermaid-container):not(.mermaid-container *) {
font-size: 0.75rem !important;
line-height: 1.625;
color: var(--foreground);
}
/* Typography - headings */
.milkdown-wrapper .editor h1,
.milkdown-wrapper .editor h2,
.milkdown-wrapper .editor h3,
.milkdown-wrapper .editor h4,
.milkdown-wrapper .editor h5,
.milkdown-wrapper .editor h6 {
font-weight: 700 !important;
color: var(--foreground) !important;
margin-top: 0.5rem !important;
margin-bottom: 0.25rem !important;
line-height: 1.3 !important;
}
.milkdown-wrapper .editor h1 { font-size: 0.875rem !important; }
.milkdown-wrapper .editor h2 { font-size: 0.8125rem !important; }
.milkdown-wrapper .editor h3 { font-size: 0.75rem !important; }
/* Paragraphs */
.milkdown-wrapper .editor p {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
line-height: 1.625 !important;
font-size: 0.75rem !important;
}
/* Lists */
.milkdown-wrapper .editor ul {
list-style-type: disc !important;
padding-left: 1.25rem !important;
margin-top: 0.375rem !important;
margin-bottom: 0.375rem !important;
font-size: 0.75rem !important;
}
.milkdown-wrapper .editor ol {
list-style-type: decimal !important;
padding-left: 1.25rem !important;
margin-top: 0.375rem !important;
margin-bottom: 0.375rem !important;
font-size: 0.75rem !important;
}
.milkdown-wrapper .editor li {
margin-top: 0.125rem !important;
margin-bottom: 0.125rem !important;
font-size: 0.75rem !important;
line-height: 1.5 !important;
}
/* Inline code - matching chat InlineCode component */
.milkdown-wrapper .editor code {
background: rgb(59 130 246 / 0.2) !important;
color: rgb(96 165 250) !important;
padding: 0.125rem 0.375rem !important;
border-radius: 0.25rem !important;
font-size: 0.675rem !important;
font-family: var(--font-mono) !important;
}
/* Code blocks */
.milkdown-wrapper .editor pre {
background: var(--background) !important;
padding: 0.5rem 0.75rem !important;
border-radius: 0.375rem !important;
overflow-x: auto !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.milkdown-wrapper:not(.dark) .editor pre {
background: #f5f5f5 !important;
}
.milkdown-wrapper .editor pre code {
background: transparent !important;
color: #d4d4d4 !important;
padding: 0 !important;
font-size: 0.625rem !important;
font-family: var(--font-mono) !important;
}
.milkdown-wrapper:not(.dark) .editor pre code {
color: #1e1e1e !important;
}
/* Blockquote */
.milkdown-wrapper .editor blockquote {
border-left: 3px solid var(--primary) !important;
padding-left: 0.75rem !important;
margin-left: 0 !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
color: var(--muted-foreground) !important;
font-style: italic !important;
}
/* Links */
.milkdown-wrapper .editor a {
color: var(--primary) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* Strong/Bold */
.milkdown-wrapper .editor strong {
font-weight: 700;
color: var(--foreground);
}
/* Emphasis */
.milkdown-wrapper .editor em {
font-style: italic;
}
/* Horizontal rule */
.milkdown-wrapper .editor hr {
border: none !important;
border-top: 1px solid var(--border) !important;
margin: 1rem 0 !important;
}
/* Comment highlights in plan editor - inline */
.milkdown-wrapper .comment-highlight {
background-color: rgba(59, 130, 246, 0.45);
border-radius: 3px;
cursor: pointer;
transition: background-color 0.15s ease;
padding: 2px 1px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.milkdown-wrapper .comment-highlight:hover {
background-color: rgba(59, 130, 246, 0.6);
}
/* Mermaid diagram styles */
.milkdown-wrapper .mermaid-container {
margin: 0.75rem 0 !important;
padding: 0.5rem !important;
overflow-x: auto !important;
}
.milkdown-wrapper .mermaid-container svg {
max-width: 100% !important;
height: auto !important;
}
.milkdown-wrapper .mermaid-error {
color: #ef4444 !important;
font-size: 0.75rem !important;
padding: 0.5rem !important;
white-space: pre-wrap !important;
}
/* Placeholder for empty editor - shows at cursor position like a real editor */
.milkdown-wrapper .editor-placeholder {
color: var(--muted-foreground);
opacity: 0.5;
pointer-events: none;
font-size: 0.75rem;
user-select: none;
}
/* Legacy Milkdown styles removed - plan editor now uses TipTap */
/* TipTap editor styles */
.tiptap p.is-editor-empty:first-child::before {
@@ -870,6 +648,343 @@
font-weight: bold;
}
/* Monaco Editor - Comment decorations */
.monaco-comment-line {
background-color: rgba(99, 102, 241, 0.15) !important;
border-left: 3px solid rgba(99, 102, 241, 0.6) !important;
}
.monaco-comment-glyph {
background-color: rgba(99, 102, 241, 0.2);
cursor: pointer;
}
.monaco-comment-glyph::after {
content: '';
display: block;
width: 12px;
height: 12px;
margin: auto;
background: rgba(99, 102, 241, 0.9);
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
mask-size: contain;
-webkit-mask-size: contain;
}
.monaco-comment-glyph:hover {
background-color: rgba(99, 102, 241, 0.35);
}
.monaco-comment-glyph-bg {
background-color: rgba(99, 102, 241, 0.2);
}
/* TipTap Plan Editor Styles */
.tiptap-plan-wrapper {
height: 100%;
overflow: auto;
border-radius: 0;
}
.tiptap-plan-wrapper:not(.dark) {
background: #ffffff;
}
.tiptap-plan-wrapper .tiptap {
height: 100%;
padding: 0.75rem;
outline: none;
cursor: text;
}
.tiptap-plan-wrapper .tiptap:focus {
outline: none;
}
/* Base text styling */
.tiptap-plan-wrapper .tiptap,
.tiptap-plan-wrapper .tiptap *:not(.mermaid-container):not(.mermaid-container *) {
font-size: 0.75rem !important;
line-height: 1.625;
color: var(--foreground);
}
/* Headings */
.tiptap-plan-wrapper .tiptap h1,
.tiptap-plan-wrapper .tiptap h2,
.tiptap-plan-wrapper .tiptap h3,
.tiptap-plan-wrapper .tiptap h4 {
font-weight: 700 !important;
color: var(--foreground) !important;
margin-top: 0.5rem !important;
margin-bottom: 0.25rem !important;
line-height: 1.3 !important;
}
.tiptap-plan-wrapper .tiptap h1 { font-size: 0.875rem !important; }
.tiptap-plan-wrapper .tiptap h2 { font-size: 0.8125rem !important; }
.tiptap-plan-wrapper .tiptap h3 { font-size: 0.75rem !important; }
/* Paragraphs */
.tiptap-plan-wrapper .tiptap p {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
line-height: 1.625 !important;
font-size: 0.75rem !important;
}
/* Lists */
.tiptap-plan-wrapper .tiptap ul {
list-style-type: disc !important;
padding-left: 1.25rem !important;
margin-top: 0.375rem !important;
margin-bottom: 0.375rem !important;
}
.tiptap-plan-wrapper .tiptap ol {
list-style-type: decimal !important;
padding-left: 1.25rem !important;
margin-top: 0.375rem !important;
margin-bottom: 0.375rem !important;
}
.tiptap-plan-wrapper .tiptap li {
margin-top: 0.125rem !important;
margin-bottom: 0.125rem !important;
}
/* Task lists */
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] {
list-style: none !important;
padding-left: 0 !important;
}
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.tiptap-plan-wrapper .tiptap ul[data-type="taskList"] li label {
margin-top: 0.125rem;
}
/* Inline code */
.tiptap-plan-wrapper .tiptap code {
background: rgb(59 130 246 / 0.2) !important;
color: rgb(96 165 250) !important;
padding: 0.125rem 0.375rem !important;
border-radius: 0.25rem !important;
font-size: 0.675rem !important;
font-family: var(--font-mono) !important;
}
/* Code blocks */
.tiptap-plan-wrapper .tiptap pre {
background: var(--background) !important;
padding: 0.5rem 0.75rem !important;
border-radius: 0.375rem !important;
overflow-x: auto !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.tiptap-plan-wrapper:not(.dark) .tiptap pre {
background: #f5f5f5 !important;
}
.tiptap-plan-wrapper .tiptap pre code {
background: transparent !important;
color: #d4d4d4 !important;
padding: 0 !important;
font-size: 0.625rem !important;
font-family: var(--font-mono) !important;
}
.tiptap-plan-wrapper:not(.dark) .tiptap pre code {
color: #1e1e1e !important;
}
/* Blockquote */
.tiptap-plan-wrapper .tiptap blockquote {
border-left: 3px solid var(--primary) !important;
padding-left: 0.75rem !important;
margin-left: 0 !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
color: var(--muted-foreground) !important;
font-style: italic !important;
}
/* Links */
.tiptap-plan-wrapper .tiptap a {
color: var(--primary) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* Horizontal rule */
.tiptap-plan-wrapper .tiptap hr {
border: none !important;
border-top: 1px solid var(--border) !important;
margin: 1rem 0 !important;
}
/* Tables */
.tiptap-plan-wrapper .tiptap table {
border-collapse: collapse;
width: 100%;
margin: 0.5rem 0;
}
.tiptap-plan-wrapper .tiptap th,
.tiptap-plan-wrapper .tiptap td {
border: 1px solid var(--border);
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
}
.tiptap-plan-wrapper .tiptap th {
background: var(--muted);
font-weight: 600;
}
/* Comment highlights */
.tiptap-plan-wrapper .comment-highlight {
background-color: rgba(59, 130, 246, 0.45);
border-radius: 3px;
cursor: pointer;
transition: background-color 0.15s ease;
padding: 2px 1px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.tiptap-plan-wrapper .comment-highlight:hover {
background-color: rgba(59, 130, 246, 0.6);
}
/* Mermaid diagram styles */
.tiptap-plan-wrapper .mermaid-container {
margin: 0.75rem 0 !important;
padding: 0.5rem !important;
overflow-x: auto !important;
}
.tiptap-plan-wrapper .mermaid-container svg {
max-width: 100% !important;
height: auto !important;
}
.tiptap-plan-wrapper .mermaid-error {
color: #ef4444 !important;
font-size: 0.75rem !important;
padding: 0.5rem !important;
white-space: pre-wrap !important;
}
/* Placeholder for empty plan editor */
.tiptap-plan-wrapper .tiptap p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: var(--muted-foreground);
opacity: 0.5;
pointer-events: none;
height: 0;
font-size: 0.75rem;
}
/* Lowlight syntax colors for TipTap plan code blocks */
.tiptap-plan-wrapper .tiptap pre code .hljs-comment,
.tiptap-plan-wrapper .tiptap pre code .hljs-quote {
color: var(--muted-foreground);
font-style: italic;
}
.tiptap-plan-wrapper .tiptap pre code .hljs-keyword,
.tiptap-plan-wrapper .tiptap pre code .hljs-selector-tag,
.tiptap-plan-wrapper .tiptap pre code .hljs-built_in {
color: oklch(0.65 0.2 300);
}
.tiptap-plan-wrapper .tiptap pre code .hljs-string,
.tiptap-plan-wrapper .tiptap pre code .hljs-attr,
.tiptap-plan-wrapper .tiptap pre code .hljs-addition {
color: oklch(0.7 0.15 150);
}
.tiptap-plan-wrapper .tiptap pre code .hljs-number,
.tiptap-plan-wrapper .tiptap pre code .hljs-literal {
color: oklch(0.7 0.15 60);
}
.tiptap-plan-wrapper .tiptap pre code .hljs-title,
.tiptap-plan-wrapper .tiptap pre code .hljs-section,
.tiptap-plan-wrapper .tiptap pre code .hljs-type {
color: oklch(0.75 0.15 80);
}
.tiptap-plan-wrapper .tiptap pre code .hljs-name,
.tiptap-plan-wrapper .tiptap pre code .hljs-tag {
color: oklch(0.65 0.2 20);
}
/* Monaco Editor - Diff gutter indicators */
.monaco-diff-added-gutter {
width: 3px !important;
margin-left: 3px;
background-color: #10b981 !important;
}
.monaco-diff-modified-gutter {
width: 3px !important;
margin-left: 3px;
background-color: #3b82f6 !important;
}
.monaco-diff-deleted-gutter {
width: 0 !important;
margin-left: 2px;
border-left: 4px solid #f43f5e !important;
}
/* Monaco Editor - Peek view / references widget overrides */
.monaco-editor .peekview-widget .head {
box-sizing: border-box;
}
.monaco-editor .peekview-widget .head .peekview-title .filename {
font-size: 12px;
font-weight: 500;
}
.monaco-editor .peekview-widget .head .peekview-title .dirname {
font-size: 11px;
}
/* Match references list font size to editor font size (12px) */
.monaco-editor .reference-zone-widget .ref-tree .monaco-list-row {
font-size: 12px !important;
height: 20px !important;
line-height: 20px !important;
}
.monaco-editor .reference-zone-widget .ref-tree .reference-file {
font-size: 12px !important;
height: 22px !important;
line-height: 22px !important;
}
.monaco-editor .reference-zone-widget .ref-tree .monaco-tl-contents {
padding-left: 4px;
}
.monaco-editor .reference-zone-widget .ref-tree .reference-file .count {
font-size: 10px;
line-height: 14px;
padding: 0 5px;
border-radius: 8px;
}
.debug {
border: 1px solid red !important;
}
+3
View File
@@ -60,6 +60,9 @@ export default async function Page({ searchParams }: PageProps) {
enablePreviewOnClick: settingsEnablePreviewOnClick,
chatSubmitKey: userSettings?.chat_submit_key ?? 'cmd_enter',
reviewAutoMarkOnScroll: userSettings?.review_auto_mark_on_scroll ?? true,
lspAutoStartLanguages: userSettings?.lsp_auto_start_languages ?? [],
lspAutoInstallLanguages: userSettings?.lsp_auto_install_languages ?? [],
lspServerConfigs: userSettings?.lsp_server_configs ?? {},
loaded: Boolean(userSettings),
},
};
+3
View File
@@ -229,6 +229,9 @@ export default async function SessionPage({
enablePreviewOnClick: userSettings?.enable_preview_on_click ?? false,
chatSubmitKey: userSettings?.chat_submit_key ?? 'cmd_enter',
reviewAutoMarkOnScroll: userSettings?.review_auto_mark_on_scroll ?? true,
lspAutoStartLanguages: userSettings?.lsp_auto_start_languages ?? [],
lspAutoInstallLanguages: userSettings?.lsp_auto_install_languages ?? [],
lspServerConfigs: userSettings?.lsp_server_configs ?? {},
loaded: Boolean(userSettings),
},
};