vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-03 22:37:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #21352 from unindented/draft-js

Browse Source 
Expose RawContentState internals for draft-js 0.10
This commit is contained in:
Nathan Shively-Sanders
2017-11-20 13:06:52 -08:00
committed by GitHub
parent 6762f912a8 eace09b77e
commit 661e7136a7
2 changed files with 124 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
types/draft-js/draft-js-tests.tsx
+32 -2
View File
@@ -12,7 +12,17 @@ import {
SelectionState,
getDefaultKeyBinding,
ContentState,
convertFromHTML
RawDraftInlineStyleRange,
RawDraftEntityRange,
RawDraftEntity,
RawDraftContentBlock,
RawDraftContentState,
DraftBlockType,
DraftInlineStyleType,
DraftEntityMutability,
DraftEntityType,
convertFromHTML,
convertToRaw
} from 'draft-js';
const SPLIT_HEADER_BLOCK = 'split-header-block';
@@ -274,7 +284,7 @@ var INLINE_STYLES = [
const InlineStyleControls = (props: {editorState: EditorState, onToggle: (blockType: string) => void}) => {
var currentStyle = props.editorState.getCurrentInlineStyle();
return (
return (
<div className="RichEditor-controls">
{INLINE_STYLES.map(type =>
<StyleButton
@@ -293,3 +303,23 @@ ReactDOM.render(
<RichEditorExample />,
document.getElementById('target')
);
const editorState = EditorState.createEmpty();
const contentState = editorState.getCurrentContent();
const rawContentState: RawDraftContentState = convertToRaw(contentState);
rawContentState.blocks.forEach((block: RawDraftContentBlock) => {
block.entityRanges.forEach((entityRange: RawDraftEntityRange) => {
const { key, offset, length } = entityRange;
const entity: RawDraftEntity = rawContentState.entityMap[key];
const entityType: DraftEntityType = entity.type;
const entityMutability: DraftEntityMutability = entity.mutability;
console.log(entityType, entityMutability, offset, length);
});
block.inlineStyleRanges.forEach((inlineStyleRange: RawDraftInlineStyleRange) => {
const { offset, length } = inlineStyleRange
const inlineStyle: DraftInlineStyleType = inlineStyleRange.style;
console.log(inlineStyle, offset, length);
});
});
types/draft-js/index.d.ts
Vendored
+92 -50
View File
@@ -262,9 +262,10 @@ declare namespace Draft {
* or block types.
*/
"bold" |
"italic" |
"underline" |
"code" |
"italic" |
"strikethrough" |
"underline" |
/**
* Split a block in two.
@@ -328,6 +329,60 @@ declare namespace Draft {
* another fragment or if the selected fragment shall be replaced
*/
type DraftInsertionType = "replace" | "before" | "after";
/**
* Valid inline styles.
*/
type DraftInlineStyleType = (
"BOLD" |
"CODE" |
"ITALIC" |
"STRIKETHROUGH" |
"UNDERLINE"
)
/**
* Default entity types.
*/
type ComposedEntityType = (
"LINK" |
"TOKEN" |
"PHOTO" |
"IMAGE"
)
/**
* Possible entity types.
*/
type DraftEntityType = string | ComposedEntityType;
/**
* Possible "mutability" options for an entity. This refers to the behavior
* that should occur when inserting or removing characters in a text range
* with an entity applied to it.
*
* `MUTABLE`:
* The text range can be modified freely. Generally used in cases where
* the text content and the entity do not necessarily have a direct
* relationship. For instance, the text and URI for a link may be completely
* different. The user is allowed to edit the text as needed, and the entity
* is preserved and applied to any characters added within the range.
*
* `IMMUTABLE`:
* Not to be confused with immutable data structures used to represent the
* state of the editor. Immutable entity ranges cannot be modified in any
* way. Adding characters within the range will remove the entity from the
* entire range. Deleting characters will delete the entire range. Example:
* Facebook Page mentions.
*
* `SEGMENTED`:
* Segmented entities allow the removal of partial ranges of text, as
* separated by a delimiter. Adding characters wihin the range will remove
* the entity from the entire range. Deleting characters within a segmented
* entity will delete only the segments affected by the deletion. Example:
* Facebook User mentions.
*/
type DraftEntityMutability = "MUTABLE" | "IMMUTABLE" | "SEGMENTED";
}
namespace Decorators {
@@ -408,14 +463,24 @@ declare namespace Draft {
}
namespace Encoding {
import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
import DraftBlockType = Draft.Model.Constants.DraftBlockType;
import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
import DraftEntityType = Draft.Model.Constants.DraftEntityType;
import ContentBlock = Draft.Model.ImmutableData.ContentBlock;
import ContentState = Draft.Model.ImmutableData.ContentState;
import DraftBlockRenderMap = Draft.Component.Base.DraftBlockRenderMap;
import DraftBlockType = Draft.Model.Constants.DraftBlockType;
import DraftEntityType = Draft.Model.Entity.DraftEntityType;
import DraftEntityMutability = Draft.Model.Entity.DraftEntityMutability;
/**
* A plain object representation of an inline style range.
*/
interface RawDraftInlineStyleRange {
style: DraftInlineStyleType;
offset: number;
length: number;
}
/**
* A plain object representation of an entity attribution.
@@ -423,21 +488,12 @@ declare namespace Draft {
* The `key` value corresponds to the key of the entity in the `entityMap` of
* a `ComposedText` object, not for use with `DraftEntity.get()`.
*/
interface EntityRange {
interface RawDraftEntityRange {
key: number,
offset: number,
length: number,
}
/**
* A plain object representation of an inline style range.
*/
interface InlineStyleRange {
style: string;
offset: number;
length: number;
}
/**
* A plain object representation of an EntityInstance.
*/
@@ -456,8 +512,8 @@ declare namespace Draft {
type: DraftBlockType;
text: string;
depth: number;
inlineStyleRanges: Array<InlineStyleRange>;
entityRanges: Array<EntityRange>;
inlineStyleRanges: Array<RawDraftInlineStyleRange>;
entityRanges: Array<RawDraftEntityRange>;
data?: Object;
}
@@ -481,36 +537,8 @@ declare namespace Draft {
}
namespace Entity {
type ComposedEntityType = "LINK" | "TOKEN" | "PHOTO";
type DraftEntityType = string | ComposedEntityType;
/**
* An enum representing the possible "mutability" options for an entity.
* This refers to the behavior that should occur when inserting or removing
* characters in a text range with an entity applied to it.
*
* `MUTABLE`:
* The text range can be modified freely. Generally used in cases where
* the text content and the entity do not necessarily have a direct
* relationship. For instance, the text and URI for a link may be completely
* different. The user is allowed to edit the text as needed, and the entity
* is preserved and applied to any characters added within the range.
*
* `IMMUTABLE`:
* Not to be confused with immutable data structures used to represent the
* state of the editor. Immutable entity ranges cannot be modified in any
* way. Adding characters within the range will remove the entity from the
* entire range. Deleting characters will delete the entire range. Example:
* Facebook Page mentions.
*
* `SEGMENTED`:
* Segmented entities allow the removal of partial ranges of text, as
* separated by a delimiter. Adding characters wihin the range will remove
* the entity from the entire range. Deleting characters within a segmented
* entity will delete only the segments affected by the deletion. Example:
* Facebook User mentions.
*/
type DraftEntityMutability = "MUTABLE" | "IMMUTABLE" | "SEGMENTED";
import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
import DraftEntityType = Draft.Model.Constants.DraftEntityType;
/**
* A "document entity" is an object containing metadata associated with a
@@ -579,10 +607,10 @@ declare namespace Draft {
namespace ImmutableData {
import DraftBlockType = Draft.Model.Constants.DraftBlockType;
import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
import DraftEntityType = Draft.Model.Constants.DraftEntityType;
import DraftEntityType = Draft.Model.Entity.DraftEntityType;
import DraftEntityMutability = Draft.Model.Entity.DraftEntityMutability;
import DraftDecoratorType = Draft.Model.Decorators.DraftDecoratorType;
type DraftInlineStyle = Immutable.OrderedSet<string>;
type BlockMap = Immutable.OrderedMap<string, Draft.Model.ImmutableData.ContentBlock>;
@@ -938,6 +966,10 @@ import RichUtils = Draft.Model.Modifier.RichTextEditorUtil;
import DefaultDraftBlockRenderMap = Draft.Model.ImmutableData.DefaultDraftBlockRenderMap;
import DefaultDraftInlineStyle = Draft.Model.ImmutableData.DefaultDraftInlineStyle;
import RawDraftInlineStyleRange = Draft.Model.Encoding.RawDraftInlineStyleRange;
import RawDraftEntityRange = Draft.Model.Encoding.RawDraftEntityRange;
import RawDraftEntity = Draft.Model.Encoding.RawDraftEntity;
import RawDraftContentBlock = Draft.Model.Encoding.RawDraftContentBlock;
import RawDraftContentState = Draft.Model.Encoding.RawDraftContentState;
import convertFromRaw = Draft.Model.Encoding.convertFromRawToDraftState;
import convertToRaw = Draft.Model.Encoding.convertFromDraftStateToRaw;
@@ -950,6 +982,9 @@ import getVisibleSelectionRect = Draft.Component.Selection.getVisibleSelectionRe
import DraftEditorCommand = Draft.Model.Constants.DraftEditorCommand;
import DraftDragType = Draft.Model.Constants.DraftDragType;
import DraftBlockType = Draft.Model.Constants.DraftBlockType;
import DraftInlineStyleType = Draft.Model.Constants.DraftInlineStyleType;
import DraftEntityMutability = Draft.Model.Constants.DraftEntityMutability;
import DraftEntityType = Draft.Model.Constants.DraftEntityType;
import DraftRemovalDirection = Draft.Model.Constants.DraftRemovalDirection;
import DraftHandleValue = Draft.Model.Constants.DraftHandleValue;
import DraftInsertionType = Draft.Model.Constants.DraftInsertionType;
@@ -979,6 +1014,10 @@ export {
DefaultDraftBlockRenderMap,
DefaultDraftInlineStyle,
RawDraftInlineStyleRange,
RawDraftEntityRange,
RawDraftEntity,
RawDraftContentBlock,
RawDraftContentState,
convertFromRaw,
convertToRaw,
@@ -991,6 +1030,9 @@ export {
DraftEditorCommand,
DraftDragType,
DraftBlockType,
DraftInlineStyleType,
DraftEntityType,
DraftEntityMutability,
DraftRemovalDirection,
DraftHandleValue,
DraftInsertionType,