Skip to content

Commit

Permalink
desktop: fix issues with codeblock toggling
Browse files Browse the repository at this point in the history 
Signed-off-by: Sean-Wyn Ng <[email protected]>
  • Loading branch information
seanwynwins committed Aug 26, 2024
1 parent 3547663 commit 696c913
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 4 deletions.
31 changes: 27 additions & 4 deletions packages/editor/src/extensions/code-block/code-block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,11 +234,34 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
},
toggleCodeBlock:
(attributes) =>
({ commands }) => {
return commands.toggleNode(this.name, "paragraph", {
...attributes,
id: createCodeblockId()
({ commands, state }) => {
const { from, to } = state.selection;

let hasParagraph = false;

state.doc.nodesBetween(from, to, (node) => {
if (node.type.name === "paragraph") {
hasParagraph = true;
}
});

if (hasParagraph) {
return commands.insertContent({
type: this.name,
attrs: {
...attributes,
id: createCodeblockId()
},
content: [
{
type: "text",
text: state.doc.textBetween(from, to, "\n")
}
]
});
} else {
return commands.clearNodes();
}
},
changeCodeBlockIndentation:
(options) =>
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/extensions/code-block/tests/__snapshots__/code-block.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

exports[`Adding a new codeblock & changing the language should apply the new highlighting 1`] = `"<div><div contenteditable=\\"true\\" tabindex=\\"0\\" translate=\\"no\\" class=\\"tiptap ProseMirror\\"><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-xyz\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></pre></div></div></div>"`;
exports[`Toggling from a codeblock should make codeblock disappear 1`] = `"<div><div contenteditable=\\"true\\" tabindex=\\"0\\" translate=\\"no\\" class=\\"tiptap ProseMirror\\"><p><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></p><p><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></p></div></div>"`;
exports[`Toggling multiple paragraphs into a codeblock should make one codeblock 1`] = `"<div><div contenteditable=\\"true\\" tabindex=\\"0\\" translate=\\"no\\" class=\\"tiptap ProseMirror\\"><p><br class=\\"ProseMirror-trailingBreak\\"></p><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-xyz\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">helloWorld</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> console<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">log</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'Hello, World!'</span><span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span> <span class=\\"token punctuation\\">}</span></pre></div></div></div>"`;
exports[`codeblocks should get highlighted after pasting 1`] = `"<div><div contenteditable=\\"true\\" tabindex=\\"0\\" translate=\\"no\\" class=\\"tiptap ProseMirror\\"><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-javascript\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></pre></div><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-typescript\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></pre></div></div></div>"`;
exports[`codeblocks should get highlighted on init 1`] = `"<div><div contenteditable=\\"true\\" tabindex=\\"0\\" translate=\\"no\\" class=\\"tiptap ProseMirror\\"><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-javascript\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></pre></div><div class=\\"codeblock-view-content-wrap\\"><pre class=\\"node-content-wrapper language-typescript\\" style=\\"white-space: pre; min-width: 20px;\\"><span class=\\"token keyword\\">function</span> <span class=\\"token function\\">hello</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span> <span class=\\"token punctuation\\">}</span></pre></div></div></div>"`;
Expand Down
73 changes: 73 additions & 0 deletions packages/editor/src/extensions/code-block/tests/code-block.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,17 @@ const CODEBLOCKS_HTML = h("div", [
})
]).innerHTML;

const CODE_PARAGRAPH = `function helloWorld() {
console.log('Hello, World!');
}`;

interface DocumentNode {
type: string;
attrs?: { [key: string]: any };
content?: DocumentNode[];
text?: string;
}

test("codeblocks should get highlighted on init", async () => {
const editorElement = h("div");
createEditor({
Expand Down Expand Up @@ -243,3 +254,65 @@ test("Switching codeblock language should register the new language", async () =
await new Promise((resolve) => setTimeout(resolve, 100));
expect(refractor.registered("java")).toBe(true);
});

test("Toggling multiple paragraphs into a codeblock should make one codeblock", async () => {
const editorElement = h("div");
const { editor } = createEditor({
element: editorElement,
initialContent: CODE_PARAGRAPH,
extensions: {
codeblock: CodeBlock,
codeBlock: false,
code: false
}
});

const docLength = editor.state.doc.nodeSize - 2;

editor.commands.setTextSelection({ from: 0, to: docLength });
editor.commands.toggleCodeBlock();
editor.commands.updateAttributes(CodeBlock.name, { language: "javascript" });

await new Promise((resolve) => setTimeout(resolve, 100));

expect(editorElement.outerHTML).toMatchSnapshot();

const docJSON = editor.state.doc.toJSON();
const content = docJSON.content;
const codeBlockNodes = content.filter(
(node: DocumentNode) => node.type === "codeblock"
);

expect(codeBlockNodes).toHaveLength(1);
});

test("Toggling from a codeblock should make codeblock disappear", async () => {
const editorElement = document.createElement("div");
const { editor } = createEditor({
element: editorElement,
initialContent: CODEBLOCKS_HTML,
extensions: {
codeblock: CodeBlock,
codeBlock: false,
code: false
}
});

const docLength = editor.state.doc.nodeSize - 2;

editor.commands.setTextSelection({ from: 0, to: docLength });

editor.commands.toggleCodeBlock();

await new Promise((resolve) => setTimeout(resolve, 100));

expect(editorElement.outerHTML).toMatchSnapshot();

const docJSON = editor.state.doc.toJSON();
const content = docJSON.content;
const codeBlockNodes = content.filter(
(node: DocumentNode) => node.type === "codeblock"
);

expect(codeBlockNodes).toHaveLength(0);
});

0 comments on commit 696c913

Please sign in to comment.