Skip to content

Commit

Permalink
feat(bundle)!: remove default deps for useMemo inside useMarkdownEdit…
Browse files Browse the repository at this point in the history 
…or (#438)
  • Loading branch information
@d3m1d0v
d3m1d0v authored Oct 23, 2024
1 parent 736fc0a commit 573c82e
Show file tree
Hide file tree
Showing 2 changed files with 145 additions and 147 deletions.
117 changes: 66 additions & 51 deletions demo/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
escapeConfig,
enableSubmitInPreview,
hidePreviewAfterSubmit,
needToSetDimensionsForUploadedImages,
} = props;
const [editorMode, setEditorMode] = React.useState<MarkdownEditorMode>(
initialEditor ?? 'wysiwyg',
Expand All @@ -159,54 +160,56 @@ export const Playground = React.memo<PlaygroundProps>((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: `
<base target="_blank" />
<style>
html, body {
Expand All @@ -215,10 +218,22 @@ export const Playground = React.memo<PlaygroundProps>((props) => {
}
</style
`,
});
if (extraExtensions) builder.use(extraExtensions);
});
if (extraExtensions) builder.use(extraExtensions);
},
},
});
[
allowHTML,
linkify,
linkifyTlds,
breaks,
splitModeOrientation,
renderPreviewDefined,
renderPreview,
extraExtensions,
needToSetDimensionsForUploadedImages,
],
);

useEffect(() => {
function onCancel() {
Expand Down
175 changes: 79 additions & 96 deletions src/bundle/useMarkdownEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,109 +21,92 @@ export function useMarkdownEditor<T extends object = {}>(
props: UseMarkdownEditorProps<T>,
deps: React.DependencyList = [],
): MarkdownEditorInstance {
const editor = useMemo<EditorInt>(
() => {
const {
md = {},
initial = {},
handlers = {},
experimental = {},
markupConfig = {},
wysiwygConfig = {},
} = props;
const editor = useMemo<EditorInt>(() => {
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}) {
Expand Down

0 comments on commit 573c82e

Please sign in to comment.