1409

import React from "react"
import RichTextEditor from "react-rte"
import { EditorInterface } from "./EditorInterface"

type Props = EditorInterface

export class WysiwygEditor extends React.Component<
  Props,
  {
    value: any
  }
> {
  toolbarConfig = {
    // Optionally specify the groups to display (displayed in the order listed).
    display: [
      "INLINE_STYLE_BUTTONS",
      "BLOCK_TYPE_BUTTONS",
      "LINK_BUTTONS",
      "BLOCK_TYPE_DROPDOWN"
      // "HISTORY_BUTTONS"
    ],
    INLINE_STYLE_BUTTONS: [
      { label: "Bold", style: "BOLD", className: "custom-css-class" },
      { label: "Italic", style: "ITALIC" },
      { label: "Underline", style: "UNDERLINE" }
    ],
    BLOCK_TYPE_DROPDOWN: [
      { label: "--", style: "unstyled" },
      { label: "H1", style: "header-one" },
      { label: "H2", style: "header-two" },
      { label: "H3", style: "header-three" }
    ],
    BLOCK_TYPE_BUTTONS: [
      { label: "UL", style: "unordered-list-item" },
      { label: "OL", style: "ordered-list-item" }
    ]
  }

  constructor(props: any) {
    super(props)
    this.state = {
      value: RichTextEditor.createValueFromString(
        props.initialValue || "",
        "markdown"
      )
    }
  }

  render() {
    return (
      <RichTextEditor
        spellCheck={false}
        toolbarConfig={this.toolbarConfig}
        value={this.state.value}
        onChange={(value: any) => {
          this.setState({ value })
          this.props.onChange(value.toString("markdown"))
        }}
        rootStyle={{
          height: "99%",
          overflow: "auto",
          backgroundColor: "rgb(252, 252, 252)",
          color: "#111"
        }}
      />
    )
  }
}

1	import React from "react"	×
2	import RichTextEditor from "react-rte"	×
3	import { EditorInterface } from "./EditorInterface"
4
5	type Props = EditorInterface
6
7	export class WysiwygEditor extends React.Component<	×
8	Props,
9	{
10	value: any
11	}
12	> {
13	toolbarConfig = {	×
14	// Optionally specify the groups to display (displayed in the order listed).
15	display: [
16	"INLINE_STYLE_BUTTONS",
17	"BLOCK_TYPE_BUTTONS",
18	"LINK_BUTTONS",
19	"BLOCK_TYPE_DROPDOWN"
20	// "HISTORY_BUTTONS"
21	],
22	INLINE_STYLE_BUTTONS: [
23	{ label: "Bold", style: "BOLD", className: "custom-css-class" },
24	{ label: "Italic", style: "ITALIC" },
25	{ label: "Underline", style: "UNDERLINE" }
26	],
27	BLOCK_TYPE_DROPDOWN: [
28	{ label: "--", style: "unstyled" },
29	{ label: "H1", style: "header-one" },
30	{ label: "H2", style: "header-two" },
31	{ label: "H3", style: "header-three" }
32	],
33	BLOCK_TYPE_BUTTONS: [
34	{ label: "UL", style: "unordered-list-item" },
35	{ label: "OL", style: "ordered-list-item" }
36	]
37	}
38
39	constructor(props: any) {
40	super(props)	×
41	this.state = {	×
42	value: RichTextEditor.createValueFromString(
43	props.initialValue \|\| "",	×
44	"markdown"
45	)
46	}
47	}
48
49	render() {
50	return (	×
51	<RichTextEditor
52	spellCheck={false}
53	toolbarConfig={this.toolbarConfig}
54	value={this.state.value}
55	onChange={(value: any) => {
56	this.setState({ value })	×
57	this.props.onChange(value.toString("markdown"))	×
58	}}
59	rootStyle={{
60	height: "99%",
61	overflow: "auto",
62	backgroundColor: "rgb(252, 252, 252)",
63	color: "#111"
64	}}
65	/>
66	)
67	}
68	}

mizchi / next-editor / 1409

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous