@witchcraft/editor 0.0.3 → 0.0.5

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

@@ -1,92 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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.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

@@ -1,137 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/**
- * 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 {};