feat!: added more functionality (#207)

Author: smsochneg

.eslintrc

@@ -8,6 +8,7 @@
     ],
     "plugins": ["lodash"],
     "rules": {
-        "lodash/import-scope": [2, "method"]
+        "lodash/import-scope": [2, "method"],
+        "jsx-a11y/no-autofocus": "warn"
     }
 }

demo/HtmlPreview.tsx

@@ -1,14 +1,52 @@
 import React from 'react';
 
-import type {EditorView} from 'prosemirror-view';
+import {EditorView} from 'prosemirror-view';
+import {useEffectOnce, useUpdate} from 'react-use';
 
-import {ClassNameProps, isNodeSelection, isTextSelection, isWholeSelection} from '../src';
+import {type ClassNameProps, isNodeSelection, isTextSelection, isWholeSelection} from '../src';
+import type {Editor} from '../src/bundle';
 
-export type PMSelectionProps = ClassNameProps & {
+export type WysiwygSelectionProps = ClassNameProps & {
+    editorRef: React.RefObject<Editor>;
+};
+
+export function WysiwygSelection({editorRef, className}: WysiwygSelectionProps) {
+    const rerender = useUpdate();
+    useEffectOnce(() => {
+        rerender();
+    });
+
+    const editor = editorRef.current;
+    const view = editor?.currentType === 'wysiwyg' && editor._wysiwygView;
+
+    React.useLayoutEffect(() => {
+        if (!editor) return undefined;
+        editor.on(
+            // @ts-expect-error TODO: add public event for selection change
+            'rerender-toolbar',
+            rerender,
+        );
+        editor.on('change-editor-type', rerender);
+        return () => {
+            editor.off(
+                // @ts-expect-error TODO: add public event for selection change
+                'rerender-toolbar',
+                rerender,
+            );
+            editor.off('change-editor-type', rerender);
+        };
+    }, [editor, rerender]);
+
+    if (!view) return null;
+
+    return <PMSelection view={view} className={className} />;
+}
+
+type PMSelectionProps = ClassNameProps & {
     view: EditorView;
 };
 
-export function PMSelection({view, className}: PMSelectionProps) {
+function PMSelection({view, className}: PMSelectionProps) {
     const sel = view.state.selection;
     const renderFromTo = () => (
         <>

demo/PMSelection.tsx

@@ -15,30 +15,26 @@
         @include text-header-2();
     }
 
-    &__preview-type {
+    &__version {
         position: absolute;
         right: 0;
         bottom: 0;
-    }
-
-    &__controls {
-        display: flex;
-        align-items: center;
-        column-gap: 8px;
 
-        & > p {
-            margin: 0;
-        }
+        @include text-code-inline-1();
     }
 
     &__markup {
+        overflow-y: auto;
+
+        margin: 0;
+        padding: 5px 10px;
+
         background-color: var(--g-color-base-generic);
     }
 
     &__editor-view {
-        min-height: 100px;
+        min-height: 150px;
         margin: 20px 0;
-        padding-left: 4px;
     }
 
     &__pm-selection {

demo/Playground.scss

@@ -1,25 +1,49 @@
 import React from 'react';
 
-import type {ComponentMeta, Story} from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type {ComponentMeta, Story} from '@storybook/react';
 
 import {Playground as PlaygroundComponent, PlaygroundProps} from './Playground';
+import {parseLocation} from './location';
 import {initialMdContent} from './md-content';
 
 export default {
     title: 'YFM Editor',
+    component: PlaygroundComponent,
 } as ComponentMeta<any>;
 
 type PlaygroundStoryProps = Pick<
     PlaygroundProps,
-    'breaks' | 'allowHTML' | 'linkify' | 'linkifyTlds'
+    | 'initialEditor'
+    | 'settingsVisible'
+    | 'breaks'
+    | 'allowHTML'
+    | 'linkify'
+    | 'linkifyTlds'
+    | 'sanitizeHtml'
+    | 'prepareRawMarkup'
+    | 'splitModeOrientation'
+    | 'stickyToolbar'
+    | 'initialSplitModeEnabled'
+    | 'renderPreviewDefined'
+    | 'height'
 >;
 export const Playground: Story<PlaygroundStoryProps> = (props) => (
-    <PlaygroundComponent {...props} initial={initialMdContent} />
+    <PlaygroundComponent {...props} initial={parseLocation() || initialMdContent} />
 );
 
 Playground.args = {
+    initialEditor: 'wysiwyg',
+    settingsVisible: true,
     allowHTML: true,
     breaks: true,
     linkify: true,
     linkifyTlds: [],
+    sanitizeHtml: false,
+    prepareRawMarkup: false,
+    splitModeOrientation: 'horizontal',
+    stickyToolbar: true,
+    initialSplitModeEnabled: false,
+    renderPreviewDefined: true,
+    height: 'initial',
 };