How to use draft-js-linkify-plugin - 10 common examples

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',
  component: (props) => (
    // eslint-disable-next-line no-alert, jsx-a11y/anchor-has-content
    <a> alert('Clicked on Link!')} /&gt;
  )
});

const plugins = [linkifyPlugin];

export default class CustomMentionEditor extends Component {

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

  onChange = (editorState) =&gt; {</a>

import { fetchReticulumAuthenticated } from "../utils/phoenix-utils";
import createEmojiPlugin from "draft-js-emoji-plugin";
import createHashtagPlugin from "draft-js-hashtag-plugin";
import createLinkifyPlugin from "draft-js-linkify-plugin";
import createCounterPlugin from "draft-js-counter-plugin";
import classNames from "classnames";
import { scaledThumbnailUrlFor } from "../utils/media-url-utils";
import { Modifier, EditorState } from "draft-js";
import "draft-js-emoji-plugin/lib/plugin.css";
import "draft-js-hashtag-plugin/lib/plugin.css";
import "draft-js-linkify-plugin/lib/plugin.css";
import "draft-js-counter-plugin/lib/plugin.css";

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const counterPlugin = createCounterPlugin();

// Taken from draft-js-emoji
const addEmoji = (emoji, editorState) => {
  const contentState = editorState.getCurrentContent();
  const contentStateWithEntity = contentState.createEntity("emoji", "IMMUTABLE", { emojiUnicode: emoji });
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  const currentSelectionState = editorState.getSelection();

  let emojiAddedContent;
  let emojiEndPos = 0;
  let blockSize = 0;

  // in case text is selected it is removed and then the emoji is added
  const afterRemovalContentState = Modifier.removeRange(contentState, currentSelectionState, "backward");

import createEmojiPlugin from 'draft-js-emoji-plugin';
import styled from "styled-components"
import 'draft-js-hashtag-plugin/lib/plugin.css';
import 'draft-js-emoji-plugin/lib/plugin.css'
//import 'draft-js-inline-toolbar-plugin/lib/plugin.css'
import './styles/style.css'
import { EditorState } from 'draft-js';

const emojiPlugin = createEmojiPlugin({
  useNativeArt: false
});
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;


const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;

const plugins = [
  hashtagPlugin,
  linkifyPlugin,
  inlineToolbarPlugin,
  emojiPlugin
];

const EditorContainer = styled.div`
  /* -ms- properties are necessary until MS supports the latest version of the grid spec */
  /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */
  display: flex;
  flex-direction: column;
  min-width: 242px;

// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createLinkifyPlugin from 'draft-js-linkify-plugin'; // eslint-disable-line import/no-unresolved
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const linkifyPlugin = createLinkifyPlugin();

// The Editor accepts an array of plugins. In this case, only the linkifyPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  
);

export default MyEditor;

import React, { Component } from 'react';
import { EditorState, ContentState } 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();
const plugins = [linkifyPlugin];

export default class SimpleMentionEditor extends Component {
  state = {
    editorState: EditorState.createWithContent(ContentState.createFromText('Hello there google.com')),
  };

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

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

super(props);

    this.state = {
      plugins: [
        createPrismPlugin({
          prism: Prism,
        }),
        createMarkdownPlugin({
          features: {
            inline: ['BOLD', 'ITALIC', 'CODE'],
            block: ['CODE', 'blockquote'],
          },
          renderLanguageSelect: () => null,
        }),
        createCodeEditorPlugin(),
        createLinkifyPlugin({
          target: '_blank',
        }),
      ],
    };
  }

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();

getPluginsReady = props => {
    const codePlugin = createCodeEditorPlugin();
    const blockBreakoutPlugin = createBlockBreakoutPlugin();
    const richButtons = createRichButtonsPlugin();
    const prismPlugin = createPrismPlugin({
      prism: Prism
    });
    const linkifyPlugin = createLinkifyPlugin({
      target: "_blank"
    });
    const markdownPlugin = createMarkdownPlugin({ languages });
    const imagePlugin = createImagePlugin({
      imageComponent: Img
    });
    return {
      plugins: [
        linkifyPlugin,
        codePlugin,
        blockBreakoutPlugin,
        richButtons,
        prismPlugin,
        markdownPlugin,
        imagePlugin
      ],

import Editor, { composeDecorators } from "draft-js-plugins-editor";
import ImageMenu from "./ImageMenu";

import createEntityPropsPlugin from "draft-js-entity-props-plugin";
import createAutoListPlugin from "draft-js-autolist-plugin";
import createFocusPlugin from "draft-js-focus-plugin";
import createLinkifyPlugin from "draft-js-linkify-plugin";
import createImagePlugin from "draft-js-image-plugin";
import createUndoPlugin from "draft-js-undo-plugin";

import { stateToHTML } from "draft-js-export-html";

const autoListPlugin = createAutoListPlugin();
const entityPlugin = createEntityPropsPlugin();
const focusPlugin = createFocusPlugin();
const linkifyPlugin = createLinkifyPlugin();
const undoPlugin = createUndoPlugin();

const decorator = composeDecorators(focusPlugin.decorator);

const imagePlugin = createImagePlugin({ decorator });
const { UndoButton, RedoButton } = undoPlugin;
const plugins = [
  autoListPlugin,
  entityPlugin,
  focusPlugin,
  imagePlugin,
  linkifyPlugin,
  undoPlugin
];

const styles = {