0.29.0 • Published 2 years ago

react-realtime-markup-editor v0.29.0

Weekly downloads
47
License
MIT
Repository
github
Last release
2 years ago

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

stylesyntax
item␣item

markdown-like syntax

stylesyntax
item-item
item*item

Note
Multiple spaces will provide nested itemizations.

Text Decorations

bracket-based syntax

stylesyntax
bold[* bold]
larger[** larger]
largest[*** largest]
italic[/ italic]
underline[_ underline]

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

stylesyntax
bold italic[*/ bold italic] or [/* bold italic]
bold underline[*_ bold underline] or [_* bold underline]
italic underline[/_ italic underline] or [_/ italic underline]

markdown-like syntax

stylesyntax
bold*bold*
larger## larger
largest# largest
italic_italic_

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

Links

stylesyntax
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
    inline-mode
  • syntax
    $\int_a^b f(x) \mathrm{d}x$

display math formula

  • style
    display-mode
  • syntax
    $$\int_a^b f(x) \mathrm{d}x$$

block math formula

  • style
    block-mode
  • 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

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

Public API

nametyperequried/optionaldefaultdescription
textstringrequried-syntactic text in Editoryou will use this liketext={this.state.text}
onChangeText(text: string) => voidrequried-callback function on text changedyou will use this likeonChangeText={(text) => this.setState({ text })}
textPropsTextPropsoptionalsee TextPropsgeneral settings of textdetails: TextProps
bracketLinkPropsBracketLinkPropsoptionalsee BracketLinkPropssettings of bracket linksdetails: BracketLinkProps
hashTagPropsHashTagPropsoptionalsee HashTagPropssettings of hash tagsdetails: BracketLinkProps
taggedLinkPropsMap{ [tagName: string]: TaggedLinkProps }optionalsee TaggedLinkPropskey-value object which maps a tag name to settings of tagged linksdetails: TaggedLinkProps
codePropsCodePropsoptionalsee CodePropssettings of code stringsdetails: CodeProps
formulaPropsFormulaPropsoptionalsee FormulaPropssettings of math formulasdetails: FormulaProps
readonlybooleanoptionalundefined (falsy)if true, make text uneditable
classNamestringoptionalundefinedclassName of Editor
styleCSSPropertiesoptionalundefinedstyle 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)
0.29.0

2 years ago

0.27.2

2 years ago

0.27.1

2 years ago

0.27.0

2 years ago

0.28.1

2 years ago

0.28.0

2 years ago

0.26.2

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.28.2

2 years ago

0.25.0

2 years ago

0.24.3

2 years ago

0.24.2

2 years ago

0.24.1

2 years ago

0.23.1

2 years ago

0.23.0

2 years ago

0.24.0

2 years ago

0.22.2

2 years ago

0.22.1

2 years ago

0.22.0

2 years ago

0.20.0

2 years ago

0.21.0

2 years ago

0.19.2

3 years ago

0.19.0

3 years ago

0.18.0

3 years ago

0.17.2

3 years ago

0.17.0

3 years ago

0.17.1

3 years ago

0.16.1

3 years ago

0.15.0

3 years ago

0.15.1

3 years ago

0.16.0

3 years ago

0.14.3

3 years ago

0.13.7

3 years ago

0.14.0

3 years ago

0.14.1

3 years ago

0.14.2

3 years ago

0.13.6

3 years ago

0.13.4

3 years ago

0.13.5

3 years ago

0.13.3

3 years ago

0.13.2

3 years ago

0.13.1

3 years ago

0.13.0

3 years ago

0.12.3

3 years ago

0.12.0

3 years ago

0.12.1

3 years ago

0.12.2

3 years ago

0.11.0

3 years ago

0.10.0

3 years ago

0.9.8

3 years ago

0.9.7

3 years ago

0.9.6

3 years ago

0.9.5

3 years ago

0.9.4

3 years ago

0.9.3

3 years ago

0.9.2

3 years ago

0.9.1

3 years ago

0.9.0

3 years ago

0.8.0

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.0

3 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.5

4 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.2

4 years ago

0.5.0

4 years ago

0.5.1

4 years ago

0.4.0

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago