TypeScript EditorState.createWithContent方法代码示例

export const getEditorState = (
  html,
  hasLinks = true,
  blockMap = richTextBlockRenderMap
) => {
  const contentState = getContentState(html, hasLinks, blockMap)
  return EditorState.createWithContent(contentState, decorators(hasLinks))
}

export function addEditorStateToObject(shape: PubShape) {
  const contentState = stateFromHTML(shape.text, {
    customInlineFn: importTextStyle,
  });
  shape.editorState = EditorState.createWithContent(contentState);
  shape.isEditing = false;
  return shape;
}

    const getEditorState = html => {
      const blocks = Draft.convertFromHTML(html)
      const content = Draft.ContentState.createFromBlockArray(
        blocks.contentBlocks,
        blocks.entityMap
      )

      return Draft.EditorState.createWithContent(content)
    }

 it("Removes ul", () => {
   const html = "<ul><li>A piece of text.</li></ul>"
   const editorState = applySelectionToEditorState(getEditorState(html))
   const contentWithoutBlocks = removeBlocks(editorState)
   const newState = EditorState.createWithContent(
     contentWithoutBlocks,
     decorators(true)
   )
   const newHtml = getStateAsHtml(newState)
   expect(newHtml).toBe("<p>A piece of text.</p>")
 })

export function initEditorState(trystup='') {
  const {contentState} = renderDraftJS(trystup.trim())
  const specs = [
    {  strategy: findLinkEntities,  component: Link  }, 
    {  strategy: findFieldEntities, component: Field } 
  ]
  const decorators = new CompositeDecorator(specs)
  let editorState = EditorState.createWithContent(contentState, decorators)
  editorState = EditorState.moveSelectionToEnd(editorState) 
  return editorState
}

  describe("#getSelectionDetails", () => {
    const { sections } = StandardArticle
    const sectionBody: string = sections ? (sections[0].body as string) : ""
    const editorContent = convertHtmlToDraft(sectionBody, false, [] as StyleMap)
    let editorState = Draft.EditorState.createWithContent(editorContent)
    lastBlock = editorState.getCurrentContent().getLastBlock()

    it("Knows if selection focus is in first block", () => {
      const selection = getSelectionDetails(editorState)
      expect(selection.isFirstBlock).toBe(true)
      expect(selection.isLastBlock).toBe(false)
    })

    it("Knows if selection focus is in first character of block", () => {
      const selection = getSelectionDetails(editorState)
      expect(selection.isFirstCharacter).toBe(true)
      expect(selection.isLastCharacter).toBe(false)
      expect(selection.anchorOffset).toBe(0)
    })

    it("Knows if selection focus is in last block", () => {
      // Set the selection to last block
      const newSelection = editorState.getSelection().merge({
        anchorKey: lastBlock.key,
        anchorOffset: lastBlock.getLength() - 3,
        focusKey: lastBlock.key,
        focusOffset: lastBlock.getLength(),
      })
      editorState = Draft.EditorState.acceptSelection(
        editorState,
        newSelection as any
      )

      const selection = getSelectionDetails(editorState)
      expect(selection.isLastBlock).toBe(true)
      expect(selection.isFirstBlock).toBe(false)
    })

    it("Knows if selection focus is in last character of block", () => {
      // Set the selection to end of last block
      const newSelection = editorState.getSelection().merge({
        anchorOffset: lastBlock.getLength(),
      })
      editorState = Draft.EditorState.acceptSelection(
        editorState,
        newSelection as any
      )

      const selection = getSelectionDetails(editorState)
      expect(selection.isLastCharacter).toBe(true)
      expect(selection.isFirstCharacter).toBe(false)
      expect(selection.anchorOffset).toBe(lastBlock.getLength())
    })
  })

export function rawToNote(raw) {
  const contentState = convertFromRaw(raw);
  console.log(contentState);
  const editorState = EditorState.createWithContent(contentState as any);
  return editorState;
}

function insertContentInState(
    editorState: EditorState,
    pastedContent: ContentState,
    onChange: (e: EditorState) => void,
    editorFormat: Array<string>): DraftHandleValue {
    let _pastedContent = pastedContent;
    const blockMap = _pastedContent.getBlockMap();
    const hasAtomicBlocks = blockMap.some((block) => block.getType() === 'atomic');
    const acceptedInlineStyles =
        Object.keys(inlineStyles)
            .filter((style) => editorFormat.includes(style))
            .map((style) => inlineStyles[style]);

    let contentState = editorState.getCurrentContent();
    let selection = editorState.getSelection();
    let blocks = [];

    if (hasAtomicBlocks) {
        contentState = Modifier.splitBlock(editorState.getCurrentContent(), editorState.getSelection());
        selection = contentState.getSelectionAfter();
    }

    _pastedContent = sanitizeContent(EditorState.createWithContent(_pastedContent), acceptedInlineStyles)
        .getCurrentContent();

    blockMap.forEach((block) => {
        if (!hasAtomicBlocks || block.getType() !== 'atomic') {
            return blocks.push(block);
        }

        const entityKey = block.getEntityAt(0);
        const entity = _pastedContent.getEntity(entityKey);

        contentState = contentState.addEntity(entity);

        blocks = blocks.concat(
            atomicBlock(block.getData(), contentState.getLastCreatedEntityKey()),
        );
    });

    if (hasAtomicBlocks) {
        contentState = Modifier.setBlockType(contentState, selection, 'atomic');

        blocks = blocks.concat(emptyBlock()); // add empty block to ensure writting afterwards
    }

    const newBlockMap = OrderedMap<string, ContentBlock>(blocks.map((b) => ([b.getKey(), b])));

    let nextEditorState = EditorState.push(
        editorState,
        Modifier.replaceWithFragment(contentState, selection, newBlockMap),
        'insert-fragment',
    );

    const selectionAfterInsert = nextEditorState.getSelection();
    const customData = getAllCustomDataFromEditor(editorState);

    // for the first block recover the initial block data because on replaceWithFragment the block data is
    // replaced with the data from pasted fragment
    nextEditorState = setAllCustomDataForEditor(nextEditorState, customData);

    // reset undo stack
    nextEditorState = EditorState.push(
        editorState,
        nextEditorState.getCurrentContent(),
        'insert-fragment',
    );

    nextEditorState = EditorState.forceSelection(nextEditorState, selectionAfterInsert);

    onChange(nextEditorState);

    return 'handled';
}

    y: 0.25,
    r: 0,
    z: 0,
    width: 1,
    height: 1,
    fill: "#609eeb",
    stroke: "#4e8bda",
    strokeWidth: 1,
    strokeOpacity: 1.0,
    fillOpacity: 1.0,
  },
  Text: {
    id: "0",
    type: PubShapeType.Text,
    x: 0.25,
    y: 0.25,
    r: 0,
    z: 0,
    editorState: EditorState.createWithContent(
      ContentState.createFromText("Double click to insert text")
    ),
    fill: "",
    fillOpacity: 1,
    stroke: "",
    strokeOpacity: 0,
    strokeWidth: 0,
    width: 2,
    height: 1,
  },
};