wip

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1732419746256
+		"lastUpdateCheck": 1741712680973
 	}
 }

package.json

@@ -38,6 +38,7 @@
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
+    "@roadmapsh/editor": "npm:@roadmapsh/dummy-editor@^0.0.3",
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
+      '@roadmapsh/editor':
+        specifier: npm:@roadmapsh/dummy-editor@^0.0.3
+        version: '@roadmapsh/dummy-editor@0.0.3'
       '@tanstack/react-query':
         specifier: ^5.59.16
         version: 5.59.16(react@18.3.1)
@@ -1051,6 +1054,9 @@ packages:
     resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
     engines: {node: '>= 10'}
 
+  '@roadmapsh/dummy-editor@0.0.3':
+    resolution: {integrity: sha512-64DCKH+g1VdJihr3ePiMkP4DmQ4MzeVUFNarHXxHhYchw8ix3F5YMOE93657UNRnw02cAbLZ/IPuLcN68b9Ypg==}
+
   '@rollup/pluginutils@5.1.2':
     resolution: {integrity: sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==}
     engines: {node: '>=14.0.0'}
@@ -2726,6 +2732,10 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
+  react@19.0.0:
+    resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==}
+    engines: {node: '>=0.10.0'}
+
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
@@ -2963,6 +2973,9 @@ packages:
   tailwind-merge@2.5.3:
     resolution: {integrity: sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==}
 
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+
   tailwindcss@3.4.13:
     resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
@@ -4022,6 +4035,12 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
+  '@roadmapsh/dummy-editor@0.0.3':
+    dependencies:
+      clsx: 2.1.1
+      react: 19.0.0
+      tailwind-merge: 3.0.2
+
   '@rollup/pluginutils@5.1.2(rollup@4.22.4)':
     dependencies:
       '@types/estree': 1.0.6
@@ -5858,6 +5877,8 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  react@19.0.0: {}
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
@@ -6207,6 +6228,8 @@ snapshots:
 
   tailwind-merge@2.5.3: {}
 
+  tailwind-merge@3.0.2: {}
+
   tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0

scripts/editor-roadmap-content-json.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Node } from '@xyflow/react';
+import type { Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/editor-roadmap-content.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Edge, Node } from '@xyflow/react';
+import type { Edge, Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/editor-roadmap-dirs.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Node } from '@xyflow/react';
+import type { Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/migrate-editor-roadmap.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Node } from '@xyflow/react';
+import type { Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -1,4 +1,4 @@
-import { ReadonlyEditor } from '../../../editor/readonly-editor';
+import { ReadonlyEditor } from '@roadmapsh/editor';
 import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
 import {
   refreshProgressCounters,
@@ -9,7 +9,7 @@ import {
 } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
-import type { Node } from '@xyflow/react';
+import type { Node } from '@roadmapsh/editor';
 import { type MouseEvent, useCallback, useRef, useState } from 'react';
 import { EmptyRoadmap } from './EmptyRoadmap';
 import { cn } from '../../lib/classname';

src/components/EditorRoadmap/EditorRoadmap.tsx

@@ -11,8 +11,6 @@ import {
 import { httpGet } from '../../lib/http';
 import { ProgressNudge } from '../FrameRenderer/ProgressNudge';
 import { getUrlParams } from '../../lib/browser.ts';
-import { cn } from '../../lib/classname.ts';
-import { getUser } from '../../lib/jwt.ts';
 
 type EditorRoadmapProps = {
   resourceId: string;

src/components/EditorRoadmap/EditorRoadmapRenderer.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef } from 'react';
 import './EditorRoadmapRenderer.css';
+
+import { useCallback, useEffect, useRef } from 'react';
 import {
   renderResourceProgress,
   updateResourceProgress,
@@ -9,8 +10,8 @@ import {
 } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { useToast } from '../../hooks/use-toast';
-import type { Edge, Node } from '@xyflow/react';
-import { Renderer } from '../../../editor/renderer';
+import type { Edge, Node } from '@roadmapsh/editor';
+import { Renderer } from '@roadmapsh/editor';
 import { slugify } from '../../lib/slugger';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';

src/components/GenerateRoadmap/GenerateRoadmap.tsx

@@ -1,3 +1,5 @@
+import './GenerateRoadmap.css';
+
 import {
   type FormEvent,
   type MouseEvent,
@@ -6,10 +8,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import './GenerateRoadmap.css';
 import { useToast } from '../../hooks/use-toast';
-import { generateAIRoadmapFromText } from '../../../editor/utils/roadmap-generator';
-import { renderFlowJSON } from '../../../editor/renderer/renderer';
+import { generateAIRoadmapFromText, renderFlowJSON } from '@roadmapsh/editor';
 import { replaceChildren } from '../../lib/dom';
 import { readAIRoadmapStream } from '../../helper/read-stream';
 import {

src/components/TeamProgress/MemberCustomProgressModal.tsx

@@ -1,3 +1,4 @@
+import '../FrameRenderer/FrameRenderer.css';
 import {
   useCallback,
   useEffect,
@@ -6,7 +7,6 @@ import {
   useRef,
 } from 'react';
 import { Spinner } from '../ReactIcons/Spinner';
-import '../FrameRenderer/FrameRenderer.css';
 import type { TeamMember } from './TeamProgressPage';
 import { httpGet } from '../../lib/http';
 import {
@@ -15,13 +15,12 @@ import {
   type ResourceType,
   updateResourceProgress,
 } from '../../lib/resource-progress';
-import CloseIcon from '../../icons/close.svg';
 import { useToast } from '../../hooks/use-toast';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
 import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap';
-import { ReadonlyEditor } from '../../../editor/readonly-editor';
-import type { Node } from '@xyflow/react';
+import { ReadonlyEditor } from '@roadmapsh/editor';
+import type { Node } from '@roadmapsh/editor';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { MemberProgressModalHeader } from './MemberProgressModalHeader';

src/components/UserProgress/UserCustomProgressModal.tsx

@@ -7,7 +7,7 @@ import { topicSelectorAll } from '../../lib/resource-progress';
 import { deleteUrlParam, getUrlParams } from '../../lib/browser';
 import { useAuth } from '../../hooks/use-auth';
 import type { GetRoadmapResponse } from '../CustomRoadmap/CustomRoadmap';
-import { ReadonlyEditor } from '../../../editor/readonly-editor';
+import { ReadonlyEditor } from '@roadmapsh/editor';
 import { ModalLoader } from './ModalLoader.tsx';
 import { UserProgressModalHeader } from './UserProgressModalHeader';
 import { X } from 'lucide-react';

src/components/UserProgress/UserProgressModal.tsx

@@ -11,9 +11,8 @@ import { useAuth } from '../../hooks/use-auth';
 import { ModalLoader } from './ModalLoader.tsx';
 import { UserProgressModalHeader } from './UserProgressModalHeader';
 import { X } from 'lucide-react';
-import type { PageType } from '../CommandMenu/CommandMenu.tsx';
 import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts';
-import { renderFlowJSON } from '../../../editor/renderer/renderer.ts';
+import { renderFlowJSON } from '@roadmapsh/editor';
 
 export type ProgressMapProps = {
   userId?: string;

src/components/UserPublicProfile/UserProfileRoadmapRenderer.tsx

@@ -8,7 +8,7 @@ import {
 import { useToast } from '../../hooks/use-toast';
 import { replaceChildren } from '../../lib/dom.ts';
 import type { GetUserProfileRoadmapResponse } from '../../api/user.ts';
-import { ReadonlyEditor } from '../../../editor/readonly-editor.tsx';
+import { ReadonlyEditor } from '@roadmapsh/editor';
 import { cn } from '../../lib/classname.ts';
 
 export type UserProfileRoadmapRendererProps = GetUserProfileRoadmapResponse & {

src/layouts/BaseLayout.astro

@@ -1,4 +1,6 @@
 ---
+import '../styles/global.css';
+
 import Analytics from '../components/Analytics/Analytics.astro';
 import LoginPopup from '../components/AuthenticationFlow/LoginPopup.astro';
 import Authenticator from '../components/Authenticator/Authenticator.astro';
@@ -10,10 +12,9 @@ import { PageProgress } from '../components/PageProgress';
 import { Toaster } from '../components/Toast';
 import { PageSponsors } from '../components/PageSponsors/PageSponsors';
 import { siteConfig } from '../lib/config';
-import '../styles/global.css';
 import { PageVisit } from '../components/PageVisit/PageVisit';
 import type { ResourceType } from '../lib/resource-progress';
-import ChangelogBanner from "../components/ChangelogBanner.astro";
+import ChangelogBanner from '../components/ChangelogBanner.astro';
 
 export interface Props {
   title: string;

src/styles/global.css

@@ -1,7 +1,10 @@
+@import '@roadmapsh/editor/style.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 @layer components {
   .container {
     @apply mx-auto !max-w-[830px] px-4;