remirror/remirror

View on GitHub
packages/storybook-react/stories/extension-embed/resizable.tsx

Summary

Maintainability
A
3 hrs
Test Coverage
F
0%
import 'remirror/styles/all.css';

import React from 'react';
import { IframeExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';

const AddIframeButton = () => {
  const commands = useCommands();
  const handleClick = () =>
    commands.addIframe({ src: 'https://remirror.io/', height: 250, width: 500 });
  return (
    <button onMouseDown={(event) => event.preventDefault()} onClick={handleClick}>
      Add iframe
    </button>
  );
};

const Resizable: React.FC = () => {
  const { manager } = useRemirror({
    extensions: () => [new IframeExtension({ enableResizing: true })],
  });

  return (
    <ThemeProvider>
      <Remirror manager={manager} autoRender='end'>
        <AddIframeButton />
      </Remirror>
    </ThemeProvider>
  );
};

export default Resizable;