feat(markdown): BIG ui improvements
Some checks failed
/ deploy-and-package (push) Has been cancelled
Some checks failed
/ deploy-and-package (push) Has been cancelled
This commit is contained in:
parent
0193880cb0
commit
61d27b0e96
SSH key fingerprint:
SHA256:GBzT2DXvAuGV9XIV5W3WrzVpjU54FThmxHXdbz95J24
10 changed files with 861 additions and 388 deletions
|
|
@ -1,253 +1,294 @@
|
|||
@import "katex/dist/katex.min.css";
|
||||
|
||||
@layer components {
|
||||
[data-slot="markdown"] {
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 72%,
|
||||
var(--background)
|
||||
);
|
||||
--markdown-code-foreground: var(--foreground);
|
||||
--markdown-code-token-constant: var(--primary-foreground-alt);
|
||||
--markdown-code-token-string: color-mix(
|
||||
in oklch,
|
||||
var(--chart-2) 78%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-comment: var(--muted-foreground);
|
||||
--markdown-code-token-keyword: color-mix(
|
||||
in oklch,
|
||||
var(--primary) 72%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-parameter: var(--chart-3);
|
||||
--markdown-code-token-function: var(--chart-4);
|
||||
--markdown-code-token-string-expression: var(--chart-2);
|
||||
--markdown-code-token-punctuation: color-mix(
|
||||
in oklch,
|
||||
var(--foreground) 72%,
|
||||
var(--muted-foreground)
|
||||
);
|
||||
--markdown-code-token-link: var(--primary-foreground-alt);
|
||||
}
|
||||
[data-slot="markdown"],
|
||||
.tm-md-root {
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 72%,
|
||||
var(--background)
|
||||
);
|
||||
--markdown-code-foreground: var(--foreground);
|
||||
--markdown-code-token-constant: var(--primary-foreground-alt);
|
||||
--markdown-code-token-string: color-mix(
|
||||
in oklch,
|
||||
var(--chart-2) 78%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-comment: var(--muted-foreground);
|
||||
--markdown-code-token-keyword: color-mix(
|
||||
in oklch,
|
||||
var(--primary) 72%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-parameter: var(--chart-3);
|
||||
--markdown-code-token-function: var(--chart-4);
|
||||
--markdown-code-token-string-expression: var(--chart-2);
|
||||
--markdown-code-token-punctuation: color-mix(
|
||||
in oklch,
|
||||
var(--foreground) 72%,
|
||||
var(--muted-foreground)
|
||||
);
|
||||
--markdown-code-token-link: var(--primary-foreground-alt);
|
||||
}
|
||||
|
||||
.dark [data-slot="markdown"]:not([data-code-theme="light"]),
|
||||
[data-slot="markdown"][data-code-theme="dark"] {
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 76%,
|
||||
black 24%
|
||||
);
|
||||
--markdown-code-token-constant: var(--chart-1);
|
||||
--markdown-code-token-keyword: color-mix(
|
||||
in oklch,
|
||||
var(--primary) 62%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-function: color-mix(
|
||||
in oklch,
|
||||
var(--chart-4) 72%,
|
||||
var(--foreground)
|
||||
);
|
||||
}
|
||||
.dark [data-slot="markdown"]:not([data-code-theme="light"]),
|
||||
[data-slot="markdown"][data-code-theme="dark"],
|
||||
.dark .tm-md-root {
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 76%,
|
||||
black 24%
|
||||
);
|
||||
--markdown-code-token-constant: var(--chart-1);
|
||||
--markdown-code-token-keyword: color-mix(
|
||||
in oklch,
|
||||
var(--primary) 62%,
|
||||
var(--foreground)
|
||||
);
|
||||
--markdown-code-token-function: color-mix(
|
||||
in oklch,
|
||||
var(--chart-4) 72%,
|
||||
var(--foreground)
|
||||
);
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor {
|
||||
border-radius: inherit;
|
||||
background: transparent;
|
||||
caret-color: var(--foreground);
|
||||
}
|
||||
.cm-editor.tm-md-editor {
|
||||
border-radius: inherit;
|
||||
background: transparent;
|
||||
caret-color: var(--foreground);
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor.cm-focused {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.cm-editor.tm-md-editor.cm-focused {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .cm-cursor,
|
||||
.cm-editor.tm-md-editor .cm-dropCursor {
|
||||
border-left-color: var(--foreground) !important;
|
||||
}
|
||||
.cm-editor.tm-md-editor .cm-cursor,
|
||||
.cm-editor.tm-md-editor .cm-dropCursor {
|
||||
border-left-color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .cm-scroller {
|
||||
max-height: 30vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-family: "Public Sans", system-ui, sans-serif !important;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.cm-editor.tm-md-editor .cm-scroller {
|
||||
max-height: 30vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-family: "Public Sans", system-ui, sans-serif !important;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .cm-content {
|
||||
min-height: 2rem;
|
||||
padding: var(--tm-md-content-padding, 0.25rem 0.625rem);
|
||||
caret-color: var(--foreground) !important;
|
||||
}
|
||||
.cm-editor.tm-md-editor .cm-content {
|
||||
min-height: 2rem;
|
||||
padding: var(--tm-md-content-padding, 0.25rem 0.625rem);
|
||||
caret-color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .cm-line {
|
||||
padding: 0;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.cm-editor.tm-md-editor .cm-line {
|
||||
padding: 0 0 0 0 !important;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-editor-emoji {
|
||||
display: inline-block;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
object-fit: contain;
|
||||
vertical-align: -0.18em;
|
||||
pointer-events: none;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-editor-emoji {
|
||||
display: inline-block;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
object-fit: contain;
|
||||
vertical-align: -0.18em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-code-line {
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--muted);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-line {
|
||||
box-sizing: border-box;
|
||||
border-right: var(--ui-border-width) solid var(--border);
|
||||
border-left: var(--ui-border-width) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: var(--markdown-code-background);
|
||||
color: var(--markdown-code-foreground);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.7;
|
||||
padding-right: 1rem !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-heading {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-line::before {
|
||||
display: inline-block;
|
||||
width: 2.5rem;
|
||||
padding-right: 1rem;
|
||||
color: var(--muted-foreground);
|
||||
content: attr(data-code-line);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h1 {
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-line-start {
|
||||
margin-top: 0.45rem;
|
||||
border-top: var(--ui-border-width) solid var(--border);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
padding-top: 0.65rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h2 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-line-end {
|
||||
margin-bottom: 0.45rem;
|
||||
border-bottom: var(--ui-border-width) solid var(--border);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
padding-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-line-start.tm-md-code-line-end {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-rendered-code-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-heading {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-h6 {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h1 {
|
||||
font-size: 1.65rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h2 {
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-em {
|
||||
font-style: italic;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-code {
|
||||
border: var(--ui-border-width) solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--muted);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-code-active {
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--muted);
|
||||
box-shadow: inset 0 0 0 var(--ui-border-width) var(--border);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-h6 {
|
||||
font-size: 0.95rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-code-active .tm-md-code {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cm-editor.tm-md-editor .tm-md-link {
|
||||
color: var(--primary-foreground-alt);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.14rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete {
|
||||
min-width: 18rem;
|
||||
max-width: min(26rem, calc(100vw - 1rem));
|
||||
overflow: hidden;
|
||||
border: var(--ui-border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--popover);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 10%),
|
||||
0 2px 4px -2px rgb(0 0 0 / 10%);
|
||||
color: var(--popover-foreground);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul {
|
||||
max-height: min(20rem, 45vh);
|
||||
padding: 0.25rem;
|
||||
font-family: var(--font-sans);
|
||||
scrollbar-color: var(--border) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code {
|
||||
border: var(--ui-border-width) solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--muted);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-active {
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--muted);
|
||||
box-shadow: inset 0 0 0 var(--ui-border-width) var(--border);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.88em;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-code-active .tm-md-code {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb {
|
||||
border-radius: 9999px;
|
||||
background: var(--border);
|
||||
}
|
||||
.cm-editor.tm-md-editor .tm-md-link {
|
||||
color: var(--primary-foreground-alt);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.14rem;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li {
|
||||
display: flex;
|
||||
min-height: 2.25rem;
|
||||
align-items: center;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--popover-foreground);
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete {
|
||||
min-width: 18rem;
|
||||
max-width: min(26rem, calc(100vw - 1rem));
|
||||
overflow: hidden;
|
||||
border: var(--ui-border-width) solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--popover);
|
||||
box-shadow:
|
||||
0 4px 6px -1px rgb(0 0 0 / 10%),
|
||||
0 2px 4px -2px rgb(0 0 0 / 10%);
|
||||
color: var(--popover-foreground);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover,
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
||||
background: var(--accent);
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul {
|
||||
max-height: min(20rem, 45vh);
|
||||
padding: 0.25rem;
|
||||
font-family: var(--font-sans);
|
||||
scrollbar-color: var(--border) transparent;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
|
||||
display: none;
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb {
|
||||
border-radius: 9999px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete .tm-md-completion-emoji {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li {
|
||||
display: flex;
|
||||
min-height: 2.25rem;
|
||||
align-items: center;
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--popover-foreground);
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover,
|
||||
.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
||||
background: var(--accent);
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionLabel {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cm-tooltip.cm-tooltip-autocomplete .cm-completionMatchedText {
|
||||
color: inherit;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cm-tooltip-autocomplete .tm-md-completion-emoji {
|
||||
display: inline-block;
|
||||
flex: 0 0 auto;
|
||||
width: 1.35rem;
|
||||
height: 1.35rem;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue