Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] React custom component not working properly #687

Closed
2 tasks done
hsirkar opened this issue Aug 23, 2022 · 3 comments
Closed
2 tasks done

[Bug] React custom component not working properly #687

hsirkar opened this issue Aug 23, 2022 · 3 comments
Assignees
Labels
bug Something isn't working

Comments

@hsirkar
Copy link

hsirkar commented Aug 23, 2022

Initial checklist

  • I agree to follow the code of conduct
  • I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected packages and versions

6.3.2

Link to runnable example

https://codesandbox.io/s/ecstatic-fermat-p87923?file=/src/App.js

Steps to reproduce

Follow the Custom Component for Node guide from docs:

import React from 'react';
import { Editor, rootCtx } from '@milkdown/core';
import { ReactEditor, useEditor, useNodeCtx } from '@milkdown/react';
import { commonmark, paragraph, image } from '@milkdown/preset-commonmark';

const CustomParagraph = ({ children }) => (
    <div className="react-paragraph">{children}</div>
);

const CustomImage = ({ children }) => {
    const { node } = useNodeCtx();

    return (
        <img
            className="react-image"
            src={node.attrs.src}
            alt={node.attrs.alt}
            title={node.attrs.title}
        />
    );
};

export const MilkdownEditor = () => {
    const {editor} = useEditor((root, renderReact) => {
        const nodes = commonmark
            .configure(paragraph, { view: renderReact(CustomParagraph) })
            .configure(image, { view: renderReact(CustomImage) });

        return Editor.make()
            .config(ctx => {
                ctx.set(rootCtx, root);
            })
            .use(nodes);
    });

    return <ReactEditor editor={editor} />;
};

export default MilkdownEditor;

Expected behavior

We should be able to type in editor and edit as normal. Pressing enter after typing some words should go to the next line.

Actual behavior

Type some words and press enter. The cursor stays on the same line.

New CustomParagraph components are being created but the focus stays on the current component.

Runtime

Firefox, Electron

OS

Windows

Build and bundle tools

Create React App

@hsirkar hsirkar added the bug Something isn't working label Aug 23, 2022
@Saul-Mirone
Copy link
Member

Please don't try to custom basic node such as text and paragraph node for now. It will cause unexpected behavior. It's a know issue but it's a kind of trade off. I'll update the document later.

@Saul-Mirone
Copy link
Member

After reconsidering this issue, I think it's still important for users to do this. I'm working on a new repo called prosemirror-adapter and I'll solve this issue there. After that, milkdown will use the adpater to render react and vue components.

@Saul-Mirone
Copy link
Member

Closing this as it will be resolved by #823.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants