pat-content-mirror
Advanced tools
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 option.
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>
FAQs
A pattern for rich comments in the social stream.
The npm package pat-content-mirror receives a total of 0 weekly downloads. As such, pat-content-mirror popularity was classified as not popular.
We found that pat-content-mirror demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
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.