@patternslib/pat-content-mirror

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

Changelog

3.0.0-alpha.0 (2022-06-15)

Features

• Build: Build module federation enabled bundles. (3ef070b)

Breaking Changes

• Depend on @patternslib/dev and extend config from there. (2ec9a14)

• Extend babel config from @patternslib/dev. (7362aa6)

• Extend commitlint config from @patternslib/dev. (fa15a47)

• Extend eslint config from @patternslib/dev. (354dac2)

• Extend jest config from @patternslib/dev. (665a68c)

• Extend Makefile from @patternslib/dev. (9906b70)

• Extend prettier config from @patternslib/dev. (246875b)

• Extend release-it config from @patternslib/dev. (dfe1071)

• Extend webpack config from @patternslib/dev. (078daa9)

Maintenance

• build: Add build:dev script to package.json to create a unminified development build. (24899fc)

• Build: @patternslib/patternslib as peerDependency. (8290399)Move @patternslib/patternslib dependency to peerDependencies and set to any version to avoid version conflicts when this package is a dependency of another Patternslib based package.

• Build: Add @patternslib/patternslib also to devDependencies so that we get it installed. (98c29eb)

• Build: Add keyword "patternslib" to package.json. (4952153)

• Build: Extend jest.config.js from Patternslib and reuse their setupTests file too. (6d6e04a)

• Build: Keep yarn.lock in repository. (7cd4042)

• Build: Makefile - Allow OTP when publishing to npm, build bundles and publish them on GitHub, add pre-release targets. (401eace)

• Build: Remove dependency regenerator-runtime except from test setup. The async/await runtime handling is already built-in in current Babel. (25f8f0f)

• Build: Remove dependency underscore, explicitly add dependency jquery. (1d201ac)

• Build: Update GitHub actions setup. (0bf2b95)

• Build: Upgrade and cleanup dependencies. (779af4d)