in packages/roosterjs-editor-api/lib/format/insertEntity.ts [27:103]
export default function insertEntity(
editor: IEditor,
type: string,
contentNode: Node,
isBlock: boolean,
isReadonly: boolean,
position?: NodePosition | ContentPosition.Begin | ContentPosition.End | ContentPosition.DomEnd
): Entity {
const wrapper = wrap(contentNode, isBlock ? 'DIV' : 'SPAN');
// For inline & readonly entity, we need to set display to "inline-block" otherwise
// there will be some weird behavior when move cursor around the entity node.
// And we should only do this for readonly entity since "inline-block" has some side effect
// in IE that there will be a resize border around the inline-block element. We made some
// workaround for readonly entity for this issue but for editable entity, keep it as "inline"
// will just work fine.
if (!isBlock && isReadonly) {
wrapper.style.display = 'inline-block';
}
commitEntity(wrapper, type, isReadonly);
if (!editor.contains(wrapper)) {
let currentRange: Range;
let contentPosition:
| ContentPosition.Begin
| ContentPosition.End
| ContentPosition.DomEnd
| ContentPosition.SelectionStart;
if (typeof position == 'number') {
contentPosition = position;
} else if (position) {
currentRange = editor.getSelectionRange();
const node = position.normalize().node;
const existingEntity = node && editor.getElementAtCursor(getEntitySelector(), node);
// Do not insert entity into another entity
if (existingEntity) {
position = new Position(existingEntity, PositionType.After);
}
editor.select(position);
contentPosition = ContentPosition.SelectionStart;
} else {
editor.focus();
contentPosition = ContentPosition.SelectionStart;
}
editor.insertNode(wrapper, {
updateCursor: false,
insertOnNewLine: isBlock,
replaceSelection: true,
position: contentPosition,
});
if (contentPosition == ContentPosition.SelectionStart) {
if (currentRange) {
editor.select(currentRange);
} else if (!isBlock) {
editor.select(wrapper, PositionType.After);
}
}
}
if (isBlock) {
// Insert an extra empty line for block entity to make sure
// user can still put cursor below the entity.
const br = editor.getDocument().createElement('BR');
wrapper.parentNode.insertBefore(br, wrapper.nextSibling);
}
const entity = getEntityFromElement(wrapper);
editor.triggerContentChangedEvent(ChangeSource.InsertEntity, entity);
return entity;
}