@doc-tools/yfm-editor ·

YFM WYSIWYG Editor

Preview: https://preview.yandexcloud.dev/yfm-editor/

Install

npm install @doc-tools/yfm-editor

Ensure that peer dependencies are installed in your project

npm install react@17 react-dom@17 @diplodoc/transform@4 @gravity-ui/uikit@5 @gravity-ui/components@2 lodash@4

Usage

import {
    YfmEditor,
    BasePreset,
    BehaviorPreset,
    MarkdownBlocksPreset,
    MarkdownMarksPreset,
    YfmPreset,
} from '@doc-tools/yfm-editor';

const domElem = document.querySelector('#editor');

const editor = new YfmEditor({
    domElem,
    linkify: true,
    allowHTML: false,
    extensions: (builder) =>
        builder
            .use(BasePreset, {})
            .use(BehaviorPreset, {})
            .use(MarkdownBlocksPreset, {image: false, heading: false})
            .use(MarkdownMarksPreset, {})
            .use(YfmPreset, {}),
    onDocChange: () => {
        console.log('The contents of the editor have been changed');
    },
});

// Serialize current content in YFM
editor.getValue();

Usage with React

import React from 'react';
import {
    Extension,
    BasePreset,
    BehaviorPreset,
    MarkdownBlocksPreset,
    MarkdownMarksPreset,
    useYfmEditor,
    YfmEditorComponent,
    YfmPreset,
} from '@doc-tools/yfm-editor';

export function Editor({initialContent}) {
    const extensions = React.useMemo<Extension>(
        () => (builder) =>
            builder
                .use(BasePreset, {})
                .use(BehaviorPreset, {})
                .use(MarkdownBlocksPreset, {image: false, heading: false})
                .use(MarkdownMarksPreset, {})
                .use(YfmPreset, {}),
        [],
    );

    const editor = useYfmEditor({
        linkify: true,
        allowHTML: false,
        extensions,
        initialContent,
    });

    // Serialize current content in YFM
    editor.getValue();

    return <YfmEditorComponent autofocus editor={editor} />;
}

Development

To start the dev storybook

npm run dev