@witchcraft/editor 0.0.4 → 0.0.5

package/src/module.ts

@@ -9,7 +9,6 @@ import {
 import { defu } from "defu"
 import fs from "node:fs/promises"
 
-import pkg from "../package.json" with { type: "json" }
 
 const { resolve } = createResolver(import.meta.url)
 
@@ -35,7 +34,7 @@ export default defineNuxtModule<ModuleOptions>({
 	},
 	moduleDependencies: {
 		"@witchcraft/ui/nuxt": {
-			version: pkg.dependencies["@witchcraft/ui"]
+			version: "^0.3.2"
 		}
 	},
 	async setup(options, nuxt) {

package/src/runtime/pm/features/Blocks/components/ItemNodeView.vue

@@ -148,7 +148,7 @@
 		:style="`
 			left:${dropIndicator.x}px;
 			top:calc(${dropIndicator.y}px ${dropIndicator.type !== 'before' ? `- (var(--pmDragDropIndicatorHeight, 5px))` : ''});
-			width:${dropIndicator.width - dropIndicator.x}px;
+			width:calc(${dropIndicator.width}px);
 		`"
 	/>
 </Teleport>

package/src/runtime/pm/features/EmbeddedDocument/components/EmbeddedNodeView.vue

@@ -26,7 +26,7 @@
 		contenteditable="false"
 	>
 		<div
-			class="bg-neutral-100 dark:bg-neutral-900 flex p-1 gap-2 no-wrap justify-between align-center"
+			class="bg-neutral-100 dark:bg-neutral-900 flex p-1 gap-2 no-wrap justify-between items-center"
 			contenteditable="false"
 		>
 			<div

package/src/runtime/pm/utils/createDropIndicator.ts

@@ -15,12 +15,12 @@ export interface DropIndicator extends Point {
 export function createDropIndicator(
 	/** The drop point information object. */
 	dropInfo: DropInfo,
-	/** The bounding rectangle of the element being dragged over. */
+	/** The bounding rectangle of the element being dragged over. It will be used for positioning the indicator and constraining it's width `(target.x < indicator < target.right)`. */
 	targetRect: DOMRect,
 	/**
-	 * The indentation of the dragged item.
+	 * Determines the additional indentation to add when indicating a child drop operation. You normally want this to be the indentation of the dragged item.
 	 *
-	 * Can be gotten with {@link getElPropertyAsInt}
+	 * Can be gotten with {@link getElPropertyAsInt}, see it for details.
 	 */
 	indentX: number,
 	/** Maximum width of the drop indicator. See {@link getElMaxVisualSize}. */
@@ -57,5 +57,11 @@ export function createDropIndicator(
 			}
 		}
 	}
+
+	const rightDiff = (dropIndicator.x + dropIndicator.width) - (targetRect.right)
+
+	if (rightDiff > 0) {
+		dropIndicator.width -= rightDiff
+	}
 	return dropIndicator
 }

package/src/runtime/pm/utils/getElPropertyAsInt.ts

@@ -1,4 +1,7 @@
 const pxRegex = /([0-9.]+)px/g
+/**
+ * Returns any **pixel** css property as an integer.
+ */
 export function getElPropertyAsInt(el: HTMLElement, prop: string): number {
 	const value = window.getComputedStyle(el).getPropertyValue(prop)
 	if (!pxRegex.test(value)) {

package/dist/runtime/assets/base.css

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

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

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

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

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

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

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

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

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

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

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

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

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