@lexical/code 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LexicalCode.dev.js +76 -24
- package/LexicalCode.prod.js +19 -18
- package/package.json +4 -4
package/LexicalCode.dev.js
CHANGED
|
@@ -376,7 +376,7 @@ function textNodeTransform(node, editor) {
|
|
|
376
376
|
const parentNode = node.getParent();
|
|
377
377
|
|
|
378
378
|
if ($isCodeNode(parentNode)) {
|
|
379
|
-
codeNodeTransform(parentNode);
|
|
379
|
+
codeNodeTransform(parentNode, editor);
|
|
380
380
|
} else if ($isCodeHighlightNode(node)) {
|
|
381
381
|
// When code block converted into paragraph or other element
|
|
382
382
|
// code highlight nodes converted back to normal text
|
|
@@ -411,31 +411,55 @@ function updateCodeGutter(node, editor) {
|
|
|
411
411
|
}
|
|
412
412
|
|
|
413
413
|
codeElement.setAttribute('data-gutter', gutter);
|
|
414
|
-
}
|
|
414
|
+
} // Using `skipTransforms` to prevent extra transforms since reformatting the code
|
|
415
|
+
// will not affect code block content itself.
|
|
416
|
+
//
|
|
417
|
+
// Using extra flag (`isHighlighting`) since both CodeNode and CodeHighlightNode
|
|
418
|
+
// trasnforms might be called at the same time (e.g. new CodeHighlight node inserted) and
|
|
419
|
+
// in both cases we'll rerun whole reformatting over CodeNode, which is redundant.
|
|
420
|
+
// Especially when pasting code into CodeBlock.
|
|
421
|
+
|
|
422
|
+
|
|
423
|
+
let isHighlighting = false;
|
|
415
424
|
|
|
416
425
|
function codeNodeTransform(node, editor) {
|
|
417
|
-
|
|
426
|
+
if (isHighlighting) {
|
|
427
|
+
return;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
isHighlighting = true; // When new code block inserted it might not have language selected
|
|
431
|
+
|
|
418
432
|
if (node.getLanguage() === undefined) {
|
|
419
433
|
node.setLanguage(DEFAULT_CODE_LANGUAGE);
|
|
420
|
-
}
|
|
434
|
+
} // Using nested update call to pass `skipTransforms` since we don't want
|
|
435
|
+
// each individual codehighlight node to be transformed again as it's already
|
|
436
|
+
// in its final state
|
|
421
437
|
|
|
422
|
-
updateAndRetainSelection(node, () => {
|
|
423
|
-
const code = node.getTextContent();
|
|
424
|
-
const tokens = Prism.tokenize(code, Prism.languages[node.getLanguage() || ''] || Prism.languages[DEFAULT_CODE_LANGUAGE]);
|
|
425
|
-
const highlightNodes = getHighlightNodes(tokens);
|
|
426
|
-
const diffRange = getDiffRange(node.getChildren(), highlightNodes);
|
|
427
|
-
const {
|
|
428
|
-
from,
|
|
429
|
-
to,
|
|
430
|
-
nodesForReplacement
|
|
431
|
-
} = diffRange;
|
|
432
|
-
|
|
433
|
-
if (from !== to || nodesForReplacement.length) {
|
|
434
|
-
node.splice(from, to - from, nodesForReplacement);
|
|
435
|
-
return true;
|
|
436
|
-
}
|
|
437
438
|
|
|
438
|
-
|
|
439
|
+
editor.update(() => {
|
|
440
|
+
updateAndRetainSelection(node, () => {
|
|
441
|
+
const code = node.getTextContent();
|
|
442
|
+
const tokens = Prism.tokenize(code, Prism.languages[node.getLanguage() || ''] || Prism.languages[DEFAULT_CODE_LANGUAGE]);
|
|
443
|
+
const highlightNodes = getHighlightNodes(tokens);
|
|
444
|
+
const diffRange = getDiffRange(node.getChildren(), highlightNodes);
|
|
445
|
+
const {
|
|
446
|
+
from,
|
|
447
|
+
to,
|
|
448
|
+
nodesForReplacement
|
|
449
|
+
} = diffRange;
|
|
450
|
+
|
|
451
|
+
if (from !== to || nodesForReplacement.length) {
|
|
452
|
+
node.splice(from, to - from, nodesForReplacement);
|
|
453
|
+
return true;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
return false;
|
|
457
|
+
});
|
|
458
|
+
}, {
|
|
459
|
+
onUpdate: () => {
|
|
460
|
+
isHighlighting = false;
|
|
461
|
+
},
|
|
462
|
+
skipTransforms: true
|
|
439
463
|
});
|
|
440
464
|
}
|
|
441
465
|
|
|
@@ -644,7 +668,7 @@ function handleShiftLines(type, event) {
|
|
|
644
668
|
// We only care about the alt+arrow keys
|
|
645
669
|
const selection = lexical.$getSelection();
|
|
646
670
|
|
|
647
|
-
if (!
|
|
671
|
+
if (!lexical.$isRangeSelection(selection)) {
|
|
648
672
|
return false;
|
|
649
673
|
} // I'm not quite sure why, but it seems like calling anchor.getNode() collapses the selection here
|
|
650
674
|
// So first, get the anchor and the focus, then get their nodes
|
|
@@ -657,12 +681,41 @@ function handleShiftLines(type, event) {
|
|
|
657
681
|
const anchorOffset = anchor.offset;
|
|
658
682
|
const focusOffset = focus.offset;
|
|
659
683
|
const anchorNode = anchor.getNode();
|
|
660
|
-
const focusNode = focus.getNode();
|
|
684
|
+
const focusNode = focus.getNode();
|
|
685
|
+
const arrowIsUp = type === lexical.KEY_ARROW_UP_COMMAND; // Ensure the selection is within the codeblock
|
|
661
686
|
|
|
662
687
|
if (!$isCodeHighlightNode(anchorNode) || !$isCodeHighlightNode(focusNode)) {
|
|
663
688
|
return false;
|
|
664
689
|
}
|
|
665
690
|
|
|
691
|
+
if (!event.altKey) {
|
|
692
|
+
// Handle moving selection out of the code block, given there are no
|
|
693
|
+
// sibling thats can natively take the selection.
|
|
694
|
+
if (selection.isCollapsed()) {
|
|
695
|
+
const codeNode = anchorNode.getParentOrThrow();
|
|
696
|
+
|
|
697
|
+
if (arrowIsUp && anchorOffset === 0 && anchorNode.getPreviousSibling() === null) {
|
|
698
|
+
const codeNodeSibling = codeNode.getPreviousSibling();
|
|
699
|
+
|
|
700
|
+
if (codeNodeSibling === null) {
|
|
701
|
+
codeNode.selectPrevious();
|
|
702
|
+
event.preventDefault();
|
|
703
|
+
return true;
|
|
704
|
+
}
|
|
705
|
+
} else if (!arrowIsUp && anchorOffset === anchorNode.getTextContentSize() && anchorNode.getNextSibling() === null) {
|
|
706
|
+
const codeNodeSibling = codeNode.getNextSibling();
|
|
707
|
+
|
|
708
|
+
if (codeNodeSibling === null) {
|
|
709
|
+
codeNode.selectNext();
|
|
710
|
+
event.preventDefault();
|
|
711
|
+
return true;
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
return false;
|
|
717
|
+
}
|
|
718
|
+
|
|
666
719
|
const start = getFirstCodeHighlightNodeOfLine(anchorNode);
|
|
667
720
|
const end = getLastCodeHighlightNodeOfLine(focusNode);
|
|
668
721
|
|
|
@@ -686,7 +739,6 @@ function handleShiftLines(type, event) {
|
|
|
686
739
|
event.preventDefault();
|
|
687
740
|
event.stopPropagation(); // required to stop cursor movement under Firefox
|
|
688
741
|
|
|
689
|
-
const arrowIsUp = type === lexical.KEY_ARROW_UP_COMMAND;
|
|
690
742
|
const linebreak = arrowIsUp ? start.getPreviousSibling() : end.getNextSibling();
|
|
691
743
|
|
|
692
744
|
if (!lexical.$isLineBreakNode(linebreak)) {
|
|
@@ -737,7 +789,7 @@ function registerCodeHighlighting(editor) {
|
|
|
737
789
|
}
|
|
738
790
|
}
|
|
739
791
|
});
|
|
740
|
-
}), editor.registerNodeTransform(CodeNode, node => codeNodeTransform(node)), editor.registerNodeTransform(lexical.TextNode, node => textNodeTransform(node)), editor.registerNodeTransform(CodeHighlightNode, node => textNodeTransform(node)), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.INDENT_CONTENT_COMMAND), 1), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.OUTDENT_CONTENT_COMMAND), 1), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_UP_COMMAND, payload), 1), editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_DOWN_COMMAND, payload), 1));
|
|
792
|
+
}), editor.registerNodeTransform(CodeNode, node => codeNodeTransform(node, editor)), editor.registerNodeTransform(lexical.TextNode, node => textNodeTransform(node, editor)), editor.registerNodeTransform(CodeHighlightNode, node => textNodeTransform(node, editor)), editor.registerCommand(lexical.INDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.INDENT_CONTENT_COMMAND), 1), editor.registerCommand(lexical.OUTDENT_CONTENT_COMMAND, payload => handleMultilineIndent(lexical.OUTDENT_CONTENT_COMMAND), 1), editor.registerCommand(lexical.KEY_ARROW_UP_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_UP_COMMAND, payload), 1), editor.registerCommand(lexical.KEY_ARROW_DOWN_COMMAND, payload => handleShiftLines(lexical.KEY_ARROW_DOWN_COMMAND, payload), 1));
|
|
741
793
|
}
|
|
742
794
|
|
|
743
795
|
exports.$createCodeHighlightNode = $createCodeHighlightNode;
|
package/LexicalCode.prod.js
CHANGED
|
@@ -6,21 +6,22 @@
|
|
|
6
6
|
*/
|
|
7
7
|
var e=require("prismjs/components/prism-core");require("prismjs/components/prism-clike");require("prismjs/components/prism-javascript");require("prismjs/components/prism-markup");require("prismjs/components/prism-markdown");require("prismjs/components/prism-c");require("prismjs/components/prism-css");require("prismjs/components/prism-objectivec");require("prismjs/components/prism-sql");require("prismjs/components/prism-python");require("prismjs/components/prism-rust");require("prismjs/components/prism-swift");
|
|
8
8
|
var n=require("@lexical/utils"),r=require("lexical");
|
|
9
|
-
class t extends r.TextNode{constructor(a,b
|
|
10
|
-
function u(a,
|
|
11
|
-
class
|
|
12
|
-
return!1}static importDOM(){return{div:()=>({conversion:
|
|
13
|
-
a.anchor.key===this.__key&&a.anchor.offset===
|
|
14
|
-
return!0}setLanguage(a){this.getWritable().__language=a}getLanguage(){return this.getLatest().__language}}function
|
|
15
|
-
function
|
|
16
|
-
function
|
|
17
|
-
function
|
|
18
|
-
|
|
19
|
-
function
|
|
20
|
-
function
|
|
21
|
-
function
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
exports.getCodeLanguages=()=>Object.keys(e.languages).filter(a=>"function"!==typeof e.languages[a]).sort();exports.getDefaultCodeLanguage=()=>"javascript";exports.getFirstCodeHighlightNodeOfLine=
|
|
25
|
-
exports.
|
|
26
|
-
(
|
|
9
|
+
class t extends r.TextNode{constructor(a,c,b){super(a,b);this.__highlightType=c}static getType(){return"code-highlight"}static clone(a){return new t(a.__text,a.__highlightType||void 0,a.__key)}createDOM(a){const c=super.createDOM(a);a=u(a.theme,this.__highlightType);n.addClassNamesToElement(c,a);return c}updateDOM(a,c,b){const d=super.updateDOM(a,c,b);a=u(b.theme,a.__highlightType);b=u(b.theme,this.__highlightType);a!==b&&(a&&n.removeClassNamesFromElement(c,a),b&&n.addClassNamesToElement(c,b));return d}setFormat(){return this.getWritable()}}
|
|
10
|
+
function u(a,c){return c&&a&&a.codeHighlight&&a.codeHighlight[c]}function x(a,c){return new t(a,c)}function y(a){return a instanceof t}
|
|
11
|
+
class z extends r.ElementNode{static getType(){return"code"}static clone(a){return new z(a.__language,a.__key)}constructor(a,c){super(c);this.__language=a}createDOM(a){const c=document.createElement("code");n.addClassNamesToElement(c,a.theme.code);c.setAttribute("spellcheck","false");(a=this.getLanguage())&&c.setAttribute("data-highlight-language",a);return c}updateDOM(a,c){const b=this.__language;a=a.__language;b?b!==a&&c.setAttribute("data-highlight-language",b):a&&c.removeAttribute("data-highlight-language");
|
|
12
|
+
return!1}static importDOM(){return{div:()=>({conversion:B,priority:1}),pre:()=>({conversion:C,priority:0}),table:a=>D(a)?{conversion:E,priority:4}:null,td:a=>{const c=a.closest("table");return a.classList.contains("js-file-line")?{conversion:F,priority:4}:c&&D(c)?{conversion:G,priority:4}:null},tr:a=>(a=a.closest("table"))&&D(a)?{conversion:G,priority:4}:null}}insertNewAfter(a){var c=this.getChildren(),b=c.length;if(2<=b&&"\n"===c[b-1].getTextContent()&&"\n"===c[b-2].getTextContent()&&a.isCollapsed()&&
|
|
13
|
+
a.anchor.key===this.__key&&a.anchor.offset===b)return c[b-1].remove(),c[b-2].remove(),a=r.$createParagraphNode(),this.insertAfter(a),a;c=a.anchor.getNode();var d=H(c);if(null!=d){b=0;for(d=d.getTextContent();b<d.length&&/[\t ]/.test(d[b]);)b+=1;if(0<b)return b=d.substring(0,b),b=x(b),c.insertAfter(b),a.insertNodes([r.$createLineBreakNode()]),b.select(),b}return null}canInsertTab(){return!0}collapseAtStart(){const a=r.$createParagraphNode();this.getChildren().forEach(c=>a.append(c));this.replace(a);
|
|
14
|
+
return!0}setLanguage(a){this.getWritable().__language=a}getLanguage(){return this.getLatest().__language}}function I(a){return new z(a)}function J(a){return a instanceof z}function H(a){let c=null;const b=a.getPreviousSiblings();for(b.push(a);0<b.length&&(a=b.pop(),y(a)&&(c=a),!r.$isLineBreakNode(a)););return c}function K(a){let c=null;const b=a.getNextSiblings();for(b.unshift(a);0<b.length&&(a=b.shift(),y(a)&&(c=a),!r.$isLineBreakNode(a)););return c}function C(){return{node:I()}}
|
|
15
|
+
function B(a){return{after:c=>{const b=a.parentNode;null!=b&&a!==b.lastChild&&c.push(r.$createLineBreakNode());return c},node:null!==a.style.fontFamily.match("monospace")?I():null}}function E(){return{node:I()}}function G(){return{node:null}}function F(a){return{after:c=>{a.parentNode&&a.parentNode.nextSibling&&c.push(r.$createLineBreakNode());return c},node:null}}function D(a){return a.classList.contains("js-file-line-container")}
|
|
16
|
+
function L(a,c){const b=a.getParent();J(b)?M(b,c):y(a)&&a.replace(r.$createTextNode(a.__text))}let N=!1;
|
|
17
|
+
function M(a,c){N||(N=!0,void 0===a.getLanguage()&&a.setLanguage("javascript"),c.update(()=>{O(a,()=>{var b=a.getTextContent();b=e.tokenize(b,e.languages[a.getLanguage()||""]||e.languages.javascript);b=Q(b);var d=a.getChildren();let f=0;for(;f<d.length&&R(d[f],b[f]);)f++;var h=d.length;const m=b.length,g=Math.min(h,m)-f;let k=0;for(;k<g;)if(k++,!R(d[h-k],b[m-k])){k--;break}d=f;h-=k;b=b.slice(f,m-k);const {from:l,to:p,nodesForReplacement:v}={from:d,nodesForReplacement:b,to:h};return l!==p||v.length?
|
|
18
|
+
(a.splice(l,p-l,v),!0):!1})},{onUpdate:()=>{N=!1},skipTransforms:!0}))}function Q(a){const c=[];a.forEach(b=>{if("string"===typeof b){b=b.split("\n");for(var d=0;d<b.length;d++){const f=b[d];f.length&&c.push(x(f));d<b.length-1&&c.push(r.$createLineBreakNode())}}else({content:d}=b),"string"===typeof d?c.push(x(d,b.type)):1===d.length&&"string"===typeof d[0]?c.push(x(d[0],b.type)):c.push(...Q(d))});return c}
|
|
19
|
+
function O(a,c){var b=r.$getSelection();if(r.$isRangeSelection(b)&&b.anchor){b=b.anchor;var d=b.offset,f="element"===b.type&&r.$isLineBreakNode(a.getChildAtIndex(b.offset-1)),h=0;if(!f){const m=b.getNode();h=d+m.getPreviousSiblings().reduce((g,k)=>g+(r.$isLineBreakNode(k)?0:k.getTextContentSize()),0)}c()&&(f?b.getNode().select(d,d):a.getChildren().some(m=>{if(r.$isTextNode(m)){const g=m.getTextContentSize();if(g>=h)return m.select(h,h),!0;h-=g}return!1}))}}
|
|
20
|
+
function R(a,c){return y(a)&&y(c)?a.__text===c.__text&&a.__highlightType===c.__highlightType:r.$isLineBreakNode(a)&&r.$isLineBreakNode(c)?!0:!1}function S(a){var c=r.$getSelection();if(!r.$isRangeSelection(c)||c.isCollapsed())return!1;c=c.getNodes();for(var b=0;b<c.length;b++){var d=c[b];if(!y(d)&&!r.$isLineBreakNode(d))return!1}b=H(c[0]);null!=b&&T(b,a);for(b=1;b<c.length;b++)d=c[b],r.$isLineBreakNode(c[b-1])&&y(d)&&T(d,a);return!0}
|
|
21
|
+
function T(a,c){const b=a.getTextContent();c===r.INDENT_CONTENT_COMMAND?0<b.length&&/\s/.test(b[0])?a.setTextContent("\t"+b):(c=x("\t"),a.insertBefore(c)):0===b.indexOf("\t")&&(1===b.length?a.remove():a.setTextContent(b.substring(1)))}
|
|
22
|
+
function U(a,c){const b=r.$getSelection();if(!r.$isRangeSelection(b))return!1;const {anchor:d,focus:f}=b,h=d.offset,m=f.offset,g=d.getNode(),k=f.getNode();var l=a===r.KEY_ARROW_UP_COMMAND;if(!y(g)||!y(k))return!1;if(!c.altKey){if(b.isCollapsed())if(a=g.getParentOrThrow(),l&&0===h&&null===g.getPreviousSibling()){if(null===a.getPreviousSibling())return a.selectPrevious(),c.preventDefault(),!0}else if(!l&&h===g.getTextContentSize()&&null===g.getNextSibling()&&null===a.getNextSibling())return a.selectNext(),
|
|
23
|
+
c.preventDefault(),!0;return!1}var p=H(g);const v=K(k);if(null==p||null==v)return!1;const A=p.getNodesBetween(v);for(let q=0;q<A.length;q++){const P=A[q];if(!y(P)&&!r.$isLineBreakNode(P))return!1}c.preventDefault();c.stopPropagation();c=l?p.getPreviousSibling():v.getNextSibling();if(!r.$isLineBreakNode(c))return!0;p=l?c.getPreviousSibling():c.getNextSibling();if(null==p)return!0;l=l?H(p):K(p);let w=null!=l?l:p;c.remove();A.forEach(q=>q.remove());a===r.KEY_ARROW_UP_COMMAND?(A.forEach(q=>w.insertBefore(q)),
|
|
24
|
+
w.insertBefore(c)):(w.insertAfter(c),w=c,A.forEach(q=>{w.insertAfter(q);w=q}));b.setTextNodeRange(g,h,k,m);return!0}exports.$createCodeHighlightNode=x;exports.$createCodeNode=I;exports.$isCodeHighlightNode=y;exports.$isCodeNode=J;exports.CodeHighlightNode=t;exports.CodeNode=z;exports.getCodeLanguages=()=>Object.keys(e.languages).filter(a=>"function"!==typeof e.languages[a]).sort();exports.getDefaultCodeLanguage=()=>"javascript";exports.getFirstCodeHighlightNodeOfLine=H;
|
|
25
|
+
exports.getLastCodeHighlightNodeOfLine=K;
|
|
26
|
+
exports.registerCodeHighlighting=function(a){if(!a.hasNodes([z,t]))throw Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");return n.mergeRegister(a.registerMutationListener(z,c=>{a.update(()=>{for(const [f,h]of c)if("destroyed"!==h){var b=r.$getNodeByKey(f);if(null!==b)a:{var d=b;b=a.getElementByKey(d.getKey());if(null===b)break a;d=d.getChildren();const m=d.length;if(m===b.__cachedChildrenLength)break a;b.__cachedChildrenLength=m;let g="1",k=1;for(let l=0;l<m;l++)r.$isLineBreakNode(d[l])&&
|
|
27
|
+
(g+="\n"+ ++k);b.setAttribute("data-gutter",g)}}})}),a.registerNodeTransform(z,c=>M(c,a)),a.registerNodeTransform(r.TextNode,c=>L(c,a)),a.registerNodeTransform(t,c=>L(c,a)),a.registerCommand(r.INDENT_CONTENT_COMMAND,()=>S(r.INDENT_CONTENT_COMMAND),1),a.registerCommand(r.OUTDENT_CONTENT_COMMAND,()=>S(r.OUTDENT_CONTENT_COMMAND),1),a.registerCommand(r.KEY_ARROW_UP_COMMAND,c=>U(r.KEY_ARROW_UP_COMMAND,c),1),a.registerCommand(r.KEY_ARROW_DOWN_COMMAND,c=>U(r.KEY_ARROW_DOWN_COMMAND,c),1))};
|
package/package.json
CHANGED
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
"code"
|
|
9
9
|
],
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"version": "0.2.
|
|
11
|
+
"version": "0.2.1",
|
|
12
12
|
"main": "LexicalCode.js",
|
|
13
13
|
"peerDependencies": {
|
|
14
|
-
"lexical": "0.2.
|
|
14
|
+
"lexical": "0.2.1"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@lexical/utils": "0.2.
|
|
18
|
-
"prismjs": "^1.
|
|
17
|
+
"@lexical/utils": "0.2.1",
|
|
18
|
+
"prismjs": "^1.27.0"
|
|
19
19
|
},
|
|
20
20
|
"repository": {
|
|
21
21
|
"type": "git",
|