Image blocks

packages/core/src/extensions/Blocks/api/blockTypes.ts

@@ -42,11 +42,17 @@ export type HeadingBlock = BlockTemplate<
 
 export type ParagraphBlock = BlockTemplate<"paragraph", DefaultBlockProps>;
 
+export type ImageBlock = BlockTemplate<
+  "image",
+  DefaultBlockProps & { src: string }
+>;
+
 export type Block =
   | ParagraphBlock
   | HeadingBlock
   | BulletListItemBlock
-  | NumberedListItemBlock;
+  | NumberedListItemBlock
+  | ImageBlock;
 
 export type BlockIdentifier = string | Block;
 
@@ -87,4 +93,5 @@ export const blockProps: Record<Block["type"], Set<string>> = {
     ...globalProps,
   ]),
   bulletListItem: new Set<keyof BulletListItemBlock["props"]>([...globalProps]),
+  image: new Set<keyof ImageBlock["props"]>([...globalProps, "src" as const]),
 };

packages/core/src/extensions/Blocks/index.ts

@@ -5,12 +5,14 @@ import { ParagraphBlockContent } from "./nodes/BlockContent/ParagraphBlockConten
 import { HeadingBlockContent } from "./nodes/BlockContent/HeadingBlockContent/HeadingBlockContent";
 import { BulletListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent";
 import { NumberedListItemBlockContent } from "./nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent";
+import { ImageBlockContent } from "./nodes/BlockContent/ImageBlockContent/ImageBlockContent";
 
 export const blocks: any[] = [
   ParagraphBlockContent,
   HeadingBlockContent,
   BulletListItemBlockContent,
   NumberedListItemBlockContent,
+  ImageBlockContent,
   BlockContainer,
   BlockGroup,
   Node.create({

packages/core/src/extensions/Blocks/nodes/Block.module.css

@@ -206,6 +206,17 @@ NESTED BLOCKS
   content: "▪";
 }
 
+/* IMAGES*/
+[data-content-type="image"] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+[data-content-type="image"] > img {
+  display: block;
+  user-select: all;
+}
+
 /* PLACEHOLDERS*/
 
 .blockContent > :first-child {
@@ -244,6 +255,10 @@ NESTED BLOCKS
   content: "List";
 }
 
+.blockContent[data-content-type="image"].isEmpty > :first-child:before {
+  content: "Caption";
+}
+
 /* TEXT COLORS */
 [data-text-color="gray"] {
   color: #9b9a97;

packages/core/src/extensions/Blocks/nodes/BlockContent/ImageBlockContent/ImageBlockContent.ts

@@ -0,0 +1,88 @@
+import { Node } from "@tiptap/core";
+import styles from "../../Block.module.css";
+
+export const ImageBlockContent = Node.create({
+  name: "image",
+  group: "blockContent",
+  content: "inline*",
+
+  addAttributes() {
+    return {
+      src: {
+        default: undefined,
+        parseHTML: (element) => element.getAttribute("data-src"),
+        renderHTML: (attributes) => {
+          return {
+            "data-src": attributes.src,
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.getAttribute("data-content-type") === this.name) {
+            console.log("jhytfhtfhft");
+            console.log(element);
+            console.log(
+              (element.lastChild! as HTMLElement).getAttribute("data-src")
+            );
+            return {
+              src: element.getAttribute("data-src"),
+            };
+          }
+
+          return false;
+        },
+        node: "image",
+      },
+      {
+        tag: "img",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          if (element.tagName !== "IMG") {
+            return false;
+          }
+
+          return { src: element.getAttribute("src") };
+        },
+        node: "image",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const blockContent = document.createElement("div");
+    blockContent.className = styles.blockContent;
+    blockContent.setAttribute("data-content-type", this.name);
+
+    for (const [attr, value] of Object.entries(HTMLAttributes)) {
+      blockContent.setAttribute(attr, value);
+    }
+
+    // Caption element is before image element to simplify CSS.
+    // TODO: Make styles more robust to deal with custom blocks.
+    const editable = document.createElement("p");
+    blockContent.appendChild(editable);
+
+    const image = document.createElement("img");
+    image.setAttribute("src", HTMLAttributes["data-src"]);
+    blockContent.appendChild(image);
+
+    return {
+      dom: blockContent,
+      contentDOM: editable,
+    };
+  },
+});

packages/core/src/extensions/TextAlignment/TextAlignmentExtension.ts

@@ -19,7 +19,13 @@ export const TextAlignmentExtension = Extension.create({
       {
         // Attribute is applied to block content instead of container so that child blocks don't inherit the text
         // alignment styling.
-        types: ["paragraph", "heading", "bulletListItem", "numberedListItem"],
+        types: [
+          "paragraph",
+          "heading",
+          "bulletListItem",
+          "numberedListItem",
+          "image",
+        ],
         attributes: {
           textAlignment: {
             default: "left",