Skip to content

Commit b9dfd00

Browse files
modbendermodbender
modbender
authored and
modbender
committed
feat: type support, lowlight highlight theme, css imports
1 parent 99243bd commit b9dfd00

File tree

4 files changed

+314
-26
lines changed

4 files changed

+314
-26
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,9 @@ By default `@tiptap/extension-link` and `@tiptap/extension-code-block-lowlight`
206206
207207
```js
208208
tiptap: {
209-
lowlight: true,
209+
lowlight: {
210+
theme: "github-dark", //default theme
211+
},
210212
},
211213
```
212214

‎playground/nuxt.config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
export default defineNuxtConfig({
22
modules: ["../src/module"],
33
tiptap: {
4-
lowlight: true,
4+
lowlight: {
5+
theme: "github-dark",
6+
},
57
},
68
devtools: { enabled: true },
79
});

‎src/module.ts

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,12 @@ import { defineNuxtModule, addImports, addComponent } from "@nuxt/kit";
22

33
import { name, version } from "../package.json";
44

5+
import type { ModuleOptions } from "./types";
6+
57
import * as allImports from "./imports";
68

79
// Module options TypeScript interface definition
810

9-
export interface ModuleOptions {
10-
/**
11-
* Prefix for imported elements
12-
*
13-
* @default 'Tiptap'
14-
*/
15-
prefix: string;
16-
/**
17-
* Determine if lowlight should be enabled
18-
*
19-
* @default false
20-
*/
21-
lowlight?:
22-
| boolean
23-
| {
24-
/**
25-
* Languages to be loaded for highlighting
26-
*
27-
*/
28-
// languages: string[];
29-
};
30-
}
31-
3211
export default defineNuxtModule<ModuleOptions>({
3312
meta: {
3413
name,
@@ -50,6 +29,7 @@ export default defineNuxtModule<ModuleOptions>({
5029

5130
let optionalImports: { [key: string]: any }[] = [];
5231
let optionalComponents: { [key: string]: any }[] = [];
32+
const customCSS: string[] = [];
5333

5434
// Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
5535
for (const obj of allImports.defaultComposables) {
@@ -83,8 +63,17 @@ export default defineNuxtModule<ModuleOptions>({
8363
transpileModules.add(obj.path);
8464
}
8565

86-
if (!!options.lowlight && options.lowlight !== false) {
66+
if (options.lowlight !== false) {
8767
optionalImports = [...optionalImports, ...allImports.lowlightImports];
68+
const lldefaultTheme = options.lowlight.theme || "github-dark";
69+
const highlightJSVersion =
70+
options.lowlight.highlightJSVersion || "11.9.0";
71+
const llThemeCSS = `https://unpkg.com/@highlightjs/cdn-assets@${highlightJSVersion}/styles/${lldefaultTheme}.min.css`;
72+
73+
nuxt.options.app.head.link = [
74+
...(nuxt.options.app.head.link || []),
75+
{ rel: "stylesheet", href: llThemeCSS },
76+
];
8877
}
8978

9079
optionalComponents = [...optionalComponents];
@@ -115,6 +104,8 @@ export default defineNuxtModule<ModuleOptions>({
115104
...transpileModules,
116105
];
117106

107+
nuxt.options.css = [...nuxt.options.css, ...customCSS];
108+
118109
console.log("Tiptap Editor initialized");
119110
},
120111
});

‎src/types.d.ts

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
// Whew, 249 themes to choose from, had to ask ChatGPT to process those HTML options into enum
2+
// Theme List Source: https://github.com/highlightjs/highlight.js/blob/6317acd780bfe448f75393ea42d53c0149013274/tools/developer.html#L73
3+
export type HighlightTheme =
4+
| "a11y-dark"
5+
| "a11y-light"
6+
| "agate"
7+
| "an-old-hope"
8+
| "androidstudio"
9+
| "arduino-light"
10+
| "arta"
11+
| "ascetic"
12+
| "atom-one-dark-reasonable"
13+
| "atom-one-dark"
14+
| "atom-one-light"
15+
| "base16/3024"
16+
| "base16/apathy"
17+
| "base16/apprentice"
18+
| "base16/ashes"
19+
| "base16/atelier-cave-light"
20+
| "base16/atelier-cave"
21+
| "base16/atelier-dune-light"
22+
| "base16/atelier-dune"
23+
| "base16/atelier-estuary-light"
24+
| "base16/atelier-estuary"
25+
| "base16/atelier-forest-light"
26+
| "base16/atelier-forest"
27+
| "base16/atelier-heath-light"
28+
| "base16/atelier-heath"
29+
| "base16/atelier-lakeside-light"
30+
| "base16/atelier-lakeside"
31+
| "base16/atelier-plateau-light"
32+
| "base16/atelier-plateau"
33+
| "base16/atelier-savanna-light"
34+
| "base16/atelier-savanna"
35+
| "base16/atelier-seaside-light"
36+
| "base16/atelier-seaside"
37+
| "base16/atelier-sulphurpool-light"
38+
| "base16/atelier-sulphurpool"
39+
| "base16/atlas"
40+
| "base16/bespin"
41+
| "base16/black-metal-bathory"
42+
| "base16/black-metal-burzum"
43+
| "base16/black-metal-dark-funeral"
44+
| "base16/black-metal-gorgoroth"
45+
| "base16/black-metal-immortal"
46+
| "base16/black-metal-khold"
47+
| "base16/black-metal-marduk"
48+
| "base16/black-metal-mayhem"
49+
| "base16/black-metal-nile"
50+
| "base16/black-metal-venom"
51+
| "base16/black-metal"
52+
| "base16/brewer"
53+
| "base16/bright"
54+
| "base16/brogrammer"
55+
| "base16/brush-trees-dark"
56+
| "base16/brush-trees"
57+
| "base16/chalk"
58+
| "base16/circus"
59+
| "base16/classic-dark"
60+
| "base16/classic-light"
61+
| "base16/codeschool"
62+
| "base16/cupcake"
63+
| "base16/cupertino"
64+
| "base16/danqing"
65+
| "base16/darcula"
66+
| "base16/dark-violet"
67+
| "base16/darkmoss"
68+
| "base16/darktooth"
69+
| "base16/decaf"
70+
| "base16/default-dark"
71+
| "base16/default-light"
72+
| "base16/dirtysea"
73+
| "base16/dracula"
74+
| "base16/edge-dark"
75+
| "base16/edge-light"
76+
| "base16/eighties"
77+
| "base16/embers"
78+
| "base16/equilibrium-dark"
79+
| "base16/equilibrium-gray-dark"
80+
| "base16/equilibrium-gray-light"
81+
| "base16/equilibrium-light"
82+
| "base16/espresso"
83+
| "base16/eva-dim"
84+
| "base16/eva"
85+
| "base16/flat"
86+
| "base16/framer"
87+
| "base16/fruit-soda"
88+
| "base16/gigavolt"
89+
| "base16/github"
90+
| "base16/google-dark"
91+
| "base16/google-light"
92+
| "base16/grayscale-dark"
93+
| "base16/grayscale-light"
94+
| "base16/green-screen"
95+
| "base16/gruvbox-dark-hard"
96+
| "base16/gruvbox-dark-medium"
97+
| "base16/gruvbox-dark-pale"
98+
| "base16/gruvbox-dark-soft"
99+
| "base16/gruvbox-light-hard"
100+
| "base16/gruvbox-light-medium"
101+
| "base16/gruvbox-light-soft"
102+
| "base16/hardcore"
103+
| "base16/harmonic16-dark"
104+
| "base16/harmonic16-light"
105+
| "base16/heetch-dark"
106+
| "base16/heetch-light"
107+
| "base16/helios"
108+
| "base16/hopscotch"
109+
| "base16/horizon-dark"
110+
| "base16/horizon-light"
111+
| "base16/humanoid-dark"
112+
| "base16/humanoid-light"
113+
| "base16/ia-dark"
114+
| "base16/ia-light"
115+
| "base16/icy-dark"
116+
| "base16/ir-black"
117+
| "base16/isotope"
118+
| "base16/kimber"
119+
| "base16/london-tube"
120+
| "base16/macintosh"
121+
| "base16/marrakesh"
122+
| "base16/materia"
123+
| "base16/material-darker"
124+
| "base16/material-lighter"
125+
| "base16/material-palenight"
126+
| "base16/material-vivid"
127+
| "base16/material"
128+
| "base16/mellow-purple"
129+
| "base16/mexico-light"
130+
| "base16/mocha"
131+
| "base16/monokai"
132+
| "base16/nebula"
133+
| "base16/nord"
134+
| "base16/nova"
135+
| "base16/ocean"
136+
| "base16/oceanicnext"
137+
| "base16/one-light"
138+
| "base16/onedark"
139+
| "base16/outrun-dark"
140+
| "base16/papercolor-dark"
141+
| "base16/papercolor-light"
142+
| "base16/paraiso"
143+
| "base16/pasque"
144+
| "base16/phd"
145+
| "base16/pico"
146+
| "base16/pop"
147+
| "base16/porple"
148+
| "base16/qualia"
149+
| "base16/railscasts"
150+
| "base16/rebecca"
151+
| "base16/ros-pine-dawn"
152+
| "base16/ros-pine-moon"
153+
| "base16/ros-pine"
154+
| "base16/sagelight"
155+
| "base16/sandcastle"
156+
| "base16/seti-ui"
157+
| "base16/shapeshifter"
158+
| "base16/silk-dark"
159+
| "base16/silk-light"
160+
| "base16/snazzy"
161+
| "base16/solar-flare-light"
162+
| "base16/solar-flare"
163+
| "base16/solarized-dark"
164+
| "base16/solarized-light"
165+
| "base16/spacemacs"
166+
| "base16/summercamp"
167+
| "base16/summerfruit-dark"
168+
| "base16/summerfruit-light"
169+
| "base16/synth-midnight-terminal-dark"
170+
| "base16/synth-midnight-terminal-light"
171+
| "base16/tango"
172+
| "base16/tender"
173+
| "base16/tomorrow-night"
174+
| "base16/tomorrow"
175+
| "base16/twilight"
176+
| "base16/unikitty-dark"
177+
| "base16/unikitty-light"
178+
| "base16/vulcan"
179+
| "base16/windows-10-light"
180+
| "base16/windows-10"
181+
| "base16/windows-95-light"
182+
| "base16/windows-95"
183+
| "base16/windows-high-contrast-light"
184+
| "base16/windows-high-contrast"
185+
| "base16/windows-nt-light"
186+
| "base16/windows-nt"
187+
| "base16/woodland"
188+
| "base16/xcode-dusk"
189+
| "base16/zenburn"
190+
| "brown-paper"
191+
| "brown-papersq.png"
192+
| "codepen-embed"
193+
| "color-brewer"
194+
| "dark"
195+
| "default"
196+
| "devibeans"
197+
| "docco"
198+
| "far"
199+
| "felipec"
200+
| "foundation"
201+
| "github-dark-dimmed"
202+
| "github-dark"
203+
| "github-gist"
204+
| "github"
205+
| "gml"
206+
| "googlecode"
207+
| "gradient-dark"
208+
| "gradient-light"
209+
| "grayscale"
210+
| "hybrid"
211+
| "idea"
212+
| "intellij-light"
213+
| "ir-black"
214+
| "isbl-editor-dark"
215+
| "isbl-editor-light"
216+
| "kimbie-dark"
217+
| "kimbie-light"
218+
| "lightfair"
219+
| "lioshi"
220+
| "magula"
221+
| "mono-blue"
222+
| "monokai-sublime"
223+
| "monokai"
224+
| "night-owl"
225+
| "nnfx-dark"
226+
| "nnfx-light"
227+
| "nord"
228+
| "obsidian"
229+
| "panda-syntax-dark"
230+
| "panda-syntax-light"
231+
| "paraiso-dark"
232+
| "paraiso-light"
233+
| "pojoaque"
234+
| "purebasic"
235+
| "qtcreator-dark"
236+
| "qtcreator-light"
237+
| "rainbow"
238+
| "routeros"
239+
| "school-book"
240+
| "shades-of-purple"
241+
| "srcery"
242+
| "stackoverflow-dark"
243+
| "stackoverflow-light"
244+
| "sunburst"
245+
| "tokyo-night-dark"
246+
| "tokyo-night-light"
247+
| "tomorrow-night-blue"
248+
| "tomorrow-night-bright"
249+
| "vs"
250+
| "vs2015"
251+
| "xcode"
252+
| "xt256";
253+
254+
export interface ModuleOptions {
255+
/**
256+
* Prefix for imported elements
257+
*
258+
* @default 'Tiptap'
259+
*/
260+
prefix: string;
261+
/**
262+
* Determine if lowlight should be enabled
263+
*
264+
* @default false
265+
*/
266+
lowlight?:
267+
| false
268+
| {
269+
/**
270+
* Language highlighting theme
271+
*
272+
* @default 'github-dark'
273+
*/
274+
theme?: HighlightTheme;
275+
276+
/**
277+
* highlight.js version used for css import
278+
*
279+
* @default '11.9.0'
280+
*/
281+
highlightJSVersion?: "11.9.0" | string;
282+
};
283+
}
284+
285+
declare module "nuxt-tiptap-editor" {
286+
interface NuxtConfig {
287+
tiptap?: ModuleOptions;
288+
}
289+
290+
interface NuxtOptions {
291+
tiptap?: ModuleOptions;
292+
}
293+
}

0 commit comments

Comments
 (0)