feat: Allow to edit a Mastodon thread when sharing a link

Author: marienfressinaud

locales/fr_FR/LC_MESSAGES/main.mo

@@ -24,6 +24,8 @@
   },
   "dependencies": {
     "@hotwired/stimulus": "^3.1.0",
-    "@hotwired/turbo": "^8"
+    "@hotwired/turbo": "^8",
+    "stringz": "^2.1.0",
+    "twitter-text": "^3.1.0"
   }
 }

locales/fr_FR/LC_MESSAGES/main.po

@@ -163,6 +163,24 @@ public static function load(): \Minz\Router
         $router->addRoute('POST', '/links/:id/read/later', 'links/Read#later', 'read link later');
         $router->addRoute('POST', '/links/:id/read/never', 'links/Read#never', 'mark link to never read');
         $router->addRoute('POST', '/links/:id/read/delete', 'links/Read#delete', 'mark link as unread');
+        $router->addRoute(
+            'GET',
+            '/links/:id/shares/mastodon',
+            'links/MastodonThreads#new',
+            'new link mastodon thread',
+        );
+        $router->addRoute(
+            'POST',
+            '/links/:id/shares/mastodon',
+            'links/MastodonThreads#create',
+            'create link mastodon thread',
+        );
+        $router->addRoute(
+            'GET',
+            '/links/:id/shares/mastodon/created',
+            'links/MastodonThreads#created',
+            'link mastodon thread created',
+        );
 
         // Link collections
         $router->addRoute('GET', '/links/:id/collections', 'links/Collections#index', 'link collections');

package-lock.json

@@ -5,12 +5,14 @@ import AutosubmitController from './controllers/autosubmit_controller.js';
 import AutosaveController from './controllers/autosave_controller.js';
 import BackButtonController from './controllers/back_button_controller.js';
 import CaptionSwitcherController from './controllers/caption_switcher_controller.js';
+import CharactersCounterController from './controllers/characters_counter_controller.js';
 import CollectionsSelectorController from './controllers/collections_selector_controller.js';
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller.js';
 import CsrfController from './controllers/csrf_controller.js';
 import FormFileController from './controllers/form_file_controller.js';
 import GroupSelectorController from './controllers/group_selector_controller.js';
 import InputPasswordController from './controllers/input_password_controller.js';
+import ItemsController from './controllers/items_controller.js';
 import LinkSuggestionController from './controllers/link_suggestion_controller.js';
 import ModalController from './controllers/modal_controller.js';
 import ModalOpenerController from './controllers/modal_opener_controller.js';
@@ -26,12 +28,14 @@ application.register('autosubmit', AutosubmitController);
 application.register('autosave', AutosaveController);
 application.register('back-button', BackButtonController);
 application.register('caption-switcher', CaptionSwitcherController);
+application.register('characters-counter', CharactersCounterController);
 application.register('collections-selector', CollectionsSelectorController);
 application.register('copy-to-clipboard', CopyToClipboardController);
 application.register('csrf', CsrfController);
 application.register('form-file', FormFileController);
 application.register('group-selector', GroupSelectorController);
 application.register('input-password', InputPasswordController);
+application.register('items', ItemsController);
 application.register('link-suggestion', LinkSuggestionController);
 application.register('modal', ModalController);
 application.register('modal-opener', ModalOpenerController);

package.json

@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus';
+import { length } from 'stringz';
+import regexSupplant from 'twitter-text/dist/lib/regexSupplant';
+import validDomain from 'twitter-text/dist/regexp/validDomain';
+import validPortNumber from 'twitter-text/dist/regexp/validPortNumber';
+import validUrlPath from 'twitter-text/dist/regexp/validUrlPath';
+import validUrlPrecedingChars from 'twitter-text/dist/regexp/validUrlPrecedingChars';
+import validUrlQueryChars from 'twitter-text/dist/regexp/validUrlQueryChars';
+import validUrlQueryEndingChars from 'twitter-text/dist/regexp/validUrlQueryEndingChars';
+
+import icon from '../icon.js';
+import _ from '../l10n.js';
+
+// Code from Mastodon (AGPL)
+// @see https://github.com/mastodon/mastodon/blob/main/app/javascript/mastodon/features/compose/util/url_regex.js
+const urlRegex = regexSupplant(
+    '('                                                        + // $1 URL
+    '(#{validUrlPrecedingChars})'                              + // $2
+    '(https?:\\/\\/)'                                          + // $3 Protocol
+    '(#{validDomain})'                                         + // $4 Domain(s)
+    '(?::(#{validPortNumber}))?'                               + // $5 Port number (optional)
+    '(\\/#{validUrlPath}*)?'                                   + // $6 URL Path
+    '(\\?#{validUrlQueryChars}*#{validUrlQueryEndingChars})?'  + // $7 Query String
+    ')',
+    {
+        validUrlPrecedingChars,
+        validDomain,
+        validPortNumber,
+        validUrlPath,
+        validUrlQueryChars,
+        validUrlQueryEndingChars,
+    },
+    'gi',
+);
+
+const urlPlaceholder = '$2xxxxxxxxxxxxxxxxxxxxxxx';
+
+export default class extends Controller {
+    static targets = ['source', 'counter']
+
+    static values = {
+        max: Number,
+    }
+
+    connect () {
+        this.updateCounter();
+    }
+
+    updateCounter () {
+        const count = this.countCharacters(this.sourceTarget.value);
+
+        let label = _('{{count}} characters out of a maximum of {{max}}');
+        label = label.replace('{{count}}', count);
+        label = label.replace('{{max}}', this.maxValue);
+        this.counterTarget.ariaLabel = label;
+
+        if (count > this.maxValue) {
+            this.counterTarget.innerHTML = `${count} / ${this.maxValue} ${icon('error')}`;
+
+            this.counterTarget.classList.add('counter--over');
+
+            this.sourceTarget.setCustomValidity(_('The post is too long.'));
+            this.sourceTarget.ariaInvalid = 'true';
+        } else {
+            this.counterTarget.innerHTML = `${count} / ${this.maxValue}`;
+
+            this.counterTarget.classList.remove('counter--over');
+
+            this.sourceTarget.setCustomValidity('');
+            this.sourceTarget.ariaInvalid = null;
+        }
+    }
+
+    countCharacters(text) {
+        // Code from Mastodon (AGPL)
+        // @see https://github.com/mastodon/mastodon/blob/main/app/javascript/mastodon/features/compose/util/counter.js
+        let countableText = text;
+        countableText = countableText.replace(urlRegex, urlPlaceholder);
+        countableText = countableText.replace(/(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig, '$1@$3');
+
+        return length(countableText);
+    }
+}

src/Router.php

@@ -0,0 +1,55 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['container', 'prototype']
+
+    static values = {
+        index: Number,
+    }
+
+    connect () {
+        this.refreshLabels();
+    }
+
+    addItem () {
+        const element = this.prototypeTarget.content.firstElementChild.cloneNode(true);
+        element.innerHTML = element.innerHTML.replace(/__index__/g, this.indexValue);
+
+        this.containerTarget.appendChild(element);
+
+        this.indexValue++;
+
+        this.refreshLabels();
+
+        const focusableElements = Array.from(element.querySelectorAll('textarea'));
+        if (focusableElements.length >= 1) {
+            focusableElements[0].focus();
+        }
+    }
+
+    removeItem (event) {
+        const target = event.target;
+        const element = target.closest('[data-items-target="item"]');
+
+        element.remove();
+
+        this.refreshLabels();
+    }
+
+    refreshLabels () {
+        const elementsWithArialLabel = this.containerTarget.querySelectorAll('[aria-label]');
+        elementsWithArialLabel.forEach((element, index) => {
+            let labelPattern = element.dataset.labelPattern;
+
+            if (!labelPattern) {
+                // First time we refresh the labels, we save the content of
+                // labels as patterns.
+                labelPattern = element.ariaLabel;
+                element.dataset.labelPattern = labelPattern;
+            }
+
+            // Update the labels with the correct number.
+            element.ariaLabel = labelPattern.replace(/__number__/, index + 1);
+        });
+    }
+}

src/assets/javascripts/application.js

@@ -31,6 +31,7 @@
 @import './components/popup.css';
 @import './components/sections.css';
 @import './components/tags.css';
+@import './components/threads.css';
 @import './components/titles.css';
 @import './custom/collections.css';
 @import './custom/collections-selector.css';

src/assets/javascripts/controllers/characters_counter_controller.js

@@ -44,7 +44,7 @@ h1 a:focus {
     line-height: 1.5;
     text-decoration: none;
 
-    border: 0.1em solid currentcolor;
+    border: 1px solid currentcolor;
     border-radius: var(--border-radius);
 }