tiptap-extension-code-block-shiki 1.0.0 → 1.1.0

package/README.md

@@ -82,6 +82,26 @@ html.dark .tiptap .shiki span {
 }
 ```
 
+### Custom Theme Support
+
+You can optionally supply your own custom themes
+
+```ts
+import type { ThemeRegistration } from 'shiki'
+
+const myTheme: ThemeRegistration = {
+  name: 'my-theme',
+  type: 'dark',
+  colors: { 'editor.background': '#1e1e2e' },
+  tokenColors: [/* ... */]
+}
+
+CodeBlockShiki.configure({
+  defaultTheme: 'my-theme',
+  customThemes: [myTheme],
+})
+```
+
 ## Demo
 
 I posted a small screen recording here: https://mastodon.social/@timomeh/112282962825285237
@@ -102,6 +122,10 @@ Optionally specify themes for light and dark mode. See https://shiki.matsu.io/gu
 
 Which language to use, when no language was provided. See https://shiki.style/languages.
 
+### `customThemes`
+
+Register custom themes. See https://shiki.style/guide/load-theme#load-custom-themes.
+
 ## Notes
 
 ### Lazy loading

package/dist/tiptap-extension-code-block-shiki.d.ts

@@ -2,6 +2,7 @@ import { BundledLanguage } from 'shiki';
 import { BundledTheme } from 'shiki';
 import { CodeBlockOptions } from '@tiptap/extension-code-block';
 import { Node as Node_2 } from '@tiptap/core';
+import { ThemeRegistration } from 'shiki';
 
 declare const CodeBlockShiki: Node_2<CodeBlockShikiOptions, any>;
 export { CodeBlockShiki }
@@ -9,11 +10,12 @@ export default CodeBlockShiki;
 
 export declare interface CodeBlockShikiOptions extends CodeBlockOptions {
     defaultLanguage: BundledLanguage | null | undefined;
-    defaultTheme: BundledTheme;
+    defaultTheme: BundledTheme | (string & {});
     themes: {
         light: BundledTheme;
         dark: BundledTheme;
     } | null | undefined;
+    customThemes: ThemeRegistration[] | null | undefined;
 }
 
 export { }

package/dist/tiptap-extension-code-block-shiki.js

@@ -1,8 +1,8 @@
-import { Node as _, textblockTypeInputRule as N, mergeAttributes as R, findChildren as C } from "@tiptap/core";
-import { Plugin as I, PluginKey as $, TextSelection as M, Selection as W } from "@tiptap/pm/state";
-import { DecorationSet as F, Decoration as A } from "@tiptap/pm/view";
-import { bundledThemes as E, bundledLanguages as H, createHighlighter as j } from "shiki";
-var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create({
+import { Node as R, textblockTypeInputRule as M, mergeAttributes as W, findChildren as v } from "@tiptap/core";
+import { Plugin as $, PluginKey as E, TextSelection as z, Selection as F } from "@tiptap/pm/state";
+import { DecorationSet as j, Decoration as A } from "@tiptap/pm/view";
+import { bundledThemes as H, bundledLanguages as O, createHighlighter as K } from "shiki";
+var B = 4, U = /^```([a-z]+)?[\s\n]$/, V = /^~~~([a-z]+)?[\s\n]$/, J = R.create({
   name: "codeBlock",
   addOptions() {
     return {
@@ -25,12 +25,12 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
       language: {
         default: this.options.defaultLanguage,
         parseHTML: (e) => {
-          var r;
-          const { languageClassPrefix: i } = this.options;
-          if (!i)
+          var o;
+          const { languageClassPrefix: c } = this.options;
+          if (!c)
             return null;
-          const n = [...((r = e.firstElementChild) == null ? void 0 : r.classList) || []].filter((l) => l.startsWith(i)).map((l) => l.replace(i, ""))[0];
-          return n || null;
+          const l = [...((o = e.firstElementChild) == null ? void 0 : o.classList) || []].filter((s) => s.startsWith(c)).map((s) => s.replace(c, ""))[0];
+          return l || null;
         },
         rendered: !1
       }
@@ -44,10 +44,10 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
       }
     ];
   },
-  renderHTML({ node: e, HTMLAttributes: r }) {
+  renderHTML({ node: e, HTMLAttributes: o }) {
     return [
       "pre",
-      R(this.options.HTMLAttributes, r),
+      W(this.options.HTMLAttributes, o),
       [
         "code",
         {
@@ -59,8 +59,8 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
   },
   addCommands() {
     return {
-      setCodeBlock: (e) => ({ commands: r }) => r.setNode(this.name, e),
-      toggleCodeBlock: (e) => ({ commands: r }) => r.toggleNode(this.name, "paragraph", e)
+      setCodeBlock: (e) => ({ commands: o }) => o.setNode(this.name, e),
+      toggleCodeBlock: (e) => ({ commands: o }) => o.toggleNode(this.name, "paragraph", e)
     };
   },
   addKeyboardShortcuts() {
@@ -68,103 +68,103 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
       "Mod-Alt-c": () => this.editor.commands.toggleCodeBlock(),
       // remove code block when at start of document or code block is empty
       Backspace: () => {
-        const { empty: e, $anchor: r } = this.editor.state.selection, i = r.pos === 1;
-        return !e || r.parent.type.name !== this.name ? !1 : i || !r.parent.textContent.length ? this.editor.commands.clearNodes() : !1;
+        const { empty: e, $anchor: o } = this.editor.state.selection, c = o.pos === 1;
+        return !e || o.parent.type.name !== this.name ? !1 : c || !o.parent.textContent.length ? this.editor.commands.clearNodes() : !1;
       },
       // handle tab indentation
       Tab: ({ editor: e }) => {
-        var r;
+        var o;
         if (!this.options.enableTabIndentation)
           return !1;
-        const i = (r = this.options.tabSize) != null ? r : B, { state: t } = e, { selection: a } = t, { $from: n, empty: l } = a;
-        if (n.parent.type !== this.type)
+        const c = (o = this.options.tabSize) != null ? o : B, { state: a } = e, { selection: t } = a, { $from: l, empty: s } = t;
+        if (l.parent.type !== this.type)
           return !1;
-        const o = " ".repeat(i);
-        return l ? e.commands.insertContent(o) : e.commands.command(({ tr: s }) => {
-          const { from: d, to: g } = a, c = t.doc.textBetween(d, g, `
+        const n = " ".repeat(c);
+        return s ? e.commands.insertContent(n) : e.commands.command(({ tr: d }) => {
+          const { from: r, to: p } = t, i = a.doc.textBetween(r, p, `
 `, `
 `).split(`
-`).map((u) => o + u).join(`
+`).map((h) => n + h).join(`
 `);
-          return s.replaceWith(d, g, t.schema.text(c)), !0;
+          return d.replaceWith(r, p, a.schema.text(i)), !0;
         });
       },
       // handle shift+tab reverse indentation
       "Shift-Tab": ({ editor: e }) => {
-        var r;
+        var o;
         if (!this.options.enableTabIndentation)
           return !1;
-        const i = (r = this.options.tabSize) != null ? r : B, { state: t } = e, { selection: a } = t, { $from: n, empty: l } = a;
-        return n.parent.type !== this.type ? !1 : l ? e.commands.command(({ tr: o }) => {
-          var s;
-          const { pos: d } = n, g = n.start(), y = n.end(), c = t.doc.textBetween(g, y, `
+        const c = (o = this.options.tabSize) != null ? o : B, { state: a } = e, { selection: t } = a, { $from: l, empty: s } = t;
+        return l.parent.type !== this.type ? !1 : s ? e.commands.command(({ tr: n }) => {
+          var d;
+          const { pos: r } = l, p = l.start(), y = l.end(), i = a.doc.textBetween(p, y, `
 `, `
 `).split(`
 `);
-          let u = 0, h = 0;
-          const f = d - g;
-          for (let T = 0; T < c.length; T += 1) {
-            if (h + c[T].length >= f) {
-              u = T;
+          let h = 0, u = 0;
+          const g = r - p;
+          for (let T = 0; T < i.length; T += 1) {
+            if (u + i[T].length >= g) {
+              h = T;
               break;
             }
-            h += c[T].length + 1;
+            u += i[T].length + 1;
           }
-          const b = ((s = c[u].match(/^ */)) == null ? void 0 : s[0]) || "", x = Math.min(b.length, i);
+          const b = ((d = i[h].match(/^ */)) == null ? void 0 : d[0]) || "", x = Math.min(b.length, c);
           if (x === 0)
             return !0;
-          let k = g;
-          for (let T = 0; T < u; T += 1)
-            k += c[T].length + 1;
-          return o.delete(k, k + x), d - k <= x && o.setSelection(M.create(o.doc, k)), !0;
-        }) : e.commands.command(({ tr: o }) => {
-          const { from: s, to: d } = a, p = t.doc.textBetween(s, d, `
+          let k = p;
+          for (let T = 0; T < h; T += 1)
+            k += i[T].length + 1;
+          return n.delete(k, k + x), r - k <= x && n.setSelection(z.create(n.doc, k)), !0;
+        }) : e.commands.command(({ tr: n }) => {
+          const { from: d, to: r } = t, m = a.doc.textBetween(d, r, `
 `, `
 `).split(`
-`).map((c) => {
-            var u;
-            const h = ((u = c.match(/^ */)) == null ? void 0 : u[0]) || "", f = Math.min(h.length, i);
-            return c.slice(f);
+`).map((i) => {
+            var h;
+            const u = ((h = i.match(/^ */)) == null ? void 0 : h[0]) || "", g = Math.min(u.length, c);
+            return i.slice(g);
           }).join(`
 `);
-          return o.replaceWith(s, d, t.schema.text(p)), !0;
+          return n.replaceWith(d, r, a.schema.text(m)), !0;
         });
       },
       // exit node on triple enter
       Enter: ({ editor: e }) => {
         if (!this.options.exitOnTripleEnter)
           return !1;
-        const { state: r } = e, { selection: i } = r, { $from: t, empty: a } = i;
-        if (!a || t.parent.type !== this.type)
+        const { state: o } = e, { selection: c } = o, { $from: a, empty: t } = c;
+        if (!t || a.parent.type !== this.type)
           return !1;
-        const n = t.parentOffset === t.parent.nodeSize - 2, l = t.parent.textContent.endsWith(`
+        const l = a.parentOffset === a.parent.nodeSize - 2, s = a.parent.textContent.endsWith(`
 
 `);
-        return !n || !l ? !1 : e.chain().command(({ tr: o }) => (o.delete(t.pos - 2, t.pos), !0)).exitCode().run();
+        return !l || !s ? !1 : e.chain().command(({ tr: n }) => (n.delete(a.pos - 2, a.pos), !0)).exitCode().run();
       },
       // exit node on arrow down
       ArrowDown: ({ editor: e }) => {
         if (!this.options.exitOnArrowDown)
           return !1;
-        const { state: r } = e, { selection: i, doc: t } = r, { $from: a, empty: n } = i;
-        if (!n || a.parent.type !== this.type || !(a.parentOffset === a.parent.nodeSize - 2))
+        const { state: o } = e, { selection: c, doc: a } = o, { $from: t, empty: l } = c;
+        if (!l || t.parent.type !== this.type || !(t.parentOffset === t.parent.nodeSize - 2))
           return !1;
-        const o = a.after();
-        return o === void 0 ? !1 : t.nodeAt(o) ? e.commands.command(({ tr: d }) => (d.setSelection(W.near(t.resolve(o))), !0)) : e.commands.exitCode();
+        const n = t.after();
+        return n === void 0 ? !1 : a.nodeAt(n) ? e.commands.command(({ tr: r }) => (r.setSelection(F.near(a.resolve(n))), !0)) : e.commands.exitCode();
       }
     };
   },
   addInputRules() {
     return [
-      N({
+      M({
         find: U,
         type: this.type,
         getAttributes: (e) => ({
           language: e[1]
         })
       }),
-      N({
-        find: K,
+      M({
+        find: V,
         type: this.type,
         getAttributes: (e) => ({
           language: e[1]
@@ -176,145 +176,159 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
     return [
       // this plugin creates a code block for pasted content from VS Code
       // we can also detect the copied code language
-      new I({
-        key: new $("codeBlockVSCodeHandler"),
+      new $({
+        key: new E("codeBlockVSCodeHandler"),
         props: {
-          handlePaste: (e, r) => {
-            if (!r.clipboardData || this.editor.isActive(this.type.name))
+          handlePaste: (e, o) => {
+            if (!o.clipboardData || this.editor.isActive(this.type.name))
               return !1;
-            const i = r.clipboardData.getData("text/plain"), t = r.clipboardData.getData("vscode-editor-data"), a = t ? JSON.parse(t) : void 0, n = a?.mode;
-            if (!i || !n)
+            const c = o.clipboardData.getData("text/plain"), a = o.clipboardData.getData("vscode-editor-data"), t = a ? JSON.parse(a) : void 0, l = t?.mode;
+            if (!c || !l)
               return !1;
-            const { tr: l, schema: o } = e.state, s = o.text(i.replace(/\r\n?/g, `
+            const { tr: s, schema: n } = e.state, d = n.text(c.replace(/\r\n?/g, `
 `));
-            return l.replaceSelectionWith(this.type.create({ language: n }, s)), l.selection.$from.parent.type !== this.type && l.setSelection(M.near(l.doc.resolve(Math.max(0, l.selection.from - 2)))), l.setMeta("paste", !0), e.dispatch(l), !0;
+            return s.replaceSelectionWith(this.type.create({ language: l }, d)), s.selection.$from.parent.type !== this.type && s.setSelection(z.near(s.doc.resolve(Math.max(0, s.selection.from - 2)))), s.setMeta("paste", !0), e.dispatch(s), !0;
           }
         }
       })
     ];
   }
-}), J = V;
-let m, L;
-const w = /* @__PURE__ */ new Set(), D = /* @__PURE__ */ new Set();
-function Z() {
-  return m;
-}
+}), Z = J;
+let f, L;
+const D = /* @__PURE__ */ new Set(), N = /* @__PURE__ */ new Set(), w = /* @__PURE__ */ new Map();
 function q(e) {
-  if (!m && !L) {
-    const r = e.themes.filter(
-      (t) => !!t && t in E
-    ), i = e.languages.filter(
+  return e in H || w.has(e);
+}
+function G() {
+  return f;
+}
+function Q(e) {
+  if (!f && !L) {
+    if (e.customThemes)
+      for (const t of e.customThemes)
+        t.name && w.set(t.name, t);
+    const o = e.themes.filter(
       (t) => !!t && t in H
-    );
-    return L = j({ themes: r, langs: i }).then((t) => {
-      m = t;
+    ), c = e.languages.filter(
+      (t) => !!t && t in O
+    ), a = [...o, ...w.values()];
+    return L = K({ themes: a, langs: c }).then((t) => {
+      f = t;
     }), L;
   }
   if (L)
     return L;
 }
 async function P(e) {
-  return m && !m.getLoadedThemes().includes(e) && !D.has(e) && e in E ? (D.add(e), await m.loadTheme(e), D.delete(e), !0) : !1;
+  if (f && !f.getLoadedThemes().includes(e) && !N.has(e) && q(e)) {
+    N.add(e);
+    const o = w.get(e) ?? e;
+    return await f.loadTheme(o), N.delete(e), !0;
+  }
+  return !1;
 }
-async function O(e) {
-  return m && !m.getLoadedLanguages().includes(e) && !w.has(e) && e in H ? (w.add(e), await m.loadLanguage(e), w.delete(e), !0) : !1;
+async function _(e) {
+  return f && !f.getLoadedLanguages().includes(e) && !D.has(e) && e in O ? (D.add(e), await f.loadLanguage(e), D.delete(e), !0) : !1;
 }
-async function G({
+async function X({
   doc: e,
-  name: r,
-  defaultTheme: i,
-  defaultLanguage: t,
-  themeModes: a
+  name: o,
+  defaultTheme: c,
+  defaultLanguage: a,
+  themeModes: t,
+  customThemes: l
 }) {
-  const n = C(e, (s) => s.type.name === r), l = [
-    ...n.map((s) => s.node.attrs.theme),
-    i
-  ], o = [
-    ...n.map((s) => s.node.attrs.language),
-    t
+  const s = v(e, (r) => r.type.name === o), n = [
+    ...s.map((r) => r.node.attrs.theme),
+    c
+  ], d = [
+    ...s.map((r) => r.node.attrs.language),
+    a
   ];
-  if (m)
+  if (f)
     await Promise.all([
-      ...l.flatMap((s) => P(s)),
-      ...o.flatMap((s) => !!s && O(s))
+      ...n.flatMap((r) => P(r)),
+      ...d.flatMap((r) => !!r && _(r))
     ]);
   else {
-    const s = [...l];
-    a && (a.light && !s.includes(a.light) && s.push(a.light), a.dark && !s.includes(a.dark) && s.push(a.dark)), await q({
-      languages: o,
-      themes: s
+    const r = [...n];
+    t && (t.light && !r.includes(t.light) && r.push(t.light), t.dark && !r.includes(t.dark) && r.push(t.dark)), await Q({
+      languages: d,
+      themes: r,
+      customThemes: l
     });
   }
 }
-function v(e) {
-  return Object.entries(e).map(([r, i]) => `${r}:${i}`).join(";");
+function C(e) {
+  return Object.entries(e).map(([o, c]) => `${o}:${c}`).join(";");
 }
-function z({
+function I({
   doc: e,
-  name: r,
-  defaultTheme: i,
-  defaultLanguage: t,
-  themes: a
+  name: o,
+  defaultTheme: c,
+  defaultLanguage: a,
+  themes: t
 }) {
-  const n = [];
-  return C(e, (o) => o.type.name === r).forEach((o) => {
-    let s = o.pos + 1, d = o.node.attrs.language || t;
-    const g = o.node.attrs.theme || i, y = o.node.attrs.themes?.light || a?.light, p = o.node.attrs.themes?.dark || a?.dark, c = Z();
-    if (!c) return;
-    c.getLoadedLanguages().includes(d) || (d = "plaintext");
-    const u = (f) => c.getLoadedThemes().includes(f) ? f : c.getLoadedThemes()[0];
-    let h;
-    if (a) {
-      h = c.codeToTokens(o.node.textContent, {
-        lang: d,
+  const l = [];
+  return v(e, (n) => n.type.name === o).forEach((n) => {
+    let d = n.pos + 1, r = n.node.attrs.language || a;
+    const p = n.node.attrs.theme || c, y = n.node.attrs.themes?.light || t?.light, m = n.node.attrs.themes?.dark || t?.dark, i = G();
+    if (!i) return;
+    i.getLoadedLanguages().includes(r) || (r = "plaintext");
+    const h = (g) => i.getLoadedThemes().includes(g) ? g : i.getLoadedThemes()[0];
+    let u;
+    if (t) {
+      u = i.codeToTokens(n.node.textContent, {
+        lang: r,
         themes: {
-          light: u(y),
-          dark: u(p)
+          light: h(y),
+          dark: h(m)
         }
       });
-      const f = {};
-      h.bg && (f["background-color"] = h.bg), h.fg && (f.color = h.fg), n.push(
-        A.node(o.pos, o.pos + o.node.nodeSize, {
-          style: v(f),
+      const g = {};
+      u.bg && (g["background-color"] = u.bg), u.fg && (g.color = u.fg), l.push(
+        A.node(n.pos, n.pos + n.node.nodeSize, {
+          style: C(g),
           class: "shiki"
         })
       );
     } else {
-      h = c.codeToTokens(o.node.textContent, {
-        lang: d,
-        theme: u(g)
+      u = i.codeToTokens(n.node.textContent, {
+        lang: r,
+        theme: h(p)
       });
-      const f = c.getLoadedThemes().includes(g) ? g : c.getLoadedThemes()[0], S = c.getTheme(f);
-      n.push(
-        A.node(o.pos, o.pos + o.node.nodeSize, {
-          style: v({ "background-color": S.bg })
+      const g = i.getLoadedThemes().includes(p) ? p : i.getLoadedThemes()[0], S = i.getTheme(g);
+      l.push(
+        A.node(n.pos, n.pos + n.node.nodeSize, {
+          style: C({ "background-color": S.bg })
         })
       );
     }
-    for (const f of h.tokens) {
-      for (const S of f) {
-        const b = s + S.content.length;
+    for (const g of u.tokens) {
+      for (const S of g) {
+        const b = d + S.content.length;
         let x = "";
-        a ? x = v(S.htmlStyle || {}) : x = v({ color: S.color || "inherit" });
-        const k = A.inline(s, b, {
+        t ? x = C(S.htmlStyle || {}) : x = C({ color: S.color || "inherit" });
+        const k = A.inline(d, b, {
           style: x
         });
-        n.push(k), s = b;
+        l.push(k), d = b;
       }
-      s += 1;
+      d += 1;
     }
-  }), F.create(e, n);
+  }), j.create(e, l);
 }
-function Q({
+function Y({
   name: e,
-  defaultLanguage: r,
-  defaultTheme: i,
-  themes: t
+  defaultLanguage: o,
+  defaultTheme: c,
+  themes: a,
+  customThemes: t
 }) {
-  const a = new I({
-    key: new $("shiki"),
-    view(n) {
-      class l {
+  const l = new $({
+    key: new E("shiki"),
+    view(s) {
+      class n {
         constructor() {
           this.initDecorations();
         }
@@ -325,110 +339,113 @@ function Q({
         }
         // Initialize shiki async, and then highlight initial document
         async initDecorations() {
-          const s = n.state.doc;
-          await G({
-            doc: s,
+          const r = s.state.doc;
+          await X({
+            doc: r,
             name: e,
-            defaultLanguage: r,
-            defaultTheme: i,
-            themeModes: t
+            defaultLanguage: o,
+            defaultTheme: c,
+            themeModes: a,
+            customThemes: t ?? void 0
           });
-          const d = n.state.tr.setMeta("shikiPluginForceDecoration", !0);
-          n.dispatch(d);
+          const p = s.state.tr.setMeta("shikiPluginForceDecoration", !0);
+          s.dispatch(p);
         }
         // When new codeblocks were added and they have missing themes or
         // languages, load those and then add code decorations once again.
         async checkUndecoratedBlocks() {
-          const s = C(
-            n.state.doc,
-            (p) => p.type.name === e
-          ), d = (p) => {
-            const c = [O(p.node.attrs.language)];
-            return t ? (c.push(
-              P(p.node.attrs.themes?.light || t.light)
-            ), c.push(P(p.node.attrs.themes?.dark || t.dark))) : c.push(P(p.node.attrs.theme)), c;
+          const r = v(
+            s.state.doc,
+            (i) => i.type.name === e
+          ), p = (i) => {
+            const h = [_(i.node.attrs.language)];
+            return a ? (h.push(
+              P(i.node.attrs.themes?.light || a.light)
+            ), h.push(P(i.node.attrs.themes?.dark || a.dark))) : h.push(P(i.node.attrs.theme)), h;
           };
           if ((await Promise.all(
-            s.flatMap((p) => d(p))
+            r.flatMap((i) => p(i))
           )).includes(!0)) {
-            const p = n.state.tr.setMeta("shikiPluginForceDecoration", !0);
-            n.dispatch(p);
+            const i = s.state.tr.setMeta("shikiPluginForceDecoration", !0);
+            s.dispatch(i);
           }
         }
       }
-      return new l();
+      return new n();
     },
     state: {
-      init: (n, { doc: l }) => z({
-        doc: l,
+      init: (s, { doc: n }) => I({
+        doc: n,
         name: e,
-        defaultLanguage: r,
-        defaultTheme: i,
-        themes: t
+        defaultLanguage: o,
+        defaultTheme: c,
+        themes: a
       }),
-      apply: (n, l, o, s) => {
-        const d = o.selection.$head.parent.type.name, g = s.selection.$head.parent.type.name, y = C(
-          o.doc,
+      apply: (s, n, d, r) => {
+        const p = d.selection.$head.parent.type.name, y = r.selection.$head.parent.type.name, m = v(
+          d.doc,
           (u) => u.type.name === e
-        ), p = C(
-          s.doc,
+        ), i = v(
+          r.doc,
           (u) => u.type.name === e
-        ), c = n.docChanged && // Apply decorations if:
+        ), h = s.docChanged && // Apply decorations if:
         // selection includes named node,
-        ([d, g].includes(e) || // OR transaction adds/removes named node,
-        p.length !== y.length || // OR transaction has changes that completely encapsulte a node
+        ([p, y].includes(e) || // OR transaction adds/removes named node,
+        i.length !== m.length || // OR transaction has changes that completely encapsulte a node
         // (for example, a transaction that affects the entire document).
         // Such transactions can happen during collab syncing via y-prosemirror, for example.
-        n.steps.some((u) => (
+        s.steps.some((u) => (
           // @ts-expect-error
           u.from !== void 0 && // @ts-expect-error
-          u.to !== void 0 && y.some((h) => (
+          u.to !== void 0 && m.some((g) => (
             // @ts-expect-error
-            h.pos >= u.from && // @ts-expect-error
-            h.pos + h.node.nodeSize <= u.to
+            g.pos >= u.from && // @ts-expect-error
+            g.pos + g.node.nodeSize <= u.to
           ))
         )));
-        return n.getMeta("shikiPluginForceDecoration") || c ? z({
-          doc: n.doc,
+        return s.getMeta("shikiPluginForceDecoration") || h ? I({
+          doc: s.doc,
           name: e,
-          defaultLanguage: r,
-          defaultTheme: i,
-          themes: t
-        }) : l.map(n.mapping, n.doc);
+          defaultLanguage: o,
+          defaultTheme: c,
+          themes: a
+        }) : n.map(s.mapping, s.doc);
       }
     },
     props: {
-      decorations(n) {
-        return a.getState(n);
+      decorations(s) {
+        return l.getState(s);
       }
     }
   });
-  return a;
+  return l;
 }
 /* v8 ignore start -- @preserve */
 /* v8 ignore stop -- @preserve */
-const oe = J.extend({
+const re = Z.extend({
   addOptions() {
     return {
       ...this.parent?.(),
       defaultLanguage: null,
       defaultTheme: "github-dark",
-      themes: null
+      themes: null,
+      customThemes: null
     };
   },
   addProseMirrorPlugins() {
     return [
       ...this.parent?.() || [],
-      Q({
+      Y({
         name: this.name,
         defaultLanguage: this.options.defaultLanguage,
         defaultTheme: this.options.defaultTheme,
-        themes: this.options.themes
+        themes: this.options.themes,
+        customThemes: this.options.customThemes
       })
     ];
   }
 });
 export {
-  oe as CodeBlockShiki,
-  oe as default
+  re as CodeBlockShiki,
+  re as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-code-block-shiki",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Use Shiki syntax highlighting for codeblocks in TipTap.",
   "repository": "timomeh/tiptap-extension-code-block-shiki",
   "author": {