-
- function
-
-
-
- run
-
-
- (
-
-
- )
-
-
-
- {
-
-
-
-
- return
-
-
-
- [
-
-
- null
-
-
- ,
-
-
-
- undefined
-
-
- ,
-
-
-
- 2
-
-
- ,
-
-
-
- ""
-
-
- ]
-
-
- ;
-
-
-
- }
-
-
- `;
-
- const CODE_PASTING_TESTS = [
- {
- expectedHTML: EXPECTED_HTML,
- name: 'VS Code',
- pastedHTML: `function run() {
return [null, undefined, 2, ""];
}`,
- },
- {
- expectedHTML: EXPECTED_HTML,
- name: 'WebStorm / Idea',
- pastedHTML: `function run() {`, - }, - { - expectedHTML: EXPECTED_HTML, - name: 'Postman IDE', - pastedHTML: `
return [null, undefined, 2, ""];
}
function run() {\n return [null, undefined, 2, ""];\n}`,
- },
- {
- expectedHTML: `const Lexical = requireCond('gk', 'runtime_is_dev', {
true: 'Lexical.dev',
false: 'Lexical.prod',
});`,
- name: 'CodeHub',
- pastedHTML: `| function run() { | |
| return [null, undefined, 2, ""]; | |
| } |
-
- 12
-
-
',
- pastedHTML: `12`,
- },
- {
- expectedHTML: html`
-
-
- 1
-
-
-
- 2
-
-
- `,
- name: 'Multiline ',
- // TODO This is not correct. This resembles how Lexical exports code right now but
- // semantically it should be wrapped in a pre
- pastedHTML: `1
2`,
- },
- ];
-
- CODE_PASTING_TESTS.forEach((testCase, i) => {
- test(`Code block html paste: ${testCase.name}`, async ({
- page,
- isPlainText,
- }) => {
- test.skip(isPlainText);
-
- await focusEditor(page);
- await pasteFromClipboard(page, {
- 'text/html': testCase.pastedHTML,
- });
- await assertHTML(page, testCase.expectedHTML);
- });
- });
-
test('When pressing CMD/Ctrl + Left, CMD/Ctrl + Right, the cursor should go to the start of the code', async ({
page,
isPlainText,
diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs
index af586389e9f..4a6363168f6 100644
--- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TextFormatHTMLCopyAndPaste.spec.mjs
@@ -7,7 +7,6 @@
*/
import {
assertHTML,
- clearEditor,
focusEditor,
html,
initialize,
@@ -71,140 +70,4 @@ test.describe('HTML CopyAndPaste', () => {
`,
);
});
-
- test('Copy + paste text with subscript and superscript', async ({
- page,
- isPlainText,
- }) => {
- test.skip(isPlainText);
- await focusEditor(page);
- const clipboardData = {
- 'text/html':
- 'subscript and superscript',
- };
- await pasteFromClipboard(page, clipboardData);
- await assertHTML(
- page,
- html`
-
-
- subscript
-
- and
-
-
- superscript
-
-
-
- `,
- );
- });
-
- test('Copy + paste a Title from Google Docs', async ({page, isPlainText}) => {
- test.skip(isPlainText);
-
- await focusEditor(page);
-
- const clipboard = {
- 'text/html': `My document`,
- };
-
- await pasteFromClipboard(page, clipboard);
-
- await assertHTML(
- page,
- html`
-
- My document
-
- `,
- );
-
- await clearEditor(page);
- await focusEditor(page);
-
- // These can sometimes be put onto the clipboard wrapped in a paragraph element
- clipboard[
- 'text/html'
- ] = `My document
`;
-
- await pasteFromClipboard(page, clipboard);
-
- await assertHTML(
- page,
- html`
-
- My document
-
- `,
- );
- });
-
- test('Copy + paste multiple text format', async ({page, isPlainText}) => {
- test.skip(isPlainText);
-
- await focusEditor(page);
-
- const clipboard = {
- 'text/html': html`
-
- Hello
-
-
-
- World
-
-
-
-
- Lexical
-
-
- `,
- };
-
- await pasteFromClipboard(page, clipboard);
-
- await assertHTML(
- page,
- html`
-
-
- Hello
-
-
-
- World
-
-
-
-
- Lexical
-
-
-
- `,
- );
- });
-
- // TODO: Enhance TextNode.importDOM() to support additional styles such as font size and color.
- test('Copy + paste text with font size and color', () => test.fixme());
});
diff --git a/packages/lexical-table/src/__tests__/unit/CodeBlock.test.ts b/packages/lexical-table/src/__tests__/unit/CodeBlock.test.ts
new file mode 100644
index 00000000000..8e393aabaaa
--- /dev/null
+++ b/packages/lexical-table/src/__tests__/unit/CodeBlock.test.ts
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {$insertDataTransferForRichText} from '@lexical/clipboard';
+import {
+ $createParagraphNode,
+ $getRoot,
+ $getSelection,
+ $isRangeSelection,
+} from 'lexical';
+import {
+ DataTransferMock,
+ initializeUnitTest,
+ invariant,
+} from 'lexical/src/__tests__/utils';
+
+describe('CodeBlock tests', () => {
+ initializeUnitTest(
+ (testEnv) => {
+ beforeEach(async () => {
+ const {editor} = testEnv;
+ await editor.update(() => {
+ const root = $getRoot();
+ const paragraph = $createParagraphNode();
+ root.append(paragraph);
+ paragraph.select();
+ });
+ });
+
+ /**
+ * Code example for tests:
+ *
+ * function run() {
+ * return [null, undefined, 2, ""];
+ * }
+ *
+ */
+ const EXPECTED_HTML = `function run() {
return [null, undefined, 2, ""];
}`;
+
+ const CODE_PASTING_TESTS = [
+ {
+ expectedHTML: EXPECTED_HTML,
+ name: 'VS Code',
+ pastedHTML: `function run() { return [null, undefined, 2, ""];}`,
+ },
+ {
+ expectedHTML: EXPECTED_HTML,
+ name: 'Quip',
+ pastedHTML: `function run() {
return [null, undefined, 2, ""];
}`,
+ },
+ {
+ expectedHTML: EXPECTED_HTML,
+ name: 'WebStorm / Idea',
+ pastedHTML: `function run() {
return [null, undefined, 2, ""];
}
`,
+ },
+ {
+ expectedHTML: `function run() {
return [null, undefined, 2, ""];
}`,
+ name: 'Postman IDE',
+ pastedHTML: `function run() { return [null, undefined, 2, ""];}`,
+ },
+ {
+ expectedHTML: EXPECTED_HTML,
+ name: 'Slack message',
+ pastedHTML: `function run() {\n return [null, undefined, 2, ""];\n}`,
+ },
+ {
+ expectedHTML: `const Lexical = requireCond('gk', 'runtime_is_dev', {
true: 'Lexical.dev',
false: 'Lexical.prod',
});`,
+ name: 'CodeHub',
+ pastedHTML: `const Lexical = requireCond('gk', 'runtime_is_dev', { true: 'Lexical.dev', false: 'Lexical.prod',});`,
+ },
+ {
+ expectedHTML: EXPECTED_HTML,
+ name: 'GitHub / Gist',
+ pastedHTML: `function run() { return [null, undefined, 2, ""]; }
`,
+ },
+ {
+ expectedHTML: `12
`,
+ name: 'Single line ',
+ pastedHTML: `12`,
+ },
+ {
+ expectedHTML: `1
2`,
+ name: 'Multiline ',
+ // TODO This is not correct. This resembles how Lexical exports code right now but
+ // semantically it should be wrapped in a pre
+ pastedHTML: `1
2`,
+ },
+ {
+ expectedHTML: `Hello World Lexical
`,
+ name: 'Multiple text formats',
+ pastedHTML: `Hello World Lexical`,
+ },
+ {
+ expectedHTML: `My document
`,
+ name: 'Title from Google Docs',
+ pastedHTML: `My document`,
+ },
+ {
+ expectedHTML: `My document
`,
+ name: 'Title from Google Docs Wrapped in Paragraph',
+ pastedHTML: `My document
`,
+ },
+ {
+ expectedHTML: `subscript and superscript
`,
+ name: 'Subscript and Superscript',
+ pastedHTML: `subscript and superscript`,
+ },
+ ];
+
+ CODE_PASTING_TESTS.forEach((testCase, i) => {
+ test(`Code block html paste: ${testCase.name}`, async () => {
+ const {editor} = testEnv;
+
+ const dataTransfer = new DataTransferMock();
+ dataTransfer.setData('text/html', testCase.pastedHTML);
+ await editor.update(() => {
+ const selection = $getSelection();
+ invariant(
+ $isRangeSelection(selection),
+ 'isRangeSelection(selection)',
+ );
+ $insertDataTransferForRichText(dataTransfer, selection, editor);
+ });
+ expect(testEnv.innerHTML).toBe(testCase.expectedHTML);
+ });
+ });
+ },
+ {
+ namespace: 'test',
+ theme: {
+ text: {
+ bold: 'editor-text-bold',
+ italic: 'editor-text-italic',
+ underline: 'editor-text-underline',
+ },
+ },
+ },
+ );
+});