mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-08-06 13:38:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

init blog (wip)

Browse Source
This commit is contained in:
Hans Pagel 2021-07-09 18:24:23 +02:00
parent 1b7ef80603
commit 2e40a827fb
17 changed files with 748 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/gridsome.config.js
View File

@ -61,7 +61,35 @@ module.exports = {
},
},
},
{
use: '@gridsome/vue-remark',
options: {
typeName: 'Post',
baseDir: './src/posts',
template: './src/templates/Post/index.vue',
route: '/blog/:slug',
plugins: [
'@gridsome/remark-prismjs',
'remark-container',
'remark-toc',
tableWrapper,
],
remark: {
autolinkHeadings: {
content: {
type: 'text',
value: '#',
},
},
},
},
},
],
transformers: {
remark: {
// global remark options
},
},
runtimeCompiler: true,
configureWebpack: {
node: {

2
docs/package.json
View File

@ -17,7 +17,9 @@
"d3": "^6.6.1",
"globby": "^11.0.4",
"gridsome": "0.7.23",
"gridsome-plugin-feed": "^1.0.2",
"iframe-resizer": "^4.3.2",
"moment": "^2.29.1",
"portal-vue": "^2.1.7",
"raw-loader": "^4.0.2",
"react": "^17.0.2",

4
docs/src/components/PageFooter/index.vue
View File

@ -67,8 +67,8 @@
</h3>
<ul>
<li>
<g-link to="/experiments">
Experiments
<g-link to="/blog">
Blog
</g-link>
</li>
<li>

50
docs/src/components/PostDetail/index.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<article class="c-post-detail">
<header class="c-post-detail__header text">
<h1 class="c-post-detail__title">
{{ title }}
</h1>
<p class="c-post-detail__meta">
Published
<time :datetime="publishedAt">
{{ formattedPublishedAt }}
</time>
</p>
</header>
<VueRemarkContent class="text" />
</article>
</template>
<script>
import moment from 'moment'
export default {
props: {
title: {
default: null,
type: String,
},
author: {
default: null,
type: String,
},
content: {
default: null,
type: String,
},
publishedAt: {
default: null,
type: String,
},
},
computed: {
formattedPublishedAt() {
return moment(this.publishedAt).format('MMM Do, YYYY')
},
},
}
</script>
<style lang="scss" src="./style.scss"></style>

25
docs/src/components/PostDetail/style.scss Normal file
View File

@ -0,0 +1,25 @@
.c-post-detail {
&__header {
margin-bottom: 1.5rem;
@media (min-width: 500px) {
margin-bottom: 3rem;
}
}
&__title {
margin: 0;
}
&__meta {
margin: 0.5rem 0 0 0;
--text-color: rgba(var(--text), 0.4);
color: var(--text-color);
}
&__author {
margin: 2rem 0 0 0;
--text-color: rgba(var(--text), 0.4);
color: var(--text-color);
}
}

61
docs/src/components/PostPreview/index.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<article class="c-post-preview">
<g-link
:to="link"
class="c-post-preview__link"
>
<h2 class="is-h3 c-post-preview__title">
{{ title }}
</h2>
<p class="c-post-preview__content">
{{ teaser }}
</p>
<p class="c-post-preview__meta">
Published
<time :datetime="publishedAt">
{{ formattedPublishedAt }}
</time>
<template v-if="author">
by {{ author }}
</template>
</p>
</g-link>
</article>
</template>
<script>
import moment from 'moment'
export default {
props: {
title: {
default: null,
type: String,
},
teaser: {
default: null,
type: String,
},
link: {
default: null,
type: String,
},
publishedAt: {
default: null,
type: String,
},
author: {
default: null,
type: String,
},
},
computed: {
formattedPublishedAt() {
return moment(this.publishedAt).format('MMM Do, YYYY')
},
},
}
</script>
<style lang="scss" src="./style.scss"></style>

33
docs/src/components/PostPreview/style.scss Normal file
View File

@ -0,0 +1,33 @@
.c-post-preview {
margin: 3rem 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
&__link {
text-decoration: none;
display: block;
}
&__title {
margin: 0;
}
&__content {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0.6rem 0;
}
&__meta {
margin: 0;
color: rgba(var(--text), 0.4);
}
}

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

@ -64,7 +64,7 @@
</main>
<portal :to="menuPortal">
<g-link class="app__menu-item" to="/installation" v-if="$route.name === 'home'">
<g-link class="app__menu-item" to="/installation" v-if="$route.name === 'home' || $route.path.startsWith('/blog')">
<icon name="book-3-line" />
<span>Documentation</span>
</g-link>

68
docs/src/pages/blog.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<Layout :show-sidebar="false">
<app-section>
<div class="text">
<PostPreview
v-for="edge in $page.posts.edges"
:key="edge.node.id"
:title="edge.node.title"
:published-at="edge.node.published_at"
:teaser="edge.node.teaser"
:link="edge.node.path"
:author="edge.node.author"
/>
</div>
</app-section>
</Layout>
</template>
<page-query>
query {
posts: allPost(sortBy: "published_at", order: DESC) {
edges {
node {
id
title
teaser
published_at
author
path
}
}
}
}
</page-query>
<script>
import AppSection from '@/components/AppSection'
import PostPreview from '@/components/PostPreview'
export default {
metaInfo() {
return {
title: 'Blog',
meta: [
{
property: 'og:title',
content: 'tiptap',
},
{
name: 'description',
content: 'The headless editor framework for web artisans.',
},
{
property: 'og:description',
content: 'The headless editor framework for web artisans.',
},
],
}
},
components: {
AppSection,
PostPreview,
},
}
</script>

93
docs/src/posts/04/post.md Normal file
View File

@ -0,0 +1,93 @@
---
title: Our Plan for tiptap 2
teaser: With tiptap we built a renderless text editor for the Web. Today, it’s already used by thousands of developers, and we plan to release a completely new version of it. Here’s everything you need to know about the current state and the current roadmap.
author: "@hanspagel"
slug: our-plan-for-tiptap-2
published_at: 2020-10-12
---
<hr>
**You probably want to read the [new post about tiptap 2.0](/post/tiptap-2-0-beta/).**
<hr>
With [tiptap](https://github.com/ueberdosis/tiptap) we built a renderless text editor for the Web. Today, it’s already used by thousands of developers, and we plan to release a completely new version of it. Here’s everything you need to know about the current state and the current roadmap.
## Who’s using it?
First of all, let me share a few impressive numbers with you. The repository has 8,000 stars on GitHub. Notable companies like GitLab and Statamic (to name just a few) use tiptap in their software. The (currently awful) documentation has more than 60k page views/month. The package was downloaded 500k times in 2019, and already 2.7m times in 2020. Isn’t that crazy?
Let’s add numbers people usually don’t talk much about: We put in a few hundred hours to develop the package, we don’t know the exact number, but it’s probably something like 500 hours. And we got a few donations from kind humans, I think it’s something like $200 in total. We recently set up GitHub sponsorship and now have 15 sponsors (so cool!), giving us around $160/month. We are very, very thankful for every donation, and for every sponsor, it’s a huge motivation for us to work on tiptap.
## What changed already?
But let’s talk about how we made tiptap 2 even more awesome already. I guess that’s why you’re here.
### 1) A new home for tiptap.
First of all, we moved tiptap to our [überdosis GitHub organization](https://github.com/ueberdosis). [überdosis](https://twitter.com/_ueberdosis) is the company we are both co-founders of and which is sponsoring the development currently. Without that kind of support, we wouldn’t be able to work on tiptap.
### 2) Hello TypeScript!
So many people asked us to add TypeScript definitions. We couldn’t ignore it anymore. We took a close look at TypeScript and finally decided – after months of fiddling around with it – to write tiptap (from scratch) using TypeScript. For us, it’s still a love-hate relationship, but you will definitely have a ton of advantages.
As long as your IDE supports it (most do), you’re going to have a very nice autocomplete for the tiptap API. Some bugs will be pointed out early, without running the code. And we can render an auto-generated API reference from it, on top of the extensive documentation.
### 3) Finally, everything is documented.
The current documentation for tiptap is very lacking. We couldn’t take it anymore and made the documentation a priority instead of an afterthought.
The packages, documentation, and website with examples that’s all the same (currently private) repository now. We’ve started to write about everything you can do with tiptap 2 early on and add content parallel to developing the described features. It pays out.
Also, there are already more than 40 interactive demos added to the documentation, and we’re adding new ones every week. I’m sure you all will love the documentation for tiptap 2.
### 4) Decoupled the core from Vue.js.
The first version was developed for Vue.js. Actually, we didn’t use much of the framework in the editor. For tiptap 2, we were able to decouple that part from the core. Et voilá, tiptap 2 is framework-agnostic.
Yes, you will be able to use it with other frameworks, for example, with React. But we’ll definitely need time to build React components and document them. We won’t rush that. Currently, all examples are based on Vue.js, so it’s basically like writing the whole documentation from scratch.
### 5) Let’s chain it.
One of the cool new features are chainable commands. All commands can be joined to one call (and a single performant transaction) from now on. Let’s have a look at an example:
```js
editor
.chain()
.focus('end')
.insertText('at the end')
.insertNewLine()
.insertText('on a new line')
.toggleNode('heading', { level: 2 })
.run()
```
### 6) It’s tested.
The initial version of tiptap doesn’t have any real tests, leading to chaos again and again. We’re continually adding tests to the new code base and count 140 by now. We aim to have something like 1,000 over time. I think we can do that.
The tests already helped us to find bugs early. For future contributions, it’ll be a huge time saver too.
### 7) Improve the collaborative editing experience.
We always thought that collaborative editing is one of the coolest features of tiptap. I think we were already able to take our approach with tiptap 2 to a whole new level.
The new implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs) (who is also sponsoring us on GitHub). I don’t want to talk about too many details for now but believe me, it’s the coolest thing in that space.
It’s still a complex topic, though. That’s why we are in the process of writing a very detailed guide on that.
### 8) Rewriting all extensions.
The following 19 extensions are rewritten for version 2 already: Blockquote, Bold, BulletList, Code, CodeBlock, Collaboration, Document, HardBreak, Heading, History, HorizontalRule, Italic, Link, ListItem, OrderedList, Paragraph, Strike, Text, and Underline.
And we added two new ones: CollaborationCursor and Highlight. But more on that in a different post.
## When we share access to the code.
I hope you’re as hyped as I am about tiptap. We can’t wait to give you access, but it’ll still take some time, that’s for sure. Here are all the steps we want to take:
1. Get the new extension API stable. Currently, we’re rewriting that every second week. Actually, Philipp is working on it while I write that post.
2. Rewrite the Vue components for version 2, probably add an optional default styling, write a few missing pages for the documentation and add a few more tests.
3. Invite [our GitHub sponsors](https://github.com/sponsors/ueberdosis) to the private repository. ← That could be you.
4. Incorporate early feedback and iron out glitches, working with the different teams e. g. from Statamic to see if the migration would work.
5. Publish a public beta version for everyone.
Does that sound like a plan? If you like it, be sure to [sponsor us](https://github.com/sponsors/ueberdosis). Like I said, every sponsor is a huge motivation to put even more time into tiptap. By the way, we’ve already put nearly 300 hours (and a ton of love) in developing the new version.
## Start your projects with tiptap 1, migrate later.
A few people asked me already, so I’ll add this here too. Yes, you can still start projects with tiptap 1. We already wrote an upgrade guide, and we try to keep the migration path as smooth as possible.
If you’re writing custom extensions, you’re going to need to rewrite them. But you will probably be able to reuse the tricky parts. You just need to glue them together differently. That said, in the long run, we’re going to provide more extensions than we did with version 1.
## What do you think?
Let us know what you think about our plan! Comment in [the related issue on GitHub](https://github.com/ueberdosis/tiptap/issues/547) or hit [Philipp](https://twitter.com/_philippkuehn) or [me](https://twitter.com/hanspagel) up on Twitter. Thanks for reading!

47
docs/src/posts/17/post.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Sponsoring tiptap
teaser: Too many open source developers abandon their projects because they can’t sustain their work. Let’s find out together how this can work for tiptap.
author: "@hanspagel"
slug: sponsoring-tiptap
published_at: 2020-10-29
---
Too many open source developers abandon their projects because they can’t sustain their work. Funding the development, maintenance, and support of an open source project can be challenging. Let’s find out together how this can work for tiptap.
## The fantastic community
There is a significant advantage to make such thoughts for tiptap. This advantage is you. With so many people using, talking about, and contributing to tiptap, we felt the tailwind to start the [development of tiptap 2](/post/our-plan-for-tiptap-2/) confidently.
Now that we are knee-deep in the development, we don’t want this journey to end with the release of tiptap 2. There are too many plans and ideas for making it even better for you and everybody. We need to find a way to sustain our work on it.
And we are in this together, aren’t we? You want to work with an always up to date package, and you want to have reliable support if something is not working out, and you want the coolest newest features. That’s why we ask you to contribute to the thinking behind the project and why we make everything around it as transparent as our codebase already is.
## The rough idea
After evaluating [a few different ways to monetize an open source project](/post/monetizing-open-source/) and having strong opinions against a few of them, we focused on one idea. Internally, we refer to it as *tiptap pro*. Nothing is defined here, not even the name, or if it needs a name at all. However, there is a rough idea of it. First of all, let us be clear with that:
**The whole codebase is going to stay open and accessible for everyone. No matter where you come from or what you plan to do, you should be able to start your project with tiptap.**
On top of that, we plan to provide professional users (developers and companies who make money with tiptap) with additional, valuable benefits. Those benefits, and only those, will require your sponsorship.
### ~~#1 Closed community~~
There is still much work to be done to show what we’ve got to you. Nevertheless, we are very proud of the parts we’ve tackled already and invited very few people to chat with us in private ways, which is fantastic for our current development phase.
The precise and constructive feedback from the teams, familiar with the current version of tipap, guides our work. That’s valuable for us and everyone who is waiting for the new version.
That said, nothing we do should be private. We want everything to be open, transparent, and accessible, and a closed community won’t. While we think it could give a great benefit for a few users, we don’t believe the community would benefit from it equally and abandoned the idea.
### #2 Labeled issues and contributions
From now on, all issues and pull requests created by sponsors of our organization will automatically get a `sponsor 💖` label attached. It’s just a tiny change but helps us make extra sure to jump in those contributions as soon as possible and support the people who support us.
That said, we hope to get funding for the development to a level that makes it possible to put enough time into the project, to help everyone quickly, professionally, and equally. That’s what we aim for.
### #3 Professional extensions
The power of tiptap is its extensibility, and with tiptap 2 we will double down on that. The new version will start with fewer extensions, but we plan to add many more extensions.
A few of those extensions are complicated to build, have complex requirements, will probably need more maintenance and support, and are likely to be used in a professional context.
With *tiptap pro*, we’d like to ask people who use those extensions in a commercial product to [sponsor the further development, maintenance, and support](https://github.com/sponsors/ueberdosis) of those extensions.
But we won’t ask people using it for personal projects, university projects, open source projects, or other non-profit projects to sponsor us.
## Does that sound right to you?
We’re excited to hear your thoughts on this. We want to take this journey with all of you! Reach out to us [on Twitter](https://twitter.com/hanspagel/status/1321738829468999682), [on GitHub](https://github.com/ueberdosis/tiptap/issues/547), on [HackerNews](https://news.ycombinator.com/item?id=24928523) or [send an email to me](mailto:hans.pagel@ueber.io)!

27
docs/src/posts/22/post.md Normal file
View File

@ -0,0 +1,27 @@
---
title: Early access to tiptap 2
teaser: From now on, all sponsors are invited to the all-new tiptap 2. New sponsors will receive a personal invite automatically.
author: "@hanspagel"
slug: early-access-to-tiptap-2
published_at: 2021-01-12
---
After a few months of intense development of tiptap 2, I’m proud of what we achieved. Philipp, and the whole team, is really doing an amazing job. The all-new tiptap is so much better than version 1, but I don’t want to talk too much here.
**From now on, [all sponsors](https://github.com/sponsors/ueberdosis) are invited to the all-new tiptap 2. New sponsors will receive a personal invite automatically.**
## Things we got already
* With TypeScript and all the tests, the whole code base feels pretty stable
* The new extension API is so much easier to understand
* Global attributes make extensions even more modular (text alignment! font family!)
* The collaborative editing experience is taken to a whole new level (we’ll even provide a backend)
* Commands are chainable now 🤯
* and *so* much more!
## Pls, share your feedback with us!
Have a look at the new documentation, the repository and start fiddling around with tiptap 2. We’re excited to hear what you think! Use GitHub issues, reach out on Twitter (https://twitter.com/hanspagel) or send a good old email to [humans@tiptap.dev](mailto:humans@tiptap.dev)!
## Thank you!
All that would not have been possible without the support from the community, all those lovely sponsors funding our open-source work and the backing of überdosis. Thank you all! And thanks for hitting the [Sponsor button on GitHub](https://github.com/sponsors/ueberdosis/) with so much love!
That said, we still have a lot on our roadmap: Publishing a dedicated collaboration backend, designing and building a new interface for tiptap 2, adding more and more extensions … Oh man, 2021 is going to be amazing.

85
docs/src/posts/24/post.md Normal file
View File

@ -0,0 +1,85 @@
---
title: Hello tiptap 2 beta!
teaser: After months of building tiptap 2.0, we’ve finally tagged its first beta version. I want to share a few of the most exciting changes with you.
author: "@hanspagel"
slug: tiptap-2.0-beta
published_at: 2021-03-04
---
After months of developing tiptap 2.0, we’ve finally tagged its first beta version. For now, it’s still private, but it’s definitely ready to build cool things with it. What we achieved feels already outstanding, and I want to share a few of the most exciting changes with you.
## Who’s using tiptap?
Let’s go through a few impressive numbers first. The repository has more than 9,000 stars on GitHub. Notable companies like GitLab, Statamic, and Apostrophe CMS (to name just a few) use tiptap 1 in their applications. The (currently awful) documentation has more than 60k page views/month. The package has more than 6,000,000 downloads in total. Isn’t that crazy?
We already worked more than 800 hours on the new version. [164 sponsors (so cool!) are donating $2,884/month (wow!) on GitHub.](https://github.com/sponsors/ueberdosis) This is a huge motivation to keep working on it!
![the tiptap 2.0 logo](./tiptap-2.0-beta.png)
## What’s new in 2.0?
There’s a lot to talk about, but I’ll focus on the five most important points. Everything in this list started as an idea but is ready to use with the freshly tagged beta version.
If you’re brave and not too upset if you find a glitch here and there, I’d even call it ready for production. Even if in beta, it feels more robust than version 1 ever was.
### 1. Choose your stack
**The new version is completely framework-agnostic and works with the tech stack of your choice.**
To get started quickly, you can drop in a modern CDN build. For Vue 2 and Vue 3 projects, we provide everything you need to get going. We are translating more and more to React. There are integration guides for Svelte, Alpine.js, and Livewire, and we plan to add even more.
No matter, what you are building in, you will be able to use tiptap 2. And by the way, the new documentation already has 63 interactive demos, ready to copy & paste, and 100 pages explaining all the nifty details of building a fantastic editor experience with tiptap.
### 2. Your framework to build any editor
**We see tiptap as a headless editor framework for web artisans. For people who want to craft their applications to build outstanding user experiences.**
With the new API, you’ve got everything in your hands and control every aspect of the text editor. It’s clear, intuitive, powerful, well-documented, tested. We wrote the new version in TypeScript, after struggling with it for months, it now feels really, really good. You don’t even need to have TypeScript in your project to benefit from an autocomplete for the API.
### 3. So! Many! Extensions!
**All extensions from v1 are rewritten and improved, and we added a whole bunch of new ones, too. **
Add task lists, text highlights, add complex tables, align your text, set the font family, limit the number of characters, [automatically fix the typography](https://twitter.com/tiptap_editor/status/1357622240574119936) … I could go on and on.
We even got a whole new `Mention` extension, which is so much more flexible and robust. With the generic `Suggestion` utility, you can easily add all types of autocompletes in your editor, for example, for `#hashtags`, `:emojis:`, or `$variables`.
And it’s never been easier to add your custom extensions. That’s what tiptap is about anyway. Fully control, customize and extend the editor experience.
Oh, by the way, did I mention that you are literally in full control over the styling too? Use custom markup, add CSS or use Tailwind. There is no limitation.
### 4. Collaborative by heart
**Add real-time collaboration, build offline-first apps, keep the content in sync over multiple devices or with hundreds of other users.**
Adding those capabilities to your editor will be a matter of minutes to hours, not weeks to months, thanks to the first-class integration of [Y.js](https://github.com/yjs/yjs) and a provided plug & play collaboration backend.
If you haven’t heard of Y.js, no worries. The new documentation has a 10-minute guide with everything you need to know.
### 5. Who we’re building it for
**Though the new version isn’t public, it already has 2.5k downloads/month. More than 130 people have access to the private repository and the new documentation by now.**
They form a tiny but pretty active community, and we enjoy getting bug reports, feedback, and contributions!
If you want to help shaping the future of tiptap or start building cool things with it right now, [become a sponsor](https://github.com/sponsors/ueberdosis) to get immediate access!
We can’t wait to share a public beta with you in the next months. That’s why we are doing all this: To make a superb editor framework accessible to everyone.
## Try it out!
That was a lot of words already. Why don’t you try it out? But please, be nice. The content of the editor is public and visible to other reads of the post.
<iframe src="https://tiptap-demo.netlify.app/" width="100%" frameborder="0"></iframe>
This isn’t even a full-blown version, only the most common extensions are loaded. And don’t forget the styling is totally up to you. It doesn’t have to look like the above example. That’s the joy of headless.
## How do I get access?
**It took us a while, but now we know it. tiptap 2 won’t be complete, ever. With every task we complete, we add four new ideas to our backlog. So when do we share it with the world?**
We have this very long list of ideas and want to make sure we can keep working on tiptap for the foreseeable future. We can still count on the strong backing of our company überdosis, which already funded more than 60,000 € of the development. That’s fine, and we don’t want that money back.
But we want to make sure it’s sustainable to continue building an amazing editor for you all in the long run. That’s why we set up the [ambitious sponsorship goal of $5,000/month on GitHub](https://github.com/sponsors/ueberdosis) we’d like to reach before going public. Maybe it’s not too ambitious though. We are halfway there already!
**Are you able to help us with that? [Become a sponsor and shape the future of tiptap!](https://github.com/sponsors/ueberdosis) As a thank you, you’ll get immediate access to the private repository and the all-new documentation!**
Reaching our goal will ensure we can keep going with the development, answer all emails, issues, and support requests, keep everything up to date and develop new features and extensions.
## What do you think?
Comment in the [related issue on GitHub](https://github.com/ueberdosis/tiptap/issues/547), hit [Philipp](https://twitter.com/_philippkuehn) or [me](https://twitter.com/hanspagel) up on Twitter, or send an email to [humans@tiptap.dev](mailto:humans@tiptap.dev). We’re there to answer all your questions and hope you are excited as we are about the future of tiptap.
[By the way, tiptap has its own Twitter account now.](https://twitter.com/tiptap_editor)
> A big **THANK YOU** to every single sponsor who keeps us going! And a very special thank you to [@samwillis](https://github.com/samwillis), [@oodavid](https://github.com/oodavid), [@fourstacks](https://github.com/fourstacks), [@dmonad](https://github.com/dmonad) and [@holtwick](https://github.com/holtwick) for helping us on our way! You are all amazing!

BIN
docs/src/posts/24/tiptap-2.0-beta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

78
docs/src/posts/27/post.md Normal file
View File

@ -0,0 +1,78 @@
---
title: It’s public! The tiptap v2.0 beta
teaser: Does the Internet really need another rich text editor? Yes, it does! And we’ve built it for you. Ready to take it for a test drive?
author: "@hanspagel"
slug: tiptap-public-beta
published_at: 2021-04-21
---
Does the Internet really need another rich text editor? Yes, it does! And we’ve built it, for all the people that truely care about the user experience and it looks like that’s a lot of people.
## TL;DR
* Here is the new documentation: https://www.tiptap.dev
* GitHub repository: https://github.com/ueberdosis/tiptap
## A quick look back …
The tiptap 1 repository has more than 9,000 stars on GitHub already. Notable companies like GitLab, Statamic, and Apostrophe CMS (to name just a few) use tiptap 1 in their applications. The (awful) documentation had more than 70k page views/month. The npm package has more than 6,000,000 downloads in total. Isn’t that crazy?
But we have built this three years ago, without knowing what we are going to run into. We couldn’t help, but think about a successor, a new version, all the time. We had literally hundreds of ideas to make tiptap better for everyone. Luckily, we ignored the fact that it’s hard to make money with open source and just buckled down to build it.
After 9 months of work, 2,783 commits, more than 300 people testing the private beta, it’s here: The first public beta version of tiptap v2 (and it’s amazing).
## Wait, what’s tiptap?
tiptap is a framework-agnostic WYSIWYG text editor framework. It’s headless, and doesn’t come with CSS. Add your own markup and styling and control every aspect of your editor to build outstanding user experiences.
## And what’s so special about v2?
It’s (finally) framework-agnostic, written in TypeScript, comes with a handful of new and amazing extensions, has hundreds of tests, 150 pages of documentation, first class collaborative editing support, integrations for [Vue 2](https://www.tiptap.dev/installation/vue2), [Vue 3](https://www.tiptap.dev/installation/vue3), *and* [React](https://www.tiptap.dev/installation/react), guides for [Svelte](https://www.tiptap.dev/installation/svelte), [Alpine](https://www.tiptap.dev/installation/alpine), [Nuxt.js](https://www.tiptap.dev/installation/nuxt), a modern [CDN build](https://www.tiptap.dev/installation/cdn), [SSR utilities](https://www.tiptap.dev/api/utilities/html), [more than 80 interactive examples](https://www.tiptap.dev/examples) … Here are a few things you can do with tiptap:
* [Get started in seconds](https://www.tiptap.dev/installation/cdn)
* [Markdown shortcuts](https://www.tiptap.dev/examples/markdown-shortcuts)
* [Vue components inside the editor](https://www.tiptap.dev/guide/node-views/vue)
* [React components inside the editor](https://www.tiptap.dev/guide/node-views/react)
* [Vanilla JavaScript inside the editor](https://www.tiptap.dev/guide/node-views/js)
* [Collaborative editors & offline-first apps](https://www.tiptap.dev/examples/collaborative-editing)
* [Tasks inside the editor](https://www.tiptap.dev/examples/tasks)
* [Use any markup to render a menu](https://www.tiptap.dev/guide/menus)
* [Autocompletes, for example for `@mentions`](https://www.tiptap.dev/examples/suggestions)
* [Teach the editor new things](https://www.tiptap.dev/examples/savvy)
* [Lint the content](https://www.tiptap.dev/experiments/linter)
* [Use it with Tailwind CSS](https://www.tiptap.dev/guide/styling#with-tailwind-css)
* [Fix typographic mistakes](https://www.tiptap.dev/api/extensions/typography)
* [Add keyboard shortcuts](https://www.tiptap.dev/api/keyboard-shortcuts)
* [Control exactly what content is allowed](https://www.tiptap.dev/api/schema)
* [Highlight text in different colors](https://www.tiptap.dev/api/marks/highlight)
* [Add resizeable tables](https://www.tiptap.dev/examples/tables)
* and [so](https://www.tiptap.dev/guide/node-views/examples) [many](https://www.tiptap.dev/examples/drawing) [more](https://www.tiptap.dev/examples/formatting) [things](https://www.tiptap.dev/experiments/word-break) …
## Ready to use
tiptap v2 is still tagged as beta and yes, chances are minor things change before the stable release. That said, this version is already way more robust than v1 ever was, it’s well tested, and is already in use in many production apps.
In other words: Go get it and build cool things with it!
## Upgrading from tiptap v1
There is an [upgrade guide](https://www.tiptap.dev/overview/upgrade-guide) helping you to get from v1 to v2.
## The community
A tiny, but very active community has formed around tiptap v2 already.
[Join our Discord server to chit-chat, get help from the community, and share what you’ve built.](https://discord.gg/WtJ49jGshW)
BTW, a big **THANK YOU** to every single sponsor who keeps us going! And a very special thank you to [@marijnh](https://github.com/marijnh) for building ProseMirror, the foundation of tiptap, [@samwillis](https://github.com/samwillis), [@oodavid](https://github.com/oodavid), [@fourstacks](https://github.com/fourstacks), [@dmonad](https://github.com/dmonad), [@holtwick](https://github.com/holtwick) and [@lostdesign](https://github.com/lostdesign) for helping us on our way! You are all amazing!
## Become a sponsor!
We have this very long list of ideas and want to make sure we can keep working on tiptap for the foreseeable future. We can still count on the strong backing of our company überdosis, which already funded more than 100,000 € of the development. That’s fine. But we want to make sure it’s sustainable to continue building an amazing editor for you all in the long run. That’s why we set up the [ambitious sponsorship goal of $10,000/month on GitHub](https://github.com/sponsors/ueberdosis). Maybe it’s not too ambitious though. We are halfway there already!
**Are you able to help us with that? [Become a sponsor and help shape the future of tiptap!](https://github.com/sponsors/ueberdosis) As a thank you, you’ll get access to the collaborative editing backend we’ve built next week!**
Reaching our goal will ensure we can keep going with the development, answer all emails, issues, and support requests, keep everything up to date and develop new features and extensions.
## What’s next?
Oh, there’s way too much on our list. First, we’d like to get an officially stable tagged version out in the next few weeks (depending on your feedback). Also, we’ve developed a plug & play collaborative editing backend, we’d like to share next week with all sponsors. And then, there’s this long list of exciting things we’d like to build for tiptap: emoji support, more image capabilities, better dragging support …
But for today, that’s it. The public version of tiptap v2. Thanks for reading!
## Links
* Here is the new documentation: https://www.tiptap.dev
* GitHub repository: https://github.com/ueberdosis/tiptap
* Join the discussion on Twitter: https://twitter.com/tiptap_editor
* Discord Server: https://discord.gg/WtJ49jGshW

121
docs/src/templates/Post/index.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<Layout :show-sidebar="false">
<app-section>
<PostDetail
:title="$page.post.title"
:content="$page.post.content"
:published-at="$page.post.published_at"
:author="$page.post.author"
/>
</app-section>
</Layout>
</template>
<page-query>
query($path: String!) {
post: post(path: $path) {
id
title
teaser
slug
content
published_at
author
fileInfo {
path
}
}
}
</page-query>
<script>
import PostDetail from '@/components/PostDetail'
import AppSection from '@/components/AppSection'
export default {
metaInfo() {
return {
title: this.$page.post.title,
script: [{
type: 'application/ld+json',
json: {
'@context': 'https://schema.org',
'@type': 'NewsArticle',
mainEntityOfPage: {
'@type': 'WebPage',
'@id': 'https://www.tiptap.dev',
},
headline: this.$page.post.title,
// image: [
// `https://www.tiptap.dev/images/${this.$page.post.slug}.png`,
// ],
datePublished: this.$page.post.published_at,
dateModified: this.$page.post.published_at,
author: {
'@type': 'Person',
name: this.$page.post.author,
},
publisher: {
'@type': 'Organization',
name: 'tiptap',
// logo: {
// '@type': 'ImageObject',
// url: 'https://www.tiptap.dev/logo.jpg',
// },
},
},
}],
meta: [
// General
{
name: 'description',
content: this.$page.post.teaser,
},
// OpenGraph
{
property: 'og:title',
content: this.$page.post.title,
},
{
property: 'og:description',
content: this.$page.post.teaser,
},
// {
// property: 'og:image',
// content: `https://www.tiptap.dev/images/${this.$page.post.slug}.png`,
// },
// Twitter
{
name: 'twitter:title',
content: this.$page.post.title,
},
{
name: 'twitter:description',
content: this.$page.post.teaser,
},
{
name: 'twitter:card',
content: 'summary_large_image',
},
// {
// name: 'twitter:image',
// content: `https://www.tiptap.dev/images/${this.$page.post.slug}.png`,
// },
{
name: 'twitter:site',
content: '@_ueberdosis',
},
],
}
},
components: {
PostDetail,
AppSection,
},
}
</script>

30
yarn.lock
View File

@ -6548,6 +6548,13 @@ fd-slicer@~1.1.0:
dependencies:
pend "~1.2.0"
feed@^4.0.0:
version "4.2.2"
resolved "https://registry.yarnpkg.com/feed/-/feed-4.2.2.tgz#865783ef6ed12579e2c44bbef3c9113bc4956a7e"
integrity sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==
dependencies:
xml-js "^1.6.11"
figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
version "3.5.2"
resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@ -7340,6 +7347,16 @@ gray-matter@^4.0.2:
section-matter "^1.0.0"
strip-bom-string "^1.0.0"
gridsome-plugin-feed@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/gridsome-plugin-feed/-/gridsome-plugin-feed-1.0.2.tgz#d991cd761435bbc2643ac2f402e3e60983741c9c"
integrity sha512-jmN7X++5JjIiWldplMUTozny/GFR6BFrq4HpU+Qc+KQKB+wilM9IG0MxnVeIOBXVQ2Pu5Wz7evaL5x9/FWqrRQ==
dependencies:
feed "^4.0.0"
fs-extra "^8.1.0"
micromatch "^4.0.2"
moment "^2.24.0"
gridsome@0.7.23:
version "0.7.23"
resolved "https://registry.yarnpkg.com/gridsome/-/gridsome-0.7.23.tgz#d8b06bdf6b4ed06411be3ec3696324f29c83063e"
@ -9712,7 +9729,7 @@ micromatch@^3.1.10, micromatch@^3.1.4:
snapdragon "^0.8.1"
to-regex "^3.0.2"
micromatch@^4.0.0, micromatch@^4.0.4:
micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
@ -9916,7 +9933,7 @@ modify-values@^1.0.0:
resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
moment@^2.24.0:
moment@^2.24.0, moment@^2.29.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@ -12727,7 +12744,7 @@ sass@^1.18.0:
dependencies:
chokidar ">=3.0.0 <4.0.0"
sax@~1.2.4:
sax@^1.2.4, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
@ -15175,6 +15192,13 @@ xdg-basedir@^4.0.0:
resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-4.0.0.tgz#4bc8d9984403696225ef83a1573cbbcb4e79db13"
integrity sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==
xml-js@^1.6.11:
version "1.6.11"
resolved "https://registry.yarnpkg.com/xml-js/-/xml-js-1.6.11.tgz#927d2f6947f7f1c19a316dd8eea3614e8b18f8e9"
integrity sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==
dependencies:
sax "^1.2.4"
xss@^1.0.6:
version "1.0.9"
resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.9.tgz#3ffd565571ff60d2e40db7f3b80b4677bec770d2"