diff --git a/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx b/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx index 320cfe94..ee45e009 100644 --- a/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx +++ b/app/lish/[did]/[publication]/[rkey]/BaseTextBlock.tsx @@ -36,10 +36,16 @@ export function BaseTextBlock(props: { ${isStrikethrough ? "line-through decoration-tertiary" : ""} ${isHighlighted ? "highlight bg-highlight-1" : ""}`.replaceAll("\n", " "); + // Split text by newlines and insert
tags + const textParts = segment.text.split('\n'); + const renderedText = textParts.flatMap((part, i) => + i < textParts.length - 1 ? [part,
] : [part] + ); + if (isCode) { children.push( - {segment.text} + {renderedText} , ); } else if (link) { @@ -50,13 +56,13 @@ export function BaseTextBlock(props: { className={`text-accent-contrast hover:underline ${className}`} target="_blank" > - {segment.text} + {renderedText} , ); } else { children.push( - {segment.text} + {renderedText} , ); } diff --git a/components/Blocks/TextBlock/RenderYJSFragment.tsx b/components/Blocks/TextBlock/RenderYJSFragment.tsx index 94dc872f..3bc6afbb 100644 --- a/components/Blocks/TextBlock/RenderYJSFragment.tsx +++ b/components/Blocks/TextBlock/RenderYJSFragment.tsx @@ -60,6 +60,10 @@ export function RenderYJSFragment({ ); } + if (node.constructor === XmlElement && node.nodeName === "hard_break") { + return
; + } + return null; }) )} @@ -144,6 +148,10 @@ export function YJSFragmentToString( node: XmlElement | XmlText | XmlHook, ): string { if (node.constructor === XmlElement) { + // Handle hard_break nodes specially + if (node.nodeName === "hard_break") { + return "\n"; + } return node .toArray() .map((f) => YJSFragmentToString(f)) diff --git a/components/Blocks/TextBlock/keymap.ts b/components/Blocks/TextBlock/keymap.ts index 0bd952f4..5fe7fbad 100644 --- a/components/Blocks/TextBlock/keymap.ts +++ b/components/Blocks/TextBlock/keymap.ts @@ -145,12 +145,12 @@ export const TextBlockKeymap = ( ); }, "Shift-Enter": (state, dispatch, view) => { - if (multiLine) { - return baseKeymap.Enter(state, dispatch, view); + // Insert a hard break + let hardBreak = schema.nodes.hard_break.create(); + if (dispatch) { + dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView()); } - return um.withUndoGroup(() => - enter(propsRef, repRef)(state, dispatch, view), - ); + return true; }, "Ctrl-Enter": CtrlEnter(propsRef, repRef), "Meta-Enter": CtrlEnter(propsRef, repRef), diff --git a/components/Blocks/TextBlock/schema.ts b/components/Blocks/TextBlock/schema.ts index 24f018ce..71861a4d 100644 --- a/components/Blocks/TextBlock/schema.ts +++ b/components/Blocks/TextBlock/schema.ts @@ -115,6 +115,13 @@ let baseSchema = { text: { group: "inline", }, + hard_break: { + group: "inline", + inline: true, + selectable: false, + parseDOM: [{ tag: "br" }], + toDOM: () => ["br"] as const, + }, }, }; export const schema = new Schema(baseSchema);