-
-
Notifications
You must be signed in to change notification settings - Fork 148
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
Input value to a execute function #521
Comments
@jimkk159 https://codesandbox.io/embed/react-md-editor-custom-toolbars-forked-vtjpxs?fontsize=14&hidenavigation=1&theme=dark import React, { useState } from "react";
import MDEditor, {
commands,
ICommand,
TextState,
TextAreaTextApi
} from "@uiw/react-md-editor";
import { GroupOptions } from "@uiw/react-md-editor/esm/commands/group";
function SubChildren({ close, execute, getState, textApi, dispatch }: any) {
const [value, setValue] = useState("");
const insert = () => {
console.log("value:::", value);
textApi.replaceSelection(value);
};
return (
<div style={{ width: 120, padding: 10 }}>
<div>My Custom Toolbar</div>
<input type="text" onChange={(e) => setValue(e.target.value)} />
<button
type="button"
onClick={() => {
dispatch({ $value: "~~~~~~" });
console.log("> execute: >>>>>", getState());
}}
>
State
</button>
<button type="button" onClick={insert}>
Insert
</button>
<button type="button" onClick={() => close()}>
Close
</button>
<button type="button" onClick={() => execute()}>
Execute
</button>
</div>
);
}
const groupExample: GroupOptions = {
name: "update",
groupName: "update",
icon: (
<svg viewBox="0 0 1024 1024" width="12" height="12">
<path
fill="currentColor"
d="M716.8 921.6a51.2 51.2 0 1 1 0 102.4H307.2a51.2 51.2 0 1 1 0-102.4h409.6zM475.8016 382.1568a51.2 51.2 0 0 1 72.3968 0l144.8448 144.8448a51.2 51.2 0 0 1-72.448 72.3968L563.2 541.952V768a51.2 51.2 0 0 1-45.2096 50.8416L512 819.2a51.2 51.2 0 0 1-51.2-51.2v-226.048l-57.3952 57.4464a51.2 51.2 0 0 1-67.584 4.2496l-4.864-4.2496a51.2 51.2 0 0 1 0-72.3968zM512 0c138.6496 0 253.4912 102.144 277.1456 236.288l10.752 0.3072C924.928 242.688 1024 348.0576 1024 476.5696 1024 608.9728 918.8352 716.8 788.48 716.8a51.2 51.2 0 1 1 0-102.4l8.3968-0.256C866.2016 609.6384 921.6 550.0416 921.6 476.5696c0-76.4416-59.904-137.8816-133.12-137.8816h-97.28v-51.2C691.2 184.9856 610.6624 102.4 512 102.4S332.8 184.9856 332.8 287.488v51.2H235.52c-73.216 0-133.12 61.44-133.12 137.8816C102.4 552.96 162.304 614.4 235.52 614.4l5.9904 0.3584A51.2 51.2 0 0 1 235.52 716.8C105.1648 716.8 0 608.9728 0 476.5696c0-132.1984 104.8064-239.872 234.8544-240.2816C258.5088 102.144 373.3504 0 512 0z"
/>
</svg>
),
children: (props) => <SubChildren {...props} />,
execute: (state: commands.TextState, api: commands.TextAreaTextApi) => {
console.log(">>>>>>update>>>>>", state);
},
buttonProps: { "aria-label": "Insert title" }
};
export default function App() {
const [value, setValue] = React.useState("**Hello world!!!**");
return (
<div className="container">
<div>The system automatically sets the theme</div>
<MDEditor
value={value}
onChange={(val) => {
setValue(val!);
}}
commands={[
// Custom Toolbars
commands.group(
[
commands.title1,
commands.title2,
commands.title3,
commands.title4
],
{
name: "title",
groupName: "title",
buttonProps: { "aria-label": "Insert title" }
}
),
commands.divider,
commands.group([], groupExample)
]}
/>
</div>
);
} |
jaywcjlove
added a commit
that referenced
this issue
May 18, 2023
Great!! Using a insert btn to implement the behavior |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
By example on "update" button
Now, I want to embed a yt video link and do something at the exectue function
I wonder if there is a solution to input a value (here, is a video link) to the execute function
below is my current solution to get the value
The text was updated successfully, but these errors were encountered: