Skip to content

Commit

Permalink
fix: update hierarchy to include Toc
Browse files Browse the repository at this point in the history
  • Loading branch information
nperez0111 committed Jun 28, 2024
1 parent fe0537a commit e32f6b3
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 25 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 23 additions & 23 deletions src/content/editor/extensions/custom-extensions/extend-existing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ new Editor({

The same applies to every aspect of an existing extension, except to the name. Let’s look at all the things that you can change through the extend method. We focus on one aspect in every example, but you can combine all those examples and change multiple aspects in one `extend()` call too.

### Name
## Name

The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, you can copy the whole extension and change the name in all occurrences.

The extension name is also part of the JSON. If you [store your content as JSON](/guides/output-json-html#option-1-json), you need to change the name there too.

### Priority
## Priority

The priority defines the order in which extensions are registered. The default priority is `100`, that’s what most extension have. Extensions with a higher priority will be loaded earlier.

Expand All @@ -56,15 +56,15 @@ const CustomLink = Link.extend({

The order in which extensions are loaded influences two things:

1. #### Plugin order
1. ### Plugin order

ProseMirror plugins of extensions with a higher priority will run first.

2. #### Schema order
2. ### Schema order

The [`Link`](/editor/extensions/marks/link) mark for example has a higher priority, which means it will be rendered as `<a href="…"><strong>Example</strong></a>` instead of `<strong><a href="…">Example</a></strong>`.

### Settings
## Settings

All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of Tiptap for other developers, you can do it like this:

Expand All @@ -81,7 +81,7 @@ const CustomHeading = Heading.extend({
})
```

### Storage
## Storage

At some point you probably want to save some data within your extension instance. This data is mutable. You can access it within the extension under `this.storage`.

Expand Down Expand Up @@ -113,7 +113,7 @@ const editor = new Editor({
const awesomeness = editor.storage.customExtension.awesomeness
```

### Schema
## Schema

Tiptap works with a strict schema, which configures how the content can be structured, nested, how it behaves and many more things. You [can change all aspects of the schema](/editor/core-concepts/schema) for existing extensions. Let’s walk through a few common use cases.

Expand Down Expand Up @@ -141,7 +141,7 @@ const CustomParagraph = Paragraph.extend({

That’s just two tiny examples, but [the underlying ProseMirror schema](https://prosemirror.net/docs/ref/#model.SchemaSpec) is really powerful.

### Attributes
## Attributes

You can use attributes to store additional information in the content. Let’s say you want to extend the default `Paragraph` node to have different colors:

Expand Down Expand Up @@ -217,7 +217,7 @@ const CustomParagraph = Paragraph.extend({

You can completely disable the rendering of attributes with `rendered: false`.

#### Extend existing attributes
### Extend existing attributes

If you want to add an attribute to an extension and keep existing attributes, you can access them through `this.parent()`.

Expand All @@ -236,7 +236,7 @@ const CustomTableCell = TableCell.extend({
})
```

### Global attributes
## Global attributes

Attributes can be applied to multiple extensions at once. That’s useful for text alignment, line height, color, font family, and other styling related attributes.

Expand Down Expand Up @@ -267,7 +267,7 @@ const TextAlign = Extension.create({
})
```

### Render HTML
## Render HTML

With the `renderHTML` function you can control how an extension is rendered to HTML. We pass an attributes object to it, with all local attributes, global attributes, and configured CSS classes. Here is an example from the `Bold` extension:

Expand Down Expand Up @@ -299,7 +299,7 @@ renderHTML({ HTMLAttributes }) {
},
```

### Parse HTML
## Parse HTML

The `parseHTML()` function tries to load the editor document from HTML. The function gets the HTML DOM element passed as a parameter, and is expected to return an object with attributes and their values. Here is a simplified example from the [`Bold`](/editor/extensions/marks/bold) mark:

Expand Down Expand Up @@ -344,7 +344,7 @@ You are wondering what’s that `&& null` doing? [ProseMirror expects `null` or

[Pass `priority` to a rule](https://prosemirror.net/docs/ref/version/0.18.0.html#model.ParseRule.priority) to resolve conflicts with other extensions, for example if you build a custom extension which looks for paragraphs with a class attribute, but you already use the default paragraph extension.

#### Using getAttrs
### Using getAttrs

The `getAttrs` function you’ve probably noticed in the example has two purposes:

Expand Down Expand Up @@ -384,7 +384,7 @@ addAttributes() {

Read more about `getAttrs` and all other `ParseRule` properties in the [ProseMirror reference](https://prosemirror.net/docs/ref/#model.ParseRule).

### Commands
## Commands

```js
import Paragraph from '@tiptap/extension-paragraph'
Expand All @@ -406,7 +406,7 @@ const CustomParagraph = Paragraph.extend({
To access other commands inside `addCommands` use the `commands` parameter that’s passed to it.
</Callout>

### Keyboard shortcuts
## Keyboard shortcuts

Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:

Expand All @@ -423,7 +423,7 @@ const CustomBulletList = BulletList.extend({
})
```

### Input rules
## Input rules

With input rules you can define regular expressions to listen for user inputs. They are used for markdown shortcuts, or for example to convert text like `(c)` to a `©` (and many more) with the [`Typography`](/editor/extensions/functionality/typography) extension. Use the `markInputRule` helper function for marks, and the `nodeInputRule` for nodes.

Expand Down Expand Up @@ -452,7 +452,7 @@ const CustomStrike = Strike.extend({
})
```

### Paste rules
## Paste rules

Paste rules work like input rules (see above) do. But instead of listening to what the user types, they are applied to pasted content.

Expand Down Expand Up @@ -483,7 +483,7 @@ const CustomStrike = Strike.extend({
})
```

### Events
## Events

You can even move your [event listeners](/editor/api/events) to a separate extension. Here is an example with listeners for all events:

Expand Down Expand Up @@ -515,7 +515,7 @@ const CustomExtension = Extension.create({
})
```

### What’s available in this?
## What’s available in this?

Those extensions aren’t classes, but you still have a few important things available in `this` everywhere in the extension.

Expand All @@ -536,11 +536,11 @@ this.options
this.parent
```

### ProseMirror Plugins (Advanced)
## ProseMirror Plugins (Advanced)

After all, Tiptap is built on ProseMirror and ProseMirror has a pretty powerful plugin API, too. To access that directly, use `addProseMirrorPlugins()`.

#### Existing plugins
### Existing plugins

You can wrap existing ProseMirror plugins in Tiptap extensions like shown in the example below.

Expand All @@ -557,7 +557,7 @@ const History = Extension.create({
})
```

#### Access the ProseMirror API
### Access the ProseMirror API

To hook into events, for example a click, double click or when content is pasted, you can pass [event handlers](https://prosemirror.net/docs/ref/#view.EditorProps) to `editorProps` on the [editor](/editor/api/events).

Expand Down Expand Up @@ -593,7 +593,7 @@ export const EventHandler = Extension.create({
})
```

### Node views (Advanced)
## Node views (Advanced)

For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated interface around an image, you need to learn about node views.

Expand Down

0 comments on commit e32f6b3

Please sign in to comment.