@blocklet/editor 2.4.90 → 2.4.92

package/lib/main/index.css

@@ -1,531 +1,3 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-.editor-dev-button {
-  position: relative;
-  display: block;
-  width: 40px;
-  height: 40px;
-  font-size: 12px;
-  border-radius: 20px;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
-  background-color: #444;
-}
-
-.editor-dev-button::after {
-  content: '';
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  bottom: 10px;
-  left: 10px;
-  display: block;
-  background-size: contain;
-  filter: invert(1);
-}
-
-.editor-dev-button:hover {
-  background-color: #555;
-}
-
-.editor-dev-button.active {
-  background-color: rgb(233, 35, 35);
-}
-
-.test-recorder-toolbar {
-  display: flex;
-}
-
-.test-recorder-button {
-  position: relative;
-  display: block;
-  width: 32px;
-  height: 32px;
-  font-size: 10px;
-  padding: 6px 6px;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
-  outline: none;
-  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
-  background-color: #222;
-  transition: box-shadow 50ms ease-out;
-}
-
-.test-recorder-button:active {
-  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
-}
-
-.test-recorder-button + .test-recorder-button {
-  margin-left: 4px;
-}
-
-.test-recorder-button::after {
-  content: '';
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  bottom: 8px;
-  left: 8px;
-  display: block;
-  background-size: contain;
-  filter: invert(1);
-}
-
-#options-button {
-  position: fixed;
-  left: 20px;
-  bottom: 20px;
-}
-
-#test-recorder-button {
-  position: fixed;
-  left: 70px;
-  bottom: 20px;
-}
-
-#paste-log-button {
-  position: fixed;
-  left: 120px;
-  bottom: 20px;
-}
-
-#options-button::after {
-  background-image: url(images/icons/gear.svg);
-}
-
-#test-recorder-button::after {
-  background-image: url(images/icons/journal-code.svg);
-}
-
-#paste-log-button::after {
-  background-image: url(images/icons/clipboard.svg);
-}
-
-#test-recorder-button-snapshot {
-  margin-right: auto;
-}
-
-#test-recorder-button-snapshot::after {
-  background-image: url(images/icons/camera.svg);
-}
-
-#test-recorder-button-copy::after {
-  background-image: url(images/icons/clipboard.svg);
-}
-
-#test-recorder-button-download::after {
-  background-image: url(images/icons/download.svg);
-}
-
-.typeahead-popover {
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-  z-index: 1;
-}
-
-.typeahead-popover ul {
-  padding: 0;
-  list-style: none;
-  margin: 0;
-  border-radius: 8px;
-  max-height: 280px;
-  overflow-y: scroll;
-}
-
-.typeahead-popover ul::-webkit-scrollbar {
-  display: none;
-}
-
-.typeahead-popover ul {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  padding: 8px 0;
-}
-
-.typeahead-popover ul li {
-  margin: 0;
-  min-width: 180px;
-  font-size: 14px;
-  outline: none;
-  cursor: pointer;
-}
-
-.typeahead-popover li {
-  margin: 0 8px 0 8px;
-  padding: 8px;
-  cursor: pointer;
-  line-height: 16px;
-  font-size: 15px;
-  display: flex;
-  align-content: center;
-  flex-direction: row;
-  flex-shrink: 0;
-  border: 0;
-}
-
-.typeahead-popover li.active {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-}
-
-.typeahead-popover li .text {
-  display: flex;
-  line-height: 20px;
-  flex-grow: 1;
-  min-width: 150px;
-}
-
-.typeahead-popover li .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.component-picker-menu {
-  width: 200px;
-}
-
-.mentions-menu {
-  width: 250px;
-}
-
-.auto-embed-menu {
-  width: 200px;
-}
-
-.emoji-menu {
-  width: 200px;
-}
-
-i.markdown {
-  background-image: url(images/icons/markdown.svg);
-}
-
-i.import {
-  background-image: url(images/icons/upload.svg);
-}
-
-i.export {
-  background-image: url(images/icons/download.svg);
-}
-
-i.diagram-2 {
-  background-image: url(images/icons/diagram-2.svg);
-}
-
-i.user {
-  background-image: url(images/icons/user.svg);
-}
-
-i.equation {
-  background-image: url(images/icons/plus-slash-minus.svg);
-}
-
-i.gif {
-  background-image: url(images/icons/filetype-gif.svg);
-}
-
-i.copy {
-  background-image: url(images/icons/copy.svg);
-}
-
-i.success {
-  background-image: url(images/icons/success.svg);
-}
-
-i.prettier {
-  background-image: url(images/icons/prettier.svg);
-}
-
-i.prettier-error {
-  background-image: url(images/icons/prettier-error.svg);
-}
-
-.link-editor .button.active,
-.toolbar .button.active {
-  background-color: rgb(223, 232, 250);
-}
-
-.link-editor .link-input {
-  display: block;
-  width: calc(100% - 24px);
-  box-sizing: border-box;
-  margin: 8px 12px;
-  padding: 8px 12px;
-  border-radius: 15px;
-  font-size: 15px;
-  border: 0;
-  outline: 0;
-  position: relative;
-  font-family: inherit;
-}
-
-.link-editor div.link-edit {
-  width: 35px;
-  vertical-align: -0.25em;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.link-editor .link-input a {
-  text-decoration: none;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-right: 30px;
-  text-overflow: ellipsis;
-}
-
-.link-editor .link-input a:hover {
-  text-decoration: underline;
-}
-
-.link-editor .font-size-wrapper,
-.link-editor .font-family-wrapper {
-  display: flex;
-  margin: 0 4px;
-}
-
-.link-editor select {
-  padding: 6px;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.075);
-  border-radius: 4px;
-}
-
-.mention {
-  color: #666;
-}
-
-.mention:hover {
-  text-decoration: underline;
-}
-
-.mention:before {
-  display: inline-block;
-  content: '@';
-}
-
-.mention-typeahead-item-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 15px;
-  background-size: cover;
-}
-
-/* .mention-popover {
-  position: absolute;
-  left: 0;
-  top: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 16px;
-  max-width: 120px;
-  background-color: #fff;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 0 5px;
-  border-radius: 5px;
-  animation: mention-popover-anime ease 0.2s;
-}
-
-@keyframes mention-popover-anime {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.mention-popover-avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background-size: cover;
-}
-
-.mention-popover-name {
-  margin-top: 4px;
-  font-size: 14px;
-  color: rgb(50, 50, 50);
-} */
-
-@media screen and (min-width: 1100px) {
-  .block-controls {
-    width: 160px;
-  }
-}
-
-#block-controls {
-  display: block;
-  position: absolute;
-  right: 10px;
-  width: 32px;
-  height: 32px;
-  box-sizing: border-box;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-  top: 16px;
-  z-index: 10;
-  border-radius: 8px;
-  border: 1px solid rgb(206, 208, 212);
-  overflow: hidden;
-}
-
-#block-controls button {
-  border: 1px solid white;
-  background-color: #fff;
-  display: block;
-  transition: background-color 0.1s ease;
-  cursor: pointer;
-  outline: none;
-  border-radius: 8px;
-  padding: 3px;
-}
-
-#block-controls button:hover {
-  background-color: #efefef;
-}
-
-#block-controls button:focus-visible {
-  border-color: blue;
-}
-
-#block-controls span.block-type {
-  background-size: contain;
-  display: block;
-  width: 18px;
-  height: 18px;
-  margin: 2px;
-}
-
-.characters-limit {
-  color: #888;
-  font-size: 12px;
-  text-align: right;
-  display: block;
-  position: absolute;
-  left: 12px;
-  bottom: 5px;
-}
-
-.characters-limit.characters-limit-exceeded {
-  color: red;
-}
-
-.dropdown {
-  z-index: 10001;
-  display: block;
-  position: fixed;
-  border-radius: 8px;
-  min-height: 40px;
-}
-
-.dropdown .item {
-  padding: 8px;
-  cursor: pointer;
-  line-height: 16px;
-  font-size: 15px;
-  display: flex;
-  align-content: center;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: space-between;
-  border: 0;
-  max-width: 250px;
-  min-width: 100px;
-}
-
-.dropdown .item.fontsize-item,
-.dropdown .item.fontsize-item .text {
-  min-width: unset;
-}
-
-.dropdown .item .active {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-}
-
-.dropdown .item:first-child {
-  margin-top: 8px;
-}
-
-.dropdown .item:last-child {
-  margin-bottom: 8px;
-}
-
-.dropdown .item .text {
-  display: flex;
-  line-height: 20px;
-  flex-grow: 1;
-  min-width: 150px;
-}
-
-.dropdown .item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 12px;
-  line-height: 16px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.dropdown .divider {
-  width: auto;
-  margin: 4px 8px;
-  height: 1px;
-}
-
-.dropdown-button-text {
-  margin-left: 8px;
-}
-
-@media screen and (max-width: 1100px) {
-  .dropdown-button-text {
-    display: none !important;
-  }
-  .font-size .dropdown-button-text {
-    display: flex !important;
-  }
-  .code-language .dropdown-button-text {
-    display: flex !important;
-  }
-}
-
-.switches {
-  z-index: 6;
-  position: fixed;
-  left: 10px;
-  bottom: 70px;
-  animation: slide-in 0.4s ease;
-}
-
 @keyframes slide-in {
   0% {
     opacity: 0;
@@ -537,198 +9,6 @@ i.prettier-error {
   }
 }
 
-.switch {
-  display: block;
-  color: #444;
-  margin: 5px 0;
-  background-color: rgba(238, 238, 238, 0.7);
-  padding: 5px 10px;
-  border-radius: 10px;
-}
-
-#rich-text-switch {
-  right: 0;
-}
-
-#character-count-switch {
-  right: 130px;
-}
-
-.switch label {
-  margin-right: 5px;
-  line-height: 24px;
-  width: 100px;
-  font-size: 14px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.switch button {
-  background-color: rgb(206, 208, 212);
-  height: 24px;
-  box-sizing: border-box;
-  border-radius: 12px;
-  width: 44px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  outline: none;
-  cursor: pointer;
-  transition: background-color 0.1s;
-  border: 2px solid transparent;
-}
-
-.switch button:focus-visible {
-  border-color: blue;
-}
-
-.switch button span {
-  top: 0px;
-  left: 0px;
-  display: block;
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  border-radius: 12px;
-  background-color: white;
-  transition: transform 0.2s;
-}
-
-.switch button[aria-checked='true'] {
-  background-color: rgb(24, 119, 242);
-}
-
-.switch button[aria-checked='true'] span {
-  transform: translateX(20px);
-}
-
-.emoji {
-  color: transparent;
-  caret-color: rgb(5, 5, 5);
-  background-size: 16px 16px;
-  background-position: center;
-  background-repeat: no-repeat;
-  vertical-align: middle;
-  margin: 0 -1px;
-}
-
-.emoji-inner {
-  padding: 0 0.15em;
-}
-
-.emoji-inner::selection {
-  color: transparent;
-  background-color: rgba(150, 150, 150, 0.4);
-}
-
-.emoji-inner::moz-selection {
-  color: transparent;
-  background-color: rgba(150, 150, 150, 0.4);
-}
-
-.emoji.happysmile {
-  background-image: url(images/emoji/1F642.png);
-}
-
-.emoji.veryhappysmile {
-  background-image: url(images/emoji/1F600.png);
-}
-
-.emoji.unhappysmile {
-  background-image: url(images/emoji/1F641.png);
-}
-
-.emoji.heart {
-  background-image: url(images/emoji/2764.png);
-}
-
-.keyword {
-  color: rgb(241, 118, 94);
-  font-weight: bold;
-}
-
-.actions {
-  position: absolute;
-  text-align: right;
-  padding: 10px;
-  bottom: 0;
-  right: 0;
-}
-
-.actions.tree-view {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 15px;
-  width: 15px;
-  vertical-align: -0.25em;
-}
-
-.action-button {
-  background-color: #eee;
-  border: 0;
-  padding: 8px 12px;
-  position: relative;
-  margin-left: 5px;
-  border-radius: 15px;
-  color: #222;
-  cursor: pointer;
-  display: flex;
-}
-
-.action-button .MuiLoadingButton-loadingIndicator {
-  position: relative;
-  left: 0;
-  margin-right: 8px;
-}
-
-.action-button:hover {
-  background-color: #ddd;
-  color: #000;
-}
-
-.action-button-mic.active {
-  animation: mic-pulsate-color 3s infinite;
-}
-button.action-button:disabled {
-  cursor: not-allowed;
-}
-
-.table-cell-action-button-container {
-  position: absolute;
-  z-index: 3;
-  top: 0;
-  left: 0;
-  will-change: transform;
-}
-.table-cell-action-button-container.table-cell-action-button-container--active {
-  pointer-events: auto;
-  opacity: 1;
-}
-.table-cell-action-button-container.table-cell-action-button-container--inactive {
-  pointer-events: none;
-  opacity: 0;
-}
-
-.table-cell-action-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 0;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  border-radius: 15px;
-  color: #222;
-  display: inline-block;
-  cursor: pointer;
-  opacity: 0.75;
-}
-
 @keyframes mic-pulsate-color {
   0% {
     background-color: #ffdcdc;
@@ -741,60 +21,6 @@ button.action-button:disabled {
   }
 }
 
-.debug-timetravel-panel {
-  overflow: hidden;
-  padding: 0 0 10px 0;
-  margin: auto;
-  display: flex;
-}
-
-.debug-timetravel-panel-slider {
-  padding: 0;
-  flex: 8;
-}
-
-.debug-timetravel-panel-button {
-  padding: 0;
-  border: 0;
-  background: none;
-  flex: 1;
-  color: #fff;
-  font-size: 12px;
-}
-
-.debug-timetravel-panel-button:hover {
-  text-decoration: underline;
-}
-
-.debug-timetravel-button {
-  border: 0;
-  padding: 0;
-  font-size: 12px;
-  top: 10px;
-  right: 15px;
-  position: absolute;
-  background: none;
-  color: #fff;
-}
-
-.debug-timetravel-button:hover {
-  text-decoration: underline;
-}
-
-.connecting {
-  font-size: 15px;
-  color: #999;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
-  user-select: none;
-  white-space: nowrap;
-  display: inline-block;
-  pointer-events: none;
-}
-
 .ltr {
   text-align: left;
 }
@@ -803,131 +29,6 @@ button.action-button:disabled {
   text-align: right;
 }
 
-@container toolbar (max-width: 700px) {
-  .toolbar-item.font-size,
-  .toolbar-item.code,
-  .toolbar-item.alignment,
-  .toolbar-item.link,
-  .toolbar-item.aide,
-  .toolbar-item.color-picker,
-  .toolbar-item.text-format-additional {
-    display: none !important;
-  }
-}
-
-.toolbar {
-  display: flex;
-  margin-bottom: 1px;
-  padding: 4px;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  vertical-align: middle;
-  overflow: auto;
-  container: toolbar / inline-size;
-}
-
-.toolbar button.toolbar-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 8px;
-  padding: 8px;
-  cursor: pointer;
-  vertical-align: middle;
-  flex-shrink: 0;
-  align-items: center;
-}
-
-.toolbar button.toolbar-item:disabled {
-  cursor: not-allowed;
-}
-
-.toolbar button.toolbar-item.spaced {
-  margin-right: 4px;
-}
-
-.toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
-
-.toolbar button.toolbar-item:disabled .icon,
-.toolbar button.toolbar-item:disabled .text,
-.toolbar button.toolbar-item:disabled i.format,
-.toolbar button.toolbar-item:disabled .chevron-down {
-  opacity: 0.2;
-}
-
-.toolbar button.toolbar-item.active i {
-  opacity: 1;
-}
-
-.toolbar .toolbar-item.font-family .text {
-  display: block;
-  max-width: 40px;
-}
-
-.toolbar .code-language {
-  width: 150px;
-}
-
-.toolbar .toolbar-item .text {
-  display: flex;
-  line-height: 20px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  height: 20px;
-  text-align: left;
-}
-
-.toolbar .toolbar-item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.toolbar .toolbar-item .iconify {
-  display: flex;
-  width: 20px;
-  height: 20px;
-}
-
-.toolbar i.chevron-down {
-  margin-top: 3px;
-  margin-left: auto;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  user-select: none;
-}
-
-.toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
-}
-
-.toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
-}
-
 .excalidraw-button {
   border: 0;
   padding: 0;
@@ -942,15 +43,6 @@ button.action-button:disabled {
   user-select: none;
 }
 
-#typeahead-menu {
-  pointer-events: none;
-  z-index: 10001;
-}
-
-#typeahead-menu > * {
-  pointer-events: auto;
-}
-
 .tree-view-output {
   display: block;
   background: #222;
@@ -965,46 +57,6 @@ button.action-button:disabled {
   margin: 20px;
 }
 
-.debug-timetravel-panel {
-  overflow: hidden;
-  padding: 0 0 10px 0;
-  margin: auto;
-  display: flex;
-}
-
-.debug-timetravel-panel-slider {
-  padding: 0;
-  flex: 8;
-}
-
-.debug-timetravel-panel-button {
-  padding: 0;
-  border: 0;
-  background: none;
-  flex: 1;
-  color: #fff;
-  font-size: 12px;
-}
-
-.debug-timetravel-panel-button:hover {
-  text-decoration: underline;
-}
-
-.debug-timetravel-button {
-  border: 0;
-  padding: 0;
-  font-size: 12px;
-  top: 10px;
-  right: 15px;
-  position: absolute;
-  background: none;
-  color: #fff;
-}
-
-.debug-timetravel-button:hover {
-  text-decoration: underline;
-}
-
 .github-node-container,
 .inline-embed-container {
   display: inline-block;
@@ -1128,12 +180,6 @@ table td .github-container .github-text {
     clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
   }
 }
-
-/* blocklet embed option - disabled 样式 */
-.typeahead-popover ul li.embed-option-disabled {
-  color: #999;
-  cursor: default;
-}
 li.embed-option-disabled > span:after {
   overflow: hidden;
   display: inline-block;