Ejemplos de draft-js-linkify-plugin en JavaScript

Ejemplo n.º 1

Archivo: index.js Proyecto: draft-js-plugins/draft-js-plugins

import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import editorStyles from './editorStyles.css';

const linkifyPlugin = createLinkifyPlugin({ target: '_blank' });
const plugins = [linkifyPlugin];

export default class CustomMentionEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}

Ejemplo n.º 2

Archivo: index.js Proyecto: DapperFox/draft-js-plugins

import createEmojiPlugin from 'draft-js-emoji-plugin';
import createUndoPlugin from 'draft-js-undo-plugin';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
import {
  // convertToRaw,
  convertFromRaw,
  ContentState,
  EditorState,
} from 'draft-js';
import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({
  stickers,
});
const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;
const { UndoButton, RedoButton } = undoPlugin;

const plugins = [
  emojiPlugin,
  hashtagPlugin,
  stickerPlugin,
  linkifyPlugin,

Ejemplo n.º 3

Archivo: plugins.js Proyecto: devitito/givemetime

    },
    displayName: 'LinkComponent',
    render: function () {
        return <a {...this.props} onClick={() => window.open(this.props.href, '_blank')} />
    },
})

// Create and initialize components

const focusPlugin = createFocusPlugin()
const resizeablePlugin = createResizeablePlugin()
const alignmentPlugin = createAlignmentPlugin()
const hashtagPlugin = createHashtagPlugin()
const undoPlugin = createUndoPlugin()
const emojiPlugin = createEmojiPlugin()
const linkifyPlugin = createLinkifyPlugin({ component: LinkComponent })
const inlineToolbarPlugin = createInlineToolbarPlugin({
    structure: [
        BoldButton,
        ItalicButton,
        UnderlineButton,
        CodeButton,
        Separator,
        HeadlineOneButton,
        HeadlineTwoButton,
        HeadlineThreeButton,
        UnorderedListButton,
        OrderedListButton,
        BlockquoteButton,
        CodeBlockButton,
    ],

Ejemplo n.º 4

Archivo: index.js Proyecto: bkniffler/draft-js-plugin-editor

import React, { Component } from 'react';
import Editor, { createWithText } from 'draft-js-plugin-editor';
import hashtagPlugin from 'draft-js-hashtag-plugin';
import stickerPlugin from 'draft-js-sticker-plugin';
import linkifyPlugin from 'draft-js-linkify-plugin';
import { EditorState } from 'draft-js';
import styles from './styles';
import stickers from './stickers';
import { List } from 'immutable';
import StatePreview from '../StatePreview';

const hashtagPluginInstance = hashtagPlugin();
const linkifyPluginInstance = linkifyPlugin();
const stickerPluginInstance = stickerPlugin({ stickers });
const { StickerSelect } = stickerPluginInstance;

const plugins = List([
  hashtagPluginInstance,
  stickerPluginInstance,
  linkifyPluginInstance,
]);

export default class UnicornEditor extends Component {

  state = {
    editorState: createWithText('Hello World!', plugins),
    showState: false,
  };

  onChange = (editorState) => {
    this.setState({

Ejemplo n.º 5

Archivo: editor-plugins.js Proyecto: alexwalchli/codex

import createLinkifyPlugin from 'draft-js-linkify-plugin'
import createEmojiPlugin from 'draft-js-emoji-plugin'
import createMentionPlugin from 'draft-js-mention-plugin'

const hashTagConfig = { theme: { hashtag: 'hashtag' } }
const linkifyConfig = {
  component: (props) => (
    <a {...props} className='editor-link' onClick={(e) => {
      var link = e.target.innerText
      if (link.includes('http://') || link.includes('http://')) {
        window.open(e.target.innerText)
      } else {
        window.open(`https://${e.target.innerText}`)
      }
    }} />
  )
}

export const mentionPlugin = createMentionPlugin()
export const emojiPlugin = createEmojiPlugin()
export const hashtagPlugin = createHashtagPlugin(hashTagConfig)
export const linkifyPlugin = createLinkifyPlugin(linkifyConfig)
export const allPlugins = [
  mentionPlugin,
  hashtagPlugin,
  linkifyPlugin,
  emojiPlugin
]
export const MentionSuggestions = mentionPlugin.MentionSuggestions
export const EmojiSuggestions = emojiPlugin.EmojiSuggestions