React-realtime-markup-editor NPM

react-realtime-markup-editor

A text document editor which is syntactically formattable in real time
Inspired by Scrapbox

TL;DR

Installation

npm install katex
npm install react-realtime-markup-editor

yarn add katex
yarn add react-realtime-markup-editor

Simplest Usage

import { Editor } from 'react-realtime-markup-editor';
import 'katex/dist/katex.min.css';

const App: React.FC = () => {
  const [text, setText] = React.useState('');
  return <Editor text={text} onChangeText={setText} />;
};

Demo

demo on github pages

Formatting Syntax

Itemizations

bracket-based syntax

style	syntax
item	`␣item`

markdown-like syntax

style	syntax
item	`-item`
item	`*item`

Note
Multiple spaces will provide nested itemizations.

Text Decorations

bracket-based syntax

style	syntax
bold	`[* bold]`
larger	`[** larger]`
largest	`[*** largest]`
italic	`[/ italic]`
underline	`[_ underline]`

Note
Combinations of *, / and _ are available.
Here are some examples:

style	syntax
bold italic	`[/ bold italic]` or `[/ bold italic]`
bold underline	`[_ bold underline]` or `[_ bold underline]`
italic underline	`[/_ italic underline]` or `[_/ italic underline]`

markdown-like syntax

style	syntax
bold	`bold`
larger	`## larger`
largest	`# largest`
italic	`_italic_`

Note
Combinations of * and _ are NOT available yet...

Links

style	syntax
blacket link	`[blacket link]`
tag: tagged link	`[tag: tagged link]`
#hash-tag	`#hash-tag`

Note A space(␣) in a hashtag name will get converted to an underscore(_).

Code Strings

inline code string

style
inline code string
syntax
`inline code string`

block code string

style
```
block code string
```
syntax
```
```
block code string
```
```

Math Formulas

inline math formula

style
syntax
$\int_a^b f(x) \mathrm{d}x$

display math formula

style
syntax
$$\int_a^b f(x) \mathrm{d}x$$

block math formula

style

syntax

$$
A =
\left(
\begin{matrix}
  a_{11} & a_{12} & \cdots & a_{1n} \\
  a_{21} & a_{22} & \cdots & a_{2n} \\
  \vdots & \vdots & \ddots & \vdots \\
  a_{m1} & a_{m2} & \cdots & a_{mn} \\
\end{matrix}
\right)
$$

Quatations

style
quotation
syntax
>quotation

Note

Tagged links are useful when you want to make some link groups
Here are some examples:

Can make [github: @user_name/repository_name] go to

<a href="https://github.com/user_name/repository_name"> @user_name/repository_name </a>

Can make [npm: package_name] go to

<a href="https://www.npmjs.com/package/package_name"> package_name </a>

Can show input suggestions of links
For example, you can provide users with webpage list which may be refered from the document

Public API

name	type	requried/optional	default	description
`text`	`string`	requried	-	syntactic text in `Editor`you will use this like`text={this.state.text}`
`onChangeText`	`(text: string) => void`	requried	-	callback function on `text` changedyou will use this like`onChangeText={(text) => this.setState({ text })}`
`textProps`	`TextProps`	optional	see TextProps	general settings of textdetails: TextProps
`bracketLinkProps`	`BracketLinkProps`	optional	see BracketLinkProps	settings of bracket linksdetails: BracketLinkProps
`hashTagProps`	`HashTagProps`	optional	see HashTagProps	settings of hash tagsdetails: BracketLinkProps
`taggedLinkPropsMap`	`{ [tagName: string]: TaggedLinkProps }`	optional	see TaggedLinkProps	key-value object which maps a tag name to settings of tagged linksdetails: TaggedLinkProps
`codeProps`	`CodeProps`	optional	see CodeProps	settings of code stringsdetails: CodeProps
`formulaProps`	`FormulaProps`	optional	see FormulaProps	settings of math formulasdetails: FormulaProps
`readonly`	`boolean`	optional	`undefined` (falsy)	if `true`, make `text` uneditable
`className`	`string`	optional	`undefined`	className of `Editor`
`style`	`CSSProperties`	optional	`undefined`	style of `Editor`

TextProps

general settings of text

interface TextProps {
  suggestions?: string[];
  initialSuggestionIndex?: number;
}

suggestions: input suggestions of normal texts
default: []
initialSuggestionIndex: index of focusd suggestion when showing the suggestion list
default: 0

BracketLinkProps

settings of bracket links

interface BracketLinkProps {
  anchorProps?: (linkName: string) => React.ComponentProps<'a'>;
  suggestions?: string[];
  initialSuggestionIndex?: number;
  disabled?: boolean;
}

Attributes

anchorProps: given linkName, this function returns props of <a> tag and overridden style on hover
default: undefined
suggestions: input suggestions of bracket links
default: []
initialSuggestionIndex: index of focusd suggestion when showing the suggestion list
default: 0
disabled: if true, syntax of bracket links is ignored
default: undefined (falsy)

HashTagProps

settings of hash tags

interface HashTagProps {
  anchorProps?: (hashTagName: string) => React.ComponentProps<'a'>;
  suggestions?: string[];
  initialSuggestionIndex?: number;
  disabled?: boolean;
}

same as BracketLinkProps

TaggedLinkProps

settings of tagged links

interface TaggedLinkProps {
  linkNameRegex?: RegExp;
  anchorProps?: (linkName: string) => React.ComponentProps<'a'>;
  suggestions?: string[];
  initialSuggestionIndex?: number;
  tagHidden?: boolean;
}

same as BracketLinkProps except linkNameRegex and tagHidden
disabled property doesn't exist since you don't define a tag if you don't need it

Attributes

linkNameRegex: regular expression of link names. This MUST be a subset of defaultLinkNameRegex = /[^[\]]+/
If tagged link does not match the pattern, [tag: tagged link] will be a BRACKET LINK whose name is tag: tagged link
default: defaultLinkNameRegex
tagHidden: if true, [tag: tagged link] goes to <a>tagged link</a> instead of <a>tag: tagged link</a>

Default

export const defaultLinkNameRegex = /[^[\]]+/;

you can import defaultLinkNameRegex by adding

import { defaultLinkNameRegex } from 'react-realtime-markup-editor';

CodeProps

settings of code strings

interface CodeProps {
  codeProps?: (code: string) => React.ComponentProps<'code'>;
  disabled?: boolean;
}

Attributes

codeProps: given code, this function returns props of <code> tag
default: undefined
disabled: if true, syntax of code strings is ignored
default: undefined (falsy)

FormulaProps

settings of math formulas

interface FormulaProps {
  spanProps?: (formula: string) => React.ComponentProps<'span'>;
  disabled?: boolean;
}

Attributes

spanProps: given formula, this function returns props of <formula> tag
default: undefined
disabled: if true, syntax of math formulas is ignored
default: undefined (falsy)