fix(jsdom): fix conflicts and jsdom

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/index.js', '../stories/**/*.stories.*'],
+};

.storybook/webpack.config.js

@@ -30,8 +30,8 @@ packages.forEach(name => {
   packagesAliases[name] = path.join(__dirname, '..', name, 'src');
 });
 
-module.exports = {
-  module: {
+module.exports = async ({ config }) => {
+  config.module = {
     rules: [
       {
         test: /\.css$/,
@@ -71,15 +71,17 @@ module.exports = {
         use: [{ loader: 'file-loader', options: { name: '[name].[ext]' } }],
       },
     ],
-  },
+  };
 
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],
+  config.resolve = {
     alias: {
       ...packagesAliases,
       react: path.join(__dirname, '..', 'node_modules', 'react'),
       'prop-types': path.join(__dirname, '..', 'node_modules', 'prop-types'),
       lodash: path.join(__dirname, '..', 'node_modules', 'lodash'),
     },
-  },
+    extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],
+  };
+
+  return config;
 };

draft-js-video-plugin/testHelper.js

@@ -11,7 +11,9 @@ hook({
 
 const exposedProperties = ['window', 'navigator', 'document'];
 
-global.document = jsdom('');
+global.document = jsdom('', {
+  url: 'http://localhost',
+});
 global.window = document.defaultView;
 Object.keys(document.defaultView).forEach(property => {
   if (typeof global[property] === 'undefined') {

package.json

@@ -29,7 +29,7 @@
     "@babel/preset-react": "7.10.4",
     "@babel/preset-typescript": "7.10.4",
     "@babel/register": "7.11.5",
-    "@storybook/react": "^5.1.11",
+    "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^10.4.9",
     "@testing-library/react-hooks": "^3.4.1",

stories/adding-images/src/AddImageEditor.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+// @ts-ignore remove it when the file is migrated to ts
+import AddImageEditor from './AddImageEditor';
+
+export default {
+  title: 'Image/Editor with Image Plugin and Add mechanism',
+  component: AddImageEditor,
+} as Meta;
+
+export const Default: Story = () => <AddImageEditor />;

stories/adding-video/src/CustomAddVideoEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CustomAddVideoEditor from './CustomAddVideoEditor';
+
+export default {
+  title: 'Video/Editor with Video Plugin and Add Video Button',
+  component: CustomAddVideoEditor
+} as Meta;
+
+export const Default: Story  = () => <CustomAddVideoEditor />;

stories/align-drag-focus-and-resize-images/src/CustomImageEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import CustomImageEditor from './CustomImageEditor';
+
+export default {
+  title:
+    'Image/Editor With Image Plugin And A Few Others DragAndDrop Alignment Resizable Focus',
+  component: CustomImageEditor,
+} as Meta;
+
+export const Default: Story = () => <CustomImageEditor />;

stories/alignment/src/SimpleAlignmentEditor.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
 import SimpleAlignmentEditor from './SimpleAlignmentEditor';
 
 export default {
-  title: 'EditorWithAlignmentPlugin',
+  title: 'Alignment/Editor With Alignment Plugin',
   component: SimpleAlignmentEditor,
-};
-
-export const EditorWithAlignmentPlugin = () => <SimpleAlignmentEditor />;
+} as Meta;
 
-EditorWithAlignmentPlugin.storyName = 'Editor with Alignment Plugin';
+export const Default: Story = () => <SimpleAlignmentEditor />;

stories/counter-plugin-simple/src/SimpleCounterEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SimpleCounterEditor from './SimpleCounterEditor';
+
+export default {
+  title: 'Counter/Editor With Counter Plugin',
+  component: SimpleCounterEditor,
+} as Meta;
+
+export const Default: Story = () => <SimpleCounterEditor />;

stories/displaying-images/src/SimpleImageEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SimpleImageEditor from './SimpleImageEditor';
+
+export default {
+  title: 'Image/Editor with Image Plugin',
+  component: SimpleImageEditor,
+} as Meta;
+
+export const Default: Story = () => <SimpleImageEditor />;

stories/divider-with-side-toolbar/src/DividerWithSideToolbar.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+// @ts-ignore remove it when the file is migrated to ts
+import DividerWithSideToolbarEditor from './App';
+
+export default {
+  title: 'Divider/Divider with side toolbar',
+  component: DividerWithSideToolbarEditor,
+} as Meta;
+
+export const Default: Story = () => <DividerWithSideToolbarEditor />;

stories/drag-n-drop/src/DragNDropImageEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import DragNDropImageEditor from './DragNDropImageEditor';
+
+export default {
+  title: 'Image/Editor With DragNDrop Plugin And Image Plugin',
+  component: DragNDropImageEditor,
+} as Meta;
+
+export const Default: Story = () => <DragNDropImageEditor />;

stories/emoji-styled/src/CustomEmojiEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CustomEmojiEditor from './CustomEmojiEditor';
+
+export default {
+  title: 'Emoji/Editor with Emoji Plugin using native emojis',
+  component: CustomEmojiEditor
+} as Meta;
+
+export const Default: Story  = () => <CustomEmojiEditor />;

stories/emoji/src/SimpleEmojiEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SimpleEmojiEditor from './SimpleEmojiEditor';
+
+export default {
+  title: 'Emoji/Editor with Emoji Plugin using emoji-one plugins',
+  component: SimpleEmojiEditor,
+} as Meta;
+
+export const Default: Story = () => <SimpleEmojiEditor />;

stories/focus/src/SimpleFocusEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SimpleFocusEditor from './SimpleFocusEditor';
+
+export default {
+  title: 'Focus/Editor with Focus Plugin',
+  component: SimpleFocusEditor,
+} as Meta;
+
+export const Default: Story = () => <SimpleFocusEditor />;

stories/hashtag-styled/src/CustomHashtagEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CustomHashtagEditor from './CustomHashtagEditor';
+
+export default {
+  title: 'Hashtag/Editor with custom themed Hashtag Plugin',
+  component: CustomHashtagEditor,
+} as Meta;
+
+export const Default: Story = () => <CustomHashtagEditor />;

stories/hashtag/src/SimpleHashtagEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SimpleHashtagEditor from './SimpleHashtagEditor';
+
+export default {
+  title: 'Hashtag/Editor with Hashtag Plugin',
+  component: SimpleHashtagEditor,
+} as Meta;
+
+export const Default: Story = () => <SimpleHashtagEditor />;

stories/inline-toolbar-custom-buttons/src/CustomInlineToolbarEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CustomInlineToolbarEditor from './CustomInlineToolbarEditor';
+
+export default {
+  title: 'Inline Toolbar/Editor with inline toolbar plugin containing all buttons',
+  component: CustomInlineToolbarEditor,
+} as Meta;
+
+export const Default: Story = () => <CustomInlineToolbarEditor />;

stories/inline-toolbar-custom-styled/src/ThemedInlineToolbarEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import ThemedInlineToolbarEditor from './ThemedInlineToolbarEditor';
+
+export default {
+  title: 'Inline Toolbar/Editor with custom themed toolbar plugin',
+  component: ThemedInlineToolbarEditor,
+} as Meta;
+
+export const Default: Story = () => <ThemedInlineToolbarEditor />;

stories/inline-toolbar-relative-parent/src/RelativeParentInlineToolbarEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import RelativeParentInlineToolbarEditor from './RelativeParentInlineToolbarEditor';
+
+export default {
+  title: 'Inline Toolbar/Inline Toolbar with relatively positioned parent',
+  component: RelativeParentInlineToolbarEditor,
+} as Meta;
+
+export const Default: Story = () => <RelativeParentInlineToolbarEditor />;

stories/inline-toolbar-with-anchor-plugin/src/AnchorSimpleLinkPluginEditor.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import AnchorSimpleLinkPluginEditor from './AnchorSimpleLinkPluginEditor';
+
+export default {
+  title: 'Anchor/Editor with Anchor Plugin',
+  component: AnchorSimpleLinkPluginEditor,
+} as Meta;
+
+export const Default: Story = () => <AnchorSimpleLinkPluginEditor />;