@4399ywkf/editor 0.6.0 → 0.8.0

package/dist/style.css

@@ -636,6 +636,8 @@
   --tt-codeblock-bg: var(--tt-gray-light-a-50);
   --tt-codeblock-text: var(--tt-gray-light-a-800);
   --tt-codeblock-border: var(--tt-gray-light-a-200);
+  --tt-codeblock-muted: var(--tt-gray-light-a-600);
+  --tt-codeblock-header-bg: var(--tt-gray-light-a-100);
 }
 .dark .tiptap.ProseMirror {
   --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
@@ -644,6 +646,8 @@
   --tt-codeblock-bg: var(--tt-gray-dark-a-50);
   --tt-codeblock-text: var(--tt-gray-dark-a-800);
   --tt-codeblock-border: var(--tt-gray-dark-a-200);
+  --tt-codeblock-muted: var(--tt-gray-dark-a-600);
+  --tt-codeblock-header-bg: var(--tt-gray-dark-a-100);
 }
 
 /* =====================
@@ -675,130 +679,436 @@
   overflow-x: auto;
 }
 .tiptap.ProseMirror pre code {
+  display: block;
   background-color: transparent;
   border: none;
   border-radius: 0;
-  -webkit-text-fill-color: inherit;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
   color: inherit;
+  -webkit-text-fill-color: initial;
+}
+.tiptap.ProseMirror {
+  /* NodeView 外壳：标题栏 + pre。表面（底色 / 边框 / 圆角）挪到外壳上，
+     pre 退化成无边框内容区，保证标题栏与代码是同一块。 */
+}
+.tiptap.ProseMirror .tiptap-code-block {
+  position: relative;
+  margin: 16px 0;
+  border: 1px solid var(--tt-codeblock-border);
+  border-radius: 6px;
+  background-color: var(--tt-codeblock-bg);
+  color: var(--tt-codeblock-text);
+  overflow: hidden;
+}
+.tiptap.ProseMirror .tiptap-code-block pre {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+}
+.tiptap.ProseMirror .tiptap-code-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--tt-codeblock-border);
+  background-color: var(--tt-codeblock-header-bg);
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--tt-codeblock-muted);
+  user-select: none;
+}
+.tiptap.ProseMirror .tiptap-code-block__title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.tiptap.ProseMirror .tiptap-code-block__copy {
+  flex: none;
+  appearance: none;
+  border: none;
+  border-radius: 4px;
+  padding: 2px 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.tiptap.ProseMirror .tiptap-code-block__copy:hover {
+  background-color: var(--tt-gray-light-a-200);
+  color: var(--tt-codeblock-text);
+}
+.tiptap.ProseMirror .tiptap-code-block__copy:focus-visible {
+  outline: 2px solid var(--tt-brand-color-500);
+  outline-offset: 1px;
+}
+.tiptap.ProseMirror .tiptap-code-block__copy[data-state=copied] {
+  color: var(--tt-color-text-green, #1a7f37);
+}
+.tiptap.ProseMirror .tiptap-code-block__copy[data-state=failed] {
+  color: var(--tt-color-text-red, #cf222e);
+}
+.dark .tiptap.ProseMirror .tiptap-code-block__copy:hover {
+  background-color: var(--tt-gray-dark-a-200);
 }
 
 /* =====================
-   CODE SYNTAX HIGHLIGHT (lowlight / hljs token 配色，atom-one-light)
-   注意：上面 `pre code` 设了 -webkit-text-fill-color: inherit，会盖住 token 的 color，
-   故对所有 token span 把 -webkit-text-fill-color 复位为 currentColor，让 color 生效。
+   CODE SYNTAX HIGHLIGHT
+   token 颜色由 Shiki 算出、以 CSS 自定义属性挂在每个 Decoration span 上，
+   这里只负责消费。作用范围严格限制在代码块内；没被着色的文字保持 --tt-codeblock-text。
    ===================== */
-.tiptap.ProseMirror pre code span {
+.tiptap.ProseMirror pre code .code-token {
+  color: var(--code-token-color, inherit);
+  font-style: var(--code-token-font-style, inherit);
+  font-weight: var(--code-token-font-weight, inherit);
+  text-decoration: var(--code-token-text-decoration, none);
   -webkit-text-fill-color: currentColor;
 }
-.tiptap.ProseMirror pre code .hljs-comment,
-.tiptap.ProseMirror pre code .hljs-quote {
-  color: #a0a1a7;
-  font-style: italic;
+
+/* components/tiptap-node/code-block-node/code-group-node.scss */
+@charset "UTF-8";
+/* =====================
+   CODE GROUP（代码分组：顶部标签页 + 单个可见面板）
+   对齐参考截图：浅灰底、细分隔线、当前标签下划线、紧凑的代码面。
+   变量沿用 code-block-node.scss 里定义的 --tt-codeblock-*。
+   ===================== */
+.tiptap.ProseMirror .tiptap-code-group {
+  position: relative;
+  margin: 16px 0;
+  border: 1px solid var(--tt-codeblock-border);
+  border-radius: 6px;
+  background-color: var(--tt-codeblock-bg);
+  color: var(--tt-codeblock-text);
+  overflow: hidden;
 }
-.tiptap.ProseMirror pre code .hljs-doctag,
-.tiptap.ProseMirror pre code .hljs-keyword,
-.tiptap.ProseMirror pre code .hljs-formula {
-  color: #a626a4;
-}
-.tiptap.ProseMirror pre code .hljs-section,
-.tiptap.ProseMirror pre code .hljs-name,
-.tiptap.ProseMirror pre code .hljs-selector-tag,
-.tiptap.ProseMirror pre code .hljs-deletion,
-.tiptap.ProseMirror pre code .hljs-subst {
-  color: #e45649;
-}
-.tiptap.ProseMirror pre code .hljs-literal {
-  color: #0184bc;
-}
-.tiptap.ProseMirror pre code .hljs-string,
-.tiptap.ProseMirror pre code .hljs-regexp,
-.tiptap.ProseMirror pre code .hljs-addition,
-.tiptap.ProseMirror pre code .hljs-attribute,
-.tiptap.ProseMirror pre code .hljs-meta .hljs-string {
-  color: #50a14f;
-}
-.tiptap.ProseMirror pre code .hljs-attr,
-.tiptap.ProseMirror pre code .hljs-variable,
-.tiptap.ProseMirror pre code .hljs-template-variable,
-.tiptap.ProseMirror pre code .hljs-type,
-.tiptap.ProseMirror pre code .hljs-selector-class,
-.tiptap.ProseMirror pre code .hljs-selector-attr,
-.tiptap.ProseMirror pre code .hljs-selector-pseudo,
-.tiptap.ProseMirror pre code .hljs-number {
-  color: #986801;
-}
-.tiptap.ProseMirror pre code .hljs-symbol,
-.tiptap.ProseMirror pre code .hljs-bullet,
-.tiptap.ProseMirror pre code .hljs-link,
-.tiptap.ProseMirror pre code .hljs-meta,
-.tiptap.ProseMirror pre code .hljs-selector-id,
-.tiptap.ProseMirror pre code .hljs-title {
-  color: #4078f2;
-}
-.tiptap.ProseMirror pre code .hljs-built_in,
-.tiptap.ProseMirror pre code .hljs-title.class_,
-.tiptap.ProseMirror pre code .hljs-class .hljs-title {
-  color: #c18401;
-}
-.tiptap.ProseMirror pre code .hljs-emphasis {
-  font-style: italic;
+.tiptap.ProseMirror .tiptap-code-group__bar {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 36px;
+  border-bottom: 1px solid var(--tt-codeblock-border);
+  background-color: var(--tt-codeblock-header-bg);
+  user-select: none;
 }
-.tiptap.ProseMirror pre code .hljs-strong {
-  font-weight: bold;
+.tiptap.ProseMirror {
+  /* 标签过多时标签栏自己横滚，不撑宽文档 */
 }
-.tiptap.ProseMirror pre code .hljs-link {
-  text-decoration: underline;
+.tiptap.ProseMirror .tiptap-code-group__tabs {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+.tiptap.ProseMirror .tiptap-code-group__tab {
+  position: relative;
+  flex: none;
+  appearance: none;
+  border: none;
+  background: transparent;
+  margin: 0;
+  padding: 0 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 36px;
+  white-space: nowrap;
+  color: var(--tt-codeblock-muted);
+  cursor: pointer;
+}
+.tiptap.ProseMirror .tiptap-code-group__tab::after {
+  content: "";
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: transparent;
+}
+.tiptap.ProseMirror .tiptap-code-group__tab:hover {
+  color: var(--tt-codeblock-text);
+}
+.tiptap.ProseMirror .tiptap-code-group__tab[data-active] {
+  color: var(--tt-codeblock-text);
+  font-weight: 500;
+}
+.tiptap.ProseMirror .tiptap-code-group__tab[data-active]::after {
+  background: var(--tt-brand-color-500);
+}
+.tiptap.ProseMirror .tiptap-code-group__tab:focus-visible {
+  outline: 2px solid var(--tt-brand-color-500);
+  outline-offset: -2px;
+  border-radius: 4px;
+}
+.tiptap.ProseMirror .tiptap-code-group__copy {
+  flex: none;
+  align-self: center;
+  appearance: none;
+  border: none;
+  border-radius: 4px;
+  margin-right: 8px;
+  padding: 2px 8px;
+  background: transparent;
+  color: var(--tt-codeblock-muted);
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.tiptap.ProseMirror .tiptap-code-group__copy:hover {
+  background-color: var(--tt-gray-light-a-200);
+  color: var(--tt-codeblock-text);
+}
+.tiptap.ProseMirror .tiptap-code-group__copy:focus-visible {
+  outline: 2px solid var(--tt-brand-color-500);
+  outline-offset: 1px;
+}
+.tiptap.ProseMirror .tiptap-code-group__copy[data-state=copied] {
+  color: var(--tt-color-text-green, #1a7f37);
+}
+.tiptap.ProseMirror .tiptap-code-group__copy[data-state=failed] {
+  color: var(--tt-color-text-red, #cf222e);
+}
+.dark .tiptap.ProseMirror .tiptap-code-group__copy:hover {
+  background-color: var(--tt-gray-dark-a-200);
+}
+.tiptap.ProseMirror {
+  /* 面板：子代码块外壳去掉自己的边框 / 圆角 / 间距 / 标题栏，变成分组里的一页 */
+}
+.tiptap.ProseMirror .tiptap-code-group__panels .tiptap-code-block {
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+.tiptap.ProseMirror .tiptap-code-group__panels .tiptap-code-block__header {
+  display: none;
+}
+.tiptap.ProseMirror .tiptap-code-group__panels [data-code-panel=hidden] {
+  display: none;
 }
 
-/* 暗色：atom-one-dark token 配色 */
-.dark .tiptap.ProseMirror pre code .hljs-comment,
-.dark .tiptap.ProseMirror pre code .hljs-quote {
-  color: #5c6370;
-}
-.dark .tiptap.ProseMirror pre code .hljs-doctag,
-.dark .tiptap.ProseMirror pre code .hljs-keyword,
-.dark .tiptap.ProseMirror pre code .hljs-formula {
-  color: #c678dd;
-}
-.dark .tiptap.ProseMirror pre code .hljs-section,
-.dark .tiptap.ProseMirror pre code .hljs-name,
-.dark .tiptap.ProseMirror pre code .hljs-selector-tag,
-.dark .tiptap.ProseMirror pre code .hljs-deletion,
-.dark .tiptap.ProseMirror pre code .hljs-subst {
-  color: #e06c75;
-}
-.dark .tiptap.ProseMirror pre code .hljs-literal {
-  color: #56b6c2;
-}
-.dark .tiptap.ProseMirror pre code .hljs-string,
-.dark .tiptap.ProseMirror pre code .hljs-regexp,
-.dark .tiptap.ProseMirror pre code .hljs-addition,
-.dark .tiptap.ProseMirror pre code .hljs-attribute,
-.dark .tiptap.ProseMirror pre code .hljs-meta .hljs-string {
-  color: #98c379;
-}
-.dark .tiptap.ProseMirror pre code .hljs-attr,
-.dark .tiptap.ProseMirror pre code .hljs-variable,
-.dark .tiptap.ProseMirror pre code .hljs-template-variable,
-.dark .tiptap.ProseMirror pre code .hljs-type,
-.dark .tiptap.ProseMirror pre code .hljs-selector-class,
-.dark .tiptap.ProseMirror pre code .hljs-selector-attr,
-.dark .tiptap.ProseMirror pre code .hljs-selector-pseudo,
-.dark .tiptap.ProseMirror pre code .hljs-number {
-  color: #d19a66;
-}
-.dark .tiptap.ProseMirror pre code .hljs-symbol,
-.dark .tiptap.ProseMirror pre code .hljs-bullet,
-.dark .tiptap.ProseMirror pre code .hljs-link,
-.dark .tiptap.ProseMirror pre code .hljs-meta,
-.dark .tiptap.ProseMirror pre code .hljs-selector-id,
-.dark .tiptap.ProseMirror pre code .hljs-title {
-  color: #61aeee;
-}
-.dark .tiptap.ProseMirror pre code .hljs-built_in,
-.dark .tiptap.ProseMirror pre code .hljs-title.class_,
-.dark .tiptap.ProseMirror pre code .hljs-class .hljs-title {
-  color: #e6c07b;
+/* components/tiptap-node/collapsible-node/collapsible-node.scss */
+.tiptap.ProseMirror .tt-collapsible {
+  position: relative;
+  margin: 12px 0;
+}
+.tiptap.ProseMirror .tt-collapsible__header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 32px;
+  user-select: none;
+}
+.tiptap.ProseMirror .tt-collapsible__toggle {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  color: var(--tt-codeblock-muted);
+}
+.tiptap.ProseMirror .tt-collapsible__toggle:focus-visible {
+  outline: 2px solid var(--tt-brand-color-500);
+  border-radius: 4px;
+}
+.tiptap.ProseMirror .tt-collapsible__toggle--placeholder {
+  display: inline-block;
+}
+.tiptap.ProseMirror .tt-collapsible__chevron {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg);
+  transition: transform 0.15s;
+}
+.tiptap.ProseMirror .tt-collapsible[data-open=true] .tt-collapsible__chevron {
+  transform: rotate(45deg);
+}
+.tiptap.ProseMirror .tt-collapsible__fields {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.tiptap.ProseMirror .tt-collapsible__actions {
+  display: none;
+  gap: 4px;
+}
+.tiptap.ProseMirror .tt-collapsible:hover > .tt-collapsible__header > .tt-collapsible__actions,
+.tiptap.ProseMirror .tt-collapsible:focus-within > .tt-collapsible__header > .tt-collapsible__actions {
+  display: flex;
+}
+.tiptap.ProseMirror .tt-collapsible__actions button {
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  color: var(--tt-codeblock-muted);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.tiptap.ProseMirror .tt-collapsible__actions button:hover {
+  background: var(--tt-gray-light-a-100);
+  color: var(--tt-codeblock-text);
+}
+.tiptap.ProseMirror .tt-collapsible__content[hidden] {
+  display: none;
+}
+.tiptap.ProseMirror .tt-collapsible__content {
+  padding-left: 26px;
+}
+.tiptap.ProseMirror .tt-collapsible__lead {
+  padding-left: 26px;
+  margin-bottom: 4px;
+}
+.tiptap.ProseMirror .tt-field {
+  box-sizing: content-box;
+  font: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 0 4px;
+  background: transparent;
+  color: inherit;
+  min-width: 2ch;
+}
+.tiptap.ProseMirror .tt-field:focus {
+  outline: none;
+  border-color: var(--tt-brand-color-500);
+  background: var(--tt-gray-light-a-50);
+}
+.tiptap.ProseMirror .tt-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  background: var(--tt-inline-code-bg-color);
+  border: 1px solid var(--tt-inline-code-border-color);
+  font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
+}
+.tiptap.ProseMirror .tt-badge--required {
+  color: var(--tt-color-text-red);
+  font-family: inherit;
+  cursor: pointer;
+}
+.tiptap.ProseMirror .tt-badge--required[aria-pressed=false] {
+  color: var(--tt-codeblock-muted);
+}
+.tiptap.ProseMirror .tt-badge--default .tt-badge__label {
+  font-family: inherit;
+  color: var(--tt-codeblock-muted);
+}
+.tiptap.ProseMirror .tt-collapsible--apiParam {
+  margin: 0;
+  padding: 6px 0;
+  border-top: 1px solid var(--tt-codeblock-border);
+}
+.tiptap.ProseMirror .tt-collapsible--apiParam + .tt-collapsible--apiParam {
+  margin-top: 0;
+}
+.tiptap.ProseMirror .tt-api-param__name {
+  font-weight: 500;
+}
+.tiptap.ProseMirror .tt-api-param__sep {
+  color: var(--tt-codeblock-border);
+}
+.tiptap.ProseMirror .tt-api-param__summary {
+  flex: 1 1 120px;
+}
+.tiptap.ProseMirror .tt-api-param__path {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: "Source Code Pro", Menlo, Monaco, Consolas, monospace;
+  background: var(--tt-inline-code-bg-color);
+  border: 1px solid var(--tt-inline-code-border-color);
+}
+.tiptap.ProseMirror .tt-callout {
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 8px 12px;
+}
+.tiptap.ProseMirror .tt-callout .tt-collapsible__content {
+  padding-left: 0;
+}
+.tiptap.ProseMirror .tt-callout--info {
+  background: var(--tt-gray-light-a-50);
+  border-color: var(--tt-gray-light-a-200);
+}
+.tiptap.ProseMirror .tt-callout--tip {
+  background: rgba(26, 127, 55, 0.08);
+  border-color: rgba(26, 127, 55, 0.3);
+}
+.tiptap.ProseMirror .tt-callout--warning {
+  background: rgba(255, 196, 0, 0.12);
+  border-color: rgba(255, 196, 0, 0.45);
+}
+.tiptap.ProseMirror .tt-callout--danger {
+  background: rgba(207, 34, 46, 0.08);
+  border-color: rgba(207, 34, 46, 0.3);
+}
+.tiptap.ProseMirror .tt-callout__title {
+  font-weight: 600;
+}
+.tiptap.ProseMirror .tt-callout__types {
+  display: inline-flex;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.tiptap.ProseMirror .tt-callout__type {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  padding: 0;
+}
+.tiptap.ProseMirror .tt-callout__type--info {
+  background: #6e7781;
+}
+.tiptap.ProseMirror .tt-callout__type--tip {
+  background: #1a7f37;
+}
+.tiptap.ProseMirror .tt-callout__type--warning {
+  background: #d4a72c;
+}
+.tiptap.ProseMirror .tt-callout__type--danger {
+  background: #cf222e;
+}
+.tiptap.ProseMirror .tt-callout__type[aria-pressed=true] {
+  border-color: var(--tt-brand-color-500);
+}
+.tiptap.ProseMirror .tt-details__title {
+  font-weight: 500;
+}
+.dark .tiptap.ProseMirror .tt-collapsible__actions button:hover {
+  background: var(--tt-gray-dark-a-200);
+}
+.dark .tiptap.ProseMirror .tt-field:focus {
+  background: var(--tt-gray-dark-a-50);
 }
 
 /* components/tiptap-node/column-node/column-node.scss */
@@ -2475,7 +2785,7 @@
 }
 
 /* components/tiptap-node/video-node/video-node.scss */
-.notion-like-editor video {
+.tiptap.ProseMirror video {
   display: block;
   max-width: 100%;
   height: auto;
@@ -2484,7 +2794,7 @@
   background: #000;
   outline: none;
 }
-.notion-like-editor video.ProseMirror-selectednode {
+.tiptap.ProseMirror video.ProseMirror-selectednode {
   box-shadow: 0 0 0 2px var(--tt-brand-color-500, #3b82f6);
 }