Skip to content

Commit c310007

Browse files
committed
fix: lint fixes
1 parent 8539bcc commit c310007

File tree

24 files changed

+880
-807
lines changed

24 files changed

+880
-807
lines changed

docs/.vitepress/config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,10 @@ export default defineConfig({
5858
text: 'Pre-fill Content',
5959
link: '/examples/prefill-content',
6060
},
61-
{ text: 'Code Block Highlighter', link: '/examples/lowlight' },
61+
{
62+
text: 'Code Block Highlighter',
63+
link: '/examples/lowlight',
64+
},
6265
{ text: 'Placeholder', link: '/examples/placeholder' },
6366
{ text: 'Image Upload', link: '/examples/image-upload' },
6467
],

eslint.config.js renamed to eslint.config.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-check
22
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
33

4-
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended')
4+
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
55

66
// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
77
export default createConfigForNuxt({
@@ -16,5 +16,5 @@ export default createConfigForNuxt({
1616
},
1717
}).append(
1818
// your custom flat config here...
19-
eslintPluginPrettierRecommended
19+
eslintPluginPrettierRecommended,
2020
)

playground/app.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<NuxtLayout>
3-
<NuxtPage />
4-
</NuxtLayout>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
55
</template>

playground/components/TipTap.vue

Lines changed: 156 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,151 @@
11
<template>
2-
<div>
3-
<div v-if="editor">
4-
<button
5-
:disabled="!editor.can().chain().focus().toggleBold().run()"
6-
:class="{ 'is-active': editor.isActive('bold') }"
7-
@click="editor.chain().focus().toggleBold().run()"
8-
>
9-
bold
10-
</button>
11-
<button
12-
:disabled="!editor.can().chain().focus().toggleItalic().run()"
13-
:class="{ 'is-active': editor.isActive('italic') }"
14-
@click="editor.chain().focus().toggleItalic().run()"
15-
>
16-
italic
17-
</button>
18-
<button
19-
:disabled="!editor.can().chain().focus().toggleStrike().run()"
20-
:class="{ 'is-active': editor.isActive('strike') }"
21-
@click="editor.chain().focus().toggleStrike().run()"
22-
>
23-
strike
24-
</button>
25-
<button
26-
:disabled="!editor.can().chain().focus().toggleCode().run()"
27-
:class="{ 'is-active': editor.isActive('code') }"
28-
@click="editor.chain().focus().toggleCode().run()"
29-
>
30-
code
31-
</button>
32-
<button @click="editor.chain().focus().unsetAllMarks().run()">
33-
clear marks
34-
</button>
35-
<button @click="editor.chain().focus().clearNodes().run()">
36-
clear nodes
37-
</button>
38-
<button
39-
:class="{ 'is-active': editor.isActive('paragraph') }"
40-
@click="editor.chain().focus().setParagraph().run()"
41-
>
42-
paragraph
43-
</button>
44-
<button
45-
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
46-
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
47-
>
48-
h1
49-
</button>
50-
<button
51-
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
52-
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
53-
>
54-
h2
55-
</button>
56-
<button
57-
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
58-
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
59-
>
60-
h3
61-
</button>
62-
<button
63-
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
64-
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
65-
>
66-
h4
67-
</button>
68-
<button
69-
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
70-
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
71-
>
72-
h5
73-
</button>
74-
<button
75-
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
76-
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
77-
>
78-
h6
79-
</button>
80-
<button
81-
:class="{ 'is-active': editor.isActive('bulletList') }"
82-
@click="editor.chain().focus().toggleBulletList().run()"
83-
>
84-
bullet list
85-
</button>
86-
<button
87-
:class="{ 'is-active': editor.isActive('orderedList') }"
88-
@click="editor.chain().focus().toggleOrderedList().run()"
89-
>
90-
ordered list
91-
</button>
92-
<button
93-
:class="{ 'is-active': editor.isActive('codeBlock') }"
94-
@click="editor.chain().focus().toggleCodeBlock().run()"
95-
>
96-
code block
97-
</button>
98-
<button
99-
:class="{ 'is-active': editor.isActive('blockquote') }"
100-
@click="editor.chain().focus().toggleBlockquote().run()"
101-
>
102-
blockquote
103-
</button>
104-
<button @click="editor.chain().focus().setHorizontalRule().run()">
105-
horizontal rule
106-
</button>
107-
<button @click="editor.chain().focus().setHardBreak().run()">
108-
hard break
109-
</button>
110-
<button
111-
:disabled="!editor.can().chain().focus().undo().run()"
112-
@click="editor.chain().focus().undo().run()"
113-
>
114-
undo
115-
</button>
116-
<button
117-
:disabled="!editor.can().chain().focus().redo().run()"
118-
@click="editor.chain().focus().redo().run()"
119-
>
120-
redo
121-
</button>
2+
<div>
3+
<div v-if="editor">
4+
<button
5+
:disabled="!editor.can().chain().focus().toggleBold().run()"
6+
:class="{ 'is-active': editor.isActive('bold') }"
7+
@click="editor.chain().focus().toggleBold().run()"
8+
>
9+
bold
10+
</button>
11+
<button
12+
:disabled="!editor.can().chain().focus().toggleItalic().run()"
13+
:class="{ 'is-active': editor.isActive('italic') }"
14+
@click="editor.chain().focus().toggleItalic().run()"
15+
>
16+
italic
17+
</button>
18+
<button
19+
:disabled="!editor.can().chain().focus().toggleStrike().run()"
20+
:class="{ 'is-active': editor.isActive('strike') }"
21+
@click="editor.chain().focus().toggleStrike().run()"
22+
>
23+
strike
24+
</button>
25+
<button
26+
:disabled="!editor.can().chain().focus().toggleCode().run()"
27+
:class="{ 'is-active': editor.isActive('code') }"
28+
@click="editor.chain().focus().toggleCode().run()"
29+
>
30+
code
31+
</button>
32+
<button @click="editor.chain().focus().unsetAllMarks().run()">
33+
clear marks
34+
</button>
35+
<button @click="editor.chain().focus().clearNodes().run()">
36+
clear nodes
37+
</button>
38+
<button
39+
:class="{ 'is-active': editor.isActive('paragraph') }"
40+
@click="editor.chain().focus().setParagraph().run()"
41+
>
42+
paragraph
43+
</button>
44+
<button
45+
:class="{
46+
'is-active': editor.isActive('heading', { level: 1 }),
47+
}"
48+
@click="
49+
editor.chain().focus().toggleHeading({ level: 1 }).run()
50+
"
51+
>
52+
h1
53+
</button>
54+
<button
55+
:class="{
56+
'is-active': editor.isActive('heading', { level: 2 }),
57+
}"
58+
@click="
59+
editor.chain().focus().toggleHeading({ level: 2 }).run()
60+
"
61+
>
62+
h2
63+
</button>
64+
<button
65+
:class="{
66+
'is-active': editor.isActive('heading', { level: 3 }),
67+
}"
68+
@click="
69+
editor.chain().focus().toggleHeading({ level: 3 }).run()
70+
"
71+
>
72+
h3
73+
</button>
74+
<button
75+
:class="{
76+
'is-active': editor.isActive('heading', { level: 4 }),
77+
}"
78+
@click="
79+
editor.chain().focus().toggleHeading({ level: 4 }).run()
80+
"
81+
>
82+
h4
83+
</button>
84+
<button
85+
:class="{
86+
'is-active': editor.isActive('heading', { level: 5 }),
87+
}"
88+
@click="
89+
editor.chain().focus().toggleHeading({ level: 5 }).run()
90+
"
91+
>
92+
h5
93+
</button>
94+
<button
95+
:class="{
96+
'is-active': editor.isActive('heading', { level: 6 }),
97+
}"
98+
@click="
99+
editor.chain().focus().toggleHeading({ level: 6 }).run()
100+
"
101+
>
102+
h6
103+
</button>
104+
<button
105+
:class="{ 'is-active': editor.isActive('bulletList') }"
106+
@click="editor.chain().focus().toggleBulletList().run()"
107+
>
108+
bullet list
109+
</button>
110+
<button
111+
:class="{ 'is-active': editor.isActive('orderedList') }"
112+
@click="editor.chain().focus().toggleOrderedList().run()"
113+
>
114+
ordered list
115+
</button>
116+
<button
117+
:class="{ 'is-active': editor.isActive('codeBlock') }"
118+
@click="editor.chain().focus().toggleCodeBlock().run()"
119+
>
120+
code block
121+
</button>
122+
<button
123+
:class="{ 'is-active': editor.isActive('blockquote') }"
124+
@click="editor.chain().focus().toggleBlockquote().run()"
125+
>
126+
blockquote
127+
</button>
128+
<button @click="editor.chain().focus().setHorizontalRule().run()">
129+
horizontal rule
130+
</button>
131+
<button @click="editor.chain().focus().setHardBreak().run()">
132+
hard break
133+
</button>
134+
<button
135+
:disabled="!editor.can().chain().focus().undo().run()"
136+
@click="editor.chain().focus().undo().run()"
137+
>
138+
undo
139+
</button>
140+
<button
141+
:disabled="!editor.can().chain().focus().redo().run()"
142+
@click="editor.chain().focus().redo().run()"
143+
>
144+
redo
145+
</button>
146+
</div>
147+
<TiptapEditorContent :editor="editor" />
122148
</div>
123-
<TiptapEditorContent :editor="editor" />
124-
</div>
125149
</template>
126150

127151
<script setup>
@@ -133,15 +157,15 @@ const editor = useEditor({
133157

134158
<style scoped>
135159
button {
136-
border-radius: 3px;
137-
background-image: linear-gradient(
138-
to top,
139-
rgb(207, 207, 207) 16%,
140-
rgb(252, 252, 252) 79%
141-
);
142-
padding: 3px;
143-
border: 1px solid #000;
144-
color: black;
145-
text-decoration: none;
160+
border-radius: 3px;
161+
background-image: linear-gradient(
162+
to top,
163+
rgb(207, 207, 207) 16%,
164+
rgb(252, 252, 252) 79%
165+
);
166+
padding: 3px;
167+
border: 1px solid #000;
168+
color: black;
169+
text-decoration: none;
146170
}
147171
</style>

0 commit comments

Comments
 (0)