How to set up TextAreaTextApi for specific <MDEditor />?

[jimkk159]

Hello,
I want to use the replaceSelection function of TextAreaTextApi inside my component.
How can I set it up or get access to the target <MDEditor />?

[jaywcjlove]

@jimkk159 I'm not sure what target you need to access?

[jimkk159]

Hello @jaywcjlove

Scenior

I want to implement the drag and drop feacture in my project。

Other example for image upload

By dino3616 kindly provide his example for image upload like #83 (comment)

➜ This provide the way to access the editor.
➜ But if there are multiple textarea, it might select the wrong react-md-editor.

Solution?

However, I figure out that in this example have the solution

  execute: (state, api) => {
    let modifyText = `### ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `### `;
    }
    api.replaceSelection(modifyText);
  },

When user click the title3 button, I can save the api which is TextAreaTextApi in my react ref

➜

api.replaceSelection(modifyText) // I want to use this api on my component

Problem for DnD

However, when it comes to DnD(drag and drop), it comes two problems:

1. I don't have the behavior of clicking the button to trigger the act of saving the api to myref of React.
2. If I have multiple react-md-editor, how can I know which api is for which editor?

Summary

➜ So, The problem is how can I initial the TextAreaTextApi for the target react-md-editor or
how can I get the instance of api form react-md-editor?

[jaywcjlove]

@jimkk159 Yours is a complex application scenario. I don't understand the usage scenario. If you can give a reproducible example, I can understand it better.

[jimkk159]

Hello @jaywcjlove

Example

The codesandbox link is here
➜This example is just button click to upload image and DnD image.

Why

The DnD image might in the wrong place like gif. I think it can be fixed by using TextAreaTextApi.

Button	DnD

Feature

In the "/src/utils/edit" have two function onImageUpload and onImageUpload_DnD，
I want the onImageUpload_DnD can some how access to the TextAreaTextApi as well (like onImageUpload)

Problem

But I don't know how to implement it,
the straightforward solution that I think is to get the TextAreaTextApi in my MyEditor components

I hope this may help.

[jimkk159]

I am not suer if there is someone is also looking for this DnD problem solution.

My current solution is by creating a hidden button to set the textApi into a ref then use it inside the React Component.

It's a stupid way but acceptable.

[RobTS]

I have the same issue right now, scenario is roughly the same as @jimkk159's, too. I'll phrase it in my own words:

Similar to Github, I want users to be able to drop an image into the Markdown Editor and the uploaded link to appear at the current cursor position. The Dropzone can be provided using React Dropzone, the upload logic I will provide myself.

What is missing is a way to add the resulting Markdown at the cursor position, as there seems no way to access the TextArea ref to perform insertTextAtPosition on it. This is what Jim seems to have resolved using his "store textApi in ref on render" workaround.

Preferrably, this could be exported from this library as part of its ref property. Imo, this affects all scenarios where users might want to add content from outside the MDEditor's scope.