cherry-muse 1.0.1

package/src/sass/components/preview.scss

@@ -0,0 +1,71 @@
+@use "../core/AutoLink";
+@use "../core/Link";
+@use "../core/Paragraph";
+@use "../core/List";
+@use "../core/Blockquote";
+@use "../core/CodeBlock";
+@use "../core/InlineCode";
+@use "../core/Header";
+@use "../core/Panel";
+@use "../core/Detail";
+@use "../core/Emphasis";
+@use "../core/Image";
+@use "../core/Card";
+@use "../core/Hr";
+@use "../core/Table";
+@use "../core/Suggester";
+@use "../core/Color";
+@use "../core/Emoji";
+@use "../core/Sub";
+@use "../core/Sup";
+@use "../core/Toc";
+@use "../core/Size";
+@use "../core/Mark";
+@use "../core/Badge";
+@use "../core/InlineMath";
+@use "../core/Footnote";
+@use "../core/Iframe";
+@use "../core/FrontMatterVars";
+.cherry-previewer {
+  padding: 1.25rem  2rem;
+  border-left: 0.125rem solid var(--border-color);
+  width: 50%;
+  box-sizing: border-box;
+  background-color: var(--bg-color);
+  min-height: auto;
+  overflow-y: auto;
+  -webkit-print-color-adjust: exact;
+
+
+  &.cherry-previewer--hidden {
+    width: 0;
+    display: none;
+  }
+
+  &.cherry-previewer--full {
+    width: 100%;
+    border-left:unset;
+  }
+
+  .cherry-list__upper-roman {
+    list-style: upper-roman;
+  }
+
+  .cherry-list__lower-greek {
+    list-style: lower-greek;
+  }
+
+  .cherry-list__cjk-ideographic {
+    list-style: cjk-ideographic;
+  }
+
+  .cherry-list__circle {
+    list-style: circle;
+  }
+
+  .cherry-list__square {
+    list-style: square;
+  }
+}
+
+

package/src/sass/components/prism.scss

@@ -0,0 +1,142 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+cobol+coffeescript+concurnas+csp+coq+crystal+css-extras+csv+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+jsx+tsx+reason+regex+rego+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+wolfram+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #9a6e3a;
+
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function,
+.token.class-name {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+

package/src/sass/components/stats.scss

@@ -0,0 +1,32 @@
+.cherry{
+.cherry-editor-stats {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    font-size: 0.75rem;
+    color: var(--text-color);
+    background: var(--bg-color);
+    padding: 0.125rem 0.5rem;
+  box-sizing: border-box;
+    z-index: 100;
+    user-select: none;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  width: 100%;
+  opacity: 1;
+  }
+  
+  .cherry-stats-item {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  
+  .cherry-stats-item .material-symbols-outlined {
+    font-size: 1rem;
+    color: var(--text-color);
+    margin: 0;
+    transform: none;
+  }
+}

package/src/sass/components/toc.scss

@@ -0,0 +1,184 @@
+.cherry{
+  .cherry-flex-toc {
+    z-index: 11;
+    position: absolute;
+    width: 10rem;
+    height: calc(100% - 12.75rem);
+    max-height: 37.5rem;
+    right: 0;
+    top: 12.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: var(--bg-on-bg-color);
+    margin-right: 0.5rem;
+    box-sizing: border-box;
+    user-select: none;
+    box-shadow: 0 0.3125rem 0.6875rem #33333333;
+    border-radius: 0.625rem;
+    transition: all 0.3s;
+    border-bottom: 1px dashed var(--border-color);
+    &.cherry-flex-toc__fixed {
+      position: fixed;
+    }
+    &:hover {
+      background-color: var(--bg-color);
+      width: 260px;
+    }
+    .cherry-toc-head {
+      border-bottom: 1px dashed var(--border-color);
+      padding: 0.3125rem;
+      .cherry-toc-title {
+        font-size: 1rem;
+        font-weight: bold;
+        padding-left: 0.3125rem;
+        color: var(--text-color);
+      }
+      .ch-icon-chevronsLeft {
+        display: none;
+      }
+      .ch-icon-chevronsRight,
+      .ch-icon-chevronsLeft {
+        padding: 0.3125rem;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: none;
+        margin: 0;
+        font-size: 1rem;
+        cursor: pointer;
+      }
+      i {
+        cursor: pointer;
+        padding: 0.3125rem 0.3125rem 0;
+        &:hover {
+          color: var(--primary-color);
+        }
+      }
+    }
+    .cherry-toc-list {
+      overflow-y: auto;
+      height: calc(100% - 3.8rem);
+      overflow-x: hidden;
+      width: 100%;
+      padding-bottom: 0.625rem;
+      .cherry-toc-one-a {
+        display: block;
+        text-decoration: none;
+        color: var(--text-color);
+        border-left: 0.3125rem solid var(--border-color);
+        height: 1.75rem;
+        line-height: 1.75rem;
+        transition: all 0.3s;
+        padding-left: 0.625rem;
+        overflow: hidden;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        &.current {
+          border-left-color: var(--primary-color);
+          color: var(--primary-color);
+        }
+        &:hover {
+          border-left-color: var(--primary-color);
+          color: var(--primary-color);
+        }
+      }
+      .cherry-toc-one-a__1 {
+        font-weight: bold;
+      }
+      .cherry-toc-one-a__2 {
+        padding-left: 1.25rem;
+      }
+      .cherry-toc-one-a__3 {
+        padding-left: 2.5rem;
+      }
+      .cherry-toc-one-a__4 {
+        padding-left: 3.75rem;
+      }
+      .cherry-toc-one-a__5 {
+        padding-left: 5rem;
+      }
+    }
+    &.cherry-flex-toc__pure {
+      width: 1.875rem;
+      height: calc(100% - 12.75rem);
+      max-height: 37.5rem;
+      background: transparent;
+      box-shadow: none;
+      border-radius: 0;
+      .cherry-toc-head {
+        height: 1.5625rem;
+        border-bottom: 1px dashed transparent;
+        .cherry-toc-title {
+          display: none;
+        }
+        .ch-icon-chevronsRight {
+          display: none;
+        }
+        .ch-icon-chevronsLeft {
+          display: inline;
+        }
+      }
+      .cherry-toc-list {
+        height: calc(100% - 1.5625rem);
+        padding-left: 0.4375rem;
+        .cherry-toc-one-a {
+          overflow: hidden;
+          width: 0;
+          margin-bottom: 0.1875rem;
+          height: 0.3125rem;
+          border-left-width: 1.125rem;
+        }
+      }
+    }
+
+    &.auto-num {
+      .cherry-toc-list {
+        counter-reset: toclevel1;
+
+        .cherry-toc-one-a__1 {
+          counter-reset: toclevel2;
+        }
+        .cherry-toc-one-a__2 {
+          counter-reset: toclevel3;
+        }
+        .cherry-toc-one-a__3 {
+          counter-reset: toclevel4;
+        }
+        .cherry-toc-one-a__4 {
+          counter-reset: toclevel5;
+        }
+        .cherry-toc-one-a__5 {
+          counter-reset: toclevel6;
+        }
+        .cherry-toc-one-a__1:before {
+          counter-increment: toclevel1;
+          content: counter(toclevel1) '. ';
+        }
+        .cherry-toc-one-a__2:before {
+          counter-increment: toclevel2;
+          content: counter(toclevel1) '.' counter(toclevel2) '. ';
+        }
+        .cherry-toc-one-a__3:before {
+          counter-increment: toclevel3;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '. ';
+        }
+        .cherry-toc-one-a__4:before {
+          counter-increment: toclevel4;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '. ';
+        }
+        .cherry-toc-one-a__5:before {
+          counter-increment: toclevel5;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+          counter(toclevel5) '. ';
+        }
+        .cherry-toc-one-a__6:before {
+          counter-increment: toclevel5;
+          content: counter(toclevel1) '.' counter(toclevel2) '.' counter(toclevel3) '.' counter(toclevel4) '.'
+          counter(toclevel5) '.' counter(toclevel6) '. ';
+        }
+      }
+    }
+  }
+}

package/src/sass/components/toolbar.scss

@@ -0,0 +1,117 @@
+.cherry{
+  --toolbar-height: 3rem;
+  --toolbar-fontsize: 0.9rem;
+  .cherry-toolbar {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1.2rem;
+    height: var(--toolbar-height);
+    font-size: var(--toolbar-fontsize);
+    line-height: 2.8;
+    flex-basis: 100%;
+    box-sizing: border-box;
+    z-index: 2;
+    user-select: none;
+  //  box-shadow: var(--shadow-bold);
+    background: var(--bg-color);
+    overflow: hidden;
+
+    .toolbar-left,
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+      height: var(--toolbar-height);
+    }
+
+    .toolbar-left {
+      flex: 1 1 auto;
+      margin-right: 1.2rem;
+      position: relative;
+      overflow-x: auto;
+      overflow-y: hidden;
+      mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
+      -webkit-mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent 100%);
+
+      &::-webkit-scrollbar {
+        height: 4px;
+      }
+      
+      &::-webkit-scrollbar-thumb {
+        background: var(--hover-bg-color);
+        border-radius: var(--border-radius);
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      
+      .cherry-toolbar-button {
+        flex-shrink: 0;
+      }
+
+      padding-right: 2rem;
+    }
+
+    .toolbar-right {
+      flex: 0 0 auto;
+      flex-direction: row-reverse;
+      margin-left: 0.8rem;
+      box-sizing: border-box;
+    }
+
+    &.preview-only {
+      .cherry-toolbar-button {
+        display: none;
+      }
+
+      .cherry-toolbar-preview {
+        display: flex;
+      }
+    }
+
+    &-button {
+      float: left;
+      padding: 0 0.4rem;
+      height: 3rem;
+      color: var(--text-color);
+      background: transparent;
+      border: 1px solid transparent;
+      -webkit-transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s, border-color ease-in-out 0.15s;
+      transition: background-color ease-in-out 0.15s, color ease-in-out 0.15s, border-color ease-in-out 0.15s;
+      cursor: pointer;
+      font-style: normal;
+      display: flex;
+      align-items: center;
+      
+      i.material-symbols-outlined {
+        font-size: 1.4rem;
+        margin: 0 0.3rem;
+        position: static;
+        transform: none;
+      }
+
+      &:hover {
+        color: var(--hover-text-color);
+        background: var(--hover-bg-color);
+      }
+
+      &.cherry-toolbar-split {
+        font-size: 0;
+        height: 1.5rem;
+        padding: 0;
+        margin: 0.8rem 0.4rem;
+        border: 0.1rem solid transparent;
+        border-left-color: var(--border-color);
+        pointer-events: none;
+        overflow: hidden;
+        opacity: 0.5;
+      }
+
+      &.disabled {
+        color: var(--disabled-text-color);
+      }
+    }
+  }
+}

package/src/sass/core/AutoLink.scss

@@ -0,0 +1,20 @@
+.cherry-previewer{
+  a {
+    color: var(--primary-color);
+    position: relative;
+    text-decoration: none;
+
+    &[target='_blank'] {
+      padding: 0 2px;
+
+      &::after {
+        margin: 0 2px;
+      }
+    }
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+}
+

package/src/sass/core/Badge.scss

@@ -0,0 +1,116 @@
+.cherry-previewer {
+  --badge-bg-color: var(--info-bg-color);
+  --badge-text-color: var(--info-title-color);
+  --badge-padding: 0.1rem 0.25rem;
+  --badge-font-size: 0.8rem;
+  --badge-line-height: 1.2;
+  --badge-border-color: var(--info-border-color);
+
+  .cherry-badge {
+    display: inline-block;
+    padding: var(--badge-padding);
+    background: var(--badge-bg-color);
+    color: var(--badge-text-color);
+    font-size: var(--badge-font-size);
+    line-height: var(--badge-line-height);
+    border: 1px solid  var(--badge-border);
+    border-radius: var(--border-radius);
+    $panel-types: important, info, note, tip, warning, danger;
+    @each $type in $panel-types {
+      &.cherry-badge-#{$type} {
+        border-color: var(--badge-#{$type}-border-color);
+        background: var(--badge-#{$type}-bg-color);
+        color: var(--badge-#{$type}-title-color);
+      }
+    }
+
+    &.cherry-badge-top {
+      vertical-align: top;
+      margin-bottom: 4px; // 调整徽章与下方元素的间距
+    }
+
+    &.cherry-badge-center {
+      vertical-align: middle;
+    }
+
+    &.cherry-badge-bottom {
+      vertical-align: bottom;
+      margin-top: 4px; // 调整徽章与上方元素的间距
+    }
+  }
+
+
+}
+
+.cherry-editor {
+  .cm-s-default{
+    .cm-badge-container {
+      color: var(--codemirror-operator-color);
+    }
+    .cm-badge-position {
+      color: var(--codemirror-operator-inner-color);
+    }
+    .cm-badge-text {
+      color: var(--codemirror-operator-text-color);
+    }
+  }
+}
+
+:root {
+  // info 蓝色系
+  --badge-info-border-color: #4cb3d4;
+  --badge-info-bg-color: #2171c1;
+  --badge-info-title-color: #ffffff;
+
+  // important 紫色系
+  --badge-important-border-color: #a371f7;
+  --badge-important-bg-color: #6a1b9a;
+  --badge-important-title-color: #ffffff;
+
+  // note 灰色系
+  --badge-note-border-color: #9e9e9e;
+  --badge-note-bg-color: #616161;
+  --badge-note-title-color: #ffffff;
+
+  // tip 绿色系
+  --badge-tip-border-color: #4caf50;
+  --badge-tip-bg-color: #2e7d32;
+  --badge-tip-title-color: #ffffff;
+
+  // warning 橙色系
+  --badge-warning-border-color: #ff9800;
+  --badge-warning-bg-color: #e65100;
+  --badge-warning-title-color: #ffffff;
+
+  // danger 红色系
+  --badge-danger-border-color: #f44336;
+  --badge-danger-bg-color: #c62828;
+  --badge-danger-title-color: #ffffff;
+}
+
+// 暗色主题下颜色稍微调暗一些
+.theme__dark {
+  // info 蓝色系
+  --badge-info-bg-color: #1565c0;
+  --badge-info-title-color: #e3f2fd;
+
+  // important 紫色系
+  --badge-important-bg-color: #4a148c;
+  --badge-important-title-color: #f3e5f5;
+
+  // note 灰色系
+  --badge-note-bg-color: #424242;
+  --badge-note-title-color: #f5f5f5;
+
+  // tip 绿色系
+  --badge-tip-bg-color: #1b5e20;
+  --badge-tip-title-color: #e8f5e9;
+
+  // warning 橙色系
+  --badge-warning-bg-color: #bf360c;
+  --badge-warning-title-color: #fff3e0;
+
+  // danger 红色系
+  --badge-danger-bg-color: #b71c1c;
+  --badge-danger-title-color: #ffebee;
+}

package/src/sass/core/Blockquote.scss

@@ -0,0 +1,12 @@
+.cherry-previewer {
+  blockquote {
+    border-left: 0.5rem solid var(--blur-text-color);
+    padding: 1rem 1rem;
+    color: var(--panel-border-color);
+    margin:  1rem 0;
+    background: var(--hover-bg-color);
+  }
+  blockquote blockquote {
+    padding-right: 0;
+  }
+}