waveterm/frontend/app/element/markdown.less
Evan Simkowitz 072730f7eb
Table of contents for markdown preview (#323)
Adds a table of contents in the markdown preview, with a button in the
header to toggle whether to show the TOC. When a user clicks one of the
TOC elements, the preview will scroll to the corresponding heading.

I've also cleaned up some MD preview styling that was inconsistent and
causing the preview to overflow unnecessarily. This also fixes some
terminology in the preview code.

<img width="574" alt="image"
src="https://github.com/user-attachments/assets/abb18ba9-21d3-4315-bdc3-e4bdcca39a4c">
2024-09-04 21:15:39 -07:00

189 lines
4.7 KiB
Plaintext

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
.markdown {
display: flex;
flex-direction: row;
overflow: hidden;
height: 100%;
width: 100%;
.content {
height: 100%;
width: 100%;
overflow: scroll;
line-height: 1.5;
color: var(--app-text-color);
font-family: var(--markdown-font);
font-size: 14px;
overflow-wrap: break-word;
margin-bottom: 10px;
--half-contents-height: 10em;
.heading {
&:first-of-type {
margin-top: 0 !important;
}
color: var(--app-text-color);
margin-top: 16px;
margin-bottom: 8px;
scroll-margin-block-end: var(--half-contents-height);
}
strong {
color: var(--app-text-color);
}
a {
color: #32afff;
}
table {
tr th {
color: var(--app-text-color);
}
}
ul {
list-style-type: disc;
list-style-position: outside;
margin-left: 16px;
}
ol {
list-style-position: outside;
margin-left: 19px;
}
blockquote {
margin: 4px 10px 4px 10px;
border-radius: 3px;
background-color: var(--panel-bg-color);
padding: 2px 4px 2px 6px;
}
pre.codeblock {
background-color: var(--panel-bg-color);
margin: 4px 10px;
padding: 0.4em 0.7em;
border-radius: 4px;
position: relative;
code {
line-height: 1.5;
white-space: pre-wrap;
word-wrap: break-word;
overflow: auto;
overflow: hidden;
}
.codeblock-actions {
visibility: hidden;
display: flex;
position: absolute;
top: 4px;
right: 4px;
border-radius: 4px;
align-items: center;
justify-content: flex-end;
padding-left: 4px;
padding-right: 4px;
i {
color: var(--line-actions-inactive-color);
margin-left: 4px;
&:first-child {
margin-left: 0px;
}
&:hover {
color: var(--line-actions-active-color);
}
&.fa-check {
color: var(--success-color);
}
&.fa-square-terminal {
cursor: pointer;
}
}
}
&:hover .codeblock-actions {
visibility: visible;
}
}
code {
color: var(--app-text-color);
background-color: var(--panel-bg-color);
font-family: var(--termfontfamily);
border-radius: 4px;
}
pre.selected {
outline: 2px solid var(--accent-color);
}
.heading {
font-weight: semibold;
padding-top: 6px;
}
.heading.is-1 {
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
font-size: 2em;
}
.heading.is-2 {
border-bottom: 1px solid var(--border-color);
padding-bottom: 6px;
font-size: 1.5em;
}
.heading.is-3 {
font-size: 1.25em;
}
.heading.is-4 {
font-size: 1em;
}
.heading.is-5 {
font-size: 0.875em;
}
.heading.is-6 {
font-size: 0.85em;
}
}
// The TOC view should scroll independently of the contents view.
.toc {
max-width: 40%;
height: 100%;
overflow: scroll;
border-left: 1px solid var(--border-color);
.toc-inner {
height: fit-content;
position: sticky;
top: 0;
display: flex;
flex-direction: column;
gap: 5px;
text-wrap: wrap;
h4 {
padding-left: 5px;
}
.toc-item {
cursor: pointer;
--indent-factor: 1;
// The 5px offset in the padding will ensure that when the text in the item wraps, it indents slightly.
// The indent factor is set in the React code and denotes the depth of the item in the TOC tree.
padding-left: calc((var(--indent-factor) - 1) * 10px + 5px);
text-indent: -5px;
}
}
}
}