Creating a custom editor with toolbar #2170
Replies: 2 comments 1 reply
-
|
hi @rsauchuck-gp const crepe = new Crepe({
root: divRef,
defaultValue: props.initialContent,
featureConfigs: {
[Crepe.Feature.LinkTooltip]: {
// onCopyLink: () => toast("Link copied", "success"),
},
},
});
// Store the Crepe editor instance so we can trigger actions later
const crepeEditor = crepe.editor;Then you can call commands like this: import { commandsCtx, editorStateCtx, schemaCtx } from '@milkdown/kit/core';
import { toggleStrongCommand } from '@milkdown/kit/preset/commonmark';
<button
onmousedown={(e) => {
e.preventDefault(); // Prevent the editor from losing focus/selection
crepeEditor?.action((ctx) =>
ctx.get(commandsCtx).call(toggleStrongCommand.key),
);
}}
>
Bold
</button> |
Beta Was this translation helpful? Give feedback.
-
|
Crepe editor wont work for my needs. That was kind of the whole point. |
Beta Was this translation helpful? Give feedback.
-
|
This is the entrypoint for all common mark plugins. You can But be careful with this scenario, you'll need a remark plugin to filter the unsupported nodes from the remark AST. For example, if your editor don't support image, you'll need to remove image nodes from AST or transform them to plain text or something supported in your editor. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I have a very limited subset of markdown formatting that I would like to make available from a custom toolbar.
bold, italic, ordered list, unordered list, heading level (0 or paragraph), h1, h2, h3) and a save button to take the markdown from the editor and pass it to my react component for saving to the db via drizzle orm
Are there any recipes or example for doing something like this? I have the basic toolbar component UI but cant figure out the commands
Crepe editor wont work for my needs.
Beta Was this translation helpful? Give feedback.
All reactions