e.setEditorFactory is not a function I have been dealing with a issue please anyone can help

[ShubhodeepSen47]

import { CodeBlock } from "./EditorComponent/CodeBlock";
import { Diagram } from "./EditorComponent/Diagram";
import { FootnoteDef, FootnoteRef } from "./EditorComponent/Footnote";
import {
defaultValueCtx,
Editor,
editorViewOptionsCtx,
rootCtx,
} from "@milkdown/core";
import type { Ctx, MilkdownPlugin } from "@milkdown/ctx";
import { clipboard } from "@milkdown/plugin-clipboard";
import { cursor } from "@milkdown/plugin-cursor";
import { diagram, diagramSchema } from "@milkdown/plugin-diagram";
import { history } from "@milkdown/plugin-history";
import { indent } from "@milkdown/plugin-indent";
import { listener, listenerCtx } from "@milkdown/plugin-listener";
import { prism, prismConfig } from "@milkdown/plugin-prism";
import { trailing } from "@milkdown/plugin-trailing";
import { upload } from "@milkdown/plugin-upload";
import {
codeBlockSchema,
commonmark,
listItemSchema,
} from "@milkdown/preset-commonmark";
import {
footnoteDefinitionSchema,
footnoteReferenceSchema,
gfm,
} from "@milkdown/preset-gfm";
import { useEditor } from "@milkdown/react";
import { nord } from "@milkdown/theme-nord";
import { $view } from "@milkdown/utils";
import {
useNodeViewFactory,
usePluginViewFactory,
useWidgetViewFactory,
} from "@prosemirror-adapter/react";
import debounce from "lodash.debounce";
import { useEffect, useMemo } from "react";
import { refractor } from "refractor/lib/common";
import { ImageTooltip, imageTooltip } from "./EditorComponent/ImageTooltip";
import { ListItem } from "./EditorComponent/ListItem";

import {
tableSelectorPlugin,
TableTooltip,
tableTooltip,
tableTooltipCtx,
} from "./EditorComponent/TableWidget";

export const usePlayground = (
defaultValue: string,
onChange: (markdown: string) => void
) => {
const pluginViewFactory = usePluginViewFactory();
const nodeViewFactory = useNodeViewFactory();
const widgetViewFactory = useWidgetViewFactory();
const gfmPlugins: MilkdownPlugin[] = useMemo(() => {
return [
gfm,
tableTooltip,
tableTooltipCtx,
(ctx: Ctx) => async () => {
ctx.set(tableTooltip.key, {
view: pluginViewFactory({
component: TableTooltip,
}),
});
},
$view(footnoteDefinitionSchema.node, () =>
nodeViewFactory({ component: FootnoteDef })
),
$view(footnoteReferenceSchema.node, () =>
nodeViewFactory({ component: FootnoteRef })
),
tableSelectorPlugin(widgetViewFactory),
].flat();
}, [nodeViewFactory, pluginViewFactory, widgetViewFactory]);
console.log("1", "usePlayground");
const diagramPlugins: MilkdownPlugin[] = useMemo(() => {
return [
diagram,
$view(diagramSchema.node, () =>
nodeViewFactory({
component: Diagram as any,
})
),
].flat();
}, [nodeViewFactory]);
console.log("2", "usePlayground");
const editorInfo = useEditor(
(root) => {
return Editor.make()
.enableInspector()
.config((ctx) => {
ctx.update(editorViewOptionsCtx, (prev) => ({
...prev,
attributes: {
class: "mx-auto px-2 py-4 box-border",
},
}));
ctx.set(rootCtx, root);
ctx.set(defaultValueCtx, defaultValue);
ctx
.get(listenerCtx)
.markdownUpdated((, markdown) => {
debounce(onChange, 100)(markdown);
})
.updated((, doc) => {});
ctx.update(prismConfig.key, (prev) => ({
...prev,
configureRefractor: () => refractor,
}));
ctx.set(imageTooltip.key, {
view: pluginViewFactory({
component: ImageTooltip,
}),
});
})
.config(nord)
.use(commonmark)
.use(listener)
.use(clipboard)
.use(history)
.use(cursor)
.use(prism)
.use(indent)
.use(upload)
.use(trailing)
.use(imageTooltip)
.use(
$view(listItemSchema.node, () =>
nodeViewFactory({ component: ListItem })
)
)
.use(
$view(codeBlockSchema.node, () =>
nodeViewFactory({ component: CodeBlock })
)
);
},
[onChange, defaultValue]
);

const { get, loading } = editorInfo;

useEffect(() => {
console.log("3", "usePlayground");
requestAnimationFrame(() => {
const effect = async () => {
const editor = get();
if (!editor) return;
const enableGFM = true;
if (enableGFM) {
editor.use(gfmPlugins);
} else {
await editor.remove(gfmPlugins);
}
const enableDiagram = true;

    if (enableDiagram) {
      editor.use(diagramPlugins);
    } else {
      await editor.remove(diagramPlugins);
    }

    await editor.create();
  };

  effect().catch((e) => {
    console.error(e);
  });
});

}, [diagramPlugins, get, gfmPlugins, loading]);

useEffect(() => {
onChange(defaultValue);
}, [defaultValue, onChange]);

return editorInfo;
};

[ShubhodeepSen47]

@andrewmee @atinux @tantaman @daqi @Mirone

[ShubhodeepSen47]

import { useLinkClass } from "./EditorComponent/hooks";
import type { CmdKey } from "@milkdown/core";
import { editorViewCtx, parserCtx } from "@milkdown/core";
import { redoCommand, undoCommand } from "@milkdown/plugin-history";
import {
toggleEmphasisCommand,
toggleStrongCommand,
wrapInBlockquoteCommand,
wrapInBulletListCommand,
wrapInOrderedListCommand,
} from "@milkdown/preset-commonmark";
import {
insertTableCommand,
toggleStrikethroughCommand,
} from "@milkdown/preset-gfm";
import { Slice } from "@milkdown/prose/model";
import { Milkdown as Editor } from "@milkdown/react";
import { callCommand } from "@milkdown/utils";
import clsx from "clsx";
import type { FC, RefObject } from "react";
import { useImperativeHandle } from "react";
import { usePlayground } from "./usePlayground";

const Button: FC<{ icon: string; onClick?: () => void }> = ({
icon,
onClick,
}) => {
const linkClass = useLinkClass();
return (
<div
className={clsx(
"flex h-10 w-10 cursor-pointer items-center justify-center rounded",
linkClass(false)
)}
onMouseDown={(e) => {
onClick?.();
e.preventDefault();
}}>
{icon}

);
};

interface MilkdownProps {
content: string;
onChange: (markdown: string) => void;
milkdownRef: RefObject;
}

export interface MilkdownRef {
update: (markdown: string) => void;
}

export const PlaygroundMilkdown: FC = ({
content,
onChange,
milkdownRef,
}) => {
const { loading, get } = usePlayground(content, onChange);

useImperativeHandle(milkdownRef, () => ({
update: (markdown: string) => {
if (loading) return;
const editor = get();
editor?.action((ctx) => {
const view = ctx.get(editorViewCtx);
const parser = ctx.get(parserCtx);
const doc = parser(markdown);
if (!doc) return;
const state = view.state;
view.dispatch(
state.tr.replace(
0,
state.doc.content.size,
new Slice(doc.content, 0, 0)
)
);
});
},
}));

function call(command: CmdKey, payload?: T) {
return get()?.action(callCommand(command, payload));
}

return (

<Button icon="undo" onClick={() => call(undoCommand.key)} />
<Button icon="redo" onClick={() => call(redoCommand.key)} />
<Button
icon="format_bold"
onClick={() => call(toggleStrongCommand.key)}
/>
<Button
icon="format_italic"
onClick={() => call(toggleEmphasisCommand.key)}
/>
<Button
icon="format_strikethrough"
onClick={() => call(toggleStrikethroughCommand.key)}
/>
<Button icon="table" onClick={() => call(insertTableCommand.key)} />
<Button
icon="format_list_bulleted"
onClick={() => call(wrapInBulletListCommand.key)}
/>
<Button
icon="format_list_numbered"
onClick={() => call(wrapInOrderedListCommand.key)}
/>
<Button
icon="format_quote"
onClick={() => call(wrapInBlockquoteCommand.key)}
/>

    <div />
  </div>
  <div className="h-full overflow-auto overscroll-none">
    <Editor />
  </div>
</div>

);
};
//My Index.tsx

[xanthipe]

I just worked this out - you have to wrap in <MilkdownProvider>, and it has to be in a component outside of your Editor component to give everything a chance to boot up in the right order.