fix: Parsing priority for custom inline content and styles

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

@@ -81,6 +81,8 @@ export type CustomInlineContentImplementation<
         contentDOM?: HTMLElement;
       }
     | undefined;
+
+  runsBefore?: string[];
 };
 
 export function getInlineContentParseRules<C extends CustomInlineContentConfig>(
@@ -220,6 +222,7 @@ export function createInlineContentSpec<
     node,
     inlineContentConfig.propSchema,
     {
+      ...inlineContentImplementation,
       toExternalHTML: inlineContentImplementation.toExternalHTML,
       render(inlineContent, updateInlineContent, editor) {
         const output = inlineContentImplementation.render(

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

@@ -43,6 +43,7 @@ export type InlineContentImplementation<T extends InlineContentConfig> =
           ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
           destroy?: () => void;
         };
+        runsBefore?: string[];
       };
 
 export type InlineContentSchemaWithInlineContent<

packages/core/src/schema/schema.ts

@@ -84,8 +84,12 @@ export class CustomBlockNoteSchema<
     const defaultSet = new Set<string>();
     dag.set("default", defaultSet);
 
-    for (const [key, specDef] of Object.entries(this.opts.blockSpecs)) {
-      if (specDef.implementation.runsBefore) {
+    for (const [key, specDef] of Object.entries({
+      ...this.opts.blockSpecs,
+      ...this.opts.inlineContentSpecs,
+      ...this.opts.styleSpecs,
+    })) {
+      if (specDef.implementation?.runsBefore) {
         dag.set(key, new Set(specDef.implementation.runsBefore));
       } else {
         defaultSet.add(key);
@@ -130,19 +134,58 @@ export class CustomBlockNoteSchema<
         : never;
     };
 
+    const inlineContentSpecs = Object.fromEntries(
+      Object.entries(this.opts.inlineContentSpecs).map(
+        ([key, inlineContentSpec]) => {
+          // Case for text and links.
+          if (typeof inlineContentSpec.config !== "object") {
+            return [key, inlineContentSpec];
+          }
+
+          return [
+            key,
+            {
+              ...inlineContentSpec,
+              implementation: {
+                ...inlineContentSpec.implementation,
+                node: inlineContentSpec.implementation?.node.extend({
+                  priority: getPriority(key),
+                }),
+              },
+            },
+          ];
+        },
+      ),
+    ) as InlineContentSpecs;
+
+    const styleSpecs = Object.fromEntries(
+      Object.entries(this.opts.styleSpecs).map(([key, styleSpec]) => [
+        key,
+        {
+          ...styleSpec,
+          implementation: {
+            ...styleSpec.implementation,
+            mark: styleSpec.implementation?.mark.extend({
+              priority: getPriority(key),
+            }),
+          },
+        },
+      ]),
+    ) as StyleSpecs;
+
     return {
       blockSpecs,
       blockSchema: Object.fromEntries(
         Object.entries(blockSpecs).map(([key, blockDef]) => {
           return [key, blockDef.config];
         }),
       ) as any,
-      inlineContentSpecs: removeUndefined(this.opts.inlineContentSpecs),
-      styleSpecs: removeUndefined(this.opts.styleSpecs),
+      inlineContentSpecs: removeUndefined(inlineContentSpecs),
+      styleSpecs: removeUndefined(styleSpecs),
       inlineContentSchema: getInlineContentSchemaFromSpecs(
-        this.opts.inlineContentSpecs,
+        inlineContentSpecs,
       ) as any,
-      styleSchema: getStyleSchemaFromSpecs(this.opts.styleSpecs) as any,
+      styleSchema: getStyleSchemaFromSpecs(styleSpecs) as any,
     };
   }
 

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

@@ -22,6 +22,7 @@ export type CustomStyleImplementation<T extends StyleConfig> = {
   parse?: (
     element: HTMLElement,
   ) => (T["propSchema"] extends "boolean" ? true : string) | undefined;
+  runsBefore?: string[];
 };
 
 export function getStyleParseRules<T extends StyleConfig>(
@@ -46,6 +47,10 @@ export function getStyleParseRules<T extends StyleConfig>(
   if (customParseFunction) {
     rules.push({
       tag: "*",
+      // By default, styles can overlap each other, so the rules should not
+      // completely consume the element they parse (which can have multiple
+      // styles).
+      consuming: false,
       getAttrs(node: string | HTMLElement) {
         if (typeof node === "string") {
           return false;
@@ -107,6 +112,7 @@ export function createStyleSpec<const T extends StyleConfig>(
   });
 
   return createInternalStyleSpec(styleConfig, {
+    ...styleImplementation,
     mark,
     render: (value) => {
       const renderResult = styleImplementation.render(value as any);

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

@@ -28,6 +28,7 @@ export type StyleImplementation<T extends StyleConfig> = {
     dom: HTMLElement;
     contentDOM?: HTMLElement;
   };
+  runsBefore?: string[];
 };
 
 // Container for both the config and implementation of a Style,

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -233,6 +233,7 @@ export function createReactInlineContentSpec<
   return createInternalInlineContentSpec(
     inlineContentConfig as CustomInlineContentConfig,
     {
+      ...inlineContentImplementation,
       node,
       render(inlineContent, updateInlineContent, editor) {
         const Content = inlineContentImplementation.render;

packages/react/src/schema/ReactStyleSpec.tsx

@@ -23,6 +23,7 @@ export type ReactCustomStyleImplementation<T extends StyleConfig> = {
     contentRef: (el: HTMLElement | null) => void;
     editor: BlockNoteEditor<any, any, any>;
   }>;
+  runsBefore?: string[];
 };
 
 // A function to create custom block for API consumers
@@ -116,6 +117,7 @@ export function createReactStyleSpec<T extends StyleConfig>(
   });
 
   return createInternalStyleSpec(styleConfig, {
+    ...styleImplementation,
     mark,
     render(value, editor) {
       const Content = styleImplementation.render;

tests/src/unit/core/clipboard/copy/__snapshots__/text/html/mentionWithBackgroundColor.html

@@ -0,0 +1,11 @@
+<p>Paragraph 1</p>
+<p>
+  <span
+    class="mention-external"
+    data-external="true"
+    data-inline-content-type="mention"
+    data-user="User"
+    style="background-color: red;"
+  >@User</span>
+</p>
+<p>Paragraph 2</p>

tests/src/unit/core/clipboard/copy/copyTestInstances.ts

@@ -650,4 +650,30 @@ export const copyTestInstancesHTML: TestInstance<
     },
     executeTest: testCopyHTML,
   },
+  {
+    testCase: {
+      name: "mentionWithBackgroundColor",
+      document: [
+        {
+          type: "paragraph",
+          content: "Paragraph 1",
+        },
+        {
+          type: "paragraph",
+          content: [{ type: "mention", props: { user: "User" } }],
+        },
+        {
+          type: "paragraph",
+          content: "Paragraph 2",
+        },
+      ],
+      getCopySelection: (doc) => {
+        const startPos = getPosOfTextNode(doc, "Paragraph 1");
+        const endPos = getPosOfTextNode(doc, "Paragraph 2", true);
+
+        return TextSelection.create(doc, startPos, endPos);
+      },
+    },
+    executeTest: testCopyHTML,
+  },
 ];

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/inlineContent/mentionWithToExternalHTML.html

@@ -7,6 +7,7 @@
           <span
             class="mention-internal"
             data-user="Matthew"
+            style="background-color: red;"
             data-inline-content-type="mention"
           >@Matthew</span>
         </p>

tests/src/unit/core/formatConversion/export/__snapshots__/html/inlineContent/mentionWithToExternalHTML.html

@@ -5,5 +5,6 @@
     data-external="true"
     data-inline-content-type="mention"
     data-user="Matthew"
+    style="background-color: red;"
   >@Matthew</span>
 </p>