alien-editor 0.1.0

package/dist/src/composables/useParser.d.ts

@@ -0,0 +1,4 @@
+import { Block } from '../types';
+export declare function useParser(): {
+    parse: (html: string) => Block[];
+};

package/dist/src/composables/useSelection.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from 'vue';
+export declare function useSelection(savedRange: Ref<Range | null>): {
+    saveSelection: () => void;
+    restoreSelection: () => void;
+    getRange: () => Range | null;
+    isCollapsed: () => boolean;
+    getSelectedText: () => string | null;
+};

package/dist/src/composables/useSerializer.d.ts

@@ -0,0 +1,7 @@
+import { Block } from '../types';
+declare function serializeBlock(block: Block): string;
+export declare function useSerializer(): {
+    serialize: (blocks: Block[]) => string;
+    serializeBlock: typeof serializeBlock;
+};
+export {};

package/dist/src/types/index.d.ts

@@ -0,0 +1,116 @@
+export interface ColorOption {
+    title: string;
+    key: string;
+    class: string;
+}
+export interface ModuleOption {
+    title: string;
+    key: string;
+    module: string;
+}
+export type BlockType = 'paragraph' | 'heading' | 'image' | 'video' | 'code' | 'divider' | 'button' | 'module' | 'blockquote' | 'ordered-list' | 'unordered-list';
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export interface BaseBlock {
+    id: string;
+    type: BlockType;
+}
+export interface ParagraphBlock extends BaseBlock {
+    type: 'paragraph';
+    html: string;
+    align: TextAlign;
+    classes: string[];
+}
+export interface BlockquoteBlock extends BaseBlock {
+    type: 'blockquote';
+    html: string;
+    align: TextAlign;
+    classes: string[];
+}
+export interface HeadingBlock extends BaseBlock {
+    type: 'heading';
+    level: HeadingLevel;
+    html: string;
+    align: TextAlign;
+    classes: string[];
+}
+export interface OrderedListBlock extends BaseBlock {
+    type: 'ordered-list';
+    items: string[];
+}
+export interface UnorderedListBlock extends BaseBlock {
+    type: 'unordered-list';
+    items: string[];
+}
+export interface ImageBlock extends BaseBlock {
+    type: 'image';
+    src: string;
+    alt: string;
+    classes: string[];
+}
+export interface VideoBlock extends BaseBlock {
+    type: 'video';
+    src: string;
+    classes: string[];
+}
+export interface CodeBlock extends BaseBlock {
+    type: 'code';
+    code: string;
+    language: string;
+}
+export interface DividerBlock extends BaseBlock {
+    type: 'divider';
+    classes: string[];
+}
+export interface ButtonBlock extends BaseBlock {
+    type: 'button';
+    label: string;
+    href: string;
+    classes: string[];
+}
+export interface ModuleBlock extends BaseBlock {
+    type: 'module';
+    html: string;
+}
+export type Block = ParagraphBlock | BlockquoteBlock | HeadingBlock | OrderedListBlock | UnorderedListBlock | ImageBlock | VideoBlock | CodeBlock | DividerBlock | ButtonBlock | ModuleBlock;
+export type EditorMode = 'edit' | 'code' | 'preview';
+export interface HistorySnapshot {
+    blocks: Block[];
+    timestamp: number;
+}
+export interface DragState {
+    draggedId: string | null;
+    overId: string | null;
+}
+export interface EditorContext {
+    blocks: import('vue').Ref<Block[]>;
+    mode: import('vue').Ref<EditorMode>;
+    activeBlockId: import('vue').Ref<string | null>;
+    savedRange: import('vue').Ref<Range | null>;
+    colors: ColorOption[];
+    modules: ModuleOption[];
+    placeholder: string;
+    pushSnapshot: () => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    updateBlock: (id: string, patch: Partial<Block>) => void;
+    addBlockAfter: (afterId: string, type: BlockType, overrides?: Partial<Block>) => string;
+    addBlockAt: (index: number, type: BlockType, overrides?: Partial<Block>) => string;
+    removeBlock: (id: string) => void;
+    moveBlock: (fromId: string, toId: string) => void;
+    saveSelection: () => void;
+    restoreSelection: () => void;
+    onUpload: (file: File) => void;
+    showLinkModal: import('vue').Ref<boolean>;
+    showImageUrlModal: import('vue').Ref<boolean>;
+    linkModalCallback: import('vue').Ref<((href: string, text: string) => void) | null>;
+    imageUrlCallback: import('vue').Ref<((url: string) => void) | null>;
+    dragState: import('vue').Ref<DragState>;
+    onDragStart: (blockId: string, event: DragEvent) => void;
+    onDragOver: (blockId: string, event: DragEvent) => void;
+    onDragLeave: () => void;
+    onDrop: (targetId: string) => void;
+    onDragEnd: () => void;
+}

package/dist/src/utils/tailwindMap.d.ts

@@ -0,0 +1,12 @@
+export declare const tailwindMap: {
+    readonly bold: "font-bold";
+    readonly italic: "italic";
+    readonly underline: "underline";
+    readonly strikethrough: "line-through";
+    readonly fontSizes: Record<string, string>;
+    readonly fontWeights: Record<string, string>;
+    readonly headingDefaults: Record<number, string>;
+    readonly align: Record<string, string>;
+};
+export type FontSizeKey = keyof typeof tailwindMap.fontSizes;
+export type FontWeightKey = keyof typeof tailwindMap.fontWeights;

package/dist/style.css

@@ -0,0 +1 @@
+.ae-text-block:empty:before,.ae-heading-content:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.ae-list-block li:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}.ae-block-wrapper{position:relative;padding:2px 0;margin:0 0 2px}.ae-block--dragging{opacity:.4}.ae-block--drag-over{outline:2px solid #3b82f6;outline-offset:2px;border-radius:4px}.ae-preview-mode h1{font-size:3rem;font-weight:700;margin-bottom:.5em}.ae-preview-mode h2{font-size:2.25rem;font-weight:700;margin-bottom:.5em}.ae-preview-mode h3{font-size:1.875rem;font-weight:600;margin-bottom:.5em}.ae-preview-mode h4{font-size:1.5rem;font-weight:600;margin-bottom:.5em}.ae-preview-mode h5{font-size:1.25rem;font-weight:500;margin-bottom:.5em}.ae-preview-mode h6{font-size:1.125rem;font-weight:500;margin-bottom:.5em}.ae-preview-mode p{margin-bottom:.75em}.ae-preview-mode ul{list-style:disc;padding-left:1.5em;margin-bottom:.75em}.ae-preview-mode ol{list-style:decimal;padding-left:1.5em;margin-bottom:.75em}.ae-preview-mode blockquote{border-left:4px solid #d1d5db;padding-left:1em;color:#6b7280;font-style:italic}.ae-preview-mode pre{background:#111827;color:#f3f4f6;padding:1em;border-radius:.5em;overflow-x:auto}.ae-preview-mode a{color:#2563eb;text-decoration:underline}.ae-preview-mode img{max-width:100%;border-radius:.375rem}.ae-preview-mode hr{border-top:1px solid #d1d5db;margin:1em 0}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "alien-editor",
+  "version": "0.1.0",
+  "description": "A Vue 3 block-based rich text editor with Tailwind CSS integration",
+  "type": "module",
+  "main": "./dist/alien-editor.umd.cjs",
+  "module": "./dist/alien-editor.js",
+  "exports": {
+    ".": {
+      "import": "./dist/alien-editor.js",
+      "require": "./dist/alien-editor.umd.cjs"
+    },
+    "./nuxt": {
+      "import": "./dist/nuxt.js",
+      "require": "./dist/nuxt.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build && vite build --config vite.nuxt.config.ts",
+    "build:nuxt": "vite build --config vite.nuxt.config.ts",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "editor",
+    "rich-text",
+    "block-editor",
+    "tailwind",
+    "nuxt"
+  ],
+  "license": "MIT"
+}