tiptap v2

[philippkuehn]

First of all I would like to say thank you for the last year. You made tiptap to what it is today – probably the best rich text editor for Vue.js 😛

Tiptap hits 200K downloads per month now. Incredible!

However, there is always something to do and a new major version is a good opportunity to tackle some bigger challenges. I would like to say that I have officially started the development of tiptap 2! 🎉

In this thread I want to show the first new features and keep you up to date for new ideas. Please write your wishes here so that we can discuss them! ✌️

🏗 Some updates about the project structure

Move packages to its own organisation

tiptap -> @tiptap

Split tiptap-extensions into multiple packages

Splitting the extensions into separate packages has the advantage to better optimize its bundle size. Especially if there are some larger dev-dependencies like hightlight.js for syntax highlighting. It's also easier to release alternative packages like @tiptap/highlight-code-extension and @tiptap/prism-code-extension.

@tiptap/bold-extension
@tiptap/italic-extension
@tiptap/code-extension
…

Move Vue.js components out of the core

The Vue components will no longer be part of the core. Maybe I'll also try to release a React package – but I'm not quite sure yet if I want to do this to myself 😅

@tiptap/core
@tiptap/vue

Move core extensions out of the core

So they won't be core extensions anymore. Makes it easier to define custom documents like this.

@tiptap/document-extension
@tiptap/paragraph-extension
@tiptap/text-extension

Create extension collections

For a better quick start for people who just want to use the full functionality of tiptap, I can imagine putting together collections.

import extensions from '@tiptap/starter—kit'

new Editor({ extensions })

TypeScript #54

I see the advantages of TypeScript, so I will try to rewrite tiptap completely in TypeScript.

Combine landingpage and docs

The documentation is really awful at the moment. That will change. In my mind there is a guide with integrated demos.

E2E tests

At the moment there are just some function tests which is not enough. To provide better stability, I would like to write some E2E tests.

🔥 New Features

Chained Commands

Chain a list of core commands.

editor
  .focus('end')
  .insertText('at the end')
  .newLine()
  .insertText('new line')
  .toggleBlockNode('heading', { level: 2 })

Or register your own commands.

editor.registerCommand('log', (next, editor, text) => {
  console.log(text)
  next()
})

editor.log('hey!')
// 'hey!'

Commands can be asynchronous too.

editor.registerCommand('insertUserName', await (next, editor, id) => {
  let response = await fetch(`/api/${id}`);
  let data = await response.json()
  editor.insertText(data.user.name)
  next()
})

editor.insertUserName(123)

Global node attributes

Not sure about final syntax for this but basically I want to provide an option to add attributes to multiple nodes or marks at once.

So instead of repeating attributes (like text-align #180)…

class Paragraph extends Node {
  schema = {
    attrs: {
      textAlign: {
        default: 'left',
      }
    }
  }
}

class Heading extends Node {
  schema = {
    attrs: {
      textAlign: {
        default: 'left',
      }
    }
  }
}

… you can register global attributes.

editor.registerAttribute(['paragraph', 'heading'], {
  textAlign: {
    default: 'left',
  }
})

More ideas?

Comment here and let’s discuss your ideas! I will also go through the existing issues soon and tag with v2 if possible.

☠️ Things I'm not gonna do in v2:

Markdown support

After playing around with ProseMirror and CodeMirror, I absolutely don't see any point in integrating Markdown support. Just use CodeMirror (or something else) and export/import from/to tiptap.

[k2042]

Please make text alignment an out of the box feature.

[rasliche]

This is a great update. I'm glad to see you are still excited about working on the project. A lot of how TipTap works is out of my wheelhouse, though every time I leave and come back to it on my own project I dig a little deeper and learn a little more. I'm overall very impressed with the work you've put into it and the implementation (at least by limited working knowledge).

The only negative feedback I have, and I admit it's pretty reactionary is: forget React. Focus 100% on making this the best damn text editor in the frontend landscape. React has enough of everything their ecosystem needs. Unless you have a plan or need to monetize tiptap that involves reaching into React pockets, don't dilute the work too much. Even after you've pulled the core out, I think I can speak for a lot of people when I say we'd much rather have some better documentation and examples.

This is obviously just my opinion, and it's your project that you use for a business so I know you're going to do what you have to and that is 100% understandable. But I say forego React implementations unless you've got a killer reason to do so.

Chained and custom commands are 🔥🔥🔥. Looking forward to that.

Documentation is not excellent, but it's pretty good. The source code is hard for me to parse though, but I'm not super familiar with Class syntax, so maybe that'll change when I learn more. There were some good examples in the github issues that I think could be put to use in the documentation (looking at you, iframe/image examples).

Also examples of how to style an editor would be neat, but I don't want TipTap to have an opinion, more like the Vue.js Cookbook examples where those are opinionated by the author, but not the framework, necessarily.

EDIT Again: to emphasize even more that I super appreciate your creation, and open-sourcing, of TipTap so far. I've learned a bunch from it and it's an excellent project that I love using in my own work.

[hanspagel]

We are big fans of Vue, actually giving something back to the Vue community was the biggest motivation to open source tiptap.

Nevertheless, separating the core from the Vue part and making it available to the React community could be a big benefit for everyone. It means more discussion, more examples, more contributors and in the end, helping more people with tiptap.

[b4umchen]

thx for your great work!!! realy nice.

Multiupload for Images (carusell) would be a great feature.
We have a lot of trouble to get this work 😉

[Chrissi2812]

If all packages are separated a config tool (cli or gui) would be nice to give project starters a little help.
Maybe like vue-cli where you select which packages you want.

A nice listing, on the new landing page, of all core and community extensions would be nice too.

Otherwise im excited about tiptap 2.0 😍

[deepaksisodiya]

Hi, just want to add one thing which might be interesting for you. We should add live article support in some way. Currently I do not see a way to do it in tiptap.

Example. If we change some paragraph then from CMS then front end should reflect that.

One way to do it is to add id in each block of JSON so that if any block of given id is updated we can change it accordingly.

Correct me if i am wrong. Or do you know some other way to support live article updates?

[laurensiusadi]

Hi, just want to add one thing which might be interesting for you. We should add live article support in some way. Currently I do not see a way to do it in tiptap.

Example. If we change some paragraph then from CMS then front end should reflect that.

One way to do it is to add id in each block of JSON so that if any block of given id is updated we can change it accordingly.

Correct me if i am wrong. Or do you know some other way to support live article updates?

This don't have anything to do with Tiptap itself.

It depends on your backend technology whether it supports realtime or not. Usually you can use websocket to achieve that. Vue and tiptap itself already reactive on the front-end.

I use Feathers JS on server and client and I can change the data from a client and it will be reflected to another connected client.

[deepaksisodiya]

@laurensiusadi Make sense...Thanks for the reply.

[connecteev]

@philippkuehn Big thanks for the work that you've put into this. To help you ideate on the roadmap, here are a few of my thoughts (I'll add as much relevant and helpful information as I can, thanks for the consideration!)

• Forget about React support

  I could not agree more with @rasliche here. It's only going to lead to a lack of focus. React gets enough love anyway, and there are plenty of editors in React. We really need a solid community for vue plugins like this....and building something like this requires talent, focus and is not in everyone's wheelhouse. I fear that doing a react version would dilute efforts and TIpTap will never truly reach the potential it can. I do believe there's a lot that can be done with Tiptap within the Vue ecosystem (see below).

• Better Examples / Documentation:

  It's great that TipTap is renderless, but very frustrating that we can't reproduce the examples from https://tiptap.scrumpy.io/ . Right now when I try, it's a painful experience.
  I agree with your decision to make TipTap renderless, so the dev has full control. But why not have a barebones repository of the examples you've already put up on https://tiptap.scrumpy.io/ ? Just put them up, make them lean and reduce bloat / unnecessary code. Before you know it others will start contributing to it with PRs. So to reiterate, have (at least) 3 repos: the core, the extensions (or perhaps one for each type of extension, though that could get overwhelming), and an examples repo that has examples of _everything_, from most basic to most advanced.

• Examples of Image Upload:

  Add an example of image upload to that example repo (basically an official version of what people are hacking together right now: https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521)
  _Everyone_ wants to upload images, and _everyone_ wants to upload images to a server. Making this dev experience painless should be a key workflow imo. Again, this code would not go in the core (renderless) repo, but in the example repo that makes use of it. As you said here, there are 3 possibilities: "drag and drop file", "add a button for selecting from your local file system" and "paste external image URL" - all of them should all make it into this repo.

• Image position (with examples):

  Right now, it's not possible to specify the size / dimensions or position (left align, center / full-width, right align, fixed etc) of an image from the editor.
  But you can do so in CK Editor, if you see the examples here: https://ckeditor.com/ckeditor-5/demo/#balloon
  https://ckeditor.com/ckeditor-5/demo/#document
  You can also specify alt text / image captions for images. I would strongly consider adding this to the core and examples to the examples repo.

• Image manipulation (with examples):

  Also allow cropping (and other transformations) of uploaded images in tiptap-core.
  See the examples here: https://www.tiny.cloud/docs/demo/full-featured/
  In the case of TinyMCE, when you click on an image, you are shown icons to flip image horizontally / vertically, and to edit the image. If you click the 'Edit Image' button, you are further given options to crop, resize image, rotate, change brightness, blur /sharpen, contrast, color, gamma, invert.

• Support for Liquid Tags:

  I added more detail on this here https://github.com/scrumpy/tiptap/issues/553
  Imo, a lot of devs would find this to be a killer feature that would get a lot more of us using TipTap. Common use cases involve embedding other articles from our sites, embedding user profiles, embedding external content (YouTube videos, StackOverflow questions, etc). A couple of examples on how to do this (for both internal and external content) would be great.

• Have 2 Editor modes:

  Markdown and HTML, similar to the Markdown / WYSIWYG modes seen here. Re: Markdown support: I am a bit confused by this because markdown _kind-of_ already works at https://tiptap.scrumpy.io/ Can you please clarify what you meant by:

After playing around with ProseMirror and CodeMirror, I absolutely don't see any point in integrating Markdown support. Just use CodeMirror (or something else) and export/import from/to tiptap.

Btw please see https://github.com/showdownjs/showdown and https://markdown-it.github.io/

• Live preview:

  Like https://stackedit.io/app I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

• Live HTML code preview:

  Like https://github.surmon.me/vue-quill-editor/ I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

• Text highlighting in different colors:

  As seen here:
  https://ckeditor.com/ckeditor-5/demo/#document
  Once again, I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

• Text alignment (left, right, center, justify):

  As seen here:
  https://ckeditor.com/ckeditor-5/demo/#document
  Once again, I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

• Multiple font families:

  As seen here:
  https://ckeditor.com/ckeditor-5/demo/#document
  Once again, I would add support for this in core, so the dev can enable it if need be, and an example to the example repo that makes use of the core repo.

• Better support for tables:

  There is absolutely no comparison between https://tiptap.scrumpy.io/tables
  and the tables feature of CK Editor here: https://ckeditor.com/ckeditor-5/demo/#document
  CKEditor kills it in this domain - adding / deleting rows or columns, merging cells / columns up/down works seamlessly, and the result is beautifully clean.
  So once again, I would add support for this in the extensiond repo, so the dev can enable it if need be, and an example to the example repo that makes use of it.

• Extension to support charts / visualizations:

  (this would be an extension of the core), similar to what is seen in the demo here: https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-extensions . For the charting library, I would support the best ones out there:

• Chart.js: https://www.chartjs.org/ (most popular, see https://github.com/apertureless/vue-chartjs/)
• Apexcharts, demo: https://apexcharts.com/vue-chart-demos/mixed-charts/line-column-area/
• Roughviz: https://github.com/jwilber/roughViz , demo here and here

and I should be able to do something like this in the editor:

```chart
,category1,category2
Jan,21,23
Feb,31,17
Mar,22,37

type: column
title: Monthly Revenue
x.title: Amount
y.title: Month
y.min: 1
y.max: 40
y.suffix: $

Btw, this editor experience to copy and paste from excel is amazing: https://uicdn.toast.com/tui-editor/tui-editor-preview-1520325258239.gif

• #### Extension to support UML diagrams:
  as seen here: https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-extensions
  and I should be able to do something like this in the editor:

partition Conductor {
  (*) --> "Climbs on Platform"
  --> === S1 ===
  --> Bows
}

partition Audience #LightSkyBlue {
  === S1 === --> Applauds
}

partition Conductor {
  Bows --> === S2 ===
  --> WavesArmes
  Applauds --> === S2 ===
}

partition Orchestra #CCCCEE {
  WavesArmes --> Introduction
  --> "Play music"
}

Once again, @philippkuehn thanks for the great work you, @hanspagel and the rest of the contributors are doing. I hope some of these ideas (if not all) will make it into 2.0 and make TipTap even more amazing!

[Auxxxxlx]

@connecteev I disagree with you. Tiptap should be stay clean and concise. All the features you have mentioned above are very easy to implement by using some apis provided by tiptap. And we should do more work for powering developers to build their own editor other than implement more node/mark/extension/plugin. Specifically, tiptap are supposed to make developing node/mark/extension/plugin easier.

[ryanbliss]

One enhancement I'd love to see is a more flexible implementation of SuggestInserts. It isn't too hard to copy and paste the existing node and make a new one with a character matcher, but it'd be really nice if I could instead map certain matcher characters to certain nodes in a single place.

For example, a common use case is supporting @ mentions, # hashtags, and / commands.

The other thing I ended up writing a custom node for was a commands menu, which works really similarly as SuggestInserts, only it only works if entered in the first character of a line. The matcher filters down items that can then dynamically enter in different nodes, depending on what was selected. For example in our app, you can insert in inline inputs to update Salesforce fields, but also insert in GIPHY images and note templates. This is becoming a common behavior in advanced note-taking apps such as Notion and Quip, and it would be cool to see a baked in approach for this.

Great work @philippkuehn! So excited to see what you come up with, let me know how I can help!

[habitate]

I feel that the server side rendering support can be much better in the next version. This would make the dev experience much better.

[connecteev]

@ryanbliss +1 on your suggestion. Would you be willing to share the code from your custom node (for suggestinserts and the custom commands menu)? I'd be interested in seeing what you have come up with.

[jonasdumas]

Thanks for your amazing library! We use it and are big fan. Looking forward to see next release !

[Neophen]

It would be awesome to have a nicer way to position menu bubble.
As there is quite a few caveats with menu-bubble positioning.
I'm trying to work this out now with popper.js and vue-portals. If anyone has any clue on how to achieve this please ping me :)

[Chrissi2812]

Hey @connecteev, some thoughts on your ideas

• Forget about React support
  If the core gets split from the Vue stuff (most should be examples only anyway) we would also get some React-devs in that would contribute to the core. And add extensions which can then be ported to Vue if they require React.

• Better support for tables:

  There is absolutely no comparison between https://tiptap.scrumpy.io/tables
  and the tables feature of CK Editor here: https://ckeditor.com/ckeditor-5/demo/#document
  CKEditor kills it in this domain - adding / deleting rows or columns, merging cells / columns up/down works seamlessly, and the result is beautifully clean.
  So once again, I would add support for this in the extensiond repo, so the dev can enable it if need be, and an example to the example repo that makes use of it.

  I cant find anything tiptap can't do that ckeditor offers regarding tables. (Correct me if I've missed something in the linked example)
  Merging of cells is even simpler in tiptap than in ckeditor as you just have to select cells and press the button to merge them.
  The only thing missing from the example is the modal to predefine the size of the table (should however be not that hard to implement)

• Live Preview
  tiptap is a WYSIWYM-Editor so a Preview doesn't make much sense (you have kind of a preview) , or should be implemented by the dev

• Have 2 Editor modes
  You should be able to switch tiptap off like in this Example of Prosemirror
  https://prosemirror.net/examples/markdown/
  Would require some work to adapt it to tiptap however.
  Would also be possible to implemnt a CodeMirrorView to have the HTML Preview you asked for.

Most of the other Ideas (imho) should become separate extension (not everybody needs an image editor) as mentioned by @Alecyrus most of them just don't belong in the core.

[Neophen]

Also would be awesome to have a discord/gitter some sort of community chat where people could ask for help and talk about other stuff.

Whenever i find a package/plugin and it has a chat it's amazing as you can ask for more intricate cases which sometimes the docs don't cover. and you get more people participating in updating docs :)

just my two cents :)

[rasliche]

I've come around quite a bit from my first comment, but I'd still really like to see some extended documentation like yesterday. It seems like some of them are just plain wrong? Examples don't work or there isn't enough context for me to get started, personally. Fully willing to admit it could be a problem with my lack of knowledge. But I know I've got the time and excitement to start contributing some standalone extensions, but I'm not sure it's very clear where to even get started with doing that.

I fully agree that some place for the community to congregate and share is needed like @Neophen said.

[robguthrie]

Thanks for your incredible work!

I think you've made the right choice about Markdown. It's a completely different thing and users who want MD don't want WYSIWYG features. I'm working on a converter/alternative interface right now and I'm really happy with the results so far.

[guotie]

what about font color, font size and font family

[amanharwara]

Is there any ETA on when we can expect this update?

[BrianHung]

I think you've made the right choice about Markdown. It's a completely different thing and users who want MD don't want WYSIWYG features. I'm working on a converter/alternative interface right now and I'm really happy with the results so far.

I sort of agree with not supporting Markdown as text input, but the ability to define Markdown imports and exports explicitly within each node would be nice. Currently, I know TipTap supports HTML and JSON export, but Markdown as a data format is more familiar for non-developers (there's a lot of Markdown editors).

[stritti]

Would be great if pasted HTML could be sanetized eg. by using vue-sanetize. This could prevent from damaging by pasing funy things ...

[philippkuehn]

@stritti can you show me an example for breaking things on paste?

[stritti]

@stritti can you show me an example for breaking things on paste?

hi @philippkuehn ,
for example you define an editor for content without a-links. Just text. Then you are able to copy&past HTML-content having links although. Not sure what's happening if you paste something containing iframes or scripts.

[philippkuehn]

@stritti nothing happens ;) it will be stripped.

[stritti]

@philippkuehn I get links although I have no link action defined.
Is there another way to define which elements are not allowed which I have overseen?

[philippkuehn]

@stritti please then create an issue.

[zzzaries]

Thanks for creating and actively working on this amazing project!
My wish would be possibly further updates on the tiptap documentation. That would be really helpful! XD

[websiddu]

Hi @philippkuehn, is there a dev branch that we could refer and contribute to?

[philippkuehn]

@websiddu I started in a private repo for now because v2 will be a complete rewrite.

@amanharwara ETA will probably be Q2/Q3.

[websiddu]

Will it be a MIT or something else?

If its MIT, it would be great if you could make it public so we could follow along the progress. Like what Vue 3 did create a repo tiptap-next

WDYT?

[rasliche]

Also very interested in seeing the development of a rewrite. I hope to eventually be able to contribute back something, and I think seeing how you got there would certainly help. Given the opportunity to contribute with BAT/Brave Rewards, I'd also be more than happy to pay to follow along with a dev blog/insights.

Either way, thanks again for TipTap!

[honsa]

Keep it lean, less is more.

The no style way and focus on functionality is a good choice. And do not adjust code for tests, tests are nice but not necessary ;)

[cseufert]

Is it worth attempting to share some of the core with the remirror project? Seem like both are solving the same problem. https://github.com/remirror/remirror

[wkcole]

what about redesign api for vue composition-api? just like @tiptap/vue/composition & @tiptap/vue/renderless (or composition-api only)

[larvanitis]

Please make the schema parts of the code reusable on nodejs without vue dependencies, so one can use them to recreate the document schema for html rendering.

[JamesMckenna]

My 2 cents as an absolute amateur.

So it has been four days since I first npm installed. I copied and pasted most of the Tiptap examples and have them working in a single instance of the Editor. Now I am trying to add more functionality but am struggling. For example, I want to add a Mark(s) that allows text color to be changed, font size to be changed, customize the table rows/cells, text alignment; much the same functionality that I see requested by others, but I don't believe that Tiptap should offer that functionality right out of the box.

So what would I like to see from v2? In depth tutorials and finished documentation. v2 not needed for that but......you get the meaning

It is my opinion that I should write my own custom Marks, Extensions, Pluggins and Commands to implement the features I listed above. I would like to be able to customize the implementation in which ever way I see fit. I don't want to have to do _this_ or _that_ because its easiest for the majority. I like the freedom that Tiptap/ProseMirror seem to offer. The more "turn-key" Tiptap becomes, the less customization is possible.

I would like to see a tutorial of how - for example - I could code a Mark that changes the color of selected text when a user clicks a color-picker input on the menubar. Understand how to pass the argument to the command, how the @click=command pairs up with the Mark Schema, command method. For example, the click handler on the menu button

@click="commands.bold"

///OMITTED IMPORTS
export default class Bold extends Mark {
get name() {
return 'bold'
}
get schema() {
//// OMITTED

commands({ type }) {
return () => toggleMark(type)
}

///OMITTED
}

Due to my lack of experience, I don't see how the click handler and the commands method of the Bold class, connect.

I don't want someone to hold my hand and code a bunch of features for me. But I would like some sign posts that help guide me down the road of a custom implementation.

Another few days of banging my head of the keyboard should bring some enlightenment, but step by step tutorials, concise documentation and a discord/community (like @Neophen suggested) would save a lot of headaches, and probably time. It would lessen the learning curve and help noobs like me become better coders.

[andreasvirkus]

Sort of adding to what @JamesMckenna said, maybe we could have a scrumpy/tiptap-community repo with extensions, marks, etc. (emojis, giphy-support, so on) that aren't "core" to the editor, but are useful to the community and get asked about often. That tiptap-community could then also maybe house recipes similar to Vue's Cookbook. I would be happy to show some initiative here, but I think it would add a lot to the reputation of the cookbook/community-plugins if they were housed under the scrumpy org next to tiptap?

Also huge plus on a Discord server! I know both of these asks are extra burden to you (maintainers), but you can delegate some of that load and trust the community to carry itself partially as well : )

Edit: if Discord seems too big of a platform, maybe we can start with Gitter.im and move away from there when it outgrows itself?

[fmym]

markdown GitHub-flavored

[sinisimattia]

Please provide something that gets the schema + document JSON and converts it to HTML... if I try to do it with _prosemirror-model_ it won't load because thare are multiple versions installed.

Other than that it's already awesome in v1, can't wait for v2

[mvind]

I think enabling different editing modes like vim mode would be a cool feature.

[rmckayfleming]

How's progress on v2 @philippkuehn? You mentioned above that you were expecting to release around Q2/Q3 and we're entering Q3 now. I'd love to be able to contribute to the new code base even if it's not ready for a full release.

[hanspagel]

We struggle to fund the development for tiptap 2. There are a lot of ways we could go (taking an investment, selling licenses …) and none felt right. That being said, I think we’ve got a plan now:

1. We’re going to move tiptap (and related packages) to the ueberdosis organization (https://github.com/ueberdosis) - it’s the digital product agency we founded with a few others. So it’s the same people, just a new organization name.
2. We hope to get a few sponsors (applied for the sponsorship program today) with some other things we already built and plan to open to the public.
3. And we’re going to ask sponsors to jump in and help us get a little financial support to develop tiptap 2.
4. Sponsors will get access to the private tiptap 2 repository very soon and we’ll open it for everyone else later.

That’ll enable us to invest the time we need to build tiptap 2 and make it available for free. Does that sound good to you?

[robguthrie]

I'd sponsor! Great news.

[Auxxxxlx]

I would sponsor tiptap v2~~. And is there code contribution guide for tiptap-v2?

Edited:
Sponsored! Is tiptap2 available soon?

[hanspagel]

Thanks for your sponsorship, means a lot to us! 💝

We have a rough proof of concept for tiptap 2 that includes a handful of new ideas that Philipp mentioned in the initial post. Philipp started from scratch and used TypeScript to develop this new version, but we have mixed feelings about that. On the one hand TypeScript seems to be the right thing (according to what people want), on the other hand we’re a lot slower with it. Not sure if we want to keep the new core in TS.

Philipp took some time off. I think we’ll make a decision here when he’s back and probably start the active development of version 2 in a few weeks. I try to find a few more people that sponsor us through open sourcing other apps we developed over the last months.

If others reading that can’t wait for version 2: Consider to sponsor us, the number of sponsors is a huge motivation to start the active development (that’ll probably take a few hundred hours). 😬

[TG4LAaron]

Whatever decision you make sure someone will do types for ts support keep up the great work can't wait for v2 sounds and looks good

[codingcn]

The only disadvantage of tiptap compared to slate is that it does not support markdown. This feature is very important for many projects.

[mrg0lden]

I hope v2 supports bidirectional text out-of-the-box with dir="auto" as an opt-in feature, it's a really needed feature.

[pmdarrow]

I agree with the decision not to explicitly support markdown, but tiptap should be extensible enough so that the community can add this themselves. For instance, it'd be great to use https://github.com/ProseMirror/prosemirror-markdown but tiptap doesn't let you override the parser and serializer being used.

[hanspagel]

It’s decided, we’re developing tiptap 2 in TypeScript. 🤓

You’re going to have a nice autocomplete in your IDE with tiptap 2, it’ll probably help us to improve the overall quality and find bugs early and I think we will generate a nice API documentation on top of the human written documentation for you all.

[gregveres]

typescript may seem slower at first, but in the end there is a peace of mind when you start doing refactoring that using javascript just doesn't have. I have been doing typescript for the past 4 years now and wouldn't go back. What are you finding is slowing you down, maybe some of us could help get you over those hurdles.

[bmkubia]

Please consider adding rich integration with Nuxt, or at least the ability to render the content of an editor on the server. Currently for my use case I am using the non-editable Editor as a component containing viewable data and would love if I could easily SSR the content inside.

[connecteev]

+1 on rich Nuxt.js integration

[hanspagel]

Thanks! I created a separate issue to discuss the Nuxt.js integration. #821

@bmkubia @connecteev would you mind to explain what you’d expect from a “rich integration with Nuxt” over there? ✌️ Would love to hear your thoughts.

[connecteev]

@hanspagel I'll chime in at https://github.com/ueberdosis/tiptap/issues/821 but I largely agree with what @bmkubia said there.

[connecteev]

Another one I'd like to suggest for v2 which I had added back in December last year: Support for Shopify-like Liquid tags.

Sites like dev.to do a phenomenal job of liquid-tag support in their editor.

[bmkubia]

Also, @hanspagel I don't know if you are friend of the emoji or not, but an emoji extension would be absolutely fantastic. If it had markdown support for like :emoji: like the Github editor it would be awesome.

[andreasvirkus]

+1 on emoji support! But as i mentioned under a previous comment (https://github.com/ueberdosis/tiptap/issues/547#issuecomment-633471685), those could also maybe live under something like community-extensions repo? That way maybe more obscure extensions (like a Giphy integration) could also be shared & re-used, since i doubt they'd be accepted to the core repo

PS we're just starting to build out the emoji support (both a picker and :emoji: typeahead support), so would love to contribute back once we've implemented it

[gregveres]

You might want to take a look at element-tiptap and quasar-tiptap to see how they are wrapping tiptap into a rendered component. I have spent the past week using element-tiptap as a starting point to build a vuetify-tiptap. If you understand how these rendered components are using your renderless component, you might get some ideas of how you can better support the final rendered component.

You have already incorporated some things like the global node attributes. That would have simplified element-tiptap a fair bit.

Besides the adding global node attributes, the other reason for element-tiptap's derived node / mark classes is to provide a set of buttons for the UI's menu bar. It would be interesting to see if there is a way to achieve the same thing with less code (ie, can we figure out how to not create derived node/mark classes at all. We would still have them for specific added functionality).
I haven't put much thought into it because I just copied element-tiptap's code base and started converting to vuetify, but now that I understand the structure of it more (since I am almost done), I suspect there might be a way that separates the menuButton infrastructure from the node/mark class hierarchy.

just a suggestion ....

[RobinHavre]

How can we follow the development of TipTap v2? When will it be possible to test it?

[hanspagel]

I don’t know what would work best, here are a few suggestions:

1. a tiptap blog (probably less, but deeper insights)
2. more comments in that thread here (easy, but a ton of notifications)
3. a public kanban project on GitHub (transparent progress, but no insights)

Let me know what you think feels appropriate.

[RobinHavre]

Either would be great, but this thread would work just fine 👍

[hanspagel]

I put together a post with everything you need to know about the current state of the development and our plan for tiptap 2:
https://blog.ueber.io/post/our-plan-for-tiptap-2/

Let me know if you have any questions! 💬

[marsanla]

Hi @hanspagel @philippkuehn, In our company we developed tiptap with Yjs, managing versions and storing the master doc in a server. If you need help at some point let me know.

Best regards

[robguthrie]

@marsanla I'd love to see that yjs work if possible. It sounds really interesting and useful even before TTv2

We extended the reference OT implementation (not yet suitable for general use but you can see it here) to use a Redis store. We're working to take it from beta to production over the next few weeks.

[enjibby]

I've begun some work on supporting ProseMirror's suggested "Sub-view" implementation (as per this example) as a result of a comment from @marijnh. I plan on detecting slot content in the input and output and implementing sub-views in slots of the view. As there is a major rewrite on the way for Tiptap, I imagine my plans are somewhat deprecated.

Do you have any plans for a feature such as this in TipTap v2? or will the code be such that a PR on the inner workings should not be too much to upgrade?

[hanspagel]

@marsanla @robguthrie Interesting! Would you mind to share your code as a Gist, so we and others can learn from that? Feel free to add it to #819.

@enjibby Very cool! We didn’t consider to add footnotes, that means I don’t know if we will add that or if we won’t add that and I don’t know what we would need to support in the core to enable you to build that. Sorry, but that’s all I can say for now. Generally speaking, I expect us to provide more core extensions with tiptap 2.

This thread is a bit hard to follow, we’re considering to provide a Discord or Discourse community for tiptap 2. Add a 👍 if you think we should do that.

[enjibby]

@hanspagel actually, footnotes were not the primary intent, I was hoping to cover a much larger goal of implementing content-editability of slots inside Vue component content. Prosemirror suggested that editable islands were not supported, but pointed at the footnote example as a way of hooking up a prosemirror view that dispatch content events back to a parent view.

I realise the scope of this work is perhaps a bit outside the bounds of tiptap, but nested Vue component content editing provides such potential for the direction we want to move with some of our client sites.

[hanspagel]

@enjibby Ah, got it! Would you mind to create a new issue describing that feature request? Feel free to add code (if you wrote something already), that makes considering it for tiptap 2 easier.

[StefKors]

@hanspagel very excited for tiptap v2 I would especially love interoperability with react.

A +1 for an footnotes extension for me.

@enjibby If you share the yjs collab code, could you also include how you setup the sever and handled saving to the db? This is something I find quite complicated based on the existing yjs examples.

@hanspagel would allowing user created "extensions" or content types be something that tiptap could support? for example a way to allow a user to create a new inline text style in the editor? (and handling missing text styles gracefully)

[hanspagel]

@StefKors thanks! yes, we have plans to add community extensions: #819

also worth noting: I think we’ll provide a few server examples for collaborative editing too.

[enjibby]

@StefKors I've have not so far used yjs nor am I saving anything to a database. I am simply working on a way to use tiptap to edit vue-specific HTML code with support for editable vue-component slots.

I do have the benefit of using Docker on WSL2 with a custom DNS, internal root CA and Traefik Rev-proxy/Ingress so that I can run the tiptap example site locally for testing along with the CI tools that have already been configured in this project, but anything further I haven't really had the time to investigate.

You can find my vscode/docker configuration in the dev branch of my fork but I expect that may not help you.

[hanspagel]

Here is a rough idea to make the work on tiptap financially sustainable in the long run:
https://blog.ueber.io/post/sponsoring-tiptap/

Some background information not mentioned in the post: For the last 3 months, we’ve put in more than 100 hours/month to develop tiptap 2 and we hope to work even more on tiptap in the future. But we need all of you to make this possible. Let me know what you think!

TL;DR

1. We won’t provide a closed community for sponsors, that doesn’t feel right.
2. From now on, issues and pull requests opened by sponsors will get a sponsor 💖 label.
3. Probably very few tiptap 2 extensions (which are aimed to be used in professional/commercial environments) will require a GitHub sponsorship.

[petertoth]

Is there an extremely rough approximation when Tiptap v2 beta would be available for sponsors to see?
I'm sure many of the sponsors and users are eager to contribute, be that directly or indirectly :)

[hanspagel]

Thanks for asking @petertoth! We plan to share the new documentation and a first, rough build with selected sponsors next week (and all of them soon after). Also, it’s on my list to give a bigger update to everyone here, and more insights to sponsors. But here is a short update:

We’ve built way more extensions than initially planned (Image, Highlight, TextAlign, FontFamily …), but it helped to iron out glitches in the new tiptap extension API. Was definitely worth it. 🙃

There are still a few bigger things we need to tackle before doing a public release, for example the different types of menus (waiting for Gridsome Vue.js 3 compatibility).

Currently, we’re working on the new build pipeline (one interesting addition: a CDN build to play around with tiptap).

Don’t hesitate to ping me here, or on Twitter, comment, ask, or whatever! I’m happy to share more details.

[Auxxxxlx]

@hanspagel Is possible to request the first rough build ? 👀

[hanspagel]

Thanks @Auxxxxlx for sponsoring our work! We want to make sure to have enough time to gather feedback from everyone as personally as possible, so we’re inviting 2-3 people per week only. You have been around here for so long, and have been so helpful to others, I invited you today. Excited to hear your feedback! 🙃

To everyone else: Thanks for your patience! 🙌 All sponsors will get access this month, everyone else in January/Februar. A short newsflash:

• The documentation is coming together nicely, we’ve written 60 pages or so and 2 are missing.
• We’re ironing out glitches in the behavior that existed for too long in tiptap 1.
• Node views became so powerful, we dedicate them a few examples and an own guide now.
• We took the collaborative editing experience to a whole new level, including a provided backend. 🤯
• Also, we’re working on a few really amazing examples. 👀

[StefKors]

@hanspagel might just become a sponsor so I have something to play with during the winterbreak 😄 super excited to see the new features 🚀

[hanspagel]

@StefKors I might be biased, but do it! 🙃

@philippkuehn is doing an amazing job, and it’s definitely worth a few $ per month. Right now, we’re trying to fund the development through our own company, but every sponsor is a huge motivation to keep the pace. Just a few numbers:

• 1,500 commits (v1 has 1,100)
• 515 hours of development (188 hours last month alone)
• 200+ tests (v1 has not even 20)

[gavinhewitt]

@StefKors I might be biased, but do it! 🙃

@philippkuehn is doing an amazing job, and it’s definitely worth a few $ per month. Right now, we’re trying to fund the development through our own company, but every sponsor is a huge motivation to keep the pace. Just a few numbers:

• 1,500 commits (v1 has 1,100)
• 515 hours of development (188 hours last month alone)
• 200+ tests (v1 has not even 20)

@hanspagel You could in addition do paid extensions. Just a thought...

[kollolx]

How about Inline Delete/Remove Floating Button?

I think this will get more user friendly. Users don't have to press undo / redo button so many times if there inline floating delete button like editor.js.

[Auxxxxlx]

Thanks @Auxxxxlx for sponsoring our work! We want to make sure to have enough time to gather feedback from everyone as personally as possible, so we’re inviting 2-3 people per week only. You have been around here for so long, and have been so helpful to others, I invited you today. Excited to hear your feedback! 🙃

To everyone else: Thanks for your patience! 🙌 All sponsors will get access this month, everyone else in January/Februar. A short newsflash:

• The documentation is coming together nicely, we’ve written 60 pages or so and 2 are missing.
• We’re ironing out glitches in the behavior that existed for too long in tiptap 1.
• Node views became so powerful, we dedicate them a few examples and an own guide now.
• We took the collaborative editing experience to a whole new level, including a provided backend. 🤯
• Also, we’re working on a few really amazing examples. 👀

Thanks, glad to see that. I want to know how to get the access to tiptap v2 repo...

[hanspagel]

@Auxxxxlx I’ve sent you multiple invites, but they don’t seem to reach you. Please send me an email to [email protected] and we’ll set you up.

[lofcz]

Jeez, waiting for TipTap v2 be like:

[ShenQingchuan]

I am a college student and I would like to use TipTap v2 in my graduate design project.
May I access that repo? [ Already done sponsored plan payment. ]

[hanspagel]

You’re all so supportive, thank you so much! We hit the $1,000/month milestone thanks to all the lovely sponsors! This will help us to fund the ongoing maintenance of tiptap. 🤯

I’m starting to go through all open PRs and issues. Don’t expect us to add new features to v1, but we’ll make sure to add regression tests to v2 for every open bug report. Also, we will fix a few of the most annoying bugs for v1 for all the people that need to stick with v1 for a while.

Regarding the release date of v2: We’re aiming for February.

Regarding invites: All new sponsors should get an invite to the tiptap 2 repository automatically. If you didn’t receive yours, reach out to [email protected]. I’ll set you up! 💖

[AlexFromStoripress]

Hey @hanspagel, is the team at @ueberdosis still on schedule for v2 release this month? Can't wait to try out the new tiptap!