tiptap-extension-code-block-shiki 1.0.0 → 1.2.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 O, textblockTypeInputRule as M, mergeAttributes as R, findChildren as L } from "@tiptap/core";
+import { Plugin as z, PluginKey as I, TextSelection as $, Selection as j } from "@tiptap/pm/state";
+import { DecorationSet as F, Decoration as P } from "@tiptap/pm/view";
+import { bundledThemes as E, bundledLanguages as W, createHighlighter as K } from "shiki";
+var A = 4, U = /^```([a-z]+)?[\s\n]$/, V = /^~~~([a-z]+)?[\s\n]$/, J = O.create({
   name: "codeBlock",
   addOptions() {
     return {
@@ -11,7 +11,7 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
       exitOnArrowDown: !0,
       defaultLanguage: null,
       enableTabIndentation: !1,
-      tabSize: B,
+      tabSize: A,
       HTMLAttributes: {}
     };
   },
@@ -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;
+          var t;
           const { languageClassPrefix: i } = this.options;
           if (!i)
             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 c = [...((t = e.firstElementChild) == null ? void 0 : t.classList) || []].filter((r) => r.startsWith(i)).map((r) => r.replace(i, ""))[0];
+          return c || 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: t }) {
     return [
       "pre",
-      R(this.options.HTMLAttributes, r),
+      R(this.options.HTMLAttributes, t),
       [
         "code",
         {
@@ -57,10 +57,28 @@ var B = 4, U = /^```([a-z]+)?[\s\n]$/, K = /^~~~([a-z]+)?[\s\n]$/, V = _.create(
       ]
     ];
   },
+  markdownTokenName: "code",
+  parseMarkdown: (e, t) => {
+    var i, o;
+    return ((i = e.raw) == null ? void 0 : i.startsWith("```")) === !1 && ((o = e.raw) == null ? void 0 : o.startsWith("~~~")) === !1 && e.codeBlockStyle !== "indented" ? [] : t.createNode(
+      "codeBlock",
+      { language: e.lang || null },
+      e.text ? [t.createTextNode(e.text)] : []
+    );
+  },
+  renderMarkdown: (e, t) => {
+    var i;
+    let o = "";
+    const n = ((i = e.attrs) == null ? void 0 : i.language) || "";
+    return e.content ? o = [`\`\`\`${n}`, t.renderChildren(e.content), "```"].join(`
+`) : o = `\`\`\`${n}
+
+\`\`\``, o;
+  },
   addCommands() {
     return {
-      setCodeBlock: (e) => ({ commands: r }) => r.setNode(this.name, e),
-      toggleCodeBlock: (e) => ({ commands: r }) => r.toggleNode(this.name, "paragraph", e)
+      setCodeBlock: (e) => ({ commands: t }) => t.setNode(this.name, e),
+      toggleCodeBlock: (e) => ({ commands: t }) => t.toggleNode(this.name, "paragraph", e)
     };
   },
   addKeyboardShortcuts() {
@@ -68,103 +86,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: t } = this.editor.state.selection, i = t.pos === 1;
+        return !e || t.parent.type.name !== this.name ? !1 : i || !t.parent.textContent.length ? this.editor.commands.clearNodes() : !1;
       },
       // handle tab indentation
       Tab: ({ editor: e }) => {
-        var r;
+        var t;
         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 i = (t = this.options.tabSize) != null ? t : A, { state: o } = e, { selection: n } = o, { $from: c, empty: r } = n;
+        if (c.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 s = " ".repeat(i);
+        return r ? e.commands.insertContent(s) : e.commands.command(({ tr: d }) => {
+          const { from: a, to: g } = n, l = o.doc.textBetween(a, g, `
 `, `
 `).split(`
-`).map((u) => o + u).join(`
+`).map((h) => s + h).join(`
 `);
-          return s.replaceWith(d, g, t.schema.text(c)), !0;
+          return d.replaceWith(a, g, o.schema.text(l)), !0;
         });
       },
       // handle shift+tab reverse indentation
       "Shift-Tab": ({ editor: e }) => {
-        var r;
+        var t;
         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 i = (t = this.options.tabSize) != null ? t : A, { state: o } = e, { selection: n } = o, { $from: c, empty: r } = n;
+        return c.parent.type !== this.type ? !1 : r ? e.commands.command(({ tr: s }) => {
+          var d;
+          const { pos: a } = c, g = c.start(), y = c.end(), l = o.doc.textBetween(g, 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 p = a - g;
+          for (let T = 0; T < l.length; T += 1) {
+            if (u + l[T].length >= p) {
+              h = T;
               break;
             }
-            h += c[T].length + 1;
+            u += l[T].length + 1;
           }
-          const b = ((s = c[u].match(/^ */)) == null ? void 0 : s[0]) || "", x = Math.min(b.length, i);
+          const v = ((d = l[h].match(/^ */)) == null ? void 0 : d[0]) || "", x = Math.min(v.length, i);
           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, `
+          for (let T = 0; T < h; T += 1)
+            k += l[T].length + 1;
+          return s.delete(k, k + x), a - k <= x && s.setSelection($.create(s.doc, k)), !0;
+        }) : e.commands.command(({ tr: s }) => {
+          const { from: d, to: a } = n, m = o.doc.textBetween(d, a, `
 `, `
 `).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((l) => {
+            var h;
+            const u = ((h = l.match(/^ */)) == null ? void 0 : h[0]) || "", p = Math.min(u.length, i);
+            return l.slice(p);
           }).join(`
 `);
-          return o.replaceWith(s, d, t.schema.text(p)), !0;
+          return s.replaceWith(d, a, o.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: t } = e, { selection: i } = t, { $from: o, empty: n } = i;
+        if (!n || o.parent.type !== this.type)
           return !1;
-        const n = t.parentOffset === t.parent.nodeSize - 2, l = t.parent.textContent.endsWith(`
+        const c = o.parentOffset === o.parent.nodeSize - 2, r = o.parent.textContent.endsWith(`
 
 `);
-        return !n || !l ? !1 : e.chain().command(({ tr: o }) => (o.delete(t.pos - 2, t.pos), !0)).exitCode().run();
+        return !c || !r ? !1 : e.chain().command(({ tr: s }) => (s.delete(o.pos - 2, o.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: t } = e, { selection: i, doc: o } = t, { $from: n, empty: c } = i;
+        if (!c || n.parent.type !== this.type || !(n.parentOffset === n.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 s = n.after();
+        return s === void 0 ? !1 : o.nodeAt(s) ? e.commands.command(({ tr: a }) => (a.setSelection(j.near(o.resolve(s))), !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 +194,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 z({
+        key: new I("codeBlockVSCodeHandler"),
         props: {
-          handlePaste: (e, r) => {
-            if (!r.clipboardData || this.editor.isActive(this.type.name))
+          handlePaste: (e, t) => {
+            if (!t.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 i = t.clipboardData.getData("text/plain"), o = t.clipboardData.getData("vscode-editor-data"), n = o ? JSON.parse(o) : void 0, c = n?.mode;
+            if (!i || !c)
               return !1;
-            const { tr: l, schema: o } = e.state, s = o.text(i.replace(/\r\n?/g, `
+            const { tr: r, schema: s } = e.state, d = s.text(i.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 r.replaceSelectionWith(this.type.create({ language: c }, d)), r.selection.$from.parent.type !== this.type && r.setSelection($.near(r.doc.resolve(Math.max(0, r.selection.from - 2)))), r.setMeta("paste", !0), e.dispatch(r), !0;
           }
         }
       })
     ];
   }
-}), J = V;
-let m, L;
-const w = /* @__PURE__ */ new Set(), D = /* @__PURE__ */ new Set();
-function Z() {
-  return m;
-}
+}), Z = J;
+let f, w;
+const N = /* @__PURE__ */ new Set(), D = /* @__PURE__ */ new Set(), B = /* @__PURE__ */ new Map();
 function q(e) {
-  if (!m && !L) {
-    const r = e.themes.filter(
-      (t) => !!t && t in E
+  return e in E || B.has(e);
+}
+function G() {
+  return f;
+}
+function Q(e) {
+  if (!f && !w) {
+    if (e.customThemes)
+      for (const n of e.customThemes)
+        n.name && B.set(n.name, n);
+    const t = e.themes.filter(
+      (n) => !!n && n in E
     ), i = e.languages.filter(
-      (t) => !!t && t in H
-    );
-    return L = j({ themes: r, langs: i }).then((t) => {
-      m = t;
-    }), L;
+      (n) => !!n && n in W
+    ), o = [...t, ...B.values()];
+    return w = K({ themes: o, langs: i }).then((n) => {
+      f = n;
+    }), w;
   }
-  if (L)
-    return L;
+  if (w)
+    return w;
 }
-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;
+async function b(e) {
+  if (f && !f.getLoadedThemes().includes(e) && !D.has(e) && q(e)) {
+    D.add(e);
+    const t = B.get(e) ?? e;
+    return await f.loadTheme(t), D.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 H(e) {
+  return f && !f.getLoadedLanguages().includes(e) && !N.has(e) && e in W ? (N.add(e), await f.loadLanguage(e), N.delete(e), !0) : !1;
 }
-async function G({
+async function X({
   doc: e,
-  name: r,
+  name: t,
   defaultTheme: i,
-  defaultLanguage: t,
-  themeModes: a
+  defaultLanguage: o,
+  themeModes: n,
+  customThemes: c
 }) {
-  const n = C(e, (s) => s.type.name === r), l = [
-    ...n.map((s) => s.node.attrs.theme),
+  const r = L(e, (a) => a.type.name === t), s = [
+    ...r.map((a) => a.node.attrs.theme),
     i
-  ], o = [
-    ...n.map((s) => s.node.attrs.language),
-    t
+  ], d = [
+    ...r.map((a) => a.node.attrs.language),
+    o
   ];
-  if (m)
+  if (f)
     await Promise.all([
-      ...l.flatMap((s) => P(s)),
-      ...o.flatMap((s) => !!s && O(s))
+      ...s.flatMap((a) => b(a)),
+      ...d.flatMap((a) => !!a && H(a))
     ]);
   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 a = [...s];
+    n && (n.light && !a.includes(n.light) && a.push(n.light), n.dark && !a.includes(n.dark) && a.push(n.dark)), await Q({
+      languages: d,
+      themes: a,
+      customThemes: c
     });
   }
 }
-function v(e) {
-  return Object.entries(e).map(([r, i]) => `${r}:${i}`).join(";");
+function C(e) {
+  return Object.entries(e).map(([t, i]) => `${t}:${i}`).join(";");
 }
-function z({
+function _({
   doc: e,
-  name: r,
+  name: t,
   defaultTheme: i,
-  defaultLanguage: t,
-  themes: a
+  defaultLanguage: o,
+  themes: n
 }) {
-  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 c = [];
+  return L(e, (s) => s.type.name === t).forEach((s) => {
+    let d = s.pos + 1, a = s.node.attrs.language || o;
+    const g = s.node.attrs.theme || i, y = s.node.attrs.themes?.light || n?.light, m = s.node.attrs.themes?.dark || n?.dark, l = G();
+    if (!l) return;
+    l.getLoadedLanguages().includes(a) || (a = "plaintext");
+    const h = (p) => l.getLoadedThemes().includes(p) ? p : l.getLoadedThemes()[0];
+    let u;
+    if (n) {
+      u = l.codeToTokens(s.node.textContent, {
+        lang: a,
         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 p = {};
+      u.bg && (p["background-color"] = u.bg), u.fg && (p.color = u.fg), c.push(
+        P.node(s.pos, s.pos + s.node.nodeSize, {
+          style: C(p),
           class: "shiki"
         })
       );
     } else {
-      h = c.codeToTokens(o.node.textContent, {
-        lang: d,
-        theme: u(g)
+      u = l.codeToTokens(s.node.textContent, {
+        lang: a,
+        theme: h(g)
       });
-      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 p = l.getLoadedThemes().includes(g) ? g : l.getLoadedThemes()[0], S = l.getTheme(p);
+      c.push(
+        P.node(s.pos, s.pos + s.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 p of u.tokens) {
+      for (const S of p) {
+        const v = d + S.content.length;
         let x = "";
-        a ? x = v(S.htmlStyle || {}) : x = v({ color: S.color || "inherit" });
-        const k = A.inline(s, b, {
+        n ? x = C(S.htmlStyle || {}) : x = C({ color: S.color || "inherit" });
+        const k = P.inline(d, v, {
           style: x
         });
-        n.push(k), s = b;
+        c.push(k), d = v;
       }
-      s += 1;
+      d += 1;
     }
-  }), F.create(e, n);
+  }), F.create(e, c);
 }
-function Q({
+function Y({
   name: e,
-  defaultLanguage: r,
+  defaultLanguage: t,
   defaultTheme: i,
-  themes: t
+  themes: o,
+  customThemes: n
 }) {
-  const a = new I({
-    key: new $("shiki"),
-    view(n) {
-      class l {
+  const c = new z({
+    key: new I("shiki"),
+    view(r) {
+      class s {
         constructor() {
           this.initDecorations();
         }
@@ -325,110 +357,130 @@ function Q({
         }
         // Initialize shiki async, and then highlight initial document
         async initDecorations() {
-          const s = n.state.doc;
-          await G({
-            doc: s,
+          const a = r.state.doc;
+          await X({
+            doc: a,
             name: e,
-            defaultLanguage: r,
+            defaultLanguage: t,
             defaultTheme: i,
-            themeModes: t
+            themeModes: o,
+            customThemes: n ?? void 0
           });
-          const d = n.state.tr.setMeta("shikiPluginForceDecoration", !0);
-          n.dispatch(d);
+          const g = r.state.tr.setMeta("shikiPluginForceDecoration", !0);
+          r.dispatch(g);
         }
         // 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 a = L(
+            r.state.doc,
+            (l) => l.type.name === e
+          ), g = (l) => {
+            const h = [H(l.node.attrs.language)];
+            return o ? (h.push(
+              b(l.node.attrs.themes?.light || o.light)
+            ), h.push(b(l.node.attrs.themes?.dark || o.dark))) : h.push(b(l.node.attrs.theme)), h;
           };
           if ((await Promise.all(
-            s.flatMap((p) => d(p))
+            a.flatMap((l) => g(l))
           )).includes(!0)) {
-            const p = n.state.tr.setMeta("shikiPluginForceDecoration", !0);
-            n.dispatch(p);
+            const l = r.state.tr.setMeta("shikiPluginForceDecoration", !0);
+            r.dispatch(l);
           }
         }
       }
-      return new l();
+      return new s();
     },
     state: {
-      init: (n, { doc: l }) => z({
-        doc: l,
+      init: (r, { doc: s }) => _({
+        doc: s,
         name: e,
-        defaultLanguage: r,
+        defaultLanguage: t,
         defaultTheme: i,
-        themes: t
+        themes: o
       }),
-      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: (r, s, d, a) => {
+        const g = d.selection.$head.parent.type.name, y = a.selection.$head.parent.type.name, m = L(
+          d.doc,
           (u) => u.type.name === e
-        ), p = C(
-          s.doc,
+        ), l = L(
+          a.doc,
           (u) => u.type.name === e
-        ), c = n.docChanged && // Apply decorations if:
+        ), h = r.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
+        ([g, y].includes(e) || // OR transaction adds/removes named node,
+        l.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) => (
+        r.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((p) => (
             // @ts-expect-error
-            h.pos >= u.from && // @ts-expect-error
-            h.pos + h.node.nodeSize <= u.to
+            p.pos >= u.from && // @ts-expect-error
+            p.pos + p.node.nodeSize <= u.to
           ))
         )));
-        return n.getMeta("shikiPluginForceDecoration") || c ? z({
-          doc: n.doc,
+        return r.getMeta("shikiPluginForceDecoration") || h ? _({
+          doc: r.doc,
           name: e,
-          defaultLanguage: r,
+          defaultLanguage: t,
           defaultTheme: i,
-          themes: t
-        }) : l.map(n.mapping, n.doc);
+          themes: o
+        }) : s.map(r.mapping, r.doc);
       }
     },
     props: {
-      decorations(n) {
-        return a.getState(n);
+      decorations(r) {
+        return c.getState(r);
       }
     }
   });
-  return a;
+  return c;
 }
 /* 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
     };
   },
+  markdownTokenName: "code",
+  parseMarkdown(e, t) {
+    return e.raw?.startsWith("```") === !1 && e.raw?.startsWith("~~~") === !1 && e.codeBlockStyle !== "indented" ? [] : t.createNode(
+      "codeBlock",
+      { language: e.lang || null },
+      e.text ? [t.createTextNode(e.text)] : []
+    );
+  },
+  renderMarkdown(e, t, i) {
+    const o = e.attrs?.language || "";
+    return e.content ? [`\`\`\`${o}`, t.renderChildren(e.content), "```"].join(
+      `
+`
+    ) : `\`\`\`${o}
+
+\`\`\``;
+  },
   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.2.0",
   "description": "Use Shiki syntax highlighting for codeblocks in TipTap.",
   "repository": "timomeh/tiptap-extension-code-block-shiki",
   "author": {
@@ -32,13 +32,14 @@
     "@biomejs/biome": "2.2.6",
     "@codecov/vite-plugin": "^1.9.1",
     "@microsoft/api-extractor": "^7.53.1",
-    "@tiptap/core": "^3.6.6",
-    "@tiptap/extension-code-block": "^3.6.6",
-    "@tiptap/pm": "^3.6.6",
-    "@tiptap/starter-kit": "^3.6.6",
+    "@tiptap/core": "^3.21.0",
+    "@tiptap/extension-code-block": "^3.21.0",
+    "@tiptap/markdown": "^3.21.0",
+    "@tiptap/pm": "^3.21.0",
+    "@tiptap/starter-kit": "^3.21.0",
     "@vitest/coverage-v8": "^3.2.4",
     "happy-dom": "^20.0.0",
-    "shiki": "^3.13.0",
+    "shiki": "^4.0.0",
     "typescript": "^5.9.3",
     "unplugin-dts": "1.0.0-beta.0",
     "vite": "^7.1.9",
@@ -47,7 +48,7 @@
   "peerDependencies": {
     "@tiptap/core": "^2.3.0 || ^3.0.0",
     "@tiptap/pm": "^2.3.0 || ^3.0.0",
-    "shiki": "^3.0.0"
+    "shiki": "^3.0.0 || ^4.0.0"
   },
   "keywords": [
     "tiptap",