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.

Sign up for GitHub

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

Choose a better frontend editor #52

Open

andybraren opened this issue Dec 10, 2022 · 0 comments

Labels

needs refinement

Collaborator

andybraren commented Dec 10, 2022 •

edited

Loading

CKEditor and TipTap are frontrunners.

Link archive

Should use HTML as the data model? See Scribe's death for why
https://twitter.com/reinmarpl/status/1088198100655751170

Features
- Smoother fading/easing animations and movement when the editor is activated
  - CSS transitions for dimensions
  - Clicking the button should make a fullscreen flash and put a border around the entire window to show that it's in editing mode and not live. Something obvious.
- Drag and drop list reordering
  - https://www.smashingmagazine.com/2018/01/dragon-drop-accessible-list-reordering/
  - https://css-tricks.com/creating-a-parking-game-with-the-html-drag-and-drop-api/
- Drag and drop media uploads
  - Caniuse
  - https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
  - https://twitter.com/SaraSoueidan/status/1052259023960109056
  - Guide
  - Another guide
  - Dragon Drop, a keyboard accessible drag-and-drop reorder list
  - A demo with upload progress
  - https://www.youtube.com/watch?v=5l6hecmxYwk
  - https://www.w3schools.com/html/html5_draganddrop.asp
  - https://www.html5rocks.com/en/tutorials/dnd/basics/
  - https://kryogenix.org/code/browser/custom-drag-image.html
  - https://uppy.io
  - https://medium.com/@samthor/drag-and-drop-29fcf072d19
  - https://github.com/LPology/Simple-Ajax-Uploader
  - https://github.com/enyo/dropzone
  - https://shopify.github.io/draggable/
  - Flow.js, a JS library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API.
  - Filepond, looks pretty good and has a bunch of optimization features
- Copy/paste media uploads
  - Via canvas demo, but have to select an element first and use the keyboard shortcuts
- In-line editor bar
- See how Flarum built their mobile text selection behavior. A quote button appears in exactly the right place while dragging.
https://forum.getkirby.com/t/copy-and-paste-styled-text-html-from-word-wordpress-into-kirbys-text-field/2754
Resources
- Selection visualization box, both mouse and touch
Notes to self
- Visual Viewport API should allow placing controls above onscreen keyboards
- https://gist.github.com/Reinmar/91c70d2882523f47da7c498050421204
- This site positions the search field above the keyboard somehow on iOS. Investigate how.
  - https://stackoverflow.com/questions/45204162/position-element-above-mobile-keyboard
  - https://stackoverflow.com/questions/6485792/how-to-determine-the-dimensions-of-the-ios-keyboard-in-mobile-safari
Other Editors
- Scribe (now dead for very good reasons)
- https://codex.so/editor
- https://www.notion.so/getkirby/b42b9967aee44377aa12b3af01f063a5?v=0d09fcb1e8514b40a43eb830f985a31e
- https://news.ycombinator.com/item?id=22451568
- Slate
- https://news.ycombinator.com/item?id=18457325
- https://levelup.gitconnected.com/rolling-our-own-medium-style-wysiwyg-c10fda0e5699
- http://prose.io/
- https://gist.github.com/manigandham/65543a0bc2bf7006a487
- https://www.sanity.io/docs/content-studio/what-you-need-to-know-about-block-text
- ProseMirror !!
  - Powerful, but difficult to master in order to add simple things. A good base, but requires investment.
  - http://marijnhaverbeke.nl/blog/prosemirror.html
  - https://news.ycombinator.com/item?id=19000425
  - https://news.ycombinator.com/item?id=16823708
  - https://open.nytimes.com/building-a-text-editor-for-a-digital-first-newsroom-f1cb8367fc21
  - The NYT is building their own solution called Oak on top of ProseMirror, which includes version history and the ability to write comments inline very similar to Google Docs. They're also working on simultaneous collaborative editing.
  - Also seems to have a variant that supports real-time collaboration
    - https://juretriglav.si/open-source-collaborative-text-editors/
- Statamic's new "Bard" editor
- https://v3.statamic.com/blog/bard-reimagined-again
- Toast UI Editor
- CKEditor 5
  - https://news.ycombinator.com/item?id=16932941
  - Real-time collaboration
  - 5.0 release
- Squarespace's editor
- https://github.com/scrumpy/tiptap
- https://tiptap.scrumpy.io/markdown-shortcuts
- MobileDoc
  - Trying to become the standard format for this sort of thing
  - Used by Ghost in 1.0
  - https://blog.ghost.org/2-0/
  - Feature: New Mobiledoc Editor TryGhost/Ghost#7429
  - https://github.com/TryGhost/Ghost-Admin/blob/master/lib/gh-koenig--old/README.md
  - Feature: Full Koenig Editor TryGhost/Ghost#9311
  - https://github.com/TryGhost/Ghost-Admin/tree/master/lib/koenig-editor
  - The big benefit seems to be that it translates the content into a more reliable JSON format, I guess. This is discussed somewhat on Hacker News' post about Ghost 1.0.
- Trix
- Simpla
  - Kickstarter was a success with over $15k
  - Pretty nice and simple editing UI, with animations for adding links and whatnot
- Quill
  - Images are Base64 encoded rather than being uploaded immediately. There's a pull request for changing the image handler, but it hasn't been merged after many months. Not encouraging. Another issue requesting such a feature.
  - Dropzone.js integration
  - Used in Telegra.ph
  - Guide to "cloning Medium" with Quill
- Froala Editor
  - $250, JS with contentEditable, updated frequently and good mobile support, optional inline UI, easy to understand code according to reddit, but weirdly banned from reddit. Possible no image captioning.
- Pell, the simplest and smallest WYSIWYG editor with no dependencies
  - Uses contentEditable, image support is basic, seems like how I would want it to work
  - https://www.reddit.com/r/javascript/comments/6melns/pelljs_the_simplest_and_smallest_5kb_wysiwyg_text/
  - https://www.reddit.com/r/programming/comments/6melv1/pelljs_the_simplest_and_smallest_5kb_wysiwyg_text/
- Teletype
  - A Medium-like UI that also works decently on mobile
- Divi
- Sir Trevor, block-based
- Canvas was a collaborative Markdown editor similar to the experience of Google Docs, but had to shut down due to upkeep costs. Seems like it was pretty heavy, using an ember.js block editor and share.js API for realtime editing.
- Editor.js
  - https://news.ycombinator.com/item?id=19555633
- WordPress Gutenberg editor
  - Demo via Frontenberg
  - Screenshot of existing
  - Early block UI idea
  - Multiple columns concept made possible using the block UI, not sure if it'd be natural without
  - First usability test video
  - Second usability test results
  - A WP developer has written his thoughts on WordPress' Gutenberg Editor in 3 parts (1, 2, 3), primarily complaining about the lack of structured data in the editor
- Typora, a desktop app that allows users to quickly write and format using Markdown conventions
- StackEdit
Useful links
- Color selection UI idea
- RE:DOM, a thing that makes DOM elements and keeps them in sync using pure JS
- Another color picker
- Huebee color picker, now MIT licensed
- And another one
- http://ckeditor.com/blog/9th-developer-preview-of-CKEditor-5-available
- https://news.ycombinator.com/item?id=15497972
- http://ckeditor.github.io/editor-recommendations/
- HumanInput, a library for adding event handlers to keyboard shortcuts and "other human-generated events"
- https://github.com/github/hotkey

ContentTools multiple carriage returns

andybraren added the needs refinement label

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment