refactor: move draggable to implementation

Author: nperez0111

docs/content/docs/features/custom-schemas/custom-inline-content.mdx

@@ -51,7 +51,6 @@ type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none";
   readonly propSchema: PropSchema;
-  draggable?: boolean;
 };
 ```
 
@@ -100,14 +99,15 @@ If you do not want the prop to have a default value, you can define it as an obj
   mentioned._
 </Callout>
 
-`draggable?:` Whether the inline content should be draggable.
-
 ### Inline Content Implementation (`ReactCustomInlineContentImplementation`)
 
 The Inline Content Implementation defines how the inline content should be rendered to HTML.
 
 ```typescript
 type ReactCustomInlineContentImplementation = {
+  meta?: {
+    draggable?: boolean;
+  };
   render: React.FC<{
     inlineContent: InlineContent;
     contentRef?: (node: HTMLElement | null) => void;
@@ -124,6 +124,8 @@ type ReactCustomInlineContentImplementation = {
 
 - `draggable:` Specifies whether the inline content can be dragged within the editor. If set to `true`, the inline content will be draggable. Defaults to `false` if not specified. If this is true, you should add `data-drag-handle` to the DOM element that should function as the drag handle.
 
+`meta?.draggable?:` Whether the inline content should be draggable.
+
 <Callout type="info">
   _Note that since inline content is, by definition, inline, your component
   should also return an HTML inline element._

examples/06-custom-schema/draggable-inline-content/src/App.tsx

@@ -15,10 +15,12 @@ const draggableButton = createReactInlineContentSpec(
         default: "",
       },
     },
-    draggable: true,
-    content: "none"
+    content: "none",
   },
   {
+    meta: {
+      draggable: true,
+    },
     render: (props) => {
       return (
         <span
@@ -30,12 +32,13 @@ const draggableButton = createReactInlineContentSpec(
             borderRadius: "4px",
             cursor: "move",
           }}
-          data-drag-handle>
+          data-drag-handle
+        >
           <span>{props.inlineContent.props.title}</span>
         </span>
       );
     },
-  }
+  },
 );
 
 const schema = BlockNoteSchema.create({

packages/core/src/schema/inlineContent/createSpec.ts

@@ -23,6 +23,10 @@ export type CustomInlineContentImplementation<
   T extends CustomInlineContentConfig,
   S extends StyleSchema,
 > = {
+  meta?: {
+    draggable?: boolean;
+  };
+
   /**
    * Parses an external HTML element into a inline content of this type when it returns the block props object, otherwise undefined
    */
@@ -130,6 +134,7 @@ export function createInlineContentSpec<
     name: inlineContentConfig.type,
     inline: true,
     group: "inline",
+    draggable: inlineContentImplementation.meta?.draggable,
     selectable: inlineContentConfig.content === "styled",
     atom: inlineContentConfig.content === "none",
     content: inlineContentConfig.content === "styled" ? "inline*" : "",

packages/core/src/schema/inlineContent/types.ts

@@ -7,9 +7,7 @@ import { ViewMutationRecord } from "prosemirror-view";
 export type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none"; // | "plain"
-  draggable?: boolean;
   readonly propSchema: PropSchema;
-  // content: "inline" | "none" | "table";
 };
 // InlineContentConfig contains the "schema" info about an InlineContent type
 // i.e. what props it supports, what content it supports, etc.
@@ -22,6 +20,9 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
   T extends "link" | "text"
     ? undefined
     : {
+        meta?: {
+          draggable?: boolean;
+        };
         node: Node;
         toExternalHTML?: (
           inlineContent: any,

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -110,7 +110,7 @@ export function createReactInlineContentSpec<
     group: "inline",
     selectable: inlineContentConfig.content === "styled",
     atom: inlineContentConfig.content === "none",
-    draggable: inlineContentConfig.draggable,
+    draggable: inlineContentImplementation.meta?.draggable,
     content: (inlineContentConfig.content === "styled"
       ? "inline*"
       : "") as T["content"] extends "styled" ? "inline*" : "",