How to use the draft-js.CompositeDecorator function in draft-js

To help you get started, we’ve selected a few draft-js 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 54sword / xiaoduyu.com / src / app / components / editor / index.tsx View on Github external
constructor(props) {
    super(props)

    const { syncContent, content, placeholder, expandControl } = this.props;

    const decorator = new CompositeDecorator([
      {
        strategy: findLinkEntities,
        component: Link,
      },
    ]);

    this.state = {
      syncContent: syncContent, // 编辑器改变的时候,调给外部组件使用
      editorState: content
        ? EditorState.createWithContent(convertFromRaw(JSON.parse(content)), decorator)
        : EditorState.createEmpty(decorator),
      placeholder: placeholder,
      // 展开控制栏
      expandControl: expandControl || false,
      markdown: false
    }
github react-component / editor-mention / src / component / Mention.react.jsx View on Github external
super(props);
   

    this.mention = createMention({
      prefix: this.getPrefix(props),
      tag: props.tag,
      mode: props.mode,
      mentionStyle: props.mentionStyle,
    });

    this.Suggestions = this.mention.Suggestions;
    this.plugins = [this.mention];

    this.state = {
      suggestions: props.suggestions,
      value: props.value && EditorState.createWithContent(props.value,  new CompositeDecorator(this.mention.decorators)),
      selection: SelectionState.createEmpty(),
    };

    if (typeof props.defaultValue === 'string') {
      console.warn('The property `defaultValue` now allow `EditorState` only, see http://react-component.github.io/editor-mention/examples/defaultValue.html ');
    }
    if (props.value !== undefined) {
      this.controlledMode = true;
    }
  }
  componentWillReceiveProps(nextProps) {
github jddunn / frame / frame / src / components / vendor / model / content.js View on Github external
import {
  EditorState,
  convertFromRaw,
  CompositeDecorator,
  ContentState,
} from 'draft-js';

import Link, { findLinkEntities } from '../components/entities/link';


const defaultDecorators = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link,
  },
]);


const createEditorState = (content = null, decorators = defaultDecorators) => {
  if (content === null) {
    return EditorState.createEmpty(decorators);
  }
  let contentState = null;
  if (typeof content === 'string') {
    contentState = ContentState.createFromText(content);
  } else {
    contentState = convertFromRaw(content);
github AlastairTaft / draft-js-editor / src / components / defaultDecorator.js View on Github external
);
    },
    callback
  );
}

const Link = (props) => {
  const {href} = Entity.get(props.entityKey).getData();
  return (
    <a href="{href}">
      {props.children}
    </a>
  );
};

const decorator = new CompositeDecorator([
  {
    strategy: findLinkEntities,
    component: Link,
  },
]);

export default decorator
github leejaen / react-lz-editor / publish / editor / index.js View on Github external
value: function _choiceAutoSave(savedImportContent) {
      var decorator = new _draftJs.CompositeDecorator([_LinkDecorator2.default, _ImageDecorator2.default, _VideoDecorator2.default, _AudioDecorator2.default]);
      var ConvertFormatProps = this.props.convertFormat;
      var contentState = "";
      if (ConvertFormatProps === 'html') {
        contentState = (0, _utils.stateFromHTML)(savedImportContent);
      } else if (ConvertFormatProps === 'markdown') {
        contentState = (0, _utils.stateFromMD)(savedImportContent);
      } else if (ConvertFormatProps === 'raw') {
        var rawContent = JSON.parse(savedImportContent);
        contentState = (0, _draftJs.convertFromRaw)(rawContent);
      }

      var values = _draftJs.EditorState.createWithContent(contentState, decorator);
      this.state.editorState = values;
      this.forceUpdate();
    }
  }, {
github meriadec / overdraft / src / createDecorator.js View on Github external
export default function createDecorator(entities = []) {
  return new CompositeDecorator([linkEntity, ...entities])
}
github draft-js-plugins / draft-js-plugins / src / PluginEditor / utils / createCompositeDecorator.js View on Github external
export default (plugins) => {
  const decorators = plugins
    .filter((plugin) => plugin.compositeDecorator !== undefined)
    .map((plugin) => plugin.compositeDecorator);
  return new CompositeDecorator(decorators.toJS());
}
github michelson / dante2 / package / lib / components / Dante / Dante.js View on Github external
decorators: function decorators(context) {
    return new _draftJsMultidecorators.default([(0, _prism.PrismDraftDecorator)(), new _draftJs.CompositeDecorator([{
      strategy: _find_entities.default.bind(null, 'LINK', context),
      component: _link2.default
    }])]);
  },
  xhr: {
github thanhtungdp / react-redux-firebase-blog / app / components / form / Editors / EditorHashtag.js View on Github external
constructor(props) {
        super(props);

        const decorator = new CompositeDecorator([
            {
                strategy: hashtagStrategy,
                component: HashtagSpan
            },
            {
                strategy: handleStrategy,
                component: HandleSpan
            },{
                strategy: handleLink,
                component: HandleLinkSpan
            }
        ]);

        let contentState = ContentState.createFromText('http://thanhtungdp.com');

        this.state = {
github strues / boldr / packages / frontend / BoldrText / BoldrText.js View on Github external
getCustomStyleMap,
  decorators,
} from './core/renderers';
import { getToHTMLConfig, getFromHTMLConfig } from './core/configs/convert';
import defaultOptions from './core/configs/options';

import type {
  OptionControls,
  OptionAddonControls,
  OptionMedia,
  OptionColors,
  OptionFontSize,
  OptionFontFamilies,
} from './core/configs/options';

const editorDecorators = new CompositeDecorator(decorators);
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);

export type Props = {
  initialContent: string | Object,
  contentFormat: string,
  onChange: Function,
  onHtmlChange: Function,
  onRawChange: Function,
  controls: OptionControls,
  height: number,
  media: OptionMedia,
  addonControls: OptionAddonControls,
  language?: string,
  colors: OptionColors,
  fontSizes: OptionFontSize,
  fontFamilies: OptionFontFamilies,