TypeScript draft-js.CharacterMetadata类代码示例

  .when(createComment, (state: DocumentState, {text}) => {
    const selection = flipIfBackwards(state.editor.getSelection())
    const id = state.comments.length
    const entityKey = Entity.create('Comment', 'MUTABLE', {id})
    let content = state.editor.getCurrentContent()
    if (selection.getAnchorKey() === selection.getFocusKey()) {
      const start = selection.getAnchorOffset()
      const end = selection.getFocusOffset()
      let block = content.getBlockForKey(selection.getAnchorKey())
      let chars = block.getCharacterList()

      for (let i = start; i < end; i++) {
        let metadata = chars.get(i)
        metadata = CharacterMetadata.applyEntity(metadata, entityKey)
        metadata = CharacterMetadata.applyStyle(metadata, 'comment')
        chars = chars.set(i, metadata)
      }

      block = block.set('characterList', chars)
      content = content.set('blockMap', content.getBlockMap().set(block.getKey(), block))
    }

    const comment = {id, entityKey, selection, text}

    return Object.assign({}, state, {
      editor: EditorState.push(state.editor, content, 'apply-entity'),
      creatingComment: null,
      comments: [...state.comments, comment],
    })
  })

export default function getEntityRanges(text: string, charMetaList: CharacterMetaList): Array<EntityRange> {
	let charEntity: any = null;
	let prevCharEntity: any = null;
	let ranges: Array<EntityRange> = [];
	let rangeStart = 0;
	for (let i = 0, len = text.length; i < len; i++) {
		prevCharEntity = charEntity;
		let meta: CharacterMetadata = charMetaList.get(i);
		charEntity = meta ? meta.getEntity() : null;
		if (i > 0 && charEntity !== prevCharEntity) {
			ranges.push([
				prevCharEntity,
				getStyleRanges(
					text.slice(rangeStart, i),
					charMetaList.slice(rangeStart, i)
				),
			]);
			rangeStart = i;
		}
	}
	ranges.push([
		charEntity,
		getStyleRanges(
			text.slice(rangeStart),
			charMetaList.slice(rangeStart)
		),
	]);
	return ranges;
}

  contentBlocks = contentBlocks.reduce(function (contentBlocks, block) {
    if (block.getType() !== 'blockquote') {
      return contentBlocks.concat(block)
    }
    const image = JSON.parse(block.getText())
    contentState.createEntity('IMAGE-ENTITY', 'IMMUTABLE', image);
    const entityKey = contentState.getLastCreatedEntityKey();
    const charData = CharacterMetadata.create({ entity: entityKey });
    // const blockSpec = Object.assign({ type: 'atomic', text: ' ' }, { entityData })
    // const atomicBlock = createContentBlock(blockSpec)
    // const spacerBlock = createContentBlock({});

    const fragmentArray = [
      new ContentBlock({
        key: genKey(),
        type: 'image-block',
        text: ' ',
        characterList: List(Repeat(charData, charData.count())),
      }),
      new ContentBlock({
        key: genKey(),
        type: 'unstyled',
        text: '',
        characterList: List(),
      }),
    ];

    return contentBlocks.concat(fragmentArray);
  }, []);

const createContentBlock = ( blockData: DraftEntityInstance, contentState: ContentState) => {
  const {key, type, text, data, inlineStyles, entityData} = blockData;
  let blockSpec = {
    type: type != null ? type : 'unstyled',
    text: text != null ? text : '',
    key: key != null ? key : genKey(),
    data: null,
    characterList: List([]),
  };

  if (data) {
    blockSpec.data = fromJS(data)
  }

  if (inlineStyles || entityData) {
    let entityKey;
    if (entityData) {
      const {type, mutability, data} = entityData;
      contentState.createEntity(type, mutability, data);
      entityKey = contentState.getLastCreatedEntityKey();
    } else {
      entityKey = null
    }
    const style = OrderedSet(inlineStyles || [])
    const charData = CharacterMetadata.create({style, entityKey} as CharacterMetadataConfig)
    blockSpec.characterList = List(Repeat(charData, text.length))
  }
  return new ContentBlock(blockSpec)
}

function changeCommentFocus(content: ContentState, comment: Comment, {focus}: {focus: boolean}) {
  let block = content.getBlockForKey(comment.selection.getAnchorKey())
  let chars = block.getCharacterList()

  for (let i = 0; i < chars.size; i++) {
    let metadata = chars.get(i)
    if (metadata.getEntity() === comment.entityKey) {
      if (focus) {
        metadata = CharacterMetadata.applyStyle(metadata, 'focusedComment')
      } else {
        metadata = CharacterMetadata.removeStyle(metadata, 'focusedComment')
      }
      chars = chars.set(i, metadata)
    }
  }

  block = block.set('characterList', chars)
  return content.set('blockMap', content.getBlockMap().set(block.getKey(), block))
}

const atomicBlock = (data, entity) => new ContentBlock({
    key: genKey(), type: 'atomic', text: ' ',
    characterList: List([CharacterMetadata.create({entity})]),
    data: data,
});

    return blockMap.map(block => {
      let resultText = '<div>';
      let closeTag = '</div>';
      let lastPosition = 0;
      const text = block.getText();
      const blockType = block.getType();
      const blockRender = customBlockRenderMap.get(blockType);
      if (blockRender) {
        const element = typeof blockRender.element === 'function' ? blockRender.elementTag || 'div' : 'div';
        resultText = `<${element || 'div'} style="${getStyleText(customBlockRenderMap.get(blockType).style || {})}">`;
        closeTag = `</${element || 'div'}>`;
      }

      const charMetaList = block.getCharacterList();

      let charEntity = null;
      let prevCharEntity = null;
      let ranges = [];
      let rangeStart = 0;
      for (let i = 0, len = text.length; i < len; i++) {
        prevCharEntity = charEntity;
        let meta: CharacterMetadata = charMetaList.get(i);
        charEntity = meta ? meta.getEntity() : null;
        if (i > 0 && charEntity !== prevCharEntity) {
          ranges.push([
            prevCharEntity,
            getStyleRanges(
              text.slice(rangeStart, i),
              charMetaList.slice(rangeStart, i)
            ),
          ]);
          rangeStart = i;
        }
      }
      ranges.push([
        charEntity,
        getStyleRanges(
          text.slice(rangeStart),
          charMetaList.slice(rangeStart)
        ),
      ]);

      ranges.map(([ entityKey, stylePieces]) => {
        let element = DEFAULT_ELEMENT;
        const rawContent = stylePieces.map(([text]) => text).join('');
        let content = stylePieces.map(([text, styleSet]) => {
          let encodedContent = encodeContent(text);
          if (styleSet.size) {
            let inlineStyle = {};
            styleSet.forEach(item => {
              if (customStyleMap.hasOwnProperty(item)) {
                const currentStyle = customStyleMap[item];
                inlineStyle = Object.assign(inlineStyle, currentStyle);
              }
            });
            const customedStyle = customStyleFn(styleSet);
            inlineStyle = Object.assign(inlineStyle, customedStyle);
            return `<span style="${getStyleText(inlineStyle)}">${encodedContent}</span>`;
          }
          return `<span>${encodedContent}</span>`;
        }).join('');

        if (entityKey) {
          const entity = contentState.getEntity(entityKey);
          const entityData = entity.getData();
          if (entityData && entityData.export) {
            resultText += entityData.export(content, entityData);
          } else {
            let HTMLText = '';
            toHTMLList.forEach(toHTML => {
              const text = toHTML(rawContent, entity, contentState);
              if (text) {
                HTMLText = text;
              }
            });
            if (HTMLText) { resultText += HTMLText }
          }
        } else {
          resultText += content;
        }
      });

      resultText += closeTag;
      return resultText;
    }).join('\n');