@trycourier/react-designer 0.0.0-canary-20250424162557

package/dist/types/elemental.schema.d.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+import type { ElementalNode } from "./elemental.types";
+export declare const ElementalNodeType: z.ZodType<ElementalNode>;
+export declare const ElementalSchema: z.ZodObject<{
+    version: z.ZodLiteral<"2022-01-01">;
+    elements: z.ZodArray<z.ZodType<ElementalNode, z.ZodTypeDef, ElementalNode>, "many">;
+}, "strip", z.ZodTypeAny, {
+    elements: ElementalNode[];
+    version: "2022-01-01";
+}, {
+    elements: ElementalNode[];
+    version: "2022-01-01";
+}>;
+export declare const validateElemental: (json: unknown) => {
+    success: boolean;
+    data: {
+        elements: ElementalNode[];
+        version: "2022-01-01";
+    };
+    errors?: undefined;
+} | {
+    success: boolean;
+    errors: z.ZodIssue[];
+    data?: undefined;
+};

package/dist/types/elemental.types.d.ts

@@ -0,0 +1,195 @@
+export type Align = "left" | "center" | "right" | "full";
+export type IActionButtonStyle = "button" | "link";
+export type TextStyle = "text" | "h1" | "h2" | "subtext";
+export interface IBorderConfig {
+    enabled?: boolean;
+    radius?: string;
+    color?: string;
+    size?: string;
+}
+export interface BorderConfig {
+    enabled?: boolean;
+    color?: string;
+    radius?: number;
+    size?: string;
+}
+export interface ElementalContent {
+    version: "2022-01-01";
+    elements: ElementalNode[];
+}
+export type ElementalNode = ElementalTextNode | ElementalMetaNode | ElementalChannelNode | ElementalImageNode | ElementalActionNode | ElementalDividerNode | ElementalGroupNode | ElementalQuoteNode | ElementalHtmlNode | ElementalCommentNode | ElementalTextContentNode | ElementalListNode | ElementalListItemNode;
+export interface ElementalListNode extends IsElementalNode {
+    type: "list";
+    list_type: "ordered" | "unordered";
+    elements: ElementalListItemNode[];
+    /** Allows bullets to be rendered using an image */
+    imgSrc?: string;
+    imgHref?: string;
+}
+export interface ElementalListItemNode extends IsElementalNode {
+    type: "list-item";
+    background_color?: string;
+    elements: (ElementalTextContentNode | ElementalListNode)[];
+}
+export type ElementalTextNode = ElementalTextNodeWithContent | ElementalTextNodeWithElements;
+export interface ElementalTextNodeWithElements extends IsElementalTextNode {
+    elements: ElementalTextContentNode[];
+}
+export interface ElementalTextNodeWithContent extends IsElementalTextNode {
+    content: string;
+}
+export interface IsElementalTextNode extends IsElementalNode {
+    type: "text";
+    align?: Align;
+    text_style?: TextStyle;
+    background_color?: string;
+    format?: "markdown";
+    padding?: string;
+    color?: string;
+    border?: BorderConfig;
+    locales?: ElementalLocales<{
+        content?: string;
+    }>;
+}
+export type ElementalTextContentNode = ElementalStringTextContent | ElementalLinkTextContent | ElementalImageTextContent;
+export interface IsElementalTextContent extends IsElementalNode {
+    /** CSS color syntax */
+    color?: string;
+    /** CSS color syntax */
+    highlight?: string;
+    bold?: boolean;
+    italic?: boolean;
+    strikethrough?: boolean;
+    underline?: boolean;
+}
+export interface ElementalStringTextContent extends IsElementalTextContent {
+    type: "string";
+    content: string;
+}
+export interface ElementalLinkTextContent extends IsElementalTextContent {
+    type: "link";
+    content: string;
+    href?: string;
+    disable_tracking?: boolean;
+}
+export interface ElementalImageTextContent extends IsElementalTextContent {
+    type: "img";
+    src: string;
+    href?: string;
+    disable_tracking?: boolean;
+    alt_text?: string;
+    /** CSS width syntax */
+    width?: string;
+}
+export interface ElementalMetaNode extends IsElementalNode {
+    type: "meta";
+    title?: string;
+    locales?: ElementalLocales<{
+        title?: string;
+    }>;
+}
+export interface ElementalChannelNode extends IsElementalNode {
+    type: "channel";
+    channel: string;
+    elements?: ElementalNode[];
+    raw?: {
+        html?: string;
+        transformers?: string[];
+        subject?: string;
+        title?: string;
+        text?: string;
+        [templateName: string]: unknown;
+    };
+    locales?: ElementalLocales<{
+        elements?: ElementalNode[];
+        raw?: {
+            [templateName: string]: unknown;
+        };
+    }>;
+}
+export interface ElementalImageNode extends IsElementalNode {
+    type: "image";
+    src: string;
+    href?: string;
+    align?: Align;
+    alt_text?: string;
+    width?: string;
+    border?: IBorderConfig;
+    locales?: ElementalLocales<{
+        href?: string;
+        src?: string;
+    }>;
+}
+export interface ElementalActionNode extends IsElementalNode {
+    type: "action";
+    content: string;
+    href: string;
+    action_id?: string;
+    style?: IActionButtonStyle;
+    align?: Align;
+    background_color?: string;
+    color?: string;
+    border?: BorderConfig;
+    padding?: string;
+    disable_tracking?: boolean;
+    locales?: ElementalLocales<{
+        content?: string;
+        href?: string;
+    }>;
+}
+export interface ElementalDividerNode extends IsElementalNode {
+    type: "divider";
+    dividerColor?: string;
+    borderWidth?: string;
+    padding?: string;
+}
+export interface ElementalGroupNode extends IsElementalNode {
+    type: "group";
+    elements: ElementalNode[];
+    locales?: ElementalLocales<{
+        elements?: ElementalNode[];
+    }>;
+}
+export interface ElementalQuoteNode extends IsElementalNode {
+    type: "quote";
+    content: string;
+    align?: Align;
+    border_color?: string;
+    text_style?: "text" | "h1" | "h2" | "subtext";
+    locales?: ElementalLocales<{
+        content?: string;
+    }>;
+}
+export interface ElementalHtmlNode extends IsElementalNode {
+    type: "html";
+    content: string;
+    locales?: ElementalLocales<{
+        content?: string;
+    }>;
+}
+export interface ElementalCommentNode extends IsElementalNode {
+    type: "comment";
+    comment?: string;
+    object?: unknown;
+}
+interface IsElementalNode {
+    type: string;
+    channels?: string[];
+    ref?: string;
+    if?: string;
+    loop?: string;
+    data?: Record<string, unknown>;
+}
+export interface ElementalLocales<T extends object> {
+    [locale: string]: T;
+}
+export type ElementalIR = ElementalNodeIR[];
+export type ElementalNodeIR = WithIRMetadata<ElementalNode>;
+/** Recursively augments the passed type and its children with the fields supplied after &  */
+export type WithIRMetadata<T extends IsElementalNode> = {
+    [K in keyof T]: T[K] extends IsElementalNode[] ? WithIRMetadata<T[K][number]>[] : T[K];
+} & {
+    index: number;
+    visible: boolean;
+};
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tiptap.types";
+export * from "./elemental.types";
+export * from "./elemental.schema";

package/dist/types/tiptap.types.d.ts

@@ -0,0 +1,15 @@
+export interface TiptapNode {
+    type: string;
+    attrs?: Record<string, unknown>;
+    content?: TiptapNode[];
+    marks?: TiptapMark[];
+    text?: string;
+}
+export interface TiptapMark {
+    type: string;
+    attrs?: Record<string, unknown>;
+}
+export interface TiptapDoc {
+    type: "doc";
+    content: TiptapNode[];
+}

package/package.json

@@ -0,0 +1,150 @@
+{
+  "name": "@trycourier/react-designer",
+  "version": "0.0.0-canary-20250424162557",
+  "description": "React-based rich text designer component",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./styles.css": {
+      "import": "./dist/esm/styles.css",
+      "require": "./dist/cjs/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./next": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@tippyjs/react": "^4.2.6",
+    "@tiptap/core": "^2.0.0",
+    "@tiptap/extension-code-block-lowlight": "^2.10.3",
+    "@tiptap/extension-color": "^2.10.2",
+    "@tiptap/extension-hard-break": "^2.11.2",
+    "@tiptap/extension-image": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/extension-placeholder": "^2.0.0",
+    "@tiptap/extension-text-align": "^2.10.2",
+    "@tiptap/extension-typography": "^2.10.2",
+    "@tiptap/extension-underline": "^2.10.2",
+    "@tiptap/pm": "^2.0.0",
+    "@tiptap/react": "^2.0.0",
+    "@tiptap/starter-kit": "^2.0.0",
+    "@tiptap/suggestion": "^2.10.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "jotai": "^2.11.1",
+    "lucide-react": "^0.473.0",
+    "next-themes": "^0.4.5",
+    "react-hook-form": "^7.53.2",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.0",
+    "uuid": "^11.0.3",
+    "yjs": "^13.6.24",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "autoprefixer": "^10.4.20",
+    "dotenv": "^16.4.7",
+    "esbuild": "^0.19.0",
+    "esbuild-plugin-d.ts": "^1.3.1",
+    "esbuild-style-plugin": "^1.6.3",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.49",
+    "postcss-import": "^16.1.0",
+    "postcss-nested": "^7.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.0.0",
+    "vitest": "^0.34.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "editor",
+    "rich-text",
+    "wysiwyg",
+    "tiptap"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trycourier/react-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/trycourier/react-editor/issues"
+  },
+  "scripts": {
+    "build": "tsc && node build.js",
+    "dev": "node build.js --watch",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "analyze": "node build.js --analyze",
+    "release": "node scripts/publish.js",
+    "release:patch": "node scripts/publish.js --version=patch",
+    "release:minor": "node scripts/publish.js --version=minor",
+    "release:major": "node scripts/publish.js --version=major",
+    "release:dry-run": "node scripts/publish.js --dry-run",
+    "release:canary": "node scripts/publish.js --canary"
+  }
+}