https://github.com/tinymce/antora-extension-livedemos
Antora Live demos extension for TinyMCE docs
https://github.com/tinymce/antora-extension-livedemos
Last synced: 2 months ago
JSON representation
Antora Live demos extension for TinyMCE docs
- Host: GitHub
- URL: https://github.com/tinymce/antora-extension-livedemos
- Owner: tinymce
- License: mit
- Created: 2022-06-21T01:49:11.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-16T23:39:51.000Z (over 2 years ago)
- Last Synced: 2025-02-15T15:50:16.159Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 11
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.TXT
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Antora extension live demos
This repo maintains an Antora extension which enables live demos for [TinyMCE docs](https://www.tiny.cloud/docs).
# How to
1. Install dependency
```bash
yarn add -D @tinymce/antora-extension-livedemos
```
2. Configure the `tinymce_live_demo_url` attribute in the Antora playbook config
```yml
asciidoc
attributes:
tinymce_live_demo_url: URL_to_script_file
```
3. Add the dependency name to the config file to enable
```yml
asciidoc:
extensions:
- '@tinymce/antora-extension-livedemos'
```
# Usage
Use macro `liveDemo::[]` to enable a live demo in your article. For example:
```
liveDemo::hello-world[]
```
Files are required to be under the `examples/live-demos//` directory in your Antora module. The following files are available for use:
- index.html
- index.js
- index.css (optional)
- example.js (optional)
- example.html (optional)
**Note:** If `index.css` is omitted, the CSS tab will not display. [Here](./live-demos/hello-world/) is a simple demo for the above example
## The purpose of `example.js`
When the file is present the live-demo js tab will display the contents of `example.js`, while the real demo code executes with `index.js`. Useful for when we want to hide actual `api-keys` or `tokens`: 'example-token'. When the `example.js` file is present, the link to the external codepen site is disabled.
## Parameters
- id (required): Folder for files, and used in CSS classes
- type (optional): Specifies if the example is `tinymce` or `tinydrive` specific. Default is `tinymce`
- tab (optional): The first tab to open. Valid options are "run", "html", "css" or "js". Default to "run"
- height (optional - no default): `min-height` in pixels
- script_url_override (optional - no default):
- Override the full tinymce.min.js URL, including api key
- Useful for testing things that aren't in the main channel, yet
- Remove this setting once the feature is in the main channel
**Note**: Provide optional parameters in comma separated name-value pairs into the square bracket following `id`.