# Wagtail Draftail Hovercard
[](https://github.com/Stormbase/wagtail-draftail-hovercard/blob/main/LICENSE)
[](https://pypi.python.org/pypi/wagtail-draftail-hovercard/)
A Wagtail plugin that adds a hovercard to Wagtail's Draftail rich text editor. You are responsible for rendering the hovercard in your frontend.
## Requirements
- Wagtail 4.2+
## Installation
1. Install the package
```sh
pip install wagtail-draftail-hovercard
```
2. Add ``wagtail_draftail_hovercard`` to your ``INSTALLED_APPS``
```python
INSTALLED_APPS = [
# ...
"wagtail_draftail_hovercard",
# ...
]
```
3. Add the `hovercard` feature to your `RichTextField` or `RichTextBlock`
```python
class MyModel(models.Model):
content = RichTextField(features=["hovercard"])
```
That's it! You now have a hovercard feature in your Draftail editor toolbar.
## Rendering the hovercard on the frontend of your site
You are responsible for rendering the hovercard in your frontend. The rich text representation in limited to a `<span>` element with the extra fields added as data attributes. You need to write some JS to look for `span[data-type="hovercard"]` and replace it with your whatever you want to render.
Here's what the HTML rendered by Draftail looks like:
```html
<span data-type="hovercard" data-text="I'm the text inside the hovercard" data-heading="I'm the heading or I can be blank">
I'm the text that the hovercard is attached to
</span>
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
Raw data
{
"_id": null,
"home_page": "",
"name": "wagtail-draftail-hovercard",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.8,<4.0",
"maintainer_email": "",
"keywords": "wagtail,draftail,rich text,editor",
"author": "Storm B. Heg",
"author_email": "storm@stormbase.digital",
"download_url": "https://files.pythonhosted.org/packages/84/3e/6a0fd457c387c370d1e89d9f5ebdf73ad42d09ed7101ad6eb657015ccfda/wagtail_draftail_hovercard-0.1.0.tar.gz",
"platform": null,
"description": "# Wagtail Draftail Hovercard\n\n[](https://github.com/Stormbase/wagtail-draftail-hovercard/blob/main/LICENSE)\n[](https://pypi.python.org/pypi/wagtail-draftail-hovercard/)\n\nA Wagtail plugin that adds a hovercard to Wagtail's Draftail rich text editor. You are responsible for rendering the hovercard in your frontend.\n\n## Requirements\n\n- Wagtail 4.2+\n\n## Installation\n\n1. Install the package\n\n```sh\npip install wagtail-draftail-hovercard\n```\n\n2. Add ``wagtail_draftail_hovercard`` to your ``INSTALLED_APPS``\n\n```python\nINSTALLED_APPS = [\n # ...\n \"wagtail_draftail_hovercard\",\n # ...\n]\n```\n\n3. Add the `hovercard` feature to your `RichTextField` or `RichTextBlock`\n\n```python\nclass MyModel(models.Model):\n content = RichTextField(features=[\"hovercard\"])\n```\n\nThat's it! You now have a hovercard feature in your Draftail editor toolbar.\n\n## Rendering the hovercard on the frontend of your site\n\nYou are responsible for rendering the hovercard in your frontend. The rich text representation in limited to a `<span>` element with the extra fields added as data attributes. You need to write some JS to look for `span[data-type=\"hovercard\"]` and replace it with your whatever you want to render.\n\nHere's what the HTML rendered by Draftail looks like:\n\n```html\n<span data-type=\"hovercard\" data-text=\"I'm the text inside the hovercard\" data-heading=\"I'm the heading or I can be blank\">\n I'm the text that the hovercard is attached to\n</span>\n```\n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Hovercard entity for Wagtail's Draftail rich text editor",
"version": "0.1.0",
"project_urls": {
"changelog": "https://github.com/Stormbase/wagtail-draftail-hovercard/blob/main/CHANGELOG.md",
"repository": "https://github.com/Stormbase/wagtail-draftail-hovercard"
},
"split_keywords": [
"wagtail",
"draftail",
"rich text",
"editor"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "f39e909f17f7c50606a713a6b197213ac27b69c5a9e7b4b9ba215d225286e5ac",
"md5": "0a1426b253c9e6a82eee38dfb0546c01",
"sha256": "e3527f0073a833b597703ccdb4ac4eb87bf188c21969ae2968b416b3e17de917"
},
"downloads": -1,
"filename": "wagtail_draftail_hovercard-0.1.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "0a1426b253c9e6a82eee38dfb0546c01",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8,<4.0",
"size": 7279,
"upload_time": "2024-02-22T15:29:15",
"upload_time_iso_8601": "2024-02-22T15:29:15.626860Z",
"url": "https://files.pythonhosted.org/packages/f3/9e/909f17f7c50606a713a6b197213ac27b69c5a9e7b4b9ba215d225286e5ac/wagtail_draftail_hovercard-0.1.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "843e6a0fd457c387c370d1e89d9f5ebdf73ad42d09ed7101ad6eb657015ccfda",
"md5": "7b617f9b16edff020869b06c3c43cca5",
"sha256": "d5862c6427fde7297677c6b3e7b24efa09597b4c130ed34f5401711c72a4f589"
},
"downloads": -1,
"filename": "wagtail_draftail_hovercard-0.1.0.tar.gz",
"has_sig": false,
"md5_digest": "7b617f9b16edff020869b06c3c43cca5",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8,<4.0",
"size": 5223,
"upload_time": "2024-02-22T15:29:18",
"upload_time_iso_8601": "2024-02-22T15:29:18.227934Z",
"url": "https://files.pythonhosted.org/packages/84/3e/6a0fd457c387c370d1e89d9f5ebdf73ad42d09ed7101ad6eb657015ccfda/wagtail_draftail_hovercard-0.1.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-02-22 15:29:18",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Stormbase",
"github_project": "wagtail-draftail-hovercard",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "wagtail-draftail-hovercard"
}
JSON
