@witchcraft/editor 0.0.5 → 0.0.6

package/dist/module.d.mts

@@ -1,2 +1,15 @@
-export * from "/home/runner/work/editor/editor/src/module.js";
-export { default } from "/home/runner/work/editor/editor/src/module.js";
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        witchcraftEditor: {};
+    }
+}
+interface ModuleOptions {
+    /** @internal */
+    _playgroundWorkaround?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftEditor",
   "configKey": "witchcraftEditor",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,18 +1,72 @@
-import { createJiti } from "file:///home/runner/work/editor/editor/node_modules/.pnpm/jiti@2.6.1/node_modules/jiti/lib/jiti.mjs";
+import { crop } from '@alanscodelog/utils';
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
+import { defu } from 'defu';
+import fs from 'node:fs/promises';
 
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@witchcraft/editor": "/home/runner/work/editor/editor"
+const { resolve } = createResolver(import.meta.url);
+const module = defineNuxtModule({
+  meta: {
+    name: "witchcraftEditor",
+    configKey: "witchcraftEditor"
   },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
+  defaults: {
+    _playgroundWorkaround: false
+  },
+  moduleDependencies: {
+    "@witchcraft/ui/nuxt": {
+      version: "^0.3.2"
+    }
+  },
+  async setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.witchcraftEditor = defu(
+      nuxt.options.runtimeConfig.public.witchcraftEditor,
+      {}
+    );
+    addComponentsDir({ path: resolve("./runtime/components") });
+    const pmFeatures = await fs.readdir(resolve("./runtime/pm/features"));
+    for (const feature of pmFeatures) {
+      nuxt.options.build.transpile.push(resolve(`./runtime/pm/features/${feature}/${feature}`));
+      if (await fs.stat(resolve(`./runtime/pm/features/${feature}/components`)).then((_) => true).catch(() => false)) {
+        addComponentsDir({ path: resolve(`./runtime/pm/features/${feature}/components`) });
+      }
+      if (await fs.stat(resolve(`./runtime/pm/features/${feature}/composables`)).then((_) => true).catch(() => false)) {
+        addImportsDir(resolve(`./runtime/pm/features/${feature}/composables`));
+      }
     }
+    addTemplate({
+      filename: "witchcraft-editor.css",
+      write: true,
+      getContents: () => options._playgroundWorkaround ? crop`
+					@import "${resolve("./runtime/assets/base.css")}";
+					@import "${resolve("./runtime/assets/utils.css")}";
+					@source "${resolve("./runtime/components")}";
+					@source "${resolve("./runtime/pm")}";
+				` : crop`
+					@import "@witchcraft/editor/base.css";
+					@import "@witchcraft/editor/utils.css";
+					@source "${resolve("./runtime/components")}";
+					@source "${resolve("./runtime/pm")}";
+				`
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    nuxt.options.typescript = nuxt.options.typescript || {};
+    nuxt.options.typescript.hoist = nuxt.options.typescript.hoist || [];
+    nuxt.options.alias["#witchcraft-editor"] = resolve("./runtime");
+    nuxt.options.alias["#witchcraft-pm"] = resolve("./runtime/pm");
+    nuxt.options.build.transpile.push("@tiptap/vue-3");
+    nuxt.options.build.transpile.push("@tiptap/pm");
+    nuxt.hook("vite:extendConfig", (config) => {
+      config.optimizeDeps ??= {};
+      config.optimizeDeps.exclude ??= [];
+      config.optimizeDeps.exclude.push("@witchcraft/editor/pm/features/CodeBlock/composables/useHighlightJsTheme");
+      config.optimizeDeps.exclude.push("@witchcraft/editor/pm/features/CodeBlock/composables/useAsyncCodeBlockHighlight");
+      config.optimizeDeps.exclude.push("@tiptap/vue-3");
+      config.optimizeDeps.exclude.push("@tiptap/pm");
+      config.optimizeDeps.include ??= [];
+      config.optimizeDeps.include.push("highlight.js/lib/core");
+      config.optimizeDeps.include.push("@witchcraft/editor > highlight.js/lib/core");
+    });
   }
-})
-
-/** @type {import("/home/runner/work/editor/editor/src/module.js")} */
-const _module = await jiti.import("/home/runner/work/editor/editor/src/module.ts");
+});
 
-export default _module?.default ?? _module;
+export { module as default };

package/dist/runtime/assets/base.css

@@ -0,0 +1 @@
+html{padding:none}.tiptap .tableWrapper table{border-collapse:separate;border-spacing:0;margin:0;overflow:hidden;table-layout:fixed;width:100%}.tiptap .tableWrapper table thead{font-weight:700}.tiptap .tableWrapper table td,.tiptap .tableWrapper table th{border-right:1px solid;border-top:1px solid;border-color:var(--color-neutral-500);min-width:1em;padding:var(--spacing);position:relative}.tiptap .tableWrapper table td:first-of-type,.tiptap .tableWrapper table th:first-of-type{border-left:1px solid;border-color:var(--color-neutral-500)}.tiptap .tableWrapper table tr:last-of-type td,.tiptap .tableWrapper table tr:last-of-type th{border-bottom:1px solid;border-color:var(--color-neutral-500)}.tiptap .tableWrapper table tr:last-of-type td:last-of-type,.tiptap .tableWrapper table tr:last-of-type th:last-of-type{border-radius:0 0 var(--radius-sm)}.tiptap .tableWrapper table tr:last-of-type td:first-of-type,.tiptap .tableWrapper table tr:last-of-type th:first-of-type{border-radius:0 0 0 var(--radius-sm)}.tiptap .tableWrapper table tr:first-of-type td:last-of-type,.tiptap .tableWrapper table tr:first-of-type th:last-of-type{border-radius:0 var(--radius-sm) 0 0}.tiptap .tableWrapper table tr:first-of-type td:first-of-type,.tiptap .tableWrapper table tr:first-of-type th:first-of-type{border-radius:var(--radius-sm) 0 0 0}.tiptap .tableWrapper table .selectedCell:after{background-color:--alpha(var(--color-blue-500)/20%);content:"";inset:0;pointer-events:none;position:absolute;z-index:10}.tiptap .tableWrapper table .column-resize-handle{background-color:--alpha(var(--color-blue-500)/20%);bottom:-2px;pointer-events:none;position:absolute;right:-2px;top:0;width:4px}.tiptap .tableWrapper{overflow-x:auto}.tiptap.resize-cursor{cursor:ew-resize;cursor:col-resize}

package/dist/runtime/assets/handle-arrow.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="20"
+   height="40"
+   version="1.1"
+   viewBox="0 0 20 40"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 0,0 20,20 0,40 Z"
+     id="path1" />
+</svg>

package/dist/runtime/assets/handle-border-circles-single.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="40"
+   height="40"
+   version="1.1"
+   viewBox="0 0 40 40"
+   id="svg2"
+   sodipodi:docname="handle-border-circles-single.svg"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="7.5837202"
+     inkscape:cx="42.986818"
+     inkscape:cy="46.810799"
+     inkscape:window-width="1920"
+     inkscape:window-height="1044"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <defs
+     id="defs2" />
+  <g
+     fill="#000000"
+     id="g2"
+     transform="translate(12.5,-30)">
+    <circle
+       cx="7.5"
+       cy="50"
+       r="12.5"
+       id="circle1" />
+  </g>
+</svg>

package/dist/runtime/assets/handle-border-circles.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="75"
+   height="40"
+   version="1.1"
+   viewBox="0 0 75 40"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs2" />
+  <g
+     fill="#000000"
+     id="g2"
+     transform="translate(0,-30)">
+    <circle
+       cx="12.5"
+       cy="50"
+       r="12.5"
+       id="circle1" />
+    <circle
+       cx="62.5"
+       cy="50"
+       r="12.5"
+       id="circle2" />
+  </g>
+</svg>

package/dist/runtime/assets/handle-temp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>

package/dist/runtime/assets/utils.css

@@ -0,0 +1 @@
+@layer utilities{.pm-unfocused-selection{background-color:var(--pmUnfocusedSelectionColor);box-shadow:5px 0 0 0 var(--pmUnfocusedSelectionColor)}.pm-unfocused-selection-end{box-shadow:none}}

package/dist/runtime/components/CodeBlockThemePicker.d.vue.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    codeBlocksThemeList: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "codeBlocksTheme": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:codeBlocksTheme": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:codeBlocksTheme"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/CodeBlockThemePicker.vue

@@ -0,0 +1,123 @@
+<script setup>
+import WIcon from "@witchcraft/ui/components/Icon";
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxViewport
+} from "reka-ui";
+import IRadixIconsCheck from "~icons/radix-icons/check";
+defineProps({
+  codeBlocksThemeList: { type: Array, required: true }
+});
+const codeBlocksTheme = defineModel("codeBlocksTheme", { type: String, ...{ required: true } });
+</script>
+
+<template>
+<label class="flex items-center gap-2">
+	<span>Code Block Theme:</span>
+
+	<ComboboxRoot
+		class="relative"
+		:open-on-click="true"
+		v-model="codeBlocksTheme"
+	>
+		<ComboboxAnchor
+			class="
+				flex
+				items-center
+				justify-between
+				rounded-sm
+				px-2
+				leading-none
+				fg-inherit
+				bg-inherit
+				outlined-within:border-accent-500
+				gap-2
+			"
+		>
+			<!-- @vue-expect-error -->
+			<ComboboxInput
+				class="
+					bg-inherit
+					min-w-[70px]
+					w-full
+					outline-hidden
+					focus-outline
+					border-b
+					border-accent-400
+				"
+				placeholder="Placeholder..."
+			/>
+		</ComboboxAnchor>
+		<ComboboxPortal
+			to="#root"
+		>
+			<ComboboxContent
+				side="bottom"
+				position="popper"
+				:avoid-collisions="true"
+				:prioritize-position="true"
+				class="
+					z-100
+					w-[var(--reka-combobox-trigger-width)]
+					align-end
+					bg-white
+					dark:bg-neutral-900
+					overflow-hidden
+					will-change-[opacity,transform]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					border-neutral-500
+					dark:border-neutral-700
+					border-1
+					rounded-sm
+					shadow-[0_0_10px_1px]
+					shadow-black/30
+					mt-2
+					max-h-[50vh]
+				"
+				ref="contentComponent"
+			>
+				<ComboboxViewport
+					class="flex flex-col"
+				>
+					<ComboboxItem
+						:value="option"
+						class="
+						flex
+						justify-between
+						gap-2
+						px-2
+						cursor-pointer
+						data-[highlighted]:outline-hidden
+						data-[highlighted]:bg-accent-200
+						data-[highlighted]:text-accent-800
+						dark:data-[highlighted]:bg-accent-800
+						dark:data-[highlighted]:text-accent-200
+						pl-[25px]
+					"
+						v-for="option in codeBlocksThemeList"
+						:key="option"
+					>
+						<span>
+							{{ option }}
+						</span>
+						<ComboboxItemIndicator
+							class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+						>
+							<WIcon><i-radix-icons-check/></WIcon>
+						</ComboboxItemIndicator>
+					</ComboboxItem>
+				</ComboboxViewport>
+			</ComboboxContent>
+		</ComboboxPortal>
+	</ComboboxRoot>
+</label>
+</template>

package/dist/runtime/components/CodeBlockThemePicker.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    codeBlocksThemeList: string[];
+};
+type __VLS_PublicProps = __VLS_Props & {
+    "codeBlocksTheme": string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:codeBlocksTheme": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:codeBlocksTheme"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Commands.d.vue.ts

@@ -0,0 +1,10 @@
+import type { Editor, SingleCommands } from "@tiptap/core";
+type __VLS_Props = {
+    editor: Editor;
+    commands: {
+        key: keyof SingleCommands;
+        buttons?: any[][];
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Commands.vue

@@ -0,0 +1,60 @@
+<template>
+<div
+	:class="twMerge(`
+		flex
+		gap-2
+		flex-wrap
+		p-2
+	`)"
+>
+	<div
+		:class="twMerge(
+  `
+			pb-2
+			flex
+			flex-wrap
+			gap-2
+		`,
+  (command.buttons?.length ?? 0) > 1 && `
+			border
+			border-neutral-500
+			rounded-sm
+			w-full
+			p-2
+			`
+)"
+		v-for="command of commands"
+		:key="command.key"
+	>
+		<div v-if="(command?.buttons?.[0]?.length ?? 0) >= 1">
+			{{ command.key }}
+		</div>
+		<WButton
+			v-for="args in command.buttons"
+			:key="command.key + pretty(args)"
+			@pointerdown="handlePointerDown($event, command, args)"
+		>
+			{{ (command?.buttons?.[0]?.length ?? 0) >= 1 ? "" : command.key }}
+			{{ args.map((_) => pretty(_)).join(" ") }}
+		</WButton>
+	</div>
+</div>
+</template>
+
+<script setup>
+import { pretty } from "@alanscodelog/utils";
+import WButton from "@witchcraft/ui/components/LibButton";
+import { twMerge } from "tailwind-merge";
+const props = defineProps({
+  editor: { type: null, required: true },
+  commands: { type: Array, required: true }
+});
+function handlePointerDown($event, command, args) {
+  $event.preventDefault();
+  $event.stopPropagation();
+  const commandFunc = props.editor.chain().focus()[command.key](...args);
+  if (typeof commandFunc === "object") {
+    commandFunc.run();
+  }
+}
+</script>

package/dist/runtime/components/Commands.vue.d.ts

@@ -0,0 +1,10 @@
+import type { Editor, SingleCommands } from "@tiptap/core";
+type __VLS_Props = {
+    editor: Editor;
+    commands: {
+        key: keyof SingleCommands;
+        buttons?: any[][];
+    }[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Editor.d.vue.ts

@@ -0,0 +1,40 @@
+import type { Content, EditorOptions } from "@tiptap/core";
+import type { ScrollNearContainerEdgesOptions } from "@witchcraft/ui/types/index";
+import { type DocumentApiInterface } from "../pm/features/DocumentApi/types.js";
+import type { EditorLinkOptions } from "../pm/features/Link/types";
+import { type CssVariables, type MenuRenderInfo } from "../types/index.js";
+type __VLS_Props = {
+    /** The content for the editor. It is better to use docId and the documentApi instead. */
+    content?: Content;
+    docId?: string;
+    /** The document api, required for the root editor if using nested embeds. This is provided as the documentApi using the documentApiInjectionKey. */
+    documentApi?: DocumentApiInterface;
+    /** The link options, required for the root editor. Not required for embedded editors. */
+    linkOptions?: EditorLinkOptions;
+    /** See my component library's (@witchcraft/ui) useScrollNearContainerEdges composable for more info. */
+    dragScrollOptions?: Pick<ScrollNearContainerEdgesOptions, "scrollMargin" | "outerScrollMargin" | "fastPixelMultiplier">;
+    cssVariables?: Partial<CssVariables>;
+    editorOptions?: Partial<EditorOptions>;
+    codeBlocksThemeIsDark?: boolean;
+    menus?: Record<string, MenuRenderInfo>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {
+    editor: import("vue").ShallowRef<import("@tiptap/vue-3").Editor | undefined, import("@tiptap/vue-3").Editor | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    load: () => any;
+    unload: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onLoad?: (() => any) | undefined;
+    onUnload?: (() => any) | undefined;
+}>, {
+    menus: Record<string, MenuRenderInfo>;
+    content: Content;
+    docId: string;
+    documentApi: DocumentApiInterface;
+    linkOptions: EditorLinkOptions;
+    dragScrollOptions: Pick<ScrollNearContainerEdgesOptions, "scrollMargin" | "outerScrollMargin" | "fastPixelMultiplier">;
+    cssVariables: Partial<CssVariables>;
+    editorOptions: Partial<EditorOptions>;
+    codeBlocksThemeIsDark: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;