Closed philippkuehn closed 3 years ago
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. We have a lot of trouble to get this work 😉
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 😍
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?
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. 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.
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.
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.
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.
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.
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/
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: 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.
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.
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.
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.
(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:
```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
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!
@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. 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 :)
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.
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 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).
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?
@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.
@stritti nothing happens ;) it will be stripped.
@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?
@stritti please then create an issue.
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
Hi @philippkuehn, is there a dev branch that we could refer and contribute to?
@websiddu I started in a private repo for now because v2 will be a complete rewrite.
@amanharwara ETA will probably be Q2/Q3.
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?
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!
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 ;)
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
what about redesign api for vue composition-api? just like @tiptap/vue/composition & @tiptap/vue/renderless (or composition-api only)
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.
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.
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?
markdown GitHub-flavored
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
I think enabling different editing modes like vim mode would be a cool feature.
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.
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:
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?
I'd sponsor! Great news.
I would sponsor tiptap v2~~. And is there code contribution guide for tiptap-v2?
Edited: Sponsored! Is tiptap2 available soon?
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). 😬
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
The only disadvantage of tiptap compared to slate is that it does not support markdown. This feature is very important for many projects.
I hope v2 supports bidirectional text out-of-the-box with dir="auto"
as an opt-in feature, it's a really needed feature.
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.