https://github.com/editor-js/text-variant-tune

Block Tune for text variants: Call-out, Citation, Details
https://github.com/editor-js/text-variant-tune

Last synced: 26 days ago
JSON representation

Block Tune for text variants: Call-out, Citation, Details

• Host: GitHub
• URL: https://github.com/editor-js/text-variant-tune
• Owner: editor-js
• License: mit
• Created: 2021-04-15T19:07:26.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-17T10:41:48.000Z (7 months ago)
• Last Synced: 2024-05-19T14:33:13.600Z (7 months ago)
• Language: JavaScript
• Size: 438 KB
• Stars: 9
• Watchers: 2
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-editorjs - @editorjs/text-variant-tune - out, Citation, Details (Tools / Block Tune Tools)

README

        
# Text Variant Tune

Editor.js Block Tune allows applying one of defined text variant: **Call-out**, **Citation**, and **Details** to any block.



## Variants

### Call-out

For important information the author wants to emphasize.



### Citation

To cite some full-text from a different source without using the Quote tool.



### Details

To add some information that is less important.



## How to use

1. Install

```js

yarn add @editorjs/text-variant-tune

```

2. Connect

```js

import EditorJS from '@editorjs/editorjs';

import TextVariantTune from '@editorjs/text-variant-tune';

/**

 * Editor.js configuration

 */

const editor = new EditorJS({

  /**

   * Connect tool

   */

  tools: {

    textVariant: TextVariantTune

  },

  /**

   * Apply to all the blocks

   */

  tunes: ['textVariant'],

  // ...

})

```

Optionally, you can connect this Tune only for specified blocks:

```js

import EditorJS from '@editorjs/editorjs';

import TextVariantTune from '@editorjs/text-variant-tune';

/**

 * Editor.js configuration

 */

const editor = new EditorJS({

  tools: {

    textVariant: TextVariantTune,

    paragraph: { // apply only for the 'paragraph' tool

      tunes: ['textVariant'],

    }

  },

})

```

## About

CodeX is a software engineering club unifying passionate engineers and designers around the world interested in making high-quality open-source projects and getting a priceless experience of making full-valued products on a global market.

[twitter.com/codex_team](https://twitter.com/codex_team)

[codex.so](https://codex.so)