@flexiui/svelte-rich-text 0.0.42 → 0.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/RichText.svelte +2 -2
  2. package/dist/styles.css +89 -185
  3. package/package.json +1 -1
package/dist/RichText.svelte CHANGED
@@ -229,7 +229,7 @@
229
229
  content,
230
230
  editorProps: {
231
231
  attributes: {
232
- class: "fl-rich-text-content-doc",
232
+ class: "fl-rich-text-doc",
233
233
  },
234
234
  handleKeyDown: (view, event) => {
235
235
  if (event.key === "Enter" && !event.ctrlKey) {
@@ -1292,7 +1292,7 @@
1292
1292
  aria-label="Audio"
1293
1293
  class:is-active={$editor.isActive("audio")}
1294
1294
  >
1295
- <svg style="transform: scale(1.1);" fill="#e8eaed" width="24px" viewBox="0 -960 960 960" height="24px" xmlns="http://www.w3.org/2000/svg"><path d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"></path></svg>
1295
+ <svg style="transform: scale(1.1);" fill="currentColor" width="24px" viewBox="0 -960 960 960" height="24px" xmlns="http://www.w3.org/2000/svg"><path d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"></path></svg>
1296
1296
  </button>
1297
1297
  </div>
1298
1298
 
package/dist/styles.css CHANGED
@@ -23,210 +23,114 @@
23
23
  --fl-doc-radius: 0;
24
24
  }
25
25
 
26
- /* Basic editor styles */
27
- .tiptap {
28
- outline: none;
29
-
30
- :first-child {
31
- margin-top: 0;
32
- }
33
-
34
- :last-child {
35
- margin-bottom: 0;
36
- }
37
-
38
- /* Code and preformatted text styles */
39
- code {
40
- background-color: var(--purple-light);
41
- border-radius: 0.4rem;
42
- color: var(--white);
43
- font-size: 0.85rem;
44
- padding: 0.25em 0.3em;
45
- }
46
-
47
- pre {
48
- background: var(--black);
49
- border-radius: 0.5rem;
50
- color: var(--white);
51
- font-family: 'JetBrainsMono', monospace;
52
- margin: 1.5rem 0;
53
- padding: 0.75rem 1rem;
54
-
55
- code {
56
- background: none;
57
- color: inherit;
58
- font-size: 0.8rem;
59
- padding: 0;
60
- }
61
- }
26
+ .special-box {
27
+ position: relative;
28
+ padding: 0 12px;
29
+ display: inline-flex;
62
30
 
63
- blockquote {
64
- border-left: 3px solid var(--gray-3);
65
- margin: 1.5rem 0;
66
- padding-left: 1rem;
31
+ &::before {
32
+ content: "";
33
+ position: absolute;
34
+ height: calc(100% + 20px);
35
+ width: 100%;
36
+ border-inline: 1px dashed;
37
+ left: 0;
38
+ top: -10px;
67
39
  }
68
40
 
69
- hr {
70
- border: none;
71
- border-top: 1px solid var(--gray-2);
72
- margin: 2rem 0;
41
+ &::after {
42
+ content: "";
43
+ position: absolute;
44
+ height: 100%;
45
+ top: 0;
46
+ left: -10px;
47
+ width: calc(100% + 20px);
48
+ border-block: 1px dashed;
73
49
  }
74
50
 
75
- /* List styles */
76
- ul,
77
- ol {
78
- padding: 0 1.25rem;
79
- margin: 1.25rem 1rem 1.25rem 0.4rem;
80
-
81
- li p {
82
- margin-top: 0.25em;
83
- margin-bottom: 0.25em;
84
- }
51
+ &::before, &::after {
52
+ border-color: #ffffff33;
53
+ pointer-events: none;
85
54
  }
55
+ }
86
56
 
87
- ul[data-type=taskList]{
88
- padding-left: 0;
89
-
90
- li {
91
- display: flex;
92
- flex-direction: row;
93
- align-items: flex-start;
94
- }
57
+ /* Table-specific styling */
58
+ .tableWrapper table {
59
+ border-collapse: collapse;
60
+ margin: 0;
61
+ overflow: hidden;
62
+ table-layout: fixed;
63
+ width: calc(100% - 12px);
64
+ margin-left: 12px;
65
+ margin-top: 12px;
66
+ min-width: 100px;
67
+ overflow-y: hidden;
68
+ overflow-x: auto;
69
+
70
+ td,
71
+ th {
72
+ border: 1px solid #6e6e6e;
73
+ box-sizing: border-box;
74
+ min-width: 1em;
75
+ padding: 6px 8px;
76
+ position: relative;
77
+ vertical-align: top;
95
78
 
96
- li[data-checked=true] > div > p {
97
- opacity: .5;
98
- text-decoration: line-through;
79
+ > * {
80
+ margin-bottom: 0;
99
81
  }
100
82
  }
101
83
 
102
- ul[data-type="taskList"] li {
103
- & label {
104
- position: relative;
105
- padding-top: 0.275rem;
106
- padding-right: 0.5rem;
107
-
108
- input {
109
- width: 16px;
110
- height: 16px;
111
- margin: 0;
112
- accent-color: #8affd7;
113
- }
114
- }
115
-
116
- & > div {
117
- flex: auto;
118
- }
84
+ th {
85
+ background-color: #f0f0f030;
86
+ font-weight: bold;
87
+ text-align: left;
119
88
  }
120
89
 
121
- .special-box {
122
- position: relative;
123
- padding: 0 12px;
124
- display: inline-flex;
125
-
126
- &::before {
127
- content: "";
128
- position: absolute;
129
- height: calc(100% + 20px);
130
- width: 100%;
131
- border-inline: 1px dashed;
132
- left: 0;
133
- top: -10px;
134
- }
135
-
136
- &::after {
137
- content: "";
138
- position: absolute;
139
- height: 100%;
140
- top: 0;
141
- left: -10px;
142
- width: calc(100% + 20px);
143
- border-block: 1px dashed;
144
- }
145
-
146
- &::before, &::after {
147
- border-color: #ffffff33;
148
- pointer-events: none;
149
- }
90
+ .selectedCell:after {
91
+ background: #e0e0e024;
92
+ content: '';
93
+ left: 0;
94
+ right: 0;
95
+ top: 0;
96
+ bottom: 0;
97
+ pointer-events: none;
98
+ position: absolute;
99
+ z-index: 2;
150
100
  }
151
101
 
152
- /* Table-specific styling */
153
- .tableWrapper table {
154
- border-collapse: collapse;
155
- margin: 0;
156
- overflow: hidden;
157
- table-layout: fixed;
158
- width: calc(100% - 12px);
159
- margin-left: 12px;
160
- margin-top: 12px;
161
- min-width: 100px;
162
- overflow-y: hidden;
163
- overflow-x: auto;
164
-
165
- td,
166
- th {
167
- border: 1px solid #6e6e6e;
168
- box-sizing: border-box;
169
- min-width: 1em;
170
- padding: 6px 8px;
171
- position: relative;
172
- vertical-align: top;
173
-
174
- > * {
175
- margin-bottom: 0;
176
- }
177
- }
178
-
179
- th {
180
- background-color: #f0f0f030;
181
- font-weight: bold;
182
- text-align: left;
183
- }
184
-
185
- .selectedCell:after {
186
- background: #e0e0e024;
187
- content: '';
188
- left: 0;
189
- right: 0;
190
- top: 0;
191
- bottom: 0;
192
- pointer-events: none;
193
- position: absolute;
194
- z-index: 2;
195
- }
196
-
197
- .column-resize-handle {
198
- background-color: var(--purple);
199
- bottom: -2px;
200
- pointer-events: none;
201
- position: absolute;
202
- right: -2px;
203
- top: 0;
204
- width: 4px;
205
- }
102
+ .column-resize-handle {
103
+ background-color: var(--purple);
104
+ bottom: -2px;
105
+ pointer-events: none;
106
+ position: absolute;
107
+ right: -2px;
108
+ top: 0;
109
+ width: 4px;
206
110
  }
111
+ }
207
112
 
208
- .fl-table-cell-content > div > * {
209
- margin-bottom: 0;
210
- }
113
+ .fl-table-cell-content > div > * {
114
+ margin-bottom: 0;
115
+ }
211
116
 
212
- .tableWrapper {
213
- overflow-x: auto;
214
- padding: 0 14px 14px;
215
- margin: 24px -14px 0px;
216
- }
117
+ .tableWrapper {
118
+ overflow-x: auto;
119
+ padding: 0 14px 14px;
120
+ margin: 24px -14px 0px;
121
+ }
217
122
 
218
- &.resize-cursor {
219
- cursor: ew-resize;
220
- cursor: col-resize;
221
- }
123
+ &.resize-cursor {
124
+ cursor: ew-resize;
125
+ cursor: col-resize;
126
+ }
222
127
 
223
- .is-empty::before {
224
- color: #8a8a8aa8;
225
- content: attr(data-placeholder);
226
- float: left;
227
- height: 0;
228
- pointer-events: none;
229
- }
128
+ .is-empty::before {
129
+ color: #8a8a8aa8;
130
+ content: attr(data-placeholder);
131
+ float: left;
132
+ height: 0;
133
+ pointer-events: none;
230
134
  }
231
135
 
232
136
  .fl-rich-text-content {
@@ -240,7 +144,7 @@
240
144
  width: 100%;
241
145
  }
242
146
 
243
- .fl-rich-text-content-doc {
147
+ .fl-rich-text-doc {
244
148
  padding: var(--fl-doc-padding, 2rem);
245
149
  background: var(--fl-doc-bg, transparent);
246
150
  border-radius: var(--fl-doc-radius, 12px);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexiui/svelte-rich-text",
3
- "version": "0.0.42",
3
+ "version": "0.0.44",
4
4
  "description": "A lightweight and flexible rich text editor component for Svelte",
5
5
  "keywords": [
6
6
  "svelte",