Ninjas Practicing Multidimensionality

    @patternslib/pat-content-mirror

    3.0.0 • Public • Published

    pat-content-mirror

    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>
    

    Documentation

    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

    Keywords

    Install

    npm i @patternslib/pat-content-mirror

    DownloadsWeekly Downloads

    59

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    21

    Last publish

    Collaborators

    • goibhniu
    • askesemann
    • pilz
    • jcbrand
    • fulv
    • thet
    • alessandro.pisa