Nice Package, Mate

    @doc-tools/yfm-editor
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published

    @doc-tools/yfm-editor · npm package CI storybook

    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 @doc-tools/transform@2 @gravity-ui/uikit@3 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

    Install

    npm i @doc-tools/yfm-editor

    DownloadsWeekly Downloads

    60

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    842 kB

    Total Files

    855

    Last publish

    Collaborators

    • martyanov-av
    • moki
    • yc-ui-robot
    • yfm-team
    • monsterzz
    • buran
    • yndx-birman111