@intinyagroup/rich-text 0.1.1-alpha.10

package/dist/components/RichTextEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+type $$ComponentProps = {
+    content?: string;
+    placeholder?: string;
+    editable?: boolean;
+    /** Toolbar mode: 'classic' (fixed top toolbar), 'bubble' (Notion-style floating toolbar only), or 'none' */
+    mode?: 'classic' | 'bubble' | 'none';
+    height?: number;
+    class?: string;
+    onUpdate?: (html: string) => void;
+    /** Called when paste/drop provides an image file. Return a URL to insert. */
+    onImageUpload?: (file: File) => Promise<string>;
+    onOpenSubPage?: (page: {
+        id: string;
+        title: string;
+    }) => void;
+};
+declare const RichTextEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type RichTextEditor = ReturnType<typeof RichTextEditor>;
+export default RichTextEditor;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as RichTextEditor } from './components/RichTextEditor.svelte';

package/dist/index.js

@@ -0,0 +1 @@
+export { default as RichTextEditor } from './components/RichTextEditor.svelte';

package/dist/tracked-changes.d.ts

@@ -0,0 +1,31 @@
+export type TrackedChange = {
+    id: string;
+    type: 'insertion' | 'deletion';
+    userId: string;
+    userName: string;
+    timestamp: string;
+    content: string;
+    accepted: boolean;
+};
+export type TrackedChangeState = {
+    enabled: boolean;
+    changes: TrackedChange[];
+    currentUserId: string;
+    currentUserName: string;
+};
+export declare function createTrackedChangeState(userId: string, userName: string): TrackedChangeState;
+export declare function addTrackedChange(state: TrackedChangeState, type: 'insertion' | 'deletion', content: string): TrackedChange;
+export declare function acceptChange(state: TrackedChangeState, changeId: string): TrackedChangeState;
+export declare function rejectChange(state: TrackedChangeState, changeId: string): TrackedChangeState;
+export declare function acceptAllChanges(state: TrackedChangeState): TrackedChangeState;
+export declare function rejectAllChanges(state: TrackedChangeState): TrackedChangeState;
+export declare function getPendingChangesCount(state: TrackedChangeState): number;
+export declare function getChangesByUser(state: TrackedChangeState, userId: string): TrackedChange[];
+/**
+ * Render tracked changes as HTML with colored marks
+ */
+export declare function renderTrackedChanges(html: string, changes: TrackedChange[]): string;
+/**
+ * Extract tracked changes from HTML
+ */
+export declare function extractTrackedChanges(html: string): TrackedChange[];

package/dist/tracked-changes.js

@@ -0,0 +1,106 @@
+// ============================================
+// Tracked Changes utilities — track insertions/deletions
+// ============================================
+export function createTrackedChangeState(userId, userName) {
+    return {
+        enabled: false,
+        changes: [],
+        currentUserId: userId,
+        currentUserName: userName,
+    };
+}
+export function addTrackedChange(state, type, content) {
+    const change = {
+        id: `tc-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        type,
+        userId: state.currentUserId,
+        userName: state.currentUserName,
+        timestamp: new Date().toISOString(),
+        content,
+        accepted: false,
+    };
+    return change;
+}
+export function acceptChange(state, changeId) {
+    return {
+        ...state,
+        changes: state.changes.map((c) => c.id === changeId ? { ...c, accepted: true } : c),
+    };
+}
+export function rejectChange(state, changeId) {
+    return {
+        ...state,
+        changes: state.changes.filter((c) => c.id !== changeId),
+    };
+}
+export function acceptAllChanges(state) {
+    return {
+        ...state,
+        changes: state.changes.map((c) => ({ ...c, accepted: true })),
+    };
+}
+export function rejectAllChanges(state) {
+    return {
+        ...state,
+        changes: [],
+    };
+}
+export function getPendingChangesCount(state) {
+    return state.changes.filter((c) => !c.accepted).length;
+}
+export function getChangesByUser(state, userId) {
+    return state.changes.filter((c) => c.userId === userId);
+}
+/**
+ * Render tracked changes as HTML with colored marks
+ */
+export function renderTrackedChanges(html, changes) {
+    let result = html;
+    for (const change of changes) {
+        if (change.accepted)
+            continue;
+        if (change.type === 'insertion') {
+            // Mark insertions with green background
+            result = result.replace(change.content, `<span class="tracked-insertion" data-change-id="${change.id}" style="background: #dcfce7; text-decoration: none;">${change.content}</span>`);
+        }
+        else if (change.type === 'deletion') {
+            // Mark deletions with red strikethrough
+            result = result.replace(change.content, `<span class="tracked-deletion" data-change-id="${change.id}" style="background: #fee2e2; text-decoration: line-through; color: #991b1b;">${change.content}</span>`);
+        }
+    }
+    return result;
+}
+/**
+ * Extract tracked changes from HTML
+ */
+export function extractTrackedChanges(html) {
+    const changes = [];
+    // Extract insertions
+    const insertionRegex = /<span[^>]*class="tracked-insertion"[^>]*data-change-id="([^"]*)"[^>]*>(.*?)<\/span>/gi;
+    let match;
+    while ((match = insertionRegex.exec(html)) !== null) {
+        changes.push({
+            id: match[1],
+            type: 'insertion',
+            userId: 'unknown',
+            userName: 'Unknown',
+            timestamp: new Date().toISOString(),
+            content: match[2],
+            accepted: false,
+        });
+    }
+    // Extract deletions
+    const deletionRegex = /<span[^>]*class="tracked-deletion"[^>]*data-change-id="([^"]*)"[^>]*>(.*?)<\/span>/gi;
+    while ((match = deletionRegex.exec(html)) !== null) {
+        changes.push({
+            id: match[1],
+            type: 'deletion',
+            userId: 'unknown',
+            userName: 'Unknown',
+            timestamp: new Date().toISOString(),
+            content: match[2],
+            accepted: false,
+        });
+    }
+    return changes;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@intinyagroup/rich-text",
+  "version": "0.1.1-alpha.10",
+  "description": "Rich text editor component powered by TipTap",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "svelte-package -o dist",
+    "check": "echo 'no check'",
+    "dev": "svelte-package -o dist -w"
+  },
+  "dependencies": {
+    "@intinyagroup/grid-core": "0.1.1-alpha.10",
+    "@intinyagroup/ui": "0.1.1-alpha.10",
+    "@tiptap/core": "^3.22.5",
+    "@tiptap/extension-code-block-lowlight": "^3.22.5",
+    "@tiptap/extension-image": "^3.22.5",
+    "@tiptap/extension-link": "^3.22.5",
+    "@tiptap/extension-placeholder": "^3.22.5",
+    "@tiptap/extension-task-item": "^3.31.3",
+    "@tiptap/extension-task-list": "^3.31.3",
+    "@tiptap/extension-text-align": "^3.22.5",
+    "@tiptap/extension-underline": "^3.22.5",
+    "@tiptap/pm": "^3.22.5",
+    "@tiptap/starter-kit": "^3.22.5"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
+    "svelte": "^5.55.2",
+    "typescript": "^6.0.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intinyagroup/ui.git",
+    "directory": "packages/rich-text"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}