Skip to content

Commit

Permalink
fix: lint fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@modbender
modbender committed Nov 21, 2024
1 parent 8539bcc commit c310007
Show file tree
Hide file tree
Showing 24 changed files with 880 additions and 807 deletions.
5 changes: 4 additions & 1 deletion docs/.vitepress/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,10 @@ export default defineConfig({
text: 'Pre-fill Content',
link: '/examples/prefill-content',
},
{ text: 'Code Block Highlighter', link: '/examples/lowlight' },
{
text: 'Code Block Highlighter',
link: '/examples/lowlight',
},
{ text: 'Placeholder', link: '/examples/placeholder' },
{ text: 'Image Upload', link: '/examples/image-upload' },
],
Expand Down
4 changes: 2 additions & 2 deletions eslint.config.js → eslint.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

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

// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
export default createConfigForNuxt({
Expand All @@ -16,5 +16,5 @@ export default createConfigForNuxt({
},
}).append(
// your custom flat config here...
eslintPluginPrettierRecommended
eslintPluginPrettierRecommended,
)
6 changes: 3 additions & 3 deletions playground/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
288 changes: 156 additions & 132 deletions playground/components/TipTap.vue
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,151 @@
<template>
<div>
<div v-if="editor">
<button
:disabled="!editor.can().chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()"
>
bold
</button>
<button
:disabled="!editor.can().chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()"
>
italic
</button>
<button
:disabled="!editor.can().chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
@click="editor.chain().focus().toggleStrike().run()"
>
strike
</button>
<button
:disabled="!editor.can().chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }"
@click="editor.chain().focus().toggleCode().run()"
>
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button
:class="{ 'is-active': editor.isActive('paragraph') }"
@click="editor.chain().focus().setParagraph().run()"
>
paragraph
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
>
h1
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
>
h2
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
>
h3
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
>
h4
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
>
h5
</button>
<button
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
>
h6
</button>
<button
:class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor.chain().focus().toggleBulletList().run()"
>
bullet list
</button>
<button
:class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor.chain().focus().toggleOrderedList().run()"
>
ordered list
</button>
<button
:class="{ 'is-active': editor.isActive('codeBlock') }"
@click="editor.chain().focus().toggleCodeBlock().run()"
>
code block
</button>
<button
:class="{ 'is-active': editor.isActive('blockquote') }"
@click="editor.chain().focus().toggleBlockquote().run()"
>
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button
:disabled="!editor.can().chain().focus().undo().run()"
@click="editor.chain().focus().undo().run()"
>
undo
</button>
<button
:disabled="!editor.can().chain().focus().redo().run()"
@click="editor.chain().focus().redo().run()"
>
redo
</button>
<div>
<div v-if="editor">
<button
:disabled="!editor.can().chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()"
>
bold
</button>
<button
:disabled="!editor.can().chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()"
>
italic
</button>
<button
:disabled="!editor.can().chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
@click="editor.chain().focus().toggleStrike().run()"
>
strike
</button>
<button
:disabled="!editor.can().chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }"
@click="editor.chain().focus().toggleCode().run()"
>
code
</button>
<button @click="editor.chain().focus().unsetAllMarks().run()">
clear marks
</button>
<button @click="editor.chain().focus().clearNodes().run()">
clear nodes
</button>
<button
:class="{ 'is-active': editor.isActive('paragraph') }"
@click="editor.chain().focus().setParagraph().run()"
>
paragraph
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 1 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 1 }).run()
"
>
h1
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 2 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 2 }).run()
"
>
h2
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 3 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 3 }).run()
"
>
h3
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 4 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 4 }).run()
"
>
h4
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 5 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 5 }).run()
"
>
h5
</button>
<button
:class="{
'is-active': editor.isActive('heading', { level: 6 }),
}"
@click="
editor.chain().focus().toggleHeading({ level: 6 }).run()
"
>
h6
</button>
<button
:class="{ 'is-active': editor.isActive('bulletList') }"
@click="editor.chain().focus().toggleBulletList().run()"
>
bullet list
</button>
<button
:class="{ 'is-active': editor.isActive('orderedList') }"
@click="editor.chain().focus().toggleOrderedList().run()"
>
ordered list
</button>
<button
:class="{ 'is-active': editor.isActive('codeBlock') }"
@click="editor.chain().focus().toggleCodeBlock().run()"
>
code block
</button>
<button
:class="{ 'is-active': editor.isActive('blockquote') }"
@click="editor.chain().focus().toggleBlockquote().run()"
>
blockquote
</button>
<button @click="editor.chain().focus().setHorizontalRule().run()">
horizontal rule
</button>
<button @click="editor.chain().focus().setHardBreak().run()">
hard break
</button>
<button
:disabled="!editor.can().chain().focus().undo().run()"
@click="editor.chain().focus().undo().run()"
>
undo
</button>
<button
:disabled="!editor.can().chain().focus().redo().run()"
@click="editor.chain().focus().redo().run()"
>
redo
</button>
</div>
<TiptapEditorContent :editor="editor" />
</div>
<TiptapEditorContent :editor="editor" />
</div>
</template>

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

<style scoped>
button {
border-radius: 3px;
background-image: linear-gradient(
to top,
rgb(207, 207, 207) 16%,
rgb(252, 252, 252) 79%
);
padding: 3px;
border: 1px solid #000;
color: black;
text-decoration: none;
border-radius: 3px;
background-image: linear-gradient(
to top,
rgb(207, 207, 207) 16%,
rgb(252, 252, 252) 79%
);
padding: 3px;
border: 1px solid #000;
color: black;
text-decoration: none;
}
</style>
Loading

0 comments on commit c310007

Please sign in to comment.