feat(ImgSize, markup): rework image styling to get more control (#451)

Author: St1ggy

demo/constants/md-plugins.ts

@@ -36,7 +36,7 @@ const defaultPlugins: PluginWithParams[] = [
     yfmCut({bundle: false}) as PluginWithParams,
     deflist,
     file,
-    imsize,
+    (md) => md.use(imsize, {enableInlineStyling: true}),
     meta,
     monospace,
     notes,

demo/playground/Playground.tsx

@@ -93,6 +93,7 @@ export type PlaygroundProps = {
     | 'extraExtensions'
     | 'renderPreview'
     | 'extensionOptions'
+    | 'experimental'
 > &
     Pick<
         MarkdownEditorViewProps,
@@ -136,6 +137,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
         enableSubmitInPreview,
         hidePreviewAfterSubmit,
         needToSetDimensionsForUploadedImages,
+        experimental,
     } = props;
     const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>(
         initialEditor ?? 'wysiwyg',
@@ -176,6 +178,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             needToSetDimensionsForUploadedImages,
             renderPreview: renderPreviewDefined ? renderPreview : undefined,
             fileUploadHandler,
+            experimental,
             prepareRawMarkup: prepareRawMarkup
                 ? (value) => '**prepare raw markup**\n\n' + value
                 : undefined,
@@ -238,6 +241,10 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
             extraExtensions,
             needToSetDimensionsForUploadedImages,
             initial,
+            experimental?.enableNewImageSizeCalculation,
+            experimental?.needToSetDimensionsForUploadedImages,
+            experimental?.beforeEditorModeChange,
+            experimental?.prepareRawMarkup,
         ],
     );
 

package-lock.json

@@ -207,7 +207,7 @@
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/tabs-extension": "^3.5.1",
-    "@diplodoc/transform": "^4.33.0",
+    "@diplodoc/transform": "^4.36.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
     "@gravity-ui/prettier-config": "1.1.0",

package.json

@@ -14,10 +14,9 @@ import {
 import {ReactRenderStorage, type RenderStorage} from '../extensions';
 import {i18n} from '../i18n/bundle';
 import {logger} from '../logger';
-import {createCodemirror} from '../markup/codemirror';
+import {createCodemirror} from '../markup';
 import {type CodeEditor, Editor as MarkupEditor} from '../markup/editor';
-import {type Emitter, type Receiver, SafeEventEmitter} from '../utils/event-emitter';
-import type {FileUploadHandler} from '../utils/upload';
+import {type Emitter, FileUploadHandler, type Receiver, SafeEventEmitter} from '../utils';
 
 import type {
     MarkdownEditorMode as EditorMode,
@@ -143,6 +142,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
     #fileUploadHandler?: FileUploadHandler;
     #parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
     #needToSetDimensionsForUploadedImages: boolean;
+    #enableNewImageSizeCalculation: boolean;
     #prepareRawMarkup?: (value: MarkupString) => MarkupString;
     #beforeEditorModeChange?: (
         options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>,
@@ -264,7 +264,8 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
                     reactRenderer: this.#renderStorage,
                     uploadHandler: this.fileUploadHandler,
                     parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
-                    needImgDimms: this.needToSetDimensionsForUploadedImages,
+                    needImageDimensions: this.needToSetDimensionsForUploadedImages,
+                    enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
                     extensions: this.#markupConfig.extensions,
                     disabledExtensions: this.#markupConfig.disabledExtensions,
                     keymaps: this.#markupConfig.keymaps,
@@ -293,6 +294,10 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         return this.#needToSetDimensionsForUploadedImages;
     }
 
+    get enableNewImageSizeCalculation(): boolean {
+        return this.#enableNewImageSizeCalculation;
+    }
+
     constructor(opts: EditorOptions) {
         super({onError: logger.error.bind(logger)});
 
@@ -324,6 +329,7 @@ export class EditorImpl extends SafeEventEmitter<EventMapInt> implements EditorI
         this.#needToSetDimensionsForUploadedImages = Boolean(
             experimental.needToSetDimensionsForUploadedImages,
         );
+        this.#enableNewImageSizeCalculation = Boolean(experimental.enableNewImageSizeCalculation);
         this.#prepareRawMarkup = experimental.prepareRawMarkup;
         this.#escapeConfig = wysiwygConfig.escapeConfig;
         this.#beforeEditorModeChange = experimental.beforeEditorModeChange;

src/bundle/Editor.ts

@@ -2,16 +2,15 @@ import React, {RefObject} from 'react';
 
 import isNumber from 'is-number';
 
-import {IMG_MAX_HEIGHT, getImageDimensions} from '../../../markup';
-import {ImageItem, insertImages} from '../../../markup/commands';
-import type {CodeEditor} from '../../../markup/editor';
+import {IMG_MAX_HEIGHT, ImageItem, getImageDimensions, insertImages} from '../../../markup';
+import type {CodeEditor} from '../../../markup';
 import type {ToolbarBaseProps} from '../../../toolbar';
-import type {UploadSuccessItem} from '../../../utils/upload';
+import type {UploadSuccessItem} from '../../../utils';
 import {ToolbarImagePopup} from '../custom/ToolbarImagePopup';
 
 import {useMarkupToolbarContext} from './context';
 
-const noop = (err: any) => {
+const noop = (err: unknown) => {
     console.error(err);
 };
 
@@ -62,7 +61,7 @@ export const MToolbarImagePopup: React.FC<MToolbarImagePopupProps> = ({
 
 async function toImageItems(
     items: readonly UploadSuccessItem[],
-    withDimmensions: boolean,
+    withDimensions: boolean,
 ): Promise<ImageItem[]> {
     const imgItems: ImageItem[] = [];
 
@@ -71,7 +70,7 @@ async function toImageItems(
             const imgItem: ImageItem = {url: result.url, alt: result.name ?? file.name};
             imgItems.push(imgItem);
 
-            if (withDimmensions) {
+            if (withDimensions) {
                 return getImageDimensions(file).then(({height}) => {
                     imgItem.height = String(Math.min(height, IMG_MAX_HEIGHT));
                 }, noop);

src/bundle/toolbar/markup/MToolbarImagePopup.tsx

@@ -4,8 +4,8 @@ import type {ReactNode} from 'react';
 
 import type {MarkupString} from '../common';
 import type {EscapeConfig, Extension} from '../core';
-import type {CreateCodemirrorParams, YfmLangOptions} from '../markup/codemirror';
-import type {FileUploadHandler} from '../utils/upload';
+import type {CreateCodemirrorParams, YfmLangOptions} from '../markup';
+import type {FileUploadHandler} from '../utils';
 
 import type {ChangeEditorModeOptions} from './Editor';
 import type {ExtensionsOptions as WysiwygPresetExtensionsOptions} from './wysiwyg-preset';
@@ -57,6 +57,12 @@ export type MarkdownEditorExperimentalOptions = {
      * @default false
      */
     needToSetDimensionsForUploadedImages?: boolean;
+    /**
+     * If we need to enable new image size calculations
+     *
+     * @default false
+     */
+    enableNewImageSizeCalculation?: boolean;
     /**
      * Called before switching from the markup editor to the wysiwyg editor.
      * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.

src/bundle/types.ts

@@ -38,6 +38,7 @@ export function useMarkdownEditor<T extends object = {}>(
         const needToSetDimensionsForUploadedImages =
             experimental.needToSetDimensionsForUploadedImages ??
             props.needToSetDimensionsForUploadedImages;
+        const enableNewImageSizeCalculation = experimental.enableNewImageSizeCalculation;
 
         const extensions: Extension = (builder) => {
             const extensionOptions = wysiwygConfig.extensionOptions ?? props.extensionOptions;
@@ -57,6 +58,7 @@ export function useMarkdownEditor<T extends object = {}>(
                 mdBreaks: breaks,
                 fileUploadHandler: uploadFile,
                 needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation,
             });
             {
                 const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;
@@ -90,6 +92,7 @@ export function useMarkdownEditor<T extends object = {}>(
             experimental: {
                 ...experimental,
                 needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation,
                 prepareRawMarkup: experimental.prepareRawMarkup ?? props.prepareRawMarkup,
                 beforeEditorModeChange:
                     experimental.beforeEditorModeChange ??

src/bundle/useMarkdownEditor.ts

@@ -32,6 +32,7 @@ export type BundlePresetOptions = ExtensionsOptions &
          * @default false
          */
         needToSetDimensionsForUploadedImages?: boolean;
+        enableNewImageSizeCalculation?: boolean;
     };
 
 export const BundlePreset: ExtensionAuto<BundlePresetOptions> = (builder, opts) => {
@@ -101,6 +102,7 @@ export const BundlePreset: ExtensionAuto<BundlePresetOptions> = (builder, opts)
         imgSize: {
             imageUploadHandler: opts.fileUploadHandler,
             needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages,
+            enableNewImageSizeCalculation: opts.enableNewImageSizeCalculation,
             ...opts.imgSize,
         },
         checkbox: {checkboxLabelPlaceholder: () => i18nPlaceholder('checkbox'), ...opts.checkbox},