@meowdown/core 0.29.2 → 0.30.0
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.
- package/README.md +14 -20
- package/dist/style.css +554 -542
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -75,29 +75,23 @@ const markdown = docToMarkdown(editor.state.doc)
|
|
|
75
75
|
|
|
76
76
|
## Styling
|
|
77
77
|
|
|
78
|
-
`@meowdown/core/style.css` ships a default editor theme. Colors use `light-dark()`, so they follow the page's `color-scheme` (set `color-scheme: light dark` on `:root` for automatic dark mode).
|
|
79
|
-
|
|
80
|
-
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
- `--meowdown-
|
|
91
|
-
- `--meowdown-gutter`: horizontal editor padding. Applied to the editable root's `.meowdown-content` class (set by `@meowdown/react`), not `.ProseMirror`, so the block handle's drag preview stays unpadded. Floating UI such as the block handle lives inside it; keep it at least `3.5rem`.
|
|
92
|
-
- `--meowdown-selection`: text `::selection` background.
|
|
93
|
-
- `--meowdown-node-outline`: outline of a selected node; border color of selected tables and cells.
|
|
94
|
-
- `--meowdown-node-selection`: background wash of a selected node or selected cells.
|
|
95
|
-
|
|
96
|
-
Selection colors are standalone variables, not derived from `--meowdown-accent`, so selection can be restyled independently.
|
|
78
|
+
`@meowdown/core/style.css` ships a default editor theme. Colors use `light-dark()`, so they follow the page's `color-scheme` (set `color-scheme: light dark` on `:root` for automatic dark mode). Theme it by overriding the `--meowdown-*` variables on `:root` or any ancestor. The full list, with a one-line description and default for each, lives in the commented `:root` block at the top of [`style.css`](./src/style.css), which is the single source of truth.
|
|
79
|
+
|
|
80
|
+
meowdown's CSS is wrapped in a cascade layer, `@layer meowdown` (with sub-layers `meowdown.base` for the bundled ProseMirror / prosekit base styles, `meowdown.theme` for the variables, and `meowdown.editor` for the editor rules). Because an un-layered rule always beats a layered one, **any plain rule you write overrides meowdown with no `!important` and no specificity hacks** (e.g. `.ProseMirror h1 { font-size: 2rem }` wins over meowdown's layered heading rule). Put your overrides outside any `@layer`, or in a layer you declare after `meowdown`.
|
|
81
|
+
|
|
82
|
+
**With Tailwind CSS v4**, import `@meowdown/core/style.css` _after_ `@import 'tailwindcss'` so the `meowdown` layer sorts after Tailwind's `theme` / `base` / `components` / `utilities`. That keeps meowdown's editor styles from being reset by Tailwind's `base` (Preflight) while your own un-layered rules still win. One caveat: with that order the `meowdown` layer also sorts after `utilities`, so a Tailwind utility _class_ placed directly on an editor element will not beat meowdown. If you need utilities to win (while meowdown still beats Preflight), declare the layer order yourself with `utilities` last, referencing the umbrella `meowdown` layer (not its sub-layers). Doing this at the top of your CSS also pins the order even when meowdown's stylesheet is code-split / lazy-loaded:
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
@layer theme, base, components, meowdown, utilities;
|
|
86
|
+
@import 'tailwindcss';
|
|
87
|
+
@import '@meowdown/core/style.css';
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Two things the variable list cannot show: `--meowdown-gutter` is the horizontal editor padding, applied to the editable root's `.meowdown-content` class (set by `@meowdown/react`), not `.ProseMirror`, so the block handle's drag preview stays unpadded; floating UI such as the block handle lives inside it, so keep it at least `3.5rem`. The selection variables (`--meowdown-selection`, `--meowdown-node-outline`, `--meowdown-node-selection`) are standalone, not derived from `--meowdown-accent`, so selection can be restyled independently.
|
|
97
91
|
|
|
98
92
|
Tags (`#tag`) render as pills via the `.md-tag` class, tinted from `--meowdown-accent`. Wire click handling with `defineTagClickHandler(({ tag, event }) => ...)` (or `@meowdown/react`'s `onTagClick` prop); `tag` is read from the rendered text without the leading `#`.
|
|
99
93
|
|
|
100
|
-
Wikilinks (`[[target]]`/`[[target|alias]]`) render in place via a mark view as an immutable label (the alias, or the target when there is no alias), with the raw source hidden in hide and focus modes and shown dimmed in show mode. The label uses the `.md-wikilink-label` class
|
|
94
|
+
Wikilinks (`[[target]]`/`[[target|alias]]`) render in place via a mark view as an immutable label (the alias, or the target when there is no alias), with the raw source hidden in hide and focus modes and shown dimmed in show mode. The label uses the `.md-wikilink-view-label` class, dashed-underlined and colored by `--meowdown-accent`. In every mark mode the link is a single immutable caret stop: arrowing onto it selects the whole source (ringed with `--meowdown-node-outline` in hide and focus, the native selection over the visible source in show), and Backspace/Delete remove it as a unit. Wire click navigation with `defineWikilinkClickHandler(({ target, event }) => ...)` (or `@meowdown/react`'s `onWikilinkClick` prop).
|
|
101
95
|
|
|
102
96
|
Markdown links (`[text](url)`) render the label as an `<a href>` with the `.md-link` class, colored by `--meowdown-accent`; the `[`, `]`, and `(url)` syntax dims in show mode and hides in hide and focus modes. Wire click handling with `defineLinkClickHandler(({ href, event }) => ...)` (or `@meowdown/react`'s `onLinkClick` prop).
|
|
103
97
|
|
package/dist/style.css
CHANGED
|
@@ -1,669 +1,681 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
@layer meowdown.base {
|
|
2
|
+
.ProseMirror {
|
|
3
|
+
word-wrap: break-word;
|
|
4
|
+
white-space: pre-wrap;
|
|
5
|
+
white-space: break-spaces;
|
|
6
|
+
-webkit-font-variant-ligatures: none;
|
|
7
|
+
font-variant-ligatures: none;
|
|
8
|
+
font-feature-settings: "liga" 0;
|
|
9
|
+
position: relative;
|
|
10
|
+
}
|
|
10
11
|
|
|
11
|
-
.ProseMirror pre {
|
|
12
|
-
|
|
13
|
-
}
|
|
12
|
+
.ProseMirror pre {
|
|
13
|
+
white-space: pre-wrap;
|
|
14
|
+
}
|
|
14
15
|
|
|
15
|
-
.ProseMirror li {
|
|
16
|
-
|
|
17
|
-
}
|
|
16
|
+
.ProseMirror li {
|
|
17
|
+
position: relative;
|
|
18
|
+
}
|
|
18
19
|
|
|
19
|
-
.ProseMirror-hideselection ::selection {
|
|
20
|
-
|
|
21
|
-
}
|
|
20
|
+
.ProseMirror-hideselection ::selection {
|
|
21
|
+
background: none;
|
|
22
|
+
}
|
|
22
23
|
|
|
23
|
-
.ProseMirror-hideselection {
|
|
24
|
-
|
|
25
|
-
}
|
|
24
|
+
.ProseMirror-hideselection {
|
|
25
|
+
caret-color: #0000;
|
|
26
|
+
}
|
|
26
27
|
|
|
27
|
-
.ProseMirror [draggable][contenteditable="false"] {
|
|
28
|
-
|
|
29
|
-
}
|
|
28
|
+
.ProseMirror [draggable][contenteditable="false"] {
|
|
29
|
+
user-select: text;
|
|
30
|
+
}
|
|
30
31
|
|
|
31
|
-
.ProseMirror-selectednode {
|
|
32
|
-
|
|
33
|
-
}
|
|
32
|
+
.ProseMirror-selectednode {
|
|
33
|
+
outline: 2px solid #8cf;
|
|
34
|
+
}
|
|
34
35
|
|
|
35
|
-
li.ProseMirror-selectednode {
|
|
36
|
-
|
|
37
|
-
}
|
|
36
|
+
li.ProseMirror-selectednode {
|
|
37
|
+
outline: none;
|
|
38
|
+
}
|
|
38
39
|
|
|
39
|
-
li.ProseMirror-selectednode:after {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
40
|
+
li.ProseMirror-selectednode:after {
|
|
41
|
+
content: "";
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
border: 2px solid #8cf;
|
|
44
|
+
position: absolute;
|
|
45
|
+
inset: -2px -2px -2px -32px;
|
|
46
|
+
}
|
|
46
47
|
|
|
47
|
-
img.ProseMirror-separator {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
48
|
+
img.ProseMirror-separator {
|
|
49
|
+
border: none !important;
|
|
50
|
+
margin: 0 !important;
|
|
51
|
+
display: inline !important;
|
|
52
|
+
}
|
|
52
53
|
|
|
53
|
-
:root {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
54
|
+
:root {
|
|
55
|
+
--prosekit-list-bullet-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5' fill='currentColor'/%3E%3C/svg%3E");
|
|
56
|
+
--prosekit-list-toggle-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='8,10 12,14 16,10' fill='currentColor'/%3E%3C/svg%3E");
|
|
57
|
+
--prosekit-list-toggle-closed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpolygon points='10,8 14,12 10,16' fill='currentColor'/%3E%3C/svg%3E");
|
|
58
|
+
}
|
|
58
59
|
|
|
59
|
-
.prosemirror-flat-list {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
60
|
+
.prosemirror-flat-list {
|
|
61
|
+
margin: 0;
|
|
62
|
+
padding: 0;
|
|
63
|
+
list-style: none;
|
|
64
|
+
position: relative;
|
|
65
|
+
}
|
|
65
66
|
|
|
66
|
-
.prosemirror-flat-list > .list-marker {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
67
|
+
.prosemirror-flat-list > .list-marker {
|
|
68
|
+
text-align: center;
|
|
69
|
+
width: 1lh;
|
|
70
|
+
height: 1lh;
|
|
71
|
+
position: absolute;
|
|
72
|
+
inset-inline-start: 0;
|
|
73
|
+
}
|
|
73
74
|
|
|
74
|
-
.prosemirror-flat-list > .list-content {
|
|
75
|
-
|
|
76
|
-
}
|
|
75
|
+
.prosemirror-flat-list > .list-content {
|
|
76
|
+
margin-inline-start: 1lh;
|
|
77
|
+
}
|
|
77
78
|
|
|
78
|
-
.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
79
|
+
.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker, .prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
|
|
80
|
+
background-color: currentColor;
|
|
81
|
+
mask-position: center;
|
|
82
|
+
mask-size: contain;
|
|
83
|
+
mask-repeat: no-repeat;
|
|
84
|
+
}
|
|
84
85
|
|
|
85
|
-
.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
|
|
86
|
-
|
|
87
|
-
}
|
|
86
|
+
.prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
|
|
87
|
+
mask-image: var(--prosekit-list-bullet-icon);
|
|
88
|
+
}
|
|
88
89
|
|
|
89
|
-
.prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
|
|
90
|
-
|
|
91
|
-
}
|
|
90
|
+
.prosemirror-flat-list[data-list-kind="toggle"] > .list-marker {
|
|
91
|
+
mask-image: var(--prosekit-list-toggle-open-icon);
|
|
92
|
+
}
|
|
92
93
|
|
|
93
|
-
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
|
|
94
|
-
|
|
95
|
-
}
|
|
94
|
+
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-marker {
|
|
95
|
+
mask-image: var(--prosekit-list-toggle-closed-icon);
|
|
96
|
+
}
|
|
96
97
|
|
|
97
|
-
.prosemirror-flat-list[data-list-kind="ordered"] > * {
|
|
98
|
-
|
|
99
|
-
}
|
|
98
|
+
.prosemirror-flat-list[data-list-kind="ordered"] > * {
|
|
99
|
+
contain: style;
|
|
100
|
+
}
|
|
100
101
|
|
|
101
|
-
.prosemirror-flat-list[data-list-kind="ordered"]:before {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
102
|
+
.prosemirror-flat-list[data-list-kind="ordered"]:before {
|
|
103
|
+
content: counter(prosemirror-flat-list-counter, decimal) ". ";
|
|
104
|
+
font-variant-numeric: tabular-nums;
|
|
105
|
+
position: absolute;
|
|
106
|
+
inset-inline-end: calc(100% - 1lh);
|
|
107
|
+
}
|
|
107
108
|
|
|
108
|
-
.prosemirror-flat-list[data-list-kind="ordered"] {
|
|
109
|
-
|
|
110
|
-
}
|
|
109
|
+
.prosemirror-flat-list[data-list-kind="ordered"] {
|
|
110
|
+
counter-increment: prosemirror-flat-list-counter;
|
|
111
|
+
}
|
|
111
112
|
|
|
112
|
-
.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
|
|
113
|
-
|
|
114
|
-
}
|
|
113
|
+
.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"] {
|
|
114
|
+
counter-reset: prosemirror-flat-list-counter;
|
|
115
|
+
}
|
|
115
116
|
|
|
116
|
-
@supports (counter-set: prosemirror-flat-list-counter 1) {
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
@supports (counter-set: prosemirror-flat-list-counter 1) {
|
|
118
|
+
:is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
|
|
119
|
+
counter-set: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
|
|
120
|
+
}
|
|
119
121
|
}
|
|
120
|
-
}
|
|
121
122
|
|
|
122
|
-
@supports not (counter-set: prosemirror-flat-list-counter 1) {
|
|
123
|
-
|
|
124
|
-
|
|
123
|
+
@supports not (counter-set: prosemirror-flat-list-counter 1) {
|
|
124
|
+
:is(.prosemirror-flat-list[data-list-kind="ordered"]:first-child, :not(.prosemirror-flat-list[data-list-kind="ordered"]) + .prosemirror-flat-list[data-list-kind="ordered"])[data-list-order] {
|
|
125
|
+
counter-increment: prosemirror-flat-list-counter var(--prosemirror-flat-list-order);
|
|
126
|
+
}
|
|
125
127
|
}
|
|
126
|
-
}
|
|
127
128
|
|
|
128
|
-
.prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
}
|
|
129
|
+
.prosemirror-flat-list[data-list-kind="task"] > .list-marker, .prosemirror-flat-list[data-list-kind="task"] > .list-marker * {
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
justify-content: center;
|
|
132
|
+
align-items: center;
|
|
133
|
+
margin: 0;
|
|
134
|
+
padding: 0;
|
|
135
|
+
display: flex;
|
|
136
|
+
}
|
|
136
137
|
|
|
137
|
-
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
|
|
138
|
-
|
|
139
|
-
}
|
|
138
|
+
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable] > .list-marker {
|
|
139
|
+
cursor: pointer;
|
|
140
|
+
}
|
|
140
141
|
|
|
141
|
-
.prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
142
|
+
.prosemirror-flat-list[data-list-kind="toggle"]:not([data-list-collapsable]) > .list-marker {
|
|
143
|
+
opacity: .4;
|
|
144
|
+
pointer-events: none;
|
|
145
|
+
}
|
|
145
146
|
|
|
146
|
-
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
|
|
147
|
-
|
|
147
|
+
.prosemirror-flat-list[data-list-kind="toggle"][data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
148
150
|
}
|
|
149
151
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
152
|
+
@layer meowdown.theme {
|
|
153
|
+
:root {
|
|
154
|
+
--meowdown-text: light-dark(oklch(37% .012 286), oklch(87.1% .005 286));
|
|
155
|
+
--meowdown-heading: light-dark(oklch(21% .006 286), oklch(98.5% 0 0));
|
|
156
|
+
--meowdown-muted: light-dark(oklch(44.2% .015 286), oklch(71.2% .013 286));
|
|
157
|
+
--meowdown-accent: light-dark(oklch(64.6% .194 41), oklch(75.8% .159 56));
|
|
158
|
+
--meowdown-mark: var(--meowdown-muted);
|
|
159
|
+
--meowdown-highlight: light-dark(oklch(94.5% .124 102), oklch(47.6% .103 62));
|
|
160
|
+
--meowdown-border: light-dark(oklch(92% .004 286), oklch(37% .012 286));
|
|
161
|
+
--meowdown-blockquote-border: color-mix(in oklab, var(--meowdown-accent) 35%, transparent);
|
|
162
|
+
--meowdown-code-bg: light-dark(oklch(96.7% 0 0), oklch(21% .006 286));
|
|
163
|
+
--meowdown-image-loading-bg: light-dark(oklch(96.7% 0 0), oklch(27.4% .005 286));
|
|
164
|
+
--meowdown-image-radius: .5rem;
|
|
165
|
+
--meowdown-table-header-bg: light-dark(oklch(98.5% 0 0), oklch(27.4% .005 286));
|
|
166
|
+
--meowdown-popover-bg: light-dark(oklch(100% 0 0), oklch(21% .006 286));
|
|
167
|
+
--meowdown-popover-hover-bg: light-dark(oklch(96.7% 0 0), oklch(27.4% .005 286));
|
|
168
|
+
--meowdown-danger: light-dark(oklch(63.7% .208 25), oklch(71.1% .166 22));
|
|
169
|
+
--meowdown-placeholder: var(--meowdown-muted);
|
|
170
|
+
--meowdown-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
171
|
+
--meowdown-node-outline: light-dark(oklch(64.2% .178 46), oklch(74.1% .165 52));
|
|
172
|
+
--meowdown-node-selection: light-dark(oklch(69.3% .194 46 / .1), oklch(74.1% .165 52 / .12));
|
|
173
|
+
--meowdown-selection: light-dark(oklch(69.3% .194 46 / .22), oklch(74.1% .165 52 / .3));
|
|
174
|
+
--meowdown-bullet: var(--meowdown-muted);
|
|
175
|
+
--meowdown-bullet-radius: 2.5px;
|
|
176
|
+
--meowdown-bullet-halo-radius: 5.5px;
|
|
177
|
+
--meowdown-bullet-collapsed: var(--meowdown-accent);
|
|
178
|
+
--meowdown-gutter: 3.5rem;
|
|
179
|
+
}
|
|
169
180
|
}
|
|
170
181
|
|
|
171
|
-
.
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
182
|
+
@layer meowdown.editor {
|
|
183
|
+
.ProseMirror {
|
|
184
|
+
box-sizing: border-box;
|
|
185
|
+
color: var(--meowdown-text);
|
|
186
|
+
caret-color: var(--meowdown-accent);
|
|
187
|
+
-webkit-font-smoothing: antialiased;
|
|
188
|
+
outline: none;
|
|
189
|
+
font-size: 1.0625rem;
|
|
190
|
+
line-height: 1.7;
|
|
191
|
+
}
|
|
180
192
|
|
|
181
|
-
.meowdown-content {
|
|
182
|
-
|
|
183
|
-
|
|
193
|
+
.meowdown-content {
|
|
194
|
+
padding-top: 1.25rem;
|
|
195
|
+
padding-right: var(--meowdown-gutter);
|
|
196
|
+
padding-bottom: 1.75rem;
|
|
197
|
+
padding-left: var(--meowdown-gutter);
|
|
198
|
+
}
|
|
184
199
|
|
|
185
|
-
.ProseMirror > * + * {
|
|
186
|
-
|
|
187
|
-
}
|
|
200
|
+
.ProseMirror > * + * {
|
|
201
|
+
margin-top: .85em;
|
|
202
|
+
}
|
|
188
203
|
|
|
189
|
-
.ProseMirror p {
|
|
190
|
-
|
|
191
|
-
}
|
|
204
|
+
.ProseMirror p {
|
|
205
|
+
white-space: pre-wrap;
|
|
206
|
+
}
|
|
192
207
|
|
|
193
|
-
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
}
|
|
208
|
+
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
|
|
209
|
+
letter-spacing: -.01em;
|
|
210
|
+
color: var(--meowdown-heading);
|
|
211
|
+
white-space: pre-wrap;
|
|
212
|
+
font-weight: 600;
|
|
213
|
+
line-height: 1.25;
|
|
214
|
+
}
|
|
200
215
|
|
|
201
|
-
.ProseMirror h1 {
|
|
202
|
-
|
|
203
|
-
}
|
|
216
|
+
.ProseMirror h1 {
|
|
217
|
+
font-size: 1.75rem;
|
|
218
|
+
}
|
|
204
219
|
|
|
205
|
-
.ProseMirror h2 {
|
|
206
|
-
|
|
207
|
-
}
|
|
220
|
+
.ProseMirror h2 {
|
|
221
|
+
font-size: 1.4rem;
|
|
222
|
+
}
|
|
208
223
|
|
|
209
|
-
.ProseMirror h3 {
|
|
210
|
-
|
|
211
|
-
}
|
|
224
|
+
.ProseMirror h3 {
|
|
225
|
+
font-size: 1.2rem;
|
|
226
|
+
}
|
|
212
227
|
|
|
213
|
-
.ProseMirror h4 {
|
|
214
|
-
|
|
215
|
-
}
|
|
228
|
+
.ProseMirror h4 {
|
|
229
|
+
font-size: 1.1rem;
|
|
230
|
+
}
|
|
216
231
|
|
|
217
|
-
.ProseMirror h5 {
|
|
218
|
-
|
|
219
|
-
}
|
|
232
|
+
.ProseMirror h5 {
|
|
233
|
+
font-size: 1rem;
|
|
234
|
+
}
|
|
220
235
|
|
|
221
|
-
.ProseMirror h6 {
|
|
222
|
-
|
|
223
|
-
}
|
|
236
|
+
.ProseMirror h6 {
|
|
237
|
+
font-size: .95rem;
|
|
238
|
+
}
|
|
224
239
|
|
|
225
|
-
.ProseMirror .md-link {
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}
|
|
240
|
+
.ProseMirror .md-link {
|
|
241
|
+
color: var(--meowdown-accent);
|
|
242
|
+
text-underline-offset: 2px;
|
|
243
|
+
cursor: pointer;
|
|
244
|
+
text-decoration: underline 1px;
|
|
245
|
+
}
|
|
231
246
|
|
|
232
|
-
.ProseMirror mark {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
}
|
|
247
|
+
.ProseMirror mark {
|
|
248
|
+
background: var(--meowdown-highlight);
|
|
249
|
+
color: inherit;
|
|
250
|
+
-webkit-box-decoration-break: clone;
|
|
251
|
+
box-decoration-break: clone;
|
|
252
|
+
border-radius: 2px;
|
|
253
|
+
padding: 0 1px;
|
|
254
|
+
}
|
|
240
255
|
|
|
241
|
-
.ProseMirror code {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
}
|
|
256
|
+
.ProseMirror code {
|
|
257
|
+
font-family: var(--meowdown-font-mono);
|
|
258
|
+
background: var(--meowdown-code-bg);
|
|
259
|
+
color: inherit;
|
|
260
|
+
border-radius: .35rem;
|
|
261
|
+
padding: .1em .35em;
|
|
262
|
+
font-size: .9em;
|
|
263
|
+
}
|
|
249
264
|
|
|
250
|
-
.ProseMirror blockquote {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
265
|
+
.ProseMirror blockquote {
|
|
266
|
+
border-left: 3px solid var(--meowdown-blockquote-border);
|
|
267
|
+
color: var(--meowdown-muted);
|
|
268
|
+
margin-left: 0;
|
|
269
|
+
padding-left: 1rem;
|
|
270
|
+
}
|
|
257
271
|
|
|
258
|
-
.ProseMirror ul, .ProseMirror ol {
|
|
259
|
-
|
|
260
|
-
}
|
|
272
|
+
.ProseMirror ul, .ProseMirror ol {
|
|
273
|
+
padding-left: 1.5rem;
|
|
274
|
+
}
|
|
261
275
|
|
|
262
|
-
.ProseMirror ul {
|
|
263
|
-
|
|
264
|
-
}
|
|
276
|
+
.ProseMirror ul {
|
|
277
|
+
list-style: outside;
|
|
278
|
+
}
|
|
265
279
|
|
|
266
|
-
.ProseMirror ol {
|
|
267
|
-
|
|
268
|
-
}
|
|
280
|
+
.ProseMirror ol {
|
|
281
|
+
list-style: decimal;
|
|
282
|
+
}
|
|
269
283
|
|
|
270
|
-
.ProseMirror li {
|
|
271
|
-
|
|
272
|
-
}
|
|
284
|
+
.ProseMirror li {
|
|
285
|
+
margin-top: .25em;
|
|
286
|
+
}
|
|
273
287
|
|
|
274
|
-
.ProseMirror .prosemirror-flat-list[data-list-kind="
|
|
275
|
-
|
|
288
|
+
.ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] > .list-marker {
|
|
289
|
+
background: radial-gradient(circle at center,
|
|
290
|
+
var(--meowdown-bullet) 0 var(--meowdown-bullet-radius),
|
|
291
|
+
transparent var(--meowdown-bullet-radius));
|
|
292
|
+
-webkit-mask: none;
|
|
293
|
+
mask: none;
|
|
294
|
+
}
|
|
276
295
|
|
|
277
|
-
|
|
278
|
-
|
|
296
|
+
.ProseMirror .prosemirror-flat-list[data-list-kind="task"] {
|
|
297
|
+
transition: opacity .2s;
|
|
279
298
|
|
|
280
|
-
&
|
|
281
|
-
opacity:
|
|
299
|
+
&[data-list-checked] {
|
|
300
|
+
opacity: .5;
|
|
301
|
+
|
|
302
|
+
& .prosemirror-flat-list[data-list-kind="task"][data-list-checked] {
|
|
303
|
+
opacity: 1;
|
|
304
|
+
}
|
|
282
305
|
}
|
|
283
|
-
}
|
|
284
306
|
|
|
285
|
-
|
|
286
|
-
|
|
307
|
+
& > .list-marker {
|
|
308
|
+
transition: transform .12s;
|
|
287
309
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
310
|
+
&:hover {
|
|
311
|
+
transform: scale(1.1);
|
|
312
|
+
}
|
|
291
313
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
314
|
+
& input[type="checkbox"] {
|
|
315
|
+
-webkit-appearance: none;
|
|
316
|
+
appearance: none;
|
|
317
|
+
box-sizing: border-box;
|
|
318
|
+
border: 1px solid var(--meowdown-muted);
|
|
319
|
+
background: center / 100% 100% no-repeat;
|
|
320
|
+
border-radius: .25rem;
|
|
321
|
+
width: .95rem;
|
|
322
|
+
height: .95rem;
|
|
323
|
+
transition: background-color .15s, border-color .15s;
|
|
324
|
+
|
|
325
|
+
&:checked {
|
|
326
|
+
background-color: var(--meowdown-accent);
|
|
327
|
+
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
|
328
|
+
border-color: #0000;
|
|
329
|
+
}
|
|
307
330
|
}
|
|
308
331
|
}
|
|
309
|
-
}
|
|
310
332
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
333
|
+
&[data-list-marker="+"] > .list-marker input[type="checkbox"] {
|
|
334
|
+
border-radius: 100rem;
|
|
335
|
+
width: 1.05rem;
|
|
336
|
+
height: 1.05rem;
|
|
337
|
+
}
|
|
315
338
|
}
|
|
316
|
-
}
|
|
317
339
|
|
|
318
|
-
.ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] {
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
340
|
+
.ProseMirror .prosemirror-flat-list[data-list-kind="bullet"] {
|
|
341
|
+
&[data-list-collapsable] > .list-marker {
|
|
342
|
+
cursor: pointer;
|
|
343
|
+
}
|
|
322
344
|
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
pointer-events: none;
|
|
331
|
-
width: 1lh;
|
|
332
|
-
height: 1lh;
|
|
333
|
-
transition: opacity .12s;
|
|
334
|
-
position: absolute;
|
|
335
|
-
top: 0;
|
|
336
|
-
}
|
|
345
|
+
&[data-list-collapsable] > .list-marker:hover {
|
|
346
|
+
background: radial-gradient(circle at center,
|
|
347
|
+
var(--meowdown-bullet) 0 var(--meowdown-bullet-radius),
|
|
348
|
+
color-mix(in oklab, var(--meowdown-bullet-collapsed) 20%, transparent)
|
|
349
|
+
var(--meowdown-bullet-radius) var(--meowdown-bullet-halo-radius),
|
|
350
|
+
transparent var(--meowdown-bullet-halo-radius));
|
|
351
|
+
}
|
|
337
352
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
353
|
+
&[data-list-collapsable][data-list-collapsed] > .list-marker {
|
|
354
|
+
background: radial-gradient(circle at center,
|
|
355
|
+
var(--meowdown-bullet-collapsed) 0 var(--meowdown-bullet-radius),
|
|
356
|
+
color-mix(in oklab, var(--meowdown-bullet-collapsed) 35%, transparent)
|
|
357
|
+
var(--meowdown-bullet-radius) var(--meowdown-bullet-halo-radius),
|
|
358
|
+
transparent var(--meowdown-bullet-halo-radius));
|
|
359
|
+
}
|
|
341
360
|
|
|
342
|
-
|
|
343
|
-
|
|
361
|
+
&[data-list-collapsable][data-list-collapsed] > .list-content > :nth-child(n+2) {
|
|
362
|
+
display: none;
|
|
363
|
+
}
|
|
344
364
|
}
|
|
345
365
|
|
|
346
|
-
|
|
347
|
-
|
|
366
|
+
.ProseMirror pre {
|
|
367
|
+
background: var(--meowdown-code-bg);
|
|
368
|
+
font-family: var(--meowdown-font-mono);
|
|
369
|
+
border-radius: .6rem;
|
|
370
|
+
padding: .9rem 1rem;
|
|
371
|
+
font-size: .9em;
|
|
372
|
+
line-height: 1.5;
|
|
373
|
+
overflow-x: auto;
|
|
348
374
|
}
|
|
349
375
|
|
|
350
|
-
|
|
351
|
-
|
|
376
|
+
.ProseMirror pre code {
|
|
377
|
+
color: inherit;
|
|
378
|
+
background: none;
|
|
379
|
+
padding: 0;
|
|
352
380
|
}
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
.ProseMirror pre {
|
|
356
|
-
background: var(--meowdown-code-bg);
|
|
357
|
-
font-family: var(--meowdown-font-mono);
|
|
358
|
-
border-radius: .6rem;
|
|
359
|
-
padding: .9rem 1rem;
|
|
360
|
-
font-size: .9em;
|
|
361
|
-
line-height: 1.5;
|
|
362
|
-
overflow-x: auto;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
.ProseMirror pre code {
|
|
366
|
-
color: inherit;
|
|
367
|
-
background: none;
|
|
368
|
-
padding: 0;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
.ProseMirror pre code .tok-keyword {
|
|
372
|
-
color: light-dark(#cf222e, #ff7b72);
|
|
373
|
-
}
|
|
374
381
|
|
|
375
|
-
.ProseMirror pre code .tok-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
|
|
381
|
-
color: light-dark(#0a3069, #a5d6ff);
|
|
382
|
-
}
|
|
382
|
+
.ProseMirror pre code .tok-keyword {
|
|
383
|
+
color: light-dark(#cf222e, #ff7b72);
|
|
384
|
+
}
|
|
383
385
|
|
|
384
|
-
.ProseMirror pre code .tok-
|
|
385
|
-
|
|
386
|
-
|
|
386
|
+
.ProseMirror pre code .tok-comment {
|
|
387
|
+
color: light-dark(#6e7781, #8b949e);
|
|
388
|
+
font-style: italic;
|
|
389
|
+
}
|
|
387
390
|
|
|
388
|
-
.ProseMirror pre code .tok-
|
|
389
|
-
|
|
390
|
-
}
|
|
391
|
+
.ProseMirror pre code .tok-string, .ProseMirror pre code .tok-url {
|
|
392
|
+
color: light-dark(#0a3069, #a5d6ff);
|
|
393
|
+
}
|
|
391
394
|
|
|
392
|
-
.ProseMirror pre code .tok-
|
|
393
|
-
|
|
394
|
-
}
|
|
395
|
+
.ProseMirror pre code .tok-number, .ProseMirror pre code .tok-bool, .ProseMirror pre code .tok-atom, .ProseMirror pre code .tok-literal {
|
|
396
|
+
color: light-dark(#0550ae, #79c0ff);
|
|
397
|
+
}
|
|
395
398
|
|
|
396
|
-
.ProseMirror pre code .tok-
|
|
397
|
-
|
|
398
|
-
}
|
|
399
|
+
.ProseMirror pre code .tok-className, .ProseMirror pre code .tok-typeName, .ProseMirror pre code .tok-namespace {
|
|
400
|
+
color: light-dark(#953800, #ffa657);
|
|
401
|
+
}
|
|
399
402
|
|
|
400
|
-
.ProseMirror pre code .tok-
|
|
401
|
-
|
|
402
|
-
}
|
|
403
|
+
.ProseMirror pre code .tok-definition {
|
|
404
|
+
color: light-dark(#8250df, #d2a8ff);
|
|
405
|
+
}
|
|
403
406
|
|
|
404
|
-
.ProseMirror pre code .tok-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
}
|
|
407
|
+
.ProseMirror pre code .tok-macroName, .ProseMirror pre code .tok-meta, .ProseMirror pre code .tok-inserted {
|
|
408
|
+
color: light-dark(#116329, #7ee787);
|
|
409
|
+
}
|
|
408
410
|
|
|
409
|
-
.ProseMirror pre code .tok-
|
|
410
|
-
|
|
411
|
-
}
|
|
411
|
+
.ProseMirror pre code .tok-invalid, .ProseMirror pre code .tok-deleted {
|
|
412
|
+
color: light-dark(#82071e, #ffa198);
|
|
413
|
+
}
|
|
412
414
|
|
|
413
|
-
.ProseMirror pre code .tok-
|
|
414
|
-
|
|
415
|
-
|
|
415
|
+
.ProseMirror pre code .tok-heading {
|
|
416
|
+
color: light-dark(#0550ae, #79c0ff);
|
|
417
|
+
font-weight: 600;
|
|
418
|
+
}
|
|
416
419
|
|
|
417
|
-
.ProseMirror pre code .tok-
|
|
418
|
-
|
|
419
|
-
}
|
|
420
|
+
.ProseMirror pre code .tok-strong {
|
|
421
|
+
font-weight: 600;
|
|
422
|
+
}
|
|
420
423
|
|
|
421
|
-
.ProseMirror
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
margin: 1.5em 0;
|
|
425
|
-
}
|
|
424
|
+
.ProseMirror pre code .tok-emphasis {
|
|
425
|
+
font-style: italic;
|
|
426
|
+
}
|
|
426
427
|
|
|
427
|
-
.ProseMirror
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
width: 100%;
|
|
431
|
-
overflow: hidden;
|
|
432
|
-
}
|
|
428
|
+
.ProseMirror pre code .tok-link {
|
|
429
|
+
text-decoration: underline;
|
|
430
|
+
}
|
|
433
431
|
|
|
434
|
-
.ProseMirror
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
padding: .4rem .75rem;
|
|
440
|
-
}
|
|
432
|
+
.ProseMirror hr {
|
|
433
|
+
border: none;
|
|
434
|
+
border-top: 1px solid var(--meowdown-border);
|
|
435
|
+
margin: 1.5em 0;
|
|
436
|
+
}
|
|
441
437
|
|
|
442
|
-
.ProseMirror
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
438
|
+
.ProseMirror table {
|
|
439
|
+
border-collapse: collapse;
|
|
440
|
+
table-layout: fixed;
|
|
441
|
+
width: 100%;
|
|
442
|
+
overflow: hidden;
|
|
443
|
+
}
|
|
447
444
|
|
|
448
|
-
.ProseMirror
|
|
449
|
-
|
|
450
|
-
|
|
445
|
+
.ProseMirror td, .ProseMirror th {
|
|
446
|
+
box-sizing: border-box;
|
|
447
|
+
border: 1px solid var(--meowdown-border);
|
|
448
|
+
vertical-align: top;
|
|
449
|
+
text-align: left;
|
|
450
|
+
padding: .4rem .75rem;
|
|
451
|
+
}
|
|
451
452
|
|
|
452
|
-
.ProseMirror
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
}
|
|
453
|
+
.ProseMirror th {
|
|
454
|
+
color: var(--meowdown-heading);
|
|
455
|
+
background: var(--meowdown-table-header-bg);
|
|
456
|
+
font-weight: 600;
|
|
457
|
+
}
|
|
457
458
|
|
|
458
|
-
.ProseMirror
|
|
459
|
-
|
|
460
|
-
}
|
|
459
|
+
.ProseMirror table.ProseMirror-selectednode td, .ProseMirror table.ProseMirror-selectednode th {
|
|
460
|
+
border-color: var(--meowdown-node-outline);
|
|
461
|
+
}
|
|
461
462
|
|
|
462
|
-
.ProseMirror.
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
463
|
+
.ProseMirror .selectedCell {
|
|
464
|
+
border: 1px double var(--meowdown-node-outline);
|
|
465
|
+
background: var(--meowdown-node-selection);
|
|
466
|
+
caret-color: #0000;
|
|
467
|
+
}
|
|
466
468
|
|
|
467
|
-
.ProseMirror .ProseMirror-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
border-radius: 2px;
|
|
471
|
-
}
|
|
469
|
+
.ProseMirror ::selection, .ProseMirror .prosekit-virtual-selection {
|
|
470
|
+
background: var(--meowdown-selection);
|
|
471
|
+
}
|
|
472
472
|
|
|
473
|
-
.ProseMirror
|
|
474
|
-
|
|
475
|
-
|
|
473
|
+
.ProseMirror.ProseMirror-hideselection ::selection {
|
|
474
|
+
caret-color: #0000;
|
|
475
|
+
background: none;
|
|
476
|
+
}
|
|
476
477
|
|
|
477
|
-
.ProseMirror.
|
|
478
|
-
|
|
479
|
-
|
|
478
|
+
.ProseMirror .ProseMirror-selectednode {
|
|
479
|
+
outline: 1px solid var(--meowdown-node-outline);
|
|
480
|
+
background: var(--meowdown-node-selection);
|
|
481
|
+
border-radius: 2px;
|
|
482
|
+
}
|
|
480
483
|
|
|
481
|
-
.ProseMirror .
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
cursor: pointer;
|
|
485
|
-
border-radius: 6px;
|
|
486
|
-
padding: 2px 6px;
|
|
487
|
-
}
|
|
484
|
+
.ProseMirror pre.ProseMirror-selectednode {
|
|
485
|
+
border-radius: .6rem;
|
|
486
|
+
}
|
|
488
487
|
|
|
489
|
-
.ProseMirror .
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
border: 0;
|
|
493
|
-
width: 100%;
|
|
494
|
-
display: block;
|
|
495
|
-
}
|
|
488
|
+
.ProseMirror.prosekit-dragging .ProseMirror-selectednode, .ProseMirror.prosekit-dragging .selectedCell {
|
|
489
|
+
background: none;
|
|
490
|
+
}
|
|
496
491
|
|
|
497
|
-
.ProseMirror .md-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
492
|
+
.ProseMirror .md-tag {
|
|
493
|
+
background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
|
|
494
|
+
color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
|
|
495
|
+
cursor: pointer;
|
|
496
|
+
border-radius: 6px;
|
|
497
|
+
padding: 2px 6px;
|
|
498
|
+
}
|
|
503
499
|
|
|
504
|
-
.ProseMirror .
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
}
|
|
500
|
+
.ProseMirror .md-embed-youtube {
|
|
501
|
+
aspect-ratio: 16 / 9;
|
|
502
|
+
border-radius: var(--meowdown-image-radius, .5rem);
|
|
503
|
+
border: 0;
|
|
504
|
+
width: 100%;
|
|
505
|
+
display: block;
|
|
506
|
+
}
|
|
511
507
|
|
|
512
|
-
.ProseMirror .md-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
508
|
+
.ProseMirror .md-embed-tweet {
|
|
509
|
+
border: 0;
|
|
510
|
+
width: 100%;
|
|
511
|
+
max-width: 550px;
|
|
512
|
+
display: block;
|
|
513
|
+
}
|
|
516
514
|
|
|
517
|
-
.ProseMirror .
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
515
|
+
.ProseMirror .prosekit-placeholder:before {
|
|
516
|
+
content: attr(data-placeholder);
|
|
517
|
+
float: left;
|
|
518
|
+
pointer-events: none;
|
|
519
|
+
height: 0;
|
|
520
|
+
color: var(--meowdown-placeholder, var(--meowdown-muted));
|
|
521
|
+
}
|
|
523
522
|
|
|
524
|
-
.ProseMirror .md-
|
|
525
|
-
|
|
526
|
-
|
|
523
|
+
.ProseMirror .md-mark {
|
|
524
|
+
color: var(--meowdown-mark);
|
|
525
|
+
opacity: .7;
|
|
526
|
+
}
|
|
527
527
|
|
|
528
|
-
.ProseMirror
|
|
529
|
-
|
|
530
|
-
|
|
528
|
+
.ProseMirror .md-link-uri, .ProseMirror .md-link-title {
|
|
529
|
+
color: var(--meowdown-accent);
|
|
530
|
+
text-underline-offset: 2px;
|
|
531
|
+
opacity: .7;
|
|
532
|
+
text-decoration: underline 1px;
|
|
531
533
|
}
|
|
532
|
-
}
|
|
533
534
|
|
|
534
|
-
.ProseMirror
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
letter-spacing: -2em;
|
|
538
|
-
display: inline-block;
|
|
539
|
-
overflow: hidden;
|
|
535
|
+
.ProseMirror .md-pack {
|
|
536
|
+
display: contents;
|
|
537
|
+
}
|
|
540
538
|
|
|
541
|
-
|
|
542
|
-
|
|
539
|
+
.ProseMirror[data-mark-mode="hide"] {
|
|
540
|
+
& .md-mark, & .md-link-uri, & .md-link-title {
|
|
541
|
+
display: none;
|
|
543
542
|
}
|
|
544
543
|
}
|
|
545
|
-
}
|
|
546
544
|
|
|
547
|
-
.ProseMirror {
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
545
|
+
.ProseMirror[data-mark-mode="focus"] {
|
|
546
|
+
& .md-mark, & .md-link-uri, & .md-link-title {
|
|
547
|
+
vertical-align: bottom;
|
|
548
|
+
letter-spacing: -2em;
|
|
549
|
+
display: inline-block;
|
|
550
|
+
overflow: hidden;
|
|
552
551
|
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
border-radius: 6px;
|
|
558
|
-
display: inline-block;
|
|
559
|
-
overflow: hidden;
|
|
552
|
+
&:has(.show) {
|
|
553
|
+
letter-spacing: 0;
|
|
554
|
+
}
|
|
555
|
+
}
|
|
560
556
|
}
|
|
561
557
|
|
|
562
|
-
|
|
558
|
+
.ProseMirror {
|
|
559
|
+
& .md-atom-view {
|
|
560
|
+
vertical-align: bottom;
|
|
561
|
+
display: inline-block;
|
|
562
|
+
}
|
|
563
|
+
|
|
563
564
|
& .md-atom-view-preview {
|
|
564
|
-
|
|
565
|
-
|
|
565
|
+
vertical-align: bottom;
|
|
566
|
+
-webkit-user-select: none;
|
|
567
|
+
user-select: none;
|
|
568
|
+
border-radius: 6px;
|
|
569
|
+
display: inline-block;
|
|
570
|
+
overflow: hidden;
|
|
566
571
|
}
|
|
567
572
|
|
|
568
|
-
&
|
|
569
|
-
|
|
573
|
+
& .md-atom-view:has(.md-atom-selected) {
|
|
574
|
+
& .md-atom-view-preview {
|
|
575
|
+
outline: 2px solid var(--meowdown-node-outline);
|
|
576
|
+
background: var(--meowdown-selection);
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
& ::selection {
|
|
580
|
+
background-color: #0000;
|
|
581
|
+
}
|
|
570
582
|
}
|
|
571
|
-
}
|
|
572
583
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
+
& .md-atom-view-content {
|
|
585
|
+
letter-spacing: -2em;
|
|
586
|
+
box-sizing: border-box;
|
|
587
|
+
color: #0000;
|
|
588
|
+
background-color: #0000;
|
|
589
|
+
align-items: end;
|
|
590
|
+
width: 2px;
|
|
591
|
+
margin-left: 2px;
|
|
592
|
+
margin-right: -4px;
|
|
593
|
+
display: inline-flex;
|
|
594
|
+
overflow: visible;
|
|
595
|
+
}
|
|
584
596
|
}
|
|
585
|
-
}
|
|
586
597
|
|
|
587
|
-
.ProseMirror {
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
598
|
+
.ProseMirror {
|
|
599
|
+
& .md-image-view {
|
|
600
|
+
max-width: 100%;
|
|
601
|
+
margin-left: 2px;
|
|
602
|
+
margin-right: 2px;
|
|
603
|
+
}
|
|
593
604
|
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
605
|
+
& .md-image-view-preview {
|
|
606
|
+
outline-offset: 2px;
|
|
607
|
+
border-radius: 6px;
|
|
608
|
+
max-width: 100%;
|
|
609
|
+
display: inline-block;
|
|
610
|
+
}
|
|
600
611
|
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
612
|
+
& .md-image-resizable {
|
|
613
|
+
vertical-align: bottom;
|
|
614
|
+
isolation: isolate;
|
|
615
|
+
min-width: 2.5rem;
|
|
616
|
+
max-width: 100%;
|
|
617
|
+
min-height: 2.5rem;
|
|
618
|
+
display: inline-block;
|
|
619
|
+
position: relative;
|
|
620
|
+
}
|
|
610
621
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
622
|
+
& .md-image-resizable[data-loading] {
|
|
623
|
+
background: var(--meowdown-image-loading-bg);
|
|
624
|
+
border-radius: var(--meowdown-image-radius, .5rem);
|
|
625
|
+
}
|
|
615
626
|
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
627
|
+
& .md-image-resizable img {
|
|
628
|
+
object-fit: contain;
|
|
629
|
+
border-radius: var(--meowdown-image-radius, .5rem);
|
|
630
|
+
width: 100%;
|
|
631
|
+
height: 100%;
|
|
632
|
+
display: block;
|
|
633
|
+
}
|
|
623
634
|
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
635
|
+
& .md-image-resize-handle {
|
|
636
|
+
box-sizing: border-box;
|
|
637
|
+
mix-blend-mode: exclusion;
|
|
638
|
+
cursor: nwse-resize;
|
|
639
|
+
pointer-events: none;
|
|
640
|
+
touch-action: none;
|
|
641
|
+
opacity: 0;
|
|
642
|
+
transform-origin: 100% 100%;
|
|
643
|
+
border-bottom: 3px solid #fff;
|
|
644
|
+
border-right: 3px solid #fff;
|
|
645
|
+
border-bottom-right-radius: 5px;
|
|
646
|
+
width: 14px;
|
|
647
|
+
height: 14px;
|
|
648
|
+
transition: opacity .12s, transform .12s;
|
|
649
|
+
position: absolute;
|
|
650
|
+
bottom: 4px;
|
|
651
|
+
right: 4px;
|
|
652
|
+
transform: scale(.8);
|
|
653
|
+
}
|
|
643
654
|
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
655
|
+
& .md-image-resizable:hover .md-image-resize-handle, & .md-image-resizable[data-resizing] .md-image-resize-handle {
|
|
656
|
+
opacity: 1;
|
|
657
|
+
pointer-events: auto;
|
|
658
|
+
transform: scale(1);
|
|
659
|
+
}
|
|
648
660
|
}
|
|
649
|
-
}
|
|
650
661
|
|
|
651
|
-
.ProseMirror {
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
662
|
+
.ProseMirror {
|
|
663
|
+
& .md-wikilink-view-label {
|
|
664
|
+
background: color-mix(in oklab, var(--meowdown-accent) 10%, transparent);
|
|
665
|
+
color: color-mix(in oklab, var(--meowdown-accent) 80%, var(--meowdown-heading));
|
|
666
|
+
text-underline-offset: 2px;
|
|
667
|
+
cursor: pointer;
|
|
668
|
+
border-radius: 6px;
|
|
669
|
+
padding: 2px 5px;
|
|
670
|
+
text-decoration-line: underline;
|
|
671
|
+
text-decoration-style: dashed;
|
|
672
|
+
text-decoration-thickness: 1px;
|
|
673
|
+
overflow: hidden;
|
|
674
|
+
}
|
|
664
675
|
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
676
|
+
& .md-wikilink-view:has(.md-atom-selected) .md-wikilink-view-label {
|
|
677
|
+
background-color: #0000;
|
|
678
|
+
outline-color: #0000;
|
|
679
|
+
}
|
|
668
680
|
}
|
|
669
681
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@meowdown/core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.30.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@prosekit/core": "^0.13.0-beta.4",
|
|
29
29
|
"@prosekit/extensions": "^0.18.0-beta.11",
|
|
30
30
|
"@prosekit/pm": "^0.1.19-beta.1",
|
|
31
|
-
"@prosekit/web": "^0.9.0-beta.
|
|
31
|
+
"@prosekit/web": "^0.9.0-beta.15",
|
|
32
32
|
"prosemirror-flat-list": "^0.6.0",
|
|
33
33
|
"prosemirror-highlight": "^0.15.2",
|
|
34
34
|
"rehype-parse": "^9.0.1",
|