react-realtime-markup-editor v0.29.0
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
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} />;
};
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 liketext={this.state.text} |
onChangeText | (text: string) => void | requried | - | callback function on text changedyou will use this likeonChangeText={(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 = /[^[\]]+/
Iftagged link
does not match the pattern,[tag: tagged link]
will be a BRACKET LINK whose name istag: 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)
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago