feat: add Node linebreakReplacement support and enable on hardBreak nodes (#5821)
Some checks are pending
build / lint (20) (push) Waiting to run
build / test (20, map[name:Demos/Examples spec:./demos/src/Examples/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/Experiments spec:./demos/src/Experiments/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/Extensions spec:./demos/src/Extensions/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/GuideContent spec:./demos/src/GuideContent/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/GuideGettingStarted spec:./demos/src/GuideGettingStarted/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/Marks spec:./demos/src/Marks/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Demos/Nodes spec:./demos/src/Nodes/**/*.spec.{js,ts}]) (push) Waiting to run
build / test (20, map[name:Integration spec:./tests/cypress/integration/**/*.spec.{js,ts}]) (push) Waiting to run
build / build (20) (push) Blocked by required conditions
Publish / Release (20) (push) Waiting to run

* Support the Node linebreakReplacement property

Support the [linebreakReplacement](https://prosemirror.net/docs/ref/#model.NodeSpec.linebreakReplacement) property on Nodes, allowing a node to be used wherever a newline character is, when converting between blocks that don't support the linebreak node, but have their whitespace set to "pre".

This is useful, for example, when converting between code blocks & normal paragraphs. Code blocks don't support the linebreak node, but do allow newline characters ('\n').
Marking the `hardBreak` node as the `linebreakReplacement` will mean the newline characters within codeBlock nodes will be converted to `hardBreak` nodes in the paragraph.

* Make hardBreak the default linebreakReplacement node

When converting between codeBlocks and normal paragraphs, the hardBreak node should be used in place of newline '\n' characters.
This commit is contained in:
Glenn Allen 2024-11-11 19:05:32 +11:00 committed by GitHub
parent 53673fbfe0
commit 2178118991
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 28 additions and 0 deletions

View File

@ -0,0 +1,6 @@
---
"@tiptap/core": patch
"@tiptap/extension-hard-break": patch
---
Add Node `linebreakReplacement` support and enable on hard-break nodes

View File

@ -595,6 +595,25 @@ declare module '@tiptap/core' {
editor?: Editor
}) => NodeSpec['whitespace'])
/**
* Allows a **single** node to be set as linebreak equivalent (e.g. hardBreak).
* When converting between block types that have whitespace set to "pre"
* and don't support the linebreak node (e.g. codeBlock) and other block types
* that do support the linebreak node (e.g. paragraphs) - this node will be used
* as the linebreak instead of stripping the newline.
*
* See [linebreakReplacement](https://prosemirror.net/docs/ref/#model.NodeSpec.linebreakReplacement).
*/
linebreakReplacement?:
| NodeSpec['linebreakReplacement']
| ((this: {
name: string
options: Options
storage: Storage
parent: ParentConfig<NodeConfig<Options, Storage>>['linebreakReplacement']
editor?: Editor
}) => NodeSpec['linebreakReplacement'])
/**
* When enabled, enables both
* [`definingAsContext`](https://prosemirror.net/docs/ref/#model.NodeSpec.definingAsContext) and

View File

@ -78,6 +78,7 @@ export function getSchemaByResolvedExtensions(extensions: Extensions, editor?: E
),
code: callOrReturn(getExtensionField<NodeConfig['code']>(extension, 'code', context)),
whitespace: callOrReturn(getExtensionField<NodeConfig['whitespace']>(extension, 'whitespace', context)),
linebreakReplacement: callOrReturn(getExtensionField<NodeConfig['linebreakReplacement']>(extension, 'linebreakReplacement', context)),
defining: callOrReturn(
getExtensionField<NodeConfig['defining']>(extension, 'defining', context),
),

View File

@ -48,6 +48,8 @@ export const HardBreak = Node.create<HardBreakOptions>({
selectable: false,
linebreakReplacement: true,
parseHTML() {
return [
{ tag: 'br' },