8 ms·
Show HN: A renderless and extendable rich-text editor for Vue.js
- billconan 7y agoThis is really cool! and I really want to adopt it. I have a question though, can the data be represented as markdown, instead of html and json? My current editor is monaco and the format is markdown. Monaco is too heavy, I want something closer to what Medium.com has. This renderless rich-text editor looks perfect. But my backend accepts only markdown ... And I also need to support math equations ...
- lol768 7y ago>can the data be represented as markdown Sounds like a niche enough requirement that you'd be better off writing some form of transformation logic for your needs that can produce a markdown approximation from the JSON structure that the editor generates.
- philippkuehn 7y agoThere is already a feature request about markdown support. You can follow that issue on github. At the moment I'm not sure if this will land in tiptap.
- revskill 7y agoWith introduction of React Hooks, i don't know in which direction VueJS will go forward, as we know that `lifecycle` is a bad pattern. It's the anti-value of copying ideas. The original idea always win. Thanks me for not using VueJS, as i know it copied idea from ReactJS mostly. But i know that when i use React, upgrading and refactoring is a no-brainer.
- yladiz 7y agoI’m not sure what you mean by “lifecycle”, but just to be clear, hooks are tied to the component lifecycle.
- revskill 7y agoThey're "didMount", "didX",...
- steve_adams_86 7y agoPerhaps you're just most comfortable with react and vue seeming inferior is only a product of that. Both are great at what they do and allow people to be very productive. I personally like both and don't agree that vue only copies react. I definitely prefer how react manages state and redrawing, but both approaches have merits. As always, pick what suits the problem you need to solve.
- revskill 7y agoFor a software project, library/framework choice is the most critical thing one must do. For the VueJS case, i did really want to adopt it for my projects, but there's a fact that i'm not confident. They're not just "function". And as i said above, in React case, they're moving away from "component lifecycles", so if i chose VueJS, i'll get stuck in that paradigm.
- jeremyjh 7y agoYou should try software engineering instead of chasing fads. You cannot go wrong choosing either framework.
- revskill 7y agoIt's about the HOW. How we think, how we code. Yes, you can't go wrong choosing one or another, but you can't change anything in your mind about software engineering.
- cuddlecake 7y agoHopefully, your mind can change when presented with new information.
- rymate1234 7y agoReact still has a "component lifecycle" -- it's just with hooks the way you interact with that lifecycle is different [1]. > Hooks are a more direct way to use the React features you already know — such as state, lifecycle, context, and refs. They don’t fundamentally change how React works, and your knowledge of components, props, and top-down data flow is just as relevant. And if you like functional components, VueJS has them as well [2] [1]: https://reactjs.org/docs/hooks-faq.html#how-much-of-my-react-knowledge-stays-relevant https://reactjs.org/docs/hooks-faq.html#how-much-of-my-react... [2]: https://vuejs.org/v2/guide/render-function.html#Functional-Components https://vuejs.org/v2/guide/render-function.html#Functional-C...
- ceejayoz 7y agoIMO, the biggest appeal of Vue is the same PHP's had for a long time - the ability to just drop a file on a server and see it working. Embedding Vue via <script> tag works beautifully - no Webpack, no plugins, etc. Great way to get started and experiment. Sure, once you want to do more, you'll want build tooling etc., but that initial ease is really compelling for someone who's learning.
- jeremyjh 7y agoSo you are getting downvoted because you are shitposting some off-topic stuff. I don't know why we have to talk about React in every thread about Vue. But I'll respond anyway. I like both React and Vue. I used React first, but I've used Vue for longer now. React introducing a new feature doesn't change anything about what makes Vue.js good. One thing I like about Vue.js is that basic data binding is a job that is done by the framework, instead of the programmer. Another thing that I like is that async methods are supported everywhere that methods are supported. So async mounted works great for data loading. We do not "know that lifecycle is a bad pattern". Its just a pattern, and implementations can be good or bad. As for react, I don't think hooks are the end of the story: https://twitter.com/ryanflorence/status/1095455632335921152 https://twitter.com/ryanflorence/status/1095455632335921152
- revskill 7y agoHooks of course is not the end of story. It's just an evolution of how we do UI/UX. My comment is due to the fact that, the OP editor uses a lifecycle, which relates to me, on the fact that i DID NOT choose Vue. Now i'm happy with ReactJS, Hook, Suspense, and more.
- billconan 7y agoYa, I also could not understand why lifecycle is bad, because not only vue has it, other frameworks, like iOS sdk also has this concept. And I have never had trouble using them. I googled “lifecycle bad pattern. And found https://hackernoon.com/problematic-react-lifecycle-methods-are-going-away-in-react-17-4216acc7d58b https://hackernoon.com/problematic-react-lifecycle-methods-a... But I didn’t see it explaining why it is bad.
- revskill 7y agoLifecycle is not to be reused. Hooks could be reused and used everywhere you want.
- jeremyjh 7y agoIn Vue nothing prevents you from reusing a common function in or as a lifecycle method. I’m sure you think mixins are bad too, since Dan does, but you can also just use plain functions and bind this.
- deleted 7y ago[deleted]
- going_to_800 7y agoYou're getting downvoted for a good reason, your comment has no place here, this is not a react vs vue debate.
- azangru 7y ago> as we know that `lifecycle` is a bad pattern. What ever do you mean by this? Hooks are more ergonomic in some scenarios, react's class methods in others.
- ceejayoz 7y agoThis is really slick. I like it. Would love details on browser support, though.
- philippkuehn 7y agoIt's built on top of ProseMirror. They're targeting IE11.
- mathnmusic 7y agoWhile this is really nice, it's a shame that a VueJS developer is unable to re-use a React-based text-editor which already exists and he found it perfect. This is why Web Components start making a lot of sense.
- jeremyjh 7y agoIt is possible to use a react component in a Vue app but of course what it does to your page weight may not be acceptable. https://github.com/akxcv/vuera https://github.com/akxcv/vuera
- adrianhel 7y agoThis depends on the app however. For a landing page? No way. For a module within an app I would not mind, as long as lazy imports are used.
- woah 7y agoWill web components let him use a React module with Vue.js without loading both libraries and learning React? Or is web components a third library that is so much better that you don’t need the other two libraries? Is this the situation where there are too many standards and you can only solve the problem by creating another standard?
- mfatica 7y agoWeb Components should replace them both. They aren't standards - just frameworks developed by third parties. The Web Components standard is the official standard and should be the one people reach for
- mathnmusic 7y agoWeb components can't make React/Vue/Angular components reusable anywhere else, but web components themselves are reusable in React/Vue/Angular apps.
- philippkuehn 7y ago
- jacquesc 7y agoI started paying attention to this when i saw the "Suggestions" demo. https://tiptap.scrumpy.io/suggestions https://tiptap.scrumpy.io/suggestions Every rich text editor I've tried so far, it's been a nightmare to add autocomplete for stuff like mentions and hashtags. I haven't integrated tiptap yet so maybe it's the same, but the code for the demo looks very promising.
- philippkuehn 7y agoThat's one reason why I built tiptap!
- whatl3y 7y agoAt a quick glance tiptap looks great and I don't want to derail the thread mentioning another solution, but after admittedly struggling longer than I'd hoped to implement mentions into a Vue-compatible RTE I got it working fine using modules (NPM) `vue-quill-editor` and `quill-mention`. Since this is the first public thread I've ready of at least one other person struggling with this (I'm sure there are others), I created this gist of my Vue component in case it helps anyone who want to use Quill instead of tiptap: https://gist.github.com/whatl3y/d1a9fb7bab75c2188b226e902c6faff5 https://gist.github.com/whatl3y/d1a9fb7bab75c2188b226e902c6f...
- jacquesc 7y agoLooks great, thanks for the recommendation!
- lol768 7y agoMight be nice to do some more input validation, particularly for links - the editor is happy to insert a javascript: link. I don't think this poses a security issue (at most, you'll get what - a self XSS?) because you'd obviously do server-side sanitisation in a real application, but it might be nice to check for non-https protocols and warn the user when they insert them?
- philippkuehn 7y agoGood catch! That should be easily done.
- echopom 7y agoIt fascinating that in 2019 we aren't able to get one text editor that would work seamlessly across all frameworks , but instead need to basically re-write huge "bindings" to support the reactivity and the rendering logic in each of them. Web Components have definitely failed.
- marmada 7y agoWhat does this have to do with Web Components? Even if you used Web Components you would still need to write bindings for each framework.
- philippkuehn 7y agoIt's built on top of ProseMirror (plain JavaScript).
- dwaltrip 7y agoYou only have 5 comments, all from today, and 2 of them were flagged dead. I couldn't see any reason why so I vouched for them. I am a bit confused about the situation though.
- philippkuehn 7y agoSorry I'm not very active here. Reading most of the time.
- dwaltrip 7y agoOh no worries at all. I was just curious why your comments were flagged, as they seemed perfectly fine.
- philippkuehn 7y agoit's HN. that's why :)
- burlesona 7y agoThis is really awesome. I’ve been watching Prosemirror for a long time and have considered building something like this on top of it, but haven’t had the time to try. I’ve been using Quill instead, since it’s a lot simpler and was pretty easy to just drop in place. This looks like a nice upgrade though!
- philippkuehn 7y agoWe used Quill before as our rich text editor at scrumpy.io … a few months later I started working on tiptap :)
- philippkuehn 7y agocreator of tiptap here. a bit late, unfortunately.
- Theodores 7y agoCan you write an editor that moves on from 1990's WYSIWYG to use the HTML5 content sectioning elements, so that different 'sections' and 'asides' can be moved around? In so doing - and nesting them - the headings could be given an automatic h2 - h6 level, with the headings inside sections/articles. It would also be nice to see details/summary entries and nothing in the toolbar that creates inline CSS things. Out the box such an editor should create accessible HTML that can be easily styled, with structure to it that would result in a document outline. I think such an editor could be what a lot of the web needs, to make people wonder why we ever had WYSIWYG backend editors that render nothing like the frontend, e.g. the things you get in Wordpress and other content editors. WYSIWYG made sense in the 1990's when what you wanted was a printed 'dead tree' page, but we have responsive design now and lots of different screen sizes, so it is getting the structure right that matters more, not just for accessibility but SEO.
- azangru 7y agoOn the topic of rich text editors (since people mentioned Slate) what's your opinion of react's draft.js?
- underwater 7y agoNot OP, but I was an early contributor to Draft. Draft JS lacks a few features, notably nested block support (tables) and a schema definition and sanitization. Slate is more focused on providing a nice plugin experience. On the plus side Draft’s core is battle tested and has just picked up Android support, and has the excellent Draft JS Plugins resource.
- werber 7y agoI used this for a demo (that took about 30 minutes to build) and my stakeholders loved it. Thanks!
- Etheryte 7y agoAs a frontend dev, this is really, really nice and I wish more libraries followed the renderless principles. So many manhours are wasted, daily, just because a library is a tad too specific about it's preferences. It would be nice to see it standardized in some shape or form so that it's both easier to write for newcomers as well as test.
- faitswulff 7y agoFor those who were confused about the "renderless" bit: > What does renderless mean? > With renderless components you'll have full control over markup and styling. tiptap doesn't tell you what a menu should look like or where it should be rendered in the DOM. That's all up to you. https://tiptap.scrumpy.io/docs/#what-does-renderless-mean https://tiptap.scrumpy.io/docs/#what-does-renderless-mean
- ng12 7y agoI read the renderless article linked to in the README (https://adamwathan.me/renderless-components-in-vuejs/ https://adamwathan.me/renderless-components-in-vuejs/) and it seems like an absolute nightmare in Vue. Lots of cognitive overhead for something that's completely natural in React.
- Etheryte 7y agoI didn't downvote your comment, but it seems you've misunderstood the core concepts under discussion here. Renderless isn't inherent to Vue in any way — the problems it addresses are equally present in React-based libraries. You can easily override render functions and the given bindings in both Vue and React, but given libraries that aren't built to be easily extendible, this can often lead to maintenance nightmares. Renderless seeks to counteract that, giving guidelines to architect libraries in a way that doesn't introduce considerable complexity on the library side but makes it a lot more extensible on the consumer side.
- ng12 7y agoI think you've misunderstood my post. I'm saying renderless components come "for free" in React -- there's no cognitive overhead or new concepts to learn. It's something that comes very naturally as you develop React components to the point where I've been writing renderless components for years without ever really thinking about it. From reading the article linked above it feels very clumsy in Vue based on the fact that there's a whole feature (slots) which not only feels fairly magical but requires a rather meaty article to explain it's usage. I guess what I'm saying is if you're really interested in renderless components it's probably easier to just use React.
- manigandham 7y agoNice work here, very smooth and supports a good set of functionality by default. Added to the list of HTML editor: https://gist.github.com/manigandham/65543a0bc2bf7006a487 https://gist.github.com/manigandham/65543a0bc2bf7006a487
- realty_geek 7y agoYaaaay, there is a project that integrates it with vuetify my favourite vue UI kit: https://github.com/iliyaZelenko/tiptap-vuetify https://github.com/iliyaZelenko/tiptap-vuetify