Skip to content

Commit 2eabc6a

Browse files
HideInMatrixHideInMatrix
committed
feat: taptip 图片上传节点和图片对齐方式设置
1 parent 469c7c6 commit 2eabc6a

30 files changed

+1054
-617
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "./plugins/emoji.css";
99
@import "./plugins/media.css";
1010
@import "./plugins/image.css";
11+
@import "./plugins/image-upload-node.css";
1112
@import "./plugins/list.css";
1213
@import "./plugins/table.css";
1314
@import "./plugins/task-list.css";

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.writing-editor .tiptap .ws-image-upload-node {
2+
margin: 0.9rem 0;
3+
}
4+
5+
.writing-editor .tiptap .ws-image-upload-node-view {
6+
width: 100%;
7+
border: 1px solid oklch(var(--border));
8+
border-radius: 0.9rem;
9+
background: oklch(var(--card));
10+
padding: 0.875rem;
11+
box-shadow: 0 10px 22px -16px oklch(0 0 0 / 0.45);
12+
}
13+
14+
.writing-editor .tiptap .ws-image-upload-node-dropzone {
15+
width: 100%;
16+
border: 2px dashed oklch(var(--primary) / 0.75);
17+
border-radius: 0.75rem;
18+
min-height: 9rem;
19+
background: oklch(var(--muted) / 0.4);
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
gap: 0.45rem;
25+
text-align: center;
26+
padding: 1rem;
27+
transition: border-color 0.15s ease, background-color 0.15s ease;
28+
}
29+
30+
.writing-editor .tiptap .ws-image-upload-node-dropzone.is-dragging {
31+
border-color: oklch(var(--primary));
32+
background: oklch(var(--primary) / 0.12);
33+
}
34+
35+
.writing-editor .tiptap .ws-image-upload-node-dropzone-icon {
36+
width: 1.9rem;
37+
height: 1.9rem;
38+
color: oklch(var(--primary));
39+
}
40+
41+
.writing-editor .tiptap .ws-image-upload-node-dropzone-title {
42+
font-size: 1rem;
43+
font-weight: 600;
44+
color: oklch(var(--foreground));
45+
}
46+
47+
.writing-editor .tiptap .ws-image-upload-node-dropzone-hint {
48+
font-size: 0.86rem;
49+
color: oklch(var(--muted-foreground));
50+
}
51+
52+
.writing-editor .tiptap .ws-image-upload-node-item {
53+
border: 1px solid oklch(var(--border));
54+
border-radius: 0.75rem;
55+
background: oklch(var(--background));
56+
padding: 0.75rem;
57+
}
58+
59+
.writing-editor .tiptap .ws-image-upload-node-item-main {
60+
display: flex;
61+
align-items: center;
62+
gap: 0.625rem;
63+
}
64+
65+
.writing-editor .tiptap .ws-image-upload-node-item-leading {
66+
width: 2rem;
67+
height: 2rem;
68+
border-radius: 999px;
69+
background: oklch(var(--primary) / 0.12);
70+
color: oklch(var(--primary));
71+
display: inline-flex;
72+
align-items: center;
73+
justify-content: center;
74+
flex: 0 0 auto;
75+
}
76+
77+
.writing-editor .tiptap .ws-image-upload-node-item-icon {
78+
width: 1rem;
79+
height: 1rem;
80+
}
81+
82+
.writing-editor .tiptap .ws-image-upload-node-item-body {
83+
flex: 1;
84+
min-width: 0;
85+
}
86+
87+
.writing-editor .tiptap .ws-image-upload-node-item-name {
88+
font-size: 0.9rem;
89+
color: oklch(var(--foreground));
90+
line-height: 1.2;
91+
word-break: break-all;
92+
}
93+
94+
.writing-editor .tiptap .ws-image-upload-node-item-meta {
95+
margin-top: 0.18rem;
96+
display: flex;
97+
align-items: center;
98+
justify-content: space-between;
99+
gap: 0.5rem;
100+
font-size: 0.75rem;
101+
color: oklch(var(--muted-foreground));
102+
}
103+
104+
.writing-editor .tiptap .ws-image-upload-node-item-status {
105+
color: oklch(var(--primary));
106+
display: inline-flex;
107+
align-items: center;
108+
gap: 0.25rem;
109+
}
110+
111+
.writing-editor .tiptap .ws-image-upload-node-item-progress-track {
112+
margin-top: 0.38rem;
113+
width: 100%;
114+
height: 0.3rem;
115+
border-radius: 999px;
116+
background: oklch(var(--muted));
117+
overflow: hidden;
118+
}
119+
120+
.writing-editor .tiptap .ws-image-upload-node-item-progress-fill {
121+
width: 0;
122+
height: 100%;
123+
border-radius: inherit;
124+
background: oklch(var(--primary));
125+
transition: width 0.18s ease;
126+
}
127+
128+
.writing-editor .tiptap .ws-image-upload-node-item-progress-fill.is-error {
129+
background: oklch(var(--destructive));
130+
}
131+
132+
.writing-editor .tiptap .ws-image-upload-node-actions {
133+
margin-top: 0.5rem;
134+
display: flex;
135+
gap: 0.375rem;
136+
}
137+
138+
.writing-editor .tiptap .ws-image-upload-node-mode {
139+
margin-top: 0.55rem;
140+
font-size: 0.75rem;
141+
color: oklch(var(--muted-foreground));
142+
}

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

Lines changed: 24 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.writing-editor .tiptap img.ws-image {
1+
.writing-editor .tiptap img[data-align] {
22
display: block;
33
max-width: 100%;
44
margin-top: 0.8rem;
@@ -10,7 +10,24 @@
1010
}
1111

1212
.writing-editor .tiptap [data-resize-container][data-node="image"] [data-resize-wrapper] {
13-
display: inline-block;
13+
display: block !important;
14+
width: fit-content;
15+
max-width: 100%;
16+
}
17+
18+
.writing-editor .tiptap [data-resize-container][data-node="image"] [data-resize-wrapper]:has(> img[data-align="left"]) {
19+
margin-left: 0;
20+
margin-right: auto;
21+
}
22+
23+
.writing-editor .tiptap [data-resize-container][data-node="image"] [data-resize-wrapper]:has(> img[data-align="center"]) {
24+
margin-left: auto;
25+
margin-right: auto;
26+
}
27+
28+
.writing-editor .tiptap [data-resize-container][data-node="image"] [data-resize-wrapper]:has(> img[data-align="right"]) {
29+
margin-left: auto;
30+
margin-right: 0;
1431
}
1532

1633
.writing-editor .tiptap [data-resize-container][data-node="image"] [data-resize-handle] {
@@ -76,28 +93,28 @@
7693
cursor: nesw-resize;
7794
}
7895

79-
.writing-editor .tiptap img.ws-image[data-align="left"] {
96+
.writing-editor .tiptap img[data-align="left"] {
8097
margin-left: 0;
8198
margin-right: auto;
8299
}
83100

84-
.writing-editor .tiptap img.ws-image[data-align="center"] {
101+
.writing-editor .tiptap img[data-align="center"] {
85102
margin-left: auto;
86103
margin-right: auto;
87104
}
88105

89-
.writing-editor .tiptap img.ws-image[data-align="right"] {
106+
.writing-editor .tiptap img[data-align="right"] {
90107
margin-left: auto;
91108
margin-right: 0;
92109
}
93110

94-
.writing-editor .tiptap img.ws-image.ProseMirror-selectednode {
111+
.writing-editor .tiptap img[data-align].ProseMirror-selectednode {
95112
outline: 2px solid oklch(var(--primary) / 0.45);
96113
outline-offset: 2px;
97114
border-radius: 0.375rem;
98115
}
99116

100-
.writing-editor .tiptap [data-resize-container][data-node="image"].ProseMirror-selectednode img.ws-image {
117+
.writing-editor .tiptap [data-resize-container][data-node="image"].ProseMirror-selectednode img[data-align] {
101118
outline: 2px solid oklch(var(--primary) / 0.45);
102119
outline-offset: 2px;
103120
border-radius: 0.375rem;
@@ -113,166 +130,3 @@
113130
padding: 0.25rem;
114131
box-shadow: 0 10px 24px -12px oklch(0 0 0 / 0.5);
115132
}
116-
117-
.ws-image-upload-panel {
118-
border: 1px solid oklch(var(--border));
119-
border-radius: 0.75rem;
120-
background: oklch(var(--card));
121-
padding: 0.75rem;
122-
box-shadow: 0 10px 20px -16px oklch(0 0 0 / 0.45);
123-
}
124-
125-
.ws-image-upload-panel-header {
126-
display: flex;
127-
align-items: center;
128-
justify-content: space-between;
129-
gap: 0.5rem;
130-
margin-bottom: 0.75rem;
131-
}
132-
133-
.ws-image-upload-panel-title {
134-
font-size: 0.875rem;
135-
font-weight: 600;
136-
color: oklch(var(--foreground));
137-
}
138-
139-
.ws-image-upload-dropzone {
140-
width: 100%;
141-
border: 2px dashed oklch(var(--primary) / 0.75);
142-
border-radius: 0.75rem;
143-
background: oklch(var(--muted) / 0.38);
144-
min-height: 8.5rem;
145-
padding: 1rem;
146-
display: flex;
147-
flex-direction: column;
148-
align-items: center;
149-
justify-content: center;
150-
gap: 0.45rem;
151-
text-align: center;
152-
transition: background-color 0.15s ease, border-color 0.15s ease;
153-
}
154-
155-
.ws-image-upload-dropzone.is-dragging {
156-
border-color: oklch(var(--primary));
157-
background: oklch(var(--primary) / 0.1);
158-
}
159-
160-
.ws-image-upload-dropzone-icon {
161-
width: 1.8rem;
162-
height: 1.8rem;
163-
color: oklch(var(--primary));
164-
}
165-
166-
.ws-image-upload-dropzone-title {
167-
font-size: 1rem;
168-
font-weight: 600;
169-
color: oklch(var(--foreground));
170-
}
171-
172-
.ws-image-upload-dropzone-hint {
173-
font-size: 0.875rem;
174-
color: oklch(var(--muted-foreground));
175-
}
176-
177-
.ws-image-upload-mode-text {
178-
margin-top: 0.5rem;
179-
font-size: 0.75rem;
180-
color: oklch(var(--muted-foreground));
181-
}
182-
183-
.ws-image-upload-list {
184-
margin-top: 0.75rem;
185-
display: flex;
186-
flex-direction: column;
187-
gap: 0.5rem;
188-
}
189-
190-
.ws-image-upload-item {
191-
border: 1px solid oklch(var(--border));
192-
border-radius: 0.75rem;
193-
background: oklch(var(--background));
194-
padding: 0.625rem 0.75rem;
195-
}
196-
197-
.ws-image-upload-item-main {
198-
display: flex;
199-
flex-direction: column;
200-
gap: 0.375rem;
201-
}
202-
203-
.ws-image-upload-item-name-row {
204-
display: flex;
205-
align-items: center;
206-
justify-content: space-between;
207-
gap: 0.5rem;
208-
}
209-
210-
.ws-image-upload-item-name {
211-
font-size: 0.875rem;
212-
color: oklch(var(--foreground));
213-
line-height: 1.2;
214-
word-break: break-all;
215-
}
216-
217-
.ws-image-upload-item-remove {
218-
width: 1.5rem;
219-
height: 1.5rem;
220-
border-radius: 0.375rem;
221-
display: inline-flex;
222-
align-items: center;
223-
justify-content: center;
224-
color: oklch(var(--muted-foreground));
225-
}
226-
227-
.ws-image-upload-item-remove:hover {
228-
background: oklch(var(--muted));
229-
color: oklch(var(--foreground));
230-
}
231-
232-
.ws-image-upload-item-meta-row {
233-
display: flex;
234-
align-items: center;
235-
justify-content: space-between;
236-
gap: 0.5rem;
237-
}
238-
239-
.ws-image-upload-item-size {
240-
font-size: 0.75rem;
241-
color: oklch(var(--muted-foreground));
242-
}
243-
244-
.ws-image-upload-item-status {
245-
font-size: 0.75rem;
246-
color: oklch(var(--primary));
247-
display: inline-flex;
248-
align-items: center;
249-
gap: 0.25rem;
250-
}
251-
252-
.ws-image-upload-progress-track {
253-
position: relative;
254-
width: 100%;
255-
height: 0.28rem;
256-
border-radius: 999px;
257-
background: oklch(var(--muted));
258-
overflow: hidden;
259-
}
260-
261-
.ws-image-upload-progress-fill {
262-
position: absolute;
263-
left: 0;
264-
top: 0;
265-
bottom: 0;
266-
width: 0;
267-
border-radius: inherit;
268-
background: oklch(var(--primary));
269-
transition: width 0.18s ease;
270-
}
271-
272-
.ws-image-upload-progress-fill.is-success {
273-
background: oklch(var(--primary));
274-
}
275-
276-
.ws-image-upload-progress-fill.is-error {
277-
background: oklch(var(--destructive));
278-
}

0 commit comments

Comments
 (0)