749074fec0
The editor will now have a default height of 300px but a button will let the user expand the editor. It will expand it to fit all content (or up to 400px if the content was not exceeding 300px). In the expanded mode the editor will keep growing as the user types more content.
102 lines
1.7 KiB
SCSS
102 lines
1.7 KiB
SCSS
@import "@toast-ui/editor/dist/toastui-editor.css";
|
|
@import "@toast-ui/editor/dist/theme/toastui-editor-dark.css";
|
|
|
|
.markdown-editor {
|
|
* {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
&__wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
&__resize-btn {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
bottom: 30px;
|
|
right: 0;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: var(--bs-secondary-text-emphasis);
|
|
z-index: 100;
|
|
&::after {
|
|
content: "\f065";
|
|
}
|
|
&--with-scrollbar {
|
|
right: 18px;
|
|
}
|
|
&--collapse {
|
|
right: 0;
|
|
&::after {
|
|
content: "\f066";
|
|
}
|
|
}
|
|
&:hover {
|
|
background: var(--bs-secondary-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
// /*------------------------------------*\
|
|
// $ToastUI overrides
|
|
// \*------------------------------------*/
|
|
|
|
// Overrides for the preview section to match real output styles
|
|
.toastui-editor-contents {
|
|
font-size: 14px;
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0.5em 0 0.5em 0;
|
|
padding: 0;
|
|
border-bottom: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 4px solid var(--bs-secondary-bg);
|
|
p {
|
|
color: var(--bs-secondary-text-emphasis);
|
|
}
|
|
}
|
|
|
|
ul > li::before {
|
|
content: none;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
ul ul {
|
|
list-style-type: circle;
|
|
}
|
|
|
|
ol > li::before {
|
|
color: black;
|
|
}
|
|
|
|
code {
|
|
color: var(--bs-code-color);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
pre {
|
|
border: 1px solid var(--bs-border-color-translucent);
|
|
}
|
|
|
|
del {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
}
|
|
|
|
// Ensure multiline backquotes have same text color in "write" mode
|
|
.toastui-editor-md-marked-text,
|
|
.toastui-editor-md-block-quote {
|
|
color: var(--bs-secondary-text-emphasis);
|
|
}
|