This commit is contained in:
seahi committed
1 parent
f89904f7bf
commit
8fedbdbe52
1 file changed
+84
-71
@@ -206,11 +206,10 @@
|
||||
onclick={() => insertAtCursor('**', '**', '粗体')}
|
||||
title="加粗"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><path d="M6 4h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path
|
||||
d="M6 12h10a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"
|
||||
></path></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M7 5h5a3.5 3.5 0 0 1 0 7H7z" />
|
||||
<path d="M7 12h6a3.5 3.5 0 0 1 0 7H7z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -218,10 +217,11 @@
|
||||
onclick={() => insertAtCursor('*', '*', '斜体')}
|
||||
title="斜体"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"
|
||||
></line><line x1="15" y1="4" x2="9" y2="20"></line></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<line x1="19" y1="5" x2="11.5" y2="5" />
|
||||
<line x1="12.5" y1="19" x2="5" y2="19" />
|
||||
<line x1="15" y1="5" x2="9" y2="19" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -229,14 +229,11 @@
|
||||
onclick={() => insertAtCursor('~~', '~~', '删除线')}
|
||||
title="删除线"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line
|
||||
x1="4"
|
||||
y1="12"
|
||||
x2="20"
|
||||
y2="12"
|
||||
></line></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M16 5.5H10.5a3 3 0 0 0 0 6" />
|
||||
<path d="M13.5 12.5a3 3 0 0 1 0 6H8" />
|
||||
<line x1="4.5" y1="12" x2="19.5" y2="12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -244,7 +241,11 @@
|
||||
onclick={() => insertAtCursor('### ', '', '标题')}
|
||||
title="标题"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"><path d="M4 12h16M4 18V6M20 18V6"></path></svg>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M6 5v14" />
|
||||
<path d="M18 5v14" />
|
||||
<path d="M6 12h12" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="md-divider"></div>
|
||||
<button
|
||||
@@ -253,15 +254,14 @@
|
||||
onclick={() => insertAtCursor('- ', '', '列表项')}
|
||||
title="无序列表"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line
|
||||
x1="8"
|
||||
y1="18"
|
||||
x2="21"
|
||||
y2="18"
|
||||
></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"
|
||||
></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<line x1="9" y1="5.5" x2="19.5" y2="5.5" />
|
||||
<line x1="9" y1="12" x2="19.5" y2="12" />
|
||||
<line x1="9" y1="18.5" x2="19.5" y2="18.5" />
|
||||
<circle cx="5" cy="5.5" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="5" cy="12" r="1" fill="currentColor" stroke="none" />
|
||||
<circle cx="5" cy="18.5" r="1" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -269,11 +269,10 @@
|
||||
onclick={() => insertAtCursor('[', '](https://)', '链接文字')}
|
||||
title="链接"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path
|
||||
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
|
||||
></path></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="toolbar-dropdown-wrapper">
|
||||
{#if showImageMenu}
|
||||
@@ -287,12 +286,11 @@
|
||||
onclick={() => (showImageMenu = !showImageMenu)}
|
||||
title="图片"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><polygon
|
||||
points="6 21, 10 13, 13 16.5, 16.5 9.5, 19 21"
|
||||
style="fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 1.5;"
|
||||
></polygon></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<circle cx="9" cy="9" r="2" />
|
||||
<path d="M21 15l-3.09-3.09a2 2 0 0 0-2.82 0L6 21" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if showImageMenu}
|
||||
<div class="toolbar-dropdown">
|
||||
@@ -330,10 +328,10 @@
|
||||
onclick={() => insertAtCursor('```\n', '\n```', 'code')}
|
||||
title="代码块"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"
|
||||
></polyline></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<polyline points="15.5 5.5 20.5 12 15.5 18.5" />
|
||||
<polyline points="8.5 5.5 3.5 12 8.5 18.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="md-divider"></div>
|
||||
<div class="toolbar-dropdown-wrapper">
|
||||
@@ -352,10 +350,11 @@
|
||||
onclick={() => (showAdmonitionMenu = !showAdmonitionMenu)}
|
||||
title="提示框 (Admonition)"
|
||||
>
|
||||
<svg viewBox="0 0 24 24"
|
||||
><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"
|
||||
></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 11.5V16" />
|
||||
<circle cx="12" cy="8.25" r=".9" fill="currentColor" stroke="none" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if showAdmonitionMenu}
|
||||
<div class="toolbar-dropdown">
|
||||
@@ -372,17 +371,11 @@
|
||||
{/if}
|
||||
</div>
|
||||
<button type="button" class="md-btn" onclick={insertMore} title="插入摘要分割线">
|
||||
<svg viewBox="0 0 24 24"
|
||||
><polyline points="5 5 5 9 19 9 19 5"></polyline><polyline points="5 19 5 15 19 15 19 19"
|
||||
></polyline><line
|
||||
x1="4"
|
||||
y1="12"
|
||||
x2="20"
|
||||
y2="12"
|
||||
stroke-dasharray="3 3"
|
||||
stroke-linecap="butt"
|
||||
></line></svg
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M5 5v3.5h14V5" />
|
||||
<path d="M5 19v-3.5h14V19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" stroke-dasharray="2 2" stroke-linecap="butt" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -405,48 +398,68 @@
|
||||
.md-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 8px;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
margin-bottom: 10px;
|
||||
padding: 4px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
background-color: rgba(0, 0, 0, 0.015);
|
||||
}
|
||||
|
||||
.md-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
opacity: 0.65;
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0.7;
|
||||
transition:
|
||||
background-color 0.18s ease,
|
||||
color 0.18s ease,
|
||||
opacity 0.18s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.md-btn:hover {
|
||||
opacity: 1;
|
||||
color: var(--accent-color, #419b38);
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
background-color: rgba(65, 155, 56, 0.1);
|
||||
}
|
||||
|
||||
.md-btn:active {
|
||||
background-color: rgba(65, 155, 56, 0.18);
|
||||
}
|
||||
|
||||
.md-btn:focus-visible {
|
||||
opacity: 1;
|
||||
outline: 2px solid var(--accent-color, #419b38);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.md-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.5;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.md-divider {
|
||||
width: 2px;
|
||||
flex: none;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: var(--text-color);
|
||||
opacity: 0.15;
|
||||
margin: 0 4px;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-wrapper {
|
||||
|
||||
Reference in new issue
Block a user