summaryrefslogtreecommitdiff
path: root/ui/lib/components/MessageInput.svelte
Commit message (Collapse)AuthorAge
* tools/reformatOwen Jacobson2025-06-11
|
* Use browser-native methods to hide elements, not CSS alone.Owen Jacobson2025-05-22
| | | | The hidden `textarea` used to attach the form value to the DOM was being included in the ARIA accessibility tree, at least in testing (I didn't check in a browser). While we could suppress this iwth `aria-role="hidden"`, the WHATWG recommendation is to Not Do That, and to find another way to hide the element, instead. Marking the element as hidden accomplishes that goal, _and_ gets rid of a style rule.
* Restore the placeholder when the editable input is emptied out after ↵Owen Jacobson2025-05-13
| | | | | | modification. This also avoids using `placeholder` on elements where it's nonstandard, like `<div>`s.
* Support non-mouse accessibility.Owen Jacobson2025-05-13
| | | | | * Give the input `div` a marker to tell screen readers &c that it is a textbox. * Ensure that it participates in tab order. (Zero is a sentinel value, see <https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex>.)
* Make the resulting form more amenable to normal DOM operations.Owen Jacobson2025-05-13
| | | | | | | | | | | | | | This is purely an aesthetic choice: * The DOM `reset()` function can be used to clear the form, but can't be used to clear editable DIVs. Binding the editable div to a (hidden) form field allows `reset()` to clear both. * We can find the target `form` element out of the event, but the API needed to do so differs between events dispatched to form controls and events dispatched to random DOM nodes. Using `closest('form')` works for both kinds of event target. In practice, there is little need to make sure the message input form uses "normal" DOM APIs for functional reasons. Everything inside `MessageInput` is controllable through the component's script. This change isn't based on a functional need, but rather in the hopes that integrating with the DOM APIs makes it easier for _code we don't control_ - screen readers, password managers, saved-form support in browsers, &c - to integrate with Pilcrow. It is purely speculative. (This also used to be necessary because Firefox didn't support `contenteditable="plaintext-only"`, but [support was added in March][ff-pto] [ff-pto]: https://www.mozilla.org/en-US/firefox/136.0/releasenotes/#:~:text=The%20value%20plaintext%2Donly%20can%20now%20be%20specified%20for%20the%20contenteditable%20attribute%2C%20making%20the%20raw%20text%20of%20an%20element%20editable%20but%20without%20supporting%20rich%20text%20formatting.
* Implement the disabled state:Owen Jacobson2025-05-13
| | | | | * Suppress input (including paste) while the input is disabled. * Style the input to make it visible that it's not accepting input.
* Send multi-line messages as multiple lines.Owen Jacobson2025-05-13
| | | | For whatever reason, `innerText` captures interior line breaks, while `textContent` does not. Wild. DOM APIs.
* Fix up input to be a contenteditable divKit La Touche2025-05-11
|
* Hoist global state access out of individual components.Owen Jacobson2025-02-21
| | | | | | | | Access to "global" (maybe "external?") state is now handled at the top level of the component hierarchy, in `+page.svelte`, `+layout.svelte`, and their associated scripts. State is otherwise passed down through props, and changes are passed up through callbacks. This is - hopefully - groundwork for refactoring state management a bit. I wanted to move access to state out to a smaller number of places, so that I have fewer places to update to implement reconnect logic. My broader goal is to make it easier to refactor these kinds of external side effects, as well, though no such changes are in this branch. This change also makes testing a mile easier, since tests can interact with props and callbacks instead of emulating the whole HTTP request stack and the Pilcrow API. This change removes do-very-little tests.
* Remove unused type attribute on textareaOwen Jacobson2025-02-21
|
* npm formatOwen Jacobson2025-02-15
|
* Add placeholder to message inputKit La Touche2025-01-28
|
* npm run formatOwen Jacobson2025-01-11
|
* Strip out Tailwind etcKit La Touche2024-12-30
|
* Clean up extraneous variablesKit La Touche2024-11-22
| | | | Just use state, don't derive from a non-state local variable.
* Sort out padding and wrapping for the chat inputOwen Jacobson2024-11-07
|
* Use any modifier key (ctrl, alt, shift, or meta, technically) for multi-line ↵Owen Jacobson2024-11-06
| | | | messages.
* Run spaces-style prettier formattingKit La Touche2024-11-03
|
* Svelte 5: go through and use runes in components, pages, and layouts.Owen Jacobson2024-11-03
| | | | Does not use runes in stores (yet).
* Svelte 5Owen Jacobson2024-11-03
|
* Bare-bones multiline inputOwen Jacobson2024-11-03
|
* Run prettier, make lint part of pre-commitOwen Jacobson2024-11-02
|
* Don't leave field binding vars uninitialized.Owen Jacobson2024-10-30
| | | | | | This was causing problems for changing passwords: if the user didn't type anything in the "original password" field, the code path to sending that field to the server was just straight-up omitting the field from the message, rather than setting it to empty string, causing a 422 Unprocessable Entity. On investigation we had latent bugs related to this in a bunch of spots.
* Move login to its own route.Owen Jacobson2024-10-11
| | | | This - in passing - fixes the problem where the client failed to subscribe after logging in, by causing the whole subscription process to be re-run when returning to the main interface.
* Compute the active channel from the current routing state, not from a store.Owen Jacobson2024-10-10
|
* Hoist the UI one step up furtherOwen Jacobson2024-10-10