@dxpos/markdown 0.0.1

package/styles.css

@@ -0,0 +1,760 @@
+.wsmd-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  flex-shrink: 0;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.wsmd-icon-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.wsmd-icon-btn--ghost {
+  border: none;
+  background: none;
+  color: var(--wsmd-muted);
+}
+
+.wsmd-icon-btn--ghost:hover:not(:disabled) {
+  color: var(--wsmd-foreground);
+}
+
+.wsmd-icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+@keyframes icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.wsmd-icon-btn__spin {
+  animation: icon-spin 0.8s linear infinite;
+}
+
+.wsmd-markdown-body {
+  font-size: 14px;
+  line-height: 1.7;
+  word-break: break-word;
+}
+
+.wsmd-markdown-body> :first-child {
+  margin-top: 0;
+}
+
+.wsmd-markdown-body> :last-child {
+  margin-bottom: 0;
+}
+
+.wsmd-markdown-body h1,
+.wsmd-markdown-body h2,
+.wsmd-markdown-body h3,
+.wsmd-markdown-body h4,
+.wsmd-markdown-body h5,
+.wsmd-markdown-body h6 {
+  font-weight: 650;
+  line-height: 1.3;
+  margin: 1.2em 0 0.5em;
+}
+
+.wsmd-markdown-body h1 {
+  font-size: 1.4em;
+}
+
+.wsmd-markdown-body h2 {
+  font-size: 1.25em;
+}
+
+.wsmd-markdown-body h3 {
+  font-size: 1.1em;
+}
+
+.wsmd-markdown-body h4 {
+  font-size: 1em;
+}
+
+.wsmd-markdown-body h5 {
+  font-size: 0.95em;
+}
+
+.wsmd-markdown-body h6 {
+  font-size: 0.9em;
+}
+
+.wsmd-markdown-body p,
+.wsmd-markdown-body ul,
+.wsmd-markdown-body ol,
+.wsmd-markdown-body blockquote,
+.wsmd-markdown-body pre,
+.wsmd-markdown-body table {
+  margin: 0.7em 0;
+}
+
+.wsmd-markdown-body ul,
+.wsmd-markdown-body ol {
+  padding-left: 1.4em;
+}
+
+/* 恢复列表项目符号/编号（被 Tailwind Preflight 重置为 none） */
+.wsmd-markdown-body ul {
+  list-style: disc;
+}
+
+.wsmd-markdown-body ol {
+  list-style: decimal;
+}
+
+/* li 恢复默认展示与行间距 */
+.wsmd-markdown-body li {
+  display: list-item;
+  margin: 0.25em 0;
+}
+
+/* 嵌套列表缩进与间距 */
+.wsmd-markdown-body li ul,
+.wsmd-markdown-body li ol {
+  margin: 0.25em 0;
+}
+
+/* hr 恢复默认分割线外观与边距 */
+.wsmd-markdown-body hr {
+  height: auto;
+  margin: 1.2em 0;
+  border: 0;
+  border-top: 1px solid var(--wsmd-border);
+}
+
+/* 防御性：恢复粗体/斜体 */
+.wsmd-markdown-body strong,
+.wsmd-markdown-body b {
+  font-weight: 700;
+}
+
+.wsmd-markdown-body em,
+.wsmd-markdown-body i {
+  font-style: italic;
+}
+
+.wsmd-markdown-body a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.wsmd-markdown-body pre {
+  overflow: auto;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--wsmd-foreground) 6%, var(--wsmd-background));
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  font-size: 13px;
+}
+
+.wsmd-markdown-body code {
+  font-family: var(--wsmd-font-mono), ui-monospace, monospace;
+  font-size: 0.92em;
+}
+
+.wsmd-markdown-body :not(pre)>code {
+  padding: 0.15em 0.4em;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--wsmd-foreground) 8%, var(--wsmd-surface));
+}
+
+.wsmd-markdown-body table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.wsmd-markdown-body th,
+.wsmd-markdown-body td {
+  border: 1px solid var(--wsmd-border);
+  padding: 6px 10px;
+  text-align: left;
+}
+
+.wsmd-markdown-body blockquote {
+  border-left: 3px solid var(--wsmd-border);
+  padding-left: 12px;
+  color: var(--wsmd-muted);
+}
+
+.wsmd-text-style-menu,
+.wsmd-video-menu {
+  position: relative;
+}
+
+.wsmd-text-style-menu__panel,
+.wsmd-video-menu__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 12;
+  min-width: 220px;
+  padding: 10px;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 10px;
+  background: var(--wsmd-surface);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--wsmd-foreground) 12%, transparent);
+}
+
+.wsmd-text-style-menu__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--wsmd-foreground);
+}
+
+.wsmd-text-style-menu__row:first-child {
+  margin-top: 0;
+}
+
+.wsmd-text-style-menu__select,
+.wsmd-video-menu__input {
+  min-width: 0;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 6px;
+  background: var(--wsmd-background);
+  color: inherit;
+  font: inherit;
+}
+
+.wsmd-text-style-menu__select {
+  width: 132px;
+  height: 28px;
+  padding: 0 6px;
+}
+
+.wsmd-video-menu__upload,
+.wsmd-video-menu__submit {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 6px;
+  background: var(--wsmd-background);
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.wsmd-video-menu__form {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.wsmd-video-menu__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--wsmd-foreground);
+}
+
+.wsmd-video-menu__input {
+  height: 28px;
+  padding: 0 8px;
+}
+
+.wsmd-video-menu__error {
+  margin: 0;
+  font-size: 12px;
+  color: var(--wsmd-danger);
+}
+
+.wsmd-markdown-body video,
+.wsmd-tiptap video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  border-radius: 8px;
+}
+
+.wsmd-markdown-body iframe[data-video-provider],
+.wsmd-tiptap iframe[data-video-provider] {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+  border-radius: 8px;
+}
+
+.wsmd-tiptap .ProseMirror-selectednode {
+  outline: 2px solid var(--wsmd-foreground);
+  outline-offset: 2px;
+}
+
+.wsmd-markdown-body img,
+.wsmd-tiptap img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+.wsmd-markdown-editor__loading {
+  padding: 20px 24px;
+  color: var(--wsmd-muted);
+  font-size: 13px;
+}
+
+.wsmd-markdown-editor {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.wsmd-markdown-editor--dragging .wsmd-markdown-editor__canvas {
+  outline: 2px solid var(--wsmd-accent);
+  outline-offset: -2px;
+  background: color-mix(in srgb, var(--wsmd-accent) 6%, transparent);
+}
+
+.wsmd-markdown-editor__canvas {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.wsmd-markdown-editor__content {
+  min-height: 100%;
+  padding: 20px 24px 32px 36px;
+}
+
+.wsmd-markdown-editor__file {
+  display: none;
+}
+
+.wsmd-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--wsmd-border);
+  background: var(--wsmd-background);
+}
+
+.wsmd-toolbar__btn--active {
+  color: var(--wsmd-foreground);
+  background: color-mix(in srgb, var(--wsmd-foreground) 10%, transparent);
+}
+
+.wsmd-toolbar__divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: var(--wsmd-border);
+}
+
+.wsmd-toolbar__spacer {
+  margin-left: auto;
+}
+
+.wsmd-color-menu {
+  position: relative;
+}
+
+.wsmd-color-menu__trigger {
+  flex-direction: column;
+  gap: 1px;
+}
+
+.wsmd-color-menu__bar {
+  width: 12px;
+  height: 2px;
+  border-radius: 1px;
+  background: currentColor;
+}
+
+.wsmd-color-menu__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 12;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: max-content;
+  padding: 12px;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 10px;
+  background: var(--wsmd-surface);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--wsmd-foreground) 12%, transparent);
+}
+
+.wsmd-color-menu__section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.wsmd-color-menu__caption {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  color: var(--wsmd-muted);
+}
+
+.wsmd-color-menu__swatches {
+  display: grid;
+  grid-template-columns: repeat(5, 22px);
+  gap: 6px;
+}
+
+.wsmd-color-menu__custom-swatch {
+  position: relative;
+  width: 22px;
+  height: 22px;
+}
+
+.wsmd-color-menu__swatch-remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--wsmd-foreground);
+  color: var(--wsmd-background);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.wsmd-color-menu__custom-swatch:hover .wsmd-color-menu__swatch-remove,
+.wsmd-color-menu__custom-swatch:focus-within .wsmd-color-menu__swatch-remove {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.wsmd-color-menu__swatch-remove svg {
+  width: 8px;
+  height: 8px;
+}
+
+.wsmd-color-menu__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.wsmd-color-menu__swatch--active {
+  outline: 2px solid var(--wsmd-foreground);
+  outline-offset: 1px;
+}
+
+.wsmd-color-menu__swatch--clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--wsmd-background);
+  color: var(--wsmd-muted);
+}
+
+.wsmd-color-menu__swatch--clear svg {
+  width: 12px;
+  height: 12px;
+}
+
+.wsmd-color-menu__custom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  padding-top: 10px;
+  border-top: 1px solid var(--wsmd-border);
+}
+
+.wsmd-color-menu__picker {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 6px;
+  background: none;
+  cursor: pointer;
+}
+
+.wsmd-color-menu__picker::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.wsmd-color-menu__picker::-webkit-color-swatch,
+.wsmd-color-menu__picker::-moz-color-swatch {
+  border: none;
+  border-radius: 5px;
+}
+
+.wsmd-markdown-body mark,
+.wsmd-tiptap mark {
+  background: #fde047;
+  color: inherit;
+  border-radius: 2px;
+  padding: 0 0.12em;
+}
+
+.wsmd-tiptap {
+  outline: none;
+  min-height: 240px;
+}
+
+.wsmd-tiptap p.is-editor-empty:first-child::before,
+.wsmd-tiptap p.is-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--wsmd-muted);
+  pointer-events: none;
+}
+
+.wsmd-tiptap ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0;
+}
+
+.wsmd-tiptap ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.wsmd-tiptap ul[data-type="taskList"] li>label {
+  margin-top: 0.35em;
+}
+
+.wsmd-slash-menu {
+  min-width: 200px;
+  padding: 6px;
+  border: 1px solid var(--wsmd-border);
+  border-radius: 10px;
+  background: var(--wsmd-surface);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--wsmd-foreground) 12%, transparent);
+}
+
+.wsmd-slash-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: none;
+  border-radius: 8px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wsmd-slash-menu__item svg {
+  width: 14px;
+  height: 14px;
+  color: var(--wsmd-muted);
+}
+
+.wsmd-slash-menu__item--active,
+.wsmd-slash-menu__item:hover {
+  background: color-mix(in srgb, var(--wsmd-foreground) 6%, transparent);
+}
+
+.wsmd-drag-handle {
+  position: absolute;
+  left: 8px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: none;
+  color: var(--wsmd-muted);
+  opacity: 0;
+  pointer-events: none;
+  cursor: grab;
+}
+
+.wsmd-drag-handle svg {
+  width: 14px;
+  height: 14px;
+}
+
+.wsmd-drag-handle:hover {
+  background: color-mix(in srgb, var(--wsmd-foreground) 8%, transparent);
+}
+
+/* Skill 预览代码高亮 token 颜色：亮色（github） */
+:root {
+  --wsmd-hl-base: #24292e;
+  --wsmd-hl-keyword: #d73a49;
+  --wsmd-hl-title: #6f42c1;
+  --wsmd-hl-constant: #005cc5;
+  --wsmd-hl-string: #032f62;
+  --wsmd-hl-built-in: #e36209;
+  --wsmd-hl-comment: #6a737d;
+  --wsmd-hl-tag: #22863a;
+  --wsmd-hl-section: #005cc5;
+  --wsmd-hl-bullet: #735c0f;
+  --wsmd-hl-add-fg: #22863a;
+  --wsmd-hl-add-bg: #f0fff4;
+  --wsmd-hl-del-fg: #b31d28;
+  --wsmd-hl-del-bg: #ffeef0;
+}
+
+:root[data-theme="dark"] {
+  --wsmd-hl-base: #c9d1d9;
+  --wsmd-hl-keyword: #ff7b72;
+  --wsmd-hl-title: #d2a8ff;
+  --wsmd-hl-constant: #79c0ff;
+  --wsmd-hl-string: #a5d6ff;
+  --wsmd-hl-built-in: #ffa657;
+  --wsmd-hl-comment: #8b949e;
+  --wsmd-hl-tag: #7ee787;
+  --wsmd-hl-section: #1f6feb;
+  --wsmd-hl-bullet: #f2cc60;
+  --wsmd-hl-add-fg: #aff5b4;
+  --wsmd-hl-add-bg: #033a16;
+  --wsmd-hl-del-fg: #ffdcd7;
+  --wsmd-hl-del-bg: #67060c;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --wsmd-hl-base: #c9d1d9;
+    --wsmd-hl-keyword: #ff7b72;
+    --wsmd-hl-title: #d2a8ff;
+    --wsmd-hl-constant: #79c0ff;
+    --wsmd-hl-string: #a5d6ff;
+    --wsmd-hl-built-in: #ffa657;
+    --wsmd-hl-comment: #8b949e;
+    --wsmd-hl-tag: #7ee787;
+    --wsmd-hl-section: #1f6feb;
+    --wsmd-hl-bullet: #f2cc60;
+    --wsmd-hl-add-fg: #aff5b4;
+    --wsmd-hl-add-bg: #033a16;
+    --wsmd-hl-del-fg: #ffdcd7;
+    --wsmd-hl-del-bg: #67060c;
+  }
+}
+
+.wsmd-markdown-body pre code.hljs {
+  display: block;
+  padding: 0;
+  background: transparent;
+  color: var(--wsmd-hl-base);
+}
+
+.wsmd-markdown-body pre .hljs-keyword,
+.wsmd-markdown-body pre .hljs-doctag,
+.wsmd-markdown-body pre .hljs-template-tag,
+.wsmd-markdown-body pre .hljs-template-variable,
+.wsmd-markdown-body pre .hljs-type,
+.wsmd-markdown-body pre .hljs-variable.language_,
+.wsmd-markdown-body pre .hljs-meta .hljs-keyword {
+  color: var(--wsmd-hl-keyword);
+}
+
+.wsmd-markdown-body pre .hljs-title,
+.wsmd-markdown-body pre .hljs-title.class_,
+.wsmd-markdown-body pre .hljs-title.class_.inherited__,
+.wsmd-markdown-body pre .hljs-title.function_ {
+  color: var(--wsmd-hl-title);
+}
+
+.wsmd-markdown-body pre .hljs-attr,
+.wsmd-markdown-body pre .hljs-attribute,
+.wsmd-markdown-body pre .hljs-literal,
+.wsmd-markdown-body pre .hljs-meta,
+.wsmd-markdown-body pre .hljs-number,
+.wsmd-markdown-body pre .hljs-operator,
+.wsmd-markdown-body pre .hljs-variable,
+.wsmd-markdown-body pre .hljs-selector-attr,
+.wsmd-markdown-body pre .hljs-selector-class,
+.wsmd-markdown-body pre .hljs-selector-id {
+  color: var(--wsmd-hl-constant);
+}
+
+.wsmd-markdown-body pre .hljs-regexp,
+.wsmd-markdown-body pre .hljs-string,
+.wsmd-markdown-body pre .hljs-meta .hljs-string {
+  color: var(--wsmd-hl-string);
+}
+
+.wsmd-markdown-body pre .hljs-built_in,
+.wsmd-markdown-body pre .hljs-symbol {
+  color: var(--wsmd-hl-built-in);
+}
+
+.wsmd-markdown-body pre .hljs-comment,
+.wsmd-markdown-body pre .hljs-code,
+.wsmd-markdown-body pre .hljs-formula {
+  color: var(--wsmd-hl-comment);
+}
+
+.wsmd-markdown-body pre .hljs-name,
+.wsmd-markdown-body pre .hljs-quote,
+.wsmd-markdown-body pre .hljs-selector-tag,
+.wsmd-markdown-body pre .hljs-selector-pseudo {
+  color: var(--wsmd-hl-tag);
+}
+
+.wsmd-markdown-body pre .hljs-subst {
+  color: var(--wsmd-hl-base);
+}
+
+.wsmd-markdown-body pre .hljs-section {
+  color: var(--wsmd-hl-section);
+  font-weight: bold;
+}
+
+.wsmd-markdown-body pre .hljs-bullet {
+  color: var(--wsmd-hl-bullet);
+}
+
+.wsmd-markdown-body pre .hljs-emphasis {
+  color: var(--wsmd-hl-base);
+  font-style: italic;
+}
+
+.wsmd-markdown-body pre .hljs-strong {
+  color: var(--wsmd-hl-base);
+  font-weight: bold;
+}
+
+.wsmd-markdown-body pre .hljs-addition {
+  color: var(--wsmd-hl-add-fg);
+  background-color: var(--wsmd-hl-add-bg);
+}
+
+.wsmd-markdown-body pre .hljs-deletion {
+  color: var(--wsmd-hl-del-fg);
+  background-color: var(--wsmd-hl-del-bg);
+}