How to use the roosterjs-editor-types.ChangeSource.Format function in roosterjs-editor-types

To help you get started, we’ve selected a few roosterjs-editor-types examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / roosterjs / packages / roosterjs-editor-api / lib / format / setIndentation.ts View on Github external
// There is already list node, setIndentation() will increase/decrease the list level,
            // so we need to process the list when change indentation
            newNode = processList(editor, command);
        } else {
            // No existing list node, browser will create <blockquote> node for indentation.
            // We need to set top and bottom margin to 0 to avoid unnecessary spaces
            editor.getDocument().execCommand(command, false, null);
            editor.queryElements('BLOCKQUOTE', QueryScope.OnSelection, node =&gt; {
                newNode = newNode || node;
                node.style.marginTop = '0px';
                node.style.marginBottom = '0px';
            });
        }

        return newNode;
    }, ChangeSource.Format);
}
</blockquote>
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / table / insertTable.ts View on Github external
editor.focus();
    editor.addUndoSnapshot(() => {
        let vtable = new VTable(table);
        vtable.applyFormat(
            format || {
                bgColorEven: '#FFF',
                bgColorOdd: '#FFF',
                topBorderColor: '#ABABAB',
                bottomBorderColor: '#ABABAB',
                verticalBorderColor: '#ABABAB',
            }
        );
        vtable.writeBack();
        editor.insertNode(fragment);
        editor.runAsync(() => editor.select(new Position(table, PositionType.Begin).normalize()));
    }, ChangeSource.Format);
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / format / setAlignment.ts View on Github external
if (alignment == Alignment.Center) {
        command = DocumentCommand.JustifyCenter;
        align = 'center';
    } else if (alignment == Alignment.Right) {
        command = DocumentCommand.JustifyRight;
        align = 'right';
    }

    editor.addUndoSnapshot(() => {
        execCommand(editor, command);
        editor.queryElements(
            '[align]',
            QueryScope.OnSelection,
            node => (node.style.textAlign = align)
        );
    }, ChangeSource.Format);
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / utils / applyInlineStyle.ts View on Github external
let lastNode: Node;
            let contentTraverser = editor.getSelectionTraverser();
            let inlineElement = contentTraverser && contentTraverser.currentInlineElement;
            while (inlineElement) {
                let nextInlineElement = contentTraverser.getNextInlineElement();
                inlineElement.applyStyle((element, isInnerNode) => {
                    callback(element, isInnerNode);
                    firstNode = firstNode || element;
                    lastNode = element;
                });
                inlineElement = nextInlineElement;
            }
            if (firstNode && lastNode) {
                editor.select(firstNode, PositionType.Before, lastNode, PositionType.After);
            }
        }, ChangeSource.Format);
    }
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / format / toggleNumbering.ts View on Github external
export default function toggleNumbering(editor: Editor) {
    editor.focus();
    editor.addUndoSnapshot(
        () => processList(editor, DocumentCommand.InsertOrderedList),
        ChangeSource.Format
    );
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / table / formatTable.ts View on Github external
export default function formatTable(
    editor: Editor,
    format: Partial,
    table?: HTMLTableElement
) {
    table = table || (editor.getElementAtCursor('TABLE') as HTMLTableElement);
    if (table) {
        editor.addUndoSnapshot((start, end) =&gt; {
            let vtable = new VTable(table);
            vtable.applyFormat(format);
            vtable.writeBack();
            editor.focus();
            editor.select(start, end);
        }, ChangeSource.Format);
    }
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / format / removeLink.ts View on Github external
export default function removeLink(editor: Editor) {
    editor.focus();
    editor.addUndoSnapshot((start, end) => {
        editor.queryElements('a[href]', QueryScope.OnSelection, unwrap);
        editor.select(start, end);
    }, ChangeSource.Format);
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / utils / toggleTagCore.ts View on Github external
nodes.some(node => UNWRAPPABLE_NODES.indexOf(getTagOfNode(node)) >= 0)
                ) {
                    nodes = [splitBalancedNodeRange(nodes)];
                }
            }

            result = wrapFunction(nodes);
            (styler || DEFAULT_STYLER)(result);
        }

        if (!editor.select(start, end) && result) {
            editor.select(result);
        }

        return result;
    }, ChangeSource.Format);
}
github microsoft / roosterjs / packages / roosterjs-editor-api / lib / format / insertImage.ts View on Github external
reader.onload = (event: ProgressEvent) => {
        if (!editor.isDisposed()) {
            editor.addUndoSnapshot(() => {
                let image = editor.getDocument().createElement('img');
                image.src = (event.target as FileReader).result as string;
                image.style.maxWidth = '100%';
                editor.insertNode(image);
            }, ChangeSource.Format);
        }
    };
    reader.readAsDataURL(imageFile);
github microsoft / roosterjs-react / packages / roosterjs-react-command-bar / lib / components / RoosterCommandBar.tsx View on Github external
private _fileInputOnChange = (): void => {
        const { roosterCommandBarPlugin, imageManager } = this.props;

        const editor: Editor = roosterCommandBarPlugin.getEditor();
        const file = this._fileInput.files[0];
        if (editor && !editor.isDisposed() && file) {
            if (imageManager) {
                const placeholder = imageManager.upload(editor, file);
                editor.insertNode(placeholder);
                editor.triggerContentChangedEvent(ChangeSource.Format);
                editor.addUndoSnapshot();
            } else {
                insertImage(editor, file);
            }
            this._fileInput.value = "";
        }
    };