feat(bundle): added empty row placeholder

demo/components/Playground.tsx

@@ -16,6 +16,7 @@
     type RenderPreview,
     type ToolbarGroupData,
     type UseMarkdownEditorProps,
+    WysywigPlaceholderOptions,
     logger,
     markupToolbarConfigs,
     useMarkdownEditor,
@@ -46,7 +47,7 @@
 
 const b = block('playground');
 const fileUploadHandler: FileUploadHandler = async (file) => {
     console.info('[Playground] Uploading file: ' + file.name);
     await randomDelay(1000, 3000);
     return {url: URL.createObjectURL(file)};
 };
@@ -79,6 +80,7 @@
     breaks?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
+    placeholderOptions?: WysywigPlaceholderOptions;
     sanitizeHtml?: boolean;
     prepareRawMarkup?: boolean;
     splitModeOrientation?: 'horizontal' | 'vertical' | false;
@@ -112,8 +114,8 @@
     >;
 
 logger.setLogger({
     metrics: console.info,
     action: (data) => console.info(`Action: ${data.action}`, data),
     ...console,
 });
 
@@ -139,6 +141,7 @@
         wysiwygCommandMenuConfig,
         markupConfigExtensions,
         markupToolbarConfig,
+        placeholderOptions,
         escapeConfig,
         enableSubmitInPreview,
         hidePreviewAfterSubmit,
@@ -156,7 +159,7 @@
     }, [mdRaw]);
 
     const renderPreview = useCallback<RenderPreview>(
         ({getValue, md, directiveSyntax}) => (
             <SplitModePreview
                 getValue={getValue}
                 allowHTML={md.html}
@@ -185,6 +188,9 @@
             needToSetDimensionsForUploadedImages,
             renderPreview: renderPreviewDefined ? renderPreview : undefined,
             fileUploadHandler,
+            wysiwygConfig: {
+                placeholderOptions: placeholderOptions,
+            },
             experimental: {
                 ...experimental,
                 directiveSyntax,
@@ -276,14 +282,14 @@
             setEditorMode(mode);
         }
         const onToolbarAction = ({id, editorMode: type}: ToolbarActionData) => {
             console.info(`The '${id}' action is performed in the ${type}-editor.`);
         };
         function onChangeSplitModeEnabled({splitModeEnabled}: {splitModeEnabled: boolean}) {
             props.onChangeSplitModeEnabled?.(splitModeEnabled);
             console.info(`Split mode enabled: ${splitModeEnabled}`);
         }
         function onChangeToolbarVisibility({visible}: {visible: boolean}) {
             console.info('Toolbar visible: ' + visible);
         }
 
         mdEditor.on('cancel', onCancel);
@@ -303,7 +309,7 @@
             mdEditor.off('change-split-mode-enabled', onChangeSplitModeEnabled);
             mdEditor.off('change-toolbar-visibility', onChangeToolbarVisibility);
         };
     }, [mdEditor]);
 
     return (
         <div className={b()}>

src/bundle/types.ts

@@ -26,6 +26,11 @@ export type RenderPreview = (params: RenderPreviewParams) => ReactNode;
 
 export type ParseInsertedUrlAsImage = (text: string) => {imageUrl: string; title?: string} | null;
 
+export type WysywigPlaceholderOptions = {
+    value?: string | (() => string);
+    behavior: 'empty-doc' | 'empty-row';
+};
+
 export type MarkdownEditorMdOptions = {
     html?: boolean;
     breaks?: boolean;
@@ -148,6 +153,7 @@ export type MarkdownEditorWysiwygConfig = {
     extensions?: Extension;
     extensionOptions?: ExtensionsOptions;
     escapeConfig?: EscapeConfig;
+    placeholderOptions?: WysywigPlaceholderOptions;
 };
 
 // [major] TODO: remove generic type

src/bundle/useMarkdownEditor.ts

@@ -59,6 +59,7 @@ export function useMarkdownEditor<T extends object = {}>(
                     editor.emit('submit', null);
                     return true;
                 },
+                placeholderOptions: wysiwygConfig.placeholderOptions,
                 mdBreaks: breaks,
                 fileUploadHandler: uploadFile,
                 needToSetDimensionsForUploadedImages,

src/bundle/wysiwyg-preset.ts

@@ -16,7 +16,7 @@ import type {FileUploadHandler} from '../utils/upload';
 
 import {wCommandMenuConfigByPreset, wSelectionMenuConfigByPreset} from './config/wysiwyg';
 import {emojiDefs} from './emoji';
-import type {MarkdownEditorPreset} from './types';
+import type {MarkdownEditorPreset, WysywigPlaceholderOptions} from './types';
 
 const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'] as const;
 
@@ -27,6 +27,7 @@ export type BundlePresetOptions = ExtensionsOptions &
         preset: MarkdownEditorPreset;
         mdBreaks?: boolean;
         fileUploadHandler?: FileUploadHandler;
+        placeholderOptions?: WysywigPlaceholderOptions;
         /**
          * If we need to set dimensions for uploaded images
          *
@@ -63,9 +64,26 @@ export const BundlePreset: ExtensionAuto<BundlePresetOptions> = (builder, opts)
         baseSchema: {
             paragraphKey: f.toPM(A.Text),
             paragraphPlaceholder: (node: Node, parent?: Node | null) => {
-                const isDocEmpty =
-                    !node.text && parent?.type.name === BaseNode.Doc && parent.childCount === 1;
-                return isDocEmpty ? i18nPlaceholder('doc_empty') : null;
+                let isPlaceholderShown = false;
+
+                if (opts.placeholderOptions?.behavior === 'empty-row') {
+                    isPlaceholderShown = !node.text && parent?.type.name === 'doc';
+                } else {
+                    isPlaceholderShown =
+                        !node.text && parent?.type.name === BaseNode.Doc && parent.childCount === 1;
+                }
+
+                let text = i18nPlaceholder('doc_empty');
+
+                if (opts.placeholderOptions?.value) {
+                    if (typeof opts.placeholderOptions?.value === 'string') {
+                        text = opts.placeholderOptions?.value;
+                    } else {
+                        text = opts.placeholderOptions?.value();
+                    }
+                }
+
+                return isPlaceholderShown ? text : null;
             },
             ...opts.baseSchema,
         },