@rtdui/editor/esm/RichTextEditor/tiptap_extensions/extension-code-block-shiki/code-block-shiki.mjs

React rich text editor based on tiptap

import { ProseMirrorShikiPlugin } from "./prosemirror-shiki-plugin.mjs";
import { CodeBlock } from "@tiptap/extension-code-block";

//#region packages/editor/src/RichTextEditor/tiptap_extensions/extension-code-block-shiki/code-block-shiki.ts
/**
* 这个扩展完全按'@tiptap'官方的@tiptap/extension-code-block-lowlight扩展修改.
*/
const CodeBlockShiki = CodeBlock.extend({
	addOptions() {
		return {
			...this.parent?.(),
			defaultLanguage: null,
			defaultTheme: "one-dark-pro",
			HTMLAttributes: {
				class: "shiki",
				style: "background-color:#282c34;color:#abb2bf;"
			}
		};
	},
	addAttributes() {
		return { language: {
			default: this.options.defaultLanguage,
			parseHTML: (element) => {
				const { languageClassPrefix } = this.options;
				return [...element.firstElementChild?.classList || []].filter((className) => className.startsWith(languageClassPrefix)).map((className) => className.replace(languageClassPrefix, ""))[0] ?? this.options.defaultLanguage;
			},
			renderHTML: (attributes) => {
				return { "data-language": attributes.language };
			}
		} };
	},
	addProseMirrorPlugins() {
		return [...this.parent?.() || [], ProseMirrorShikiPlugin({
			name: this.name,
			defaultLanguage: this.options.defaultLanguage,
			defaultTheme: this.options.defaultTheme ?? "one-dark-pro"
		})];
	}
});

//#endregion
export { CodeBlockShiki };