feat(YfmTable): rework table controls – add drag-n-drop, rows and columns insertion (#831)

Author: d3m1d0v

demo/stories/examples/yfm-table-dnd/YfmTableDnD.stories.tsx

@@ -0,0 +1,16 @@
+import type {StoryObj} from '@storybook/react';
+
+import {YfmTableDnDDemo as component} from './YfmTableDnD';
+
+export const Story: StoryObj<typeof component> = {
+    args: {
+        mobile: false,
+        dnd: true,
+    },
+};
+Story.storyName = "YFM Table D'n'D";
+
+export default {
+    title: "Examples / YFM Table D'n'D",
+    component,
+};

demo/stories/examples/yfm-table-dnd/YfmTableDnD.tsx

@@ -0,0 +1,47 @@
+import {memo} from 'react';
+
+import {MarkdownEditorView, useMarkdownEditor} from 'src/index';
+
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+
+import {markup} from './markup';
+
+export type YfmTableDnDDemoProps = {
+    mobile: boolean;
+    dnd: boolean;
+};
+
+export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDemo({mobile, dnd}) {
+    const editor = useMarkdownEditor(
+        {
+            mobile,
+            initial: {
+                mode: 'wysiwyg',
+                markup,
+            },
+            wysiwygConfig: {
+                extensionOptions: {
+                    yfmTable: {
+                        dnd,
+                    },
+                },
+            },
+        },
+        [mobile, dnd],
+    );
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                />
+            )}
+        />
+    );
+});