mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
072730f7eb
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">
189 lines
4.7 KiB
Plaintext
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;
|
|
}
|
|
}
|
|
}
|
|
}
|