From 149ce56ad86996bf32ea7ca4808fc50a216d92e3 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Sun, 27 Sep 2020 10:29:01 +0200 Subject: [PATCH] add table of content support --- docs/gridsome.config.js | 1 + docs/package.json | 1 + .../Installation/index.vue | 0 docs/src/docPages/api/editor.md | 2 ++ docs/src/docPages/api/events.md | 2 ++ docs/src/docPages/api/extensions.md | 2 ++ docs/src/docPages/api/keyboard-shortcuts.md | 2 ++ docs/src/docPages/api/schema.md | 2 ++ docs/src/docPages/guide/build-your-editor.md | 6 ++-- docs/src/docPages/guide/configuration.md | 4 +-- docs/src/docPages/guide/custom-extensions.md | 2 ++ docs/src/docPages/guide/custom-styling.md | 2 ++ docs/src/docPages/guide/getting-started.md | 5 ++- docs/src/docPages/overview/contributing.md | 6 ++-- docs/src/docPages/overview/installation.md | 4 ++- docs/src/docPages/overview/upgrade-guide.md | 2 ++ docs/src/layouts/App/base.scss | 6 +++- yarn.lock | 36 ++++++++++++++++--- 18 files changed, 66 insertions(+), 19 deletions(-) rename docs/src/demos/{General => Overview}/Installation/index.vue (100%) diff --git a/docs/gridsome.config.js b/docs/gridsome.config.js index c65c4c6a..083bf31a 100644 --- a/docs/gridsome.config.js +++ b/docs/gridsome.config.js @@ -25,6 +25,7 @@ module.exports = { plugins: [ '@gridsome/remark-prismjs', 'remark-container', + 'remark-toc', ], remark: { autolinkHeadings: { diff --git a/docs/package.json b/docs/package.json index 7518bca0..58bfcbac 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,6 +20,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "remark-container": "^0.1.2", + "remark-toc": "^7.0.0", "typescript": "^4.0.3", "vue-github-button": "^1.1.2", "y-indexeddb": "^9.0.5", diff --git a/docs/src/demos/General/Installation/index.vue b/docs/src/demos/Overview/Installation/index.vue similarity index 100% rename from docs/src/demos/General/Installation/index.vue rename to docs/src/demos/Overview/Installation/index.vue diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index b30e2c23..b3179ed7 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -1,6 +1,8 @@ # Editor This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on. +## Table of Contents + ## Configuration | Setting | Type | Default | Description | | ------------------ | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index c29eacc0..78e6f86c 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -1,6 +1,8 @@ # Events The editor fires a few different events that you can hook into. There are two ways to register event listeners: +## Table of Contents + ## Option 1: Right-away You can define your event listeners on a new editor instance right-away: diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index 792e7e2c..ef0133a4 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -1,6 +1,8 @@ # Extensions Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap. +## Table of Contents + ## A minimalist set of extensions You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist). diff --git a/docs/src/docPages/api/keyboard-shortcuts.md b/docs/src/docPages/api/keyboard-shortcuts.md index 42dd3668..cee7e61c 100644 --- a/docs/src/docPages/api/keyboard-shortcuts.md +++ b/docs/src/docPages/api/keyboard-shortcuts.md @@ -7,6 +7,8 @@ Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are rec You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms. +## Table of Contents + ## Overwrite keyboard shortcuts ```js diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md index 3b2fad79..ca5fbb4a 100644 --- a/docs/src/docPages/api/schema.md +++ b/docs/src/docPages/api/schema.md @@ -5,6 +5,8 @@ This schema is *very* strict. You can’t use any HTML element or attribute that Let me give you one example: If you paste something like `This is important` into tiptap, don’t have any extension that handles `strong` tags registered, you’ll only see `This is important` – without the strong tags. +## Table of Contents + ## How a schema looks like The most simple schema for a typical *ProseMirror* editor is looking something like that: diff --git a/docs/src/docPages/guide/build-your-editor.md b/docs/src/docPages/guide/build-your-editor.md index 611f9c65..ccd9cd69 100644 --- a/docs/src/docPages/guide/build-your-editor.md +++ b/docs/src/docPages/guide/build-your-editor.md @@ -1,9 +1,9 @@ # Configuration - In its simplest version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you would like to have. -## Adding a menu +## Table of Contents +## Adding a menu Let’s start to add your first button to the editor. Once initiated the editor has a powerful API. The so called *commands* allow you to modify selected text (and tons of other things). Here is an example with one single button: @@ -13,11 +13,9 @@ To mark selected text bold we can use `this.editor.bold`. There a ton of other c You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example. ### Related Links - * [List of available commands](/api/commands) ## Configure extensions - You are free to choose which parts of tiptap you want to use. Tiptap has support for different nodes (paragraphs, blockquotes, tables and many more) and different marks (bold, italic, links). If you want to explicitly configure what kind of nodes and marks are allowed and which are not allowed, you can configure those. Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text. diff --git a/docs/src/docPages/guide/configuration.md b/docs/src/docPages/guide/configuration.md index 83ea9de0..bcf4be3e 100644 --- a/docs/src/docPages/guide/configuration.md +++ b/docs/src/docPages/guide/configuration.md @@ -1,9 +1,9 @@ # Configuration - tiptap is all about customization. There are a ton of options to configure the behavior and functionality of the editor. Most of those settings can be set before creating the Editor. Give tiptap a JSON with all the settings you would like to overwrite. -## Overwrite the default settings +## Table of Contents +## Overwrite the default settings See an example with `autoFocus: true` here: ```js diff --git a/docs/src/docPages/guide/custom-extensions.md b/docs/src/docPages/guide/custom-extensions.md index edb28631..48bd3b7e 100644 --- a/docs/src/docPages/guide/custom-extensions.md +++ b/docs/src/docPages/guide/custom-extensions.md @@ -1,6 +1,8 @@ # Custom Extensions Let’s extend tiptap with a custom extension! +## Table of Contents + ## Option 1: Change defaults Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut, and just that. diff --git a/docs/src/docPages/guide/custom-styling.md b/docs/src/docPages/guide/custom-styling.md index 962da01e..09be8b13 100644 --- a/docs/src/docPages/guide/custom-styling.md +++ b/docs/src/docPages/guide/custom-styling.md @@ -1,6 +1,8 @@ # Custom styling Tiptap is renderless, that doesn’t mean there is no styling provided. You can decided how your editor should look like. +## Table of Contents + ## Option 1: Style the plain HTML The whole editor is rendered inside of a container with the class `.ProseMirror`. You can use that to scope your styling to the editor content: diff --git a/docs/src/docPages/guide/getting-started.md b/docs/src/docPages/guide/getting-started.md index dcade3d5..f7133ef5 100644 --- a/docs/src/docPages/guide/getting-started.md +++ b/docs/src/docPages/guide/getting-started.md @@ -1,9 +1,9 @@ # Getting started - tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages. -## 1. Install the dependencies +## Table of Contents +## 1. Install the dependencies We assume you already have a [Vue.js](https://cli.vuejs.org/) (or [Nuxt.js](https://nuxtjs.org/)) project. To connect tiptap with Vue.js you are going to need an adapter. You can install tiptap for Vue.js as a dependency in your project: ```bash @@ -17,7 +17,6 @@ yarn add @tiptap/vue @tiptap/vue-starter-kit The `@tiptap/vue-starter-kit` includes a few basics you would probably need anyway. Cool, you have got everything in place to set up tiptap! 🙌 ## 2. Create a new component - Create a new Vue component (you can call it ``) and add the following content. This is the fastest way to get tiptap up and running with Vue.js. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon. diff --git a/docs/src/docPages/overview/contributing.md b/docs/src/docPages/overview/contributing.md index db621d2d..8bc64132 100644 --- a/docs/src/docPages/overview/contributing.md +++ b/docs/src/docPages/overview/contributing.md @@ -1,20 +1,18 @@ # Contributing - Tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution: -## Examples +## Table of Contents +## Examples * Improved documentation, e. g. fixing typos, new sections, further explanation …) * New features for existing extensions, e. g. a new option * New extensions, which don’t require changes to the core or other core extensions * Well explained, non-breaking changes to the core ## Code style - There is a eslint config, that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request. Make sure it’s passing, before sending a pull request. ## Testing - All your pull requests will automatically run all our existing tests. Make sure that they all pass. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`. Any further questions? Create a new issue or discussion in the repository. We’ll get back to you. diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index 83b8d838..cde3de7a 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -1,6 +1,8 @@ # Installation 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. +## Table of Contents + ## Option 1: Vanilla 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 tiptap with other frameworks not mentioned here. @@ -49,7 +51,7 @@ yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit Create a new component and add the following content to get a basic version of tiptap: - +