Skip to content

Commit c55dda6

Browse files
HideInMatrixHideInMatrix
committed
feat: 增加链接菜单功能以及表格优化悬浮功能
1 parent ecf2389 commit c55dda6

22 files changed

Lines changed: 1395 additions & 27 deletions

‎app/assets/css/writing-studio/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "./plugins/heading.css";
44
@import "./plugins/blockquote.css";
55
@import "./plugins/code-block.css";
6+
@import "./plugins/link.css";
67
@import "./plugins/text-style.css";
78
@import "./plugins/mention.css";
89
@import "./plugins/emoji.css";

‎app/assets/css/writing-studio/plugins/link.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
.writing-editor .tiptap a.ws-link,
2+
.writing-editor .tiptap a[href] {
3+
color: oklch(var(--primary));
4+
text-decoration: underline;
5+
text-underline-offset: 0.14em;
6+
}
7+
8+
.ws-link-menu {
9+
min-width: 340px;
10+
max-width: min(92vw, 680px);
11+
border-radius: 1rem;
12+
box-shadow: 0 12px 32px -18px oklch(0 0 0 / 0.35);
13+
}
14+
15+
.ws-link-menu--editing {
16+
min-width: min(92vw, 420px);
17+
max-width: min(92vw, 420px);
18+
border-radius: 1.25rem;
19+
}
20+
21+
.ws-link-menu-content {
22+
display: flex;
23+
align-items: center;
24+
gap: 0.5rem;
25+
padding: 0.5rem;
26+
}
27+
28+
.ws-link-menu-icon {
29+
color: oklch(var(--muted-foreground));
30+
}
31+
32+
.ws-link-menu-preview {
33+
display: inline-flex;
34+
min-width: 0;
35+
flex: 1 1 auto;
36+
align-items: center;
37+
border: 0;
38+
background: transparent;
39+
padding: 0;
40+
color: oklch(var(--muted-foreground));
41+
text-align: left;
42+
}
43+
44+
.ws-link-menu-preview:hover {
45+
color: oklch(var(--foreground));
46+
}
47+
48+
.ws-link-menu-text {
49+
overflow: hidden;
50+
text-overflow: ellipsis;
51+
white-space: nowrap;
52+
font-size: 0.95rem;
53+
line-height: 1.4;
54+
}
55+
56+
.ws-link-menu-edit {
57+
flex-shrink: 0;
58+
}
59+
60+
.ws-link-editor-content {
61+
padding: 1.25rem;
62+
}
63+
64+
.ws-link-editor-form {
65+
display: flex;
66+
flex-direction: column;
67+
gap: 1rem;
68+
}
69+
70+
.ws-link-editor-field {
71+
display: flex;
72+
flex-direction: column;
73+
gap: 0.55rem;
74+
}
75+
76+
.ws-link-editor-label {
77+
font-size: 0.92rem;
78+
font-weight: 600;
79+
color: oklch(var(--muted-foreground));
80+
}
81+
82+
.ws-link-editor-input {
83+
height: 3.25rem;
84+
border-radius: 0.95rem;
85+
font-size: 1rem;
86+
font-weight: 500;
87+
}
88+
89+
.ws-link-editor-separator {
90+
margin-top: 0.15rem;
91+
}
92+
93+
.ws-link-editor-actions {
94+
display: flex;
95+
align-items: center;
96+
justify-content: space-between;
97+
gap: 0.75rem;
98+
}
99+
100+
.ws-link-editor-remove {
101+
justify-content: flex-start;
102+
padding-left: 0;
103+
padding-right: 0.5rem;
104+
font-size: 1.05rem;
105+
font-weight: 600;
106+
color: oklch(var(--foreground));
107+
}
108+
109+
.ws-link-editor-remove:hover {
110+
background: transparent;
111+
color: oklch(var(--foreground));
112+
}
113+
114+
.ws-link-editor-submit {
115+
display: inline-flex;
116+
align-items: center;
117+
gap: 0.5rem;
118+
margin-left: auto;
119+
}

‎app/assets/css/writing-studio/plugins/table.css‎

Lines changed: 113 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,64 @@
11
.writing-editor .tiptap .tableWrapper {
2-
margin: 1.5rem 0;
2+
box-sizing: border-box;
3+
width: calc(100% - 1.5rem);
4+
max-width: calc(100% - 1.5rem);
5+
margin: 1.25rem 1.5rem 1.5rem 0;
36
overflow-x: auto;
7+
overflow-y: visible;
48
}
59

610
.writing-editor .tiptap table {
711
margin: 0;
812
overflow: hidden;
913
table-layout: fixed;
1014
width: 100%;
15+
max-width: 100%;
1116
border-collapse: collapse;
1217
}
1318

1419
.writing-editor .tiptap th,
15-
.writing-editor .tiptap td {
20+
.writing-editor .tiptap td,
21+
.writing-editor .tiptap .ws-table-header,
22+
.writing-editor .tiptap .ws-table-cell {
1623
box-sizing: border-box;
1724
min-width: 1em;
25+
width: auto;
1826
border: 1px solid oklch(var(--border));
1927
padding: 6px 8px;
2028
position: relative;
2129
vertical-align: top;
2230
}
2331

2432
.writing-editor .tiptap th>*,
25-
.writing-editor .tiptap td>* {
33+
.writing-editor .tiptap td>*,
34+
.writing-editor .tiptap .ws-table-header>*,
35+
.writing-editor .tiptap .ws-table-cell>* {
2636
margin-bottom: 0;
2737
}
2838

29-
.writing-editor .tiptap th {
30-
background: oklch(var(--muted));
39+
.writing-editor .tiptap th,
40+
.writing-editor .tiptap .ws-table-header {
41+
background: transparent;
3142
font-weight: 700;
3243
text-align: left;
3344
}
3445

46+
.writing-editor .tiptap th::before,
47+
.writing-editor .tiptap .ws-table-header::before {
48+
content: "";
49+
position: absolute;
50+
inset: 1px;
51+
z-index: 0;
52+
pointer-events: none;
53+
background: oklch(var(--muted));
54+
}
55+
56+
.writing-editor .tiptap th>*,
57+
.writing-editor .tiptap .ws-table-header>* {
58+
position: relative;
59+
z-index: 1;
60+
}
61+
3562
.writing-editor .tiptap table .selectedCell::after {
3663
content: "";
3764
position: absolute;
@@ -43,7 +70,7 @@
4370

4471
.writing-editor .tiptap table .selectedCell {
4572
border-style: double;
46-
border-color: rgba(0, 0, 0, .2);
73+
border-color: oklch(var(--primary));
4774
background-color: rgba(0, 0, 0, .05);
4875
}
4976

@@ -52,6 +79,7 @@
5279
top: 0;
5380
right: -2px;
5481
bottom: -2px;
82+
z-index: 4;
5583
width: 4px;
5684
pointer-events: none;
5785
background: oklch(var(--primary));
@@ -60,4 +88,82 @@
6088
.writing-editor .tiptap.resize-cursor {
6189
cursor: ew-resize;
6290
cursor: col-resize;
63-
}
91+
}
92+
93+
.ws-table-hover-control {
94+
box-sizing: border-box;
95+
position: absolute;
96+
z-index: 30;
97+
cursor: default;
98+
}
99+
100+
.ws-table-hover-control--column {
101+
min-height: 4rem;
102+
padding-inline-start: 0.5rem;
103+
}
104+
105+
.ws-table-hover-control--row {
106+
min-width: 6rem;
107+
padding-top: 0.5rem;
108+
}
109+
110+
.ws-table-hover-trigger {
111+
align-self: center;
112+
border: 1px solid oklch(var(--border));
113+
border-radius: 0.35rem;
114+
background: oklch(var(--background));
115+
color: oklch(var(--muted-foreground));
116+
box-shadow: 0 6px 14px -12px oklch(0 0 0 / 0.3);
117+
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
118+
}
119+
120+
.ws-table-hover-trigger:hover {
121+
background: oklch(var(--accent));
122+
color: oklch(var(--foreground));
123+
border-color: oklch(var(--border));
124+
}
125+
126+
.ws-table-hover-trigger:focus-visible {
127+
outline: 2px solid oklch(var(--ring));
128+
outline-offset: 2px;
129+
}
130+
131+
.ws-table-hover-control--column .ws-table-hover-trigger {
132+
width: 1rem;
133+
height: 100%;
134+
cursor: col-resize;
135+
}
136+
137+
.ws-table-hover-control--row .ws-table-hover-trigger {
138+
width: 100%;
139+
height: 1rem;
140+
cursor: row-resize;
141+
}
142+
143+
.ws-table-hover-card {
144+
min-width: 10rem;
145+
max-width: 13rem;
146+
display: flex;
147+
flex-direction: column;
148+
gap: 0.15rem;
149+
padding: 0.7rem 0.9rem;
150+
border-radius: 0.9rem;
151+
background: oklch(0.28 0 0 / 0.96);
152+
color: white;
153+
box-shadow: 0 18px 32px -20px oklch(0 0 0 / 0.65);
154+
text-wrap: pretty;
155+
}
156+
157+
.ws-table-hover-tooltip-title {
158+
font-size: 0.98rem;
159+
font-weight: 700;
160+
line-height: 1.25;
161+
text-align: center;
162+
}
163+
164+
.ws-table-hover-tooltip-description {
165+
font-size: 0.88rem;
166+
line-height: 1.35;
167+
text-align: center;
168+
color: rgba(255, 255, 255, 0.82);
169+
}

0 commit comments

Comments
 (0)