diff --git a/packages/editor-ext/src/index.ts b/packages/editor-ext/src/index.ts index f338bcfa4..f64de6539 100644 --- a/packages/editor-ext/src/index.ts +++ b/packages/editor-ext/src/index.ts @@ -30,4 +30,4 @@ export * from "./lib/columns"; export * from "./lib/status"; export * from "./lib/pdf"; export * from "./lib/resizable-nodeview"; - +export * from "./lib/base-embed"; diff --git a/packages/editor-ext/src/lib/base-embed/base-embed.ts b/packages/editor-ext/src/lib/base-embed/base-embed.ts new file mode 100644 index 000000000..50cd0269a --- /dev/null +++ b/packages/editor-ext/src/lib/base-embed/base-embed.ts @@ -0,0 +1,61 @@ +import { Node, mergeAttributes } from '@tiptap/core'; + +export interface BaseEmbedOptions { + HTMLAttributes: Record; +} + +declare module '@tiptap/core' { + interface Commands { + baseEmbed: { + insertBaseEmbed: (attrs: { pageId: string }) => ReturnType; + }; + } +} + +export const BaseEmbed = Node.create({ + name: 'baseEmbed', + group: 'block', + atom: true, + selectable: true, + draggable: true, + + addOptions() { + return { HTMLAttributes: {} }; + }, + + addAttributes() { + return { + pageId: { + default: null, + parseHTML: (el) => el.getAttribute('data-page-id'), + renderHTML: (attrs) => + attrs.pageId ? { 'data-page-id': attrs.pageId } : {}, + }, + }; + }, + + parseHTML() { + return [{ tag: 'div[data-type="base-embed"]' }]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + 'div', + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, { + 'data-type': 'base-embed', + }), + ]; + }, + + addCommands() { + return { + insertBaseEmbed: + (attrs) => + ({ commands }) => + commands.insertContent({ + type: this.name, + attrs, + }), + }; + }, +}); diff --git a/packages/editor-ext/src/lib/base-embed/index.ts b/packages/editor-ext/src/lib/base-embed/index.ts new file mode 100644 index 000000000..8ea9b06c0 --- /dev/null +++ b/packages/editor-ext/src/lib/base-embed/index.ts @@ -0,0 +1,2 @@ +export { BaseEmbed } from './base-embed'; +export type { BaseEmbedOptions } from './base-embed';