mirror of
https://github.com/muerwre/markdown-home-tab.git
synced 2025-04-25 00:46:41 +07:00
add hypermd
This commit is contained in:
Fedor Katurov
parent
3a4e8e7702
commit
dfaa6342a3
8 changed files with 2007 additions and 26 deletions
|
|
@ -18,11 +18,13 @@
|
|||
"color": "^4.2.3",
|
||||
"dockview": "^1.7.1",
|
||||
"formik": "^2.2.9",
|
||||
"hypermd": "^0.3.11",
|
||||
"i18next": "^22.4.15",
|
||||
"i18next-browser-languagedetector": "^7.0.1",
|
||||
"i18next-http-backend": "^2.2.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"react": "^18.2.0",
|
||||
"react-codemirror": "^1.0.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^12.2.2",
|
||||
"react-markdown": "^8.0.7",
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
"@types/firefox-webext-browser": "^120.0.4",
|
||||
"@types/lodash.debounce": "^4.0.9",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-codemirror": "^1.0.11",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/uuid": "^9.0.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
|
|
@ -52,5 +55,8 @@
|
|||
"rollup-plugin-visualizer": "^5.9.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"codemirror": "5.65.18"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
78
src/modules/editor/components/HyperEditor/index.tsx
Normal file
78
src/modules/editor/components/HyperEditor/index.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { useEffect, useRef } from "react";
|
||||
|
||||
import ReactCodeMirror from "react-codemirror";
|
||||
|
||||
import "codemirror/lib/codemirror.css";
|
||||
import "hypermd/mode/hypermd.css";
|
||||
import "./theme.scss";
|
||||
|
||||
import "codemirror/lib/codemirror";
|
||||
|
||||
import "codemirror/mode/javascript/javascript";
|
||||
import "codemirror/mode/xml/xml";
|
||||
import "codemirror/mode/markdown/markdown";
|
||||
import "codemirror/mode/gfm/gfm";
|
||||
|
||||
import "hypermd/core";
|
||||
import "hypermd/mode/hypermd";
|
||||
|
||||
import "hypermd/addon/fold-link";
|
||||
import "hypermd/addon/hide-token";
|
||||
import "hypermd/addon/cursor-debounce";
|
||||
import "hypermd/addon/fold";
|
||||
import "hypermd/addon/read-link";
|
||||
import "hypermd/addon/click";
|
||||
import "hypermd/addon/hover";
|
||||
import "hypermd/addon/paste";
|
||||
import "hypermd/addon/insert-file";
|
||||
import "hypermd/addon/mode-loader";
|
||||
import "hypermd/addon/table-align";
|
||||
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
interface Props {
|
||||
value: string;
|
||||
onChange: (val: string) => void;
|
||||
}
|
||||
|
||||
const options: CodeMirror.EditorConfiguration = {
|
||||
mode: "hypermd",
|
||||
// mode: "gfm",
|
||||
theme: "hypermd-default",
|
||||
|
||||
hmdFold: {
|
||||
image: true,
|
||||
link: true,
|
||||
math: true,
|
||||
},
|
||||
hmdHideToken: true,
|
||||
hmdCursorDebounce: true,
|
||||
hmdPaste: true,
|
||||
hmdClick: true,
|
||||
hmdHover: true,
|
||||
hmdTableAlign: true,
|
||||
};
|
||||
|
||||
export const HyperEditor = ({ value, onChange }: Props) => {
|
||||
const ref = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!ref.current) {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const result = fromTextArea(ref.current);
|
||||
|
||||
// return () => switchToNormal(result);
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<ReactCodeMirror
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
// ref={ref}
|
||||
className={styles.wrapper}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
900
src/modules/editor/components/HyperEditor/theme.scss
Normal file
900
src/modules/editor/components/HyperEditor/theme.scss
Normal file
|
|
@ -0,0 +1,900 @@
|
|||
@font-face {
|
||||
font-family: "HyperMD-Bullets";
|
||||
src: url("data:application/x-font-woff;charset=utf-8;base64,d09GRk9UVE8AAATYAAsAAAAABrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAADLAAAAVkAAAFgkDDiyEZGVE0AAASsAAAAGwAAABx9TbkrR0RFRgAABIgAAAAiAAAAJgAnACpPUy8yAAABZAAAAEcAAABgVTNgQ2NtYXAAAALUAAAAQwAAAUoBRQLkaGVhZAAAAQgAAAAzAAAANgrgpUBoaGVhAAABPAAAAB4AAAAkBOsD+WhtdHgAAATIAAAAEAAAABALoAL5bWF4cAAAAVwAAAAGAAAABgAEUABuYW1lAAABrAAAASYAAAITC0mo3nBvc3QAAAMYAAAAEwAAACD/gwAzeJxjYGRgYABil5kPquP5bb4ycLMwgMCVWRq+ENpyHoMxAwNTNFMEkMvBwAQSBQAX2QkFAHicY2BkYGAyZtjFEMNsxQAETNEMjAyogAUAMnAB7AAAAABQAAAEAAB4nGNgYTZlnMDAysDANIvpDAMDQz+EZnzFYMTIARRlYOVkgAFGBiQQkOaawtDAoMWgy2z835ghhsn4vxuKGgUgZAQARsULIwB4nIWOMWvDMBSET4mT4g6lhC7dtBQSiI1kSgNZAw506FBIlk52YhyDsIPiDIGO/T39Lf01nXtyRJYOMcjv09O9ewfgDt8QOH+PePYsECL33MMNPj338YQfzwFCcet5gHvx4nnI/geVIgh5S7opxwIjvHnuca/x3McrvjwH1Px6HkCKB89DjMQSCzTY4wSLCiV2aCExxgYT1gQKGjNMyQYZlTmOwKLZn2xV7lo53kxkovRsKk3W5HxaoaZDxWNQYMtprOq2ak2xJb6zV9LBeVlei/JoMkJKZzfnqqWi6HbH3C4x5/nveu5rKiL+o0tSpE3dpo0tC5nESs7lZTtZq0hHLu61nGv2LA58d7kkvZ173FWXCevCHqqmlkrpWCklrxj+AequT5gAAHicY2BgYGaAYBkGRgYQcAHyGMF8FgYNIM0GpBkZmBi0GXT//wfytUD0/+v/r0HVAwEjGwOCQxAwMoHtG2YAAPijCSYAeJxjYGYAg/8NDMYMWAAAKBQBtgB4nEWOsUsCYRjG38+7y/O8zoxOIi8RXBLE0iWCtkYjLLBoNMsSJC2sKILIFuuDKIhKbBKDwDFovAgC5eb8AwqaCqql740TzBZ7nuU3Pb+HAM8DIUSKreZSufTSYgiIBQhE0AHoJqhZcJDDft7zbKm0ZM4zXW7JvEcC2+bsMKUdkK06xQ98FzQoOTSAHg3KTg1UjUR6gfsbHAAfBCYy2e311PJKzjuU8HvDI6HRgDcdzyxsdOz/N9qxgwwK8IT4ssflb6pjVCe6zuo6p7swiHfNYJfePFAxyurNqFXBBG6pGWYTYmvZZGFONO3nwtlUNX6/I86bnFAsXNILekurpcqN+DIuFK9PK7TdfHm3In7VhHQ1dZWkebp/tHcoKjiGYXxTJ0236Ywx54xhumrMxdRHU30QFPbaIJ/M4NgJ2lRmPJlGl/JT60O/SmWpITVkmRl2Zsjdv2uJiQgAAAB4nGNgZGBg4AFiMQY5BiYGRiBkBmIWoAgTEDNCMAAIgwBSAAB4nGNgYGBkAIIrkuH2YHqWhi+EtpwHADfuBa0AAgAAMwMzAOgDOgDiAzMA/A==")
|
||||
format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.cm-s-hypermd-default {
|
||||
$fs: 12pt; //default font-size
|
||||
|
||||
$editor-background: var(--color-background);
|
||||
$editor-color: var(--color-text);
|
||||
|
||||
$line-height: 1.5;
|
||||
$line-margin: 10px;
|
||||
$line-padding: 5px;
|
||||
|
||||
$footnote-padding: 40px;
|
||||
|
||||
$quote-margin: 2px;
|
||||
$quote-padding: 20px;
|
||||
|
||||
$list-margin: 10px;
|
||||
$list-indent: 30px;
|
||||
$list-bullet-width: 30px;
|
||||
$list-margin-after-line: 0.3em;
|
||||
|
||||
$table-border-style: 1px solid #999;
|
||||
$table-row1-height: 8px;
|
||||
$table-sep-width: 15px;
|
||||
$table-sep-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOc+R8AAjcBmvywMWoAAAAASUVORK5CYII=";
|
||||
$table-row-1-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAQAAAAziH6sAAAADklEQVR42mOc+Z9x5n8ACTkDM4ikM1IAAAAASUVORK5CYII=";
|
||||
|
||||
$codeblock-border: 1px solid #ccc;
|
||||
$codeblock-padding: 5px;
|
||||
|
||||
$hashtag-fontsize: 0.84em;
|
||||
$hashtag-padding-x: 6px;
|
||||
$hashtag-padding-y: 0.1em;
|
||||
$hashtag-radius: 8px;
|
||||
|
||||
$hr-color: #999;
|
||||
$hr-image: $table-row-1-image;
|
||||
$hr-padding: 5px;
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Open Sans", "Helvetica Neue",
|
||||
Helvetica, Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei",
|
||||
"Noto Sans CJK SC", "Microsoft YaHei", STHeiti, "Microsoft Jhenghei",
|
||||
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
%monospace {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------
|
||||
|
||||
line-height: $line-height;
|
||||
font-size: $fs;
|
||||
background: $editor-background;
|
||||
color: $editor-color;
|
||||
|
||||
/// Fold-HTML
|
||||
|
||||
.CodeMirror-linewidget,
|
||||
.hmd-fold-html {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
td,
|
||||
th {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@extend %monospace;
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 90%;
|
||||
line-height: 1em;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: rgb(198, 203, 209);
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
a > img {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// CodeMirror
|
||||
|
||||
.cm-header,
|
||||
.cm-strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
span.cm-quote {
|
||||
color: #666;
|
||||
}
|
||||
span.cm-meta {
|
||||
color: #ff1717;
|
||||
}
|
||||
span.cm-keyword {
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
color: #7f0055;
|
||||
}
|
||||
span.cm-atom {
|
||||
color: #219;
|
||||
}
|
||||
span.cm-number {
|
||||
color: #164;
|
||||
}
|
||||
span.cm-def {
|
||||
color: #00f;
|
||||
}
|
||||
span.cm-variable {
|
||||
color: black;
|
||||
}
|
||||
span.cm-variable-2 {
|
||||
color: #0000c0;
|
||||
}
|
||||
span.cm-variable-3 {
|
||||
color: #0000c0;
|
||||
}
|
||||
span.cm-property {
|
||||
color: black;
|
||||
}
|
||||
span.cm-operator {
|
||||
color: black;
|
||||
}
|
||||
span.cm-comment {
|
||||
color: #4f9f5f;
|
||||
}
|
||||
span.cm-string {
|
||||
color: #2a00ff;
|
||||
}
|
||||
span.cm-string-2 {
|
||||
color: #f50;
|
||||
}
|
||||
span.cm-qualifier {
|
||||
color: #555;
|
||||
}
|
||||
span.cm-builtin {
|
||||
color: #30a;
|
||||
}
|
||||
span.cm-bracket {
|
||||
color: #cc7;
|
||||
}
|
||||
span.cm-tag {
|
||||
color: #170;
|
||||
}
|
||||
span.cm-attribute {
|
||||
color: #00c;
|
||||
}
|
||||
span.cm-url {
|
||||
color: #4af;
|
||||
}
|
||||
span.cm-link {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
span.cm-error {
|
||||
color: #f00;
|
||||
}
|
||||
span.cm-math {
|
||||
@extend %monospace;
|
||||
font-style: italic;
|
||||
background: rgba(#ffe, 0.4);
|
||||
}
|
||||
span.cm-formatting-math {
|
||||
color: #caa;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
.CodeMirror-activeline-background {
|
||||
background: #e8f2ff;
|
||||
}
|
||||
.CodeMirror-matchingbracket {
|
||||
outline: 1px solid grey;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.CodeMirror-linenumber {
|
||||
color: #ccc;
|
||||
}
|
||||
.CodeMirror-gutters {
|
||||
border-right: $line-margin solid $editor-background;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.CodeMirror-line {
|
||||
padding: 0 $line-padding;
|
||||
}
|
||||
.CodeMirror-code {
|
||||
padding-right: $line-margin;
|
||||
}
|
||||
.CodeMirror-foldmarker {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/// Formatting Tokens, use monospace chars
|
||||
span {
|
||||
&.cm-formatting-em,
|
||||
&.cm-formatting-strong,
|
||||
&.cm-formatting-strikethrough,
|
||||
&.cm-formatting-code,
|
||||
&.cm-formatting-link,
|
||||
&.cm-formatting-image,
|
||||
&.cm-url {
|
||||
@extend %monospace;
|
||||
}
|
||||
}
|
||||
|
||||
/// TOC
|
||||
span.cm-hmd-toc {
|
||||
font-size: $fs * 2;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/// OrgMode
|
||||
span.cm-hmd-orgmode-markup {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
||||
/// Front Matter
|
||||
span.cm-hmd-frontmatter {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
||||
/// Headers
|
||||
// in fact stdheader has no special meaning; they are just normal headers
|
||||
// legacy naming problem
|
||||
|
||||
pre.HyperMD-header {
|
||||
// see https://github.com/laobubu/HyperMD/issues/25
|
||||
line-height: $line-height !important;
|
||||
font-family: inherit !important;
|
||||
padding-left: $line-padding !important;
|
||||
margin-left: 0 !important;
|
||||
border-left: 0 !important;
|
||||
padding-bottom: 0.25em;
|
||||
> span > span:first-child {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
&.HyperMD-header-1 {
|
||||
font-weight: 600;
|
||||
font-size: $fs * 2;
|
||||
}
|
||||
&.HyperMD-header-2 {
|
||||
font-weight: 600;
|
||||
font-size: $fs * 1.5;
|
||||
}
|
||||
&.HyperMD-header-3 {
|
||||
font-size: $fs * 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
pre.HyperMD-header-line {
|
||||
color: rgba(#000, 0.3);
|
||||
line-height: 8px;
|
||||
}
|
||||
|
||||
/// Horizontal Rule
|
||||
|
||||
pre.HyperMD-hr {
|
||||
@extend %monospace;
|
||||
background-color: $editor-background;
|
||||
background-color: rgba($editor-background, 0.7);
|
||||
}
|
||||
|
||||
div.HyperMD-hr-bg {
|
||||
left: $line-padding - $hr-padding;
|
||||
right: $line-padding - $hr-padding;
|
||||
background: url(#{$hr-image}) repeat-x 0px center;
|
||||
}
|
||||
|
||||
/// blockquote
|
||||
|
||||
pre.HyperMD-quote {
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: $quote-margin;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: url("data:image/gif;base64,R0lGODlhIAABAIABAOjo6P///yH5BAEAAAEALAAAAAAgAAEAAAIHhI8Yy+1cAAA7")
|
||||
0 0;
|
||||
background-size: $quote-padding 1px;
|
||||
}
|
||||
}
|
||||
@for $i from 1 through 9 {
|
||||
pre.HyperMD-quote-#{$i} {
|
||||
$padding-left: $quote-margin + ($quote-padding) * ($i);
|
||||
padding-left: $line-padding + $padding-left;
|
||||
|
||||
&:before {
|
||||
width: $quote-padding * $i;
|
||||
}
|
||||
|
||||
&.HyperMD-footnote {
|
||||
padding-left: $line-padding + $padding-left + $footnote-padding;
|
||||
}
|
||||
|
||||
span.cm-formatting-quote {
|
||||
transform: translateZ(0); // avoid getting covered by pre:before
|
||||
display: inline-block;
|
||||
width: $quote-padding;
|
||||
&:first-child {
|
||||
margin-left: -$quote-padding * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-hmd-indent-in-quote {
|
||||
@extend %monospace;
|
||||
}
|
||||
|
||||
/// list
|
||||
|
||||
span.cm-hmd-list-indent {
|
||||
display: inline-block;
|
||||
width: $list-indent;
|
||||
text-align: right;
|
||||
white-space: pre;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px dashed #ccc;
|
||||
overflow: hidden;
|
||||
font-size: 0.5em;
|
||||
line-height: 200%;
|
||||
}
|
||||
|
||||
pre.HyperMD-list-line {
|
||||
padding-top: $list-margin-after-line;
|
||||
min-height: #{$line-height}em;
|
||||
|
||||
span.cm-formatting-list,
|
||||
span.cm-hmd-list-indent {
|
||||
text-align: right;
|
||||
white-space: pre;
|
||||
width: $list-bullet-width;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span.cm-hmd-list-indent {
|
||||
margin-left: -$list-indent - $list-bullet-width;
|
||||
}
|
||||
|
||||
&.HyperMD-list-line-nobullet {
|
||||
padding-top: initial;
|
||||
span.cm-hmd-list-indent {
|
||||
margin-left: -$list-bullet-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 9 {
|
||||
$indent_i: $list-indent * $i + $list-margin;
|
||||
|
||||
pre.HyperMD-list-line-#{$i} {
|
||||
padding-left: $line-padding + $indent_i;
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-formatting-list {
|
||||
margin-left: -$list-bullet-width;
|
||||
font-family: "HyperMD-Bullets";
|
||||
color: #666;
|
||||
&.cm-list-2 {
|
||||
text-shadow: 0 1px #666, 0 -1px #666, 1px 0 #666, -1px 0 #666;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-formatting-task // task list checkbox
|
||||
{
|
||||
@extend %monospace;
|
||||
white-space: pre;
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
min-width: 1em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0;
|
||||
cursor: pointer;
|
||||
|
||||
&.cm-property {
|
||||
// checked
|
||||
background-position-y: -1em;
|
||||
}
|
||||
|
||||
color: rgba(#000, 0.5);
|
||||
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAMAAAA8VkqRAAAAclBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACa4vOeAAAAJXRSTlMADcjpDswcLZOzsvOYBvWdbtvTX0D69+ORa1dRJCDtuaF7ZDkoQyuUXgAAAMhJREFUOMvt0reywjAUhOFjKxmcrgMZboL//V8Rm6GwkNUx0LClvhkVZ1fEZoqHqMwO7wuUSb0YxcJKxtLpxIt2SzJRykkQp5RgdAjaIKRJCEn6gWdA9OzRoqLVRscQnc9bdtXX/eyurOF7N3erLVDPwCGHxoVwamH1LwGUBfBbhrCvoLlMitL9DY8trLtJg7qoCj18VAN1OYE/YJBuDe1RJtBVo5wbqPb+GL5yWG1GLX0YZYw5iQ93yQ/yAHfZzu5qt/mxr97VFS15JGSVM0C6AAAAAElFTkSuQmCC");
|
||||
background-size: 1em;
|
||||
}
|
||||
|
||||
/// footnote for link and image
|
||||
// note: footnote can be inside a blockquote
|
||||
pre.HyperMD-footnote {
|
||||
font-size: $fs * 0.85;
|
||||
padding-left: $line-padding + $footnote-padding;
|
||||
|
||||
> span > span:first-child {
|
||||
margin-left: -$footnote-padding;
|
||||
}
|
||||
|
||||
span.cm-hmd-footnote {
|
||||
color: #666;
|
||||
cursor: text;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/// code block
|
||||
|
||||
// pre.hmd-codeblock-start,
|
||||
// pre.hmd-codeblock-end
|
||||
// {
|
||||
|
||||
// }
|
||||
pre.HyperMD-codeblock {
|
||||
@extend %monospace;
|
||||
line-height: 1.2;
|
||||
color: #922;
|
||||
|
||||
// &.hmd-codeblock-indent {
|
||||
span.cm-inline-code {
|
||||
display: inherit;
|
||||
background-color: inherit;
|
||||
border: inherit;
|
||||
padding: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// note: this is a background style
|
||||
div.HyperMD-codeblock-bg {
|
||||
left: $line-padding - $codeblock-padding;
|
||||
right: $line-padding - $codeblock-padding;
|
||||
background-color: #fafafa;
|
||||
border-left: $codeblock-border;
|
||||
border-right: $codeblock-border;
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin-bg {
|
||||
border-top: $codeblock-border;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-end-bg {
|
||||
border-bottom: $codeblock-border;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
div.HyperMD-codeblock-begin-bg,
|
||||
div.HyperMD-codeblock-end-bg {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
/// link
|
||||
|
||||
.cm-formatting-link + .cm-formatting-link-string,
|
||||
.cm-formatting-link + .cm-formatting-link-string + .cm-url,
|
||||
.cm-formatting-link
|
||||
+ .cm-formatting-link-string
|
||||
+ .cm-url
|
||||
+ .cm-formatting-link-string,
|
||||
.cm-formatting-link + .cm-formatting-link-string + .cm-url + .cm-link,
|
||||
.cm-formatting-link
|
||||
+ .cm-formatting-link-string
|
||||
+ .cm-url
|
||||
+ .cm-link
|
||||
+ .cm-formatting-link-string {
|
||||
display: inline-block;
|
||||
font-size: 0.85em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
// change cursor for links if modifier keys pressed
|
||||
&.HyperMD-with-alt,
|
||||
&.HyperMD-with-ctrl {
|
||||
span.cm-url,
|
||||
span.cm-link,
|
||||
.cm-link + .CodeMirror-widget,
|
||||
span.cm-hashtag {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
span.hmd-link-icon {
|
||||
background: url(hypermd-image-link.png) no-repeat center center;
|
||||
width: 20px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
opacity: 0.4;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:after {
|
||||
content: ""; //remove default stuff
|
||||
}
|
||||
}
|
||||
|
||||
/// image
|
||||
|
||||
img.hmd-image {
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
&.hmd-image-loading,
|
||||
&.hmd-image-error {
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
background: #eeeeee url(hypermd-image-spin.gif) no-repeat center center;
|
||||
}
|
||||
&.hmd-image-error {
|
||||
background-image: url(hypermd-image-error.png);
|
||||
}
|
||||
}
|
||||
|
||||
/// math blocks
|
||||
|
||||
span.hmd-fold-math-placeholder {
|
||||
// when math is not fully rendered. a placeholder with raw Tex expression is presented
|
||||
@extend .cm-math;
|
||||
}
|
||||
|
||||
span.cm-math-2 {
|
||||
font-size: 1.1 * $fs;
|
||||
}
|
||||
|
||||
/// other Markdown stuff
|
||||
|
||||
span.cm-hmd-escape-backslash {
|
||||
color: #caa;
|
||||
}
|
||||
span.cm-hmd-escape-char {
|
||||
color: #666;
|
||||
}
|
||||
span.cm-hmd-footref {
|
||||
display: inline-block;
|
||||
font-size: 0.7em;
|
||||
vertical-align: text-top;
|
||||
background-color: rgba(#eee, 0.7);
|
||||
color: #999;
|
||||
margin-top: -0.2em;
|
||||
}
|
||||
|
||||
span.cm-inline-code {
|
||||
@extend %monospace;
|
||||
color: #922;
|
||||
font-size: 90%;
|
||||
|
||||
&:not(.cm-formatting):not(.cm-hmd-indented-code) {
|
||||
background-color: rgba(#eee, 0.5);
|
||||
border-radius: 4px;
|
||||
vertical-align: baseline;
|
||||
border: #ccc solid 1px;
|
||||
padding: 1px 0.4em;
|
||||
}
|
||||
|
||||
&.hmd-hidden-token {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// hyperMD stuff
|
||||
|
||||
/// hashtag
|
||||
|
||||
span.cm-hashtag {
|
||||
background-color: #999;
|
||||
background-color: rgba(#000, 0.3);
|
||||
color: #fff;
|
||||
font-size: $hashtag-fontsize;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: $hashtag-padding-y;
|
||||
padding-bottom: $hashtag-padding-y;
|
||||
|
||||
&.cm-hashtag-begin {
|
||||
padding-left: $hashtag-padding-x;
|
||||
border-radius: $hashtag-radius 0 0 $hashtag-radius;
|
||||
}
|
||||
|
||||
&.cm-hashtag-end {
|
||||
padding-right: $hashtag-padding-x;
|
||||
border-radius: 0 $hashtag-radius $hashtag-radius 0;
|
||||
}
|
||||
|
||||
&.cm-hmd-escape-backslash {
|
||||
color: #fcc;
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-formatting-hashtag {
|
||||
@extend %monospace;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/// hypermd/addon/insert-file
|
||||
|
||||
.hmd-file-uploading {
|
||||
outline: 2px dashed #ccc;
|
||||
outline-offset: -2px;
|
||||
animation: hmd-file-uploading-ani 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes hmd-file-uploading-ani {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.hmd-file-uploaded {
|
||||
outline: 2px solid #6c3;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/// hypermd/addon/click
|
||||
|
||||
.HyperMD-goback {
|
||||
width: 1px;
|
||||
}
|
||||
div.HyperMD-goback-button {
|
||||
padding-right: 15px; // not less than .CodeMirror-gutters padding-right
|
||||
border-radius: 0 10px 10px 0;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
background-color: lighten(#4078c0, 20%);
|
||||
color: #f7f7f7;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: transparent;
|
||||
text-align: left;
|
||||
&:before {
|
||||
position: absolute;
|
||||
padding-left: 5px;
|
||||
content: "Back";
|
||||
color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// hpyermd table
|
||||
|
||||
pre.HyperMD-table-row {
|
||||
> span {
|
||||
display: inline-block;
|
||||
border-top: $table-border-style;
|
||||
margin-right: 30px + $line-margin * 2; // leave space for hscroller
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-0,
|
||||
&.HyperMD-table-row-1,
|
||||
&.HyperMD-table-row-2 {
|
||||
> span {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-hmd-table-sep {
|
||||
@extend %monospace;
|
||||
width: $table-sep-width;
|
||||
text-align: center;
|
||||
box-sizing: content-box;
|
||||
font-weight: normal;
|
||||
|
||||
&.cm-hmd-table-sep-dummy {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "|";
|
||||
color: transparent;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
// border-left: $table-border-style;
|
||||
background: url(#{$table-sep-image}) repeat-y center 0px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-0 {
|
||||
// title row
|
||||
font-weight: 600;
|
||||
span.cm-strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.hmd-table-column-content {
|
||||
// do NOT delete padding, otherwise measuring will be inaccurate!
|
||||
// something about layout Grid and Block Formatting Contexts
|
||||
padding: calc($table-row1-height / 2) 1px;
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-1 {
|
||||
// :----: | :-----: | dash line
|
||||
line-height: $table-row1-height;
|
||||
|
||||
> span {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.hmd-table-column-content {
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-0 {
|
||||
> span {
|
||||
border-bottom: 0;
|
||||
}
|
||||
span.hmd-table-column-content {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-2 {
|
||||
span.hmd-table-column-content {
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// hypermd/addon/hover
|
||||
|
||||
&.CodeMirror div.HyperMD-hover {
|
||||
> .HyperMD-hover-content {
|
||||
background-color: #000;
|
||||
background-color: rgba(#000, 0.7);
|
||||
border: 0;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px;
|
||||
font-size: 95%;
|
||||
min-width: 200px;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
p {
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
code {
|
||||
@extend %monospace;
|
||||
display: inline-block;
|
||||
font-size: 0.87em;
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
}
|
||||
> .HyperMD-hover-indicator {
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 0px;
|
||||
margin-bottom: -5px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #000;
|
||||
border-top-color: rgba(#000, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/// fold-html
|
||||
|
||||
.hmd-fold-html-stub {
|
||||
@extend %monospace;
|
||||
display: inline-block;
|
||||
font-size: 67%;
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #999;
|
||||
padding: 0 0.2em;
|
||||
border-radius: 5px;
|
||||
margin: 0 0.5em;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
|
||||
&.omittable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.highlight {
|
||||
// for non-inline HTML stub. Remind user where the stub is.
|
||||
color: #fff;
|
||||
border-color: #c30;
|
||||
background: #f40;
|
||||
}
|
||||
}
|
||||
|
||||
.hmd-fold-html {
|
||||
position: relative;
|
||||
border: 1px solid #fff;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #999;
|
||||
|
||||
.hmd-fold-html-stub.omittable {
|
||||
display: block;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// fold-code
|
||||
|
||||
.hmd-fold-code-stub {
|
||||
@extend .hmd-fold-html-stub;
|
||||
}
|
||||
|
||||
.hmd-fold-code-image {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/// deal with floating elements
|
||||
|
||||
pre.HyperMD-header,
|
||||
pre.HyperMD-footnote,
|
||||
pre.HyperMD-codeblock,
|
||||
pre.HyperMD-hr {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/// hide-token
|
||||
span.hmd-hidden-token {
|
||||
&.cm-formatting-task {
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
pre.hmd-inactive-line {
|
||||
// background: aqua; // just for debug
|
||||
|
||||
&.HyperMD-table-row-1 {
|
||||
// table line |:--------:|:-------:|
|
||||
color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&.HyperMD-hr {
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.HyperMD-table-row-1 > span {
|
||||
background: url(#{$table-row-1-image}) repeat-x 0px center;
|
||||
}
|
||||
|
||||
&.HyperMD-table-row {
|
||||
span.cm-hmd-table-sep {
|
||||
color: transparent;
|
||||
&.cm-hmd-table-sep-dummy:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.cm-formatting-quote {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span.cm-hmd-escape-backslash,
|
||||
span.cm-formatting-header {
|
||||
font-size: 0 !important;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
span.cm-hmd-list-indent {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import { MarkdownViewer } from "../../components/MarkdownViewer";
|
|||
import { SimpleTextareaEditor } from "../../components/SimpleTextareaEditor";
|
||||
import styles from "./styles.module.scss";
|
||||
import { useStorage } from "../../../../modules/storage/StorageContext";
|
||||
import { HyperEditor } from "../../components/HyperEditor";
|
||||
|
||||
interface MarkdownEditorContainerProps {
|
||||
id: string;
|
||||
|
|
@ -13,6 +14,8 @@ interface MarkdownEditorContainerProps {
|
|||
remove: VoidCallback;
|
||||
}
|
||||
|
||||
const enableCoolEditor = true;
|
||||
|
||||
export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
|
||||
id,
|
||||
locked,
|
||||
|
|
@ -37,11 +40,15 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
|
|||
|
||||
const editor = (
|
||||
<EditorWrapper save={startEditing} remove={remove}>
|
||||
{enableCoolEditor ? (
|
||||
<HyperEditor value={value} onChange={onChange} />
|
||||
) : (
|
||||
<SimpleTextareaEditor
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
save={startEditing}
|
||||
/>
|
||||
)}
|
||||
</EditorWrapper>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { ModalPage } from "~/modules/modal/components/ModalPage";
|
|||
import { Modal } from "~/modules/modal/containers/Modal";
|
||||
import { SettingsContainer } from "../../containers/SettingsContainer";
|
||||
import { SettingsContext } from "../../context/SettingsContext";
|
||||
import { useSettings } from "../../hooks/useSettings";
|
||||
import { useSettings } from "../../hooks/usePersistSettings";
|
||||
import styles from "./styles.module.scss";
|
||||
|
||||
const SettingsProvider: FC<PropsWithChildren> = ({ children }) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue