Add a simple ToolbarMediaEmbed based on the ToolbarImage

ROADMAP.md

@@ -71,7 +71,7 @@ Here is our roadmap to have a complete rich-text editor.
     - [ ] Supports all features of regular lists by reusing ActionItem.
 - [x] MediaEmbed – Enables support for embeddable media such as YouTube
       or Vimeo videos, Instagram posts and tweets or Google Maps.
-  - [ ] MediaEmbedToolbar – Provides an optional toolbar for media embed
+  - [x] MediaEmbedToolbar – Provides an optional toolbar for media embed
         that shows up when the media element is selected.
   - [x] Insert videos
   - [ ] Balloon to insert, edit, delete

packages/elements/media-embed-ui/src/ToolbarMediaEmbed/ToolbarMediaEmbed.fixtures.tsx

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+
+import * as React from 'react';
+import { SPEditor } from '@udecode/plate-core';
+import { jsx } from '@udecode/plate-test-utils';
+
+jsx;
+
+export const input1 = ((
+  <editor>
+    <hp>
+      test
+      <cursor />
+    </hp>
+  </editor>
+) as any) as SPEditor;
+
+export const input2 = ((
+  <editor>
+    <hp>
+      test
+      <cursor />
+    </hp>
+  </editor>
+) as any) as SPEditor;
+
+export const output2 = (
+  <editor>
+    <hp>
+      test
+      <cursor />
+    </hp>
+  </editor>
+) as any;

packages/elements/media-embed-ui/src/ToolbarMediaEmbed/ToolbarMediaEmbed.spec.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import * as core from '@udecode/plate-core';
+import { ELEMENT_H1 } from '@udecode/plate-heading';
+import { createImagePlugin } from '@udecode/plate-image';
+import { Plate } from '../../../../core/src/components/Plate';
+import { createPlateOptions } from '../../../../plate/src/utils/createPlateOptions';
+import { ToolbarMediaEmbed } from './ToolbarMediaEmbed';
+import { input1, input2, output2 } from './ToolbarMediaEmbed.fixtures';
+
+const plugins = [createImagePlugin()];
+
+describe('ToolbarMediaEmbed', () => {
+  describe('when with url', () => {
+    it('should invoke getUrlImage when provided', () => {
+      jest.spyOn(core, 'useStoreEditorRef').mockReturnValue(input1);
+      jest
+        .spyOn(window, 'prompt')
+        .mockReturnValue('https://i.imgur.com/removed.png');
+
+      const getEmbedUrlMock = jest.fn();
+
+      const { getByTestId } = render(
+        <Plate editor={input1}>
+          <ToolbarMediaEmbed
+            type={ELEMENT_H1}
+            getEmbedUrl={getEmbedUrlMock}
+            icon={null}
+          />
+        </Plate>
+      );
+
+      const element = getByTestId('ToolbarButton');
+      fireEvent.mouseDown(element);
+
+      expect(getEmbedUrlMock).toBeCalledTimes(1);
+    });
+  });
+
+  describe('when without url', () => {
+    it('should render', () => {
+      jest.spyOn(core, 'useStoreEditorRef').mockReturnValue(input2);
+      jest.spyOn(window, 'prompt').mockReturnValue('');
+
+      const { getByTestId } = render(
+        <Plate
+          initialValue={input2.children}
+          plugins={[createImagePlugin()]}
+          options={createPlateOptions()}
+        >
+          <ToolbarMediaEmbed type={ELEMENT_H1} icon={null} />
+        </Plate>
+      );
+
+      const element = getByTestId('ToolbarButton');
+      fireEvent.mouseDown(element);
+
+      expect(input2.children).toEqual(output2.children);
+    });
+  });
+});

packages/elements/media-embed-ui/src/ToolbarMediaEmbed/ToolbarMediaEmbed.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useEventEditorId, useStoreEditorRef } from '@udecode/plate-core';
+import { insertMediaEmbed } from '@udecode/plate-media-embed';
+import { ToolbarButton, ToolbarButtonProps } from '@udecode/plate-toolbar';
+
+export interface ToolbarMediaEmbedProps extends ToolbarButtonProps {
+  /**
+   * Default onMouseDown is getting the embed url by calling this promise before inserting the image.
+   */
+  getEmbedUrl?: () => Promise<string>;
+}
+
+export const ToolbarMediaEmbed = ({
+  getEmbedUrl,
+  ...props
+}: ToolbarMediaEmbedProps) => {
+  const editor = useStoreEditorRef(useEventEditorId('focus'));
+
+  return (
+    <ToolbarButton
+      onMouseDown={async (event) => {
+        if (!editor) return;
+
+        event.preventDefault();
+
+        let url;
+        if (getEmbedUrl) {
+          url = await getEmbedUrl();
+        } else {
+          url = window.prompt('Enter the URL of the embed:');
+        }
+        if (!url) return;
+
+        insertMediaEmbed(editor, { url });
+      }}
+      {...props}
+    />
+  );
+};

packages/elements/media-embed-ui/src/ToolbarMediaEmbed/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './ToolbarMediaEmbed';

packages/elements/media-embed-ui/src/index.ts

@@ -3,3 +3,4 @@
  */
 
 export * from './MediaEmbedElement/index';
+export * from './ToolbarMediaEmbed/index';