Custom inline content and styles commands/copy & paste fixes

packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><span style="font-size: 18px">This is text with a custom fontSize</span></p>
+<p class="bn-inline-content"><span style="font-size: 18px" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p>

packages/core/src/api/exporters/html/__snapshots__/fontSize/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content"><span style="font-size: 18px">This is text with a custom fontSize</span></p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content"><span style="font-size: 18px" class="bn-style" data-style-type="fontSize" data-value="18px">This is text with a custom fontSize</span></p></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/mention/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">I enjoy working with<span>@Matthew</span></p>
+<p class="bn-inline-content">I enjoy working with<span class="bn-inline-content-section" data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p>

packages/core/src/api/exporters/html/__snapshots__/mention/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I enjoy working with<span>@Matthew</span></p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I enjoy working with<span class="bn-inline-content-section" data-inline-content-type="mention" data-user="Matthew">@Matthew</span></p></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/small/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content"><small>This is a small text</small></p>
+<p class="bn-inline-content"><small class="bn-style" data-style-type="small">This is a small text</small></p>

packages/core/src/api/exporters/html/__snapshots__/small/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content"><small>This is a small text</small></p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content"><small class="bn-style" data-style-type="small">This is a small text</small></p></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/tag/basic/external.html

@@ -1 +1 @@
-<p class="bn-inline-content">I love <span>#<span>BlockNote</span></span></p>
+<p class="bn-inline-content">I love <span class="bn-inline-content-section" data-inline-content-type="tag">#<span>BlockNote</span></span></p>

packages/core/src/api/exporters/html/__snapshots__/tag/basic/internal.html

@@ -1 +1 @@
-<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I love <span>#<span>BlockNote</span></span></p></div></div></div></div>
+<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">I love <span class="bn-inline-content-section" data-inline-content-type="tag">#<span>BlockNote</span></span></p></div></div></div></div>

packages/core/src/api/exporters/html/htmlConversion.test.ts

@@ -369,9 +369,6 @@ describe("Test HTML conversion", () => {
       for (const document of testCase.documents) {
         // eslint-disable-next-line no-loop-func
         it("Convert " + document.name + " to HTML", async () => {
-          if (document.name !== "complex/misc") {
-            return;
-          }
           const nameSplit = document.name.split("/");
           await convertToHTMLAndCompareSnapshots(
             editor,

packages/core/src/api/testCases/cases/customInlineContent.ts

@@ -87,7 +87,7 @@ export const customInlineContentTestCases: EditorTestCases<
                 user: "Matthew",
               },
               content: undefined,
-            } as any,
+            } as any, // TODO
           ],
         },
       ],
@@ -103,7 +103,7 @@ export const customInlineContentTestCases: EditorTestCases<
               type: "tag",
               // props: {},
               content: "BlockNote",
-            } as any,
+            } as any, // TODO
           ],
         },
       ],

packages/core/src/api/testCases/cases/defaultSchema.ts

@@ -24,15 +24,15 @@ export const defaultSchemaTestCases: EditorTestCases<
       name: "paragraph/empty",
       blocks: [
         {
-          type: "paragraph" as const,
+          type: "paragraph",
         },
       ],
     },
     {
       name: "paragraph/basic",
       blocks: [
         {
-          type: "paragraph" as const,
+          type: "paragraph",
           content: "Paragraph",
         },
       ],
@@ -41,12 +41,12 @@ export const defaultSchemaTestCases: EditorTestCases<
       name: "paragraph/styled",
       blocks: [
         {
-          type: "paragraph" as const,
+          type: "paragraph",
           props: {
             textAlignment: "center",
             textColor: "orange",
             backgroundColor: "pink",
-          } as const,
+          },
           content: [
             {
               type: "text",
@@ -83,15 +83,15 @@ export const defaultSchemaTestCases: EditorTestCases<
       name: "paragraph/nested",
       blocks: [
         {
-          type: "paragraph" as const,
+          type: "paragraph",
           content: "Paragraph",
           children: [
             {
-              type: "paragraph" as const,
+              type: "paragraph",
               content: "Nested Paragraph 1",
             },
             {
-              type: "paragraph" as const,
+              type: "paragraph",
               content: "Nested Paragraph 2",
             },
           ],
@@ -102,15 +102,15 @@ export const defaultSchemaTestCases: EditorTestCases<
       name: "image/button",
       blocks: [
         {
-          type: "image" as const,
+          type: "image",
         },
       ],
     },
     {
       name: "image/basic",
       blocks: [
         {
-          type: "image" as const,
+          type: "image",
           props: {
             url: "exampleURL",
             caption: "Caption",
@@ -123,20 +123,20 @@ export const defaultSchemaTestCases: EditorTestCases<
       name: "image/nested",
       blocks: [
         {
-          type: "image" as const,
+          type: "image",
           props: {
             url: "exampleURL",
             caption: "Caption",
             width: 256,
-          } as const,
+          },
           children: [
             {
-              type: "image" as const,
+              type: "image",
               props: {
                 url: "exampleURL",
                 caption: "Caption",
                 width: 256,
-              } as const,
+              },
             },
           ],
         },

packages/core/src/extensions/Blocks/api/inlineContent/createSpec.ts

@@ -1,8 +1,13 @@
 import { Node } from "@tiptap/core";
+import { ParseRule } from "@tiptap/pm/model";
 import { nodeToCustomInlineContent } from "../../../../api/nodeConversions/nodeConversions";
 import { propsToAttributes } from "../blocks/internal";
+import { Props } from "../blocks/types";
 import { StyleSchema } from "../styles/types";
-import { createInlineContentSpecFromTipTapNode } from "./internal";
+import {
+  addInlineContentAttributes,
+  createInlineContentSpecFromTipTapNode,
+} from "./internal";
 import {
   InlineContentConfig,
   InlineContentFromConfig,
@@ -37,6 +42,16 @@ export type CustomInlineContentImplementation<
   };
 };
 
+export function getInlineContentParseRules(
+  config: InlineContentConfig
+): ParseRule[] {
+  return [
+    {
+      tag: `.bn-inline-content-section[data-inline-content-type="${config.type}"]`,
+    },
+  ];
+}
+
 export function createInlineContentSpec<
   T extends InlineContentConfig,
   S extends StyleSchema
@@ -57,6 +72,10 @@ export function createInlineContentSpec<
       return propsToAttributes(inlineContentConfig.propSchema);
     },
 
+    parseHTML() {
+      return getInlineContentParseRules(inlineContentConfig);
+    },
+
     renderHTML({ node }) {
       const editor = this.options.editor;
 
@@ -68,7 +87,15 @@ export function createInlineContentSpec<
         ) as any as InlineContentFromConfig<T, S> // TODO: fix cast
       );
 
-      return output;
+      return {
+        dom: addInlineContentAttributes(
+          output.dom,
+          inlineContentConfig.type,
+          node.attrs as Props<T["propSchema"]>,
+          inlineContentConfig.propSchema
+        ),
+        contentDOM: output.contentDOM,
+      };
     },
   });
 

packages/core/src/extensions/Blocks/api/inlineContent/internal.ts

@@ -1,12 +1,45 @@
 import { Node } from "@tiptap/core";
-import { PropSchema } from "../blocks/types";
+import { camelToDataKebab } from "../blocks/internal";
+import { Props, PropSchema } from "../blocks/types";
 import {
   InlineContentConfig,
   InlineContentImplementation,
   InlineContentSchemaFromSpecs,
   InlineContentSpec,
   InlineContentSpecs,
 } from "./types";
+import { mergeCSSClasses } from "../../../../shared/utils";
+
+// Function that adds necessary classes and attributes to the `dom` element
+// returned from a custom inline content's 'render' function, to ensure no data
+// is lost on internal copy & paste.
+export function addInlineContentAttributes<
+  IType extends string,
+  PSchema extends PropSchema
+>(
+  element: HTMLElement,
+  inlineContentType: IType,
+  inlineContentProps: Props<PSchema>,
+  propSchema: PSchema
+): HTMLElement {
+  // Sets inline content section class
+  element.className = mergeCSSClasses(
+    "bn-inline-content-section",
+    element.className
+  );
+  // Sets content type attribute
+  element.setAttribute("data-inline-content-type", inlineContentType);
+  // Adds props as HTML attributes in kebab-case with "data-" prefix. Skips props
+  // set to their default values.
+  Object.entries(inlineContentProps)
+    .filter(([prop, value]) => value !== propSchema[prop].default)
+    .map(([prop, value]) => {
+      return [camelToDataKebab(prop), value];
+    })
+    .forEach(([prop, value]) => element.setAttribute(prop, value));
+
+  return element;
+}
 
 // This helper function helps to instantiate a InlineContentSpec with a
 // config and implementation that conform to the type of Config

packages/core/src/extensions/Blocks/api/styles/createSpec.ts

@@ -1,6 +1,11 @@
 import { Mark } from "@tiptap/core";
+import { ParseRule } from "@tiptap/pm/model";
 import { UnreachableCaseError } from "../../../../shared/utils";
-import { createInternalStyleSpec } from "./internal";
+import {
+  addStyleAttributes,
+  createInternalStyleSpec,
+  stylePropsToAttributes,
+} from "./internal";
 import { StyleConfig, StyleSpec } from "./types";
 
 export type CustomStyleImplementation<T extends StyleConfig> = {
@@ -17,6 +22,14 @@ export type CustomStyleImplementation<T extends StyleConfig> = {
 
 // TODO: support serialization
 
+export function getStyleParseRules(config: StyleConfig): ParseRule[] {
+  return [
+    {
+      tag: `.bn-style[data-style-type="${config.type}"]`,
+    },
+  ];
+}
+
 export function createStyleSpec<T extends StyleConfig>(
   styleConfig: T,
   styleImplementation: CustomStyleImplementation<T>
@@ -25,21 +38,11 @@ export function createStyleSpec<T extends StyleConfig>(
     name: styleConfig.type,
 
     addAttributes() {
-      if (styleConfig.propSchema === "boolean") {
-        return {};
-      }
-      return {
-        stringValue: {
-          default: undefined,
-          // TODO: parsing
+      return stylePropsToAttributes(styleConfig.propSchema);
+    },
 
-          // parseHTML: (element) =>
-          //   element.getAttribute(`data-${styleConfig.type}`),
-          // renderHTML: (attributes) => ({
-          //   [`data-${styleConfig.type}`]: attributes.stringValue,
-          // }),
-        },
-      };
+    parseHTML() {
+      return getStyleParseRules(styleConfig);
     },
 
     renderHTML({ mark }) {
@@ -58,7 +61,15 @@ export function createStyleSpec<T extends StyleConfig>(
       }
 
       // const renderResult = styleImplementation.render();
-      return renderResult;
+      return {
+        dom: addStyleAttributes(
+          renderResult.dom,
+          styleConfig.type,
+          mark.attrs.stringValue,
+          styleConfig.propSchema
+        ),
+        contentDOM: renderResult.contentDOM,
+      };
     },
   });