diff --git a/packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts b/packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts index 1b1174d6a3..14403132a7 100644 --- a/packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts +++ b/packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts @@ -1,29 +1,40 @@ -import { createPluginFactory, isUrl } from '@udecode/plate-core'; +import { createPluginFactory, isUrl, Value } from '@udecode/plate-core'; +import { + remarkDefaultElementRules, + remarkDefaultTextRules, +} from '../remark-slate'; +import { DeserializeMdPlugin } from './types'; import { deserializeMd } from './utils'; export const KEY_DESERIALIZE_MD = 'deserializeMd'; -export const createDeserializeMdPlugin = createPluginFactory({ - key: KEY_DESERIALIZE_MD, - then: (editor) => ({ - editor: { - insertData: { - format: 'text/plain', - query: ({ data, dataTransfer }) => { - const htmlData = dataTransfer.getData('text/html'); - if (htmlData) return false; +export const createDeserializeMdPlugin = createPluginFactory( + { + key: KEY_DESERIALIZE_MD, + then: (editor) => ({ + editor: { + insertData: { + format: 'text/plain', + query: ({ data, dataTransfer }) => { + const htmlData = dataTransfer.getData('text/html'); + if (htmlData) return false; - const { files } = dataTransfer; - if (!files?.length) { - // if content is simply a URL pass through to not break LinkPlugin - if (isUrl(data)) { - return false; + const { files } = dataTransfer; + if (!files?.length) { + // if content is simply a URL pass through to not break LinkPlugin + if (isUrl(data)) { + return false; + } } - } - return true; + return true; + }, + getFragment: ({ data }) => deserializeMd(editor, data), }, - getFragment: ({ data }) => deserializeMd(editor, data), }, + }), + options: { + elementRules: remarkDefaultElementRules, + textRules: remarkDefaultTextRules, }, - }), -}); + } +); diff --git a/packages/serializers/md/src/deserializer/types.ts b/packages/serializers/md/src/deserializer/types.ts new file mode 100644 index 0000000000..5ed8d5b6e4 --- /dev/null +++ b/packages/serializers/md/src/deserializer/types.ts @@ -0,0 +1,7 @@ +import { Value } from '@udecode/plate-core'; +import { RemarkElementRules, RemarkTextRules } from '../remark-slate'; + +export interface DeserializeMdPlugin { + elementRules: RemarkElementRules; + textRules: RemarkTextRules; +} diff --git a/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx b/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx index c2deaa34b4..129622f875 100644 --- a/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx +++ b/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx @@ -4,13 +4,14 @@ import { jsx } from '@udecode/plate-test-utils'; import { ELEMENT_HR } from '../../../../../nodes/horizontal-rule/src'; import { createPlateUIEditor } from '../../../../../ui/plate/src/utils/createPlateUIEditor'; +import { createDeserializeMdPlugin } from '../createDeserializeMdPlugin'; import { deserializeMd } from './deserializeMd'; jsx; describe('deserializeMd', () => { const editor = createPlateUIEditor({ - plugins: [], + plugins: [createDeserializeMdPlugin()], }); it('should deserialize paragraphs', () => { diff --git a/packages/serializers/md/src/deserializer/utils/deserializeMd.ts b/packages/serializers/md/src/deserializer/utils/deserializeMd.ts index c6af309745..0b09c6e910 100644 --- a/packages/serializers/md/src/deserializer/utils/deserializeMd.ts +++ b/packages/serializers/md/src/deserializer/utils/deserializeMd.ts @@ -1,7 +1,9 @@ -import { PlateEditor, Value } from '@udecode/plate-core'; +import { getPluginOptions, PlateEditor, Value } from '@udecode/plate-core'; import markdown from 'remark-parse'; import unified from 'unified'; -import { remarkPlugin } from '../../remark-slate'; +import { remarkPlugin, RemarkPluginOptions } from '../../remark-slate'; +import { KEY_DESERIALIZE_MD } from '../createDeserializeMdPlugin'; +import { DeserializeMdPlugin } from '../types'; /** * Deserialize content from Markdown format to Slate format. @@ -11,9 +13,18 @@ export const deserializeMd = ( editor: PlateEditor, data: string ) => { + const { elementRules, textRules } = getPluginOptions( + editor, + KEY_DESERIALIZE_MD + ); + const tree: any = unified() .use(markdown) - .use(remarkPlugin, { editor }) + .use(remarkPlugin, ({ + editor, + elementRules, + textRules, + } as unknown) as RemarkPluginOptions) .processSync(data); return tree.result; diff --git a/packages/serializers/md/src/remark-slate/remarkTransformElement.ts b/packages/serializers/md/src/remark-slate/remarkTransformElement.ts index edd8f0a623..cc711c9d2e 100644 --- a/packages/serializers/md/src/remark-slate/remarkTransformElement.ts +++ b/packages/serializers/md/src/remark-slate/remarkTransformElement.ts @@ -1,12 +1,11 @@ import { TElement, Value } from '@udecode/plate-core'; -import { remarkDefaultElementRules } from './remarkDefaultElementRules'; import { MdastNode, RemarkPluginOptions } from './types'; export const remarkTransformElement = ( node: MdastNode, options: RemarkPluginOptions ): TElement | TElement[] => { - const { elementRules = remarkDefaultElementRules } = options; + const { elementRules } = options; const { type } = node; const elementRule = elementRules[type!]; diff --git a/packages/serializers/md/src/remark-slate/remarkTransformText.ts b/packages/serializers/md/src/remark-slate/remarkTransformText.ts index 32cf512df0..f7ddd1944f 100644 --- a/packages/serializers/md/src/remark-slate/remarkTransformText.ts +++ b/packages/serializers/md/src/remark-slate/remarkTransformText.ts @@ -7,7 +7,7 @@ export const remarkTransformText = ( options: RemarkPluginOptions, inheritedMarkProps: { [key: string]: boolean } = {} ): TText | TText[] => { - const { editor, textRules = remarkDefaultTextRules } = options; + const { editor, textRules } = options; const { type, value, children } = node; const textRule = textRules[type!] || remarkDefaultTextRules.text; diff --git a/packages/serializers/md/src/remark-slate/types.ts b/packages/serializers/md/src/remark-slate/types.ts index 28123018af..5bb6416efd 100644 --- a/packages/serializers/md/src/remark-slate/types.ts +++ b/packages/serializers/md/src/remark-slate/types.ts @@ -60,6 +60,6 @@ export type RemarkTextRules = { export type RemarkPluginOptions = { editor: PlateEditor; - elementRules?: RemarkElementRules; - textRules?: RemarkTextRules; + elementRules: RemarkElementRules; + textRules: RemarkTextRules; };