Skip to content
This repository has been archived by the owner on Sep 8, 2023. It is now read-only.

Implement reference preview rendering #743

Merged
merged 14 commits into from
Aug 31, 2022
Merged
26 changes: 22 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Vue component for rich content strings

[![npm last version](https://img.shields.io/npm/v/@juliushaertl/vue-richtext.svg?style=flat-square)](https://www.npmjs.com/package/@juliushaertl/vue-richtext) [![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)](https://dependabot.com)
[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue-richtext.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/vue-richtext) [![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)](https://dependabot.com)

This library provides a simple vue component to render text with rich placeholder replacements.
The parameters that are replaced can either be a string or an object that allows rendering any Vue component into the text.
Expand All @@ -10,7 +10,22 @@ Markdown can be used for basic text formatting.
## Installation

```sh
npm install --save @juliushaertl/vue-richtext
npm install --save @nextcloud/vue-richtext
```

## Usage

### Importing the vue component

```
import { RichText } from '@nextcloud/vue-richtext'
```

### Importing the shipped stylesheets

```
@import '@nextcloud/vue-richtext/dist/style.css';

```

## Basic usage with simple text placeholders
Expand All @@ -28,7 +43,7 @@ npm install --save @juliushaertl/vue-richtext
</template>

<script>
import RichText from '@juliushaertl/vue-richtext'
import RichText from '@nextcloud/vue-richtext'
import UserBubble from './UserBubble'

export default {
Expand Down Expand Up @@ -97,6 +112,9 @@ export default {
- username: `{ component: UserBubble, props: { username: 'Jane Doe' }`
- Renders: `The <strong>file</strong> <i>'MyDocument'</i> was added by <UserBubble>Jane Doe</UserBubble>`


## Reference rendering

## Documentation

A full example is shown in the [documentation](https://juliushaertl.github.io/vue-richtext/)
A full example is shown in the [documentation](https://nextcloud.github.io/vue-richtext/)
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@
</head>
<body>

<h1>@juliushaertl/vue-richtext</h1>
<h1>@nextcloud/vue-richtext</h1>

<a href="https://github.com/juliushaertl/vue-richtext">Open on GitHub</a>
<a href="https://github.com/nextcloud/vue-richtext">Open on GitHub</a>

<div id="readme"></div>

Expand Down
Loading