chore(release): 0.8.0

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.8.0](https://github.com/Tencent/cherry-markdown/compare/v0.7.9...v0.8.0) (2022-09-01)
+
+
+### Features
+
+* 实现快捷键显示/隐藏toolbar [#268](https://github.com/Tencent/cherry-markdown/issues/268) ([10cce7d](https://github.com/Tencent/cherry-markdown/commit/10cce7defa5d07420fa5849a970b3ac0bc594a2a))
+* 通过快捷键来实现显示|隐藏 toolbar 或 设置按钮子菜单隐藏toolbar [#268](https://github.com/Tencent/cherry-markdown/issues/268) ([8c05a87](https://github.com/Tencent/cherry-markdown/commit/8c05a87a22f78b11ce7a50951e35b5e203123783))
+* 优化字体大小按钮的选区，并增加快捷键 ([901db75](https://github.com/Tencent/cherry-markdown/commit/901db75b5e058322f26a66c6163616348af5f421))
+* 优化toolbar插入内容时的选区逻辑 ([3b02d07](https://github.com/Tencent/cherry-markdown/commit/3b02d07dca4c562426787e77206397a073550d88))
+
+
+### Bug Fixes
+
+* [#301](https://github.com/Tencent/cherry-markdown/issues/301) ([#302](https://github.com/Tencent/cherry-markdown/issues/302)) ([f8bae8b](https://github.com/Tencent/cherry-markdown/commit/f8bae8bdb5fa5c981ee280f81e487f5de2a81ac0))
+* 暗黑模式下调色盘文字看不清楚 ([fef4aba](https://github.com/Tencent/cherry-markdown/commit/fef4aba6c54cb6dfb95d53a75f2b4e4f636810fb))
+* 无法使用Ctrl+Shift组合键 [#290](https://github.com/Tencent/cherry-markdown/issues/290) ([e07e9ac](https://github.com/Tencent/cherry-markdown/commit/e07e9acb0648333b292f97bde9ccc1afbd5b8679))
+* Cannot read properties of undefined (reading 'createBtn') [#303](https://github.com/Tencent/cherry-markdown/issues/303) ([#304](https://github.com/Tencent/cherry-markdown/issues/304)) ([1fc3689](https://github.com/Tencent/cherry-markdown/commit/1fc3689c8ef9b95fb16ec8ef216deb9a462d6d3f))
+* lint err Expected '!==' and instead saw '!=' ([90a410b](https://github.com/Tencent/cherry-markdown/commit/90a410bef5810b1814d3728d02652d0dc945c7a9))
+
 ### [0.7.9](https://github.com/Tencent/cherry-markdown/compare/v0.7.8...v0.7.9) (2022-08-12)
 
 

dist/cherry-markdown.css

@@ -2063,7 +2063,6 @@ div[data-type=codeBlock] .token.inserted {
 .cherry-toolbar-button {
   float: left;
   padding: 0 12px;
-  margin: 4px 0;
   height: 38px;
   color: #3f4a56;
   background: transparent;
@@ -2135,58 +2134,58 @@ div[data-type=codeBlock] .token.inserted {
 
 .cherry-bubble {
   position: absolute;
-  top: 100px;
-  left: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  font-size: 14px;
+  min-height: 35px;
+  min-width: 50px;
+  border: 1px solid #dfe6ee;
   background-color: #fff;
   box-shadow: 0 2px 15px -5px rgba(0, 0, 0, 0.5);
-  height: 35px;
-  min-width: 50px;
   border-radius: 3px;
-  border: 1px solid #dfe6ee;
   z-index: 999;
-  display: none;
+}
+.cherry-bubble.cherry-bubble--centered {
+  left: 50%;
+  transform: translateX(-50%);
 }
 .cherry-bubble .cherry-bubble-top,
 .cherry-bubble .cherry-bubble-bottom {
+  position: absolute;
+  left: 50%;
   width: 0;
   height: 0;
+  margin-left: -8px;
   border-left: 8px solid rgba(0, 0, 0, 0);
   border-right: 8px solid rgba(0, 0, 0, 0);
-  position: relative;
-  left: 50%;
-  margin-left: -8px;
 }
 .cherry-bubble .cherry-bubble-top {
+  top: 0;
+  transform: translateY(-100%);
   border-bottom: 8px solid #fff;
-  top: -8px;
 }
 .cherry-bubble .cherry-bubble-bottom {
+  bottom: 0;
+  transform: translateY(100%);
   border-top: 8px solid #fff;
-  bottom: -35px;
 }
 .cherry-bubble .cherry-toolbar-button {
-  line-height: 35px;
-  height: 100%;
-  overflow: hidden;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0 15px;
-  margin-top: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
   cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 .cherry-bubble .cherry-toolbar-button:hover {
   border-color: #dfe6ee;
   background-color: rgba(89, 128, 166, 0.05);
 }
 .cherry-bubble .cherry-toolbar-button.cherry-toolbar-split {
-  border-left: 1px solid #ddd;
-  width: 0;
-  padding: 0;
-  overflow: hidden;
+  height: 65%;
+  min-height: 22.75px;
 }
 [data-toolbar-theme=dark] .cherry-bubble {
   border-color: #20304b;
@@ -2201,15 +2200,72 @@ div[data-type=codeBlock] .token.inserted {
   background: rgba(255, 255, 255, 0.1);
 }
 [data-toolbar-theme=dark] .cherry-bubble .cherry-bubble-top {
-  border-bottom: 8px solid #20304b;
+  border-bottom-color: #20304b;
 }
 [data-toolbar-theme=dark] .cherry-bubble .cherry-bubble-bottom {
-  border-top: 8px solid #20304b;
+  border-top-color: #20304b;
 }
 [data-toolbar-theme=dark] .cherry-bubble .cherry-toolbar-button:hover {
   border-color: #20304b;
 }
 
+.cherry-switch-paste .switch-btn--bg {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  box-sizing: border-box;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  opacity: 0.3;
+  background-color: #5d9bfc;
+  border-radius: 2px;
+  transition: all 0.3s;
+}
+.cherry-switch-paste .cherry-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  text-align: center;
+}
+.cherry-switch-paste .cherry-toolbar-button:hover {
+  border-color: transparent;
+}
+.cherry-switch-paste[data-type=text] .cherry-text-btn {
+  color: #3f4a56;
+}
+.cherry-switch-paste[data-type=text] .cherry-md-btn {
+  color: #5d9bfc;
+}
+.cherry-switch-paste[data-type=md] .cherry-md-btn {
+  color: #3f4a56;
+}
+.cherry-switch-paste[data-type=md] .cherry-text-btn {
+  color: #5d9bfc;
+}
+.cherry-switch-paste[data-type=md] .switch-btn--bg {
+  left: 50%;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste .switch-btn--bg {
+  background-color: #fff;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste[data-type=text] .cherry-text-btn {
+  color: #d7e6fe;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste[data-type=text] .cherry-md-btn {
+  color: #fff;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .cherry-md-btn {
+  color: #d7e6fe;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .cherry-text-btn {
+  color: #fff;
+}
+[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .switch-btn--bg {
+  left: 50%;
+}
+
 .cherry-floatmenu {
   z-index: 100;
   display: none;
@@ -2433,6 +2489,10 @@ div[data-type=codeBlock] .token.inserted {
 .cherry-color-wrap h3 {
   font-size: 12px;
   margin: 0px;
+  font-weight: 400;
+}
+[data-toolbar-theme=dark] .cherry-color-wrap h3 {
+  color: #d7e6fe;
 }
 .cherry-color-wrap .cherry-color-text {
   float: left;
@@ -2455,63 +2515,6 @@ div[data-type=codeBlock] .token.inserted {
   border: 1px solid #000;
 }
 
-.cherry-switch-paste {
-  margin-left: -112px;
-  left: 50%;
-  box-sizing: content-box;
-}
-.cherry-switch-paste .switch-btn--bg {
-  transition: all 0.3s;
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  box-sizing: border-box;
-  z-index: -1;
-  left: -1px;
-  opacity: 0.3;
-  background-color: #5d9bfc;
-}
-.cherry-switch-paste .cherry-toolbar-button {
-  width: 80px;
-  text-align: center;
-}
-.cherry-switch-paste .cherry-toolbar-button:hover {
-  border-color: transparent;
-}
-.cherry-switch-paste[data-type=text] .cherry-text-btn {
-  color: #3f4a56;
-}
-.cherry-switch-paste[data-type=text] .cherry-md-btn {
-  color: #5d9bfc;
-}
-.cherry-switch-paste[data-type=md] .cherry-md-btn {
-  color: #3f4a56;
-}
-.cherry-switch-paste[data-type=md] .cherry-text-btn {
-  color: #5d9bfc;
-}
-.cherry-switch-paste[data-type=md] .switch-btn--bg {
-  left: 50%;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste .switch-btn--bg {
-  background-color: #fff;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste[data-type=text] .cherry-text-btn {
-  color: #d7e6fe;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste[data-type=text] .cherry-md-btn {
-  color: #fff;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .cherry-md-btn {
-  color: #d7e6fe;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .cherry-text-btn {
-  color: #fff;
-}
-[data-toolbar-theme=dark] .cherry-switch-paste[data-type=md] .switch-btn--bg {
-  left: 50%;
-}
-
 .Cherry-Math svg {
   max-width: 100%;
 }
@@ -2548,7 +2551,9 @@ div[data-type=codeBlock] .token.inserted {
   padding: 1px 4px;
   border-radius: 3px;
   cursor: pointer;
-} /* BASICS */
+}
+
+/* BASICS */
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;