-
-
Notifications
You must be signed in to change notification settings - Fork 439
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: notion html adapter (#8947)
- Loading branch information
1 parent
8fe10ce
commit 6a153d2
Showing
36 changed files
with
2,079 additions
and
1,347 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from './html.js'; | ||
| export * from './markdown.js'; | ||
| export * from './notion-html.js'; | ||
| export * from './plain-text.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import type { DeltaInsert } from '@blocksuite/inline'; | ||
|
|
||
| import { ListBlockSchema } from '@blocksuite/affine-model'; | ||
| import { | ||
| BlockNotionHtmlAdapterExtension, | ||
| type BlockNotionHtmlAdapterMatcher, | ||
| HastUtils, | ||
| } from '@blocksuite/affine-shared/adapters'; | ||
| import { nanoid } from '@blocksuite/store'; | ||
|
|
||
| const listBlockMatchTags = ['ul', 'ol', 'li']; | ||
|
|
||
| export const listBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher = | ||
| { | ||
| flavour: ListBlockSchema.model.flavour, | ||
| toMatch: o => | ||
| HastUtils.isElement(o.node) && | ||
| listBlockMatchTags.includes(o.node.tagName), | ||
| fromMatch: () => false, | ||
| toBlockSnapshot: { | ||
| enter: (o, context) => { | ||
| if (!HastUtils.isElement(o.node)) { | ||
| return; | ||
| } | ||
|
|
||
| const { walkerContext, pageMap, deltaConverter } = context; | ||
| switch (o.node.tagName) { | ||
| case 'ul': | ||
| case 'ol': { | ||
| walkerContext.setNodeContext('hast:list:type', 'bulleted'); | ||
| if (o.node.tagName === 'ol') { | ||
| walkerContext.setNodeContext('hast:list:type', 'numbered'); | ||
| } else if (Array.isArray(o.node.properties?.className)) { | ||
| if (o.node.properties.className.includes('to-do-list')) { | ||
| walkerContext.setNodeContext('hast:list:type', 'todo'); | ||
| } else if (o.node.properties.className.includes('toggle')) { | ||
| walkerContext.setNodeContext('hast:list:type', 'toggle'); | ||
| } else if ( | ||
| o.node.properties.className.includes('bulleted-list') | ||
| ) { | ||
| walkerContext.setNodeContext('hast:list:type', 'bulleted'); | ||
| } | ||
| } | ||
| break; | ||
| } | ||
| case 'li': { | ||
| const firstElementChild = HastUtils.getElementChildren(o.node)[0]; | ||
| const notionListType = | ||
| walkerContext.getNodeContext('hast:list:type'); | ||
| const listType = | ||
| notionListType === 'toggle' ? 'bulleted' : notionListType; | ||
| let delta: DeltaInsert[] = []; | ||
| if (notionListType === 'toggle') { | ||
| delta = deltaConverter.astToDelta( | ||
| HastUtils.querySelector(o.node, 'summary') ?? o.node, | ||
| { pageMap } | ||
| ); | ||
| } else if (notionListType === 'todo') { | ||
| delta = deltaConverter.astToDelta(o.node, { pageMap }); | ||
| } else { | ||
| delta = deltaConverter.astToDelta( | ||
| HastUtils.getInlineOnlyElementAST(o.node), | ||
| { | ||
| pageMap, | ||
| } | ||
| ); | ||
| } | ||
| walkerContext.openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:list', | ||
| props: { | ||
| type: listType, | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta, | ||
| }, | ||
| checked: | ||
| notionListType === 'todo' | ||
| ? firstElementChild && | ||
| Array.isArray( | ||
| firstElementChild.properties?.className | ||
| ) && | ||
| firstElementChild.properties.className.includes( | ||
| 'checkbox-on' | ||
| ) | ||
| : false, | ||
| collapsed: | ||
| notionListType === 'toggle' | ||
| ? firstElementChild && | ||
| firstElementChild.tagName === 'details' && | ||
| firstElementChild.properties.open === undefined | ||
| : false, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ); | ||
| break; | ||
| } | ||
| } | ||
| }, | ||
| leave: (o, context) => { | ||
| const { walkerContext } = context; | ||
| if (!HastUtils.isElement(o.node)) { | ||
| return; | ||
| } | ||
| if (o.node.tagName === 'li') { | ||
| walkerContext.closeNode(); | ||
| } | ||
| }, | ||
| }, | ||
| fromBlockSnapshot: {}, | ||
| }; | ||
|
|
||
| export const ListBlockNotionHtmlAdapterExtension = | ||
| BlockNotionHtmlAdapterExtension(listBlockNotionHtmlAdapterMatcher); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| export * from './html.js'; | ||
| export * from './markdown.js'; | ||
| export * from './notion-html.js'; | ||
| export * from './plain-text.js'; |
238 changes: 238 additions & 0 deletions
238
packages/affine/block-paragraph/src/adapters/notion-html.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,238 @@ | ||
| import { ParagraphBlockSchema } from '@blocksuite/affine-model'; | ||
| import { | ||
| BlockNotionHtmlAdapterExtension, | ||
| type BlockNotionHtmlAdapterMatcher, | ||
| HastUtils, | ||
| } from '@blocksuite/affine-shared/adapters'; | ||
| import { nanoid } from '@blocksuite/store'; | ||
|
|
||
| const paragraphBlockMatchTags = [ | ||
| 'p', | ||
| 'h1', | ||
| 'h2', | ||
| 'h3', | ||
| 'h4', | ||
| 'h5', | ||
| 'h6', | ||
| 'blockquote', | ||
| 'div', | ||
| 'span', | ||
| 'figure', | ||
| ]; | ||
|
|
||
| const NotionDatabaseTitleToken = '.collection-title'; | ||
| const NotionPageLinkToken = '.link-to-page'; | ||
| const NotionCalloutToken = '.callout'; | ||
| const NotionCheckboxToken = '.checkbox'; | ||
|
|
||
| export const paragraphBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher = | ||
| { | ||
| flavour: ParagraphBlockSchema.model.flavour, | ||
| toMatch: o => | ||
| HastUtils.isElement(o.node) && | ||
| paragraphBlockMatchTags.includes(o.node.tagName), | ||
| fromMatch: () => false, | ||
| toBlockSnapshot: { | ||
| enter: (o, context) => { | ||
| if (!HastUtils.isElement(o.node)) { | ||
| return; | ||
| } | ||
| const { walkerContext, deltaConverter, pageMap } = context; | ||
| switch (o.node.tagName) { | ||
| case 'blockquote': { | ||
| walkerContext.setGlobalContext('hast:blockquote', true); | ||
| walkerContext.openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:paragraph', | ||
| props: { | ||
| type: 'quote', | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta: deltaConverter.astToDelta( | ||
| HastUtils.getInlineOnlyElementAST(o.node), | ||
| { pageMap, removeLastBr: true } | ||
| ), | ||
| }, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ); | ||
| break; | ||
| } | ||
| case 'p': { | ||
| // Workaround for Notion's bug | ||
| // https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element | ||
| if (!o.node.properties.id) { | ||
| break; | ||
| } | ||
| walkerContext.openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:paragraph', | ||
| props: { | ||
| type: walkerContext.getGlobalContext('hast:blockquote') | ||
| ? 'quote' | ||
| : 'text', | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta: deltaConverter.astToDelta(o.node, { pageMap }), | ||
| }, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ); | ||
| break; | ||
| } | ||
| case 'h1': | ||
| case 'h2': | ||
| case 'h3': | ||
| case 'h4': | ||
| case 'h5': | ||
| case 'h6': { | ||
| if (HastUtils.querySelector(o.node, NotionDatabaseTitleToken)) { | ||
| break; | ||
| } | ||
| walkerContext | ||
| .openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:paragraph', | ||
| props: { | ||
| type: o.node.tagName, | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta: deltaConverter.astToDelta(o.node, { pageMap }), | ||
| }, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ) | ||
| .closeNode(); | ||
| break; | ||
| } | ||
| case 'figure': | ||
| { | ||
| // Notion page link | ||
| if (HastUtils.querySelector(o.node, NotionPageLinkToken)) { | ||
| walkerContext | ||
| .openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:paragraph', | ||
| props: { | ||
| type: 'text', | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta: deltaConverter.astToDelta(o.node, { pageMap }), | ||
| }, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ) | ||
| .closeNode(); | ||
| walkerContext.skipAllChildren(); | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| // Notion callout | ||
| if (HastUtils.querySelector(o.node, NotionCalloutToken)) { | ||
| const firstElementChild = HastUtils.getElementChildren(o.node)[0]; | ||
| const secondElementChild = HastUtils.getElementChildren( | ||
| o.node | ||
| )[1]; | ||
|
|
||
| const iconSpan = HastUtils.querySelector( | ||
| firstElementChild, | ||
| '.icon' | ||
| ); | ||
| const iconText = iconSpan | ||
| ? HastUtils.getTextContent(iconSpan) | ||
| : ''; | ||
| walkerContext | ||
| .openNode( | ||
| { | ||
| type: 'block', | ||
| id: nanoid(), | ||
| flavour: 'affine:paragraph', | ||
| props: { | ||
| type: 'quote', | ||
| text: { | ||
| '$blocksuite:internal:text$': true, | ||
| delta: [ | ||
| { insert: iconText + '\n' }, | ||
| ...deltaConverter.astToDelta(secondElementChild, { | ||
| pageMap, | ||
| }), | ||
| ], | ||
| }, | ||
| }, | ||
| children: [], | ||
| }, | ||
| 'children' | ||
| ) | ||
| .closeNode(); | ||
| walkerContext.skipAllChildren(); | ||
| break; | ||
| } | ||
| } | ||
| }, | ||
| leave: (o, context) => { | ||
| if (!HastUtils.isElement(o.node)) { | ||
| return; | ||
| } | ||
| const { walkerContext } = context; | ||
| switch (o.node.tagName) { | ||
| case 'div': { | ||
| if ( | ||
| o.parent?.node.type === 'element' && | ||
| !( | ||
| o.parent.node.tagName === 'li' && | ||
| HastUtils.querySelector(o.parent.node, NotionCheckboxToken) | ||
| ) && | ||
| Array.isArray(o.node.properties?.className) | ||
| ) { | ||
| if (o.node.properties.className.includes('indented')) { | ||
| walkerContext.closeNode(); | ||
| } | ||
| } | ||
| break; | ||
| } | ||
| case 'blockquote': { | ||
| walkerContext.closeNode(); | ||
| walkerContext.setGlobalContext('hast:blockquote', false); | ||
| break; | ||
| } | ||
| case 'p': { | ||
| if (!o.node.properties.id) { | ||
| break; | ||
| } | ||
| if ( | ||
| o.next?.type === 'element' && | ||
| o.next.tagName === 'div' && | ||
| Array.isArray(o.next.properties?.className) && | ||
| o.next.properties.className.includes('indented') | ||
| ) { | ||
| // Close the node when leaving div indented | ||
| break; | ||
| } | ||
| walkerContext.closeNode(); | ||
| break; | ||
| } | ||
| } | ||
| }, | ||
| }, | ||
| fromBlockSnapshot: {}, | ||
| }; | ||
|
|
||
| export const ParagraphBlockNotionHtmlAdapterExtension = | ||
| BlockNotionHtmlAdapterExtension(paragraphBlockNotionHtmlAdapterMatcher); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.