A clean, Markdown-based publishing platform made for writers. Write together and build a community.
6cca097de0
I was trying to create the image upload functionality of *writefreely*. The spec said that after the user drops an image on the textarea a markdown image placeholder should appear `[image](file.png)`, just like it happens on [discourse](https://www.discourse.org/). However there were a few challenges. *Writefreely* is a blogging platform, not a forum, so longer texts are possible, if not common. Appending the markdown at the end of the text, especially if the text overflows the viewport is bad user interface as the user will have no confirmation whether his action had a result or not (the text would have been appended off-screen). Also, in blog posts we often append larger images which take some time to upload, so a progress indicator would be useful. Another challenge was multiple uploads. Since additional markup isn't allowed inside the textarea I had to find a way to update the right markdown block when the respective file upload updates or finishes. Lastly the default action when one hovers a file over a textarea, the browser insinuates that the file will be dropped in a specific place under the mouse cursor by showing a text cursor in the text. However it doesn't give the developers any way to know where that text will be dropped. It does drop the local `file://` URI however so we can replace that with our markdown. What if the user had the same `file://` uri elsewhere in the text, however? Perhaps he was writing about including local files in markdown documents. The above function does not work reliably in Chrome on GNOME. Sometimes it inserts the `file://` URI under the cursor and sometimes it navigates to the image directly. So I'll probably have to browser-sniff there (bad, I know) So the solution had to deal with the following stuff: 1. Insert the image in the last editing position unless the browser allows you to drop at a specific place 2. If the browser allows you to drop at a specific place, do it. 3. Update the markdown with progress and when the upload is done go replace the loading thing with the remote filename the server returned This is simple. You can use `textarea.selectionStart` and `textarea.selectionEnd` to get the selection index (if text is selected) or the cursor position if these two values are equal. If text is selected replace with the dropped image. This was not so simple and despite being able to create a [demo](http://qwazix.com/shared/firefox%20dropping%20in%20place.webm) this did not work for more than one files (this is fixable) nor it could work in chrome (this doesn't seem fixable, chrome sometimes drops the `file://` URI in the textarea and others navigates to it). Thus I'm inclined to drop this functionality as the code for it is dirty anyway. [And then I found out that this doesn't work on Windows/MacOS so yeah...][Now I have dropped this] <video><source src="http://qwazix.com/shared/firefox%20dropping%20in%20place.webm" type="video/webm"></video> However I'd like to talk about my solution: in the drop event `textarea.value` still holds the text without the `file://` URI. However ten milliseconds later the text has already updated. Here's why the dirty code: a `setTimeout({...},10)` that allow us to get to the updated text. We can then iterate over all the occurrences of `file://.*?/filename.ext` and check if they exist in the previous text. If we find one that doesn't then we can replace that with our markdown. This is the code: ``` javascript function insertTextAtDropPoint(text, textarea, filename){ if (textarea.nodeName == "TEXTAREA") { // save cursor position so that we can set it // back after the operation on value var startingPosition = textarea.selectionStart; var rxp = new RegExp('file://.*?/'+filename); console.log(rxp); textarea.value = replaceNewPatternInString(rxp, oldtext, textarea.value, text); // set the cursor to its original position textarea.selectionStart = textarea.selectionEnd = startingPosition + text.length; } else throw "Element is not a textarea" } function replaceNewPatternInString(pattern, oldstring, newstring, replacement){ var index = 0; do { // find first occurence of pattern var match = newstring.substr(index, newstring.length).match(pattern); index += match.index; // take the part of the string from the beginning until // the end of the pattern // and check if you can find it in the old string // if you can go to the next occurence of the pattern // until you find one // that doesn't exist in the old string. index += match[0].length; } while (oldstring.indexOf(newstring.substr(0, index)) != -1); return newstring.substr(0,index-match[0].length) + replacement + newstring.substr(index,newstring.length); } ``` Still, believing that the file will be dropped under the cursor (which is probably the user's expectation when they see the moving **I** cursor) and then have it dropped in the last edit position is not good UX. Chrome disables that animation if you `preventDefault()` on `dragover` but Firefox does not so I'll have to resort to using `pointer-events` to disable that functionality. [Update: it looks like doing `preventDefault()` on `dragenter` resolves this nicely] We don't have additional markup inside the textarea so if the user drops multiple files we need to know which one to update when the upload progresses or finishes. *Discourse* solves this by using filenames and appending numbers to them if it finds the same filename being already used. I decided that creating a temporary hash is simpler so I prepend one before each filename, making the markdown unique. Then it's a matter of search and replace to update progress. Replacing text in the textarea entails getting the contents, changing them in javascript and putting them back in. This causes the spellcheck to fire again creating a subtle flicker in the wavy red lines. I was testing with *lorem ipsum* which has wavy red lines everywhere and that flicker quickly became annoying. Updating the progress every 5, or even 10% makes that annoyance a lot less noticeable and I suspect that in regular text with much less misspelled words this will not be an issue. Finally, after each change we also need to put the cursor back to where it was because updating `textarea.value` sets the cursor to the end. This was surprisingly easy. I just copied everything into `pad.tmpl` and it (almost) just worked. I had to point the `xhr` endpoint to my `upload.php` test file and enable **CORS** there but this was trivial. ## Backend Next step: backend image handling. Also posted here: https://mixt.qwazix.com/d/naac7l07tr Individual commits while I developed this: https://github.com/qwazix/minimalist-ajax-upload/commits/dragDrop |
||
|---|---|---|
| .github | ||
| author | ||
| cmd/writefreely | ||
| config | ||
| key | ||
| keys | ||
| less | ||
| migrations | ||
| page | ||
| pages | ||
| parse | ||
| scripts | ||
| static | ||
| templates | ||
| .dockerignore | ||
| .gitignore | ||
| .gitmodules | ||
| .travis.yml | ||
| account.go | ||
| activitypub.go | ||
| activitypub_test.go | ||
| admin.go | ||
| app.go | ||
| auth.go | ||
| AUTHORS.md | ||
| bindata-lib.go | ||
| cache.go | ||
| collections.go | ||
| config.ini.example | ||
| CONTRIBUTING.md | ||
| database-lib.go | ||
| database-no-sqlite.go | ||
| database-sqlite.go | ||
| database.go | ||
| docker-compose.yml | ||
| docker-setup.sh | ||
| Dockerfile | ||
| errors.go | ||
| export.go | ||
| feed.go | ||
| go.mod | ||
| go.sum | ||
| handle.go | ||
| hostmeta.go | ||
| instance.go | ||
| invites.go | ||
| keys.go | ||
| LICENSE | ||
| Makefile | ||
| nodeinfo.go | ||
| pad.go | ||
| pages.go | ||
| postrender.go | ||
| posts.go | ||
| read.go | ||
| README.md | ||
| request.go | ||
| routes.go | ||
| schema.sql | ||
| session.go | ||
| sitemap.go | ||
| sqlite.sql | ||
| templates.go | ||
| unregisteredusers.go | ||
| users.go | ||
| webfinger.go | ||
WriteFreely is a beautifully pared-down blogging platform that's simple on the surface, yet powerful underneath.
It's designed to be flexible and share your writing widely, so it's built around plain text and can publish to the fediverse via ActivityPub. It's easy to install and light enough to run on a Raspberry Pi.
Features
- Start a blog for yourself, or host a community of writers
- Form larger federated networks, and interact over modern protocols like ActivityPub
- Write on a fast, dead-simple, and distraction-free editor
- Format text with Markdown
- Organize posts with hashtags
- Create static pages
- Publish drafts and let others proofread them by sharing a private link
- Create multiple lightweight blogs under a single account
- Export all data in plain text files
- Read a stream of other posts in your writing community
- Build more advanced apps and extensions with the well-documented API
- Designed around user privacy and consent
Hosting
We offer two kinds of hosting services that make WriteFreely deployment painless: Write.as for individuals, and WriteFreely.host for communities. Besides saving you time, as a customer you directly help fund WriteFreely development.
Start a personal blog on Write.as, our flagship instance. Built to eliminate setup friction and preserve your privacy, Write.as helps you start a blog in seconds. It supports custom domains (with SSL) and multiple blogs / pen names per account. Read more here.
WriteFreely.host makes it easy to start a close-knit community — to share knowledge, complement your Mastodon instance, or publish updates in your organization. We take care of the hosting, upgrades, backups, and maintenance so you can focus on writing.
Quick start
WriteFreely has minimal requirements to get up and running — you only need to be able to run an executable.
Note
this is currently alpha software. We're quickly moving out of this v0.x stage, but while we're in it, there are no guarantees that this is ready for production use.
To get started, head over to our Getting Started guide. For production use, jump to the Running in Production section.
Packages
WriteFreely is available in these package repositories:
Documentation
Read our full documentation on WriteFreely.org. Help us improve by contributing to the writefreely/documentation repo.
Development
Ready to hack on your site? Get started with our developer guide.
Docker
Read about using Docker in the documentation.
Contributing
We gladly welcome contributions to WriteFreely, whether in the form of code, bug reports, feature requests, translations, or documentation improvements.
Before contributing anything, please read our Contributing Guide. It describes the correct channels for submitting contributions and any potential requirements.
License
Licensed under the AGPL.