diff --git a/docs/src/docPages/introduction.md b/docs/src/docPages/introduction.md index 33b4710d..f6a7e684 100644 --- a/docs/src/docPages/introduction.md +++ b/docs/src/docPages/introduction.md @@ -1,15 +1,12 @@ # Introduction -tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that are already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. +tiptap is a renderless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. -Although tiptap tries to hide most of the complexity of ProseMirror, it’s is built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). You’ll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap. +Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). You’ll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap. ## Renderless -The implementation of a text editor can be very specific for each use case. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You’ll have full control over markup and styling. +We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You are in full control over markup and styling. -## TypeScript -Tiptap 2 is written in TypeScript. That gives you a nice autocomplete for the API (if your IDE supports those), helps us to find bugs early and makes it possible to generate [a complete API documentation](#) on top of the extensive human written documentation. - -## Framework-agnostic +## Works with and without Vue.js We don’t care what framework you use. Tiptap is ready to be used with plain JavaScript, Vue.js or React. That makes it even possible to write a renderer for Svelte and others. ## Who uses tiptap? diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index 8682148a..eb83f48f 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -1,32 +1,16 @@ # Installation -tiptap has a modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best. +You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow. -## Vue.js +## Overview -To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. +- [Option 1: Vanilla JavaScript](#option-1-vanilla-javascript) +- [Option 2: Vue.js](#option-2-vuejs) +- [Option 3: CodeSandbox](#option-3-codesandbox) -```bash -# With npm -npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit +## Option 1: Vanilla JavaScript -# Or: With Yarn -yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit -``` - -| Package | Description | -| -------------------------------------------------------------------------------- | ----------------------------------- | -| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | -| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js | -| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | Installs the most common extensions | - -Create a new component and add the following content to get a basic version of tiptap: - - - -## Plain JavaScript - -Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect the tiptap core with other frameworks not mentioned here. +Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect the tiptap core with other frameworks (Svelte 👋) not mentioned here. ```bash # With npm @@ -36,6 +20,11 @@ npm install @tiptap/core @tiptap/starter-kit yarn add @tiptap/core @tiptap/starter-kit ``` +| Package | Description | +| ---------------------------------------------------------------------------- | -------------------------- | +| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | +| [@tiptap/starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions | + Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap: ```js @@ -49,10 +38,32 @@ new Editor({ }) ``` -## CodeSandbox +## Option 2: Vue.js -CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and it’s great to share your code with others. +To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js rendering adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart. -It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). This helps a ton to fix bugs faster. +```bash +# With npm +npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit + +# Or: With Yarn +yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit +``` + +| Package | Description | +| -------------------------------------------------------------------------------- | --------------------------------------------- | +| [@tiptap/core](https://www.npmjs.com/package/@tiptap/core) | The actual editor | +| [@tiptap/vue](https://www.npmjs.com/package/@tiptap/vue) | Rendering for Vue.js | +| [@tiptap/vue-starter-kit](https://www.npmjs.com/package/@tiptap/vue-starter-kit) | The most common extensions wrapped for Vue.js | + +Create a new component and add the following content to get a basic version of tiptap: + + + +## Option 3: CodeSandbox + +CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others. + +It’s also amazing for bug reports. Found it a bug? Try to recreate it there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new). That helps to fix bugs faster. * [Vue.js/tiptap on CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)