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
This enables admins to customize their landing / home page via the Admin
dashboard -- including the text at the top of the page and the section
below it. It keeps the current default text, falling back to it if the
user hasn't overwritten it.
Ref T565
I changed the sh alias to shell instead of bash.
The additions to the `highlight(nodes)` function look redundant.
It works for me without them but maybe they cover an edge case I
cannot think about?
Previously it referenced an image on write.as and had the incorrect
og:url property. This also fixes the canonical URL on single-user
instances. Closes#91
Now admins can choose a title for their About and Privacy pages; now
editable through the instance page editor.
This adds `title` and `content_type` fields to the `appcontent` table,
requiring a migration by running `writefreely --migrate`
The content_type field specifies that items we're currently storing in
this table are all "page"s; queries for fetching these have been updated
to filter for this type. In the future, this field will be used to
indicate when an item is a stylesheet (ref T563) or other supported
type.
Ref T566
This adds a "Pages" section to the admin part of the site, and enables
admins to edit the pre-defined About and Privacy pages there, instead of
on the dashboard itself.
It also restructures how these pages get sent around in the backend and
lays the groundwork for dynamically adding static pages. The backend
changes were made with more customization in mind, such as an
instance-wide custom stylesheet (T563).
Ref T566
If there are multiple language blocks on a page, we set the
onload on the last one to load all highlighting at once.
If the last language block has an error, the onload would
never fire and thus all blocks would not be highlighted.
The simplest resolution is to fire the callback regardless. We've
already loaded everything so running the callback is not causing any
performance hit which is relevant I think.
This includes:
- A new `user_invites` config value that determines who can generate
invite links
- A new page for generating invite links, with new user navigation link
- A new /invite/ path that allows anyone to sign up via unique invite
link, even if registrations are closed
- Tracking who (of registered users) has been invited by whom
It requires an updated database with `writefreely --migrate` in order to
work.
This closes T556
This enables admins on multi-user instances to see all users registered,
and view the details of each, including:
- Username
- Join date
- Total posts
- Last post date
- All blogs
- Public info
- Views
- Total posts
- Last post date
- Fediverse followers count
This is the foundation for future user moderation features.
Ref T553
This adds a "Reader" section of the site for admins who want to enable
it for their instance. That means visitors can go to /read and see who
has publicly shared their writing. They can also follow all public posts
via RSS by going to /read/feed/. Writers on an instance with this
`local_timeline` setting enabled can publish to the timeline by going
into their blog settings and choosing the "Public" visibility setting.
The `local_timeline` feature is disabled by default, as is the Public
setting on writer blogs. Enabling it adds a "Reader" navigation item and
enables the reader endpoints. This feature will also consume more
memory, as public posts are cached in memory for 10 minutes.
These changes include code ported over from Read.Write.as, and thus
include some experimental features like filtering public posts by tags
and authors. These features aren't well-tested or complete.
Closes T554
Michael Demetriou
Matt Baer
Marcel van der Boom