• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript draft-js.EditorState类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中draft-js.EditorState的典型用法代码示例。如果您正苦于以下问题:TypeScript EditorState类的具体用法?TypeScript EditorState怎么用?TypeScript EditorState使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了EditorState类的20个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: toggleBlockStyle

  return function toggleBlockStyle(styleName: string) {
    const { getEditorState, setEditorState } = callbacks;
    const editorState = getEditorState();
    const currentBlock = getSelectedBlock(editorState);
    const blockTypedContent = Modifier.setBlockType(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      styleName
    );

    setEditorState(
      EditorState.push(editorState, blockTypedContent, 'apply-block-type')
    );

  }
开发者ID:react-component,项目名称:editor-utils,代码行数:15,代码来源:getToggleBlockStyleFunc.ts


示例2: onSelect

    onSelect(query: string, text: string) {
        const selection = this.core.getSelection();
        const offset = selection.getAnchorOffset() - 1;
        const content = this.core.getCurrentContent();
        const block_text = content.getBlockForKey(selection.getAnchorKey()).getText();
        const idx = block_text.lastIndexOf(query, offset);

        if (idx === -1 || (idx + query.length < offset)) {
            log.error('Invalid selection:', selection);
            return this;
        }

        const next_selection = selection.merge({
            anchorOffset: idx,
            focusOffset: idx + query.length,
        }) as SelectionState;
        const next_content = Modifier.replaceText(content, next_selection, text);
        const next_editor = EditorState.forceSelection(
            EditorState.push(
                this.core,
                next_content,
                'insert-characters'
            ),
            next_content.getSelectionAfter()
        );

        return new TweetEditorState(
            next_editor,
            this.is_open,
            this.keymaps,
            this.in_reply_to_status
        );
    }
开发者ID:DevenLu,项目名称:YourFukurou,代码行数:33,代码来源:tweet_editor.ts


示例3:

export const getSelectionDetails = (editorState: EditorState) => {
  // Returns some commonly used selection attrs
  const selection = editorState.getSelection()
  const content = editorState.getCurrentContent()

  const anchorKey = selection.getAnchorKey()
  const anchorOffset = selection.getAnchorOffset()
  const anchorBlock = content.getBlockForKey(anchorKey)
  const anchorType = anchorBlock.getType()

  const beforeKey = content.getKeyBefore(anchorKey)
  const blockBefore = content.getBlockForKey(beforeKey)

  const isFirstBlock = !blockBefore
  const isFirstCharacter = selection.getStartOffset() === 0
  const isLastBlock = content.getLastBlock().getKey() === anchorKey
  const isLastCharacter = selection.getStartOffset() === anchorBlock.getLength()

  return {
    anchorKey,
    anchorOffset,
    anchorType,
    isFirstBlock,
    isFirstCharacter,
    isLastBlock,
    isLastCharacter,
  }
}
开发者ID:artsy,项目名称:positron,代码行数:28,代码来源:selection.ts


示例4: removeHighlight

export function removeHighlight(editorState, styleName) {
    const highlightsState = getHighlightsState(editorState);

    if (highlightsState.highlightsData[styleName] === undefined) {
        return editorState;
    }

    const nextHighlightsStyleMap = {...highlightsState.highlightsStyleMap};

    delete nextHighlightsStyleMap[styleName];

    const nextHighlightsData = {...highlightsState.highlightsData};

    delete nextHighlightsData[styleName];

    const newHighlightsState = {
        lastHighlightIds: highlightsState.lastHighlightIds,
        highlightsStyleMap: nextHighlightsStyleMap,
        highlightsData: nextHighlightsData,
    };

    let newEditorState = clearInlineStyles(
        editorState,
        getDraftSelectionForEntireContent(editorState),
        [styleName],
    );

    // prevent recording the changes to undo stack so user doesn't have to undo twice
    // for the highlight deletion to be completelly(both inline styles and related data) undone
    newEditorState = EditorState.set(newEditorState, {allowUndo: false});
    newEditorState = setHighlightsState(newEditorState, newHighlightsState);
    newEditorState = EditorState.set(newEditorState, {allowUndo: true});

    return newEditorState;
}
开发者ID:jerome-poisson,项目名称:superdesk-client-core,代码行数:35,代码来源:highlights.ts


示例5: changeEditorSelection

export function changeEditorSelection(editorState, startOffset, endOffset, force) {
    const selection = editorState.getSelection();
    const {block: startBlock, newOffset: newStartOffset} = getBlockAndOffset(
        editorState, selection, startOffset, false);
    const {block: endBlock, newOffset: newEndOffset} = getBlockAndOffset(
        editorState, selection, endOffset, true);

    if (startBlock == null || endBlock == null) {
        return editorState;
    }

    const newSelection = selection.merge({
        anchorOffset: newStartOffset,
        anchorKey: startBlock.getKey(),
        focusOffset: newEndOffset,
        focusKey: endBlock.getKey(),
        isBackward: false,
    });

    if (force) {
        return EditorState.forceSelection(editorState, newSelection);
    }

    return EditorState.acceptSelection(editorState, newSelection);
}
开发者ID:jerome-poisson,项目名称:superdesk-client-core,代码行数:25,代码来源:highlights.ts


示例6:

export const removeBlocks = (editorState: EditorState) => {
  return Modifier.setBlockType(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    "unstyled"
  )
}
开发者ID:joeyAghion,项目名称:positron,代码行数:7,代码来源:utils.ts


示例7: setTextToEditor

 setTextToEditor(text: string) {
     return EditorState.moveSelectionToEnd(
         EditorState.push(
             this.core,
             ContentState.createFromText(text),
             'insert-characters'
         )
     );
 }
开发者ID:DevenLu,项目名称:YourFukurou,代码行数:9,代码来源:tweet_editor.ts


示例8: addHighlight

 (start, end) => {
     editorState = EditorState.acceptSelection(editorState, selection.merge({
         isBackward: false,
         anchorOffset: start,
         focusOffset: end,
     }));
     editorState = addHighlight(editorState, type, data, single);
     editorState = EditorState.push(editorState, editorState.getCurrentContent(), 'change-block-data');
     editorState = EditorState.acceptSelection(editorState, selection);
 });
开发者ID:jerome-poisson,项目名称:superdesk-client-core,代码行数:10,代码来源:highlights.ts


示例9: initEditorState

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
}
开发者ID:TrystalNet,项目名称:draftjs,代码行数:11,代码来源:editor.ts


示例10: modifyInlineStyle

export function modifyInlineStyle(
  editor: EditorState, selection: SelectionState, {apply, remove}: {apply?: string, remove?: string}
) {
  let content = editor.getCurrentContent()
  if (remove) {
    content = Modifier.removeInlineStyle(content, selection, remove)
  }
  if (apply) {
    content = Modifier.applyInlineStyle(content, selection, apply)
  }

  return EditorState.push(editor, content, 'change-inline-style')
}
开发者ID:Pajn,项目名称:meltdown,代码行数:13,代码来源:editor-syntax-highlighting.ts


示例11:

export const insertPastedState = (
  pastedState: EditorState,
  editorState: EditorState
) => {
  const blockMap = pastedState.getCurrentContent().getBlockMap()

  // Merge blockMap from pasted text into existing content
  const modifiedContent = Modifier.replaceWithFragment(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    blockMap
  )
  // Create a new editorState from merged content
  return EditorState.push(editorState, modifiedContent, "insert-fragment")
}
开发者ID:artsy,项目名称:positron,代码行数:15,代码来源:shared.ts


示例12: getCurrentEntity

export default function getCurrentEntity(editorState: EditorState) {
  let entity;
  const selection = editorState.getSelection();
  let start = selection.getStartOffset();
  let end = selection.getEndOffset();
  if (start === end && start === 0) {
    end = -1;
  } else if (start === end) {
    start = start - 1;
  }
  const block = getSelectedBlock(editorState);
  for (let i = start; i < end; i++) {
    const currentEntity = block.getEntityAt(i);
    if (!currentEntity) {
      entity = undefined;
      break;
    }
    if (i === start) {
      entity = currentEntity;
    } else {
      if (entity !== currentEntity) {
        entity = undefined;
        break;
      }
    }
  }
  return entity;
}
开发者ID:react-component,项目名称:editor-utils,代码行数:28,代码来源:getCurrentEntity.ts


示例13: flipIfBackwards

  .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],
    })
  })
开发者ID:Pajn,项目名称:meltdown,代码行数:30,代码来源:document.ts


示例14: getCurrentInlineStyle

export default function getCurrentInlineStyle(editorState: EditorState) {
  if (editorState === inlineStyleCache.editorState) {
    return inlineStyleCache.value;
  }
  inlineStyleCache.editorState = editorState;
  inlineStyleCache.value = editorState.getCurrentInlineStyle();
  return inlineStyleCache.value;
}
开发者ID:react-component,项目名称:editor-utils,代码行数:8,代码来源:getCurrentInlineStyle.ts


示例15: addEditorStateToObject

export function addEditorStateToObject(shape: PubShape) {
  const contentState = stateFromHTML(shape.text, {
    customInlineFn: importTextStyle,
  });
  shape.editorState = EditorState.createWithContent(contentState);
  shape.isEditing = false;
  return shape;
}
开发者ID:carlospaelinck,项目名称:publications-js,代码行数:8,代码来源:documents.ts


示例16: getContentState

export const getEditorState = (
  html,
  hasLinks = true,
  blockMap = richTextBlockRenderMap
) => {
  const contentState = getContentState(html, hasLinks, blockMap)
  return EditorState.createWithContent(contentState, decorators(hasLinks))
}
开发者ID:joeyAghion,项目名称:positron,代码行数:8,代码来源:test_helpers.ts


示例17: clearEditor

 clearEditor() {
     return new TweetEditorState(
         EditorState.createEmpty(editorDecolator),
         this.is_open,
         this.keymaps,
         null
     );
 }
开发者ID:DevenLu,项目名称:YourFukurou,代码行数:8,代码来源:tweet_editor.ts


示例18:

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

      return Draft.EditorState.createWithContent(content)
    }
开发者ID:artsy,项目名称:positron,代码行数:9,代码来源:shared.test.ts


示例19: updateStyles

export function updateStyles(editor: EditorState) {
  const key = editor.getSelection().getFocusKey()
  const content = editor.getCurrentContent()
  const block = content.getBlockForKey(key)
  const ast = parser.parse(block.getText())

  let updatedBlock: ContentBlock
  let updatedContent: ContentState
  if (ast.firstChild === ast.lastChild && ast.firstChild) {
    const node = ast.firstChild

    if (node.type === 'Heading') {
      const type = headerType[ast.firstChild.level] || 'unstyled'

      updatedBlock = maybeSet(block, type)
    } else if (node.type === 'BlockQuote') {
      updatedBlock = maybeSet(block, 'blockquote')
    // } else if (node.type === 'Paragraph' && node.firstChild !== node.lastChild) {
    //   updatedContent = updateInlineStyles(content, block.getKey(), node)
    } else {
      updatedBlock = maybeSet(block, 'unstyled')
    }
    /// goal question metiric, victor basili
    /// Program slicing, component based systems
  } else {
    updatedBlock = maybeSet(block, 'unstyled')
  }

  if (updatedBlock) {
    updatedContent = content.setIn(['blockMap', key], updatedBlock)
  }
  if (updatedContent) {
    const selection = editor.getSelection()
    updatedContent = updatedContent.merge({
      selectionBefore: selection,
      selectionAfter: selection,
    })

    return EditorState.push(editor, updatedContent, 'change-block-type')
  }

  return editor
}
开发者ID:Pajn,项目名称:meltdown,代码行数:43,代码来源:editor-syntax-highlighting.ts


示例20: describe

  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())
    })
  })
开发者ID:artsy,项目名称:positron,代码行数:54,代码来源:selection.test.ts



注:本文中的draft-js.EditorState类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript draft-js.Modifier类代码示例发布时间:2022-05-25
下一篇:
TypeScript draft-js.ContentState类代码示例发布时间:2022-05-25
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap