mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

Browse Source 
# Conflicts:
#	docs/src/demos/Examples/FullEditor/index.vue
This commit is contained in:
Philipp Kühn 2020-11-12 15:35:13 +01:00
commit 719db52eb7
13 changed files with 110 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/Examples/FullEditor/index.vue
View File

@ -18,8 +18,8 @@ export default {
data() {
return {
content: '<p>full editor</p>',
extensions: defaultExtensions(),
content: '<p>A Vue.js wrapper component for tiptap to use <code>v-model</code>.</p>',
}
},
}

6
docs/src/docPages/api/commands.md
View File

@ -15,15 +15,15 @@ editor.bold()
While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.
### Chain commands
Most commands can be executed combined to one call. First of all, that’s shorter than separate function call in most cases. Here is an example to make the selected text bold:
Most commands can be combined to one call. That’s shorter than separate function calls in most cases. Here is an example to make the selected text bold:
```js
editor.chain().bold().focus().run()
```
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Between those two functions, this example combines to different commands.
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between.
When a user clicks on a button outside of the content, the editor isn’t in focus anymore. That’s why you probably want to add a `.focus()` call to most of your commands, that brings back the focus to the editor and the user can continue to type.
In the example above two different commands are executed at once. When a user clicks on a button outside of the content, the editor isn’t in focus anymore. That’s why you probably want to add a `.focus()` call to most of your commands. It brings back the focus to the editor, so the user can continue to type.
All chained commands are kind of queued up. They are combined to one single transaction. That means, the content is only updated once, also the `update` event is only triggered once.

3
docs/src/docPages/examples.md
View File

@ -1,3 +0,0 @@
# Examples
TODO: This page should redirect to [/examples/basic](/examples/basic).

26
docs/src/docPages/open.md
View File

@ -1,26 +0,0 @@
# Monthly reports
## October 2020
* Writing extensions for tiptap 2
* 25 sponsors, $423/month
* 102 hours, $7,140 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$6,816**
## September 2020
* Developing the API of tiptap 2, writing the documentation
* 125 hours, $8,750 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$8,849**
## August 2020
* Setting up tiptap 2
* 56 hours, $3,920 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$4,019**
## All time
* **Total -$19.684**

6
docs/src/docPages/open/2020-08.md Normal file
View File

@ -0,0 +1,6 @@
# August 2020
* Setting up tiptap 2
* 56 hours, $3,920 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$4,019**

5
docs/src/docPages/open/2020-09.md Normal file
View File

@ -0,0 +1,5 @@
# September 2020
* Developing the API of tiptap 2, writing the documentation
* 125 hours, $8,750 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$8,849**

6
docs/src/docPages/open/2020-10.md Normal file
View File

@ -0,0 +1,6 @@
# October 2020
* Writing extensions for tiptap 2
* 25 sponsors, $423/month
* 102 hours, $7,140 development costs (at $70/hour)
* Sponsored @calebporzio with $99
* **Total -$6,816**

10
docs/src/docPages/overview/contributing.md
View File

@ -12,10 +12,20 @@ tiptap would be nothing without its lively community. Contributions have always
* New extensions, which don’t require changes to the core or other core extensions
* Well explained, non-breaking changes to the core
## Set up the development environment
It’s not too hard to tinker around with the offical repository. You’ll need [Git](https://github.com/git-guides/install-git), [Node](https://nodejs.org/en/download/) and [Yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable) installed. Here is what you need to do then:
1. Copy the code to your local machine: `$ git clone git@github.com:ueberdosis/tiptap-next.git`
2. Install dependencies: `$ yarn install`
3. Start the development environment: `$ yarn start`
4. Open http://localhost:3000 in your favorite browser.
5. Start playing around!
## Our code style
There is an eslint config that ensures a consistent code style. To check for errors, run `$ yarn run lint`. That’ll be checked when you send a pull request, too. Make sure it’s passing, before sending a pull request.
## 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
Any further questions? Create a new issue or discussion in the repository. We’ll get back to you.

2
docs/src/docPages/feedback.md → docs/src/docPages/overview/feedback.md
View File

@ -4,4 +4,4 @@ We’re looking for your feedback to improve tiptap 2 before the first public re
* Create issues on GitHub! [Link](https://github.com/ueberdosis/tiptap-next/issues)
* Send an email! [humans@tiptap.dev](mailto:humans@tiptap.dev)
* Follow us on Twitter! [@hanspagel](https://twitter.com/hanspagel) [@_philippkuehn](https://twitter.com/_philippkuehn) [@_ueberdosis](https://twitter.com/_ueberdosis)
* Follow us on Twitter! [@hanspagel](https://twitter.com/hanspagel), [@_philippkuehn](https://twitter.com/_philippkuehn), or [@_ueberdosis](https://twitter.com/_ueberdosis)

27
docs/src/docPages/overview/upgrade-guide.md
View File

@ -15,7 +15,9 @@ Yes, it’s tedious work to upgrade your favorite text editor to a new API, but
The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you need to know:
### Upgrade to Vue.js 3
…
:::warning Work in progress
We’re waiting for Gridsome to be compatible with Vue.js 3.
:::
### Explicitly register the Document, Text and Paragraph extensions
tiptap 1 tried to hide a few required extensions from you with the default setting `useBuiltInExtensions: true`. That setting has been removed and you’re required to import all extensions. Be sure to explicitly import at least the [Document](/api/nodes/document), [Paragraph](/api/nodes/paragraph) and [Text](/api/nodes/text) extensions.
@ -71,7 +73,7 @@ const CustomExtension = createNode({
})
```
Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/build-custom-extensions) in our guide.
Read more about [all the nifty details building custom extensions](/guide/build-custom-extensions) in our guide.
### Renamed API methods
[We renamed a lot of commands](/api/commands), hopefully you can migrate to the new API with search & replace. Here is a list of what changed:
@ -81,12 +83,29 @@ Don’t forget to call `create()` in the end! Read more about [all the nifty det
| ~~`…`~~ | `…` |
### Commands can be chained now
Most commands can be combined to one call now. That’s shorter than separate function calls in most cases. Here is an example to make the selected text bold:
…
```js
editor.chain().bold().focus().run()
```
The `.chain()` is required to start a new chain and the `.run()` is needed to actually execute all the commands in between. Read more about [the new tiptap commands](/api/commands) in our API documentation.
### .focus() isn’t called on every command anymore
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every other command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor. With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
We tried to hide the `.focus()` command from you with tiptap 1 and executed that on every command. That led to issues in specific use cases, where you want to run a command, but don’t want to focus the editor.
With tiptap 2.x you have to explicitly call the `focus()` and you probably want to do that in a lot of places. Here is an example:
```js
editor.chain().focus().bold().run()
```
### Collaborative editing
The reference implementation for collaborative editing uses Y.js now. That’s a whole different thing. You still can use the tiptap 1 extension, but it’s up to you to adapt it to the new extension API. If you’ve done this, don’t forget to share it with us so we can link to it from here!
Read more about [the new collaborative editing experience](/guide/collaborative-editing) in our guide.
### Become a sponsor
tiptap wouldn’t exist without the funding of its community. If you fell in love with tiptap, don’t forget to [become a sponsor](/sponsor) and make the [maintenance, development and support](/open) sustainable.
In exchange, we’ll take you into our hearts, invite you to private repositories, add a `sponsor 💖` label to your issues and pull requests and more.

100
docs/src/layouts/App/index.vue
View File

@ -1,78 +1,4 @@
<template>
<!-- <div class="app">
<header class="app__header">
<div class="app__header-inner">
<g-link class="app__logo" to="/">
{{ $static.metadata.siteName }}
</g-link>
<div>
<input class="search" type="search" placeholder="Search">
<a href="https://github.com/sponsors/ueberdosis">
Sponsor
</a>
<github-button
href="https://github.com/ueberdosis/tiptap"
data-show-count="true"
aria-label="Star ueberdosis/tiptap on GitHub"
/>
<button
class="app__menu-icon"
@click="menuIsVisible = true"
v-if="!menuIsVisible"
>
<icon name="menu" />
</button>
<button
class="app__close-icon"
@click="menuIsVisible = false"
v-if="menuIsVisible"
>
<icon name="close" />
</button>
</div>
</div>
</header>
<div class="app__content">
<div class="app__sidebar-wrapper" :class="{ 'is-mobile-visible': menuIsVisible }">
<nav class="app__sidebar">
<div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
<div class="app__link-group-title">
{{ linkGroup.title }}
</div>
<ul class="app__link-list">
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
{{ item.title }}
</g-link>
<ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k">
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true }" :to="item.link" exact>
{{ item.title }}
</g-link>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<main class="app__main">
<slot />
<p>
<br>
<a :href="editLink" target="_blank">
<span>Edit this page on GitHub</span>
</a>
</p>
<p>
Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
</p>
<page-navigation />
</main>
</div>
</div> -->
<div class="app">
<div class="app__sidebar">
<div class="app__title">
@ -156,13 +82,35 @@
</div>
<ul class="app__link-list">
<li v-for="(item, j) in linkGroup.items" :key="j">
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--premium': item.premium === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
'app__link--draft': item.draft === true,
'app__link--pro': item.pro === true,
'app__link--new': item.new === true,
'app__link--with-children': !!item.items
}"
:to="item.redirect || item.link"
>
{{ item.title }}
</g-link>
<ul v-if="item.items" class="app__link-list">
<li v-for="(item, k) in item.items" :key="k">
<g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--premium': item.premium === true }" :to="item.link" exact>
<g-link
:class="{
'app__link': true,
'app__link--exact': $router.currentRoute.path === item.link,
'app__link--active': $router.currentRoute.path.startsWith(item.link),
'app__link--draft': item.draft === true,
'app__link--pro': item.pro === true,
'app__link--new': item.new === true,
}"
:to="item.link"
exact
>
{{ item.title }}
</g-link>
</li>

18
docs/src/layouts/App/style.scss
View File

@ -195,7 +195,7 @@ $menuBreakPoint: 800px;
display: block;
}
.active + &__link-list {
.app__link--active + &__link-list {
display: block;
}
@ -212,7 +212,7 @@ $menuBreakPoint: 800px;
color: $colorWhite;
}
&.active--exact {
&--exact {
color: $colorWhite;
background-color: rgba($colorWhite, 0.05);
}
@ -231,7 +231,7 @@ $menuBreakPoint: 800px;
}
}
&--premium {
&--pro {
&::after {
content: 'PRO';
font-family: 'JetBrainsMono', monospace;
@ -243,6 +243,18 @@ $menuBreakPoint: 800px;
}
}
&--new {
&::after {
content: 'NEW';
font-family: 'JetBrainsMono', monospace;
text-transform: uppercase;
color: $colorGreen;
background-color: rgba($colorGreen, 0.1);
padding: 0 0.5em;
border-radius: 5px;
}
}
&--with-children::after {
content: '↓';
color: rgba($colorWhite, 0.2);

20
docs/src/links.yaml
View File

@ -6,11 +6,11 @@
link: /overview/installation
- title: Upgrade Guide
link: /overview/upgrade-guide
draft: true
- title: Contributing
link: /overview/contributing
- title: Examples
link: /examples
redirect: /examples/basic
items:
- title: Basic
link: /examples/basic
@ -25,12 +25,16 @@
draft: true
- title: Todo App
link: /examples/todo-app
new: true
- title: Read-only
link: /examples/read-only
- title: Minimalist
link: /examples/minimalist
- title: Export HTML or JSON
link: /examples/export-html-or-json
- title: Full Editor
link: /examples/full-editor
draft: true
- title: Feedback
link: /overview/feedback
@ -54,7 +58,7 @@
- title: Collaborative editing
link: /guide/collaborative-editing
draft: true
premium: true
pro: true
- title: Advanced node views
link: /guide/advanced-node-views
draft: true
@ -124,10 +128,10 @@
items:
- title: Collaboration
link: /api/extensions/collaboration
premium: true
pro: true
- title: CollaborationCursor
link: /api/extensions/collaboration-cursor
premium: true
pro: true
- title: Dropcursor
link: /api/extensions/dropcursor
- title: Focus
@ -157,5 +161,13 @@
items:
- title: Monthly reports
link: /open
redirect: /open/2020-10
items:
- title: October 2020
link: /open/2020-10
- title: September 2020
link: /open/2020-09
- title: August 2020
link: /open/2020-08
- title: Become a sponsor
link: /sponsor