This package has been deprecated

Author message:

WARNING: This project has been renamed to react-clay-editor. Install react-clay-editor instead

react-realtime-markup-editor
TypeScript icon, indicating that this package has built-in type declarations

0.29.0 • Public • Published

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
Firefox
Chrome
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
    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
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)

Package Sidebar

Install

npm i react-realtime-markup-editor

Weekly Downloads

87

Version

0.29.0

License

MIT

Unpacked Size

618 kB

Total Files

198

Last publish

Collaborators

  • kumachan