ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel
2021-06-22 21:28:20 +02:00
parent db8c9d50b2
commit 50a793cd43
9 changed files with 148 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/src/docPages/api/commands/blur.md
View File

@@ -1,3 +1,11 @@
# blur # blur
This command removes the focus from the editor.
See also: [focus](/api/commands/focus)
## Usage
```js
// Remove the focus from the editor
editor.commands.blur()
```
<ContentMissing />

2
docs/src/docPages/api/commands/focus.md
View File

@@ -3,7 +3,7 @@ This command sets the focus back to the editor.
When a user clicks on a button outside the editor, the browser sets the focus to that button. In most scenarios you want to focus the editor then again. That’s why you’ll see that in basically every demo here. When a user clicks on a button outside the editor, the browser sets the focus to that button. In most scenarios you want to focus the editor then again. That’s why you’ll see that in basically every demo here.
See also: [setTextSelection](/api/commands/set-text-selection) See also: [setTextSelection](/api/commands/set-text-selection), [blur](/api/commands/blur)
## Parameters ## Parameters
`position: 'start' | 'end' | number | boolean | null (false)` `position: 'start' | 'end' | number | boolean | null (false)`

26
docs/src/docPages/api/extensions.md
View File

@@ -8,19 +8,19 @@ Extensions add new capabilities to tiptap and you’ll read the word extension h
There are also some extensions with more capabilities. We call them [nodes](/api/nodes) and [marks](/api/marks) which can render content in the editor. There are also some extensions with more capabilities. We call them [nodes](/api/nodes) and [marks](/api/marks) which can render content in the editor.
## List of provided extensions ## List of provided extensions
| Title | Default Extension | Source Code | | Title | StarterKit ([view](/api/extensions/starter-kit)) | Source Code |
| ----------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | | ----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| [CharacterCount](/api/extensions/character-count) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/) | | [CharacterCount](/api/extensions/character-count) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/) |
| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/) | | [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration/) |
| [CollaborationCursor](/api/extensions/collaboration-cursor) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) | | [CollaborationCursor](/api/extensions/collaboration-cursor) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) |
| [Dropcursor](/api/extensions/dropcursor) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/) | | [Dropcursor](/api/extensions/dropcursor) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/) |
| [Focus](/api/extensions/focus) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/) | | [Focus](/api/extensions/focus) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/) |
| [FontFamily](/api/extensions/font-family) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/) | | [FontFamily](/api/extensions/font-family) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/) |
| [Gapcursor](/api/extensions/gapcursor) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/) | | [Gapcursor](/api/extensions/gapcursor) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/) |
| [History](/api/extensions/history) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/) | | [History](/api/extensions/history) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/) |
| [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/) | | [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/) |
| [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) | | [TextAlign](/api/extensions/text-align) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) |
| [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) | | [Typography](/api/extensions/typography) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) |
You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`StarterKit`](/guide/configuration#default-extensions). You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. Read more about [`StarterKit`](/guide/configuration#default-extensions).

82
docs/src/docPages/api/extensions/starter-kit.md Normal file
View File

@@ -0,0 +1,82 @@
# StarterKit
[![Version](https://img.shields.io/npm/v/@tiptap/starter-kit.svg?label=version)](https://www.npmjs.com/package/@tiptap/starter-kit)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/starter-kit.svg)](https://npmcharts.com/compare/@tiptap/starter-kit?minimal=true)
The `StarterKit` is a collection of the most popular tiptap extensions. If you’re just getting started, this extension is for you.
## Installation
```bash
# with npm
npm install @tiptap/starter-kit
# with Yarn
yarn add @tiptap/starter-kit
```
## Included extensions
### Nodes
* [`Blockquote`](/api/nodes/blockquote)
* [`BulletList`](/api/nodes/bullet-list)
* [`CodeBlock`](/api/nodes/code-block)
* [`Document`](/api/nodes/document)
* [`HardBreak`](/api/nodes/hard-break)
* [`Heading`](/api/nodes/heading)
* [`HorizontalRule`](/api/nodes/horizontal-rule)
* [`ListItem`](/api/nodes/list-item)
* [`Mention`](/api/nodes/mention)
* [`OrderedList`](/api/nodes/ordered-list)
* [`Paragraph`](/api/nodes/paragraph)
* [`Text`](/api/nodes/text)
### Marks
* [`Bold`](/api/marks/bold)
* [`Code`](/api/marks/code)
* [`Italic`](/api/marks/italic)
* [`Strike`](/api/marks/strike)
* [`TextStyle`](/api/marks/text-style)
### Extensions
* [`Dropcursor`](/api/extensions/dropcursor)
* [`Gapcursor`](/api/extensions/gapcursor)
* [`History`](/api/extensions/history)
## Source code
[packages/starter-kit/](https://github.com/ueberdosis/tiptap/blob/main/packages/starter-kit/)
## Usage
Pass `StarterKit` to the editor to load all included extension at once.
```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
const editor = new Editor({
content: '<p>Example Text</p>',
extensions: [
StarterKit,
],
})
```
You can configure the included extensions, or even disable a few of them, like shown below.
```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
const editor = new Editor({
content: '<p>Example Text</p>',
extensions: [
StarterKit.configure({
// Disable an included extension
history: false,
// Configure an included extension
heading: {
levels: [1, 2],
},
}),
],
})
```

24
docs/src/docPages/api/marks.md
View File

@@ -6,15 +6,15 @@
One or multiple marks can be applied to [nodes](/api/nodes), for example to add inline formatting like bold and italic, or other additional information. One or multiple marks can be applied to [nodes](/api/nodes), for example to add inline formatting like bold and italic, or other additional information.
## List of supported marks ## List of supported marks
| Title | Default Extension | Source Code | | Title | StarterKit ([view](/api/extensions/starter-kit)) | Source Code |
| ------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------- | | ------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------- |
| [Bold](/api/marks/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bold/) | | [Bold](/api/marks/bold) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bold/) |
| [Code](/api/marks/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/) | | [Code](/api/marks/code) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/) |
| [Highlight](/api/marks/highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/) | | [Highlight](/api/marks/highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/) |
| [Italic](/api/marks/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-italic/) | | [Italic](/api/marks/italic) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-italic/) |
| [Link](/api/marks/link) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/) | | [Link](/api/marks/link) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/) |
| [Strike](/api/marks/strike) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-strike/) | | [Strike](/api/marks/strike) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-strike/) |
| [Subscript](/api/marks/subscript) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/) | | [Subscript](/api/marks/subscript) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/) |
| [Superscript](/api/marks/superscript) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/) | | [Superscript](/api/marks/superscript) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/) |
| [TextStyle](/api/marks/text-style) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/) | | [TextStyle](/api/marks/text-style) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/) |
| [Underline](/api/marks/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-underline/) | | [Underline](/api/marks/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-underline/) |

44
docs/src/docPages/api/nodes.md
View File

@@ -6,28 +6,28 @@
If you think of the document as a tree, then nodes are just a type of content in that tree. Examples of nodes are paragraphs, headings, or code blocks. But nodes don’t have to be blocks. They can also be rendered inline with the text, for example for **@mentions**. If you think of the document as a tree, then nodes are just a type of content in that tree. Examples of nodes are paragraphs, headings, or code blocks. But nodes don’t have to be blocks. They can also be rendered inline with the text, for example for **@mentions**.
## List of supported nodes ## List of supported nodes
| Title | Default Extension | Source Code | | Title | StarterKit ([view](/api/extensions/starter-kit)) | Source Code |
| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- | | -------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- |
| [Blockquote](/api/nodes/blockquote) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/) | | [Blockquote](/api/nodes/blockquote) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/) |
| [BulletList](/api/nodes/bullet-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/) | | [BulletList](/api/nodes/bullet-list) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/) |
| [CodeBlock](/api/nodes/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/) | | [CodeBlock](/api/nodes/code-block) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/) |
| [Document](/api/nodes/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/) | | [Document](/api/nodes/document) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/) |
| [Emoji](/api/nodes/emoji) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-emoji/) | | [Emoji](/api/nodes/emoji) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-emoji/) |
| [HardBreak](/api/nodes/hard-break) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/) | | [HardBreak](/api/nodes/hard-break) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/) |
| [Hashtag](/api/nodes/hashtag) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hashtag/) | | [Hashtag](/api/nodes/hashtag) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hashtag/) |
| [Heading](/api/nodes/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/) | | [Heading](/api/nodes/heading) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/) |
| [HorizontalRule](/api/nodes/horizontal-rule) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/) | | [HorizontalRule](/api/nodes/horizontal-rule) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/) |
| [Image](/api/nodes/image) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/) | | [Image](/api/nodes/image) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/) |
| [ListItem](/api/nodes/list-item) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/) | | [ListItem](/api/nodes/list-item) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/) |
| [Mention](/api/nodes/mention) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/) | | [Mention](/api/nodes/mention) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/) |
| [OrderedList](/api/nodes/ordered-list) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/) | | [OrderedList](/api/nodes/ordered-list) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/) |
| [Paragraph](/api/nodes/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/) | | [Paragraph](/api/nodes/paragraph) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/) |
| [Table](/api/nodes/table) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/) | | [Table](/api/nodes/table) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/) |
| [TableRow](/api/nodes/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/) | | [TableRow](/api/nodes/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/) |
| [TableCell](/api/nodes/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/) | | [TableCell](/api/nodes/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/) |
| [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/) | | [TaskList](/api/nodes/task-list) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/) |
| [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/) | | [TaskItem](/api/nodes/task-item) | – | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/) |
| [Text](/api/nodes/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/) | | [Text](/api/nodes/text) | Included | [GitHub](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/) |
## Create a new node ## Create a new node
You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node: You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node:

6
docs/src/docPages/guide/node-views.md
View File

@@ -3,7 +3,9 @@
## toc ## toc
## Introduction ## Introduction
Node views are the best thing since sliced bread, at least if you are a fan of customization (and bread). With node views you can add interactive nodes to your editor content. That can literally be everything. If you can write it in JavaScript, you can use it in your editor. Node views are the best thing since sliced bread, at least if you are a fan of customization (and bread). With node views you can add interactive nodes to your editor. That can literally be everything. If you can write it in JavaScript, you can use it in your editor.
Node views are amazing to improve the in-editor experience, but can also be used in a read-only instance of tiptap. They are unrelated to the HTML output by design, so you have full control about the in-editor experience *and* the output.
## Different types of node views ## Different types of node views
Depending on what you would like to build, node views work a little bit different and can have their verify specific capabilities, but also pitfalls. The main question is: How should your custom node look like? Depending on what you would like to build, node views work a little bit different and can have their verify specific capabilities, but also pitfalls. The main question is: How should your custom node look like?
@@ -68,7 +70,7 @@ Let’s say you have a node view which lets users add a video player and configu
I know, I know, it’s not that easy. Just keep in mind, that you‘re in full control of the rendering inside the editor and of the output. I know, I know, it’s not that easy. Just keep in mind, that you‘re in full control of the rendering inside the editor and of the output.
:::warning What if you store JSON? :::warning What if you store JSON?
That doesn’t apply to JSON. For the JSON, everything is stored as an object. There is no need to configure the “translation” to and from HTML. That doesn’t apply to JSON. In JSON, everything is stored as an object. There is no need to configure the “translation” to and from HTML.
::: :::
### Render HTML ### Render HTML

2
docs/src/docPages/sponsor.md
View File

@@ -38,6 +38,8 @@ Companies betting on tiptap probably want some peace of mind and ensure that we
### I can’t use GitHub. How can I support you? ### I can’t use GitHub. How can I support you?
If you’re a company, don’t want to use GitHub, don’t have a credit card or want a proper invoice from us, just reach out to us at [humans@tiptap.dev](mailto:humans@tiptap.dev). If you’re a company, don’t want to use GitHub, don’t have a credit card or want a proper invoice from us, just reach out to us at [humans@tiptap.dev](mailto:humans@tiptap.dev).
We are part of the Y-Collective, a fund for projects related to Y.js (the technology we’re using for all the collaborative editing magic). That’s an OpenCollective, which allows you to send money through transfer, PayPal or credit card. Donations are tax deductible for US companies.
### I want consulting. What’s your rate? ### I want consulting. What’s your rate?
We don’t do any calls, consulting or personal support for tiptap. If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues) to keep everything accessible for the whole community. We don’t do any calls, consulting or personal support for tiptap. If you have an issue, a question, want to talk something through or anything else, [please use GitHub issues](https://github.com/ueberdosis/tiptap/issues) to keep everything accessible for the whole community.

10
docs/src/links.yaml
View File

@@ -132,7 +132,7 @@
items: items:
- title: blur - title: blur
link: /api/commands/blur link: /api/commands/blur
type: draft type: new
- title: clearContent - title: clearContent
link: /api/commands/clear-content link: /api/commands/clear-content
- title: clearNodes - title: clearNodes
@@ -156,10 +156,8 @@
link: /api/commands/extend-mark-range link: /api/commands/extend-mark-range
- title: focus - title: focus
link: /api/commands/focus link: /api/commands/focus
type: new
- title: forEach - title: forEach
link: /api/commands/for-each link: /api/commands/for-each
type: new
- title: insertContent - title: insertContent
link: /api/commands/insert-content link: /api/commands/insert-content
- title: insertContentAt - title: insertContentAt
@@ -219,7 +217,6 @@
type: draft type: draft
- title: setTextSelection - title: setTextSelection
link: /api/commands/set-text-selection link: /api/commands/set-text-selection
type: new
- title: sinkListItem - title: sinkListItem
link: /api/commands/sink-list-item link: /api/commands/sink-list-item
type: draft type: draft
@@ -266,7 +263,6 @@
link: /api/nodes/code-block link: /api/nodes/code-block
- title: CodeBlockLowlight - title: CodeBlockLowlight
link: /api/nodes/code-block-lowlight link: /api/nodes/code-block-lowlight
type: new
- title: Document - title: Document
link: /api/nodes/document link: /api/nodes/document
- title: Emoji - title: Emoji
@@ -335,7 +331,6 @@
items: items:
- title: BubbleMenu - title: BubbleMenu
link: /api/extensions/bubble-menu link: /api/extensions/bubble-menu
type: new
- title: CharacterCount - title: CharacterCount
link: /api/extensions/character-count link: /api/extensions/character-count
- title: Collaboration - title: Collaboration
@@ -346,7 +341,6 @@
link: /api/extensions/dropcursor link: /api/extensions/dropcursor
- title: FloatingMenu - title: FloatingMenu
link: /api/extensions/floating-menu link: /api/extensions/floating-menu
type: new
- title: Focus - title: Focus
link: /api/extensions/focus link: /api/extensions/focus
- title: FontFamily - title: FontFamily
@@ -357,6 +351,8 @@
link: /api/extensions/history link: /api/extensions/history
- title: Placeholder - title: Placeholder
link: /api/extensions/placeholder link: /api/extensions/placeholder
- title: StarterKit
link: /api/extensions/starter-kit
type: new type: new
- title: TextAlign - title: TextAlign
link: /api/extensions/text-align link: /api/extensions/text-align