Skip to content

Commit 4962878

Browse files
HideInMatrixHideInMatrix
committed
feat: taptip 增加对齐方式和优化代码结构
1 parent f081644 commit 4962878

40 files changed

Lines changed: 1220 additions & 268 deletions

‎app/assets/css/tailwind.css‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,56 +3,57 @@
33
@layer base {
44
:root {
55
font-family: "Space Grotesk", "JetBrains Mono", "Segoe UI", sans-serif;
6-
color-scheme: light dark;
7-
--background: 0 0% 100%;
8-
--foreground: 240 10% 3.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 240 10% 3.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 240 10% 3.9%;
13-
--primary: 221.2 83.2% 53.3%;
14-
--primary-foreground: 210 40% 98%;
15-
--secondary: 210 40% 96.1%;
16-
--secondary-foreground: 222.2 47.4% 11.2%;
17-
--muted: 210 40% 96.1%;
18-
--muted-foreground: 215.4 16.3% 46.9%;
19-
--accent: 210 40% 96.1%;
20-
--accent-foreground: 222.2 47.4% 11.2%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 210 40% 98%;
23-
--border: 214.3 31.8% 91.4%;
24-
--input: 214.3 31.8% 91.4%;
25-
--ring: 221.2 83.2% 53.3%;
6+
color-scheme: light;
7+
--background: 1 0 0;
8+
--foreground: 0.141 0.005 285.823;
9+
--card: 1 0 0;
10+
--card-foreground: 0.141 0.005 285.823;
11+
--popover: 1 0 0;
12+
--popover-foreground: 0.141 0.005 285.823;
13+
--primary: 0.723 0.219 149.579;
14+
--primary-foreground: 0.982 0.018 155.826;
15+
--secondary: 0.967 0.001 286.375;
16+
--secondary-foreground: 0.21 0.006 285.885;
17+
--muted: 0.967 0.001 286.375;
18+
--muted-foreground: 0.552 0.016 285.938;
19+
--accent: 0.967 0.001 286.375;
20+
--accent-foreground: 0.21 0.006 285.885;
21+
--destructive: 0.577 0.245 27.325;
22+
--destructive-foreground: 0.982 0.018 155.826;
23+
--border: 0.92 0.004 286.32;
24+
--input: 0.92 0.004 286.32;
25+
--ring: 0.723 0.219 149.579;
2626
}
2727

2828
body {
2929
margin: 0;
30-
background-color: hsl(var(--background));
31-
color: hsl(var(--foreground));
30+
background-color: oklch(var(--background));
31+
color: oklch(var(--foreground));
3232
-webkit-font-smoothing: antialiased;
3333
-moz-osx-font-smoothing: grayscale;
3434
}
3535

3636
.dark {
37-
--background: 240 10% 3.9%;
38-
--foreground: 0 0% 98%;
39-
--card: 240 10% 3.9%;
40-
--card-foreground: 0 0% 98%;
41-
--popover: 240 10% 3.9%;
42-
--popover-foreground: 0 0% 98%;
43-
--primary: 217.2 91.2% 59.8%;
44-
--primary-foreground: 222.2 47.4% 11.2%;
45-
--secondary: 240 3.7% 15.9%;
46-
--secondary-foreground: 0 0% 98%;
47-
--muted: 240 3.7% 15.9%;
48-
--muted-foreground: 240 5% 64.9%;
49-
--accent: 240 3.7% 15.9%;
50-
--accent-foreground: 0 0% 98%;
51-
--destructive: 0 62.8% 30.6%;
52-
--destructive-foreground: 0 0% 98%;
53-
--border: 240 3.7% 15.9%;
54-
--input: 240 3.7% 15.9%;
55-
--ring: 217.2 91.2% 59.8%;
37+
color-scheme: dark;
38+
--background: 0.141 0.005 285.823;
39+
--foreground: 0.985 0 0;
40+
--card: 0.21 0.006 285.885;
41+
--card-foreground: 0.985 0 0;
42+
--popover: 0.21 0.006 285.885;
43+
--popover-foreground: 0.985 0 0;
44+
--primary: 0.696 0.17 162.48;
45+
--primary-foreground: 0.986 0.031 120.757;
46+
--secondary: 0.274 0.006 286.033;
47+
--secondary-foreground: 0.985 0 0;
48+
--muted: 0.274 0.006 286.033;
49+
--muted-foreground: 0.705 0.015 286.067;
50+
--accent: 0.274 0.006 286.033;
51+
--accent-foreground: 0.985 0 0;
52+
--destructive: 0.704 0.191 22.216;
53+
--destructive-foreground: 0.985 0 0;
54+
--border: 1 0 0 / 10%;
55+
--input: 1 0 0 / 15%;
56+
--ring: 0.527 0.154 150.069;
5657
}
5758
}
5859

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@import "./plugins/editor-base.css";
2+
@import "./plugins/drag-handle.css";
3+
@import "./plugins/heading.css";
4+
@import "./plugins/blockquote.css";
5+
@import "./plugins/code-block.css";
6+
@import "./plugins/text-style.css";
7+
@import "./plugins/mention.css";
8+
@import "./plugins/emoji.css";
9+
@import "./plugins/media.css";
10+
@import "./plugins/image.css";
11+
@import "./plugins/table.css";
12+
@import "./plugins/task-list.css";
13+
@import "./plugins/details.css";

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.writing-editor .tiptap blockquote {
2+
margin: 0.8rem 0;
3+
padding-left: 0.8rem;
4+
border-left: 3px solid oklch(var(--border));
5+
color: oklch(var(--muted-foreground));
6+
}

‎app/assets/css/writing-studio/plugins/code-block.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.writing-editor .tiptap pre {
2+
margin: 0.8rem 0;
3+
padding: 0.75rem 0.9rem;
4+
border-radius: 0.5rem;
5+
background: oklch(var(--secondary));
6+
overflow-x: auto;
7+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.writing-editor .tiptap .ws-details {
2+
margin: 0.8rem 0;
3+
border: 1px solid oklch(var(--border));
4+
border-radius: 0.5rem;
5+
}

‎app/assets/css/writing-studio/plugins/drag-handle.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.ws-drag-handle {
2+
display: inline-flex;
3+
gap: 0.25rem;
4+
align-items: center;
5+
justify-content: center;
6+
min-width: 2rem;
7+
height: 2rem;
8+
padding: 0 0.5rem;
9+
border: 1px solid transparent;
10+
border-radius: 0.375rem;
11+
background: transparent;
12+
color: oklch(var(--muted-foreground));
13+
font-size: 0.875rem;
14+
font-weight: 600;
15+
white-space: nowrap;
16+
line-height: 1;
17+
cursor: grab;
18+
user-select: none;
19+
transition: background-color 0.15s ease, color 0.15s ease;
20+
}
21+
22+
.ws-drag-handle:hover {
23+
background: oklch(var(--foreground) / 0.06);
24+
color: oklch(var(--foreground) / 0.85);
25+
}
26+
27+
.ws-drag-handle:active {
28+
background: oklch(var(--foreground) / 0.12);
29+
color: oklch(var(--foreground));
30+
cursor: grabbing;
31+
}
32+
33+
.ws-drag-handle .ws-drag-handle-icon {
34+
width: 1rem;
35+
height: 1rem;
36+
}

‎app/assets/css/writing-studio/plugins/editor-base.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.writing-editor .tiptap {
2+
min-height: 320px;
3+
padding-left: 1.5rem;
4+
outline: none;
5+
line-height: 1.7;
6+
color: oklch(var(--foreground));
7+
caret-color: oklch(var(--foreground));
8+
}
9+
10+
.writing-editor .tiptap p {
11+
margin: 0.6rem 0;
12+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.writing-editor .tiptap .ws-emoji {
2+
display: inline-flex;
3+
align-items: center;
4+
justify-content: center;
5+
}

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.writing-editor .tiptap h1,
2+
.writing-editor .tiptap h2,
3+
.writing-editor .tiptap h3,
4+
.writing-editor .tiptap h4,
5+
.writing-editor .tiptap h5,
6+
.writing-editor .tiptap h6 {
7+
margin: 0.8rem 0 0.5rem;
8+
line-height: 1.3;
9+
font-weight: 700;
10+
}
11+
12+
.writing-editor .tiptap h1 {
13+
font-size: 2rem;
14+
}
15+
16+
.writing-editor .tiptap h2 {
17+
font-size: 1.625rem;
18+
}
19+
20+
.writing-editor .tiptap h3 {
21+
font-size: 1.375rem;
22+
}
23+
24+
.writing-editor .tiptap h4 {
25+
font-size: 1.25rem;
26+
}
27+
28+
.writing-editor .tiptap h5 {
29+
font-size: 1.125rem;
30+
}
31+
32+
.writing-editor .tiptap h6 {
33+
font-size: 1rem;
34+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.writing-editor .tiptap img.ws-image {
2+
display: block;
3+
max-width: 100%;
4+
margin-top: 0.8rem;
5+
margin-bottom: 0.8rem;
6+
}
7+
8+
.writing-editor .tiptap img.ws-image[data-align="left"] {
9+
margin-left: 0;
10+
margin-right: auto;
11+
}
12+
13+
.writing-editor .tiptap img.ws-image[data-align="center"] {
14+
margin-left: auto;
15+
margin-right: auto;
16+
}
17+
18+
.writing-editor .tiptap img.ws-image[data-align="right"] {
19+
margin-left: auto;
20+
margin-right: 0;
21+
}
22+
23+
.writing-editor .tiptap img.ws-image.ProseMirror-selectednode {
24+
outline: 2px solid oklch(var(--primary) / 0.45);
25+
outline-offset: 2px;
26+
border-radius: 0.375rem;
27+
}
28+
29+
.ws-image-menu {
30+
display: flex;
31+
align-items: center;
32+
gap: 0.25rem;
33+
border: 1px solid oklch(var(--border));
34+
border-radius: 0.5rem;
35+
background: oklch(var(--popover));
36+
padding: 0.25rem;
37+
box-shadow: 0 10px 24px -12px oklch(0 0 0 / 0.5);
38+
}

0 commit comments

Comments
 (0)