diff --git a/docs/src/docPages/guide/custom-extensions.md b/docs/src/docPages/guide/custom-extensions.md index 76c3c088..0e6d430a 100644 --- a/docs/src/docPages/guide/custom-extensions.md +++ b/docs/src/docPages/guide/custom-extensions.md @@ -3,7 +3,7 @@ ## Table of Contents ## Introduction -Let’s extend tiptap with a custom extension! +One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or on top of that. ## Option 1: Change defaults diff --git a/docs/src/docPages/guide/custom-styling.md b/docs/src/docPages/guide/custom-styling.md index b1605244..b3c53c02 100644 --- a/docs/src/docPages/guide/custom-styling.md +++ b/docs/src/docPages/guide/custom-styling.md @@ -10,7 +10,7 @@ The whole editor is rendered inside of a container with the class `.ProseMirror` ```css /* Scoped to the editor */ -.ProseMirror p { +.ProseMirror p { margin: 1em 0; } ``` @@ -19,7 +19,7 @@ If you’re rendering the stored content somewhere, there won’t be a `.ProseMi ```css /* Global styling */ -p { +p { margin: 1em 0; } ``` @@ -29,7 +29,6 @@ p { Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag. ```js -/* Add custom classes */ new Editor({ extensions: [ Document(), @@ -55,7 +54,6 @@ The rendered HTML will look like that: You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `` tag, but a `` tag: ```js -/* Customizing the markup */ import Bold from '@tiptap/extension-bold' const CustomBold = Bold