feat: HTML paste handling #422

YousefED · 2023-11-27T19:08:21Z

Add tests and fix pasting of nested lists and custom content from external editors

vercel · 2023-11-27T19:08:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote-website	❌ Failed (Inspect)		Nov 29, 2023 9:54am

matthewlipski

Nice! One question though - apart from headings, does this change the external parsing logic, or is it more just for refactoring?

packages/core/src/api/parsers/markdown/parseMarkdown.ts

packages/core/src/api/exporters/markdown/markdownExporter.ts

matthewlipski · 2023-11-28T12:59:36Z

...ges/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts

-        tag: "h3",
-        attrs: { level: 3 },
-        node: "heading",
+        // TODO: also do for other blocks?


Technically it's not necessary for paragraphs, since it doesn't make a difference if we just parse a p instead. It is necessary for list items though since their internal vs external HTML is quite different. They already have a parse rule that's basically the same, just not as concise.

Added todos

packages/react/vite.config.ts

matthewlipski · 2023-11-28T13:13:55Z

packages/core/src/extensions/Blocks/api/blocks/createSpec.ts

+      },
+    });
+  }
+  //     getContent(node, schema) {


I'm kind of wondering if this use case and API makes sense. I'm not really sure if I can see any scenarios where someone would want to override the default inline content parsing, especially since if you can provide a parse function for custom inline content.

Ok, let's not add it if we don't have a use-case yet

* use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]>

…nto feature/html-paste-parsing

* wip custom styles * fix * fix tests * simplify PartialInlineContent * custom inline content * clean nodeconversions test * streamline tests * update tests * move schema files * add custom style test * inline content + tests * misc * clean imports * fix react tests * add react nodeconversions tests * move tests and add test for ReactStyles * fix react tests * basis of new examples * add react examples * fix bug * misc fixes * wip * clean * small cleanup * add comments * move funcs * fix tests * address PR feedback * fix inline content types * feat: HTML paste handling (#422) * refactor parse * fix parse-divsc * add test case * add extra test (that should be fixed) * readd markdown functions * fix tests * remove unused file * remove comments * add comment * nested list handling * add todos * added comment * use refs for blocks (#424) * use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * use processSync --------- Co-authored-by: Matthew Lipski <[email protected]> * fix build --------- Co-authored-by: Matthew Lipski <[email protected]>

* fix table types * add tablecontent * clean BNUpdateBlock * add partial inline content * add contentNodeToTableContent * first draft of tablehandles * implement table functions * fix styles * fix imports * create separate TableExtension * improve types * test some types * Fixed setting selection for table blocks * Fixed backspace deleting table if at start of cell * small code fixes * Implemented PR feedback * Improved table row/column drag & drop UX * Fixed table menus moving around, drag indicator flakiness, menu z-index issues, and drag preview * Implemented PR feedback * Implemented PR feedback * Fixed drag handles sometimes not showing * Fixed scrolling behaviour * Small fixes * Fixed table handles UI * Fixed remaining UX/UI issues * Removed redundant state from table handles plugin * Implemented table drag & drop logic * Added table enter handling * Small fix * feat: custom styles and custom inline content (#418) * wip custom styles * fix * fix tests * simplify PartialInlineContent * custom inline content * clean nodeconversions test * streamline tests * update tests * move schema files * add custom style test * inline content + tests * misc * clean imports * fix react tests * add react nodeconversions tests * move tests and add test for ReactStyles * fix react tests * basis of new examples * add react examples * fix bug * misc fixes * wip * clean * small cleanup * add comments * move funcs * fix tests * address PR feedback * fix inline content types * feat: HTML paste handling (#422) * refactor parse * fix parse-divsc * add test case * add extra test (that should be fixed) * readd markdown functions * fix tests * remove unused file * remove comments * add comment * nested list handling * add todos * added comment * use refs for blocks (#424) * use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * use processSync --------- Co-authored-by: Matthew Lipski <[email protected]> * fix build --------- Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>

* refactor types for blocks * remove unused comment * fix test * run tests on all branches * fix build * change BlockFromBlockConfig to Block * simplify customblockconfig * rename BlockImplementation to TiptapBlockImplementation * fix build * add comment * feat: tables (#413) * fix table types * add tablecontent * clean BNUpdateBlock * add partial inline content * add contentNodeToTableContent * first draft of tablehandles * implement table functions * fix styles * fix imports * create separate TableExtension * improve types * test some types * Fixed setting selection for table blocks * Fixed backspace deleting table if at start of cell * small code fixes * Implemented PR feedback * Improved table row/column drag & drop UX * Fixed table menus moving around, drag indicator flakiness, menu z-index issues, and drag preview * Implemented PR feedback * Implemented PR feedback * Fixed drag handles sometimes not showing * Fixed scrolling behaviour * Small fixes * Fixed table handles UI * Fixed remaining UX/UI issues * Removed redundant state from table handles plugin * Implemented table drag & drop logic * Added table enter handling * Small fix * feat: custom styles and custom inline content (#418) * wip custom styles * fix * fix tests * simplify PartialInlineContent * custom inline content * clean nodeconversions test * streamline tests * update tests * move schema files * add custom style test * inline content + tests * misc * clean imports * fix react tests * add react nodeconversions tests * move tests and add test for ReactStyles * fix react tests * basis of new examples * add react examples * fix bug * misc fixes * wip * clean * small cleanup * add comments * move funcs * fix tests * address PR feedback * fix inline content types * feat: HTML paste handling (#422) * refactor parse * fix parse-divsc * add test case * add extra test (that should be fixed) * readd markdown functions * fix tests * remove unused file * remove comments * add comment * nested list handling * add todos * added comment * use refs for blocks (#424) * use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * use processSync --------- Co-authored-by: Matthew Lipski <[email protected]> * fix build --------- Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>

* Added serialization for vanilla custom blocks * Added serialization for React custom blocks * Cleaned up serializer implementation - no longer uses function override * Revert "Cleaned up serializer implementation - no longer uses function override" This reverts commit b4f3fb6. * Removed comment * Added ability to set custom serialization and parse functions for custom blocks (parse still WIP) * Fixed build and most runtime issues * Added `react-dom` dependency * Added PoC copy/paste handling * Small changes & fixes * Added serialization tests * Changed copy/paste implementation * Small fix * Implemented PR feedback * Converted styles from modules to regular CSS * Implemented PR feedback * Updated serialization test snapshots * Updated serialization tests to use BlockNote API * Commented out custom block parsing code (out of scope for this PR) * Improved `nodeToBlock` typing * Small fixes * Fixed `destroy` function not getting passed to TipTap node view * Updated comment regarding clipboard issues * Major restructure of copy/paste code * Reduced code duplication for HTML serializer & exporter * Implemented PR feedback & cleaned up CSS class names * Updated serialization unit test snapshots * Changed `DOMOutputSpec` implementation for default blocks * Fixed some CSS issues * Implemented PR feedback * Reverted `nodeToBlock` typing * Made external HTML conversions no longer `async` and fixed Firefox clipboard reading * Fixed image test issues and small changes * Fixed remaining image test issues * Updated serialization unit test snapshots * Excluded `formatConversions` test * Fixed HTML export for custom blocks with inline content * Fixed duplicate `blockContainer` attributes getting added to custom blocks' `blockContent` nodes from color default props and changed `toExternalHTML` typing for React custom blocks * Added React serialization unit tests and extra vanilla tests * Updated image e2e snapshots * Small e2e test fix * Added comments * Fixed error when copying only nested blocks * refactor types for blocks (#412) * refactor types for blocks * remove unused comment * fix test * run tests on all branches * fix build * change BlockFromBlockConfig to Block * simplify customblockconfig * rename BlockImplementation to TiptapBlockImplementation * fix build * add comment * feat: tables (#413) * fix table types * add tablecontent * clean BNUpdateBlock * add partial inline content * add contentNodeToTableContent * first draft of tablehandles * implement table functions * fix styles * fix imports * create separate TableExtension * improve types * test some types * Fixed setting selection for table blocks * Fixed backspace deleting table if at start of cell * small code fixes * Implemented PR feedback * Improved table row/column drag & drop UX * Fixed table menus moving around, drag indicator flakiness, menu z-index issues, and drag preview * Implemented PR feedback * Implemented PR feedback * Fixed drag handles sometimes not showing * Fixed scrolling behaviour * Small fixes * Fixed table handles UI * Fixed remaining UX/UI issues * Removed redundant state from table handles plugin * Implemented table drag & drop logic * Added table enter handling * Small fix * feat: custom styles and custom inline content (#418) * wip custom styles * fix * fix tests * simplify PartialInlineContent * custom inline content * clean nodeconversions test * streamline tests * update tests * move schema files * add custom style test * inline content + tests * misc * clean imports * fix react tests * add react nodeconversions tests * move tests and add test for ReactStyles * fix react tests * basis of new examples * add react examples * fix bug * misc fixes * wip * clean * small cleanup * add comments * move funcs * fix tests * address PR feedback * fix inline content types * feat: HTML paste handling (#422) * refactor parse * fix parse-divsc * add test case * add extra test (that should be fixed) * readd markdown functions * fix tests * remove unused file * remove comments * add comment * nested list handling * add todos * added comment * use refs for blocks (#424) * use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * use processSync --------- Co-authored-by: Matthew Lipski <[email protected]> * fix build --------- Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Yousef <[email protected]>

…copy / paste handling (#426) * feat: Custom block serialization (#257) * Added serialization for vanilla custom blocks * Added serialization for React custom blocks * Cleaned up serializer implementation - no longer uses function override * Revert "Cleaned up serializer implementation - no longer uses function override" This reverts commit b4f3fb6. * Removed comment * Added ability to set custom serialization and parse functions for custom blocks (parse still WIP) * Fixed build and most runtime issues * Added `react-dom` dependency * Added PoC copy/paste handling * Small changes & fixes * Added serialization tests * Changed copy/paste implementation * Small fix * Implemented PR feedback * Converted styles from modules to regular CSS * Implemented PR feedback * Updated serialization test snapshots * Updated serialization tests to use BlockNote API * Commented out custom block parsing code (out of scope for this PR) * Improved `nodeToBlock` typing * Small fixes * Fixed `destroy` function not getting passed to TipTap node view * Updated comment regarding clipboard issues * Major restructure of copy/paste code * Reduced code duplication for HTML serializer & exporter * Implemented PR feedback & cleaned up CSS class names * Updated serialization unit test snapshots * Changed `DOMOutputSpec` implementation for default blocks * Fixed some CSS issues * Implemented PR feedback * Reverted `nodeToBlock` typing * Made external HTML conversions no longer `async` and fixed Firefox clipboard reading * Fixed image test issues and small changes * Fixed remaining image test issues * Updated serialization unit test snapshots * Excluded `formatConversions` test * Fixed HTML export for custom blocks with inline content * Fixed duplicate `blockContainer` attributes getting added to custom blocks' `blockContent` nodes from color default props and changed `toExternalHTML` typing for React custom blocks * Added React serialization unit tests and extra vanilla tests * Updated image e2e snapshots * Small e2e test fix * Added comments * Fixed error when copying only nested blocks * refactor types for blocks (#412) * refactor types for blocks * remove unused comment * fix test * run tests on all branches * fix build * change BlockFromBlockConfig to Block * simplify customblockconfig * rename BlockImplementation to TiptapBlockImplementation * fix build * add comment * feat: tables (#413) * fix table types * add tablecontent * clean BNUpdateBlock * add partial inline content * add contentNodeToTableContent * first draft of tablehandles * implement table functions * fix styles * fix imports * create separate TableExtension * improve types * test some types * Fixed setting selection for table blocks * Fixed backspace deleting table if at start of cell * small code fixes * Implemented PR feedback * Improved table row/column drag & drop UX * Fixed table menus moving around, drag indicator flakiness, menu z-index issues, and drag preview * Implemented PR feedback * Implemented PR feedback * Fixed drag handles sometimes not showing * Fixed scrolling behaviour * Small fixes * Fixed table handles UI * Fixed remaining UX/UI issues * Removed redundant state from table handles plugin * Implemented table drag & drop logic * Added table enter handling * Small fix * feat: custom styles and custom inline content (#418) * wip custom styles * fix * fix tests * simplify PartialInlineContent * custom inline content * clean nodeconversions test * streamline tests * update tests * move schema files * add custom style test * inline content + tests * misc * clean imports * fix react tests * add react nodeconversions tests * move tests and add test for ReactStyles * fix react tests * basis of new examples * add react examples * fix bug * misc fixes * wip * clean * small cleanup * add comments * move funcs * fix tests * address PR feedback * fix inline content types * feat: HTML paste handling (#422) * refactor parse * fix parse-divsc * add test case * add extra test (that should be fixed) * readd markdown functions * fix tests * remove unused file * remove comments * add comment * nested list handling * add todos * added comment * use refs for blocks (#424) * use refs for blocks * update react htmlConversion test * Custom inline content and styles commands/copy & paste fixes (#425) * Fixed commands and internal copy/paste for inline content * Fixed internal copy/paste for styles * Small cleanup * fix some tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * use processSync --------- Co-authored-by: Matthew Lipski <[email protected]> * fix build --------- Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]> --------- Co-authored-by: Yousef <[email protected]> * fix: change parse function to only return props * fix lint * add comment * Made block, inline content, and style content get parsed from `contentDOM` instead of `dom` * Small fixes * Fixed table enter handling * Updated unit tests * Fixed parsing error when `dom` is same as `contentDOM` (#429) * Fixed parsing error for styles/inline content where `dom` was the same as `contentDOM` * Updated react snapshots * Playground custom elements (#430) * Added playgrounds for vanilla blocks, React blocks, and vanilla inline content * fix renderHTML error * clean examples --------- Co-authored-by: yousefed <[email protected]> * Add markdown tests (#428) * update docs * add markdown tests * remove unused file * add missing space to mention tests * move and update playwright tests (#427) * move and update playwright tests * fix build * fix test setup * fix pw config * fix test command * Playwright refactor fixes (#436) * Fixed issues with most tests * Temporarily commented out failing unit test * Temporarily commented out failing unit test * Fixed remaining failing playwright tests * Re-added test that was causing issues * re-add tests * add pw-report * skip tests and edit css * revert style * add logs * fix unit tests --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: Matthew Lipski <[email protected]> * Block backspace key event at start of custom editable inline content (#435) * Fixed parsing error for styles/inline content where `dom` was the same as `contentDOM` * Updated react snapshots * Blocked backspace at start of custom editable inline content * add comment --------- Co-authored-by: yousefed <[email protected]> * fix empty table content * update comments * extract transformPasted * widen slashmenu typings * Updated docs for custom blocks and added tables (#442) --------- Co-authored-by: Matthew Lipski <[email protected]> Co-authored-by: Matthew Lipski <[email protected]>

YousefED added 6 commits November 27, 2023 16:06

refactor parse

1b3243d

fix parse-divsc

77e9619

add test case

98b5b9d

add extra test (that should be fixed)

8040737

readd markdown functions

86a691b

fix tests

a59be62

YousefED changed the title ~~Feature: parse HTML paste~~ Feature: HTML paste handling Nov 27, 2023

remove unused file

9afc7a2

vercel bot deployed to Preview – blocknote-website November 27, 2023 19:12 View deployment

YousefED changed the title ~~Feature: HTML paste handling~~ feat: HTML paste handling Nov 27, 2023

YousefED added 2 commits November 27, 2023 20:33

remove comments

16faeb6

add comment

e1f7ec0

matthewlipski reviewed Nov 28, 2023

View reviewed changes

nested list handling

e0cdb20

vercel bot deployed to Preview – blocknote-website November 28, 2023 14:43 View deployment

add todos

4a72faf

vercel bot deployed to Preview – blocknote-website November 28, 2023 15:23 View deployment

added comment

82e70ec

vercel bot deployed to Preview – blocknote-website November 28, 2023 15:31 View deployment

YousefED mentioned this pull request Nov 29, 2023

feat: Parsing blocks from external HTML #414

Closed

vercel bot deployed to Preview – blocknote-website November 29, 2023 09:03 View deployment

Merge remote-tracking branch 'origin/feature/custom-inline-content' i…

028a200

…nto feature/html-paste-parsing

vercel bot had a problem deploying to Preview – blocknote-website November 29, 2023 09:49 Failure

use processSync

d049b33

vercel bot had a problem deploying to Preview – blocknote-website November 29, 2023 09:54 Failure

YousefED merged commit 5a74b58 into feature/custom-inline-content Nov 29, 2023

YousefED mentioned this pull request Nov 29, 2023

feature: v0.10: tables, custom inline content, custom styles, better copy / paste handling #426

Merged

28 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: HTML paste handling #422

feat: HTML paste handling #422

Uh oh!

YousefED commented Nov 27, 2023 •

edited

Loading

Uh oh!

vercel bot commented Nov 27, 2023 •

edited

Loading

Uh oh!

matthewlipski left a comment

Uh oh!

Uh oh!

Uh oh!

matthewlipski Nov 28, 2023

Uh oh!

YousefED Nov 28, 2023

Uh oh!

Uh oh!

matthewlipski Nov 28, 2023

Uh oh!

YousefED Nov 28, 2023

Uh oh!

Uh oh!

Uh oh!

feat: HTML paste handling #422

feat: HTML paste handling #422

Uh oh!

Conversation

YousefED commented Nov 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Nov 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matthewlipski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

matthewlipski Nov 28, 2023

Choose a reason for hiding this comment

Uh oh!

YousefED Nov 28, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

matthewlipski Nov 28, 2023

Choose a reason for hiding this comment

Uh oh!

YousefED Nov 28, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

YousefED commented Nov 27, 2023 •

edited

Loading

vercel bot commented Nov 27, 2023 •

edited

Loading