-
-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
tiptap v2 #547
Comments
Please make text alignment an out of the box feature. |
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. |
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. |
thx for your great work!!! realy nice. Multiupload for Images (carusell) would be a great feature. |
If all packages are separated a config tool (cli or gui) would be nice to give project starters a little help. 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 π |
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. |
@laurensiusadi Make sense...Thanks for the reply. |
@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!)
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).
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.
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)
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.
Also allow cropping (and other transformations) of uploaded images in tiptap-core.
I added more detail on this here #553
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:
Btw please see https://github.com/showdownjs/showdown and https://markdown-it.github.io/
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.
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.
As seen here:
As seen here:
As seen here:
There is absolutely no comparison between https://tiptap.scrumpy.io/tables
(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:
and I should be able to do something like this in the editor:
Btw, this editor experience to copy and paste from excel is amazing: https://uicdn.toast.com/tui-editor/tui-editor-preview-1520325258239.gif
as seen here: https://nhn.github.io/tui.editor/latest/tutorial-example03-editor-extensions
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! |
@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. |
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! |
I feel that the server side rendering support can be much better in the next version. This would make the dev experience much better. |
@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. |
Thanks for your amazing library! We use it and are big fan. Looking forward to see next release ! |
It would be awesome to have a nicer way to position menu bubble. |
Hey @connecteev, some thoughts on your ideas
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. |
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 :) |
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. |
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. |
what about font color, font size and font family |
Is there any ETA on when we can expect this update? |
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). |
Would be great if pasted HTML could be sanetized eg. by using vue-sanetize. This could prevent from damaging by pasing funy things ... |
@stritti can you show me an example for breaking things on paste? |
hi @philippkuehn , |
@stritti nothing happens ;) it will be stripped. |
@hanspagel might just become a sponsor so I have something to play with during the winterbreak π super excited to see the new features π |
@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:
|
@hanspagel You could in addition do paid extensions. Just a thought... |
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. |
Thanks, glad to see that. I want to know how to get the access to tiptap v2 repo... |
@Auxxxxlx Iβve sent you multiple invites, but they donβt seem to reach you. Please send me an email to humans@tiptap.dev and weβll set you up. |
I am a college student and I would like to use TipTap v2 in my graduate design project. |
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 humans@tiptap.dev. Iβll set you up! π |
Hey @hanspagel, is the team at @ueberdosis still on schedule for v2 release this month? Can't wait to try out the new tiptap! |
@hanspagel Would it also be possible for contributors / those who have submitted PRs to tiptap v1 to get early access to tiptap v2? |
@AlexFromStoripress Itβs hard to give time estimates, but I expect a public beta in March. π A little bit more insight: Yes, Philipp and I are basically working full time on tiptap v2. To date we tracked around 800 hours. To put this into perspective: We hoped to publish v2 after 300 hours and that already felt like a huge commitment. π¬ The whole project got way bigger, but a lot better too. Itβs definitely worth taking the time. Also, there is already a tiny but pretty active community with around ~120 people (sponsors, regular contributors β¦) having access and thatβs a great way to have enough feedback to build something really good, but also not too much so we can get back to everyone personally and in time. It feels like a great way to build something β what I think is already β outstanding. But yes, we canβt wait to share it with all of you! There is a short list with things that eventually lead to breaking changes. Weβd really like to get at least those right before transitioning to a public beta where all of you can test the new version and give feedback. In the end, thatβs what weβre building it for. For all of you, so you can build cool things with tiptap. βοΈ |
Iβve put together a blog post describing the current state of tiptap 2, including an interactive demo: TL;DR
Weβve set an ambitious sponsorship goal of $5,000/month which would help us to keep the pace to work on the hundreds of amazing ideas we still have in our backlog. If your company uses tiptap, please convince them helping us with the sponsorship goal. Reach out to humans@tiptap.dev if you need help with that. π |
Would it be too difficult to implement a switch between WYSIWYG editor and source code editor? Some mark down editors have such functionality. |
Good news: Thanks to 187 sponsors we already reached our goal by 75 %. π Looks like we need to hurry and prepare everything for a public release of tiptap v2. π |
helloοΌζεΈζδ½ δ»¬ηδΎεεθΏδΈͺδΈζ ·δΈ°ε― |
Hi, guys, what's things going on? how about emojj suports? how about social supports like @ # |
We plan to release the tiptap 2.0 public beta next week, probably on Wednesday. π Itβs written in TypeScript, will come with a handful of new and amazing extensions, hundreds of tests, an extensive documentation, chainable commands, first class collaborative editing support, integrations for Vue.js and React, guides for Svelte, Alpine, Nuxt.js, a modern CDN build, SSR utilities, more than 60 interactive demos β¦ I think youβll like it. ποΈ Make sure to follow our Twitter account. @guotie The @Mention support is amazing in v2, official #Hashtag and :emoji: extensions will follow with v2.1. |
great news! tiptap v2 is the most great editor in the world! |
Is it possible to use placeholder extension in React? v2 looks awesome by the way! |
Itβs here, the public beta of tiptap v2: https://www.tiptap.dev π Here is a little bit more background: https://blog.ueber.io/post/tiptap-public-beta/ And if you like what weβve built, sponsor us so we can keep going: https://github.com/sponsors/ueberdosis Thanks all for following this long, I think itβs time to close this issue. π |
@hanspagel So I have been trying to look for an appropriate documentation on how to dynamically search for users when trying to do the @ mention features. Because it doesn't make sense trying to like fetch all my entire users before doing such. If you have a documentation pointing to this, I will appreciate |
@chinela a new Discussions thread would be more appropriate for this request |
Paste image is indeed really a very great idea, ths |
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
Split
tiptap-extensions
into multiple packagesSplitting 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
.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 π
Move core extensions out of the core
So they won't be core extensions anymore. Makes it easier to define custom documents like this.
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.
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.
Or register your own commands.
Commands can be asynchronous too.
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)β¦
β¦ you can register global attributes.
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 supportAfter 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.
The text was updated successfully, but these errors were encountered: