Skip to main content
Version: 1.14.0

Customization

You can customize each plugin by adding configuration options to the plugin's creator function.

For instance:

import { useMemo } from "react";
import { withReact } from "slate-react";
import { withHistory } from "slate-history";

import {
createTazeEditor
} from "@taze-editor/taze-core";

import {
createSearchHighlightPlugin
} from "@taze-editor/taze-plugin-search-highlight";

const CustomComponent = ({ attributes }) => <div {...attributes} />

export const App = () => {

const editor = useMemo(() =>
withReact(
withHistory(
createTazeEditor({
plugins: [
// -> pass options inside the plugin creator function
createSearchHighlightPlugin({
onChange: (editor, store) => (value) => {
// ...
},
component: CustomComponent,
options: {
hotkey: "mod+shift+x"
},
type: "my-custom-type"
})
]
})
)
),
[]);

return (
// ...
);
};

Using Hotkeys

  • Taze Editor uses is-hotkey to handle shortcuts.