0.1.28 • Published 3 years ago
@sujen/blocks-editor v0.1.28
Blocks Editor
A block with all inline styles formatting that spans one line.
Tutorial
- Default
<BlockProvider>
<BlockEditor />
</BlockProvider>
- Custom Inline Style
const customInlineStyleMap = {
bold: { fontWeight: "bold" },
italic: { color: "#382838" },
// underline ...
// code ...
// strikethrough ...
}
<BlockProvider customInlineStyleMap={customInlineStyleMap}>
<BlockEditor />
</BlockProvider>
- Custom Block Style
const customBlockStyle = {
color: "#383838",
backgroundColor: "#ffffff"
}
<BlockProvider customBlockStyle={customBlockStyle}>
<BlockEditor />
</BlockProvider>
- Custom Key Binding
const customKeyBindingFn: (e: React.KeyboardEvent) => StyleType = (
e: React.KeyboardEvent
) => {
if (!e.metaKey) {
return;
}
switch (e.key) {
case "a":
return "bold";
case "s":
return "underline";
case "d":
return "italic";
case "f":
return "code";
case "e":
return "strikethrough";
}
};
<BlockProvider customKeyBindingFn={customKeyBindingFn}>
<BlockEditor />
</BlockProvider>;
Block Editor
Optional Arguments
- block: preset input text and styles
- onChange: called with every update of the block
- focus: if the block should be focused
0.1.28
3 years ago
0.1.27
3 years ago
0.1.22
3 years ago
0.1.23
3 years ago
0.1.24
3 years ago
0.1.25
3 years ago
0.1.26
3 years ago
0.1.21
3 years ago
0.1.20
3 years ago
0.1.17
3 years ago
0.1.18
3 years ago
0.1.19
3 years ago
0.1.15
3 years ago
0.1.16
3 years ago
0.1.12
3 years ago
0.1.13
3 years ago
0.1.14
3 years ago
0.1.10
3 years ago
0.1.11
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.4
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.2
3 years ago
0.1.3
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago