feat

udecode · Nov 4, 2024 · 51d0bc0 · 51d0bc0
1 parent f1a745a
commit 51d0bc0
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 24 deletions.
diff --git a/apps/www/public/r/styles/default/editor-ai.json b/apps/www/public/r/styles/default/editor-ai.json
diff --git a/apps/www/public/r/styles/default/plate-types.json b/apps/www/public/r/styles/default/plate-types.json
@@ -0,0 +1,27 @@
+{
+  "dependencies": [
+    "@udecode/plate-block-quote",
+    "@udecode/plate-code-block",
+    "@udecode/plate-comments",
+    "@udecode/plate-common",
+    "@udecode/plate-excalidraw",
+    "@udecode/plate-heading",
+    "@udecode/plate-horizontal-rule",
+    "@udecode/plate-link",
+    "@udecode/plate-list",
+    "@udecode/plate-media",
+    "@udecode/plate-mention",
+    "@udecode/plate-table",
+    "@udecode/plate-toggle"
+  ],
+  "files": [
+    {
+      "content": "'use client';\n\nimport type React from 'react';\n\nimport type { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport type {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n} from '@udecode/plate-code-block/react';\nimport type { TCommentText } from '@udecode/plate-comments';\nimport type { ElementOf, TElement, TText } from '@udecode/plate-common';\nimport type { ParagraphPlugin } from '@udecode/plate-common/react';\nimport type { TExcalidrawElement } from '@udecode/plate-excalidraw';\nimport type { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport type { HEADING_KEYS } from '@udecode/plate-heading';\nimport type { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport type { TLinkElement } from '@udecode/plate-link';\nimport type { LinkPlugin } from '@udecode/plate-link/react';\nimport type { TTodoListItemElement } from '@udecode/plate-list';\nimport type {\n  BulletedListPlugin,\n  ListItemPlugin,\n  NumberedListPlugin,\n  TodoListPlugin,\n} from '@udecode/plate-list/react';\nimport type { TImageElement, TMediaEmbedElement } from '@udecode/plate-media';\nimport type { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport type {\n  TMentionElement,\n  TMentionInputElement,\n} from '@udecode/plate-mention';\nimport type {\n  MentionInputPlugin,\n  MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport type { TTableElement } from '@udecode/plate-table';\nimport type {\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport type { TToggleElement } from '@udecode/plate-toggle';\nimport type { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { useEditorRef } from '@udecode/plate-common/react';\n\nimport type { useCreateEditor } from '../../block/editor-ai/components/editor/use-create-editor';\n\n/** Text */\n\nexport type EmptyText = {\n  text: '';\n};\n\nexport type PlainText = {\n  text: string;\n};\n\nexport interface RichText extends TText, TCommentText {\n  backgroundColor?: React.CSSProperties['backgroundColor'];\n  bold?: boolean;\n  code?: boolean;\n  color?: React.CSSProperties['color'];\n  fontFamily?: React.CSSProperties['fontFamily'];\n  fontSize?: React.CSSProperties['fontSize'];\n  fontWeight?: React.CSSProperties['fontWeight'];\n  italic?: boolean;\n  kbd?: boolean;\n  strikethrough?: boolean;\n  subscript?: boolean;\n  underline?: boolean;\n}\n\n/** Inline Elements */\n\nexport interface MyLinkElement extends TLinkElement {\n  children: RichText[];\n  type: typeof LinkPlugin.key;\n}\n\nexport interface MyMentionInputElement extends TMentionInputElement {\n  children: [PlainText];\n  type: typeof MentionInputPlugin.key;\n}\n\nexport interface MyMentionElement extends TMentionElement {\n  children: [EmptyText];\n  type: typeof MentionPlugin.key;\n}\n\nexport type MyInlineElement =\n  | MyLinkElement\n  | MyMentionElement\n  | MyMentionInputElement;\n\nexport type MyInlineDescendant = MyInlineElement | RichText;\n\nexport type MyInlineChildren = MyInlineDescendant[];\n\n/** Block props */\n\nexport interface MyIndentProps {\n  indent?: number;\n}\n\nexport interface MyIndentListProps extends MyIndentProps {\n  listRestart?: number;\n  listStart?: number;\n  listStyleType?: string;\n}\n\nexport interface MyLineHeightProps {\n  lineHeight?: React.CSSProperties['lineHeight'];\n}\n\nexport interface MyAlignProps {\n  align?: React.CSSProperties['textAlign'];\n}\n\nexport interface MyBlockElement\n  extends TElement,\n    MyIndentListProps,\n    MyLineHeightProps {\n  id?: string;\n}\n\n/** Blocks */\n\nexport interface MyParagraphElement extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof ParagraphPlugin.key;\n}\n\nexport interface MyH1Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h1;\n}\n\nexport interface MyH2Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h2;\n}\n\nexport interface MyH3Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h3;\n}\n\nexport interface MyH4Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h4;\n}\n\nexport interface MyH5Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h5;\n}\n\nexport interface MyH6Element extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof HEADING_KEYS.h6;\n}\n\nexport interface MyBlockquoteElement extends MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof BlockquotePlugin.key;\n}\n\nexport interface MyCodeBlockElement extends MyBlockElement {\n  children: MyCodeLineElement[];\n  type: typeof CodeBlockPlugin.key;\n}\n\nexport interface MyCodeLineElement extends TElement {\n  children: PlainText[];\n  type: typeof CodeLinePlugin.key;\n}\n\nexport interface MyTableElement extends TTableElement, MyBlockElement {\n  children: MyTableRowElement[];\n  type: typeof TablePlugin.key;\n}\n\nexport interface MyTableRowElement extends TElement {\n  children: MyTableCellElement[];\n  type: typeof TableRowPlugin.key;\n}\n\nexport interface MyTableCellElement extends TElement {\n  children: MyNestableBlock[];\n  type: typeof TableCellPlugin.key;\n}\n\nexport interface MyBulletedListElement extends TElement, MyBlockElement {\n  children: MyListItemElement[];\n  type: typeof BulletedListPlugin.key;\n}\n\nexport interface MyNumberedListElement extends TElement, MyBlockElement {\n  children: MyListItemElement[];\n  type: typeof NumberedListPlugin.key;\n}\n\nexport interface MyListItemElement extends TElement, MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof ListItemPlugin.key;\n}\n\nexport interface MyTodoListElement\n  extends TTodoListItemElement,\n    MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof TodoListPlugin.key;\n}\n\nexport interface MyToggleElement extends TToggleElement, MyBlockElement {\n  children: MyInlineChildren;\n  type: typeof TogglePlugin.key;\n}\n\nexport interface MyImageElement extends TImageElement, MyBlockElement {\n  children: [EmptyText];\n  type: typeof ImagePlugin.key;\n}\n\nexport interface MyMediaEmbedElement\n  extends TMediaEmbedElement,\n    MyBlockElement {\n  children: [EmptyText];\n  type: typeof MediaEmbedPlugin.key;\n}\n\nexport interface MyHrElement extends MyBlockElement {\n  children: [EmptyText];\n  type: typeof HorizontalRulePlugin.key;\n}\n\nexport interface MyExcalidrawElement\n  extends TExcalidrawElement,\n    MyBlockElement {\n  children: [EmptyText];\n  type: typeof ExcalidrawPlugin.key;\n}\n\nexport type MyNestableBlock = MyParagraphElement;\n\nexport type MyElement = ElementOf<MyEditor>;\n\nexport type MyBlock = Exclude<MyElement, MyInlineElement>;\n\nexport type MyRootBlock =\n  | MyBlockquoteElement\n  | MyBulletedListElement\n  | MyCodeBlockElement\n  | MyExcalidrawElement\n  | MyH1Element\n  | MyH2Element\n  | MyH3Element\n  | MyH4Element\n  | MyH5Element\n  | MyH6Element\n  | MyHrElement\n  | MyImageElement\n  | MyMediaEmbedElement\n  | MyNumberedListElement\n  | MyParagraphElement\n  | MyTableElement\n  | MyTodoListElement\n  | MyToggleElement;\n\n/** Editor types */\n\nexport type MyValue = MyRootBlock[];\n\nexport type MyEditor = ReturnType<typeof useCreateEditor>;\n\nexport const useEditor = () => useEditorRef<MyEditor>();\n",
+      "path": "components/editor/plate-types.ts",
+      "target": "components/editor/plate-types.ts",
+      "type": "registry:component"
+    }
+  ],
+  "name": "plate-types",
+  "type": "registry:component"
+}
diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts
@@ -410,10 +410,6 @@ async function buildStyles(registry: Registry) {
             if (!target || target === "") {
               const fileName = file.path.split("/").pop()
 
-              if (file.type === 'registry:component') {
-                console.log(file.path)
-              }
-
               if (file.type === "registry:component") {
                 target = file.path
               }

diff --git a/apps/www/src/__registry__/index.tsx b/apps/www/src/__registry__/index.tsx
@@ -1061,6 +1061,18 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "plate-types": {
+      name: "plate-types",
+      description: "",
+      type: "registry:component",
+      registryDependencies: undefined,
+      files: ["registry/default/components/editor/plate-types.ts"],
+      component: React.lazy(() => import("@/registry/default/components/editor/plate-types.ts")),
+      source: "",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "ai-demo": {
       name: "ai-demo",
       description: "",
@@ -1749,7 +1761,7 @@ export const Index: Record<string, any> = {
       name: "editor-ai",
       description: "An AI editor.",
       type: "registry:block",
-      registryDependencies: ["plate-types","ai-plugins","autoformat-plugin","copilot-plugins","ai-menu","ai-leaf","ghost-text","comments-popover","cursor-overlay","editor","fixed-toolbar","fixed-toolbar-buttons","floating-toolbar","floating-toolbar-buttons","block-context-menu","blockquote-element","code-block-element","code-leaf","code-line-element","code-syntax-leaf","column-element","column-group-element","comment-leaf","date-element","draggable","emoji-input-element","excalidraw-element","heading-element","highlight-leaf","hr-element","image-element","image-preview","indent-todo-marker","kbd-leaf","link-element","link-floating-toolbar","list-element","media-embed-element","mention-element","mention-input-element","paragraph-element","placeholder","slash-input-element","table-cell-element","table-element","table-row-element","toc-element","todo-list-element","toggle-element"],
+      registryDependencies: ["plate-types","ai-plugins","autoformat-plugin","copilot-plugins","ai-menu","ai-leaf","ghost-text","comments-popover","cursor-overlay","editor","fixed-toolbar","fixed-toolbar-buttons","floating-toolbar","floating-toolbar-buttons","block-context-menu","blockquote-element","code-block-element","code-leaf","code-line-element","code-syntax-leaf","column-element","column-group-element","comment-leaf","date-element","draggable","emoji-input-element","excalidraw-element","heading-element","highlight-leaf","hr-element","image-element","image-preview","indent-todo-marker","kbd-leaf","link-element","link-floating-toolbar","list-element","media-embed-element","mention-element","mention-input-element","paragraph-element","placeholder","slash-input-element","table-cell-element","table-element","table-row-element","toc-element","toggle-element"],
       files: ["registry/default/block/editor-ai/page.tsx","registry/default/block/editor-ai/components/editor/plate-editor.tsx","registry/default/block/editor-ai/components/editor/use-create-editor.tsx"],
       component: React.lazy(() => import("@/registry/default/block/editor-ai/page.tsx")),
       source: "src/__registry__/default/block/editor-ai/page.tsx",

diff --git a/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx b/apps/www/src/registry/default/block/editor-ai/components/editor/use-create-editor.tsx
@@ -135,7 +135,6 @@ import {
 import { TableElement } from '@/registry/default/plate-ui/table-element';
 import { TableRowElement } from '@/registry/default/plate-ui/table-row-element';
 import { TocElement } from '@/registry/default/plate-ui/toc-element';
-import { TodoListElement } from '@/registry/default/plate-ui/todo-list-element';
 import { ToggleElement } from '@/registry/default/plate-ui/toggle-element';
 import { withDraggables } from '@/registry/default/plate-ui/with-draggables';
 
@@ -185,7 +184,6 @@ export const useCreateEditor = () => {
           [TablePlugin.key]: TableElement,
           [TableRowPlugin.key]: TableRowElement,
           [TocPlugin.key]: TocElement,
-          [TodoListPlugin.key]: TodoListElement,
           [TogglePlugin.key]: ToggleElement,
           [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),
         })

diff --git a/apps/www/src/registry/registry-blocks.ts b/apps/www/src/registry/registry-blocks.ts
@@ -114,7 +114,6 @@ export const blocks: Registry = [
       'table-element',
       'table-row-element',
       'toc-element',
-      'todo-list-element',
       'toggle-element',
     ],
     type: 'registry:block',

diff --git a/apps/www/src/registry/registry-components.ts b/apps/www/src/registry/registry-components.ts
@@ -66,4 +66,24 @@ export const components: Registry = [
     name: 'transforms',
     type: 'registry:component',
   },
+  {
+    dependencies: [
+      '@udecode/plate-block-quote',
+      '@udecode/plate-code-block',
+      '@udecode/plate-comments',
+      '@udecode/plate-common',
+      '@udecode/plate-excalidraw',
+      '@udecode/plate-heading',
+      '@udecode/plate-horizontal-rule',
+      '@udecode/plate-link',
+      '@udecode/plate-list',
+      '@udecode/plate-media',
+      '@udecode/plate-mention',
+      '@udecode/plate-table',
+      '@udecode/plate-toggle',
+    ],
+    files: ['components/editor/plate-types.ts'],
+    name: 'plate-types',
+    type: 'registry:component',
+  },
 ];
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
@@ -126,15 +126,32 @@ export async function runInit(
   const isNew = res?.[1];
 
   let config: Config;
+  let newConfig: Config | undefined;
+  let registryName: string | undefined;
 
   if (projectConfig) {
     if (isNew || options.url === projectConfig.url) {
-      projectConfig = await getDefaultConfig(projectConfig, options.url);
-      // Updating top-level config
-      config = await promptForMinimalConfig(projectConfig, options);
+      if (options.url === projectConfig.url) {
+        projectConfig = await getDefaultConfig(projectConfig, options.url);
+        // Updating top-level config
+        config = await promptForMinimalConfig(projectConfig, options);
+      } else {
+        newConfig = await promptForMinimalConfig(
+          await getDefaultConfig(projectConfig),
+          {
+            ...options,
+            url: '',
+          }
+        );
+        const res = await promptForNestedRegistryConfig(newConfig, options);
+        config = res.config;
+        registryName = res.name;
+      }
     } else {
       // Updating nested registry config
-      config = await promptForNestedRegistryConfig(projectConfig, options);
+      const res = await promptForNestedRegistryConfig(projectConfig, options);
+      config = res.config;
+      registryName = res.name;
     }
   } else {
     // New configuration
@@ -158,27 +175,40 @@ export async function runInit(
     delete config.url;
   }
 
+  // Write components.json.
   const componentSpinner = spinner(`Writing components.json.`).start();
   const targetPath = path.resolve(options.cwd, 'components.json');
   await fs.writeFile(targetPath, JSON.stringify(config, null, 2), 'utf8');
   componentSpinner.succeed();
 
   let registryConfig = config;
-  let registryName: string | undefined;
-  const id = options.name ?? config.name ?? options.url;
 
-  if (id) {
-    const registry = config.registries?.[id];
+  if (registryName) {
+    const registry = config.registries?.[registryName];
 
     if (registry) {
-      registryName = id;
       registryConfig = deepmerge(config, registry) as any;
     }
   }
 
   // Add components.
   const fullConfig = await resolveConfigPaths(options.cwd, registryConfig);
   const components = ['index', ...(options.components || [])];
+
+  if (newConfig) {
+    await addComponents(
+      components,
+      await resolveConfigPaths(options.cwd, newConfig),
+      {
+        isNewProject:
+          options.isNewProject || projectInfo?.framework.name === 'next-app',
+        // Init will always overwrite files.
+        overwrite: true,
+        silent: options.silent,
+      }
+    );
+  }
+
   await addComponents(components, fullConfig, {
     isNewProject:
       options.isNewProject || projectInfo?.framework.name === 'next-app',
@@ -191,6 +221,16 @@ export async function runInit(
   // If a new project is using src dir, let's update the tailwind content config.
   // TODO: Handle this per framework.
   if (options.isNewProject && options.srcDir) {
+    if (newConfig) {
+      await updateTailwindContent(
+        ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+        await resolveConfigPaths(options.cwd, newConfig),
+        {
+          silent: options.silent,
+        }
+      );
+    }
+
     await updateTailwindContent(
       ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
       fullConfig,
@@ -439,10 +479,13 @@ async function promptForNestedRegistryConfig(
   const { resolvedPaths, ...topLevelConfig } = defaultConfig;
 
   return {
-    ...topLevelConfig,
-    registries: {
-      ...defaultConfig.registries,
-      [name]: registryConfig,
+    config: {
+      ...topLevelConfig,
+      registries: {
+        ...defaultConfig.registries,
+        [name]: registryConfig,
+      },
     },
-  } as Config;
+    name,
+  } as { config: Config; name: string };
 }