@witchcraft/editor 0.0.5 → 0.0.6

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

@@ -0,0 +1,85 @@
+import { isArray } from "@alanscodelog/utils/isArray";
+import { keys } from "@alanscodelog/utils/keys";
+import { mergeAttributes, Node, textblockTypeInputRule } from "@tiptap/core";
+import { changeLevelAttr } from "./commands/changeLevelAttr.js";
+export const Heading = Node.create({
+  name: "heading",
+  content: "inline*",
+  group: "block",
+  defining: true,
+  addOptions() {
+    return {
+      levels: [1, 2, 3, 4, 5, 6],
+      HTMLAttributes: {
+        class: [
+          "text-xl",
+          "text-2xl/normal",
+          "text-3xl/normal",
+          "text-4xl/normal",
+          "text-5xl/normal",
+          "text-6xl/normal"
+        ]
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        rendered: false
+      }
+    };
+  },
+  parseHTML() {
+    return this.options.levels.map((level) => ({
+      tag: `h${level}`,
+      attrs: { level }
+    }));
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  renderHTML({ HTMLAttributes, node }) {
+    const level = this.options.levels.includes(node.attrs.level) ? node.attrs.level : this.options.levels[0];
+    const thisFinalHTMLAttributes = { ...this.options.HTMLAttributes };
+    for (const key of keys(thisFinalHTMLAttributes)) {
+      if (isArray(thisFinalHTMLAttributes[key])) {
+        thisFinalHTMLAttributes[key] = thisFinalHTMLAttributes[key][level - 1];
+      }
+    }
+    return [
+      `h${level}`,
+      mergeAttributes(
+        thisFinalHTMLAttributes,
+        HTMLAttributes,
+        {
+          level
+        }
+      ),
+      0
+    ];
+  },
+  addCommands() {
+    return {
+      setHeading: changeLevelAttr({
+        attributeKey: "level",
+        nodeType: this.type.name,
+        allowedValues: this.options.levels,
+        toggleGroups: ["block"]
+      }),
+      toggleHeading: ({ level = 1 }) => ({ commands }) => {
+        if (!this.options.levels.includes(level)) {
+          return false;
+        }
+        return commands.toggleNode(this.name, "paragraph", { level });
+      }
+    };
+  },
+  addInputRules() {
+    return this.options.levels.map((level) => textblockTypeInputRule({
+      find: new RegExp(`^(#{1,${level}})\\s$`),
+      type: this.type,
+      getAttributes: {
+        level
+      }
+    }));
+  }
+});

package/dist/runtime/pm/features/Heading/commands/changeLevelAttr.d.ts

@@ -0,0 +1,16 @@
+import { type Command } from "@tiptap/core";
+import type { CommandAttributeOptions, CommandToggleNodesOptions } from "../../../../types/index.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        changeLevelAttr: {
+            changeLevelAttr: (opts: {
+                level: number;
+                onlyHeading: boolean;
+            }, pos?: number) => ReturnType;
+        };
+    }
+}
+export declare const changeLevelAttr: ({ nodeType, allowedValues, attributeKey, toggleGroups, toggleNodeTypeNames }: CommandAttributeOptions<number> & CommandToggleNodesOptions) => ({ level, onlyHeadings }: {
+    level: number;
+    onlyHeadings?: boolean;
+}, pos?: number) => Command;

package/dist/runtime/pm/features/Heading/commands/changeLevelAttr.js

@@ -0,0 +1,33 @@
+import { getNodeType } from "@tiptap/core";
+import { findUpwards } from "../../../utils/findUpwards.js";
+import { createNodeTypesList } from "../../../utils/internal/createNodeTypesList.js";
+export const changeLevelAttr = ({
+  nodeType,
+  allowedValues,
+  attributeKey,
+  toggleGroups,
+  toggleNodeTypeNames
+}) => ({
+  level,
+  onlyHeadings = false
+}, pos) => ({ state, commands, tr, editor }) => {
+  if (!allowedValues.includes(level)) {
+    return false;
+  }
+  const nodeTypes = createNodeTypesList(
+    editor.schema,
+    [nodeType],
+    onlyHeadings ? void 0 : toggleNodeTypeNames,
+    onlyHeadings ? void 0 : toggleGroups
+  );
+  const nodeTypeType = getNodeType(nodeType, editor.schema);
+  const from = pos ?? state.selection.map(tr.doc, tr.mapping).from;
+  const nodePos = findUpwards(tr.doc, from, ($pos) => {
+    if (nodeTypes.includes($pos.node().type.name)) {
+      return true;
+    }
+    return false;
+  })?.$pos?.pos;
+  if (!nodePos) return false;
+  return commands.setNode(nodeTypeType, { [`${attributeKey}`]: level }, nodePos - 1);
+};

package/dist/runtime/pm/features/Heading/types.d.ts

@@ -0,0 +1,14 @@
+export interface HeadingNodeOptions<T extends number[] = [1, 2, 3, 4, 5, 6]> {
+    /**
+     * The available heading levels.
+     */
+    levels: T;
+    /**
+     * The HTML attributes for the heading node.
+     *
+     * Each value can also be an array of values for each heading level.
+     *
+     * The default adds tailwind text size classes.
+     */
+    HTMLAttributes: Record<string, any>;
+}

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

@@ -0,0 +1,72 @@
+import { Mark } from "@tiptap/core";
+import { type HighlightMarkOptions } from "./types.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        highlight: {
+            /**
+             * Set a highlight mark.
+             *
+             * The color must be one of the keys in the configured `colors` option or it will throw an error.
+             *
+             * If no color is provided, the default color will be used.
+             */
+            setHighlight: (color?: keyof HighlightMarkOptions["colors"]) => ReturnType;
+            /**
+             * Toggle a highlight mark.
+             *
+             * The color must be one of the keys in the configured `colors` option or it will throw an error.
+             *
+             * If no color is provided, the default color will be used.
+             */
+            toggleHighlight: (color?: keyof HighlightMarkOptions["colors"]) => ReturnType;
+            /**
+             * Unset a highlight mark.
+             */
+            unsetHighlight: () => ReturnType;
+            /**
+             * Set the highlight options.
+             *
+             * Note that you will need to keep the same keys to avoid having to manually migrate the doc. You can add more keys, but again, not remove any without having to migrate the doc. That's why they are named slot* by default, to avoid tight coupling with colors.
+             */
+            setHighlightOptions: (options: Partial<HighlightMarkOptions>) => ReturnType;
+        };
+    }
+}
+export declare const defaultColors: {
+    slot1: {
+        name: string;
+        color: string;
+        matches: string[];
+    };
+    slot2: {
+        name: string;
+        color: string;
+        matches: string[];
+    };
+    slot3: {
+        name: string;
+        color: string;
+        matches: string[];
+    };
+    slot4: {
+        name: string;
+        color: string;
+        matches: string[];
+    };
+    slot5: {
+        name: string;
+        color: string;
+        matches: string[];
+    };
+};
+/**
+ * For highlighting text with pre-configured colors.
+ *
+ * Colors can be changed on the fly using setHighlightOptions.
+ *
+ * The Commands feature includes a HighlightIcon component designed to work with this extension. It's included in the CommandBar menu by default.
+ *
+ * See also `createToggleHighlightCommand` in commandBarMenuItems.ts for creating a custom number of commands with custom prefixes if needed.
+ */
+export declare const Highlight: Mark<HighlightMarkOptions<"slot1" | "slot2" | "slot3" | "slot4" | "slot5">, any>;
+export type MarkHighlightName = "highlight";

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

@@ -0,0 +1,163 @@
+import { keys } from "@alanscodelog/utils/keys";
+import {
+  Mark,
+  markInputRule,
+  markPasteRule,
+  mergeAttributes
+} from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { inputRegex, pasteRegex } from "./retyped/tiptapHighlight.js";
+import { highlightPluginKey } from "./types.js";
+import { createStateOnlyPluginObjApply } from "../../utils/createStateOnlyPluginObjApply.js";
+export const defaultColors = {
+  slot1: {
+    name: "Yellow",
+    color: "rgba(255, 234, 54, 0.5)",
+    matches: ["#ffff00", "yellow"]
+  },
+  slot2: {
+    name: "Orange",
+    color: "rgba(255, 132, 0, 0.5)",
+    matches: ["#ffa500", "orange"]
+  },
+  slot3: {
+    name: "Red",
+    color: "rgba(255, 0, 0, 0.5)",
+    matches: ["#ff0000", "red"]
+  },
+  slot4: {
+    name: "Green",
+    color: "rgba(70, 177, 0, 0.5)",
+    matches: ["#008000", "green"]
+  },
+  slot5: {
+    name: "Blue",
+    color: "rgba(0, 101, 255, 0.5)",
+    matches: ["#0000ff", "blue"]
+  }
+};
+export const Highlight = Mark.create({
+  name: "highlight",
+  addOptions() {
+    return {
+      defaultColor: "slot1",
+      colors: defaultColors,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element) => {
+          const color = element.getAttribute("data-color");
+          if (color && color in this.options.colors) {
+            return color;
+          }
+          const bgColor = element.style.backgroundColor;
+          const foundSimilar = keys(this.options.colors).find((key) => {
+            const c = this.options.colors[key];
+            if (c.color === color || color && c.matches?.includes(color) || c.color === bgColor || c.matches?.includes(bgColor)) return true;
+            return false;
+          });
+          if (foundSimilar) {
+            return foundSimilar;
+          }
+          if (color) {
+            return this.options.defaultColor;
+          }
+          return false;
+        },
+        renderHTML: (attributes) => {
+          const color = attributes.color;
+          if (!color) {
+            return {};
+          }
+          const finalColor = this.options.colors[color];
+          return {
+            "data-color": finalColor.color,
+            style: `background-color: ${finalColor.color}; color: inherit`
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mark"
+      }
+    ];
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  renderHTML({ HTMLAttributes }) {
+    return ["mark", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    return {
+      setHighlightOptions: (options) => ({ tr, dispatch }) => {
+        if (dispatch) {
+          tr.setMeta(highlightPluginKey, {
+            ...options,
+            colors: options.colors ? { ...options.colors } : void 0
+          });
+        }
+        return true;
+      },
+      setHighlight: (color) => ({ commands }) => {
+        if (color === void 0) {
+          return commands.setMark(this.name, { color: this.options.defaultColor });
+        }
+        if (color in this.options.colors) {
+          return commands.setMark(this.name, { color });
+        } else {
+          throw new Error(`Color ${color} not found in the Highlight options.`);
+        }
+      },
+      toggleHighlight: (color) => ({ commands }) => {
+        if (color === void 0) {
+          return commands.toggleMark(this.name, { color: this.options.defaultColor });
+        }
+        if (color in this.options.colors) {
+          return commands.toggleMark(this.name, { color });
+        } else {
+          throw new Error(`Color ${color} not found in the Highlight options.`);
+        }
+      },
+      unsetHighlight: () => ({ commands }) => commands.unsetMark(this.name)
+    };
+  },
+  addProseMirrorPlugins() {
+    const self = this;
+    return [
+      new Plugin({
+        key: highlightPluginKey,
+        state: {
+          init() {
+            return {
+              ...self.options,
+              colors: { ...self.options.colors }
+            };
+          },
+          apply: createStateOnlyPluginObjApply(highlightPluginKey)
+        }
+      })
+    ];
+  },
+  addInputRules() {
+    return [
+      markInputRule({
+        find: inputRegex,
+        type: this.type
+      })
+    ];
+  },
+  addPasteRules() {
+    return [
+      markPasteRule({
+        find: pasteRegex,
+        type: this.type
+      })
+    ];
+  }
+});

package/dist/runtime/pm/features/Highlight/retyped/tiptapHighlight.d.ts

@@ -0,0 +1,3 @@
+// see ./tiptapHighlight.js
+export declare const inputRegex: RegExp
+export declare const pasteRegex: RegExp

package/dist/runtime/pm/features/Highlight/retyped/tiptapHighlight.js

@@ -0,0 +1,5 @@
+/** Avoid importing the module directly to avoid interface merging. */
+import { inputRegex as _inputRegex, pasteRegex as _pasteRegex } from "@tiptap/extension-highlight"
+
+export const inputRegex = _inputRegex
+export const pasteRegex = _pasteRegex

package/dist/runtime/pm/features/Highlight/types.d.ts

@@ -0,0 +1,27 @@
+import { PluginKey } from "@tiptap/pm/state";
+import type { HTMLAttributesOptions } from "../../../types/index.js";
+export interface HighlightMarkOptions<T extends string = `slot${[1, 2, 3, 4, 5][number]}`> extends HTMLAttributesOptions {
+    /**
+     * The colors to use for the highlight in Record<name, {color: string, name: string}> format.
+     *
+     * This is to allow the colors/slots to be configurable by the user without needing to change the document when they do so since only the key is stored.
+     *
+     * The value is a record to allow additional properties to be stored.
+     *
+     * The `matches` property can be used to specify an additional array of strings/colors to match when parsing HTML.
+     *
+     * The default is Record<"slotX", {color: "rgbaa(...)", name: "colorName", matches?: [name, "#color"]}>
+     */
+    colors: Record<T, {
+        color: string;
+        name: string;
+        matches?: string[];
+    }>;
+    /**
+     * For when a non-matching color is found in the HTML. Default is slot1 which is yellow.
+     */
+    defaultColor: T;
+}
+export declare const highlightPluginKey: PluginKey<{
+    colors: HighlightMarkOptions["colors"];
+}>;

package/dist/runtime/pm/features/Highlight/types.js

@@ -0,0 +1,2 @@
+import { PluginKey } from "@tiptap/pm/state";
+export const highlightPluginKey = new PluginKey("highlightPluginKey");

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

@@ -0,0 +1,35 @@
+import type { Dispatch, Extension } from "@tiptap/core";
+import { type EditorState } from "@tiptap/pm/state";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        historyExtended: {
+            /**
+             * Set the functions needed to forward history commands.
+             *
+             * Set to null to disable. Should be set to null before destroying the editor.
+             */
+            setHistoryRedirect: (redirectState?: () => EditorState | undefined, redirectDispatch?: Dispatch) => ReturnType;
+        };
+    }
+}
+declare module "@tiptap/extension-history" {
+    interface HistoryOptions {
+        /**
+         * If set, undo and redo will be forwarded to the editor this function returns instead of the current one. This makes handling embedded editors easier.
+         *
+         * This is a function so as to make it easier to always get the latest state.
+         */
+        redirectState?: () => EditorState | undefined;
+        /**
+         * Required if redirectState is set. Tells the extension how to forward the transactions.
+         */
+        redirectDispatch?: Dispatch;
+    }
+}
+export declare const filterKey = "filterForHistoryForwarding";
+/**
+    * Extends the existing history extension to allow for forwarding of history for embedded editors.
+    *
+    * The embedded editor node view will take care of
+    */
+export declare const History: Extension<any, any>;

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

@@ -0,0 +1,63 @@
+import TipTapHistoryExtension from "@tiptap/extension-history";
+import { history, redo, undo } from "@tiptap/pm/history";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+export const filterKey = "filterForHistoryForwarding";
+export const History = TipTapHistoryExtension.extend({
+  name: "history",
+  addOptions() {
+    return {
+      depth: 100,
+      newGroupDelay: 500,
+      redirectState: void 0,
+      redirectDispatch: void 0
+    };
+  },
+  addCommands() {
+    return {
+      undo: () => ({ state, dispatch, tr }) => {
+        const redirectState = this.options.redirectState?.();
+        const redirectDispatch = dispatch && this.options.redirectDispatch;
+        if (redirectState) {
+          if (dispatch) {
+            tr.setMeta(filterKey, true);
+          }
+          return undo(redirectState, redirectDispatch);
+        } else {
+          return undo(state, dispatch);
+        }
+      },
+      redo: () => ({ state, dispatch, tr }) => {
+        const redirectState = this.options.redirectState?.();
+        const redirectDispatch = this.options.redirectDispatch;
+        if (redirectState) {
+          tr.setMeta(filterKey, true);
+          redo(redirectState, redirectDispatch);
+          return true;
+        } else {
+          return redo(state, dispatch);
+        }
+      },
+      setHistoryRedirect: (redirectState, redirectDispatch) => ({ dispatch }) => {
+        if (dispatch) {
+          this.options.redirectState = redirectState;
+          this.options.redirectDispatch = redirectDispatch;
+        }
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      history(this.options),
+      new Plugin({
+        key: new PluginKey("history-forwarding"),
+        filterTransaction: (transaction) => {
+          if (transaction.getMeta(filterKey)) {
+            return false;
+          }
+          return true;
+        }
+      })
+    ];
+  }
+});

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

@@ -0,0 +1,21 @@
+import { Node } from "@tiptap/core";
+import type { IframeNodeOptions } from "./types.js";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        iframe: {
+            /**
+             * Add an iframe
+             */
+            setIframe: (options: {
+                src: string;
+            }) => ReturnType;
+            /**
+             * Set the options for the iframe plugin, such as the default HTMLAttributes and the url handlers.
+             */
+            setIframeOptions: (options: IframeNodeOptions) => ReturnType;
+            openExternalLink: (url: string) => ReturnType;
+        };
+    }
+}
+export declare const Iframe: Node<IframeNodeOptions, any>;
+export type NodeIframeName = "iframe";

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

@@ -0,0 +1,127 @@
+import { mergeAttributes, Node, nodePasteRule } from "@tiptap/core";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import IframeNodeView from "./components/IframeNodeView.vue";
+import { defaultAllow, InstagramSourceParser, VimeoSourceParser, YoutubeSourceParser } from "./IframeParsers.js";
+export const Iframe = Node.create({
+  name: "iframe",
+  group: "block",
+  atom: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      handlers: {
+        youtube: new YoutubeSourceParser(),
+        instagram: new InstagramSourceParser(),
+        vimeo: new VimeoSourceParser()
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      src: {
+        default: null
+      },
+      frameborder: {
+        default: 0
+      },
+      allow: defaultAllow,
+      aspectRatio: {
+        default: 16 / 9
+      }
+    };
+  },
+  parseHTML() {
+    return [{
+      tag: "iframe",
+      getAttrs: (element) => {
+        const src = element.getAttribute("src");
+        if (!src) {
+          return false;
+        }
+        for (const value of Object.values(this.options.handlers)) {
+          if (value.matchUrl?.test(src)) {
+            const attrs = value.parseAttributes(element);
+            if (attrs) {
+              return {
+                ...attrs,
+                src: value.cleanUrl(src)
+              };
+            }
+          }
+        }
+        return { src };
+      }
+    }];
+  },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        class: `
+					iframe-wrapper
+					group/embed
+					relative
+					w-[99%]
+					max-w-[var(--pm-max-embed-width)]
+					${HTMLAttributes?.class ?? this.options.HTMLAttributes?.class ?? ""}
+				`
+      }),
+      [
+        "iframe",
+        { class: "w-full aspect-video" }
+      ]
+    ];
+  },
+  addPasteRules() {
+    return [
+      nodePasteRule({
+        find: (text) => {
+          for (const [key, value] of Object.entries(this.options.handlers)) {
+            if (!value.matchUrl) continue;
+            const res = text.match(value.matchUrl);
+            if (res) {
+              return [
+                {
+                  ...res,
+                  text,
+                  index: 0,
+                  type: key
+                }
+              ];
+            }
+          }
+          return null;
+        },
+        type: this.type,
+        getAttributes: (match) => {
+          for (const value of Object.values(this.options.handlers)) {
+            if (value.matchUrl && match[0].match(value.matchUrl)) {
+              return {
+                ...value.defaultAttributes,
+                src: value.cleanUrl(match[0])
+              };
+            }
+          }
+          return false;
+        }
+      })
+    ];
+  },
+  addNodeView() {
+    return VueNodeViewRenderer(IframeNodeView);
+  },
+  addCommands() {
+    return {
+      setIframe: (options) => ({ tr, dispatch }) => {
+        const { selection } = tr;
+        const node = this.type.create(options);
+        if (dispatch) {
+          tr.replaceRangeWith(selection.from, selection.to, node);
+        }
+        return true;
+      },
+      setIframeOptions: (options) => ({ commands }) => commands.updateAttributes(this.name, options)
+    };
+  }
+});