@witchcraft/editor 0.0.5 → 0.0.7

package/dist/runtime/pm/features/CodeBlock/components/CodeBlockView.vue.d.ts

@@ -0,0 +1,92 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting.d.ts

@@ -0,0 +1,28 @@
+import type { Editor, Editor as PmEditor } from "@tiptap/core";
+import type { createLowlight } from "lowlight";
+import { type Ref, type ShallowRef } from "vue";
+import { type HighlightJsLanguageInfo } from "../highlightJsInfo.js";
+/**
+    * Listens for transactions and scans the document, dynamically loading the used highlight.js language themes.
+    *
+    * Automatically provides them using {@link langsInfoInjectionKey}.
+    *
+    * Allows passing additional themes via the additionalThemes prop.
+    *
+    * You should not need to use them directly, but returns the functions used to load, lazy load, and query the editor, and also the provided langsInfo.
+    *
+    */
+export declare function useAsyncCodeBlockHighlighting({ lowlightInstance, editor: editorRef, onError, debug }: {
+    lowlightInstance: ReturnType<typeof createLowlight>;
+    editor: ShallowRef<Editor | undefined>;
+    onError?: ((e: any) => void);
+    debug?: boolean;
+}): {
+    loadLang: (lang: string) => Promise<string | Error>;
+    lazyLoadCodeBlockLangs: ({ editor }: {
+        editor: PmEditor;
+    }) => Promise<void>;
+    getLangListFromEditor: (editor: PmEditor) => string[];
+    /** All importable highlight.js languages. */
+    langsInfo: Ref<HighlightJsLanguageInfo>;
+};

package/dist/runtime/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlighting.js

@@ -0,0 +1,137 @@
+import { keys } from "@alanscodelog/utils/keys";
+import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
+import { provide, ref, watch } from "vue";
+import { highlightJsLanaguages } from "../highlightJsInfo.js";
+import { langsInfoInjectionKey } from "../types.js";
+let langModulesDirectory = "../../../../../../../../highlight.js/es/languages";
+let langModules = import.meta.glob("../../../../../../../../highlight.js/es/languages/*.js", { import: "default" });
+const fallback = import.meta.glob("../../../../../../node_modules/highlight.js/es/languages/*.js", { import: "default" });
+if (keys(langModules).length === 0 && keys(fallback).length !== 0) {
+  langModules = fallback;
+  langModulesDirectory = "../../../../../../node_modules/highlight.js/es/languages";
+  console.warn("Using fallback highlight.js languages locations. This should not be happening unless developing the library locally from it's playground using the linked module.");
+}
+if (keys(langModules).length === 0) {
+  console.warn("Could not find any highlight.js languages. This is probably an issue with the editor package. Please report it.");
+}
+function defaultOnError(e) {
+  console.log(e);
+}
+export function useAsyncCodeBlockHighlighting({
+  lowlightInstance,
+  editor: editorRef,
+  onError = defaultOnError,
+  debug = false
+}) {
+  const allLangs = ref(highlightJsLanaguages);
+  if (debug) {
+    console.log({ langModulesDirectory, langModules, allLangs });
+  }
+  provide(langsInfoInjectionKey, allLangs);
+  async function loadLang(lang) {
+    if (lowlightInstance.registered(lang)) {
+      if (debug) {
+        console.log(`Already registered: ${lang}`);
+      }
+      const error = new Error(`Already registered: ${lang}`);
+      error.code = "ALREADY_REGISTERED";
+      return error;
+    }
+    if (allLangs.value.aliases[lang] === void 0) {
+      if (debug) {
+        console.error(`Unknown language or alias: ${lang}`);
+      }
+      return new Error(`Unknown language or alias: ${lang}`);
+    }
+    const fullName = allLangs.value.aliases[lang];
+    const langLoadingKey = `${langModulesDirectory}/${fullName}.js`;
+    const func = langModules[langLoadingKey];
+    if (func === void 0) {
+      return new Error(`Could not find language: ${langLoadingKey} in ${langModulesDirectory}. Valid paths are:
+${keys(langModules).join(",\n")}`);
+    }
+    const hljs = await func();
+    lowlightInstance.register(lang, hljs);
+    return lang;
+  }
+  function getLangListFromEditor(editor) {
+    const langs = [];
+    const doc = editor.state.doc;
+    editor.state.doc.nodesBetween(0, doc.nodeSize - 2, (node, pos) => {
+      if (node.type?.name === "codeBlock") {
+        const lang = node.attrs?.language;
+        const loading = node.attrs.loading;
+        if (debug) {
+          console.log(`Looked at node at pos ${pos} (lang: ${lang}, loading: ${loading}).`);
+        }
+        if (lang && loading) {
+          if (debug) {
+            console.log(`Found node at pos ${pos}.`);
+          }
+          pushIfNotIn(langs, [lang]);
+        }
+        return false;
+      }
+      return true;
+    });
+    return langs;
+  }
+  async function lazyLoadCodeBlocks({ editor, transaction }) {
+    if (debug) {
+      console.log(`lazyLoadCodeBlocks called, docChanged: ${transaction?.docChanged}.`);
+    }
+    if (!transaction?.docChanged) return;
+    const tr = editor.state.tr;
+    const langs = getLangListFromEditor(editor);
+    const loadableLangs = (await Promise.allSettled(langs.map(loadLang))).filter((_) => {
+      if (_.status === "rejected") {
+        onError(_.reason);
+      }
+      return _.status === "fulfilled" && !(_.value instanceof Error);
+    }).map((_) => _.value);
+    if (debug) {
+      console.log(`Found ${loadableLangs.length} loadable languages. 
+	${loadableLangs.join("\n	")}`);
+    }
+    editor.state.doc.nodesBetween(0, editor.state.doc.resolve(0).end(), (node, pos) => {
+      if (node.type?.name === "codeBlock") {
+        const langAttr = node.attrs?.language;
+        const loading = node.attrs.loading;
+        if (langAttr && loading && loadableLangs.includes(langAttr)) {
+          if (debug) {
+            console.log(`Set node at pos ${pos} as loaded.`);
+          }
+          tr.setNodeMarkup(pos, void 0, {
+            ...node.attrs,
+            language: langAttr,
+            loading: false
+          });
+        }
+        return false;
+      }
+      return true;
+    });
+    if (debug) {
+      console.log(`tr.docChanged: ${tr.docChanged}.`);
+    }
+    if (tr.docChanged) {
+      editor.view.dispatch(tr);
+    }
+  }
+  watch(editorRef, () => {
+    if (editorRef.value) {
+      editorRef.value.on("transaction", lazyLoadCodeBlocks);
+    } else {
+      editorRef.value.off("transaction", lazyLoadCodeBlocks);
+    }
+  });
+  if (editorRef.value) {
+    editorRef.value.on("transaction", lazyLoadCodeBlocks);
+  }
+  return {
+    loadLang,
+    lazyLoadCodeBlockLangs: lazyLoadCodeBlocks,
+    getLangListFromEditor,
+    langsInfo: allLangs
+  };
+}

package/dist/runtime/pm/features/CodeBlock/composables/useHighlightJsTheme.d.ts

@@ -0,0 +1,37 @@
+import { type Ref } from "vue";
+/**
+ * Dynamically loads and creates the css for a given theme.
+ *
+ * It's result, themeCss should be added as a head tag (e.g. using useHead or teleporting a `<component :is="'style'">` to the head).
+ *
+ * By default it's an array of one item so you can more easily pass it to {@link unhead https://unhead.unjs.io/}'s useHead.
+ *
+ * By default, it will only apply the theme to the code blocks in the prosemirror editor. This is done via css nesting so might not work in older browsers.
+ *
+ * While additionalThemes can be provided, it is dangerous to inject them from user input.
+ *
+ * Instead, you can create a theme that only uses css variables, then allow the user to customize the css variables instead.
+ *
+ * Dark theme detection is just done by checking if the theme name contains "dark".
+ *
+ * You can provide different background colors for dark and light themes by providing a `darkLightBgs` and it will automatically apply them.
+ */
+export declare function useHighlightJsTheme({ defaultTheme, darkLightBgs, additionalThemes, classes, debug }?: {
+    defaultTheme?: string;
+    darkLightBgs?: Ref<{
+        dark: string;
+        light: string;
+    }>;
+    /** Additional class to wrap the loaded css in. */
+    classes?: string;
+    additionalThemes?: Ref<Record<string, string>>;
+    debug?: boolean;
+}): {
+    theme: Ref<string, string>;
+    knownThemes: Ref<string[], string[]>;
+    loadTheme: (themeName: string) => Promise<undefined | Error>;
+    isDark: import("@vue/reactivity").ComputedRef<boolean>;
+    backgroundColor: import("@vue/reactivity").ComputedRef<string>;
+    themeCss: import("@vue/reactivity").ComputedRef<string[]>;
+    rawThemeCss: Ref<string, string>;
+};

package/dist/runtime/pm/features/CodeBlock/composables/useHighlightJsTheme.js

@@ -0,0 +1,101 @@
+import { crop } from "@alanscodelog/utils/crop";
+import { dedupe } from "@alanscodelog/utils/dedupe";
+import { indent } from "@alanscodelog/utils/indent";
+import { isWhitespace } from "@alanscodelog/utils/isWhitespace";
+import { keys } from "@alanscodelog/utils/keys";
+import { computed, ref, watch } from "vue";
+let themeModulePath = "../../../../../../../../highlight.js/styles/";
+let themeModules = import.meta.glob("../../../../../../../../highlight.js/styles/*.css", {
+  query: "?raw",
+  import: "default"
+});
+const fallback = import.meta.glob("../../../../../../node_modules/highlight.js/styles/*.css", {
+  query: "?raw",
+  import: "default"
+});
+if (keys(themeModules).length === 0 && keys(fallback).length !== 0) {
+  themeModules = fallback;
+  themeModulePath = "../../../../../../node_modules/highlight.js/styles/";
+  console.warn("Using fallback highlight.js themes locations. This should not be happening unless developing the library locally from it's playground using the linked module.");
+}
+if (keys(themeModules).length === 0) {
+  console.warn("Could not find any highlight.js themes. This is probably an issue with the editor package. Please report it.");
+}
+const themeModuleNames = dedupe(keys(themeModules).map((k) => {
+  const end = k.endsWith(".min.css") ? ".min.css" : ".css";
+  return k.slice(`${themeModulePath}`.length, end.length * -1);
+}));
+export function useHighlightJsTheme({
+  defaultTheme = "github-dark",
+  darkLightBgs,
+  additionalThemes,
+  classes = ".ProseMirror",
+  debug = false
+} = {}) {
+  if (debug) {
+    console.log({ themeModules, themeModuleNames });
+  }
+  const theme = ref(defaultTheme);
+  const knownThemes = ref(themeModuleNames);
+  const loadedThemes = ref({});
+  if (additionalThemes) {
+    watch(additionalThemes, (newThemes) => {
+      if (debug) {
+        console.log("Adding additional themes:", additionalThemes);
+      }
+      for (const [themeName, themeCss2] of Object.entries(newThemes)) {
+        loadedThemes.value[themeName] = themeCss2;
+      }
+    });
+  }
+  const rawThemeCss = ref("");
+  async function loadTheme(themeName) {
+    if (loadedThemes.value[themeName]) return;
+    const themeLoadingKey = `${themeModulePath}${themeName}.css`;
+    const func = themeModules[themeLoadingKey];
+    if (func === void 0) {
+      throw new Error(`Could not find theme: ${themeLoadingKey} in ${themeModulePath}. Valid paths are:
+${keys(themeModules).join(",\n")}`);
+    }
+    const themeStyle = await func();
+    if (debug) {
+      console.log("Loading theme:", { themeName, themeLoadingKey, themeStyle });
+    }
+    rawThemeCss.value = themeStyle;
+    return void 0;
+  }
+  void loadTheme(theme.value);
+  const isDark = computed(() => theme.value.includes("dark"));
+  const backgroundColor = computed(() => {
+    const colors = {
+      dark: "#1e1e1e",
+      light: "#ffffff",
+      ...darkLightBgs?.value ?? {}
+    };
+    return colors[isDark.value ? "dark" : "light"];
+  });
+  const themeCss = computed(() => {
+    const innerCss = `
+			${indent(rawThemeCss.value, 3)}
+			.hljs {
+				background-color: ${backgroundColor.value};
+			}
+		`;
+    return [
+      isWhitespace(classes) ? innerCss : crop`
+			${classes} {
+				${indent(innerCss, 1)}
+			}
+		`
+    ];
+  });
+  return {
+    theme,
+    knownThemes,
+    loadTheme,
+    isDark,
+    backgroundColor,
+    themeCss,
+    rawThemeCss
+  };
+}

package/dist/runtime/pm/features/CodeBlock/highlightJsInfo.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This is an auto-generated file.
+ *
+ * Do not edit manually.
+ *
+ * See build/utils/generateHighlightJsInfo.js
+ */
+type LanguageState = Record<string, {
+    loaded: boolean;
+    aliases: string[];
+}>;
+export type HighlightJsLanguageInfo = {
+    languages: LanguageState;
+    aliases: Record<string, string>;
+};
+export declare const highlightJsLanaguages: HighlightJsLanguageInfo;
+export {};