DGMFloatingToolbarHolder

The holder component for a floating toolbar which is shown near selected shapes.

Here is an example how to mount floating toolbar to the editor.

import { Editor } from "@dgmjs/core";
import { DGMEditorCore, DGMFloatingToolbarHolder } from "@dgmjs/react";

function MyFloatingToolbar() {
  return <div>my toolbar</div>;
}

function Editor() {
  const [editor, setEditor] = useState<Editor | null>(null);
  return (
    <DGMEditorCore
      onMount={(editor) => setEditor(editor)}
    >
      <DGMFloatingToolbarHolder
        editor={editor as Editor}
        toolbar={<MyFloatingToolbar/>}
      />
    </DGMEditorCore>
  }
}

Properties

Prop	Type	Default
editor	Editor
toolbar	React.ReactNode
distance	number
onMove	(onBelow: boolean) => void