- {@html highlightCode}
+
+
-
-
+
+
@@ -79,6 +76,7 @@
value: lang,
label: lang
})}
+ on:mousedown|preventDefault={() => setAttrs({lang})}
class="flex flex-row items-center justify-between cursor-pointer
rounded-md py-1 pl-4 pr-4 data-[highlighted]:bg-accent
data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50"
diff --git a/packages/svelte/src/lib/plugins/codeBlock/cache.ts b/packages/svelte/src/lib/plugins/codeBlock/cache.ts
new file mode 100644
index 0000000..65431cc
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/codeBlock/cache.ts
@@ -0,0 +1,105 @@
+import {Node as ProseMirrorNode} from '@tiptap/pm/model';
+import {Transaction} from '@tiptap/pm/state';
+import {Decoration} from '@tiptap/pm/view';
+
+/**
+ * Represents a cache of doc positions to the node and decorations at that position
+ */
+export class DecorationCache {
+ private cache: Map<
+ number,
+ [node: ProseMirrorNode, decorations: Decoration[]]
+ >;
+
+ constructor(
+ cache?: Map
+ ) {
+ this.cache = new Map(cache);
+ }
+
+ /**
+ * Gets the cache entry at the given doc position, or null if it doesn't exist
+ * @param pos The doc position of the node you want the cache for
+ */
+ get(pos: number) {
+ return this.cache.get(pos);
+ }
+
+ /**
+ * Sets the cache entry at the given position with the give node/decoration
+ * values
+ * @param pos The doc position of the node to set the cache for
+ * @param node The node to place in cache
+ * @param decorations The decorations to place in cache
+ */
+ set(pos: number, node: ProseMirrorNode, decorations: Decoration[]): void {
+ if (pos < 0) {
+ return;
+ }
+
+ this.cache.set(pos, [node, decorations]);
+ }
+
+ /**
+ * Removes the value at the oldPos (if it exists) and sets the new position to
+ * the given values
+ * @param oldPos The old node position to overwrite
+ * @param newPos The new node position to set the cache for
+ * @param node The new node to place in cache
+ * @param decorations The new decorations to place in cache
+ */
+ private replace(
+ oldPos: number,
+ newPos: number,
+ node: ProseMirrorNode,
+ decorations: Decoration[]
+ ): void {
+ this.remove(oldPos);
+ this.set(newPos, node, decorations);
+ }
+
+ /**
+ * Removes the cache entry at the given position
+ * @param pos The doc position to remove from cache
+ */
+ remove(pos: number): void {
+ this.cache.delete(pos);
+ }
+
+ /**
+ * Invalidates the cache by removing all decoration entries on nodes that have
+ * changed, updating the positions of the nodes that haven't and removing all
+ * the entries that have been deleted; NOTE: this does not affect the current
+ * cache, but returns an entirely new one
+ * @param tr A transaction to map the current cache to
+ */
+ invalidate(tr: Transaction): DecorationCache {
+ const returnCache = new DecorationCache(this.cache);
+ const mapping = tr.mapping;
+
+ this.cache.forEach(([node, decorations], pos) => {
+ if (pos < 0) {
+ return;
+ }
+
+ const result = mapping.mapResult(pos);
+ const mappedNode = tr.doc.nodeAt(result.pos);
+
+ if (result.deleted || !mappedNode?.eq(node)) {
+ returnCache.remove(pos);
+ } else if (pos !== result.pos) {
+ // update the decorations' from/to values to match the new node position
+ const updatedDecorations = decorations
+ .map((d): Decoration | null => {
+ // @ts-expect-error: internal api
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+ return d.map(mapping, 0, 0) as Decoration | null;
+ })
+ .filter((d): d is Decoration => d != null);
+ returnCache.replace(pos, result.pos, mappedNode, updatedDecorations);
+ }
+ });
+
+ return returnCache;
+ }
+}
diff --git a/packages/svelte/src/lib/plugins/codeBlock/codeBlock.ts b/packages/svelte/src/lib/plugins/codeBlock/codeBlock.ts
index 9914f14..1ed0e12 100644
--- a/packages/svelte/src/lib/plugins/codeBlock/codeBlock.ts
+++ b/packages/svelte/src/lib/plugins/codeBlock/codeBlock.ts
@@ -1,19 +1,16 @@
import {CodeBlock} from '@tiptap/extension-code-block';
-import type {BundledLanguage, BundledTheme} from 'shiki';
-
-import {SvelteNodeViewRenderer} from '$lib/node-view';
+import type {BundledLanguage} from 'shiki';
import SvelteCodeBlock from './CodeBlock.svelte';
import {PluginKey, Plugin} from '@tiptap/pm/state';
-
-export type NextlintCodeBlockAttrs = {
- lang: BundledLanguage;
- theme: 'github-light' | 'github-dark';
-};
+import {SvelteNodeViewRenderer} from '$lib/node-view';
+import {createHighlightPlugin, highlighter, lazyParser} from './plugin';
+import type {ShikiTheme} from './shiki';
+import {mergeAttributes} from '@tiptap/core';
export type NextlintCodeBlockOptions = {
langs: BundledLanguage[];
- themes: BundledTheme[];
+ themes: ShikiTheme;
};
export const NextlintCodeBlock = CodeBlock.extend({
@@ -24,87 +21,90 @@ export const NextlintCodeBlock = CodeBlock.extend({
lang: {
default: this.options.langs[0],
parseHTML: html => {
- return html.getAttribute('code-block-lang');
+ return html.getAttribute('data-lang');
},
renderHTML: attrs => {
return {
- 'code-block-lang': attrs.lang
- };
- }
- },
- theme: {
- default: this.options.themes[0],
- parseHTML: html => {
- return html.getAttribute('code-block-theme');
- },
- renderHTML: attrs => {
- return {
- 'code-block-theme': attrs.theme
+ 'data-lang': attrs.lang
};
}
}
};
},
-
- addOptions() {
- return {
- themes: ['github-light', 'github-dark'],
- langs: [
- 'javascript',
- 'rust',
- 'typescript',
- 'css',
- 'html',
- 'tsx',
- 'svelte',
- 'json',
- 'shell',
- 'yaml',
- 'vue',
- 'lua',
- 'python',
- 'c',
- 'c++',
- 'java',
- 'zig',
- 'swift',
- 'kotlin',
- 'go',
- 'angular-ts',
- 'angular-html'
+ renderHTML({HTMLAttributes, node}) {
+ const textContent = node.textContent;
+ const withSyntax = highlighter?.codeToHtml(textContent, {
+ lang: node.attrs.lang,
+ themes: this.options.themes
+ });
+ const parsed = new DOMParser().parseFromString(
+ withSyntax || '',
+ 'text/html'
+ );
+ const pre = parsed.querySelector('pre.shiki');
+ if (pre) {
+ pre.setAttribute('data-lang', node.attrs.lang);
+ return pre;
+ }
+ return [
+ 'pre',
+ mergeAttributes(HTMLAttributes, {
+ 'data-node-view-root': true
+ }),
+ [
+ 'pre',
+ {
+ 'data-node-view-content': true
+ },
+ 0
]
- };
+ ];
},
- addNodeView() {
- return SvelteNodeViewRenderer({
- component: SvelteCodeBlock,
- domAs: 'code-block',
- contentAs: 'pre'
- });
+ onCreate() {
+ const {dark, light} = this.options.themes;
+ if (dark) {
+ highlighter?.loadTheme(dark);
+ }
+ if (light) {
+ highlighter?.loadTheme(light);
+ }
},
-
addProseMirrorPlugins() {
- const codeBlockPlugin = new Plugin({
- key: new PluginKey('codeBlock'),
- props: {
- handleKeyDown: (view, event) => {
- if (event.key === 'Tab') {
- const resolver = view.state.selection.$from;
- const pNode = resolver.node(1);
- if (pNode.type.name === this.name) {
- event.preventDefault();
- event.stopPropagation();
- this.editor
- .chain()
- .insertContentAt(resolver.pos, '\t')
- .setTextSelection(resolver.pos + 1)
- .run();
+ return [
+ createHighlightPlugin({parser: lazyParser, themes: this.options.themes}),
+ new Plugin({
+ key: new PluginKey('codeBlock'),
+ props: {
+ handleKeyDown: (view, event) => {
+ if (event.key === 'Tab') {
+ const resolver = view.state.selection.$from;
+ const pNode = resolver.node(1);
+ if (pNode.type.name === this.name) {
+ event.preventDefault();
+ event.stopPropagation();
+ this.editor
+ .chain()
+ .insertContentAt(resolver.pos, '\t')
+ .setTextSelection(resolver.pos + 1)
+ .run();
+ }
}
}
}
+ })
+ ];
+ },
+
+ addNodeView() {
+ return SvelteNodeViewRenderer({
+ component: SvelteCodeBlock,
+ options: this.options,
+ domAs: () => {
+ const pre = document.createElement('pre');
+ pre.classList.add('shiki');
+ return pre;
}
});
- return [codeBlockPlugin];
}
});
diff --git a/packages/svelte/src/lib/plugins/codeBlock/index.ts b/packages/svelte/src/lib/plugins/codeBlock/index.ts
index 9e74d82..db19320 100644
--- a/packages/svelte/src/lib/plugins/codeBlock/index.ts
+++ b/packages/svelte/src/lib/plugins/codeBlock/index.ts
@@ -1,20 +1 @@
-import {
- getHighlighter as shikijiHighlighter,
- type HighlighterGeneric,
- type BundledLanguage,
- type BundledTheme
-} from 'shiki/bundle-full.mjs';
-
-import {NextlintCodeBlock} from './codeBlock';
-
-let highlighter: HighlighterGeneric;
-
-export async function getHighlighter() {
- highlighter ||= await shikijiHighlighter({
- langs: NextlintCodeBlock.options.langs,
- themes: NextlintCodeBlock.options.themes
- });
- return highlighter;
-}
-
export * from './codeBlock';
diff --git a/packages/svelte/src/lib/plugins/codeBlock/plugin.ts b/packages/svelte/src/lib/plugins/codeBlock/plugin.ts
new file mode 100644
index 0000000..bb7b0fe
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/codeBlock/plugin.ts
@@ -0,0 +1,193 @@
+import {Node as ProseMirrorNode} from '@tiptap/pm/model';
+import {Plugin, PluginKey} from '@tiptap/pm/state';
+import {Decoration, DecorationSet} from '@tiptap/pm/view';
+
+import {DecorationCache} from './cache';
+import type {LanguageExtractor, Parser, TiptapShikiTheme} from './types';
+import {getHighlighter} from 'shiki';
+import type {BuiltinLanguage, BundledTheme, Highlighter} from 'shiki';
+
+import {createParser, type ShikiTheme} from './shiki';
+
+export interface HighlightPluginState {
+ cache: DecorationCache;
+ decorations: DecorationSet;
+ promises: Promise[];
+}
+
+export {highlighter};
+
+let highlighterPromise: Promise | undefined;
+let highlighter: Highlighter | undefined;
+let parser: Parser | undefined;
+const loadedLanguages = new Set();
+
+export const lazyParser: Parser = options => {
+ if (!highlighterPromise) {
+ highlighterPromise = getHighlighter({
+ themes: Object.values(options.themes) as BundledTheme[],
+ langs: []
+ }).then(h => {
+ highlighter = h;
+ });
+ return highlighterPromise;
+ }
+
+ if (!highlighter) {
+ return highlighterPromise;
+ }
+
+ const language = options.language;
+ if (language && !loadedLanguages.has(language)) {
+ return highlighter.loadLanguage(language as BuiltinLanguage).then(() => {
+ loadedLanguages.add(language);
+ });
+ }
+
+ if (!parser) {
+ parser = createParser(highlighter);
+ }
+
+ return parser(options);
+};
+
+export function createHighlightPlugin({
+ parser,
+ nodeTypes = ['NextlintCodeBlock'],
+ languageExtractor = (node: ProseMirrorNode) =>
+ node?.attrs?.lang || 'javascript',
+ themes
+}: {
+ parser: Parser;
+ nodeTypes?: string[];
+ languageExtractor?: LanguageExtractor;
+ themes: ShikiTheme;
+}): Plugin {
+ const key = new PluginKey();
+
+ return new Plugin({
+ key,
+ state: {
+ init(_, instance) {
+ const cache = new DecorationCache();
+ const [decorations, promises] = calculateDecoration(
+ instance.doc,
+ parser,
+ nodeTypes,
+ languageExtractor,
+ cache,
+ themes
+ );
+
+ return {cache, decorations, promises};
+ },
+ apply: (tr, data) => {
+ const cache = data.cache.invalidate(tr);
+ const refresh = !!tr.getMeta('prosemirror-highlight-refresh');
+
+ if (!tr.docChanged && !refresh) {
+ const decorations = data.decorations.map(tr.mapping, tr.doc);
+ const promises = data.promises;
+ return {cache, decorations, promises};
+ }
+
+ const [decorations, promises] = calculateDecoration(
+ tr.doc,
+ parser,
+ nodeTypes,
+ languageExtractor,
+ cache,
+ themes
+ );
+ return {cache, decorations, promises};
+ }
+ },
+ view: view => {
+ const promises = new Set>();
+
+ // Refresh the decorations when all promises resolve
+ const refresh = () => {
+ if (promises.size > 0) {
+ return;
+ }
+ const tr = view.state.tr.setMeta('prosemirror-highlight-refresh', true);
+ view.dispatch(tr);
+ };
+
+ const check = () => {
+ const state = key.getState(view.state);
+
+ for (const promise of state?.promises ?? []) {
+ promises.add(promise);
+ promise
+ .then(() => {
+ promises.delete(promise);
+ refresh();
+ })
+ .catch(() => {
+ promises.delete(promise);
+ });
+ }
+ };
+
+ check();
+
+ return {
+ update: () => {
+ check();
+ }
+ };
+ },
+ props: {
+ decorations(this, state) {
+ return this.getState(state)?.decorations;
+ }
+ }
+ });
+}
+
+function calculateDecoration(
+ doc: ProseMirrorNode,
+ parser: Parser,
+ nodeTypes: string[],
+ languageExtractor: LanguageExtractor,
+ cache: DecorationCache,
+ themes: TiptapShikiTheme
+) {
+ const result: Decoration[] = [];
+ const promises: Promise[] = [];
+
+ doc.descendants((node: ProseMirrorNode, pos: number) => {
+ if (!node.type.isTextblock) {
+ return true;
+ }
+
+ if (nodeTypes.includes(node.type.name)) {
+ const language = languageExtractor(node);
+ const cached = cache.get(pos);
+
+ if (cached) {
+ const [, decorations] = cached;
+ result.push(...decorations);
+ } else {
+ const decorations = parser({
+ content: node.textContent,
+ language: language || undefined,
+ pos,
+ themes
+ });
+
+ if (decorations && Array.isArray(decorations)) {
+ cache.set(pos, node, decorations);
+ result.push(...decorations);
+ } else if (decorations instanceof Promise) {
+ cache.remove(pos);
+ promises.push(decorations);
+ }
+ }
+ }
+ return false;
+ });
+
+ return [DecorationSet.create(doc, result), promises] as const;
+}
diff --git a/packages/svelte/src/lib/plugins/codeBlock/shiki.ts b/packages/svelte/src/lib/plugins/codeBlock/shiki.ts
new file mode 100644
index 0000000..fef5515
--- /dev/null
+++ b/packages/svelte/src/lib/plugins/codeBlock/shiki.ts
@@ -0,0 +1,49 @@
+import {Decoration} from '@tiptap/pm/view';
+
+import {
+ type BundledLanguage,
+ type BundledTheme,
+ type CodeToTokensWithThemesOptions,
+ type Highlighter
+} from 'shiki';
+
+export type ShikiTheme = CodeToTokensWithThemesOptions<
+ BundledLanguage,
+ BundledTheme
+>['themes'];
+
+export type Parser = (options: {
+ content: string;
+ pos: number;
+ language?: string;
+ themes: ShikiTheme;
+}) => Decoration[] | Promise;
+
+export function createParser(highlighter: Highlighter): Parser {
+ return function parser({content, language, pos, themes}) {
+ const decorations: Decoration[] = [];
+ const tokens = highlighter.codeToTokensWithThemes(content, {
+ lang: language as BundledLanguage,
+ themes
+ });
+
+ let from = pos + 1;
+
+ for (const line of tokens) {
+ for (const token of line) {
+ const to = from + token.content.length;
+ const decoration = Decoration.inline(from, to, {
+ style: `color: ${token.variants.light.color};--shiki-dark:${token.variants.dark.color}`
+ });
+
+ decorations.push(decoration);
+
+ from = to;
+ }
+
+ from += 1;
+ }
+
+ return decorations;
+ };
+}
diff --git a/packages/svelte/src/lib/plugins/figure/Figure.svelte b/packages/svelte/src/lib/plugins/figure/Figure.svelte
index 27d5104..3f301d1 100644
--- a/packages/svelte/src/lib/plugins/figure/Figure.svelte
+++ b/packages/svelte/src/lib/plugins/figure/Figure.svelte
@@ -1,31 +1,30 @@
- {#if selected}
+ {#if visible}
-
- {node.textContent || 'description...'}
-
+
updateAttributes({fit: 'contain'})}
class={cn(
- attrs.fit === 'contain' ? 'bg-accent' : 'bg-background',
+ attrs?.fit === 'contain' ? 'bg-accent' : 'bg-background',
'p-[6px] rounded-md hover:bg-secondary'
)}
>
@@ -44,7 +43,7 @@
aria-label="Fit View"
on:mousedown={() => updateAttributes({fit: 'cover'})}
class={cn(
- attrs.fit === 'cover' ? 'bg-accent' : 'bg-background',
+ attrs?.fit === 'cover' ? 'bg-accent' : 'bg-background',
'p-[6px] rounded-md hover:bg-secondary'
)}
>
@@ -54,7 +53,7 @@
@@ -62,18 +61,21 @@
{/if}