-
-
Notifications
You must be signed in to change notification settings - Fork 576
feat: custom styles and custom inline content #418
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! Lots of changes though😅 - still need to dive deeper into the new testing setup and changes on nodeConversions.ts
|
||
public readonly uploadFile: ((file: File) => Promise<string>) | undefined; | ||
|
||
constructor( | ||
private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {} | ||
public static create< |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the benefit of using create
vs using the constructor? Is it just a more conventional pattern?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I couldn't get the types working with a regular constructor. I'm doing an as
"cast" in the create
function, afaik that's not possible with regular constructors
}; | ||
|
||
export type TableContent = { | ||
export type TableContent< |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this should go in inlineContent/types
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm, I think not, because this is not a type of "inline content". it's a type of "block content", which for most blocks will be "inline content" / none, except for tables, where it is "table content"
|
||
// Defines multiple block specs. Also ensures that the key of each block schema | ||
// is the same as name of the TipTap node in it. This should be passed in the | ||
// `blocks` option of the BlockNoteEditor. From a block schema, we can derive | ||
// both the blocks' internal implementation (as TipTap nodes) and the type | ||
// information for the external API. | ||
export type BlockSchema = NamesMatch<Record<string, BlockSpec<any>>>; | ||
export type BlockSchema = NamesMatch<Record<string, BlockConfig>>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's pretty difficult to tell what the difference is between BlockSchema
, BlockSpecs
, and BlockSchemaFromSpecs
. Would be great if you could add some comments for when we would use each of them.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
} from "./block"; | ||
import { Block, BlockConfig, BlockSchemaWithBlock } from "./blockTypes"; | ||
} from "./internal"; | ||
import { BlockConfig, BlockFromConfig, BlockSchemaWithBlock } from "./types"; | ||
|
||
// restrict content to "inline" and "none" only | ||
export type CustomBlockConfig = BlockConfig & { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Think this should be Omit<BlockConfig, "content"> & {...}
to clean up the type a bit
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it comes down to the same thing, as the intersection
operator &
will only match overlapping types
} satisfies BlockSchema; | ||
} satisfies BlockSpecs; | ||
|
||
export function getBlockSchemaFromSpecs<T extends BlockSpecs>(specs: T) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like this should go in blocks/internal
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
export const ToggledStyleButton = <BSchema extends BlockSchema>(props: { | ||
editor: BlockNoteEditor<BSchema>; | ||
toggledStyle: ToggledStyle; | ||
export const ToggledStyleButton = < |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We probably want to make this extensible, so you can easily make buttons for custom styles.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, can you give this a go? I think we mainly want to move shortcuts
and icons
to DefaultToolbar
}; | ||
}, | ||
|
||
// TODO: needed? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's a nice to have but I don't think there are many (if any) use cases that would take advantage of it. The custom inline content type would either have to reference its parent block or attach listeners to elements other than itself. I guess the only concern is that a ReactNodeViewRenderer
is how TipTap recommends rendering a React component for your node, so might have to look inside their code to see if there's anything we're missing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmm, it's also necessary if you want to add any logic to your component right? for example, register an event handler on mouse over, etc
export function blockToNode<BSchema extends BlockSchema>( | ||
block: PartialBlock<BSchema>, | ||
schema: Schema | ||
function blockOrInlineContentToContentNode( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why does this function also accept inline content? AFAIK it's only used once and it's with a block
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we also call it in blockToNode
} else if (colorStyles.has(mark.type.name as ColorStyle)) { | ||
styles[mark.type.name as ColorStyle] = mark.attrs.color; | ||
const config = this.styleSchema[mark.type.name]; | ||
if (!config) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Shouldn't this be a warning/error?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
adding a warn
* 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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * use processSync --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>
…tom-inline-content
* 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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * use processSync --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * fix build --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>
* 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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * use processSync --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * fix build --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>
* 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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * use processSync --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * fix build --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Yousef <yousefdardiry@gmail.com>
…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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * use processSync --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * fix build --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Matthew Lipski <matthewlipski@gmail.com> Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> --------- Co-authored-by: Yousef <yousefdardiry@gmail.com> * 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 <yousefdardiry@gmail.com> * 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 <yousefdardiry@gmail.com> --------- Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com> * 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 <yousefdardiry@gmail.com> * 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 <50169049+matthewlipski@users.noreply.github.com> Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>
WIP:
This PR makes it possible to create custom styles or inline content nodes.
Breaking changes
BlockNoteEditor.create()
instead ofnew BlockNoteEditor
TODO
type: string
attribute, and therefore collides withtype: "link"
andtype: "text"
when using discriminated unions. Decide on best way forwarddefaultProps.ts