@patternslib/pat-content-mirror
Advanced tools
Changelog
Readme
A pattern that provides rich dynamic functionality to a textarea. It is used for comments in the social stream.
The main functionality is provided by maintaining a "mirror" element that
is updated every time the main textarea is changed. This element, which
can be specified using a CSS selector in the target option, sits behind the
textarea, and allows us to overcome the limitations of text-only content in
the html textarea element. The user interacts with the textarea, mostly by
typing, and the .content-mirror reflects the textarea content, but can also
contain links to other users or tags.
The pattern would typically be applied to a textarea element, though it is
not required.
In addition, another element must be present to act as the content mirror.
When the designated content mirror is empty, the pattern injects a placeholder
element (<em class="placeholder">Leave a comment</em>).
By default, the pattern looks for the content mirror using the CSS selector
p.content-mirror .text, though this can be overridden by the target
option.
The placeholder can be overridden by the placeholder attribute.
The example html below shows a structure that would work with the defaults:
<p class="content-mirror"
><span class="text"
><em class="placeholder">Leave a comment</em></span
></p>
<textarea placeholder="Leave a comment" class="pat-content-mirror"></textarea>
| Property | Value | Default | Type | Description |
|---|---|---|---|---|
| target | a CSS selector | p.content-mirror .text | string | a CSS selector that indicates in which element(s) the content of the textarea should be mirrored |
FAQs
A pattern for content-mirror
We found that @patternslib/pat-content-mirror demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.
Security News
Ecma TC39 is meeting this week and has moved key ECMAScript proposals forward, advancing Deferred Import Evaluation, Error.isError(), RegExp Escaping, and Promise.try to the next stages.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.