@cloak-app/copy
Cloak components for rendering WYSIWYG text.
<cloak-copy balance-text content='
<p>This <a href="/">link</a> uses v-parse-anchors.</p>
'></cloak-copy>
Install
- Install with
yarn add @cloak-app/copy
- Add to
nuxt.config
withbuildModules: ['@cloak-app/copy']
Project Dependencies
- Expects that vue-routing-anchor-parser is configured
-
.wyswiwyg
styles (included in Cloak viabukwild-stylus-library/boilerplate
). -
.max-w*
styles (included in Cloak viawhitespace.styl
)
Module Options
Set these properties within cloak: { copy: { ... } }
in the nuxt.config.js:
-
blockMaxWidth
- A string that should match a global CSS class that adds horizontalpadding
and amax-width
to the block component. Defaults tomax-w
. -
embededEntriesQuery
- (docs TODO) -
embededEntriesRenderer
- (docs TODO)
Components
<cloak-copy/>
This is a generic copy renderer that can be used by other Cloak components so they can stay ignorant of the CMS. For instance, a FAQ component with a CMS-specific adapater. In this case, the FAQ component can just pass along the content
content it was provided to cloak-copy
and never know whether it is rendering markup from Redactor or rich text from Contentful.
- props:
-
content
- Either an HTML string or a Contentful rich text JSON document -
balanceText
- Boolean, enables vue-balance-text -
unorphan
- Boolean, enables vue-unorphan
-
<cloak-copy-block/>
Renders a CMS non-specific cloak-copy
instance within a max-w
class.
- props:
-
content
- String, the html content to be rendered -
balanceText
- See above -
unorphan
- See above -
textAlign
- See above -
maxWidth
- Amax-w-*
class to apply to the block
-
<cloak-copy-wysiwyg/>
Takes content
and wraps it with default wysiwyg styling.
- props:
-
content
- String, the html content to be rendered -
balanceText
- See above -
unorphan
- See above
-
<cloak-copy-rich-text/>
Renders Contentful Rich Text JSON.
- props:
-
content
- Object, the content to be rendered -
balanceText
- See above -
unorphan
- See above -
embededEntriesQuery
- String (docs TODO) -
embededEntriesRenderer
- Function (docs TODO)
-
Contributing
Run yarn dev
to open a Nuxt dev build of the demo directory.