Skip to content

Commit d7de99b

Browse files
modbendermodbender
committed
chore: transpile, test, README
1 parent 7ff9e0e commit d7de99b

File tree

6 files changed

+183
-55
lines changed

6 files changed

+183
-55
lines changed

‎CHANGELOG.md

Whitespace-only changes.

‎README.md

+177-42
Original file line numberDiff line numberDiff line change
@@ -2,57 +2,194 @@
22
Get your module up and running quickly.
33
44
Find and replace all on all files (CMD+SHIFT+F):
5-
- Name: My Module
6-
- Package name: my-module
7-
- Description: My new Nuxt module
5+
- Name: Nuxt TipTap
6+
- Package name: nuxt-tiptap
7+
- Description: Essentials to Quickly Integrate TipTap Editor into your Nuxt App
88
-->
99

10-
# My Module
10+
# Nuxt TipTap
1111

1212
[![npm version][npm-version-src]][npm-version-href]
1313
[![npm downloads][npm-downloads-src]][npm-downloads-href]
1414
[![License][license-src]][license-href]
1515
[![Nuxt][nuxt-src]][nuxt-href]
1616

17-
My new Nuxt module for doing amazing things.
17+
Instantly add [TipTap Editor](https://tiptap.dev/editor) with basic functionality to your Nuxt 3 App.
1818

1919
- [✨  Release Notes](/CHANGELOG.md)
20-
<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
20+
- [🏀 Online playground](https://stackblitz.com/github/modbender/nuxt-tiptap?file=playground%2Fapp.vue)
2121
<!-- - [📖 &nbsp;Documentation](https://example.com) -->
2222

2323
## Features
2424

25-
<!-- Highlight some of the features your module provide here -->
26-
- ⛰ &nbsp;Foo
27-
- 🚠 &nbsp;Bar
28-
- 🌲 &nbsp;Baz
25+
- 🔆Easy to integrate
26+
- ⚡️Instantly usable components
2927

3028
## Quick Setup
3129

32-
1. Add `my-module` dependency to your project
33-
34-
```bash
35-
# Using pnpm
36-
pnpm add -D my-module
37-
38-
# Using yarn
39-
yarn add --dev my-module
40-
41-
# Using npm
42-
npm install --save-dev my-module
43-
```
44-
45-
2. Add `my-module` to the `modules` section of `nuxt.config.ts`
46-
47-
```js
48-
export default defineNuxtConfig({
49-
modules: [
50-
'my-module'
51-
]
52-
})
53-
```
54-
55-
That's it! You can now use My Module in your Nuxt app ✨
30+
1. Add `nuxt-tiptap` dependency to your project
31+
32+
```bash
33+
# Using pnpm
34+
pnpm add -D nuxt-tiptap
35+
36+
# Using yarn
37+
yarn add --dev nuxt-tiptap
38+
39+
# Using npm
40+
npm install --save-dev nuxt-tiptap
41+
```
42+
43+
2. Add `nuxt-tiptap` to the `modules` section of `nuxt.config.ts`
44+
45+
```js
46+
export default defineNuxtConfig({
47+
modules: ["nuxt-tiptap"],
48+
});
49+
```
50+
51+
3. You can use the contents of this file as reference [TipTap.client.vue](/playground/components/TipTap.client.vue). Copy the code to your own `components/TipTap.client.vue`. Any path is fine as long as it's under `components` directory with .client.vue extension.
52+
53+
```xhtml
54+
<template>
55+
<div>
56+
<div v-if="editor">
57+
<button
58+
@click="editor.chain().focus().toggleBold().run()"
59+
:disabled="!editor.can().chain().focus().toggleBold().run()"
60+
:class="{ 'is-active': editor.isActive('bold') }"
61+
>
62+
bold
63+
</button>
64+
<button
65+
@click="editor.chain().focus().toggleItalic().run()"
66+
:disabled="!editor.can().chain().focus().toggleItalic().run()"
67+
:class="{ 'is-active': editor.isActive('italic') }"
68+
>
69+
italic
70+
</button>
71+
<button
72+
@click="editor.chain().focus().toggleStrike().run()"
73+
:disabled="!editor.can().chain().focus().toggleStrike().run()"
74+
:class="{ 'is-active': editor.isActive('strike') }"
75+
>
76+
strike
77+
</button>
78+
<button
79+
@click="editor.chain().focus().toggleCode().run()"
80+
:disabled="!editor.can().chain().focus().toggleCode().run()"
81+
:class="{ 'is-active': editor.isActive('code') }"
82+
>
83+
code
84+
</button>
85+
<button @click="editor.chain().focus().unsetAllMarks().run()">
86+
clear marks
87+
</button>
88+
<button @click="editor.chain().focus().clearNodes().run()">
89+
clear nodes
90+
</button>
91+
<button
92+
@click="editor.chain().focus().setParagraph().run()"
93+
:class="{ 'is-active': editor.isActive('paragraph') }"
94+
>
95+
paragraph
96+
</button>
97+
<button
98+
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
99+
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
100+
>
101+
h1
102+
</button>
103+
<button
104+
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
105+
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
106+
>
107+
h2
108+
</button>
109+
<button
110+
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
111+
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
112+
>
113+
h3
114+
</button>
115+
<button
116+
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
117+
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
118+
>
119+
h4
120+
</button>
121+
<button
122+
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
123+
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
124+
>
125+
h5
126+
</button>
127+
<button
128+
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
129+
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
130+
>
131+
h6
132+
</button>
133+
<button
134+
@click="editor.chain().focus().toggleBulletList().run()"
135+
:class="{ 'is-active': editor.isActive('bulletList') }"
136+
>
137+
bullet list
138+
</button>
139+
<button
140+
@click="editor.chain().focus().toggleOrderedList().run()"
141+
:class="{ 'is-active': editor.isActive('orderedList') }"
142+
>
143+
ordered list
144+
</button>
145+
<button
146+
@click="editor.chain().focus().toggleCodeBlock().run()"
147+
:class="{ 'is-active': editor.isActive('codeBlock') }"
148+
>
149+
code block
150+
</button>
151+
<button
152+
@click="editor.chain().focus().toggleBlockquote().run()"
153+
:class="{ 'is-active': editor.isActive('blockquote') }"
154+
>
155+
blockquote
156+
</button>
157+
<button @click="editor.chain().focus().setHorizontalRule().run()">
158+
horizontal rule
159+
</button>
160+
<button @click="editor.chain().focus().setHardBreak().run()">
161+
hard break
162+
</button>
163+
<button
164+
@click="editor.chain().focus().undo().run()"
165+
:disabled="!editor.can().chain().focus().undo().run()"
166+
>
167+
undo
168+
</button>
169+
<button
170+
@click="editor.chain().focus().redo().run()"
171+
:disabled="!editor.can().chain().focus().redo().run()"
172+
>
173+
redo
174+
</button>
175+
</div>
176+
<EditorContent :editor="editor" />
177+
</div>
178+
</template>
179+
180+
<script setup>
181+
const editor = useEditor({
182+
content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
183+
extensions: [StarterKit],
184+
});
185+
</script>
186+
```
187+
188+
4. Now edit the HTML, replace `button` with your UI provided component, or style it using tailwind, etc.
189+
190+
That's it! You can now use Nuxt TipTap in your Nuxt app ✨
191+
192+
**P.S** Currently, this module only provides minimal and essential imports to quickly add TipTap Editor to your Nuxt 3 App. The only main reason this module came to exist is to provide auto import to your Nuxt 3 App. More features might be added later on.
56193

57194
## Development
58195

@@ -81,14 +218,12 @@ npm run release
81218
```
82219

83220
<!-- Badges -->
84-
[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
85-
[npm-version-href]: https://npmjs.com/package/my-module
86-
87-
[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
88-
[npm-downloads-href]: https://npmjs.com/package/my-module
89-
90-
[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D
91-
[license-href]: https://npmjs.com/package/my-module
92221

222+
[npm-version-src]: https://img.shields.io/npm/v/nuxt-tiptap/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
223+
[npm-version-href]: https://npmjs.com/package/nuxt-tiptap
224+
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-tiptap.svg?style=flat&colorA=18181B&colorB=28CF8D
225+
[npm-downloads-href]: https://npmjs.com/package/nuxt-tiptap
226+
[license-src]: https://img.shields.io/npm/l/nuxt-tiptap.svg?style=flat&colorA=18181B&colorB=28CF8D
227+
[license-href]: https://npmjs.com/package/nuxt-tiptap
93228
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
94229
[nuxt-href]: https://nuxt.com

‎playground/components/TipTap.client.vue

-2
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,4 @@ const editor = useEditor({
129129
content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
130130
extensions: [StarterKit],
131131
});
132-
133-
console.log(editor);
134132
</script>

‎playground/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"private": true,
3-
"name": "my-module-playground",
3+
"name": "nuxt-tiptap-playground",
44
"type": "module",
55
"scripts": {
66
"dev": "nuxi dev",

‎src/module.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
import {
22
defineNuxtModule,
3-
addPlugin,
43
addImports,
5-
addImportsDir,
64
addComponent,
75
createResolver,
8-
tryResolveModule,
96
} from "@nuxt/kit";
107

118
import { name, version } from "../package.json";
@@ -37,10 +34,13 @@ export default defineNuxtModule<ModuleOptions>({
3734
// Default configuration options of the Nuxt module
3835
defaults: {},
3936
async setup(options, nuxt) {
40-
const { resolve } = createResolver(import.meta.url);
37+
// const { resolve } = createResolver(import.meta.url);
38+
39+
nuxt.options.build.transpile.push("@tiptap/vue-3");
40+
nuxt.options.build.transpile.push("@tiptap/starter-kit");
41+
nuxt.options.build.transpile.push("@tiptap/pm");
4142

4243
// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
43-
addPlugin(resolve("./runtime/plugin"));
4444

4545
for (const obj of defaultImports) {
4646
addImports({

‎src/runtime/plugin.ts

-5
This file was deleted.

0 commit comments

Comments
 (0)