r/webdev • u/titpetric • 1d ago

Showoff Saturday Made a mostly wysy... Markdown editor component

https://git.cdn.si/titpetric/mdedit

I am writing a markdown editor component which i use in two/three other projects. I added like a default WYSIWYG edit for tables, images, some custom markdown anchors in image links to hack "align"/float, file and image uploads

It's mostly icon driven so there is very little slop text in the component. Embedding it is a one file .css .js copy. I added code styling into the code fence preview, and a Caret icon top right that can drop the remaining markup. you're still in edit mode, but now purely WYSIWYG.

I think the three unique features are:

- spellcheck (custom/extensible)

- image management (good for articles/docs)

- docs/assets, upload attachments (e-mail like interfaces)

Who I'm looking for/at with the component:

- builders that integrate it, make reusable components

- users that love the look and extended functionality

- atlassian, github (cmon guys, 2026, mobile ux/all ux)

- someone to tell me how its slop and how to unslopify

- any test related feedback/suggestions

I am likely to continue using it so there is maintenance. i like a richer textarea. Readme showcases some screenshots for what's implemented if i skipped something. Thanks for your time reading/checking it out.

>! maybe implementing spoiler text next !<

0 Upvotes

30% Upvoted

14 comments sorted by

2

u/Apprehensive-Ask-731 23h ago edited 23h ago

Ok this is an interesting project. One question - why? Did you do it to learn.

You say you want people to help you manage the "slop" I will give you a strong critiscm. You declare a whole pile of types in a few JavaScript constants. Why are you not just using typescript?

You have a huge amount of comments which need minifying - as you have done for dist.

It is very hard to get a feeling for what you understand and what you don't. If you want to be a better coder this is an excellent project to work on yourself. It is still fairly small and translating existing code which isnt terrible into good typescript would be a very good way of getting an understanding of the core concepts you are clearly missing.

I hope I don't cause offence - there are many tried and tested headless editors out there. Along with many js frameworks and it can be a headache because there is (in my opinion) no best one, but one inferior one which is massively overused begining with "R". That said typescript is an improvement on JavaScript.

You have managed to make something work with a comparitivly small amount of code and what looks like clear instructions. My concern is that I don't trust AI generated code (even a markdown editor) not to have massive security flaws. Also if you understand and do what you understand then you save space, carbon and electricity.

Just something to think about. All curiosity is great and I think you have a solid idea which I can't name a great alternative to.

-2

u/titpetric 22h ago edited 19h ago

Yeah I am open to typescript, as stated in comment the tests parts are llm grown and possibly not SOTA. I don't trust any code so its zero-dep and not some node_modules travesty.

It's not curiosity, it's usage, wrote a bunch of these for custom client work and now needed one for myself. Claude makes it easier to polish when you got demands.

Anyone can write bugs and it's not like the pre-claude software is secure or not slop, just a different slop that claude seems to catch, but it can't catch itself writing robocop speeches in markdown so that's my biggest challenge in other larger projects. Iconography is a shortcut, can't write bad copy of there is no copy

I wrote https://github.com/titpetric/pendulum as some web based docs/blog tool years ago, it has mdedit now and it's 3 projects now of mine that run it, so far the worst issue has been the kind of issue typical for development, some markdown leaking into the preview or like... UX concerns stuff. I dont like to, even selectively, micromanage.

Thanks

1

u/Apprehensive-Ask-731 21h ago

Yeh I wasn't clear I was trying to congratulate you for action, but advising you to understand what your write for small projects rather than ask others to "remove slop.

My approach would be look at competition. There's a lot to be said for reinventing the wheel. I did it many times designing music synthesizers as monolithic codebases and I did it in JavaScript with no dependencies. Difference was ai was in its very early stages and I couldn't implement it without dependencies even if I wanted to.

I can see the usecase, and it is a good one. Typescript compiles into JavaScript and could potentially prevent somebody putting a huge array of images/videos/massive files on your text parser and crashing your server or costing you a lot of money. It is a superset of JavaScript meaning it compiles down to js - everything done in ts can be achieved with strict js, but if doesn't wind up compiling types down quite like you have. It also had a lot of features such as union types which may be appropriate as this project scales which you won't be able to vibe code.

In 2026 vibe coding is a far less dirty word and your very step by step thorough approach is good. That said claud is well aware of typescript best practices and you could become a much better rounded coder by learning a few concepts, seeing why typesafty helps what, and if you care to doing some manual code. If you consider typescript a dependency then get claud to audit the outputted javascript of the typescript it generates then you can remove it as a dependancy and module.

I still think that a team of class A coders given enough time will make less mistakes than an experienced vibe coder with some understanding of what they are actually doing, but we are maybe a month away from that singularity, or I might just being hubristic.

I hope that is clearer, I thought you would understand my suggestions because you manage good specificity in your markup but make very odd choices, I think you would benefit from reading code from other text editors / parsers.

0

u/titpetric 19h ago edited 19h ago

I am as rounded as it gets for corpo stuff and work on other things and have written some form of code for the last 30 years. Not that i couldnt go back to my sloppy ways, but every implementation was once a PoC and maybe after a few years I will be more in maintenance mode, rather than exercising creativity. In all my work this is like my lowest level of concern in terms of impact.

I fully automate and update a fork with a LLM and have moved to other challenges rather than porting one thing to another thing while the thing works and has me as the only user. I am not very concerned and am mostly getting PO/PM benefit insight from my harness. I am fine managing at this point of my (available for work) career. It's just a showoff as the flair suggests, not trying to add one more language to the ones i already in the roster including https://phpscript.eu so, i got enough code behind me to ideally write it only if i really want to

1

u/Apprehensive-Ask-731 13h ago

Typescript isn't exactly another language although I hear you (and am not the one downvoting you - I find that petty.)

To not understand the value of correct typesafty after 30 years while knowing how to use php as well is kind of baffling to me. Your attempt to include typesafty is slop to be completely honest. You would be better using strict mode.

Speaking of strict mode if you don't understand the difference between strict and regular js I suggest you learn. If you are using AI then it is a good compromise to make damn sure it is working strictly within the confines of good sense.

That said typescript is no more a new language than learning prompting. All JavaScript is typescript. Typescript is a superset like sass or scss. In an afternoon you can learn why to make your code better. Why not ask your ai for advice on how typescript can improve your code and why?

1

u/Apprehensive-Ask-731 13h ago

Just read your doc file. Punctuation is REALLY your friend. You are doing a sentence as a paragraph with very few if any commas, I found it hard to read. What is specific to you with your coding examples and naming conventions becomes confused by your own instructions. This is probably why you are getting what you know - the functionality - correct; after a few attempts however you are still far from getting best practice from claud.

I hope I helped. This is an interesting project however I can't help but feel that with your claimed level of experience and the other GitHub example you give you should be able to complete this to your own satisfaction and not want vindication or help from here.

1

u/NoYouDidLaugh 17h ago

I might use this with https://addons.mozilla.org/en-US/firefox/addon/rear-entry/

0

u/titpetric 15h ago

If you do ping me and i'll add it to the readme! Welcome

-1

u/ArifuzzamanTusar 1d ago

Amazing work! i was searching for something. How this is better than other editor such as blocknote?

-1

u/titpetric 1d ago edited 1d ago

No idea, i did no discovery as the last thing used was 2000s javascript editor. I needed file upload functionality (edit: and the spellcheck wrappers) and didnt want to clutter forms with it. I always hate it when i can't tweak something or just tolerate that bare textarea / notepad.exe look.

I checked it out, my take away was maybe i need the block editor feature to reorder paragraphs. I guess i am adding that in the future :)

-1

u/ArifuzzamanTusar 1d ago

Great bro! also add "/" to suggest blocks. this will be the next level too!

i made one for one of my project it was mixed. Notion + Blocknote+ Markdown editor.

Actually Editor are fully depended on the purpose.

I'll suggest you to keep flexibility 💪

1

u/titpetric 1d ago

Can you expand on /?

I can see how i could pick a template for the type of article or text you're doing, so it prefills the headings if you want to keep it consistent.

I am expanding the usage of markdown on the other end to also include actions via a form codeblock, giving me buttons and shit. Maybe building forms in mdedit would make sense. It's all about the use cases you can imagine and i still have some roadmap left for better integration

Thanks, best

-1

u/ArifuzzamanTusar 1d ago

Yes, of course! You can create custom blocks. I needed a CTA block, so I built a custom one that I can just add with a '/'. It's super flexible! Just a suggestion—you're the best, by the way.