From d99b75f6dd7ca6a844cb80802baf7d86f7c18927 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 1 Oct 2020 12:26:20 +0200 Subject: [PATCH] add introduction to all pages, move under table of contents --- docs/src/docPages/api/commands.md | 4 ++++ docs/src/docPages/api/editor.md | 4 +++- docs/src/docPages/api/events.md | 4 +++- docs/src/docPages/api/extensions.md | 4 +++- docs/src/docPages/api/extensions/blockquote.md | 1 + docs/src/docPages/api/keyboard-shortcuts.md | 6 ++++-- docs/src/docPages/api/schema.md | 6 ++++-- docs/src/docPages/guide/build-your-editor.md | 6 ++++-- docs/src/docPages/guide/configuration.md | 4 +++- docs/src/docPages/guide/custom-extensions.md | 4 +++- docs/src/docPages/guide/custom-styling.md | 4 +++- docs/src/docPages/guide/getting-started.md | 4 +++- docs/src/docPages/guide/store-content.md | 4 ++++ 13 files changed, 42 insertions(+), 13 deletions(-) diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 84081e70..b32d9187 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -1,5 +1,9 @@ # Commands +## Table of Contents + +## Introduction + ## Chain commands ```js diff --git a/docs/src/docPages/api/editor.md b/docs/src/docPages/api/editor.md index b3179ed7..7067849a 100644 --- a/docs/src/docPages/api/editor.md +++ b/docs/src/docPages/api/editor.md @@ -1,8 +1,10 @@ # 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 +## Introduction +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. + ## Configuration | Setting | Type | Default | Description | | ------------------ | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 78e6f86c..45a6bb3c 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -1,8 +1,10 @@ # Events -The editor fires a few different events that you can hook into. There are two ways to register event listeners: ## Table of Contents +## Introduction +The editor fires a few different events that you can hook into. There are two ways to register event listeners: + ## 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 38e7b5a4..c7dfc51b 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -1,8 +1,10 @@ # 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 +## Introduction +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. + ## 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/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md index d70deaf4..533c1a0a 100644 --- a/docs/src/docPages/api/extensions/blockquote.md +++ b/docs/src/docPages/api/extensions/blockquote.md @@ -1,4 +1,5 @@ # Blockquote + The Blockquote extension enables you to use the `
` HTML tag in the editor. This is great – you might have guessed – to use quotes in the editor. Type >  at the beginning of a new line and it will magically transform to a blockquote. diff --git a/docs/src/docPages/api/keyboard-shortcuts.md b/docs/src/docPages/api/keyboard-shortcuts.md index 122d676f..39ff0298 100644 --- a/docs/src/docPages/api/keyboard-shortcuts.md +++ b/docs/src/docPages/api/keyboard-shortcuts.md @@ -1,4 +1,8 @@ # Keyboard Shortcuts + +## Table of Contents + +## Introduction Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively. Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the  . @@ -7,8 +11,6 @@ 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 a9fe776d..46f00a5c 100644 --- a/docs/src/docPages/api/schema.md +++ b/docs/src/docPages/api/schema.md @@ -1,12 +1,14 @@ # Schema + +## Table of Contents + +## Introduction Unlike many other editors, tiptap is based on a [schema](https://prosemirror.net/docs/guide/#schema) that defines how your content is structured. That enables you to define the kind of nodes that may occur in the document, its attributes and the way they can be nested. This schema is *very* strict. You can’t use any HTML element or attribute that is not defined in your schema. 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 ccd9cd69..0d047478 100644 --- a/docs/src/docPages/guide/build-your-editor.md +++ b/docs/src/docPages/guide/build-your-editor.md @@ -1,8 +1,10 @@ -# 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. +# Build your editor ## Table of Contents +## Introduction +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 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: diff --git a/docs/src/docPages/guide/configuration.md b/docs/src/docPages/guide/configuration.md index bcf4be3e..0b9539e7 100644 --- a/docs/src/docPages/guide/configuration.md +++ b/docs/src/docPages/guide/configuration.md @@ -1,8 +1,10 @@ # 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. ## Table of Contents +## Introduction +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 See an example with `autoFocus: true` here: diff --git a/docs/src/docPages/guide/custom-extensions.md b/docs/src/docPages/guide/custom-extensions.md index 48bd3b7e..76c3c088 100644 --- a/docs/src/docPages/guide/custom-extensions.md +++ b/docs/src/docPages/guide/custom-extensions.md @@ -1,8 +1,10 @@ # Custom Extensions -Let’s extend tiptap with a custom extension! ## Table of Contents +## Introduction +Let’s extend tiptap with a custom extension! + ## 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 d3e21885..b1605244 100644 --- a/docs/src/docPages/guide/custom-styling.md +++ b/docs/src/docPages/guide/custom-styling.md @@ -1,8 +1,10 @@ # 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 +## Introduction +Tiptap is renderless, that doesn’t mean there is no styling provided. You can decided how your editor should look like. + ## 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 4fa8dffa..fbfac4ad 100644 --- a/docs/src/docPages/guide/getting-started.md +++ b/docs/src/docPages/guide/getting-started.md @@ -1,8 +1,10 @@ # 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. ## Table of Contents +## Introduction +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 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: diff --git a/docs/src/docPages/guide/store-content.md b/docs/src/docPages/guide/store-content.md index fb20f3a4..92c0497e 100644 --- a/docs/src/docPages/guide/store-content.md +++ b/docs/src/docPages/guide/store-content.md @@ -1,4 +1,8 @@ # Store content + +## Table of Contents + +## Introduction You can store your content as a JSON object or as a good old HTML string. Both work fine. And of course, you can pass both formats to the editor to restore your content. You can store your content as JSON and restore the content from HTML, or the other way around. I don’t know why you would do that, but tiptap wouldn’t care.