react-realtime-markup-editor

react-realtime-markup-editor

A text document editor which is syntactically formattable in real time

• The document editor is inspired by Scrapbox
• Icons made from Icon Fonts is licensed by CC BY 3.0

TL;DR

Installation

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

or

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} />;
};

Browsers support

Firefox	Chrome
last 2 versions	last 2 versions

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
normal	[* normal]
larger	[** larger]
largest	[*** largest]
bold	[* bold]
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
normal	### normal
larger	## larger
largest	# largest
bold	*bold*
italic	_italic_

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

Links

style	syntax
blacket link	[blacket link]
tag: tagged link	[tag: tagged link]
#hashtag	#hashtag

Note

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

2. 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>

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

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
Multiple spaces will provide nested quotations.

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 changed you will use this like onChangeText={(text) => this.setState({ text })}
textProps	TextProps	optional	see TextProps	general settings of text details: TextProps
bracketLinkProps	BracketLinkProps	optional	see BracketLinkProps	settings of bracket links details: BracketLinkProps
hashtagProps	HashtagProps	optional	see HashtagProps	settings of hash tags details: BracketLinkProps
taggedLinkPropsMap	{ [tagName: string]: TaggedLinkProps }	optional	see TaggedLinkProps	key-value object which maps a tag name to settings of tagged links details: TaggedLinkProps
codeProps	CodeProps	optional	see CodeProps	settings of code strings details: CodeProps
formulaProps	FormulaProps	optional	see FormulaProps	settings of math formulas details: FormulaProps
readonly	boolean	optional	undefined (falsy)	if true, make text uneditable
hideMenu	boolean	optional	undefined (falsy)	if true, Syntax Menu is hidden
className	string	optional	undefined	className of Editor
style	CSSProperties	optional	undefined	style of Editor

TextProps

general settings of text

interface TextProps {
  header?: string;
  headerSize?: 'normal' | 'larger' | 'largest';
  lineProps?: (lineIndex: number) => React.ComponentProps<'div'> | undefined;
  suggestions?: string[];
  initialSuggestionIndex?: number;
  normalLabel?: string
  largerLabel?: string;
  largestLabel?: string;;
}

• header: header text of the editor. This text is uneditable by user
  default: undefined (header is not rendered)
• headerSize: font size of header
  default: largest
• anchorProps: given lineIndex, this function returns props of <div> tag
  default: undefined
• suggestions: input suggestions of normal texts
  default: []
• initialSuggestionIndex: index of focusd suggestion when showing the suggestion list
  default: 0
• normalLabel: label name of normal section in Syntax Menu. This is also used as the default section name default: normal
• largerLabel: label name of larger section in Syntax Menu. This is also used as the default section name default: larger
• largestLabel: label name of largest section in Syntax Menu. This is also used as the default section name default: largest

BracketLinkProps

settings of bracket links

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

Attributes

• anchorProps: given linkName and active, this function returns props of <a> tag
  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, active: boolean) => React.ComponentProps<'a'> | undefined;
  suggestions?: string[];
  initialSuggestionIndex?: number;
  disabled?: boolean;
}

same as BracketLinkProps

TaggedLinkProps

settings of tagged links

interface TaggedLinkProps {
  linkNameRegex?: RegExp;
  anchorProps?: (linkName: string, active: boolean) => React.ComponentProps<'a'> | undefined;
  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'> | undefined;
  inlineLabel?: string;
  blockLabel?: string;
  disabled?: boolean;
}

Attributes

• codeProps: given code, this function returns props of <code> tag
  default: undefined
• inlineLabel: label name of inline code in Syntax Menu. This is also used as the default code value default: inline code
• blockLabel: label name of block code in Syntax Menu. This is also used as the default code value default: block code
• 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'> | undefined;
  inlineLabel?: string;
  displayLabel?: string;
  blockLabel?: string;
  disabled?: boolean;
}

Attributes

• spanProps: given formula, this function returns props of <span> tag
  default: undefined
• inlineLabel: label name of inline formula in Syntax Menu. This is also used as the default formula value default: inline formula
• displayLabel: label name of display formula in Syntax Menu. This is also used as the default formula value default: display formula
• blockLabel: label name of block formula in Syntax Menu. This is also used as the default formula value default: block formula
• disabled: if true, syntax of math formulas is ignored
  default: undefined (falsy)