Open jimkk159 opened 1 year ago
@jimkk159 I'm not sure what target you need to access?
Hello @jaywcjlove
I want to implement the drag and drop feacture in my project。
By dino3616 kindly provide his example for image upload like https://github.com/uiwjs/react-md-editor/issues/83#issuecomment-1185471844
➜ This provide the way to access the editor.
➜ But if there are multiple textarea
, it might select the wrong react-md-editor
.
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
However, when it comes to DnD(drag and drop), it comes two problems:
api
to myref
of React.If I have multiple react-md-editor
, how can I know which api
is for which editor?
➜ 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
?
@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.
Hello @jaywcjlove
The codesandbox link is here
➜This example is just button click to upload image and DnD image.
The DnD image might in the wrong place like gif. I think it can be fixed by using TextAreaTextApi
.
Button | DnD |
---|---|
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
)
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.
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.
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.
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 \