ueberdosis / tiptap

The headless rich text editor framework for web artisans.
https://tiptap.dev
MIT License
27.42k stars 2.28k forks source link

tiptap v2 #547

Closed philippkuehn closed 3 years ago

philippkuehn commented 4 years ago

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 commented 4 years ago

Please make text alignment an out of the box feature.

rasliche commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

connecteev commented 4 years ago

@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!)

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

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!
Alecyrus commented 4 years ago

@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 commented 4 years ago

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!

BonfireTrunk commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

Neophen commented 4 years ago

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 commented 4 years ago

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.

Neophen commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

what about font color, font size and font family

amanharwara commented 4 years ago

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

BrianHung commented 4 years ago

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 commented 4 years ago

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

philippkuehn commented 4 years ago

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

stritti commented 4 years ago

@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 commented 4 years ago

@stritti nothing happens ;) it will be stripped.

stritti commented 4 years ago

@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 commented 4 years ago

@stritti please then create an issue.

zzzaries commented 4 years ago

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 commented 4 years ago

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

philippkuehn commented 4 years ago

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

@amanharwara ETA will probably be Q2/Q3.

websiddu commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

waycowei commented 4 years ago

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

larvanitis commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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?

e-bxbx commented 4 years ago

markdown GitHub-flavored

sinisimattia commented 4 years ago

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 commented 4 years ago

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

rmckayfleming commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I'd sponsor! Great news.

Alecyrus commented 4 years ago

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

Edited: Sponsored! Is tiptap2 available soon?

hanspagel commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

mrg0lden commented 4 years ago

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