@titsoft/text-m NPM

text-m

text-m is a block custom-element for text content

using a special syntax for (inline) Text-level semantic elements,
wrapping the content in one or more paragraphs (P tag) elements,
allowing text-m to be replaced by its children using the boolean level-up attribute.

Syntax

minimal: |em/emphasis/
with class: |em.red/emphasis/
with shortcuts attributes: |a[mysite.com _blank]/link text/ (space delimiter)
with named attributes: |a[href="mysite.com" target="_blank"]/link text/(as regular attributes)
class and attributes can be mixed: |a.red[mysite.com]/link text/

Examples

Basic

<text-m>
    I must say I |em/adore/ lemonade.
    Love it!
</text-m>

transformed to

<text-m>
    <p>I must say I <em>adore</em> lemonade. Love it!</p>
</text-m>

With `level-up` attribute

<text-m level-up>
    I must say I |em/adore/ lemonade.

    I must say I |strong/dislike/ celery.
</text-m>

transformed to

    <p>I must say I <em>adore</em> lemonade.</p>
    <p>I must say I <em>dislike</em> celery.</p>

Installation

npm i @titsoft/text-m

// Create text-m custom-element
import {} from '@titsoft/text-m'
//  + access to text-m renderer
import {render} from '@titsoft/text-m/render'
render(input, options) // default: options = {wrapOne: true}
// wrapOne : wrap or not with P tag if there is only one paragraph