From a12b09f1b71a07d6b383bcb0eb5b8b22a1738474 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 24 Sep 2020 21:41:35 +0200 Subject: [PATCH 1/3] improve commands page, add api overview --- docs/src/docPages/api/commands.md | 86 ++++++++++--------------------- docs/src/docPages/api/overview.md | 15 ++++++ docs/src/links.yaml | 7 +-- 3 files changed, 47 insertions(+), 61 deletions(-) create mode 100644 docs/src/docPages/api/overview.md diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index bfe76122..0fd3564e 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -1,65 +1,35 @@ # Commands -:::warning Out of date -This content is written for tiptap 1 and needs an update. -::: +## Chain commands -- menus -- buttons -- commands +```js +editor.chain().focus().bold().run() +``` -## .clearContent() +## List of commands -Clear the whole document. +### Content +| Command | Description | +| --------------- | ----------------------------------------------------------- | +| .clearContent() | Clear the whole document. | +| .insertHTML() | Insert a string of HTML at the currently selected position. | +| .insertText() | Insert a string of text at the currently selected position. | +| .setContent() | Replace the whole document with new content. | -## .deleteSelection() +### Nodes & Marks +| Command | Description | +| ------------------- | ------------------------------------------ | +| .removeMark() | Remove a mark in the current selection. | +| .removeMarks() | Remove all marks in the current selection. | +| .replaceWithNode() | Replace a given range with a node. | +| .selectParentNode() | Select the parent node. | +| .toggleMark() | Toggle a mark on and off. | +| .toggleNode() | Toggle a node with another node. | +| .updateMark() | Update a mark with new attributes. | -Delete the selection, if there is one. - -## .focus() - -Focus the editor at the given position. - -## .insertHTML() - -Insert a string of HTML at the currently selected position. - -## .insertText() - -Insert a string of text at the currently selected position. - -## .removeMark() - -Remove a mark in the current selection. - -## .removeMarks() - -Remove all marks in the current selection. - -## .replaceWithNode() - -Replace a given range with a node. - -## .selectAll() - -Select the whole document. - -## .selectParentNode() - -Select the parent node. - -## .setContent() - -Replace the whole document with new content. - -## .toggleMark() - -Toggle a mark on and off. - -## .toggleNode() - -Toggle a node with another node. - -## .updateMark() - -Update a mark with new attributes. \ No newline at end of file +### Selection +| Command | Description | +| ------------------ | --------------------------------------- | +| .deleteSelection() | Delete the selection, if there is one. | +| .focus() | Focus the editor at the given position. | +| .selectAll() | Select the whole document. | diff --git a/docs/src/docPages/api/overview.md b/docs/src/docPages/api/overview.md new file mode 100644 index 00000000..d985b94c --- /dev/null +++ b/docs/src/docPages/api/overview.md @@ -0,0 +1,15 @@ +# Overview + +* tiptap is a friendly wrapped around ProseMirror. +* ProseMirror works with a strict [Schema](/api/schema), which defines the allowed structure of a document. +* A document is a tree of headings, paragraphs and others elements, so called nodes. +* Marks can be attached to a node, e. g. to emphasize part of it. +* [Commands](/api/commands) change that document programmatically. +* The document is stored in a state. +* All changes are applied as transactions to the state. +* The state has details about the current content, cursor position and selection. +* You can hook into a few different [events](/api/events), for example to alter transactions before they get applied. +* [Extensions](/api/extensions) add functionality like nodes, marks and/or commands to the editor. +* A huge amount of commands are bound to common [keyboard shortcuts](/api/keyboard-shortcuts). + +All of those concepts are explained in detail on the following pages. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index a783be6b..5faf9e2f 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -105,10 +105,12 @@ - title: API items: + - title: Overview + link: /api/overview - title: Editor - link: /api/editor/ + link: /api/editor - title: Extensions - link: /api/extensions/ + link: /api/extensions items: - title: Blockquote link: /api/extensions/blockquote @@ -176,7 +178,6 @@ link: /api/extensions/underline - title: Commands link: /api/commands - draft: true - title: Events link: /api/events - title: Schema From f4f5a027785fd3ac48c904985f1806fac9564da2 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 24 Sep 2020 21:47:04 +0200 Subject: [PATCH 2/3] minor content improvements --- docs/src/demos/General/Installation/index.vue | 2 +- docs/src/docPages/api/extensions.md | 10 +--------- docs/src/docPages/overview/installation.md | 13 ++----------- 3 files changed, 4 insertions(+), 21 deletions(-) diff --git a/docs/src/demos/General/Installation/index.vue b/docs/src/demos/General/Installation/index.vue index 511d9e98..06e4677f 100644 --- a/docs/src/demos/General/Installation/index.vue +++ b/docs/src/demos/General/Installation/index.vue @@ -18,7 +18,7 @@ export default { mounted() { this.editor = new Editor({ - content: '

I’m running tiptap with Vue.js. 🎉

', + content: '

Hello, I’m tiptap running in Vue.js! 👋

', extensions: defaultExtensions(), }) }, diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md index 5b1d344d..4abce374 100644 --- a/docs/src/docPages/api/extensions.md +++ b/docs/src/docPages/api/extensions.md @@ -1,17 +1,13 @@ # 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. ## 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). +You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist). ## Default extensions - You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. See [how you can use the `defaultExtensions()`](/examples/basic). ## List of supported extensions - | Title | Default Extension | Source Code | | ------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- | | [Blockquote](/api/extensions/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/) | @@ -44,13 +40,9 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in ## Community extensions - :::warning Work in Progress This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets. ::: ## Your custom extensions - Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/custom-extensions). - -[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md index 6165b073..83b8d838 100644 --- a/docs/src/docPages/overview/installation.md +++ b/docs/src/docPages/overview/installation.md @@ -1,15 +1,7 @@ # 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. -## Overview - -- [Option 1: Vanilla JavaScript](#option-1-vanilla-javascript) -- [Option 2: Vue.js](#option-2-vuejs) -- [Option 3: CodeSandbox](#option-3-codesandbox) - ## 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. ```bash @@ -39,7 +31,6 @@ new Editor({ ``` ## Option 2: Vue.js - 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. ```bash @@ -60,10 +51,10 @@ Create a new component and add the following content to get a basic version of t -## Option 3: CodeSandbox + From a00bb32cc40a9370149845f22469cca6ce2e7f40 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 24 Sep 2020 21:50:27 +0200 Subject: [PATCH 3/3] improve basic example, add task --- docs/src/demos/Examples/Basic/index.vue | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/src/demos/Examples/Basic/index.vue b/docs/src/demos/Examples/Basic/index.vue index e4c7e0d5..d61caab6 100644 --- a/docs/src/demos/Examples/Basic/index.vue +++ b/docs/src/demos/Examples/Basic/index.vue @@ -1,9 +1,7 @@