fix: Allowed default nodes in element views

apps/web/src/lib/editor/extensions/element/custom-node-view.tsx

@@ -2,6 +2,7 @@ import { NodeViewRendererProps } from "@tiptap/core";
 import { SolidEditor, SolidRenderer } from "@vrite/tiptap-solid";
 import { ExtensionElementViewContext, ExtensionElement } from "@vrite/sdk/extensions";
 import { NodeView as PMNodeView } from "@tiptap/pm/view";
+import clsx from "clsx";
 import { useNotifications } from "#context";
 import { ExtensionDetails, ExtensionViewRenderer } from "#lib/extensions";
 
@@ -63,9 +64,13 @@ const customNodeView = ({
       state: {}
     }
   );
+  const contentWrapperParent = component.element.querySelector("[data-content=true]");
 
-  component.element.querySelector("[data-content=true]")?.append(contentWrapper);
-  contentWrapper.setAttribute("class", "content relative");
+  contentWrapperParent?.append(contentWrapper);
+  contentWrapper.setAttribute(
+    "class",
+    clsx(":base: relative", "content", contentWrapperParent?.getAttribute("data-class"))
+  );
   wrapper.setAttribute("class", "!m-0");
   wrapper.setAttribute("data-uid", uid);
   wrapper.setAttribute("data-initialized", "true");

apps/web/src/lib/editor/extensions/element/utils.ts

@@ -1,4 +1,5 @@
 import {
+  ExtensionContentType,
   ExtensionElement,
   ExtensionElementSpec,
   ExtensionElementViewContext
@@ -221,21 +222,71 @@ const createCustomView = async (
     ...getters
   };
 };
+const generateEmptyNode = (type: ExtensionContentType): JSONContent => {
+  if (type === "blockquote") {
+    return { type: "blockquote", content: [{ type: "paragraph", content: [] }] };
+  }
+
+  if (type === "bulletList") {
+    return {
+      type: "bulletList",
+      content: [{ type: "listItem", content: [{ type: "paragraph" }] }]
+    };
+  }
+
+  if (type === "orderedList") {
+    return {
+      type: "orderedList",
+      attrs: { start: 1 },
+      content: [{ type: "listItem", content: [{ type: "paragraph" }] }]
+    };
+  }
+
+  if (type === "taskList") {
+    return { type: "taskList", content: [{ type: "taskItem", content: [{ type: "paragraph" }] }] };
+  }
+
+  if (type === "element") {
+    return { type: "element", attrs: { props: {} as any, type: "Element" } };
+  }
+
+  if (type === "table") {
+    const table: JSONContent = { type: "table", content: [] };
+
+    for (let rowIndex = 0; rowIndex < 3; rowIndex++) {
+      const row: JSONContent = { type: "tableRow", content: [] };
+
+      for (let colIndex = 0; colIndex < 3; colIndex++) {
+        if (rowIndex === 0) {
+          row.content!.push({ type: "tableHeader", content: [{ type: "paragraph", content: [] }] });
+        } else {
+          row.content!.push({ type: "tableCell", content: [{ type: "paragraph", content: [] }] });
+        }
+      }
+
+      table.content!.push(row);
+    }
+
+    return table;
+  }
+
+  return { type, content: [] };
+};
 const applyStructure = (node: PMNode, structure: StructureNode): JSONContent => {
   const nodeJSON = node.toJSON() as JSONContent;
   const applyStructureToNode = (
     nodeJSON: JSONContent | null,
     structureNode: StructureNode
   ): JSONContent | null => {
     if (typeof structureNode.content === "boolean") {
-      let defaultNodeType = "paragraph";
+      let defaultNodeType: ExtensionContentType = "paragraph";
 
       if (
         structureNode.allowed &&
         !structureNode.allowed.includes("paragraph") &&
         !structureNode.allowed.includes("block")
       ) {
-        defaultNodeType = structureNode.allowed[0] || "";
+        defaultNodeType = (structureNode.allowed[0] || "") as ExtensionContentType;
       }
 
       return {
@@ -244,7 +295,7 @@ const applyStructure = (node: PMNode, structure: StructureNode): JSONContent =>
         ...((nodeJSON?.content?.length || defaultNodeType) && {
           content: nodeJSON?.content?.filter((content) => {
             return !structureNode.allowed || structureNode.allowed.includes(content.type);
-          }) || [{ type: defaultNodeType, content: [] }]
+          }) || [generateEmptyNode(defaultNodeType)]
         })
       };
     } else if (structureNode.content) {

apps/web/src/lib/extensions/component-renderer.tsx

@@ -16,6 +16,7 @@ import { marked } from "marked";
 import { createStore } from "solid-js/store";
 import { ExtensionElement, ExtensionSpec, ContextObject } from "@vrite/sdk/extensions";
 import { Dynamic } from "solid-js/web";
+import clsx from "clsx";
 import { useNotifications } from "#context";
 import { Button, Card, Icon, IconButton, Loader, Select, Tooltip } from "#components/primitives";
 import { InputField } from "#components/fragments";
@@ -146,8 +147,14 @@ const baseComponents = {
   Fragment: (props: RenderedComponentProps) => {
     return <>{props.children}</>;
   },
-  Content: () => {
-    return <div data-content="true" class="w-full" />;
+  Content: (props: RenderedComponentProps<{ wrapperClass?: string; class?: string }>) => {
+    return (
+      <div
+        data-content="true"
+        data-class={props.class}
+        class={clsx(":base: w-full", props.wrapperClass)}
+      />
+    );
   },
   Element: (props: RenderedComponentProps) => <>{props.children}</>
 };

apps/web/src/styles/styles.scss

@@ -103,6 +103,9 @@ kbd {
       border-style: none solid solid none;
       word-break: break-all;
     }
+    td { 
+      @apply bg-gray-100 dark:bg-gray-800;
+    }
     th {
       @apply bg-gray-50 dark:bg-gray-900;
     }

packages/sdk/javascript/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrite/sdk",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "private": false,
   "description": "JavaScript SDK and API client for Vrite - open-source developer content platform",
   "license": "MIT",

packages/sdk/javascript/src/extensions/index.ts

@@ -33,7 +33,7 @@ type UsableEnv<R extends ContextObject = ContextObject, W extends ContextObject
   readable: R;
   writable: W;
 };
-type JSONContentNodeType =
+type ExtensionContentType =
   | "paragraph"
   | "heading"
   | "blockquote"
@@ -211,7 +211,12 @@ interface ExtensionBaseComponent<
 }
 interface ExtensionBaseComponents {
   // Element Components
-  Content: ExtensionBaseComponent<{ allowed?: JSONContentNodeType[] }>;
+  Content: ExtensionBaseComponent<{
+    allowed?: ExtensionContentType[];
+    initial?: string;
+    class?: string;
+    wrapperClass?: string;
+  }>;
   Element: ExtensionBaseComponent<{ type: string }>;
   // Layout Components
   View: ExtensionBaseComponent<{ class: string }>;
@@ -567,6 +572,7 @@ export type {
   ExtensionElement,
   ContextObject,
   ContextValue,
+  ExtensionContentType,
   View,
   Func,
   Val,