@witchcraft/editor 0.0.5 → 0.0.7

package/dist/runtime/pm/features/Iframe/IframeParsers.d.ts

@@ -0,0 +1,37 @@
+export declare const defaultAllow: string;
+export declare function addDefaultQueryParams(parsedUrl: URL, defaultQueryParams: Record<string, any>): string;
+export declare function getAspectRatio(element: HTMLElement, defaultRatio?: number): number | undefined;
+type DefaultAttributes = Record<string, any> & {
+    aspectRatio: number;
+};
+export interface IframeSourceParser {
+    defaultAttributes: DefaultAttributes;
+    defaultQueryParams: Record<string, any>;
+    parseAttributes: (element: HTMLElement) => Record<string, any> | false;
+    cleanUrl: (url: string) => string;
+    matchUrl?: RegExp;
+}
+export declare class DefaultSourceParser implements IframeSourceParser {
+    cache: Map<string, any>;
+    defaultAttributes: DefaultAttributes;
+    defaultQueryParams: Record<string, any>;
+    parseAttributes(element: HTMLElement): Record<string, any> | false;
+    cleanUrl(url: string): string;
+}
+export declare class YoutubeSourceParser extends DefaultSourceParser implements IframeSourceParser {
+    defaultAttributes: DefaultAttributes;
+    defaultQueryParams: Record<string, any>;
+    matchUrl: RegExp;
+}
+export declare class InstagramSourceParser extends DefaultSourceParser implements IframeSourceParser {
+    defaultAttributes: DefaultAttributes;
+    defaultQueryParams: Record<string, any>;
+    cleanUrl(url: string): string;
+    matchUrl: RegExp;
+}
+export declare class VimeoSourceParser extends DefaultSourceParser implements IframeSourceParser {
+    defaultAttributes: DefaultAttributes;
+    matchUrl: RegExp;
+    cleanUrl(url: string): string;
+}
+export {};

package/dist/runtime/pm/features/Iframe/IframeParsers.js

@@ -0,0 +1,88 @@
+export const defaultAllow = ["fullscreen", "accelerometer", "autoplay", "clipboard-write", "encrypted-media", "gyroscope", "picture-in-picture", "web-share"].join(";");
+export function addDefaultQueryParams(parsedUrl, defaultQueryParams) {
+  for (const [key, value] of Object.entries(defaultQueryParams)) {
+    if (!parsedUrl.searchParams.has(key)) {
+      parsedUrl.searchParams.set(key, value);
+    }
+  }
+  return parsedUrl.toString();
+}
+export function getAspectRatio(element, defaultRatio = 16 / 9) {
+  const width = element.getAttribute("width");
+  const height = element.getAttribute("height");
+  const w = width ? Number.parseInt(width, 10) : null;
+  const h = height ? Number.parseInt(height, 10) : null;
+  if (typeof w === "number" && typeof h === "number") {
+    return w / h;
+  }
+  return defaultRatio;
+}
+export class DefaultSourceParser {
+  cache = /* @__PURE__ */ new Map();
+  defaultAttributes = {
+    aspectRatio: 16 / 9
+  };
+  defaultQueryParams = {};
+  parseAttributes(element) {
+    const src = element.getAttribute("src");
+    const allow = element.getAttribute("allow");
+    const aspectRatio = getAspectRatio(element, this.defaultAttributes.aspectRatio);
+    if (!src) return false;
+    return {
+      src,
+      allow,
+      aspectRatio
+    };
+  }
+  cleanUrl(url) {
+    const parsedUrl = new URL(url);
+    addDefaultQueryParams(parsedUrl, this.defaultQueryParams);
+    return parsedUrl.toString();
+  }
+}
+export class YoutubeSourceParser extends DefaultSourceParser {
+  defaultAttributes = {
+    allow: defaultAllow,
+    referrerpolicy: "strict-origin-when-cross-origin",
+    allowfullscreen: "true",
+    aspectRatio: 16 / 9
+  };
+  defaultQueryParams = {
+    controls: 1
+  };
+  matchUrl = /^((?:https?:\/\/)?(?:www.)?(?:youtube.com|youtu.be.com)[^ ]*)$/g;
+}
+export class InstagramSourceParser extends DefaultSourceParser {
+  defaultAttributes = {
+    aspectRatio: 9 / 12
+  };
+  defaultQueryParams = {};
+  cleanUrl(url) {
+    const parsedUrl = new URL(url);
+    addDefaultQueryParams(parsedUrl, this.defaultQueryParams);
+    if (parsedUrl.pathname.includes("/embed")) {
+      return parsedUrl.toString();
+    } else {
+      parsedUrl.pathname += parsedUrl.pathname.endsWith("/") ? "embed" : "/embed";
+      return parsedUrl.toString();
+    }
+  }
+  matchUrl = /^((?:https?:\/\/)?(?:www.)?instagram.com\/p[^ ]*)$/g;
+}
+export class VimeoSourceParser extends DefaultSourceParser {
+  defaultAttributes = {
+    aspectRatio: 16 / 9,
+    allow: ["autoplay", "fullscreen", "picture-in-picture"].join(";")
+  };
+  matchUrl = /^((?:https?:\/\/)?(?:www.)?(?:player.)?vimeo.com\/[^ ]*)$/g;
+  cleanUrl(url) {
+    const parsedUrl = new URL(url);
+    addDefaultQueryParams(parsedUrl, this.defaultQueryParams);
+    if (parsedUrl.pathname.includes("/video") && parsedUrl.hostname.includes("player.vimeo.com")) {
+      return parsedUrl.toString();
+    } else {
+      parsedUrl.pathname = `/video${parsedUrl.pathname}`;
+      return new URL(parsedUrl.pathname, "https://player.vimeo.com/video").toString();
+    }
+  }
+}

package/dist/runtime/pm/features/Iframe/components/IframeNodeView.d.vue.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/Iframe/components/IframeNodeView.vue

@@ -0,0 +1,79 @@
+<template>
+<node-view-wrapper
+	:class="twMerge(`
+		frame-wrapper
+		group/embed
+		relative
+		max-w-[var(--pmMaxEmbedWidth)]
+		max-h-[var(--pmMaxEmbedHeight,_var(--pmMaxEmbedWidth))]
+	`)"
+	:style="`aspect-ratio: ${node.attrs.aspectRatio}`"
+>
+	<div
+		contenteditable="false"
+		class="
+			absolute
+			top-1
+			right-1
+			rounded-sm
+			bg-neutral-400/70
+			border-neutral-200
+			dark:bg-neutral-700/70
+			dark:border-neutral-700
+			p-1
+			flex
+			gap-1
+			opacity-0
+			group-hover/embed:opacity-100
+			transition-opacity
+		"
+	>
+		<WButton
+			:border="false"
+			@click="deleteNode();
+  editor.commands.focus()"
+		>
+			<WIcon><i-fa-solid-trash/></WIcon>
+		</WButton>
+		<WButton
+			:border="false"
+			@click="copy(node.attrs.src)"
+		>
+			<WIcon><i-fa-solid-copy/></WIcon>
+		</WButton>
+		<WButton
+			:border="false"
+			@click="openLink"
+		>
+			<WIcon><i-fa-solid-external-link-alt class="w-[1.25em]"/></WIcon>
+		</WButton>
+	</div>
+	<node-view-content
+		as="iframe"
+		:class="twMerge(
+  `
+		w-full
+		`,
+  node.attrs.class
+)"
+		:style="`aspect-ratio: ${node.attrs.aspectRatio}`"
+		v-bind="node.attrs"
+	/>
+	{{ Object.keys(node.attrs) }}
+</node-view-wrapper>
+</template>
+
+<script setup>
+import { NodeViewContent, nodeViewProps, NodeViewWrapper } from "@tiptap/vue-3";
+import WIcon from "@witchcraft/ui/components/Icon";
+import WButton from "@witchcraft/ui/components/LibButton";
+import { copy } from "@witchcraft/ui/helpers/copy";
+import { twMerge } from "tailwind-merge";
+import IFaSolidCopy from "~icons/fa-solid/copy";
+import IFaSolidExternalLinkAlt from "~icons/fa-solid/external-link-alt";
+import IFaSolidTrash from "~icons/fa-solid/trash";
+const props = defineProps(nodeViewProps);
+function openLink() {
+  props.editor.commands.openExternalLink(props.node.attrs.src);
+}
+</script>

package/dist/runtime/pm/features/Iframe/components/IframeNodeView.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/Iframe/types.d.ts

@@ -0,0 +1,5 @@
+import type { IframeSourceParser } from "./IframeParsers.js";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
+export interface IframeNodeOptions extends HTMLAttributesOptions {
+    handlers: Record<string, IframeSourceParser>;
+}

package/dist/runtime/pm/features/Image/Image.d.ts

@@ -0,0 +1,2 @@
+import type { Extension } from "@tiptap/core";
+export declare const Image: Extension<any, any>;

package/dist/runtime/pm/features/Image/Image.js

@@ -0,0 +1,13 @@
+import TipTapImage from "@tiptap/extension-image";
+export const Image = TipTapImage.configure({
+  HTMLAttributes: {
+    class: `
+			rounded-xs
+			block h-auto max-w-full 
+			[&.ProseMirror-selectednode]:outline
+			[&.ProseMirror-selectednode]:outline-offset-0
+			[&.ProseMirror-selectednode]:outline-accent-500
+		`
+  },
+  allowBase64: true
+});

package/dist/runtime/pm/features/Link/Link.d.ts

@@ -0,0 +1,38 @@
+import { type LinkOptions } from "@tiptap/extension-link";
+import { type AdditionalLinkOptions as AdditionalLinkNodeOptions, type LinkMenuPluginState } from "./types.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        links: {
+            /**
+             * Opens the link bubble menu when it's over a link and auto open is true.
+             * If the menu is already open, it focuses it.
+             */
+            openLinkMenu: (opts?: {
+                type?: "external" | "internal";
+            }) => ReturnType;
+            /** Closes the menu and focuses back to the editor. */
+            closeLinkMenu: () => ReturnType;
+            setLinkOpts: (opts: Partial<LinkOptions>) => ReturnType;
+            setLinkMenuOpts: (opts: Partial<Pick<LinkMenuPluginState, "autoOpen" | "allowAutoOpenOnRecentlyChangedLink">>) => ReturnType;
+            changeOrAddLink: (href: string, title: string, internal: boolean) => ReturnType;
+            expandSelectionToLink: () => ReturnType;
+            openInternalLink: (href: string) => ReturnType;
+            openExternalLink: (href: string) => ReturnType;
+        };
+    }
+}
+declare module "@tiptap/extension-link" {
+    interface LinkOptions extends AdditionalLinkNodeOptions {
+    }
+}
+/**
+ * Extension of tiptap's link extension that can handle "internal" and "external" links.
+ *
+ * Adds an additional configurable `openLinkOnClickModifier` option.
+ *
+ * Requires the setting of the `openInternal` option if using internal links.
+ *
+ * If using a custom editor wrapper, you will need to add the `BubbleMenuLink` component somewhere in the wrapper or implement your own.
+ */
+export declare const Link: import("@tiptap/core").Mark<LinkOptions, any>;
+export type MarkLinkName = "link";