Skip to content

Commit

Permalink
Fix pasting inline code blocks (#2607)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fantactuka
fantactuka authored Jul 7, 2022
1 parent 1d9750d commit 85f1067
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 4 deletions.
18 changes: 14 additions & 4 deletions packages/lexical-code/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,10 +265,20 @@ export class CodeNode extends ElementNode {

static importDOM(): DOMConversionMap | null {
return {
code: (node: Node) => ({
conversion: convertPreElement,
priority: 0,
}),
// Typically <pre> is used for code blocks, and <code> for inline code styles
// but if it's a multi line <code> we'll create a block. Pass through to
// inline format handled by TextNode otherwise
code: (node: Node) => {
const isMultiLine =
node.textContent != null && /\r?\n/.test(node.textContent);

return isMultiLine
? {
conversion: convertPreElement,
priority: 1,
}
: null;
},
div: (node: Node) => ({
conversion: convertDivElement,
priority: 1,
Expand Down
34 changes: 34 additions & 0 deletions packages/lexical-playground/__tests__/e2e/CodeBlock.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1004,6 +1004,40 @@ test.describe('CodeBlock', () => {
name: 'GitHub / Gist',
pastedHTML: `<meta charset='utf-8'><table class="highlight tab-size js-file-line-container js-code-nav-container js-tagsearch-file" data-tab-size="8" data-paste-markdown-skip="" data-tagsearch-lang="JavaScript" data-tagsearch-path="example.js" style="box-sizing: border-box; border-spacing: 0px; border-collapse: collapse; tab-size: 8; color: rgb(36, 41, 47); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><tbody style="box-sizing: border-box;"><tr style="box-sizing: border-box;"><td id="file-example-js-LC1" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"><span class="pl-k" style="box-sizing: border-box; color: var(--color-prettylights-syntax-keyword);">function</span> <span class="pl-en" style="box-sizing: border-box; color: var(--color-prettylights-syntax-entity);">run</span><span class="pl-kos" style="box-sizing: border-box;">(</span><span class="pl-kos" style="box-sizing: border-box;">)</span> <span class="pl-kos" style="box-sizing: border-box;">{</span></td></tr><tr style="box-sizing: border-box; background-color: transparent;"><td id="file-example-js-L2" class="blob-num js-line-number js-code-nav-line-number" data-line-number="2" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td><td id="file-example-js-LC2" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"> <span class="pl-k" style="box-sizing: border-box; color: var(--color-prettylights-syntax-keyword);">return</span> <span class="pl-kos" style="box-sizing: border-box;">[</span><span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">null</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">undefined</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-c1" style="box-sizing: border-box; color: var(--color-prettylights-syntax-constant);">2</span><span class="pl-kos" style="box-sizing: border-box;">,</span> <span class="pl-s" style="box-sizing: border-box; color: var(--color-prettylights-syntax-string);">""</span><span class="pl-kos" style="box-sizing: border-box;">]</span><span class="pl-kos" style="box-sizing: border-box;">;</span></td></tr><tr style="box-sizing: border-box;"><td id="file-example-js-L3" class="blob-num js-line-number js-code-nav-line-number" data-line-number="3" style="box-sizing: border-box; padding: 0px 10px; width: 50px; min-width: 50px; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; line-height: 20px; color: var(--color-fg-subtle); text-align: right; white-space: nowrap; vertical-align: top; cursor: pointer; user-select: none;"></td><td id="file-example-js-LC3" class="blob-code blob-code-inner js-file-line" style="box-sizing: border-box; padding: 0px 10px; position: relative; line-height: 20px; vertical-align: top; overflow: visible; font-family: ui-monospace, SFMono-Regular, &quot;SF Mono&quot;, Menlo, Consolas, &quot;Liberation Mono&quot;, monospace; font-size: 12px; color: var(--color-fg-default); overflow-wrap: normal; white-space: pre;"><span class="pl-kos" style="box-sizing: border-box;">}</span></td></tr></tbody></table>`,
},
{
expectedHTML: html`
<p class="PlaygroundEditorTheme__paragraph">
<code data-lexical-text="true">
<span class="PlaygroundEditorTheme__textCode">12</span>
</code>
</p>
`,
name: 'Single line <code>',
pastedHTML: `<meta charset='utf-8'><code>12</code>`,
},
{
expectedHTML: html`
<code
class="PlaygroundEditorTheme__code"
spellcheck="false"
data-gutter="12"
data-highlight-language="javascript">
<span
class="PlaygroundEditorTheme__tokenProperty"
data-lexical-text="true">
1
</span>
<br />
<span
class="PlaygroundEditorTheme__tokenProperty"
data-lexical-text="true">
2
</span>
</code>
`,
name: 'Multiline <code>',
pastedHTML: `<meta charset='utf-8'><code>1\n2</code>`,
},
];

CODE_PASTING_TESTS.forEach((testCase, i) => {
Expand Down
5 changes: 5 additions & 0 deletions packages/lexical/src/nodes/LexicalTextNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,10 @@ export class TextNode extends LexicalNode {
conversion: convertBringAttentionToElement,
priority: 0,
}),
code: (node: Node) => ({
conversion: convertTextFormatElement,
priority: 0,
}),
em: (node: Node) => ({
conversion: convertTextFormatElement,
priority: 0,
Expand Down Expand Up @@ -915,6 +919,7 @@ function convertTextDOMNode(domNode: Node): DOMConversionOutput {
return {node: $createTextNode(textContent)};
}
const nodeNameToTextFormat: Record<string, TextFormatType> = {
code: 'code',
em: 'italic',
i: 'italic',
strong: 'bold',
Expand Down

2 comments on commit 85f1067

@vercel
Copy link

@vercel vercel bot commented on 85f1067 Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical – ./packages/lexical-website-new

lexical.dev
lexical-git-main-fbopensource.vercel.app
lexicaljs.com
lexical-fbopensource.vercel.app
lexicaljs.org
www.lexical.dev

@vercel
Copy link

@vercel vercel bot commented on 85f1067 Jul 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lexical-playground – ./packages/lexical-playground

lexical-playground.vercel.app
lexical-playground-fbopensource.vercel.app
playground.lexical.dev
lexical-playground-git-main-fbopensource.vercel.app

Please sign in to comment.