Skip to main content

IframeExtension

Summary

This extension adds iframe-based embeds to your text editor.

Features

Add iframe embeds

Any page can be embedded into the editor as an iframe:

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

Add Youtube embeds

The extension provides a shortcut to embed Youtube videos:

const AddYoutubeButton = () => {
const commands = useCommands();
const handleClick = () => commands.addYouTubeVideo({ video: 'Zi7sRMcJT-o', startAt: 450 });
return <button onClick={handleClick}>Add video</button>;
};

Resizable embeds

Users can resize the embeds via drag handles if enableResizing attribute is enabled:

import { Remirror } from '@remirror/react';

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

return <Remirror manager={manager} />;
};

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { IframeExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-embed package.

Examples

Source code
import 'remirror/styles/all.css';

import React, {
ChangeEventHandler,
FormEventHandler,
MouseEventHandler,
useCallback,
useState,
} from 'react';
import { IframeExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';

const AddIframeButton = () => {
const { addIframe } = useCommands();
const [href, setHref] = useState<string>('https://remirror.io');

const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
setHref(e.target.value);
}, []);

const handleMouseDown: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
e.preventDefault();
}, []);

const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(e) => {
e.preventDefault();
addIframe({ src: href, height: 250, width: 500 });
setHref('');
},
[addIframe, href],
);

return (
<form onSubmit={handleSubmit}>
<input type='url' placeholder='Enter link...' value={href} onChange={handleChange} required />
<button type='submit' onMouseDown={handleMouseDown}>
Add iframe
</button>
</form>
);
};

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

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

export default Basic;
Source code
import 'remirror/styles/all.css';

import React, {
ChangeEventHandler,
FormEventHandler,
MouseEventHandler,
useCallback,
useState,
} from 'react';
import { IframeExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';

const AddIframeButton = () => {
const { addIframe } = useCommands();
const [href, setHref] = useState<string>('https://remirror.io');

const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
setHref(e.target.value);
}, []);

const handleMouseDown: MouseEventHandler<HTMLButtonElement> = useCallback((e) => {
e.preventDefault();
}, []);

const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
(e) => {
e.preventDefault();
addIframe({ src: href, height: 250, width: 500 });
setHref('');
},
[addIframe, href],
);

return (
<form onSubmit={handleSubmit}>
<input type='url' placeholder='Enter link...' value={href} onChange={handleChange} required />
<button type='submit' onMouseDown={handleMouseDown}>
Add iframe
</button>
</form>
);
};

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

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

export default Resizable;
Source code
import 'remirror/styles/all.css';

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

const AddYoutubeButton = () => {
const commands = useCommands();
const handleClick = () => commands.addYouTubeVideo({ video: 'Zi7sRMcJT-o', startAt: 450 });
return (
<button onMouseDown={(event) => event.preventDefault()} onClick={handleClick}>
Add video
</button>
);
};

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

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

export default Youtube;

API