0.1.28 • Published 4 years ago

@sujen/blocks-editor v0.1.28

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Blocks Editor

A block with all inline styles formatting that spans one line.

Tutorial

  1. Default
<BlockProvider>
  <BlockEditor />
</BlockProvider>
  1. Custom Inline Style
const customInlineStyleMap = {
  bold: { fontWeight: "bold" },
  italic: { color: "#382838" },
  // underline ...
  // code ...
  // strikethrough ...
}

<BlockProvider customInlineStyleMap={customInlineStyleMap}>
  <BlockEditor />
</BlockProvider>
  1. Custom Block Style
const customBlockStyle = {
  color: "#383838",
  backgroundColor: "#ffffff"
}

<BlockProvider customBlockStyle={customBlockStyle}>
  <BlockEditor />
</BlockProvider>
  1. 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

4 years ago

0.1.27

4 years ago

0.1.22

4 years ago

0.1.23

4 years ago

0.1.24

4 years ago

0.1.25

4 years ago

0.1.26

4 years ago

0.1.21

4 years ago

0.1.20

4 years ago

0.1.17

4 years ago

0.1.18

4 years ago

0.1.19

4 years ago

0.1.15

4 years ago

0.1.16

4 years ago

0.1.12

4 years ago

0.1.13

4 years ago

0.1.14

4 years ago

0.1.10

4 years ago

0.1.11

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.4

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.2

4 years ago

0.1.3

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago