Node Packaged Modules

    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)

    Install

    npm i react-realtime-markup-editor

    DownloadsWeekly Downloads

    6

    Version

    0.29.0

    License

    MIT

    Unpacked Size

    618 kB

    Total Files

    198

    Last publish

    Collaborators

    • kumachan