@pixerate/editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jack James
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/extensions/index.cjs

@@ -0,0 +1,616 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/extensions/index.ts
+var extensions_exports = {};
+__export(extensions_exports, {
+  ColorHighlighter: () => ColorHighlighter,
+  FontSize: () => FontSize,
+  GradientText: () => GradientText,
+  LoadingNode: () => LoadingNode,
+  SlashCommands: () => SlashCommands,
+  SmilieReplacer: () => SmilieReplacer,
+  TemplateSuggestions: () => TemplateSuggestions,
+  createRichTextPreset: () => createRichTextPreset,
+  findHexColors: () => findHexColors
+});
+module.exports = __toCommonJS(extensions_exports);
+
+// src/extensions/gradient-text.ts
+var import_core = require("@tiptap/core");
+var import_state = require("@tiptap/pm/state");
+var import_view = require("@tiptap/pm/view");
+
+// src/grammar/tokens.ts
+var TEMPLATE_REGEX = /{{\s*([^}]+?)\s*}}/g;
+var VARIABLE_REGEX = /(?<!\{)\{([^{}]+)\}(?!\})/g;
+var INSTRUCTION_REGEX = /__(.+?)__/g;
+
+// src/extensions/gradient-text.ts
+var createGradientDecorations = (doc, options) => {
+  const decorations = [];
+  const speed = options.speed ?? 1;
+  const jsonVarSet = options.jsonVariables ? options.jsonVariables instanceof Set ? options.jsonVariables : new Set(options.jsonVariables) : null;
+  doc.descendants((node, pos) => {
+    if (node.isText) {
+      const text = node.text || "";
+      let match;
+      const tmplRegex = new RegExp(TEMPLATE_REGEX.source, TEMPLATE_REGEX.flags);
+      while ((match = tmplRegex.exec(text)) !== null) {
+        const templateName = match[1].trim();
+        const colors = options.templateColorMap?.get(templateName);
+        if (colors) {
+          const start = pos + match.index;
+          const end = start + match[0].length;
+          const { from: colorFrom, to: colorTo } = colors;
+          const style = `--bg-size: ${speed * 300}%; --color-from: ${colorFrom}; --color-to: ${colorTo}; caret-color: #111 !important;`;
+          decorations.push(
+            import_view.Decoration.inline(start, end, {
+              class: "inline animate-gradient bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent border border-(--color-to)/20 px-1 py-0.5 rounded-sm cursor-pointer",
+              style,
+              "data-template": templateName
+            })
+          );
+        }
+      }
+      const instRegex = new RegExp(
+        INSTRUCTION_REGEX.source,
+        INSTRUCTION_REGEX.flags
+      );
+      while ((match = instRegex.exec(text)) !== null) {
+        const content = match[1].trim();
+        const colors = options.templateColorMap?.get(content) || {
+          from: "#ffaa40",
+          to: "#9c40ff"
+        };
+        const start = pos + match.index;
+        const end = start + match[0].length;
+        const { from: colorFrom, to: colorTo } = colors;
+        const style = `--bg-size: ${speed * 300}%; --color-from: ${colorFrom}; --color-to: ${colorTo}; caret-color: #111 !important;`;
+        decorations.push(
+          import_view.Decoration.inline(start, end, {
+            class: "italic animate-gradient bg-gradient-to-r from-rose-400 from-50% to-violet-500 to-50% bg-size-[200%_100%] bg-clip-text text-transparent inline-flex items-baseline gap-0.5",
+            style
+          })
+        );
+      }
+      const varRegex = new RegExp(
+        VARIABLE_REGEX.source,
+        VARIABLE_REGEX.flags
+      );
+      while ((match = varRegex.exec(text)) !== null) {
+        const variableName = match[1].trim();
+        const start = pos + match.index;
+        const end = start + match[0].length;
+        const isJsonVar = jsonVarSet?.has(variableName);
+        decorations.push(
+          import_view.Decoration.inline(start, end, {
+            class: isJsonVar ? "bg-violet-400/40 border-b-4 border-rose-300 dark:border-rose-800 inline-flex items-baseline px-1 py-0 text-foreground/80 gap-0.5 rounded-xs" : "bg-rose-400/40 border-b-4 border-violet-300 dark:border-violet-800 inline-flex items-baseline px-1 py-0 text-foreground/80 gap-0.5 rounded-xs",
+            "data-variable": variableName
+          })
+        );
+      }
+    }
+  });
+  return decorations;
+};
+var GradientText = import_core.Mark.create({
+  name: "gradientText",
+  addOptions() {
+    return {
+      templateColorMap: /* @__PURE__ */ new Map(),
+      speed: 1,
+      jsonVariables: void 0,
+      onTemplateClick: void 0
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    const defaultColors = {
+      from: "#ffaa40",
+      to: "#9c40ff"
+    };
+    const speed = this.options.speed ?? 1;
+    const style = `--bg-size: ${speed * 300}%; --color-from: ${defaultColors.from}; --color-to: ${defaultColors.to}; caret-color: #111 !important;`;
+    return [
+      "span",
+      {
+        class: "inline animate-gradient bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent",
+        style,
+        ...HTMLAttributes
+      },
+      0
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (node) => node.classList.contains("animate-gradient") && node.classList.contains("bg-clip-text") && null
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    const markOptions = this.options;
+    return [
+      new import_state.Plugin({
+        state: {
+          init(_, { doc }) {
+            return import_view.DecorationSet.create(
+              doc,
+              createGradientDecorations(doc, markOptions)
+            );
+          },
+          apply(tr, value) {
+            const newDoc = tr.doc;
+            if (tr.docChanged) {
+              return import_view.DecorationSet.create(
+                newDoc,
+                createGradientDecorations(newDoc, markOptions)
+              );
+            }
+            return value.map(tr.mapping, newDoc);
+          }
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+          handleClickOn(view, pos, _node, _nodePos, event) {
+            const decorationSet = this.getState(
+              view.state
+            );
+            const decorations = decorationSet.find(pos, pos + 1);
+            for (const decoration of decorations) {
+              const decorationWithAttrs = decoration;
+              const templateName = decorationWithAttrs.type?.attrs?.["data-template"];
+              if (templateName) {
+                if (markOptions.onTemplateClick) {
+                  markOptions.onTemplateClick(templateName, event);
+                }
+                if (typeof window !== "undefined") {
+                  window.dispatchEvent(
+                    new CustomEvent("show-gradient-popover", {
+                      detail: {
+                        templateName,
+                        target: event.target
+                      }
+                    })
+                  );
+                }
+                return true;
+              }
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/slash-commands.ts
+var import_core2 = require("@tiptap/core");
+var import_state2 = require("@tiptap/pm/state");
+var SlashCommands = import_core2.Extension.create({
+  name: "slashCommands",
+  addOptions() {
+    return {
+      trigger: "/",
+      onMatch: void 0,
+      onClear: void 0,
+      containerId: void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    const opts = this.options;
+    return [
+      new import_state2.Plugin({
+        view() {
+          return {
+            update(view) {
+              const { state } = view;
+              const { selection } = state;
+              const { $from } = selection;
+              if (!$from.parent.isTextblock) {
+                opts.onClear?.();
+                return;
+              }
+              const textBeforeCursor = $from.parent.textBetween(
+                0,
+                $from.parentOffset
+              );
+              const slashMatch = textBeforeCursor.match(
+                /(?:^|\s)\/([a-zA-Z0-9_-]*)$/
+              );
+              if (slashMatch) {
+                const matchIndex = slashMatch.index ?? 0;
+                const offsetInParent = matchIndex + (slashMatch[0].startsWith(" ") ? 1 : 0);
+                const matchFrom = $from.start() + offsetInParent;
+                const matchTo = $from.pos;
+                const coords = view.coordsAtPos($from.pos);
+                let relativeCoords = {
+                  top: coords.top,
+                  left: coords.left,
+                  bottom: coords.bottom,
+                  right: coords.right
+                };
+                if (opts.containerId && typeof document !== "undefined") {
+                  const container = document.getElementById(opts.containerId);
+                  if (container) {
+                    const rect = container.getBoundingClientRect();
+                    relativeCoords = {
+                      top: coords.bottom - rect.top + 5,
+                      left: coords.left - rect.left,
+                      bottom: coords.bottom - rect.top,
+                      right: coords.right - rect.left
+                    };
+                  }
+                }
+                opts.onMatch?.({
+                  match: slashMatch,
+                  query: slashMatch[1] || "",
+                  from: matchFrom,
+                  to: matchTo,
+                  coords: relativeCoords
+                });
+              } else {
+                opts.onClear?.();
+              }
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/template-suggestions.ts
+var import_core3 = require("@tiptap/core");
+var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
+var TemplateSuggestions = import_core3.Extension.create({
+  name: "templateSuggestions",
+  addOptions() {
+    return {
+      templates: [],
+      char: "{{",
+      onSuggestion: void 0
+    };
+  },
+  addProseMirrorPlugins() {
+    const opts = this.options;
+    const suggestionConfig = {
+      char: opts.char || "{{",
+      items: ({ query }) => {
+        const lower = query.toLowerCase();
+        return (opts.templates || []).filter(
+          (t) => t.name.toLowerCase().includes(lower)
+        );
+      },
+      command: ({ editor, range, props }) => {
+        editor.chain().focus().deleteRange(range).insertContent(`{{${props.name}}}`).run();
+      },
+      render: () => {
+        return {
+          onStart: (props) => {
+            opts.onSuggestion?.(props);
+          },
+          onUpdate: (props) => {
+            opts.onSuggestion?.(props);
+          },
+          onExit: () => {
+            opts.onSuggestion?.({
+              query: "",
+              range: { from: 0, to: 0 },
+              items: [],
+              command: () => {
+              }
+            });
+          }
+        };
+      }
+    };
+    return [
+      (0, import_suggestion.default)({
+        editor: this.editor,
+        ...suggestionConfig
+      })
+    ];
+  }
+});
+
+// src/extensions/loading-node.ts
+var import_core4 = require("@tiptap/core");
+var LoadingNode = import_core4.Node.create({
+  name: "loadingNode",
+  group: "inline",
+  inline: true,
+  selectable: true,
+  atom: true,
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-id"),
+        renderHTML: (attributes) => {
+          if (!attributes.id) return {};
+          return { "data-id": attributes.id };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'span[data-type="loading"]'
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      (0, import_core4.mergeAttributes)(HTMLAttributes, {
+        "data-type": "loading",
+        class: "inline-flex items-center px-1.5 py-0.5 text-xs text-muted-foreground animate-pulse"
+      }),
+      "\u23F3"
+    ];
+  }
+});
+
+// src/extensions/SmilieReplacer.ts
+var import_core5 = require("@tiptap/core");
+var SmilieReplacer = import_core5.Extension.create({
+  name: "smilieReplacer",
+  addInputRules() {
+    return [
+      (0, import_core5.textInputRule)({ find: /-___- $/, replace: "\u{1F611} " }),
+      (0, import_core5.textInputRule)({ find: /:'-\) $/, replace: "\u{1F602} " }),
+      (0, import_core5.textInputRule)({ find: /':-\) $/, replace: "\u{1F605} " }),
+      (0, import_core5.textInputRule)({ find: /':-D $/, replace: "\u{1F605} " }),
+      (0, import_core5.textInputRule)({ find: />:-\) $/, replace: "\u{1F606} " }),
+      (0, import_core5.textInputRule)({ find: /-__- $/, replace: "\u{1F611} " }),
+      (0, import_core5.textInputRule)({ find: /':-\( $/, replace: "\u{1F613} " }),
+      (0, import_core5.textInputRule)({ find: /:'-\( $/, replace: "\u{1F622} " }),
+      (0, import_core5.textInputRule)({ find: />:-\( $/, replace: "\u{1F620} " }),
+      (0, import_core5.textInputRule)({ find: /O:-\) $/, replace: "\u{1F607} " }),
+      (0, import_core5.textInputRule)({ find: /:'\) $/, replace: "\u{1F602} " }),
+      (0, import_core5.textInputRule)({ find: /:-D $/, replace: "\u{1F603} " }),
+      (0, import_core5.textInputRule)({ find: /':\) $/, replace: "\u{1F605} " }),
+      (0, import_core5.textInputRule)({ find: /;-\) $/, replace: "\u{1F609} " }),
+      (0, import_core5.textInputRule)({ find: /B-\) $/, replace: "\u{1F60E} " }),
+      (0, import_core5.textInputRule)({ find: /:-\* $/, replace: "\u{1F618} " }),
+      (0, import_core5.textInputRule)({ find: /:-\) $/, replace: "\u{1F642} " }),
+      (0, import_core5.textInputRule)({ find: /-_- $/, replace: "\u{1F611} " }),
+      (0, import_core5.textInputRule)({ find: /:-O $/, replace: "\u{1F62E} " }),
+      (0, import_core5.textInputRule)({ find: /:-P $/, replace: "\u{1F61B} " }),
+      (0, import_core5.textInputRule)({ find: /:-p $/, replace: "\u{1F61B} " }),
+      (0, import_core5.textInputRule)({ find: /:-\/ $/, replace: "\u{1F615} " }),
+      (0, import_core5.textInputRule)({ find: /:-\( $/, replace: "\u{1F61E} " }),
+      (0, import_core5.textInputRule)({ find: /:'\( $/, replace: "\u{1F622} " }),
+      (0, import_core5.textInputRule)({ find: /:D $/, replace: "\u{1F603} " }),
+      (0, import_core5.textInputRule)({ find: /=D $/, replace: "\u{1F603} " }),
+      (0, import_core5.textInputRule)({ find: /;\) $/, replace: "\u{1F609} " }),
+      (0, import_core5.textInputRule)({ find: /B\) $/, replace: "\u{1F60E} " }),
+      (0, import_core5.textInputRule)({ find: /:\) $/, replace: "\u{1F642} " }),
+      (0, import_core5.textInputRule)({ find: /=\) $/, replace: "\u{1F642} " }),
+      (0, import_core5.textInputRule)({ find: /:O $/, replace: "\u{1F62E} " }),
+      (0, import_core5.textInputRule)({ find: /:P $/, replace: "\u{1F61B} " }),
+      (0, import_core5.textInputRule)({ find: /:p $/, replace: "\u{1F61B} " }),
+      (0, import_core5.textInputRule)({ find: /:\/ $/, replace: "\u{1F615} " }),
+      (0, import_core5.textInputRule)({ find: /:\( $/, replace: "\u{1F61E} " }),
+      (0, import_core5.textInputRule)({ find: /<3 $/, replace: "\u2764\uFE0F " }),
+      (0, import_core5.textInputRule)({ find: /<\/3 $/, replace: "\u{1F494} " }),
+      (0, import_core5.textInputRule)({ find: /\/shrug $/, replace: "\xAF\\_(\u30C4)_/\xAF " })
+    ];
+  }
+});
+
+// src/extensions/ColorHighlighter.ts
+var import_core6 = require("@tiptap/core");
+var import_state3 = require("@tiptap/pm/state");
+var import_view2 = require("@tiptap/pm/view");
+function findHexColors(doc) {
+  const hexColorRegex = /(#[0-9a-fA-F]{3,8})\b/g;
+  const decorations = [];
+  doc.descendants((node, position) => {
+    if (!node.text) return;
+    let match;
+    while ((match = hexColorRegex.exec(node.text)) !== null) {
+      const color = match[0];
+      const from = position + match.index;
+      const to = from + color.length;
+      decorations.push(
+        import_view2.Decoration.inline(from, to, {
+          class: "color-highlight px-1 py-0.5 rounded text-xs font-mono border",
+          style: `--color: ${color}; background-color: ${color}20; border-color: ${color}; color: ${color};`
+        })
+      );
+    }
+  });
+  return import_view2.DecorationSet.create(doc, decorations);
+}
+var ColorHighlighter = import_core6.Extension.create({
+  name: "colorHighlighter",
+  addProseMirrorPlugins() {
+    return [
+      new import_state3.Plugin({
+        state: {
+          init(_, { doc }) {
+            return findHexColors(doc);
+          },
+          apply(transaction, oldState) {
+            return transaction.docChanged ? findHexColors(transaction.doc) : oldState;
+          }
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/FontSize.ts
+var import_core7 = require("@tiptap/core");
+var import_extension_text_style = require("@tiptap/extension-text-style");
+var FontSize = import_core7.Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => chain().setMark("textStyle", { fontSize }).run(),
+      unsetFontSize: () => ({ chain }) => chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+
+// src/extensions/rich-text-preset.ts
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
+var import_extension_color = __toESM(require("@tiptap/extension-color"), 1);
+var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
+var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
+var import_extension_task_list = __toESM(require("@tiptap/extension-task-list"), 1);
+var import_extension_task_item = __toESM(require("@tiptap/extension-task-item"), 1);
+var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"), 1);
+var import_extension_text_style2 = __toESM(require("@tiptap/extension-text-style"), 1);
+var import_extension_typography = __toESM(require("@tiptap/extension-typography"), 1);
+var import_extension_underline = __toESM(require("@tiptap/extension-underline"), 1);
+var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
+var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"), 1);
+function createRichTextPreset(options = {}) {
+  const {
+    placeholder = "Start typing...",
+    characterLimit,
+    openLinksOnClick = false,
+    enableSmilies = true,
+    enableColorHighlighter = true,
+    headingLevels = [1, 2, 3, 4]
+  } = options;
+  const extensions = [
+    import_starter_kit.default.configure({
+      orderedList: {
+        HTMLAttributes: {
+          class: "list-decimal pl-4"
+        }
+      },
+      bulletList: {
+        HTMLAttributes: {
+          class: "list-disc pl-4"
+        }
+      },
+      heading: {
+        levels: headingLevels,
+        HTMLAttributes: {
+          class: "font-bold tracking-tight"
+        }
+      }
+    }),
+    import_extension_text_style2.default,
+    import_extension_color.default,
+    import_extension_highlight.default.configure({ multicolor: true }),
+    import_extension_underline.default,
+    import_extension_typography.default,
+    import_extension_text_align.default.configure({
+      types: ["heading", "paragraph"]
+    }),
+    import_extension_link.default.configure({
+      openOnClick: openLinksOnClick,
+      autolink: true,
+      defaultProtocol: "https",
+      HTMLAttributes: {
+        target: "_blank",
+        rel: "noopener noreferrer",
+        class: "text-blue-500 underline underline-offset-2"
+      }
+    }),
+    import_extension_task_list.default,
+    import_extension_task_item.default.configure({
+      nested: true
+    }),
+    FontSize,
+    import_extension_placeholder.default.configure({
+      emptyEditorClass: "is-empty",
+      placeholder: typeof placeholder === "function" ? placeholder : () => placeholder
+    })
+  ];
+  if (characterLimit) {
+    extensions.push(
+      import_extension_character_count.default.configure({
+        limit: characterLimit
+      })
+    );
+  }
+  if (enableSmilies) {
+    extensions.push(SmilieReplacer);
+  }
+  if (enableColorHighlighter) {
+    extensions.push(ColorHighlighter);
+  }
+  return extensions;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorHighlighter,
+  FontSize,
+  GradientText,
+  LoadingNode,
+  SlashCommands,
+  SmilieReplacer,
+  TemplateSuggestions,
+  createRichTextPreset,
+  findHexColors
+});
+//# sourceMappingURL=index.cjs.map