@lexical/code-shiki 0.44.1-nightly.20260518.0 → 0.45.0

package/{CodeHighlighterShiki.d.ts → dist/CodeHighlighterShiki.d.ts}

@@ -8,7 +8,14 @@
 import type { LexicalEditor, LexicalNode } from 'lexical';
 import { CodeNode } from '@lexical/code-core';
 export interface Tokenizer {
-    defaultLanguage: string;
+    /**
+     * Language to fall back to when a {@link CodeNode} doesn't carry one.
+     * Set to `null` to opt out of the implicit fallback — code blocks
+     * without a language stay untouched (no `data-language` attribute, no
+     * syntax highlighting) so a markdown round-trip can preserve ``` with
+     * no info string.
+     */
+    defaultLanguage: string | null;
     defaultTheme: string;
     $tokenize: (this: Tokenizer, codeNode: CodeNode, language?: string) => LexicalNode[];
 }

package/{LexicalCodeShiki.dev.js → dist/LexicalCodeShiki.dev.js}

@@ -181,7 +181,8 @@ function mapTokensToLexicalStructure(tokens, diff) {
 const DEFAULT_CODE_THEME = 'one-light';
 const ShikiTokenizer = {
   $tokenize(codeNode, language) {
-    return $getHighlightNodes(codeNode, language || this.defaultLanguage);
+    const lang = language || this.defaultLanguage;
+    return lang === null ? codeCore.$plainifyCodeContent(codeNode.getTextContent()) : $getHighlightNodes(codeNode, lang);
   },
   defaultLanguage: codeCore.DEFAULT_CODE_LANGUAGE,
   defaultTheme: DEFAULT_CODE_THEME
@@ -227,9 +228,12 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
     nodesCurrentlyHighlighting
   } = transformState;
 
-  // When new code block inserted it might not have language selected
+  // When new code block inserted it might not have language selected.
+  // Tokenizers configured with `defaultLanguage: null` opt out of the
+  // implicit fallback — leave the node unset and skip highlighting so
+  // markdown round-trips ``` (no info string) without injecting one.
   let language = node.getLanguage();
-  if (!language) {
+  if (!language && tokenizer.defaultLanguage !== null) {
     language = tokenizer.defaultLanguage;
     node.setLanguage(language);
   }
@@ -243,20 +247,31 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
   let inFlight = false;
   if (!isCodeThemeLoaded(theme)) {
     loadCodeTheme(theme, editor, nodeKey);
-    inFlight = true;
+    // Only the highlight path (a resolved language) consumes the theme. With
+    // no language the text is plainified, which needs no theme, so don't defer
+    // the split on a theme load that won't be used — otherwise a code block
+    // with `defaultLanguage: null` stays an unsplit TextNode until the theme
+    // happens to finish loading.
+    if (language) {
+      inFlight = true;
+    }
   }
 
   // dynamic import of languages
-  if (isCodeLanguageLoaded(language)) {
-    if (!node.getIsSyntaxHighlightSupported()) {
-      node.setIsSyntaxHighlightSupported(true);
-    }
-  } else {
-    if (node.getIsSyntaxHighlightSupported()) {
-      node.setIsSyntaxHighlightSupported(false);
+  if (language) {
+    if (isCodeLanguageLoaded(language)) {
+      if (!node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(true);
+      }
+    } else {
+      if (node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(false);
+      }
+      loadCodeLanguage(language, editor, nodeKey);
+      inFlight = true;
     }
-    loadCodeLanguage(language, editor, nodeKey);
-    inFlight = true;
+  } else if (node.getIsSyntaxHighlightSupported()) {
+    node.setIsSyntaxHighlightSupported(false);
   }
   if (inFlight) {
     return;
@@ -278,7 +293,7 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
       return false;
     }
     const lang = currentNode.getLanguage() || tokenizer.defaultLanguage;
-    const highlightNodes = tokenizer.$tokenize(currentNode, lang);
+    const highlightNodes = tokenizer.$tokenize(currentNode, lang ?? undefined);
     const diffRange = getDiffRange(currentNode.getChildren(), highlightNodes);
     const {
       from,

package/{LexicalCodeShiki.dev.mjs → dist/LexicalCodeShiki.dev.mjs}

@@ -6,7 +6,7 @@
  *
  */
 
-import { $isCodeNode, $createCodeHighlightNode, CodeExtension, CodeIndentExtension, DEFAULT_CODE_LANGUAGE, CodeNode, CodeHighlightNode, $isCodeHighlightNode, registerCodeIndentation } from '@lexical/code-core';
+import { $isCodeNode, $createCodeHighlightNode, CodeExtension, CodeIndentExtension, DEFAULT_CODE_LANGUAGE, CodeNode, CodeHighlightNode, $plainifyCodeContent, $isCodeHighlightNode, registerCodeIndentation } from '@lexical/code-core';
 import { effect, namedSignals } from '@lexical/extension';
 import { $getNodeByKey, $createLineBreakNode, $createTabNode, defineExtension, safeCast, TextNode, mergeRegister, $isLineBreakNode, $onUpdate, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, $isTabNode } from 'lexical';
 import { createHighlighterCoreSync, isSpecialTheme, isSpecialLang, stringifyTokenStyle, getTokenStyleObject } from '@shikijs/core';
@@ -179,7 +179,8 @@ function mapTokensToLexicalStructure(tokens, diff) {
 const DEFAULT_CODE_THEME = 'one-light';
 const ShikiTokenizer = {
   $tokenize(codeNode, language) {
-    return $getHighlightNodes(codeNode, language || this.defaultLanguage);
+    const lang = language || this.defaultLanguage;
+    return lang === null ? $plainifyCodeContent(codeNode.getTextContent()) : $getHighlightNodes(codeNode, lang);
   },
   defaultLanguage: DEFAULT_CODE_LANGUAGE,
   defaultTheme: DEFAULT_CODE_THEME
@@ -225,9 +226,12 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
     nodesCurrentlyHighlighting
   } = transformState;
 
-  // When new code block inserted it might not have language selected
+  // When new code block inserted it might not have language selected.
+  // Tokenizers configured with `defaultLanguage: null` opt out of the
+  // implicit fallback — leave the node unset and skip highlighting so
+  // markdown round-trips ``` (no info string) without injecting one.
   let language = node.getLanguage();
-  if (!language) {
+  if (!language && tokenizer.defaultLanguage !== null) {
     language = tokenizer.defaultLanguage;
     node.setLanguage(language);
   }
@@ -241,20 +245,31 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
   let inFlight = false;
   if (!isCodeThemeLoaded(theme)) {
     loadCodeTheme(theme, editor, nodeKey);
-    inFlight = true;
+    // Only the highlight path (a resolved language) consumes the theme. With
+    // no language the text is plainified, which needs no theme, so don't defer
+    // the split on a theme load that won't be used — otherwise a code block
+    // with `defaultLanguage: null` stays an unsplit TextNode until the theme
+    // happens to finish loading.
+    if (language) {
+      inFlight = true;
+    }
   }
 
   // dynamic import of languages
-  if (isCodeLanguageLoaded(language)) {
-    if (!node.getIsSyntaxHighlightSupported()) {
-      node.setIsSyntaxHighlightSupported(true);
-    }
-  } else {
-    if (node.getIsSyntaxHighlightSupported()) {
-      node.setIsSyntaxHighlightSupported(false);
+  if (language) {
+    if (isCodeLanguageLoaded(language)) {
+      if (!node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(true);
+      }
+    } else {
+      if (node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(false);
+      }
+      loadCodeLanguage(language, editor, nodeKey);
+      inFlight = true;
     }
-    loadCodeLanguage(language, editor, nodeKey);
-    inFlight = true;
+  } else if (node.getIsSyntaxHighlightSupported()) {
+    node.setIsSyntaxHighlightSupported(false);
   }
   if (inFlight) {
     return;
@@ -276,7 +291,7 @@ function $codeNodeTransform(editor, tokenizer, transformState, node) {
       return false;
     }
     const lang = currentNode.getLanguage() || tokenizer.defaultLanguage;
-    const highlightNodes = tokenizer.$tokenize(currentNode, lang);
+    const highlightNodes = tokenizer.$tokenize(currentNode, lang ?? undefined);
     const diffRange = getDiffRange(currentNode.getChildren(), highlightNodes);
     const {
       from,

package/{LexicalCodeShiki.js.flow → dist/LexicalCodeShiki.js.flow}

@@ -19,7 +19,7 @@ import type {CodeNode} from '@lexical/code';
  */
 
 export type Tokenizer = {
-  defaultLanguage: string;
+  defaultLanguage: string | null;
   defaultTheme: string;
   $tokenize: (codeNode: CodeNode, language?: string) => LexicalNode[];
 }

package/dist/LexicalCodeShiki.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+"use strict";var e=require("@lexical/code-core"),t=require("@lexical/extension"),n=require("lexical"),i=require("@shikijs/core"),o=require("@shikijs/engine-javascript"),r=require("shiki/langs"),d=require("shiki/themes");const s=i.createHighlighterCoreSync({engine:o.createJavaScriptRegexEngine(),langs:[],themes:[]});function g(e){const t=/^diff-([\w-]+)/i.exec(e);return t?t[1]:null}function a(e){const t=g(e)||e;return!!i.isSpecialLang(t)||s.getLoadedLanguages().includes(t)}function l(t,i,o){const d=g(t),l=d||t;if(!a(l)){const d=r.bundledLanguagesInfo.find(e=>e.id===l||e.aliases&&e.aliases.includes(l));if(d)return s.loadLanguage(d.import()).then(()=>{i&&o&&i.update(()=>{const i=n.$getNodeByKey(o);e.$isCodeNode(i)&&i.getLanguage()===t&&!i.getIsSyntaxHighlightSupported()&&i.setIsSyntaxHighlightSupported(!0)})})}}function u(e){const t=e;return!!i.isSpecialTheme(t)||s.getLoadedThemes().includes(t)}function c(t,i,o){if(!u(t)){const r=d.bundledThemesInfo.find(e=>e.id===t);if(r)return s.loadTheme(r.import()).then(()=>{i&&o&&i.update(()=>{const t=n.$getNodeByKey(o);e.$isCodeNode(t)&&t.markDirty()})})}}function h(t,o){const r=/^diff-([\w-]+)/i.exec(o),d=t.getTextContent(),g=s.codeToTokens(d,{lang:r?r[1]:o,theme:t.getTheme()||"poimandres"}),{tokens:a,bg:l,fg:u}=g;let c="";return l&&(c+=`background-color: ${l};`),u&&(c+=`color: ${u};`),t.getStyle()!==c&&t.setStyle(c),function(t,o){const r=[];return t.forEach((t,d)=>{d&&r.push(n.$createLineBreakNode()),t.forEach((t,d)=>{let s=t.content;if(o&&0===d&&s.length>0){const t=["+","-",">","<"," "],n=["inserted","deleted","inserted","deleted","unchanged"],i=t.indexOf(s[0]);-1!==i&&(r.push(e.$createCodeHighlightNode(t[i],n[i])),s=s.slice(1))}s.split("\t").forEach((o,d)=>{if(d&&r.push(n.$createTabNode()),""!==o){const n=e.$createCodeHighlightNode(o),d=i.stringifyTokenStyle(t.htmlStyle||i.getTokenStyleObject(t));n.setStyle(d),r.push(n)}})})}),r}(a,!!r)}const f={$tokenize(t,n){const i=n||this.defaultLanguage;return null===i?e.$plainifyCodeContent(t.getTextContent()):h(t,i)},defaultLanguage:e.DEFAULT_CODE_LANGUAGE,defaultTheme:"one-light"};function p(t,i,o,r){const d=r.getParent();e.$isCodeNode(d)?m(t,i,o,d):e.$isCodeHighlightNode(r)&&r.replace(n.$createTextNode(r.__text))}function C(e,t){const i=t.getElementByKey(e.getKey());if(null===i)return;const o=e.getChildren(),r=o.length;if(r===i.__cachedChildrenLength)return;i.__cachedChildrenLength=r;let d="1",s=1;for(let e=0;e<r;e++)n.$isLineBreakNode(o[e])&&(d+="\n"+ ++s);i.setAttribute("data-gutter",d)}function m(t,i,o,r){const d=r.getKey(),{nodesCurrentlyHighlighting:s}=o;let g=r.getLanguage();g||null===i.defaultLanguage||(g=i.defaultLanguage,r.setLanguage(g));let h=r.getTheme();h||(h=i.defaultTheme,r.setTheme(h));let f=!1;u(h)||(c(h,t,d),g&&(f=!0)),g?a(g)?r.getIsSyntaxHighlightSupported()||r.setIsSyntaxHighlightSupported(!0):(r.getIsSyntaxHighlightSupported()&&r.setIsSyntaxHighlightSupported(!1),l(g,t,d),f=!0):r.getIsSyntaxHighlightSupported()&&r.setIsSyntaxHighlightSupported(!1),f||s.has(d)||(s.add(d),o.didTransform||(o.didTransform=!0,n.$onUpdate(()=>{o.didTransform=!1,s.clear()})),function(t,i){const o=n.$getNodeByKey(t);if(!e.$isCodeNode(o)||!o.isAttached())return;const r=n.$getSelection();if(!n.$isRangeSelection(r))return void i();const d=r.anchor,s=d.offset,g="element"===d.type&&n.$isLineBreakNode(o.getChildAtIndex(d.offset-1));let a=0;if(!g){const e=d.getNode();a=s+e.getPreviousSiblings().reduce((e,t)=>e+t.getTextContentSize(),0)}if(!i())return;if(g)return void d.getNode().select(s,s);o.getChildren().some(e=>{const t=n.$isTextNode(e);if(t||n.$isLineBreakNode(e)){const n=e.getTextContentSize();if(t&&n>=a)return e.select(a,a),!0;a-=n}return!1})}(d,()=>{const t=n.$getNodeByKey(d);if(!e.$isCodeNode(t)||!t.isAttached())return!1;const o=t.getLanguage()||i.defaultLanguage,s=i.$tokenize(t,o??void 0),g=function(e,t){let n=0;for(;n<e.length&&x(e[n],t[n]);)n++;const i=e.length,o=t.length,r=Math.min(i,o)-n;let d=0;for(;d<r;)if(d++,!x(e[i-d],t[o-d])){d--;break}const s=n,g=i-d,a=t.slice(n,o-d);return{from:s,nodesForReplacement:a,to:g}}(t.getChildren(),s),{from:a,to:l,nodesForReplacement:u}=g;return!(a===l&&!u.length)&&(r.splice(a,l-a,u),!0)}))}function x(t,i){return e.$isCodeHighlightNode(t)&&e.$isCodeHighlightNode(i)&&t.__text===i.__text&&t.__highlightType===i.__highlightType&&t.__style===i.__style||n.$isTabNode(t)&&n.$isTabNode(i)||n.$isLineBreakNode(t)&&n.$isLineBreakNode(i)}function y(t,i){const o=[];!0!==t._headless&&o.push(t.registerMutationListener(e.CodeNode,e=>{t.getEditorState().read(()=>{for(const[i,o]of e)if("destroyed"!==o){const e=n.$getNodeByKey(i);null!==e&&C(e,t)}})},{skipInitialization:!1}));const r={didTransform:!1,nodesCurrentlyHighlighting:new Set};return o.push(t.registerNodeTransform(e.CodeNode,m.bind(null,t,i,r)),t.registerNodeTransform(n.TextNode,p.bind(null,t,i,r)),t.registerNodeTransform(e.CodeHighlightNode,p.bind(null,t,i,r))),n.mergeRegister(...o)}const N=n.defineExtension({build:(e,n)=>t.namedSignals(n),config:n.safeCast({disabled:!1,tokenizer:f}),dependencies:[e.CodeExtension,e.CodeIndentExtension],name:"@lexical/code-shiki",register:(e,n,i)=>{const o=i.getOutput();return t.effect(()=>{if(!o.disabled.value)return y(e,o.tokenizer.value)})}}),S=n.defineExtension({config:n.safeCast(f),dependencies:[N],init:(e,t,n)=>{n.getDependency(N).config.tokenizer=t},name:"@lexical/code-shiki/legacy"});exports.CodeHighlighterShikiExtension=S,exports.CodeShikiExtension=N,exports.ShikiTokenizer=f,exports.getCodeLanguageOptions=function(){return r.bundledLanguagesInfo.map(e=>[e.id,e.name])},exports.getCodeThemeOptions=function(){return d.bundledThemesInfo.map(e=>[e.id,e.displayName])},exports.isCodeLanguageLoaded=a,exports.loadCodeLanguage=l,exports.loadCodeTheme=c,exports.normalizeCodeLanguage=function(e){const t=e,n=r.bundledLanguagesInfo.find(e=>e.id===t||e.aliases&&e.aliases.includes(t));return n?n.id:e},exports.registerCodeHighlighting=function(t,i=f){if(!t.hasNodes([e.CodeNode,e.CodeHighlightNode]))throw new Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");return n.mergeRegister(y(t,i),e.registerCodeIndentation(t))};

package/dist/LexicalCodeShiki.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{$isCodeNode as e,$createCodeHighlightNode as t,CodeExtension as n,CodeIndentExtension as i,DEFAULT_CODE_LANGUAGE as o,CodeNode as r,CodeHighlightNode as s,$plainifyCodeContent as l,$isCodeHighlightNode as d,registerCodeIndentation as g}from"@lexical/code-core";import{effect as a,namedSignals as u}from"@lexical/extension";import{$getNodeByKey as c,$createLineBreakNode as f,$createTabNode as h,defineExtension as p,safeCast as m,TextNode as y,mergeRegister as x,$isLineBreakNode as S,$onUpdate as T,$createTextNode as _,$getSelection as k,$isRangeSelection as L,$isTextNode as C,$isTabNode as H}from"lexical";import{createHighlighterCoreSync as b,isSpecialTheme as I,isSpecialLang as N,stringifyTokenStyle as z,getTokenStyleObject as v}from"@shikijs/core";import{createJavaScriptRegexEngine as E}from"@shikijs/engine-javascript";import{bundledLanguagesInfo as w}from"shiki/langs";import{bundledThemesInfo as A}from"shiki/themes";const $=b({engine:E(),langs:[],themes:[]});function j(e){const t=/^diff-([\w-]+)/i.exec(e);return t?t[1]:null}function K(e){const t=j(e)||e;return!!N(t)||$.getLoadedLanguages().includes(t)}function P(t,n,i){const o=j(t),r=o||t;if(!K(r)){const o=w.find(e=>e.id===r||e.aliases&&e.aliases.includes(r));if(o)return $.loadLanguage(o.import()).then(()=>{n&&i&&n.update(()=>{const n=c(i);e(n)&&n.getLanguage()===t&&!n.getIsSyntaxHighlightSupported()&&n.setIsSyntaxHighlightSupported(!0)})})}}function D(e){const t=e;return!!I(t)||$.getLoadedThemes().includes(t)}function F(t,n,i){if(!D(t)){const o=A.find(e=>e.id===t);if(o)return $.loadTheme(o.import()).then(()=>{n&&i&&n.update(()=>{const t=c(i);e(t)&&t.markDirty()})})}}function M(){return w.map(e=>[e.id,e.name])}function O(){return A.map(e=>[e.id,e.displayName])}function R(e){const t=e,n=w.find(e=>e.id===t||e.aliases&&e.aliases.includes(t));return n?n.id:e}function B(e,n){const i=/^diff-([\w-]+)/i.exec(n),o=e.getTextContent(),r=$.codeToTokens(o,{lang:i?i[1]:n,theme:e.getTheme()||"poimandres"}),{tokens:s,bg:l,fg:d}=r;let g="";return l&&(g+=`background-color: ${l};`),d&&(g+=`color: ${d};`),e.getStyle()!==g&&e.setStyle(g),function(e,n){const i=[];return e.forEach((e,o)=>{o&&i.push(f()),e.forEach((e,o)=>{let r=e.content;if(n&&0===o&&r.length>0){const e=["+","-",">","<"," "],n=["inserted","deleted","inserted","deleted","unchanged"],o=e.indexOf(r[0]);-1!==o&&(i.push(t(e[o],n[o])),r=r.slice(1))}r.split("\t").forEach((n,o)=>{if(o&&i.push(h()),""!==n){const o=t(n),r=z(e.htmlStyle||v(e));o.setStyle(r),i.push(o)}})})}),i}(s,!!i)}const q={$tokenize(e,t){const n=t||this.defaultLanguage;return null===n?l(e.getTextContent()):B(e,n)},defaultLanguage:o,defaultTheme:"one-light"};function G(t,n,i,o){const r=o.getParent();e(r)?Q(t,n,i,r):d(o)&&o.replace(_(o.__text))}function J(e,t){const n=t.getElementByKey(e.getKey());if(null===n)return;const i=e.getChildren(),o=i.length;if(o===n.__cachedChildrenLength)return;n.__cachedChildrenLength=o;let r="1",s=1;for(let e=0;e<o;e++)S(i[e])&&(r+="\n"+ ++s);n.setAttribute("data-gutter",r)}function Q(t,n,i,o){const r=o.getKey(),{nodesCurrentlyHighlighting:s}=i;let l=o.getLanguage();l||null===n.defaultLanguage||(l=n.defaultLanguage,o.setLanguage(l));let d=o.getTheme();d||(d=n.defaultTheme,o.setTheme(d));let g=!1;D(d)||(F(d,t,r),l&&(g=!0)),l?K(l)?o.getIsSyntaxHighlightSupported()||o.setIsSyntaxHighlightSupported(!0):(o.getIsSyntaxHighlightSupported()&&o.setIsSyntaxHighlightSupported(!1),P(l,t,r),g=!0):o.getIsSyntaxHighlightSupported()&&o.setIsSyntaxHighlightSupported(!1),g||s.has(r)||(s.add(r),i.didTransform||(i.didTransform=!0,T(()=>{i.didTransform=!1,s.clear()})),function(t,n){const i=c(t);if(!e(i)||!i.isAttached())return;const o=k();if(!L(o))return void n();const r=o.anchor,s=r.offset,l="element"===r.type&&S(i.getChildAtIndex(r.offset-1));let d=0;if(!l){const e=r.getNode();d=s+e.getPreviousSiblings().reduce((e,t)=>e+t.getTextContentSize(),0)}if(!n())return;if(l)return void r.getNode().select(s,s);i.getChildren().some(e=>{const t=C(e);if(t||S(e)){const n=e.getTextContentSize();if(t&&n>=d)return e.select(d,d),!0;d-=n}return!1})}(r,()=>{const t=c(r);if(!e(t)||!t.isAttached())return!1;const i=t.getLanguage()||n.defaultLanguage,s=n.$tokenize(t,i??void 0),l=function(e,t){let n=0;for(;n<e.length&&U(e[n],t[n]);)n++;const i=e.length,o=t.length,r=Math.min(i,o)-n;let s=0;for(;s<r;)if(s++,!U(e[i-s],t[o-s])){s--;break}const l=n,d=i-s,g=t.slice(n,o-s);return{from:l,nodesForReplacement:g,to:d}}(t.getChildren(),s),{from:d,to:g,nodesForReplacement:a}=l;return!(d===g&&!a.length)&&(o.splice(d,g-d,a),!0)}))}function U(e,t){return d(e)&&d(t)&&e.__text===t.__text&&e.__highlightType===t.__highlightType&&e.__style===t.__style||H(e)&&H(t)||S(e)&&S(t)}function V(e,t){const n=[];!0!==e._headless&&n.push(e.registerMutationListener(r,t=>{e.getEditorState().read(()=>{for(const[n,i]of t)if("destroyed"!==i){const t=c(n);null!==t&&J(t,e)}})},{skipInitialization:!1}));const i={didTransform:!1,nodesCurrentlyHighlighting:new Set};return n.push(e.registerNodeTransform(r,Q.bind(null,e,t,i)),e.registerNodeTransform(y,G.bind(null,e,t,i)),e.registerNodeTransform(s,G.bind(null,e,t,i))),x(...n)}function W(e,t=q){if(!e.hasNodes([r,s]))throw new Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");return x(V(e,t),g(e))}const X=p({build:(e,t)=>u(t),config:m({disabled:!1,tokenizer:q}),dependencies:[n,i],name:"@lexical/code-shiki",register:(e,t,n)=>{const i=n.getOutput();return a(()=>{if(!i.disabled.value)return V(e,i.tokenizer.value)})}}),Y=p({config:m(q),dependencies:[X],init:(e,t,n)=>{n.getDependency(X).config.tokenizer=t},name:"@lexical/code-shiki/legacy"});export{Y as CodeHighlighterShikiExtension,X as CodeShikiExtension,q as ShikiTokenizer,M as getCodeLanguageOptions,O as getCodeThemeOptions,K as isCodeLanguageLoaded,P as loadCodeLanguage,F as loadCodeTheme,R as normalizeCodeLanguage,W as registerCodeHighlighting};

package/package.json

@@ -8,18 +8,18 @@
     "code"
   ],
   "license": "MIT",
-  "version": "0.44.1-nightly.20260518.0",
-  "main": "LexicalCodeShiki.js",
-  "types": "index.d.ts",
+  "version": "0.45.0",
+  "main": "./dist/LexicalCodeShiki.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@lexical/code-core": "0.44.1-nightly.20260518.0",
-    "@lexical/extension": "0.44.1-nightly.20260518.0",
     "@shikijs/core": "^4.0.2",
     "@shikijs/engine-javascript": "^4.0.2",
     "@shikijs/langs": "^4.0.2",
     "@shikijs/themes": "^4.0.2",
-    "lexical": "0.44.1-nightly.20260518.0",
-    "shiki": "^4.0.2"
+    "shiki": "^4.0.2",
+    "@lexical/code-core": "0.45.0",
+    "lexical": "0.45.0",
+    "@lexical/extension": "0.45.0"
   },
   "repository": {
     "type": "git",
@@ -29,23 +29,37 @@
   "devDependencies": {
     "@shikijs/types": "^4.0.2"
   },
-  "module": "LexicalCodeShiki.mjs",
+  "module": "./dist/LexicalCodeShiki.mjs",
   "sideEffects": true,
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": {
-        "types": "./index.d.ts",
-        "development": "./LexicalCodeShiki.dev.mjs",
-        "production": "./LexicalCodeShiki.prod.mjs",
-        "node": "./LexicalCodeShiki.node.mjs",
-        "default": "./LexicalCodeShiki.mjs"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalCodeShiki.dev.mjs",
+        "production": "./dist/LexicalCodeShiki.prod.mjs",
+        "node": "./dist/LexicalCodeShiki.node.mjs",
+        "default": "./dist/LexicalCodeShiki.mjs"
       },
       "require": {
-        "types": "./index.d.ts",
-        "development": "./LexicalCodeShiki.dev.js",
-        "production": "./LexicalCodeShiki.prod.js",
-        "default": "./LexicalCodeShiki.js"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalCodeShiki.dev.js",
+        "production": "./dist/LexicalCodeShiki.prod.js",
+        "default": "./dist/LexicalCodeShiki.js"
       }
     }
-  }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__bench__",
+    "!src/__mocks__",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.bench.ts",
+    "!src/**/*.bench.tsx",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/src/CodeHighlighterShiki.ts

@@ -0,0 +1,506 @@
+/**
+ * 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 type {LexicalEditor, LexicalNode, NodeKey} from 'lexical';
+
+import {
+  $isCodeHighlightNode,
+  $isCodeNode,
+  $plainifyCodeContent,
+  CodeExtension,
+  CodeHighlightNode,
+  CodeIndentExtension,
+  CodeNode,
+  DEFAULT_CODE_LANGUAGE,
+  registerCodeIndentation,
+} from '@lexical/code-core';
+import {effect, namedSignals} from '@lexical/extension';
+import {
+  $createTextNode,
+  $getNodeByKey,
+  $getSelection,
+  $isLineBreakNode,
+  $isRangeSelection,
+  $isTabNode,
+  $isTextNode,
+  $onUpdate,
+  defineExtension,
+  mergeRegister,
+  safeCast,
+  TextNode,
+} from 'lexical';
+
+import {
+  $getHighlightNodes,
+  isCodeLanguageLoaded,
+  isCodeThemeLoaded,
+  loadCodeLanguage,
+  loadCodeTheme,
+} from './FacadeShiki';
+
+export interface Tokenizer {
+  /**
+   * Language to fall back to when a {@link CodeNode} doesn't carry one.
+   * Set to `null` to opt out of the implicit fallback — code blocks
+   * without a language stay untouched (no `data-language` attribute, no
+   * syntax highlighting) so a markdown round-trip can preserve ``` with
+   * no info string.
+   */
+  defaultLanguage: string | null;
+  defaultTheme: string;
+  $tokenize: (
+    this: Tokenizer,
+    codeNode: CodeNode,
+    language?: string,
+  ) => LexicalNode[];
+}
+
+const DEFAULT_CODE_THEME = 'one-light';
+
+export const ShikiTokenizer: Tokenizer = {
+  $tokenize(
+    this: Tokenizer,
+    codeNode: CodeNode,
+    language?: string,
+  ): LexicalNode[] {
+    const lang = language || this.defaultLanguage;
+    return lang === null
+      ? $plainifyCodeContent(codeNode.getTextContent())
+      : $getHighlightNodes(codeNode, lang);
+  },
+  defaultLanguage: DEFAULT_CODE_LANGUAGE,
+  defaultTheme: DEFAULT_CODE_THEME,
+};
+
+function $textNodeTransform(
+  editor: LexicalEditor,
+  tokenizer: Tokenizer,
+  transformState: TransformState,
+  node: TextNode,
+): void {
+  // Since CodeNode has flat children structure we only need to check
+  // if node's parent is a code node and run highlighting if so
+  const parentNode = node.getParent();
+  if ($isCodeNode(parentNode)) {
+    $codeNodeTransform(editor, tokenizer, transformState, parentNode);
+  } else if ($isCodeHighlightNode(node)) {
+    // When code block converted into paragraph or other element
+    // code highlight nodes converted back to normal text
+    node.replace($createTextNode(node.__text));
+  }
+}
+
+function updateCodeGutter(node: CodeNode, editor: LexicalEditor): void {
+  const codeElement = editor.getElementByKey(node.getKey());
+  if (codeElement === null) {
+    return;
+  }
+  const children = node.getChildren();
+  const childrenLength = children.length;
+  // @ts-ignore: internal field
+  if (childrenLength === codeElement.__cachedChildrenLength) {
+    // Avoid updating the attribute if the children length hasn't changed.
+    return;
+  }
+  // @ts-ignore:: internal field
+  codeElement.__cachedChildrenLength = childrenLength;
+  let gutter = '1';
+  let count = 1;
+  for (let i = 0; i < childrenLength; i++) {
+    if ($isLineBreakNode(children[i])) {
+      gutter += '\n' + ++count;
+    }
+  }
+  codeElement.setAttribute('data-gutter', gutter);
+}
+
+interface TransformState {
+  didTransform: boolean;
+  // Using extra cache (`nodesCurrentlyHighlighting`) since both CodeNode and CodeHighlightNode
+  // transforms might be called at the same time (e.g. new CodeHighlight node inserted) and
+  // in both cases we'll rerun whole reformatting over CodeNode, which is redundant.
+  // Especially when pasting code into CodeBlock.
+  nodesCurrentlyHighlighting: Set<NodeKey>;
+}
+
+function $codeNodeTransform(
+  editor: LexicalEditor,
+  tokenizer: Tokenizer,
+  transformState: TransformState,
+  node: CodeNode,
+) {
+  const nodeKey = node.getKey();
+  const {nodesCurrentlyHighlighting} = transformState;
+
+  // When new code block inserted it might not have language selected.
+  // Tokenizers configured with `defaultLanguage: null` opt out of the
+  // implicit fallback — leave the node unset and skip highlighting so
+  // markdown round-trips ``` (no info string) without injecting one.
+  let language = node.getLanguage();
+  if (!language && tokenizer.defaultLanguage !== null) {
+    language = tokenizer.defaultLanguage;
+    node.setLanguage(language);
+  }
+
+  let theme = node.getTheme();
+  if (!theme) {
+    theme = tokenizer.defaultTheme;
+    node.setTheme(theme);
+  }
+
+  // dynamic import of themes
+  let inFlight = false;
+  if (!isCodeThemeLoaded(theme)) {
+    loadCodeTheme(theme, editor, nodeKey);
+    // Only the highlight path (a resolved language) consumes the theme. With
+    // no language the text is plainified, which needs no theme, so don't defer
+    // the split on a theme load that won't be used — otherwise a code block
+    // with `defaultLanguage: null` stays an unsplit TextNode until the theme
+    // happens to finish loading.
+    if (language) {
+      inFlight = true;
+    }
+  }
+
+  // dynamic import of languages
+  if (language) {
+    if (isCodeLanguageLoaded(language)) {
+      if (!node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(true);
+      }
+    } else {
+      if (node.getIsSyntaxHighlightSupported()) {
+        node.setIsSyntaxHighlightSupported(false);
+      }
+      loadCodeLanguage(language, editor, nodeKey);
+      inFlight = true;
+    }
+  } else if (node.getIsSyntaxHighlightSupported()) {
+    node.setIsSyntaxHighlightSupported(false);
+  }
+
+  if (inFlight) {
+    return;
+  }
+
+  if (nodesCurrentlyHighlighting.has(nodeKey)) {
+    return;
+  }
+
+  nodesCurrentlyHighlighting.add(nodeKey);
+  if (!transformState.didTransform) {
+    transformState.didTransform = true;
+    $onUpdate(() => {
+      transformState.didTransform = false;
+      nodesCurrentlyHighlighting.clear();
+    });
+  }
+
+  $updateAndRetainSelection(nodeKey, () => {
+    const currentNode = $getNodeByKey(nodeKey);
+
+    if (!$isCodeNode(currentNode) || !currentNode.isAttached()) {
+      return false;
+    }
+
+    const lang = currentNode.getLanguage() || tokenizer.defaultLanguage;
+    const highlightNodes = tokenizer.$tokenize(currentNode, lang ?? undefined);
+    const diffRange = getDiffRange(currentNode.getChildren(), highlightNodes);
+    const {from, to, nodesForReplacement} = diffRange;
+
+    if (from !== to || nodesForReplacement.length) {
+      node.splice(from, to - from, nodesForReplacement);
+      return true;
+    }
+
+    return false;
+  });
+}
+
+// Wrapping update function into selection retainer, that tries to keep cursor at the same
+// position as before.
+function $updateAndRetainSelection(
+  nodeKey: NodeKey,
+  updateFn: () => boolean,
+): void {
+  const node = $getNodeByKey(nodeKey);
+  if (!$isCodeNode(node) || !node.isAttached()) {
+    return;
+  }
+  const selection = $getSelection();
+  // If it's not range selection (or null selection) there's no need to change it,
+  // but we can still run highlighting logic
+  if (!$isRangeSelection(selection)) {
+    updateFn();
+    return;
+  }
+
+  const anchor = selection.anchor;
+  const anchorOffset = anchor.offset;
+  const isNewLineAnchor =
+    anchor.type === 'element' &&
+    $isLineBreakNode(node.getChildAtIndex(anchor.offset - 1));
+  let textOffset = 0;
+
+  // Calculating previous text offset (all text node prior to anchor + anchor own text offset)
+  if (!isNewLineAnchor) {
+    const anchorNode = anchor.getNode();
+    textOffset =
+      anchorOffset +
+      anchorNode.getPreviousSiblings().reduce((offset, _node) => {
+        return offset + _node.getTextContentSize();
+      }, 0);
+  }
+
+  const hasChanges = updateFn();
+  if (!hasChanges) {
+    return;
+  }
+
+  // Non-text anchors only happen for line breaks, otherwise
+  // selection will be within text node (code highlight node)
+  if (isNewLineAnchor) {
+    anchor.getNode().select(anchorOffset, anchorOffset);
+    return;
+  }
+
+  // If it was non-element anchor then we walk through child nodes
+  // and looking for a position of original text offset
+  node.getChildren().some(_node => {
+    const isText = $isTextNode(_node);
+    if (isText || $isLineBreakNode(_node)) {
+      const textContentSize = _node.getTextContentSize();
+      if (isText && textContentSize >= textOffset) {
+        _node.select(textOffset, textOffset);
+        return true;
+      }
+      textOffset -= textContentSize;
+    }
+    return false;
+  });
+}
+
+// Finds minimal diff range between two nodes lists. It returns from/to range boundaries of prevNodes
+// that needs to be replaced with `nodes` (subset of nextNodes) to make prevNodes equal to nextNodes.
+function getDiffRange(
+  prevNodes: Array<LexicalNode>,
+  nextNodes: Array<LexicalNode>,
+): {
+  from: number;
+  nodesForReplacement: Array<LexicalNode>;
+  to: number;
+} {
+  let leadingMatch = 0;
+  while (leadingMatch < prevNodes.length) {
+    if (!isEqual(prevNodes[leadingMatch], nextNodes[leadingMatch])) {
+      break;
+    }
+    leadingMatch++;
+  }
+
+  const prevNodesLength = prevNodes.length;
+  const nextNodesLength = nextNodes.length;
+  const maxTrailingMatch =
+    Math.min(prevNodesLength, nextNodesLength) - leadingMatch;
+
+  let trailingMatch = 0;
+  while (trailingMatch < maxTrailingMatch) {
+    trailingMatch++;
+    if (
+      !isEqual(
+        prevNodes[prevNodesLength - trailingMatch],
+        nextNodes[nextNodesLength - trailingMatch],
+      )
+    ) {
+      trailingMatch--;
+      break;
+    }
+  }
+
+  const from = leadingMatch;
+  const to = prevNodesLength - trailingMatch;
+  const nodesForReplacement = nextNodes.slice(
+    leadingMatch,
+    nextNodesLength - trailingMatch,
+  );
+  return {
+    from,
+    nodesForReplacement,
+    to,
+  };
+}
+
+function isEqual(nodeA: LexicalNode, nodeB: LexicalNode): boolean {
+  // Only checking for code highlight nodes, tabs and linebreaks. If it's regular text node
+  // returning false so that it's transformed into code highlight node
+  return (
+    ($isCodeHighlightNode(nodeA) &&
+      $isCodeHighlightNode(nodeB) &&
+      nodeA.__text === nodeB.__text &&
+      nodeA.__highlightType === nodeB.__highlightType &&
+      nodeA.__style === nodeB.__style) ||
+    ($isTabNode(nodeA) && $isTabNode(nodeB)) ||
+    ($isLineBreakNode(nodeA) && $isLineBreakNode(nodeB))
+  );
+}
+
+/**
+ * @internal
+ * Register only the Shiki highlighting transforms and the gutter
+ * mutation listener. No keyboard / indent handlers — those are the
+ * responsibility of
+ * {@link "@lexical/code-core".registerCodeIndentation} /
+ * {@link "@lexical/code-core".CodeIndentExtension}.
+ *
+ * Used by {@link CodeShikiExtension}, whose `CodeIndentExtension`
+ * dependency handles the indent side. The legacy
+ * {@link registerCodeHighlighting} wrapper combines this helper with
+ * `registerCodeIndentation` for direct callers that want the original
+ * single-call setup.
+ *
+ * Exported for use by the package's own unit tests; not re-exported
+ * from the package entry point.
+ */
+export function registerHighlightingOnly(
+  editor: LexicalEditor,
+  tokenizer: Tokenizer,
+): () => void {
+  const registrations = [];
+
+  // Only register the mutation listener if not in headless mode
+  if (editor._headless !== true) {
+    registrations.push(
+      editor.registerMutationListener(
+        CodeNode,
+        mutations => {
+          editor.getEditorState().read(() => {
+            for (const [key, type] of mutations) {
+              if (type !== 'destroyed') {
+                const node = $getNodeByKey(key);
+                if (node !== null) {
+                  updateCodeGutter(node as CodeNode, editor);
+                }
+              }
+            }
+          });
+        },
+        {skipInitialization: false},
+      ),
+    );
+  }
+
+  const transformState: TransformState = {
+    didTransform: false,
+    nodesCurrentlyHighlighting: new Set(),
+  };
+  registrations.push(
+    editor.registerNodeTransform(
+      CodeNode,
+      $codeNodeTransform.bind(null, editor, tokenizer, transformState),
+    ),
+    editor.registerNodeTransform(
+      TextNode,
+      $textNodeTransform.bind(null, editor, tokenizer, transformState),
+    ),
+    editor.registerNodeTransform(
+      CodeHighlightNode,
+      $textNodeTransform.bind(null, editor, tokenizer, transformState),
+    ),
+  );
+
+  return mergeRegister(...registrations);
+}
+
+/**
+ * Register the Shiki tokenizer-driven highlighting on the editor along
+ * with the indent / Tab / arrow-key keyboard handlers. This function
+ * is provided for legacy code that has not upgraded to using
+ * {@link CodeShikiExtension}.
+ */
+export function registerCodeHighlighting(
+  editor: LexicalEditor,
+  tokenizer: Tokenizer = ShikiTokenizer,
+): () => void {
+  if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
+    throw new Error(
+      'CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor',
+    );
+  }
+  return mergeRegister(
+    registerHighlightingOnly(editor, tokenizer),
+    registerCodeIndentation(editor),
+  );
+}
+
+export interface CodeShikiConfig {
+  /**
+   * When true, the Shiki code highlighter is not registered on the editor.
+   * This signal can be flipped at runtime to enable or disable the
+   * highlighter, for example to switch between the Prism and Shiki
+   * highlighters without rebuilding the editor.
+   */
+  disabled: boolean;
+  tokenizer: Tokenizer;
+}
+
+/**
+ * Add code highlighting support for code blocks with Shiki.
+ *
+ * {@link CodeExtension} is a dependency, so the required `CodeNode` and
+ * `CodeHighlightNode` nodes are registered automatically.
+ * {@link CodeIndentExtension} is also a dependency, so Tab / Shift+Tab
+ * and the related keyboard handlers are activated automatically. Set
+ * `tabSize` on `CodeIndentExtension` to enable space-indent outdent.
+ */
+export const CodeShikiExtension = defineExtension({
+  build: (editor, config) => namedSignals(config),
+  config: safeCast<CodeShikiConfig>({
+    disabled: false,
+    tokenizer: ShikiTokenizer,
+  }),
+  dependencies: [CodeExtension, CodeIndentExtension],
+  name: '@lexical/code-shiki',
+  register: (editor, config, state) => {
+    const stores = state.getOutput();
+    return effect(() => {
+      if (stores.disabled.value) {
+        return;
+      }
+      return registerHighlightingOnly(editor, stores.tokenizer.value);
+    });
+  },
+});
+
+/**
+ * @deprecated Use {@link CodeShikiExtension} instead. This type is a
+ * flat alias for {@link Tokenizer} kept for backward compatibility with
+ * {@link CodeHighlighterShikiExtension}.
+ */
+export type CodeHighlighterShikiConfig = Tokenizer;
+
+/**
+ * @deprecated Use {@link CodeShikiExtension} instead.
+ *
+ * This is a thin backward-compatibility shim that preserves the original
+ * flat {@link Tokenizer} config API. It depends on
+ * {@link CodeShikiExtension} and routes its configured tokenizer to the
+ * underlying extension during `init` (before `CodeShikiExtension` builds),
+ * so consumers using
+ * `configExtension(CodeHighlighterShikiExtension, customTokenizer)`
+ * continue to work without modification.
+ */
+export const CodeHighlighterShikiExtension = defineExtension({
+  config: safeCast<CodeHighlighterShikiConfig>(ShikiTokenizer),
+  dependencies: [CodeShikiExtension],
+  init: (editorConfig, config, state) => {
+    // Forward the flat Tokenizer config to CodeShikiExtension's `tokenizer`
+    // field before it builds.
+    state.getDependency(CodeShikiExtension).config.tokenizer = config;
+  },
+  name: '@lexical/code-shiki/legacy',
+});

package/src/FacadeShiki.ts

@@ -0,0 +1,216 @@
+/**
+ * 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 type {CodeNode} from '@lexical/code-core';
+import type {ThemedToken, TokensResult} from '@shikijs/types';
+import type {LexicalEditor, LexicalNode, NodeKey} from 'lexical';
+
+import {$createCodeHighlightNode, $isCodeNode} from '@lexical/code-core';
+import {
+  createHighlighterCoreSync,
+  getTokenStyleObject,
+  isSpecialLang,
+  isSpecialTheme,
+  stringifyTokenStyle,
+} from '@shikijs/core';
+import {createJavaScriptRegexEngine} from '@shikijs/engine-javascript';
+import {$createLineBreakNode, $createTabNode, $getNodeByKey} from 'lexical';
+import {bundledLanguagesInfo} from 'shiki/langs';
+import {bundledThemesInfo} from 'shiki/themes';
+
+const shiki = createHighlighterCoreSync({
+  engine: createJavaScriptRegexEngine(),
+  langs: [],
+  themes: [],
+});
+
+function getDiffedLanguage(language: string) {
+  const DIFF_LANGUAGE_REGEX = /^diff-([\w-]+)/i;
+  const diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
+  return diffLanguageMatch ? diffLanguageMatch[1] : null;
+}
+
+export function isCodeLanguageLoaded(language: string) {
+  const diffedLanguage = getDiffedLanguage(language);
+  const langId = diffedLanguage || language;
+
+  // handle shiki Hard-coded languages ['ansi', '', 'plaintext', 'txt', 'text', 'plain']
+  if (isSpecialLang(langId)) {
+    return true;
+  }
+
+  // note: getLoadedLanguages() also returns aliases
+  return shiki.getLoadedLanguages().includes(langId);
+}
+
+export function loadCodeLanguage(
+  language: string,
+  editor?: LexicalEditor,
+  codeNodeKey?: NodeKey,
+) {
+  const diffedLanguage = getDiffedLanguage(language);
+  const langId = diffedLanguage ? diffedLanguage : language;
+  if (!isCodeLanguageLoaded(langId)) {
+    const languageInfo = bundledLanguagesInfo.find(
+      desc =>
+        desc.id === langId || (desc.aliases && desc.aliases.includes(langId)),
+    );
+    if (languageInfo) {
+      // in case we arrive here concurrently (not yet loaded language is loaded twice)
+      // shiki's synchronous checks make sure to load it only once
+      return shiki.loadLanguage(languageInfo.import()).then(() => {
+        // here we know that the language is loaded
+        // make sure the code is highlighed with the correct language
+        if (editor && codeNodeKey) {
+          editor.update(() => {
+            const codeNode = $getNodeByKey(codeNodeKey);
+            if (
+              $isCodeNode(codeNode) &&
+              codeNode.getLanguage() === language &&
+              !codeNode.getIsSyntaxHighlightSupported()
+            ) {
+              codeNode.setIsSyntaxHighlightSupported(true);
+            }
+          });
+        }
+      });
+    }
+  }
+}
+
+export function isCodeThemeLoaded(theme: string) {
+  const themeId = theme;
+
+  // handle shiki special theme ['none']
+  if (isSpecialTheme(themeId)) {
+    return true;
+  }
+
+  return shiki.getLoadedThemes().includes(themeId);
+}
+
+export function loadCodeTheme(
+  theme: string,
+  editor?: LexicalEditor,
+  codeNodeKey?: NodeKey,
+) {
+  if (!isCodeThemeLoaded(theme)) {
+    const themeInfo = bundledThemesInfo.find(info => info.id === theme);
+    if (themeInfo) {
+      return shiki.loadTheme(themeInfo.import()).then(() => {
+        if (editor && codeNodeKey) {
+          editor.update(() => {
+            const codeNode = $getNodeByKey(codeNodeKey);
+            if ($isCodeNode(codeNode)) {
+              codeNode.markDirty();
+            }
+          });
+        }
+      });
+    }
+  }
+}
+
+export function getCodeLanguageOptions(): [string, string][] {
+  return bundledLanguagesInfo.map(i => [i.id, i.name]);
+}
+export function getCodeThemeOptions(): [string, string][] {
+  return bundledThemesInfo.map(i => [i.id, i.displayName]);
+}
+
+export function normalizeCodeLanguage(language: string): string {
+  const langId = language;
+  const languageInfo = bundledLanguagesInfo.find(
+    desc =>
+      desc.id === langId || (desc.aliases && desc.aliases.includes(langId)),
+  );
+  if (languageInfo) {
+    return languageInfo.id;
+  }
+  return language;
+}
+
+export function $getHighlightNodes(
+  codeNode: CodeNode,
+  language: string,
+): LexicalNode[] {
+  const DIFF_LANGUAGE_REGEX = /^diff-([\w-]+)/i;
+  const diffLanguageMatch = DIFF_LANGUAGE_REGEX.exec(language);
+  const code: string = codeNode.getTextContent();
+  const tokensResult: TokensResult = shiki.codeToTokens(code, {
+    lang: diffLanguageMatch ? diffLanguageMatch[1] : language,
+    theme: codeNode.getTheme() || 'poimandres',
+  });
+  const {tokens, bg, fg} = tokensResult;
+  let style = '';
+  if (bg) {
+    style += `background-color: ${bg};`;
+  }
+  if (fg) {
+    style += `color: ${fg};`;
+  }
+  if (codeNode.getStyle() !== style) {
+    codeNode.setStyle(style);
+  }
+  return mapTokensToLexicalStructure(tokens, !!diffLanguageMatch);
+}
+
+function mapTokensToLexicalStructure(
+  tokens: ThemedToken[][],
+  diff: boolean,
+): LexicalNode[] {
+  const nodes: LexicalNode[] = [];
+
+  tokens.forEach((line, idx) => {
+    if (idx) {
+      nodes.push($createLineBreakNode());
+    }
+    line.forEach((token, tidx) => {
+      let text = token.content;
+
+      // implement diff-xxxx languages
+      if (diff && tidx === 0 && text.length > 0) {
+        const prefixes = ['+', '-', '>', '<', ' '];
+        const prefixTypes = [
+          'inserted',
+          'deleted',
+          'inserted',
+          'deleted',
+          'unchanged',
+        ];
+        const prefixIndex = prefixes.indexOf(text[0]);
+        if (prefixIndex !== -1) {
+          nodes.push(
+            $createCodeHighlightNode(
+              prefixes[prefixIndex],
+              prefixTypes[prefixIndex],
+            ),
+          );
+          text = text.slice(1);
+        }
+      }
+
+      const parts = text.split('\t');
+      parts.forEach((part: string, pidx: number) => {
+        if (pidx) {
+          nodes.push($createTabNode());
+        }
+        if (part !== '') {
+          const node = $createCodeHighlightNode(part);
+          const style = stringifyTokenStyle(
+            token.htmlStyle || getTokenStyleObject(token),
+          );
+          node.setStyle(style);
+          nodes.push(node);
+        }
+      });
+    });
+  });
+
+  return nodes;
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ */
+
+export {
+  type CodeHighlighterShikiConfig,
+  CodeHighlighterShikiExtension,
+  type CodeShikiConfig,
+  CodeShikiExtension,
+  registerCodeHighlighting,
+  ShikiTokenizer,
+  type Tokenizer,
+} from './CodeHighlighterShiki';
+export {
+  getCodeLanguageOptions,
+  getCodeThemeOptions,
+  isCodeLanguageLoaded,
+  loadCodeLanguage,
+  loadCodeTheme,
+  normalizeCodeLanguage,
+} from './FacadeShiki';

package/LexicalCodeShiki.prod.js

@@ -1,9 +0,0 @@
-/**
- * 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.
- *
- */
-
-"use strict";var e=require("@lexical/code-core"),t=require("@lexical/extension"),n=require("lexical"),i=require("@shikijs/core"),o=require("@shikijs/engine-javascript"),r=require("shiki/langs"),d=require("shiki/themes");const s=i.createHighlighterCoreSync({engine:o.createJavaScriptRegexEngine(),langs:[],themes:[]});function g(e){const t=/^diff-([\w-]+)/i.exec(e);return t?t[1]:null}function a(e){const t=g(e)||e;return!!i.isSpecialLang(t)||s.getLoadedLanguages().includes(t)}function l(t,i,o){const d=g(t),l=d||t;if(!a(l)){const d=r.bundledLanguagesInfo.find(e=>e.id===l||e.aliases&&e.aliases.includes(l));if(d)return s.loadLanguage(d.import()).then(()=>{i&&o&&i.update(()=>{const i=n.$getNodeByKey(o);e.$isCodeNode(i)&&i.getLanguage()===t&&!i.getIsSyntaxHighlightSupported()&&i.setIsSyntaxHighlightSupported(!0)})})}}function u(e){const t=e;return!!i.isSpecialTheme(t)||s.getLoadedThemes().includes(t)}function c(t,i,o){if(!u(t)){const r=d.bundledThemesInfo.find(e=>e.id===t);if(r)return s.loadTheme(r.import()).then(()=>{i&&o&&i.update(()=>{const t=n.$getNodeByKey(o);e.$isCodeNode(t)&&t.markDirty()})})}}function h(t,o){const r=/^diff-([\w-]+)/i.exec(o),d=t.getTextContent(),g=s.codeToTokens(d,{lang:r?r[1]:o,theme:t.getTheme()||"poimandres"}),{tokens:a,bg:l,fg:u}=g;let c="";return l&&(c+=`background-color: ${l};`),u&&(c+=`color: ${u};`),t.getStyle()!==c&&t.setStyle(c),function(t,o){const r=[];return t.forEach((t,d)=>{d&&r.push(n.$createLineBreakNode()),t.forEach((t,d)=>{let s=t.content;if(o&&0===d&&s.length>0){const t=["+","-",">","<"," "],n=["inserted","deleted","inserted","deleted","unchanged"],i=t.indexOf(s[0]);-1!==i&&(r.push(e.$createCodeHighlightNode(t[i],n[i])),s=s.slice(1))}s.split("\t").forEach((o,d)=>{if(d&&r.push(n.$createTabNode()),""!==o){const n=e.$createCodeHighlightNode(o),d=i.stringifyTokenStyle(t.htmlStyle||i.getTokenStyleObject(t));n.setStyle(d),r.push(n)}})})}),r}(a,!!r)}const f={$tokenize(e,t){return h(e,t||this.defaultLanguage)},defaultLanguage:e.DEFAULT_CODE_LANGUAGE,defaultTheme:"one-light"};function p(t,i,o,r){const d=r.getParent();e.$isCodeNode(d)?C(t,i,o,d):e.$isCodeHighlightNode(r)&&r.replace(n.$createTextNode(r.__text))}function m(e,t){const i=t.getElementByKey(e.getKey());if(null===i)return;const o=e.getChildren(),r=o.length;if(r===i.__cachedChildrenLength)return;i.__cachedChildrenLength=r;let d="1",s=1;for(let e=0;e<r;e++)n.$isLineBreakNode(o[e])&&(d+="\n"+ ++s);i.setAttribute("data-gutter",d)}function C(t,i,o,r){const d=r.getKey(),{nodesCurrentlyHighlighting:s}=o;let g=r.getLanguage();g||(g=i.defaultLanguage,r.setLanguage(g));let h=r.getTheme();h||(h=i.defaultTheme,r.setTheme(h));let f=!1;u(h)||(c(h,t,d),f=!0),a(g)?r.getIsSyntaxHighlightSupported()||r.setIsSyntaxHighlightSupported(!0):(r.getIsSyntaxHighlightSupported()&&r.setIsSyntaxHighlightSupported(!1),l(g,t,d),f=!0),f||s.has(d)||(s.add(d),o.didTransform||(o.didTransform=!0,n.$onUpdate(()=>{o.didTransform=!1,s.clear()})),function(t,i){const o=n.$getNodeByKey(t);if(!e.$isCodeNode(o)||!o.isAttached())return;const r=n.$getSelection();if(!n.$isRangeSelection(r))return void i();const d=r.anchor,s=d.offset,g="element"===d.type&&n.$isLineBreakNode(o.getChildAtIndex(d.offset-1));let a=0;if(!g){const e=d.getNode();a=s+e.getPreviousSiblings().reduce((e,t)=>e+t.getTextContentSize(),0)}if(!i())return;if(g)return void d.getNode().select(s,s);o.getChildren().some(e=>{const t=n.$isTextNode(e);if(t||n.$isLineBreakNode(e)){const n=e.getTextContentSize();if(t&&n>=a)return e.select(a,a),!0;a-=n}return!1})}(d,()=>{const t=n.$getNodeByKey(d);if(!e.$isCodeNode(t)||!t.isAttached())return!1;const o=t.getLanguage()||i.defaultLanguage,s=i.$tokenize(t,o),g=function(e,t){let n=0;for(;n<e.length&&x(e[n],t[n]);)n++;const i=e.length,o=t.length,r=Math.min(i,o)-n;let d=0;for(;d<r;)if(d++,!x(e[i-d],t[o-d])){d--;break}const s=n,g=i-d,a=t.slice(n,o-d);return{from:s,nodesForReplacement:a,to:g}}(t.getChildren(),s),{from:a,to:l,nodesForReplacement:u}=g;return!(a===l&&!u.length)&&(r.splice(a,l-a,u),!0)}))}function x(t,i){return e.$isCodeHighlightNode(t)&&e.$isCodeHighlightNode(i)&&t.__text===i.__text&&t.__highlightType===i.__highlightType&&t.__style===i.__style||n.$isTabNode(t)&&n.$isTabNode(i)||n.$isLineBreakNode(t)&&n.$isLineBreakNode(i)}function N(t,i){const o=[];!0!==t._headless&&o.push(t.registerMutationListener(e.CodeNode,e=>{t.getEditorState().read(()=>{for(const[i,o]of e)if("destroyed"!==o){const e=n.$getNodeByKey(i);null!==e&&m(e,t)}})},{skipInitialization:!1}));const r={didTransform:!1,nodesCurrentlyHighlighting:new Set};return o.push(t.registerNodeTransform(e.CodeNode,C.bind(null,t,i,r)),t.registerNodeTransform(n.TextNode,p.bind(null,t,i,r)),t.registerNodeTransform(e.CodeHighlightNode,p.bind(null,t,i,r))),n.mergeRegister(...o)}const y=n.defineExtension({build:(e,n)=>t.namedSignals(n),config:n.safeCast({disabled:!1,tokenizer:f}),dependencies:[e.CodeExtension,e.CodeIndentExtension],name:"@lexical/code-shiki",register:(e,n,i)=>{const o=i.getOutput();return t.effect(()=>{if(!o.disabled.value)return N(e,o.tokenizer.value)})}}),T=n.defineExtension({config:n.safeCast(f),dependencies:[y],init:(e,t,n)=>{n.getDependency(y).config.tokenizer=t},name:"@lexical/code-shiki/legacy"});exports.CodeHighlighterShikiExtension=T,exports.CodeShikiExtension=y,exports.ShikiTokenizer=f,exports.getCodeLanguageOptions=function(){return r.bundledLanguagesInfo.map(e=>[e.id,e.name])},exports.getCodeThemeOptions=function(){return d.bundledThemesInfo.map(e=>[e.id,e.displayName])},exports.isCodeLanguageLoaded=a,exports.loadCodeLanguage=l,exports.loadCodeTheme=c,exports.normalizeCodeLanguage=function(e){const t=e,n=r.bundledLanguagesInfo.find(e=>e.id===t||e.aliases&&e.aliases.includes(t));return n?n.id:e},exports.registerCodeHighlighting=function(t,i=f){if(!t.hasNodes([e.CodeNode,e.CodeHighlightNode]))throw new Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");return n.mergeRegister(N(t,i),e.registerCodeIndentation(t))};

package/LexicalCodeShiki.prod.mjs

@@ -1,9 +0,0 @@
-/**
- * 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{$isCodeNode as e,$createCodeHighlightNode as t,CodeExtension as n,CodeIndentExtension as i,DEFAULT_CODE_LANGUAGE as o,CodeNode as r,CodeHighlightNode as s,$isCodeHighlightNode as l,registerCodeIndentation as d}from"@lexical/code-core";import{effect as a,namedSignals as g}from"@lexical/extension";import{$getNodeByKey as c,$createLineBreakNode as u,$createTabNode as f,defineExtension as h,safeCast as m,TextNode as p,mergeRegister as y,$isLineBreakNode as x,$onUpdate as S,$createTextNode as T,$getSelection as _,$isRangeSelection as k,$isTextNode as L,$isTabNode as C}from"lexical";import{createHighlighterCoreSync as b,isSpecialTheme as H,isSpecialLang as N,stringifyTokenStyle as z,getTokenStyleObject as I}from"@shikijs/core";import{createJavaScriptRegexEngine as v}from"@shikijs/engine-javascript";import{bundledLanguagesInfo as E}from"shiki/langs";import{bundledThemesInfo as w}from"shiki/themes";const A=b({engine:v(),langs:[],themes:[]});function $(e){const t=/^diff-([\w-]+)/i.exec(e);return t?t[1]:null}function j(e){const t=$(e)||e;return!!N(t)||A.getLoadedLanguages().includes(t)}function K(t,n,i){const o=$(t),r=o||t;if(!j(r)){const o=E.find(e=>e.id===r||e.aliases&&e.aliases.includes(r));if(o)return A.loadLanguage(o.import()).then(()=>{n&&i&&n.update(()=>{const n=c(i);e(n)&&n.getLanguage()===t&&!n.getIsSyntaxHighlightSupported()&&n.setIsSyntaxHighlightSupported(!0)})})}}function P(e){const t=e;return!!H(t)||A.getLoadedThemes().includes(t)}function D(t,n,i){if(!P(t)){const o=w.find(e=>e.id===t);if(o)return A.loadTheme(o.import()).then(()=>{n&&i&&n.update(()=>{const t=c(i);e(t)&&t.markDirty()})})}}function F(){return E.map(e=>[e.id,e.name])}function M(){return w.map(e=>[e.id,e.displayName])}function O(e){const t=e,n=E.find(e=>e.id===t||e.aliases&&e.aliases.includes(t));return n?n.id:e}function R(e,n){const i=/^diff-([\w-]+)/i.exec(n),o=e.getTextContent(),r=A.codeToTokens(o,{lang:i?i[1]:n,theme:e.getTheme()||"poimandres"}),{tokens:s,bg:l,fg:d}=r;let a="";return l&&(a+=`background-color: ${l};`),d&&(a+=`color: ${d};`),e.getStyle()!==a&&e.setStyle(a),function(e,n){const i=[];return e.forEach((e,o)=>{o&&i.push(u()),e.forEach((e,o)=>{let r=e.content;if(n&&0===o&&r.length>0){const e=["+","-",">","<"," "],n=["inserted","deleted","inserted","deleted","unchanged"],o=e.indexOf(r[0]);-1!==o&&(i.push(t(e[o],n[o])),r=r.slice(1))}r.split("\t").forEach((n,o)=>{if(o&&i.push(f()),""!==n){const o=t(n),r=z(e.htmlStyle||I(e));o.setStyle(r),i.push(o)}})})}),i}(s,!!i)}const B={$tokenize(e,t){return R(e,t||this.defaultLanguage)},defaultLanguage:o,defaultTheme:"one-light"};function q(t,n,i,o){const r=o.getParent();e(r)?J(t,n,i,r):l(o)&&o.replace(T(o.__text))}function G(e,t){const n=t.getElementByKey(e.getKey());if(null===n)return;const i=e.getChildren(),o=i.length;if(o===n.__cachedChildrenLength)return;n.__cachedChildrenLength=o;let r="1",s=1;for(let e=0;e<o;e++)x(i[e])&&(r+="\n"+ ++s);n.setAttribute("data-gutter",r)}function J(t,n,i,o){const r=o.getKey(),{nodesCurrentlyHighlighting:s}=i;let l=o.getLanguage();l||(l=n.defaultLanguage,o.setLanguage(l));let d=o.getTheme();d||(d=n.defaultTheme,o.setTheme(d));let a=!1;P(d)||(D(d,t,r),a=!0),j(l)?o.getIsSyntaxHighlightSupported()||o.setIsSyntaxHighlightSupported(!0):(o.getIsSyntaxHighlightSupported()&&o.setIsSyntaxHighlightSupported(!1),K(l,t,r),a=!0),a||s.has(r)||(s.add(r),i.didTransform||(i.didTransform=!0,S(()=>{i.didTransform=!1,s.clear()})),function(t,n){const i=c(t);if(!e(i)||!i.isAttached())return;const o=_();if(!k(o))return void n();const r=o.anchor,s=r.offset,l="element"===r.type&&x(i.getChildAtIndex(r.offset-1));let d=0;if(!l){const e=r.getNode();d=s+e.getPreviousSiblings().reduce((e,t)=>e+t.getTextContentSize(),0)}if(!n())return;if(l)return void r.getNode().select(s,s);i.getChildren().some(e=>{const t=L(e);if(t||x(e)){const n=e.getTextContentSize();if(t&&n>=d)return e.select(d,d),!0;d-=n}return!1})}(r,()=>{const t=c(r);if(!e(t)||!t.isAttached())return!1;const i=t.getLanguage()||n.defaultLanguage,s=n.$tokenize(t,i),l=function(e,t){let n=0;for(;n<e.length&&Q(e[n],t[n]);)n++;const i=e.length,o=t.length,r=Math.min(i,o)-n;let s=0;for(;s<r;)if(s++,!Q(e[i-s],t[o-s])){s--;break}const l=n,d=i-s,a=t.slice(n,o-s);return{from:l,nodesForReplacement:a,to:d}}(t.getChildren(),s),{from:d,to:a,nodesForReplacement:g}=l;return!(d===a&&!g.length)&&(o.splice(d,a-d,g),!0)}))}function Q(e,t){return l(e)&&l(t)&&e.__text===t.__text&&e.__highlightType===t.__highlightType&&e.__style===t.__style||C(e)&&C(t)||x(e)&&x(t)}function U(e,t){const n=[];!0!==e._headless&&n.push(e.registerMutationListener(r,t=>{e.getEditorState().read(()=>{for(const[n,i]of t)if("destroyed"!==i){const t=c(n);null!==t&&G(t,e)}})},{skipInitialization:!1}));const i={didTransform:!1,nodesCurrentlyHighlighting:new Set};return n.push(e.registerNodeTransform(r,J.bind(null,e,t,i)),e.registerNodeTransform(p,q.bind(null,e,t,i)),e.registerNodeTransform(s,q.bind(null,e,t,i))),y(...n)}function V(e,t=B){if(!e.hasNodes([r,s]))throw new Error("CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor");return y(U(e,t),d(e))}const W=h({build:(e,t)=>g(t),config:m({disabled:!1,tokenizer:B}),dependencies:[n,i],name:"@lexical/code-shiki",register:(e,t,n)=>{const i=n.getOutput();return a(()=>{if(!i.disabled.value)return U(e,i.tokenizer.value)})}}),X=h({config:m(B),dependencies:[W],init:(e,t,n)=>{n.getDependency(W).config.tokenizer=t},name:"@lexical/code-shiki/legacy"});export{X as CodeHighlighterShikiExtension,W as CodeShikiExtension,B as ShikiTokenizer,F as getCodeLanguageOptions,M as getCodeThemeOptions,j as isCodeLanguageLoaded,K as loadCodeLanguage,D as loadCodeTheme,O as normalizeCodeLanguage,V as registerCodeHighlighting};