1. Advisor
  2. draft-js-buttons
  3. draft-js-buttons code examples
View all draft-js-buttons analysis

How to use draft-js-buttons - 10 common examples

To help you get started, we’ve selected a few draft-js-buttons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ekmartin / unicode-style / src / Toolbar / index.js View on Github external
// Match the height of the existing buttons:
const createSpan = text => (
  <span style="{{">{text}</span>
);

const DoubleButton = createInlineStyleButton({
  style: 'DOUBLE',
  children: createSpan('𝔻')
});

const ScriptButton = createInlineStyleButton({
  style: 'SCRIPT',
  children: createSpan('𝓒')
});

const FrakturButton = createInlineStyleButton({
  style: 'FRAKTUR',
  children: createSpan('𝔉')
});

const StrikethroughButton = createInlineStyleButton({
  style: 'STRIKETHROUGH',
  children: createSpan('XΜΆ')
});

const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    StrikethroughButton,
    Separator,
github ekmartin / unicode-style / src / Toolbar / index.js View on Github external
Separator
} from 'draft-js-inline-toolbar-plugin';
import {
  createInlineStyleButton,
  BoldButton,
  ItalicButton,
  UnderlineButton,
  CodeButton
} from 'draft-js-buttons';

// Match the height of the existing buttons:
const createSpan = text =&gt; (
  <span style="{{">{text}</span>
);

const DoubleButton = createInlineStyleButton({
  style: 'DOUBLE',
  children: createSpan('𝔻')
});

const ScriptButton = createInlineStyleButton({
  style: 'SCRIPT',
  children: createSpan('𝓒')
});

const FrakturButton = createInlineStyleButton({
  style: 'FRAKTUR',
  children: createSpan('𝔉')
});

const StrikethroughButton = createInlineStyleButton({
  style: 'STRIKETHROUGH',
github assembl / assembl / assembl / static2 / js / app / components / common / richTextEditor / buttons.jsx View on Github external
// @flow
import React from 'react';
import { I18n } from 'react-redux-i18n';
import { createBlockStyleButton, createInlineStyleButton } from 'draft-js-buttons';

// we need to create this intermediate component for title attribute to be translated
const DumbBoldButton = () =&gt; <span title="{I18n.t('common.editor.bold')}">;

export const BoldButton = createInlineStyleButton({
  style: 'BOLD',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbItalicButton = () =&gt; <span title="{I18n.t('common.editor.italic')}">;

export const ItalicButton = createInlineStyleButton({
  style: 'ITALIC',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbUnorderedListButton = () =&gt; <span title="{I18n.t('common.editor.bulletList')}">;

export const UnorderedListButton = createBlockStyleButton({</span></span></span>
github assembl / assembl / assembl / static2 / js / app / components / common / richTextEditor / buttons.jsx View on Github external
import React from 'react';
import { I18n } from 'react-redux-i18n';
import { createBlockStyleButton, createInlineStyleButton } from 'draft-js-buttons';

// we need to create this intermediate component for title attribute to be translated
const DumbBoldButton = () =&gt; <span title="{I18n.t('common.editor.bold')}">;

export const BoldButton = createInlineStyleButton({
  style: 'BOLD',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbItalicButton = () =&gt; <span title="{I18n.t('common.editor.italic')}">;

export const ItalicButton = createInlineStyleButton({
  style: 'ITALIC',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbUnorderedListButton = () =&gt; <span title="{I18n.t('common.editor.bulletList')}">;

export const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: 
});</span></span></span>
github ekmartin / unicode-style / src / Toolbar / index.js View on Github external
ItalicButton,
  UnderlineButton,
  CodeButton
} from 'draft-js-buttons';

// Match the height of the existing buttons:
const createSpan = text =&gt; (
  <span style="{{">{text}</span>
);

const DoubleButton = createInlineStyleButton({
  style: 'DOUBLE',
  children: createSpan('𝔻')
});

const ScriptButton = createInlineStyleButton({
  style: 'SCRIPT',
  children: createSpan('𝓒')
});

const FrakturButton = createInlineStyleButton({
  style: 'FRAKTUR',
  children: createSpan('𝔉')
});

const StrikethroughButton = createInlineStyleButton({
  style: 'STRIKETHROUGH',
  children: createSpan('XΜΆ')
});

const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
github assembl / assembl / assembl / static2 / js / app / components / common / richTextEditor / buttons.jsx View on Github external
style: 'BOLD',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbItalicButton = () =&gt; <span title="{I18n.t('common.editor.italic')}">;

export const ItalicButton = createInlineStyleButton({
  style: 'ITALIC',
  children: 
});

// we need to create this intermediate component for title attribute to be translated
const DumbUnorderedListButton = () =&gt; <span title="{I18n.t('common.editor.bulletList')}">;

export const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: 
});</span></span>
github ekmartin / unicode-style / src / Toolbar / index.js View on Github external
const DoubleButton = createInlineStyleButton({
  style: 'DOUBLE',
  children: createSpan('𝔻')
});

const ScriptButton = createInlineStyleButton({
  style: 'SCRIPT',
  children: createSpan('𝓒')
});

const FrakturButton = createInlineStyleButton({
  style: 'FRAKTUR',
  children: createSpan('𝔉')
});

const StrikethroughButton = createInlineStyleButton({
  style: 'STRIKETHROUGH',
  children: createSpan('XΜΆ')
});

const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    StrikethroughButton,
    Separator,
    CodeButton,
    FrakturButton,
    DoubleButton,
    ScriptButton
  ],
github plone / volto / src / config / RichTextEditor / Styles.jsx View on Github external
const HeadlineTwoButton = createBlockStyleButton({
  blockType: 'header-two',
  children: ,
});

const HeadlineThreeButton = createBlockStyleButton({
  blockType: 'header-three',
  children: ,
});

const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: ,
});

const OrderedListButton = createBlockStyleButton({
  blockType: 'ordered-list-item',
  children: ,
});

const BlockquoteButton = createBlockStyleButton({
  blockType: 'blockquote',
  children: ,
});

const CalloutButton = createBlockStyleButton({
  blockType: 'callout',
  children: ,
});

export {
  BlockquoteButton,
github plone / volto / src / config / RichTextEditor / Styles.jsx View on Github external
const HeadlineThreeButton = createBlockStyleButton({
  blockType: 'header-three',
  children: ,
});

const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: ,
});

const OrderedListButton = createBlockStyleButton({
  blockType: 'ordered-list-item',
  children: ,
});

const BlockquoteButton = createBlockStyleButton({
  blockType: 'blockquote',
  children: ,
});

const CalloutButton = createBlockStyleButton({
  blockType: 'callout',
  children: ,
});

export {
  BlockquoteButton,
  BoldButton,
  CalloutButton,
  ItalicButton,
  HeadlineTwoButton,
  HeadlineThreeButton,
github plone / volto / src / config / RichTextEditor / Styles.jsx View on Github external
const BoldButton = createInlineStyleButton({
  style: 'BOLD',
  children: ,
});

const ItalicButton = createInlineStyleButton({
  style: 'ITALIC',
  children: ,
});

const HeadlineTwoButton = createBlockStyleButton({
  blockType: 'header-two',
  children: ,
});

const HeadlineThreeButton = createBlockStyleButton({
  blockType: 'header-three',
  children: ,
});

const UnorderedListButton = createBlockStyleButton({
  blockType: 'unordered-list-item',
  children: ,
});

const OrderedListButton = createBlockStyleButton({
  blockType: 'ordered-list-item',
  children: ,
});

const BlockquoteButton = createBlockStyleButton({
  blockType: 'blockquote',

draft-js-buttons

Buttons for DraftJS

GitHub
MIT
Latest version published 5 years ago

Package Health Score

67 / 100
Full package analysis

Popular draft-js-buttons functions

Similar packages