How to use the draft-js.Entity.create 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 Heigvd / Wegas / wegas-app / src / main / webapp / wegas-react-form / src / Views / RTE / styles.tsx View on Github external
htmlToEntity: (nodeName, node) => {
        if (nodeName === 'a') {
            // this will deprecate. fix https://github.com/HubSpot/draft-convert/pull/82
            return Entity.create('LINK', 'MUTABLE', {
                url: node.getAttribute('href'),
            });
        }
        if (nodeName === 'img') {
            return Entity.create('IMAGE', 'IMMUTABLE', {
                url: node.getAttribute('src'),
            });
        }
        if (nodeName === 'video') {
            return Entity.create('VIDEO', 'IMMUTABLE', {
                url: node.getAttribute('src'),
            });
        }
    },
    htmlToBlock: (nodeName, node) => {
github AlastairTaft / draft-js-editor / src / components / PopoverControl / LinkButton.js View on Github external
const toggleLink = (editorState) => {

  // Add a link
  const selection = editorState.getSelection();
  if (selection.isCollapsed()) {
    return;
  }

  let href = window.prompt('Enter a URL') || "";

  if (href && !href.startsWith("http://") && !href.startsWith("https://")) {
    href = "http://" + href;
  }

  const entityKey = Entity.create('LINK', 'MUTABLE', {href, url: href});
  const content = editorState.getCurrentContent();   
  return RichUtils.toggleLink(editorState, selection, entityKey)
};
github plotly / react-chart-editor / src / components / widgets / text_editors / RichText / DraftCommands.js View on Github external
export function toggleLink(editorState) {
  const selection = editorState.getSelection();

  if (selectionHasLink(editorState, selection)) {
    // Remove link
    return RichUtils.toggleLink(editorState, selection, null);
  }

  // Create a link with an empty URL
  const entityKey = Entity.create(LINK, 'MUTABLE', {url: ''});

  return RichUtils.toggleLink(editorState, selection, entityKey);
}
github dburrows / draft-js-basic-html-editor / src / BasicHtmlEditor.js View on Github external
_addLink(/* e */) {
    const {editorState} = this.state;
    const selection = editorState.getSelection();
    if (selection.isCollapsed()) {
      return;
    }
    const href = window.prompt('Enter a URL');
    const entityKey = Entity.create('link', 'MUTABLE', {href});
    this.onChange(RichUtils.toggleLink(editorState, selection, entityKey));
  }
github Khan / perseus / src / perseus-editor.jsx View on Github external
images.forEach(image => {
            // Insert placeholder text to show that the image is being uploaded
            const text = `![](${image.name}...)`;
            const id = genKey();
            const entity = Entity.create("TEMP_IMAGE", "IMMUTABLE", {id});

            const charData = CharacterMetadata.create().merge({entity});
            const characterList = Array(text.length).fill(charData);
            const sanitizer = textLine =>
                textLine === text ? {text, characterList} : null;

            const blockKey = selection.getEndKey();
            const contentBlock = contentState.getBlockForKey(blockKey);
            const endOfBlockSelection = DraftUtils.selectEnd(contentBlock);
            contentState = DraftUtils.insertText(
                {contentState, selection: endOfBlockSelection},
                `\n${text}\n`,
                sanitizer
            ).contentState;

            // Begin uploading the image, and update the link once complete
github michelson / dante2 / src / components / popovers / toolTip.js View on Github external
confirmLink(e) {
    e.preventDefault()
    let { editorState } = this.props
    let urlValue = e.currentTarget.value
    let contentState = editorState.getCurrentContent()
    let selection = editorState.getSelection()

    let opts = {
      url: urlValue,
      showPopLinkOver: this.props.showPopLinkOver,
      hidePopLinkOver: this.props.hidePopLinkOver
    }
    
    let entityKey = Entity.create('LINK', 'MUTABLE', opts)
    //contentState.createEntity('LINK', 'MUTABLE', opts)

    if (selection.isCollapsed()) {
      console.log("COLLAPSED SKIPPING LINK")
      return
    }

    this.props.onChange(RichUtils.toggleLink(editorState, selection, entityKey))

    return this._disableLinkMode(e)
  }
github researchspace / researchspace / researchspace / web / src / main / components / annotations / AnnotationTextEditorComponent.ts View on Github external
changeTemplateFromInlineToBlock(newIndex) {
    let data = this.props.semanticToEdit.getData();
    data.selectedTemplateIndex = newIndex;
    const newBlockEntityKey = Entity.create('SEMANTIC-BLOCK', 'IMMUTABLE', data);
    this.setState({waitingForSemanticWithEntityKey: newBlockEntityKey}, () => {
      const {editor} = this.props;
      const {entityKey} = this.props.semanticToEdit.props;
      const initialState = editor.state.editorState;

      let insertIntoBlock = null;
      let insertAtOffset = null;
      initialState.getCurrentContent().getBlockMap().valueSeq().forEach((block: ContentBlock) => {
        block.findEntityRanges((character) => character.getEntity() === entityKey, (start, end) => {
          insertIntoBlock = block.getKey();
          insertAtOffset = end;
        });
      });
      if (insertIntoBlock === null || insertAtOffset === null) {
        throw 'Can not find anything that has entityKey=' + entityKey;
      }
github bkniffler / draft-wysiwyg / src / draft-toolbar.js View on Github external
}, toggle: function(action, state, editorState, onChange){
         const selection = editorState.getSelection();
         if (selection.isCollapsed()) {
            return;
         }
         if(state.active){
            onChange(RichUtils.toggleLink(editorState, selection, null));
         }
         else{
            const href = window.prompt('Enter a URL');
            const entityKey = Entity.create('link', 'MUTABLE', {href});
            onChange(RichUtils.toggleLink(editorState, selection, entityKey));
         }
      }}
   ],
github withspectrum / spectrum / src / components / rich-text-editor / Embed.js View on Github external
export const addEmbed = (editorState, attrs) => {
  const urlType = 'embed';
  const entityKey = Entity.create(urlType, 'IMMUTABLE', {
    src: (attrs && attrs.url) || null,
    aspectRatio: attrs && attrs.aspectRatio,
    width: attrs && attrs.width,
    height: attrs && attrs.height,
  });
  const newEditorState = AtomicBlockUtils.insertAtomicBlock(
    editorState,
    entityKey,
    ' '
  );
  return EditorState.forceSelection(
    newEditorState,
    editorState.getCurrentContent().getSelectionAfter()
  );
};
github researchspace / researchspace / researchspace / web / src / main / components / annotations / AnnotationTextEditorComponent.ts View on Github external
changeTemplateFromBlockToInline() {
    let data = this.props.semanticToEdit.getData();
    data.selectedTemplateIndex = 'inline';
    const newInlineEntityKey = Entity.create('SEMANTIC-INLINE', 'MUTABLE', data);
    this.setState({waitingForSemanticWithEntityKey: newInlineEntityKey}, () => {
      const {editor} = this.props;
      const {block} = this.props.semanticToEdit.props;
      const initialState = editor.state.editorState;
      const labelStream = Kefir.zip([
        getLabel(Rdf.iri(data.iri)).take(1),
        constructUrlForResource(Rdf.iri(data.iri)).take(1),
      ]);
      const onGotLabel = ([label, url]) => {
        labelStream.offValue(onGotLabel);
        Entity.mergeData(newInlineEntityKey, {href: url.valueOf()});

        const selection = makeBlockInnerSelection(block.getKey(), 0, block.getLength());
        const modifiedBlockContent = Modifier.setBlockType(initialState.getCurrentContent(), selection, 'unstyled');
        const afterSetTextContent = Modifier.replaceText(modifiedBlockContent, selection, label, null, newInlineEntityKey);