This commit is contained in:
Hans Pagel
2022-01-18 22:00:34 +01:00
53 changed files with 638 additions and 297 deletions

View File

@@ -22,17 +22,6 @@ npm install @tiptap/extension-code-block
## Settings
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
CodeBlock.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
### languageClassPrefix
Adds a prefix to language classes that are applied to code tags.
@@ -44,6 +33,39 @@ CodeBlock.configure({
})
```
### exitOnTripleEnter
Define whether the node should be exited on triple enter.
Default: `true`
```js
CodeBlock.configure({
exitOnTripleEnter: false,
})
```
### exitOnArrowDown
Define whether the node should be exited on arrow down if there is no node after it.
Default: `true`
```js
CodeBlock.configure({
exitOnArrowDown: false,
})
```
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
```js
CodeBlock.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
```
## Commands
### setCodeBlock()

View File

@@ -33,7 +33,7 @@ Okay, enough of the boring boilerplate work. Lets finally install Tiptap! For
npm install @tiptap/vue-3 @tiptap/starter-kit
```
If you followed step 1 and 2, you can now start your project with `npm run dev`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if youre working with an existing project.
If you followed step 1 and 2, you can now start your project with `npm run serve`, and open [http://localhost:8080](http://localhost:8080) in your favorite browser. This might be different, if youre working with an existing project.
## 3. Create a new component
To actually start using Tiptap, youll need to add a new component to your app. Lets call it `Tiptap` and put the following example code in `components/Tiptap.vue`.
@@ -151,6 +151,6 @@ export default {
You should now see Tiptap in your browser. Time to give yourself a pat on the back! :)
## 5. Use v-model (optional)
Youre probably used to bind your data with `v-model` in forms, thats also possible with Tiptap. Here is how that would work with Tiptap:
Youre probably used to binding your data with `v-model` in forms, thats also possible with Tiptap. Here is how that would work with Tiptap:
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel

View File

@@ -63,36 +63,52 @@
redirect: /examples/default
items:
- title: Default text editor
icon: edit-box-line
link: /examples/default
- title: Collaborative editing
icon: team-line
link: /examples/collaborative-editing
- title: Markdown shortcuts
icon: markdown-line
link: /examples/markdown-shortcuts
- title: Menus
icon: menu-line
link: /examples/menus
- title: Tables
icon: table-line
link: /examples/tables
- title: Images
icon: image-line
link: /examples/images
- title: Formatting
icon: indent-increase
link: /examples/formatting
- title: Tasks
icon: checkbox-multiple-line
link: /examples/tasks
- title: Long texts
icon: text-spacing
link: /examples/book
- title: Drawing
icon: pencil-ruler-line
link: /examples/drawing
- title: Mentions
icon: at-line
link: /examples/suggestions
- title: Minimal setup
icon: settings-line
link: /examples/minimal
- title: Force a title
icon: file-settings-line
link: /examples/custom-document
- title: A clever editor
icon: mental-health-line
link: /examples/savvy
- title: Interactivity
icon: cursor-fill
link: /examples/interactivity
- title: Syntax highlighting
icon: code-box-fill
link: /examples/syntax-highlighting
- title: Guide

View File

@@ -34,5 +34,5 @@ There is an eslint config that ensures a consistent code style. To check for err
## Testing for errors
Your pull request will automatically execute all our existing tests. Make sure that they all pass, before sending a pull request. Run all tests locally with `$ yarn run test` or run single tests (e. g. when writing new ones) with `$ yarn run test:open`.
## Futher questions
## Further questions
Any further questions? Create a new issue or discussion in the repository. Well get back to you.