slate#Transforms TypeScript Examples
The following examples show how to use
slate#Transforms.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utilities.tsx From payload with MIT License | 7 votes |
wrapLink = (editor: Editor, url?: string, newTab?: boolean): void => {
const { selection, blurSelection } = editor;
if (blurSelection) {
Transforms.select(editor, blurSelection);
}
if (isElementActive(editor, 'link')) {
unwrapLink(editor);
} else {
const selectionToUse = selection || blurSelection;
const isCollapsed = selectionToUse && Range.isCollapsed(selectionToUse);
const link = {
type: 'link',
url,
newTab,
children: isCollapsed ? [{ text: url }] : [],
};
if (isCollapsed) {
Transforms.insertNodes(editor, link);
} else {
Transforms.wrapNodes(editor, link, { split: true });
Transforms.collapse(editor, { edge: 'end' });
}
}
}
Example #2
Source File: block.ts From slate-yjs-example with MIT License | 6 votes |
toggleBlock = (editor: Editor, format: string): void => {
const isActive = isBlockActive(editor, format);
const isList = LIST_TYPES.includes(format);
Transforms.unwrapNodes(editor, {
match: (n) => LIST_TYPES.includes(n.type as any),
split: true,
});
Transforms.setNodes(editor, {
type: isActive ? "paragraph" : isList ? "list-item" : format,
});
if (!isActive && isList) {
const block = { type: format, children: [] };
Transforms.wrapNodes(editor, block);
}
}
Example #3
Source File: RichEditor.tsx From Full-Stack-React-TypeScript-and-Node with MIT License | 6 votes |
toggleBlock = (editor: Editor, format: string) => {
const isActive = isBlockActive(editor, format);
const isList = LIST_TYPES.includes(format);
Transforms.unwrapNodes(editor, {
match: (n) => LIST_TYPES.includes(n.type as string),
split: true,
});
Transforms.setNodes(editor, {
type: isActive ? "paragraph" : isList ? "list-item" : format,
});
if (!isActive && isList) {
const block = { type: format, children: [] };
Transforms.wrapNodes(editor, block);
}
}
Example #4
Source File: transforms.ts From fantasy-editor with MIT License | 6 votes |
toggleBlock = (editor: Editor, format: string) => {
const active = isBlockActive(editor, format);
Transforms.setNodes(
editor,
{
type: active ? 'paragraph' : format,
},
{ split: false },
);
}
Example #5
Source File: Editor.tsx From react-editor-kit with MIT License | 6 votes |
handleKeyUp = (
event: React.KeyboardEvent<HTMLDivElement>,
plugins: Plugin[],
state: EditorState
) => {
const { editor } = state;
const { selection } = editor;
if (!selection) {
return;
}
const [, path] = SlateEditor.node(editor, selection as Location);
if (!path.length) {
return;
}
const [parent] = SlateEditor.parent(editor, path);
if (parent) {
for (let plugin of plugins) {
if (plugin.triggers) {
for (let trigger of plugin.triggers) {
const matches = findMatches(trigger.pattern, editor, trigger.range);
if (matches.length) {
event.preventDefault();
if (trigger.clear == undefined || trigger.clear) {
const range = matches[0].range;
Transforms.delete(editor, { at: range });
}
if (trigger.onMatch) {
trigger.onMatch(state, matches, plugin);
} else if (plugin.actions) {
//If onMatch is not set then execute the default PluginAction
plugin.actions[0].action(state, plugin, { matches });
}
}
}
}
}
}
}
Example #6
Source File: index.tsx From payload with MIT License | 6 votes |
insertButton = (editor, { href, label, style, newTab = false }: any) => {
const text = { text: ' ' };
const button = {
type: 'button',
href,
style,
newTab,
label,
children: [
text,
],
};
const nodes = [button, { children: [{ text: '' }] }];
if (editor.blurSelection) {
Transforms.select(editor, editor.blurSelection);
}
Transforms.insertNodes(editor, nodes);
const currentPath = editor.selection.anchor.path[0];
const newSelection = { anchor: { path: [currentPath + 1, 0], offset: 0 }, focus: { path: [currentPath + 1, 0], offset: 0 } };
Transforms.select(editor, newSelection);
ReactEditor.focus(editor);
}
Example #7
Source File: rich-text.tsx From platyplus with MIT License | 6 votes |
toggleBlock = (editor, format) => {
const isActive = isBlockActive(editor, format)
const isList = LIST_TYPES.includes(format)
Transforms.unwrapNodes(editor, {
match: (n) =>
!Editor.isEditor(n) &&
SlateElement.isElement(n) &&
LIST_TYPES.includes(n.type),
split: true
})
const newProperties: Partial<SlateElement> = {
type: isActive ? 'paragraph' : isList ? 'list-item' : format
}
Transforms.setNodes(editor, newProperties)
if (!isActive && isList) {
const block = { type: format, children: [] }
Transforms.wrapNodes(editor, block)
}
}
Example #8
Source File: client.ts From slate-ot with MIT License | 6 votes |
doc.subscribe((err: any) => {
if (err) {
throw err;
}
e.children = doc.data.children;
console.log(JSON.stringify(e.children));
doc.on('op', (op: Operation | Operation[], options: any) => {
if (options.source === clientId) return;
const ops = Array.isArray(op) ? op : [op];
for (const o of ops) {
console.log(op);
Transforms.transform(e, o);
}
});
e.apply({
type: 'insert_node',
path: [0],
node: { children: [{ text: 'a quick brown fox' }] },
});
});
Example #9
Source File: mappingAdvanced.tsx From ui-schema with MIT License | 6 votes |
mappingAdvanced: ElementMapping = {
// eslint-disable-next-line react/display-name
[pluginOptions.todo_li.type]: ({element, children}) => {
const editor = useSlateStatic()
// @ts-ignore
const {checked} = element
const readOnly = useReadOnly()
return <div contentEditable={false}>
<Checkbox
checked={Boolean(checked)}
onChange={(e) => {
const path = ReactEditor.findPath(editor as ReactEditor, element)
Transforms.setNodes(
editor,
// @ts-ignore
{checked: e.target.checked},
{at: path}
)
}}
disabled={readOnly}
size={'small'}
style={{padding: 4}}
/>
<span
contentEditable={!readOnly}
suppressContentEditableWarning
style={{outline: 0}}
>
{children}
</span>
</div>
},
}
Example #10
Source File: images.component.ts From slate-angular with MIT License | 6 votes |
createImageNode(imgUrl: string) {
const imageNode: ImageElement = {
type: 'image',
url: imgUrl,
children: [
{
text: ''
}
]
}
Transforms.insertNodes(this.editor, imageNode);
}
Example #11
Source File: link.ts From slate-yjs-example with MIT License | 5 votes |
unwrapLink = (editor: Editor): void => {
Transforms.unwrapNodes(editor, { match: (n) => n.type === "link" });
}
Example #12
Source File: button-align.tsx From fantasy-editor with MIT License | 5 votes |
ButtonAlign: FunctionComponent<Props> = props => {
const [visible, setVisible] = useState(false);
const editor = useSlate();
const match = findBlockActive(editor, alignList);
const value: string = match?.[0]?.type || BLOCK_ALIGN_LEFT;
const [mark, setMark] = useState<Range | null>(null);
const onClick = (e: any) => {
e.domEvent.preventDefault();
const selectValue = e.key;
if (selectValue !== value && mark) {
ReactEditor.focus(editor);
Transforms.select(editor, mark);
if (match) {
Transforms.unwrapNodes(editor, {
match: n => n.type === match?.[0]?.type,
split: true,
});
}
Transforms.wrapNodes(editor, {
type: selectValue,
children: [],
});
}
setVisible(false);
};
const show = () => {
const { selection } = editor;
setMark(selection);
setVisible(true);
};
const menu = (
<Menu onClick={onClick} className="fc-btn-align-overlay">
<MenuItem key={BLOCK_ALIGN_LEFT}>
<IconAlignLeft />
</MenuItem>
<MenuItem key={BLOCK_ALIGN_CENTER}>
<IconAlignCenter />
</MenuItem>
<MenuItem key={BLOCK_ALIGN_RIGHT}>
<IconAlignRight />
</MenuItem>
<MenuItem key={BLOCK_ALIGN_JUSTIFY}>
<IconAlignJustify />
</MenuItem>
</Menu>
);
return (
<Dropdown trigger={['click']} overlay={menu} visible={visible} onVisibleChange={setVisible} disabled={isBlockActive(editor, BLOCK_CODE)}>
<DropdownButton width={45} onMouseDown={show} disabled={isBlockActive(editor, BLOCK_CODE)}>
{value === BLOCK_ALIGN_CENTER ? (
<IconAlignCenter />
) : value === BLOCK_ALIGN_RIGHT ? (
<IconAlignRight />
) : value === BLOCK_ALIGN_JUSTIFY ? (
<IconAlignJustify />
) : (
<IconAlignLeft />
)}
</DropdownButton>
</Dropdown>
);
}