Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main
This commit is contained in:
@@ -19,7 +19,7 @@ yarn add @tiptap/extension-focus
|
|||||||
| Option | Type | Default | Description |
|
| Option | Type | Default | Description |
|
||||||
| --------- | --------- | ------------- | ------------------------------------------------------ |
|
| --------- | --------- | ------------- | ------------------------------------------------------ |
|
||||||
| className | `String` | `'has-focus'` | The class that is applied to the focused element. |
|
| className | `String` | `'has-focus'` | The class that is applied to the focused element. |
|
||||||
| nested | `Boolean` | `true` | When enabled nested elements get the focus class, too. |
|
| nested | `Boolean` | `false` | When enabled nested elements get the focus class, too. |
|
||||||
|
|
||||||
## Source code
|
## Source code
|
||||||
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
|
[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-cell)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
|
[](https://npmcharts.com/compare/@tiptap/extension-table-cell?minimal=true)
|
||||||
|
|
||||||
:::warning ⚠️ Preview
|
TODO
|
||||||
Work in progress
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
::: warning Use with Table, TableRow and TableHeader
|
::: warning Use with Table, TableRow and TableHeader
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-header)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
|
[](https://npmcharts.com/compare/@tiptap/extension-table-header?minimal=true)
|
||||||
|
|
||||||
:::warning ⚠️ Preview
|
TODO
|
||||||
Work in progress
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
::: warning Use with Table, TableRow and TableCell
|
::: warning Use with Table, TableRow and TableCell
|
||||||
|
|||||||
@@ -2,9 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
[](https://www.npmjs.com/package/@tiptap/extension-table-row)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
|
[](https://npmcharts.com/compare/@tiptap/extension-table-row?minimal=true)
|
||||||
|
|
||||||
:::warning ⚠️ Preview
|
TODO
|
||||||
Work in progress
|
|
||||||
:::
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
::: warning Use with Table, TableHeader and TableCell
|
::: warning Use with Table, TableHeader and TableCell
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
[](https://www.npmjs.com/package/@tiptap/extension-table)
|
||||||
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
[](https://npmcharts.com/compare/@tiptap/extension-table?minimal=true)
|
||||||
|
|
||||||
⚠️ Work in progress
|
TODO
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
::: warning Use with TableRow, TableHeader and TableCell
|
::: warning Use with TableRow, TableHeader and TableCell
|
||||||
|
|||||||
@@ -1,125 +0,0 @@
|
|||||||
# Inertia.js
|
|
||||||
|
|
||||||
## toc
|
|
||||||
|
|
||||||
## Introduction
|
|
||||||
The following guide describes how to integrate tiptap with your [Inertia.js](https://inertiajs.com/) project.
|
|
||||||
|
|
||||||
## toc
|
|
||||||
|
|
||||||
TODO
|
|
||||||
|
|
||||||
## Introduction
|
|
||||||
The following guide describes how to integrate tiptap with your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step.
|
|
||||||
|
|
||||||
## Requirements
|
|
||||||
* [Node](https://nodejs.org/en/download/) installed on your machine
|
|
||||||
* Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started)
|
|
||||||
|
|
||||||
## 1. Install Vue CLI (optional)
|
|
||||||
Vue CLI aims to be the standard tooling baseline for the Vue ecosystem, and helps to create new projects quickly. If you’re working with Vue a lot, chances are you have this installed already. Just skip this step then.
|
|
||||||
|
|
||||||
Here is how you could install (or update) it:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# with npm
|
|
||||||
npm install -g @vue/cli
|
|
||||||
|
|
||||||
# with Yarn
|
|
||||||
yarn global add @vue/cli
|
|
||||||
```
|
|
||||||
|
|
||||||
From now on, the `vue` command is available globally. Test it with `vue --version`, this should output the current version.
|
|
||||||
|
|
||||||
## 2. Create a project (optional)
|
|
||||||
If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
|
|
||||||
|
|
||||||
For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# create a project
|
|
||||||
vue create tiptap-example
|
|
||||||
|
|
||||||
# change directory
|
|
||||||
cd tiptap-example
|
|
||||||
```
|
|
||||||
|
|
||||||
## 3. Install the dependencies
|
|
||||||
Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# install with npm
|
|
||||||
npm install @tiptap/core @tiptap/vue-starter-kit
|
|
||||||
|
|
||||||
# install with Yarn
|
|
||||||
yarn add @tiptap/core @tiptap/vue-starter-kit
|
|
||||||
```
|
|
||||||
|
|
||||||
If you followed step 1 and 2, you can now start your project with `npm run dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) in your favorite browser. This might be different, if you’re working with an existing project.
|
|
||||||
|
|
||||||
## 4. Create a new component
|
|
||||||
To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
|
|
||||||
|
|
||||||
This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<template>
|
|
||||||
<editor-content :editor="editor" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
EditorContent,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
editor: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
this.editor = new Editor({
|
|
||||||
content: '<p>I’m running tiptap with Vue.js. 🎉</p>',
|
|
||||||
extensions: defaultExtensions(),
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDestroy() {
|
|
||||||
this.editor.destroy()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 5. Add it to your app
|
|
||||||
Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<tiptap />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Tiptap from './components/Tiptap.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
Tiptap
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
|
||||||
|
|
||||||
## 6. Use v-model (optional)
|
|
||||||
You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
|
|
||||||
|
|
||||||
<demo name="Guide/GettingStarted/VModel" />
|
|
||||||
@@ -52,10 +52,6 @@
|
|||||||
- title: Nuxt.js
|
- title: Nuxt.js
|
||||||
link: /guide/getting-started/nuxt
|
link: /guide/getting-started/nuxt
|
||||||
skip: true
|
skip: true
|
||||||
- title: Inertia.js
|
|
||||||
link: /guide/getting-started/intertia
|
|
||||||
type: draft
|
|
||||||
skip: true
|
|
||||||
- title: React
|
- title: React
|
||||||
link: /guide/getting-started/react
|
link: /guide/getting-started/react
|
||||||
type: draft
|
type: draft
|
||||||
|
|||||||
Reference in New Issue
Block a user