How to use the draft-js.SelectionState 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 Foundry376 / Mailspring / app / internal_packages / composer / lib / linkify-plugin.jsx View on Github external
isBackward: false,
            hasFocus: true,
          });
          return EditorState.set(editorState, {
            currentContent: Modifier.applyEntity(
              editorState.getCurrentContent(),
              entityRange,
              null
            ),
          });
        }
      }

      // There is no entity beneath the current word, but it looks like a URL. Linkify it!
      if (!currentLinkEntityKey && currentWordIsURL) {
        const entityRange = new SelectionState({
          anchorOffset: currentWordStart,
          anchorKey: cursorBlockKey,
          focusOffset: currentWordEnd,
          focusKey: cursorBlockKey,
          isBackward: false,
          hasFocus: false,
        });
        let newEditorState = editorStateSettingLink(editorState, entityRange, {
          explicit: false,
          url: currentWord,
        });

        // reset selection to the initial cursor to avoid selecting the entire links
        newEditorState = EditorState.acceptSelection(newEditorState, selection);
        return newEditorState;
      }
github Simon-Initiative / authoring-client / src / data / content / learning / contiguous.ts View on Github external
replaceEntity(key: string, type: string, mutable: boolean, data: Object, text: string) {

    // Remove the current entity
    let model = this.removeEntity(key);

    // Find the entity in question
    const matched = getAllEntities(this.content).filter(e => e.entityKey === key);
    if (matched.length === 1) {

      // Now update the text
      const rawSelection = new SelectionState({
        anchorKey: matched[0].range.contentBlock.getKey(),
        focusKey: matched[0].range.contentBlock.getKey(),
        anchorOffset: matched[0].range.start,
        focusOffset: matched[0].range.end,
      });
      let selection = new TextSelection(rawSelection);
      model = model.with({ content: Modifier.replaceText(model.content, rawSelection, text) });

      // Adjust the selection to account for potential differences the length of
      // the original vs replacement text.
      const originalLength = (matched[0].range.end - matched[0].range.start);
      selection = selection.merge({
        focusOffset:
          selection.getFocusOffset() - (originalLength - text.length),
      });
github draft-js-plugins / draft-js-plugins / draft-js-drag-n-drop-upload-plugin / src / modifiers / replaceBlock.js View on Github external
export default function(editorState, blockKey, newType) {
  let content = editorState.getCurrentContent();

  const targetRange = new SelectionState({
    anchorKey: blockKey,
    anchorOffset: 0,
    focusKey: blockKey,
    focusOffset: 1,
  });

  // change the blocktype and remove the characterList entry with the block
  content = Modifier.setBlockType(content, targetRange, newType);

  // force to new selection
  const newState = EditorState.push(editorState, content, 'modify-block');
  return EditorState.forceSelection(newState, editorState.getSelection());
}
github strapi / strapi / packages / strapi-plugin-content-manager / admin / src / components / Wysiwyg / index.js View on Github external
: replace(content, 'textToReplace', selectedText);
    const newBlock = createNewBlock(defaultContent);
    const newContentState = this.createNewContentStateFromBlock(newBlock);
    const { anchorOffset, focusOffset } = getDefaultSelectionOffsets(
      defaultContent,
      startReplacer,
      endReplacer
    );
    let newEditorState = this.createNewEditorState(
      newContentState,
      defaultContent
    );
    const updatedSelection =
      getOffSets(this.getSelection()).start === 0
        ? this.getSelection().merge({ anchorOffset, focusOffset })
        : new SelectionState({
            anchorKey: newBlock.getKey(),
            anchorOffset,
            focusOffset,
            focusKey: newBlock.getKey(),
            isBackward: false,
          });

    newEditorState = EditorState.acceptSelection(
      newEditorState,
      updatedSelection
    );

    return this.setState({
      editorState: EditorState.forceSelection(
        newEditorState,
        newEditorState.getSelection()
github Simon-Initiative / authoring-client / src / editors / content / common / draft / commands / common.ts View on Github external
export function stateFromKey(key: string) : SelectionState {
  return new SelectionState({
    anchorKey: key,
    focusKey: key,
    anchorOffset: 0,
    focusOffset: 1,
  });
}
github Simon-Initiative / authoring-client / src / editors / content / common / draft / keyhandlers / backspace.ts View on Github external
function removeRange(
  contentState: ContentState, start: number, end: number, key: string) : ContentState {

  const rangeToRemove = new SelectionState({
    anchorKey: key,
    anchorOffset: start,
    focusKey: key,
    focusOffset: end,
    isBackwards: false,
    hasFocus: false,
  });

  return Modifier.removeRange(
    contentState,
    rangeToRemove,
    'forward',
  );
}
github YozhikM / draft-regex / index.js View on Github external
function createSelectionState(key) {
  var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
  var end = arguments[2];

  return new _draftJs.SelectionState({
    anchorKey: key,
    anchorOffset: start,
    focusKey: key,
    focusOffset: end || start,
  });
}
github LessWrong2 / Lesswrong2 / packages / lesswrong / components / async / editor-plugins / sidenote-plugin / index.js View on Github external
const hilightSidenote = (editorState, setEditorState) => {
  const cursorLocation = DraftLocation.fromEditorState(editorState)
  const characters = cursorLocation.getBlock().getCharacterList()
  const entityKey = cursorLocation.getEntityKey()
  const startOffset = cursorLocation.offset;
  let endOffset = startOffset;

  while (endOffset < characters.size &&
         characters.get(endOffset).getEntity() === entityKey) {
    endOffset++;
  }

  const nextSelection = new SelectionState({
    anchorKey: cursorLocation.blockKey,
    anchorOffset: startOffset,
    focusKey: cursorLocation.blockKey,
    focusOffset: endOffset,
    isBackward: false,
    hasFocus: editorState.getSelection().getHasFocus()
  });

  setEditorState(
    EditorState.forceSelection(editorState, nextSelection)
  )
}
github brijeshb42 / medium-draft / src / plugins / imageblockPlugin.ts View on Github external
}
        );
      } else {
        newBlockKey = Draft.genKey();
        newEditorState = addNewBlockAt(
          editorState,
          currentBlockKey,
          Block.IMAGE, {
            src,
            uploading: true,
          },
          newBlockKey,
        );
      }

      setEditorState(Draft.EditorState.forceSelection(newEditorState, new Draft.SelectionState({
        focusKey: newBlockKey,
        anchorKey: newBlockKey,
        focusOffset: 0,
      })));

      const uploadImage = (options && options.uploadImage) ? options.uploadImage : dummyUploadImage;
      uploadImage(imageFiles).then((images) => {
        const editorState = getEditorState();
        const block = editorState.getCurrentContent().getBlockForKey(newBlockKey);
        newEditorState = updateDataOfBlock(editorState, block, {
          src: images[0],
        });
        URL.revokeObjectURL(src);
        setEditorState(newEditorState);
      }).catch(() => {
        const editorState = getEditorState();