From 573c82e0236508354bfc6ad6b961b6d794eab5cd Mon Sep 17 00:00:00 2001 From: Yuriy Demidov Date: Wed, 23 Oct 2024 16:36:51 +0300 Subject: [PATCH] feat(bundle)!: remove default deps for useMemo inside useMarkdownEditor (#438) --- demo/Playground.tsx | 117 +++++++++++---------- src/bundle/useMarkdownEditor.ts | 175 ++++++++++++++------------------ 2 files changed, 145 insertions(+), 147 deletions(-) diff --git a/demo/Playground.tsx b/demo/Playground.tsx index a012a4f7..24707d4d 100644 --- a/demo/Playground.tsx +++ b/demo/Playground.tsx @@ -134,6 +134,7 @@ export const Playground = React.memo((props) => { escapeConfig, enableSubmitInPreview, hidePreviewAfterSubmit, + needToSetDimensionsForUploadedImages, } = props; const [editorMode, setEditorMode] = React.useState( initialEditor ?? 'wysiwyg', @@ -159,54 +160,56 @@ export const Playground = React.memo((props) => { [sanitizeHtml], ); - const mdEditor = useMarkdownEditor({ - allowHTML, - linkify, - linkifyTlds, - initialMarkup: mdRaw, - breaks: breaks ?? true, - initialEditorMode: editorMode, - initialSplitModeEnabled: initialSplitModeEnabled, - initialToolbarVisible: true, - splitMode: splitModeOrientation, - escapeConfig: escapeConfig, - renderPreview: renderPreviewDefined ? renderPreview : undefined, - fileUploadHandler, - prepareRawMarkup: prepareRawMarkup - ? (value) => '**prepare raw markup**\n\n' + value - : undefined, - extensionOptions: { - commandMenu: {actions: wysiwygCommandMenuConfig ?? wCommandMenuConfig}, - ...extensionOptions, - }, - markupConfig: { - extensions: markupConfigExtensions, - }, - extraExtensions: (builder) => { - builder - .use(Math, { - loadRuntimeScript: () => { - import( - /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime' - ); - import( - // @ts-expect-error // no types for styles - /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles' - ); - }, - }) - .use(Mermaid, { - loadRuntimeScript: () => { - import( - /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime' - ); - }, - }) - .use(FoldingHeading) - .use(YfmHtmlBlock, { - useConfig: useYfmHtmlBlockStyles, - sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}), - head: ` + const mdEditor = useMarkdownEditor( + { + allowHTML, + linkify, + linkifyTlds, + initialMarkup: mdRaw, + breaks: breaks ?? true, + initialEditorMode: editorMode, + initialSplitModeEnabled: initialSplitModeEnabled, + initialToolbarVisible: true, + splitMode: splitModeOrientation, + escapeConfig: escapeConfig, + needToSetDimensionsForUploadedImages, + renderPreview: renderPreviewDefined ? renderPreview : undefined, + fileUploadHandler, + prepareRawMarkup: prepareRawMarkup + ? (value) => '**prepare raw markup**\n\n' + value + : undefined, + extensionOptions: { + commandMenu: {actions: wysiwygCommandMenuConfig ?? wCommandMenuConfig}, + ...extensionOptions, + }, + markupConfig: { + extensions: markupConfigExtensions, + }, + extraExtensions: (builder) => { + builder + .use(Math, { + loadRuntimeScript: () => { + import( + /* webpackChunkName: "latex-runtime" */ '@diplodoc/latex-extension/runtime' + ); + import( + // @ts-expect-error // no types for styles + /* webpackChunkName: "latex-styles" */ '@diplodoc/latex-extension/runtime/styles' + ); + }, + }) + .use(Mermaid, { + loadRuntimeScript: () => { + import( + /* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime' + ); + }, + }) + .use(FoldingHeading) + .use(YfmHtmlBlock, { + useConfig: useYfmHtmlBlockStyles, + sanitize: getSanitizeYfmHtmlBlock({options: defaultOptions}), + head: ` { function onCancel() { diff --git a/src/bundle/useMarkdownEditor.ts b/src/bundle/useMarkdownEditor.ts index ed78ce03..450a82fa 100644 --- a/src/bundle/useMarkdownEditor.ts +++ b/src/bundle/useMarkdownEditor.ts @@ -21,109 +21,92 @@ export function useMarkdownEditor( props: UseMarkdownEditorProps, deps: React.DependencyList = [], ): MarkdownEditorInstance { - const editor = useMemo( - () => { - const { - md = {}, - initial = {}, - handlers = {}, - experimental = {}, - markupConfig = {}, - wysiwygConfig = {}, - } = props; + const editor = useMemo(() => { + const { + md = {}, + initial = {}, + handlers = {}, + experimental = {}, + markupConfig = {}, + wysiwygConfig = {}, + } = props; - const breaks = md.breaks ?? props.breaks; - const preset: MarkdownEditorPreset = props.preset ?? 'full'; - const renderStorage = new ReactRenderStorage(); - const needToSetDimensionsForUploadedImages = - experimental.needToSetDimensionsForUploadedImages ?? - props.needToSetDimensionsForUploadedImages; + const breaks = md.breaks ?? props.breaks; + const preset: MarkdownEditorPreset = props.preset ?? 'full'; + const renderStorage = new ReactRenderStorage(); + const needToSetDimensionsForUploadedImages = + experimental.needToSetDimensionsForUploadedImages ?? + props.needToSetDimensionsForUploadedImages; - const extensions: Extension = (builder) => { - const extensionOptions = wysiwygConfig.extensionOptions ?? props.extensionOptions; + const extensions: Extension = (builder) => { + const extensionOptions = wysiwygConfig.extensionOptions ?? props.extensionOptions; - builder.use(BundlePreset, { - ...extensionOptions, - preset, - reactRenderer: renderStorage, - onCancel: () => { - editor.emit('cancel', null); - return true; - }, - onSubmit: () => { - editor.emit('submit', null); - return true; - }, - mdBreaks: breaks, - fileUploadHandler: props.fileUploadHandler, - needToSetDimensionsForUploadedImages, - }); - { - const extraExtensions = wysiwygConfig.extensions || props.extraExtensions; - if (extraExtensions) { - builder.use(extraExtensions, props.extensionOptions); - } - } - }; - return new EditorImpl({ - ...props, + builder.use(BundlePreset, { + ...extensionOptions, preset, - renderStorage, - md: { - ...md, - breaks, - html: md.html ?? props.allowHTML, - linkify: md.linkify ?? props.linkify, - linkifyTlds: md.linkifyTlds ?? props.linkifyTlds, - }, - initial: { - ...initial, - markup: initial.markup ?? props.initialMarkup, - mode: initial.mode ?? props.initialEditorMode, - toolbarVisible: initial.toolbarVisible ?? props.initialToolbarVisible, - splitModeEnabled: initial.splitModeEnabled ?? props.initialSplitModeEnabled, - }, - handlers: { - ...handlers, - uploadFile: handlers.uploadFile ?? props.fileUploadHandler, - }, - experimental: { - ...experimental, - needToSetDimensionsForUploadedImages, - prepareRawMarkup: experimental.prepareRawMarkup ?? props.prepareRawMarkup, - beforeEditorModeChange: - experimental.beforeEditorModeChange ?? - props.experimental_beforeEditorModeChange, + reactRenderer: renderStorage, + onCancel: () => { + editor.emit('cancel', null); + return true; }, - markupConfig: { - ...markupConfig, - splitMode: markupConfig.splitMode ?? props.splitMode, - renderPreview: markupConfig.renderPreview ?? props.renderPreview, - extensions: markupConfig.extensions ?? props.extraMarkupExtensions, - }, - wysiwygConfig: { - ...wysiwygConfig, - extensions, - escapeConfig: wysiwygConfig.escapeConfig ?? props.escapeConfig, + onSubmit: () => { + editor.emit('submit', null); + return true; }, + mdBreaks: breaks, + fileUploadHandler: props.fileUploadHandler, + needToSetDimensionsForUploadedImages, }); - }, - // [major] TODO: use empty deps by default - deps.concat( - props.md?.html, - props.allowHTML, - props.md?.linkify, - props.linkify, - props.md?.linkifyTlds, - props.linkifyTlds, - props.md?.breaks, - props.breaks, - props.markupConfig?.splitMode, - props.splitMode, - props.experimental?.needToSetDimensionsForUploadedImages, - props.needToSetDimensionsForUploadedImages, - ), - ); + { + const extraExtensions = wysiwygConfig.extensions || props.extraExtensions; + if (extraExtensions) { + builder.use(extraExtensions, props.extensionOptions); + } + } + }; + return new EditorImpl({ + ...props, + preset, + renderStorage, + md: { + ...md, + breaks, + html: md.html ?? props.allowHTML, + linkify: md.linkify ?? props.linkify, + linkifyTlds: md.linkifyTlds ?? props.linkifyTlds, + }, + initial: { + ...initial, + markup: initial.markup ?? props.initialMarkup, + mode: initial.mode ?? props.initialEditorMode, + toolbarVisible: initial.toolbarVisible ?? props.initialToolbarVisible, + splitModeEnabled: initial.splitModeEnabled ?? props.initialSplitModeEnabled, + }, + handlers: { + ...handlers, + uploadFile: handlers.uploadFile ?? props.fileUploadHandler, + }, + experimental: { + ...experimental, + needToSetDimensionsForUploadedImages, + prepareRawMarkup: experimental.prepareRawMarkup ?? props.prepareRawMarkup, + beforeEditorModeChange: + experimental.beforeEditorModeChange ?? + props.experimental_beforeEditorModeChange, + }, + markupConfig: { + ...markupConfig, + splitMode: markupConfig.splitMode ?? props.splitMode, + renderPreview: markupConfig.renderPreview ?? props.renderPreview, + extensions: markupConfig.extensions ?? props.extraMarkupExtensions, + }, + wysiwygConfig: { + ...wysiwygConfig, + extensions, + escapeConfig: wysiwygConfig.escapeConfig ?? props.escapeConfig, + }, + }); + }, deps); useLayoutEffect(() => { function onToolbarAction({editorMode, id}: {editorMode: MarkdownEditorMode; id: string}) {