feat: Cartoon element (#286)

Co-authored-by: Parisa Tork <[email protected]>

demo/helpers.ts

@@ -2,7 +2,7 @@ import type { EditorState, Transaction } from "prosemirror-state";
 import { Plugin } from "prosemirror-state";
 import type { DemoSetMedia } from "../src/elements/demo-image/DemoImageElement";
 import type { Asset } from "../src/elements/helpers/defaultTransform";
-import type { SetMedia } from "../src/elements/image/ImageElement";
+import type { SetMedia } from "../src/elements/helpers/types/Media";
 
 type GridAsset = {
   mimeType: string;
@@ -17,7 +17,7 @@ type GridResponse = {
         metadata: {
           description: string;
           suppliersReference: string;
-          source: string;
+          credit: string;
           byline: string;
         };
         id: string;
@@ -80,7 +80,7 @@ const handleGridResponse = (setMedia: SetMedia) => ({ data }: GridResponse) => {
     suppliersReference: data.image.data.metadata.suppliersReference,
     caption: data.image.data.metadata.description,
     photographer: data.image.data.metadata.byline,
-    source: data.image.data.metadata.source,
+    source: data.image.data.metadata.credit,
   });
 };
 

demo/index.ts

@@ -10,6 +10,8 @@ import { schema as basicSchema, marks } from "prosemirror-schema-basic";
 import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import {
+  buildElementPlugin,
+  cartoonElement,
   codeElement,
   commentElement,
   createCalloutElement,
@@ -25,11 +27,10 @@ import {
   pullquoteElement,
   richlinkElement,
   tableElement,
+  transformElementOut,
   undefinedDropdownValue,
 } from "../src";
-import { transformElementOut } from "../src/elements/helpers/transform";
-import type { MediaPayload } from "../src/elements/image/ImageElement";
-import { buildElementPlugin } from "../src/plugin/element";
+import type { MediaPayload } from "../src/elements/helpers/types/Media";
 import {
   createParsers,
   docToHtml,
@@ -93,6 +94,7 @@ const tweetElementName = "tweet";
 const contentAtomName = "content-atom";
 const commentElementName = "comment";
 const campaignCalloutListElementName = "callout";
+const cartoonElementName = "cartoon";
 
 type Name =
   | typeof embedElementName
@@ -115,7 +117,8 @@ type Name =
   | typeof tweetElementName
   | typeof contentAtomName
   | typeof commentElementName
-  | typeof campaignCalloutListElementName;
+  | typeof campaignCalloutListElementName
+  | typeof cartoonElementName;
 
 const createCaptionPlugins = (schema: Schema) => exampleSetup({ schema });
 const mockThirdPartyTracking = (html: string) =>
@@ -208,6 +211,7 @@ const {
     vine: deprecatedElement,
     instagram: deprecatedElement,
     comment: commentElement,
+    cartoon: cartoonElement(onCropImage, createCaptionPlugins),
     tweet: createTweetElement({
       checkThirdPartyTracking: mockThirdPartyTracking,
       createCaptionPlugins,
@@ -418,7 +422,7 @@ const createEditor = (server: CollabServer) => {
   );
 
   const imageElementButton = document.createElement("button");
-  imageElementButton.innerHTML = "Image element";
+  imageElementButton.innerHTML = "Add Image";
   imageElementButton.id = imageElementName;
   imageElementButton.addEventListener("click", () => {
     const setMedia = (mediaPayload: MediaPayload) => {
@@ -443,12 +447,39 @@ const createEditor = (server: CollabServer) => {
     };
     onCropImage(setMedia);
   });
+  btnContainer.appendChild(imageElementButton);
+
+  const cartoonElementButton = document.createElement("button");
+  cartoonElementButton.innerHTML = "Add Cartoon";
+  cartoonElementButton.id = cartoonElementName;
+  cartoonElementButton.addEventListener("click", () => {
+    const setMedia = (mediaPayload: MediaPayload) => {
+      const {
+        photographer,
+        mediaId,
+        mediaApiUri,
+        assets,
+        suppliersReference,
+        caption,
+        source,
+      } = mediaPayload;
+      insertElement({
+        elementName: cartoonElementName,
+        values: {
+          desktopImages: [{ assets, suppliersReference, mediaId, mediaApiUri }],
+          credit: photographer,
+          source,
+          caption,
+        },
+      })(view.state, view.dispatch);
+    };
+    onCropImage(setMedia);
+  });
+  btnContainer.appendChild(cartoonElementButton);
 
   // Add a button allowing you to toggle the image role fields
-  btnContainer.appendChild(imageElementButton);
   const toggleImageFields = document.createElement("button");
   toggleImageFields.innerHTML = "Randomise image role options";
-
   toggleImageFields.addEventListener("click", () => {
     updateAdditionalRoleOptions(
       [...additionalRoleOptions].splice(Math.floor(Math.random() * 3), 2)

src/editorial-source-components/VerticalFieldLayout.tsx → src/editorial-source-components/FieldLayout.tsx

@@ -6,3 +6,10 @@ export const FieldLayoutVertical = styled.div`
   flex-direction: column;
   gap: ${space[3]}px;
 `;
+
+export const FieldLayoutHorizontal = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${space[3]}px;
+`;

src/editorial-source-components/SvgCrossRound.tsx

@@ -0,0 +1,17 @@
+import { iconSize } from "@guardian/src-foundations/size";
+import type { FunctionComponent } from "react";
+import React from "react";
+
+export const SvgCrossRound: FunctionComponent = () => (
+  <svg
+    width={iconSize["small"]}
+    viewBox="-3 -3 30 30"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm5.138-14.358-.782-.78-4.349 3.982-4.364-3.967-.782.78L10.85 12l-3.988 4.342.782.781 4.364-3.967 4.35 3.982.781-.78L13.165 12l3.973-4.358Z"
+    />
+  </svg>
+);