feat: add support for display text in links

package.json

@@ -68,7 +68,7 @@
   "resolutions": {
     "connected-next-router/react-redux": "8.0.7",
     "react-beautiful-dnd/react-redux": "8.0.7",
-    "@prismicio/types-internal": "2.5.0"
+    "@prismicio/types-internal": "2.7.0-alpha.1"
   },
   "workspaces": [
     "e2e-projects/next",

packages/slice-machine/package.json

@@ -42,14 +42,14 @@
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
-    "@prismicio/client": "7.6.0",
+    "@prismicio/client": "7.9.0-alpha.0",
     "@prismicio/editor-fields": "0.4.40",
     "@prismicio/editor-support": "0.4.40",
     "@prismicio/editor-ui": "0.4.40",
     "@prismicio/mock": "0.3.3",
     "@prismicio/mocks": "2.3.3",
     "@prismicio/simulator": "0.1.4",
-    "@prismicio/types-internal": "2.5.0",
+    "@prismicio/types-internal": "2.7.0-alpha.1",
     "@radix-ui/react-hover-card": "1.0.6",
     "@radix-ui/react-tabs": "1.0.4",
     "@reach/menu-button": "0.18.0",

packages/slice-machine/src/legacy/lib/models/common/widgets/ContentRelationship/Form.tsx

@@ -11,6 +11,7 @@ import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { selectAllCustomTypes } from "@/modules/availableCustomTypes";
 
 import { hasLocal } from "../../ModelData";
+import { DisplayTextCheckbox } from "../Link/components";
 
 const FormFields = {
   label: DefaultFields.label,
@@ -21,7 +22,12 @@ const FormFields = {
 };
 
 type FormProps = {
-  config: { label: string; select: string; customtypes?: string[] };
+  config: {
+    label: string;
+    select: string;
+    customtypes?: string[];
+    text?: { type: "Text" };
+  };
   id: string;
   // type: string; // TODO: this exists in the yup schema but this doesn't seem to be validated by formik
 };
@@ -48,6 +54,10 @@ const WidgetForm = ({
       })
     : null;
 
+  const {
+    config: { text },
+  } = formValues;
+
   return (
     <FlexGrid>
       {Object.entries(FormFields)
@@ -99,6 +109,7 @@ const WidgetForm = ({
           />
         </Box>
       </Col>
+      <DisplayTextCheckbox text={text} setFieldValue={setFieldValue} />
     </FlexGrid>
   );
 };

packages/slice-machine/src/legacy/lib/models/common/widgets/ContentRelationship/index.ts

@@ -18,7 +18,10 @@ import Form, { FormFields } from "./Form";
         "customtypes": [
           "page"
         ],
-        "label": "relationship"
+        "label": "relationship",
+        "text": {
+          "type": "Text"
+        }
       }
     }
 */

packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx

@@ -4,6 +4,8 @@ import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { CheckBox } from "@/legacy/lib/forms/fields";
 
+import { DisplayTextCheckbox } from "./components";
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const FormFields = {
   ...DefaultFields,
@@ -12,7 +14,12 @@ const FormFields = {
 
 const Form = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const { initialValues, fields } = props;
+  const { initialValues, values: formValues, fields, setFieldValue } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const {
+    config: { text },
+  } = formValues;
 
   return (
     <FlexGrid>
@@ -32,6 +39,8 @@ const Form = (props) => {
           </Col>
         ))
       }
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
+      <DisplayTextCheckbox text={text} setFieldValue={setFieldValue} />
     </FlexGrid>
   );
 };

packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx

@@ -0,0 +1,66 @@
+import { Box, Icon, Tooltip } from "@prismicio/editor-ui";
+import React, { useEffect, useState } from "react";
+import { Checkbox, Flex, Label } from "theme-ui";
+
+import { Col } from "@/legacy/components/Flex";
+
+type DisplayTextModel = { type: string };
+
+interface DisplayTextCheckboxProps {
+  text?: DisplayTextModel;
+  setFieldValue: (
+    a: string,
+    b?: DisplayTextModel,
+    // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents, @typescript-eslint/no-explicit-any
+  ) => void | Promise<void | any>;
+}
+
+export function DisplayTextCheckbox(props: DisplayTextCheckboxProps) {
+  const { text, setFieldValue } = props;
+
+  const [allowDisplayText, setAllowDisplayText] = useState(Boolean(text));
+
+  useEffect(() => {
+    void setFieldValue(
+      "config.text",
+      allowDisplayText ? { type: "Text" } : undefined,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowDisplayText]);
+
+  return (
+    <Col>
+      <Flex
+        sx={{
+          mt: 2,
+          alignItems: "center",
+          height: "130%",
+        }}
+      >
+        <Label variant="label.border">
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            width="100%"
+          >
+            <Flex>
+              <Checkbox
+                checked={allowDisplayText}
+                onChange={() => setAllowDisplayText(!allowDisplayText)}
+              />
+              Allow display text
+            </Flex>
+            <Tooltip
+              content="Allow editors to customize the link display text"
+              align="end"
+              zIndexHack
+            >
+              <Icon name="alert" size="medium" color="grey11" />
+            </Tooltip>
+          </Box>
+        </Label>
+      </Flex>
+    </Col>
+  );
+}

packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts

@@ -11,7 +11,10 @@ import Form, { FormFields } from "./Form";
     "config": {
       "label": "link",
       "placeholder": "Could be a link to use case, press article, signup...",
-      "allowTargetBlank": true
+      "allowTargetBlank": true,
+      "text": {
+        "type": "Text"
+      }
     }
   }
  */
@@ -23,7 +26,10 @@ import Form, { FormFields } from "./Form";
       "select": "document",
       "customtypes": ["homepage"],
       "label": "contentrrrrr",
-      "placeholder": "dsfdsfsdf"
+      "placeholder": "dsfdsfsdf",
+      "text": {
+        "type": "Text"
+      }
     }
   }
   */
@@ -33,7 +39,10 @@ import Form, { FormFields } from "./Form";
     "config" : {
       "select" : "media",
       "label" : "tomedia",
-      "placeholder" : "qsdqsdqsd"
+      "placeholder" : "qsdqsdqsd",
+      "text": {
+        "type": "Text"
+      }
     }
   } */
 
@@ -70,6 +79,14 @@ export const linkConfigSchema = yup
     masks: yup.array(yup.string()).optional(),
     tags: yup.array(yup.string()).optional(),
     allowTargetBlank: yup.boolean().strict().optional(),
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    text: yup
+      .object()
+      .shape({
+        type: yup.string().matches(/^Text$/, { excludeEmptyString: true }),
+      })
+      .strict()
+      .optional(),
   })
   .required()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

packages/slice-machine/src/legacy/lib/models/common/widgets/LinkToMedia/Form.jsx

@@ -3,14 +3,21 @@ import WidgetFormField from "@/legacy/lib/builders/common/EditModal/Field";
 import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 
+import { DisplayTextCheckbox } from "../Link/components";
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 const FormFields = {
   ...DefaultFields,
 };
 
 const Form = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const { initialValues, fields } = props;
+  const { initialValues, values: formValues, fields, setFieldValue } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const {
+    config: { text },
+  } = formValues;
 
   return (
     <FlexGrid>
@@ -30,6 +37,8 @@ const Form = (props) => {
           </Col>
         ))
       }
+      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
+      <DisplayTextCheckbox text={text} setFieldValue={setFieldValue} />
     </FlexGrid>
   );
 };

yarn.lock

@@ -5978,12 +5978,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prismicio/client@npm:7.6.0, @prismicio/client@npm:^7.1.0, @prismicio/client@npm:^7.5.0, @prismicio/client@npm:^7.6.0":
-  version: 7.6.0
-  resolution: "@prismicio/client@npm:7.6.0"
+"@prismicio/client@npm:7.9.0-alpha.0":
+  version: 7.9.0-alpha.0
+  resolution: "@prismicio/client@npm:7.9.0-alpha.0"
   dependencies:
-    imgix-url-builder: ^0.0.4
-  checksum: 716d9d3f0d920c58d3af74a3558886a090dc12d7ec190761d296bcfb8beda1dd47806681eeebf6543f1fdb24c92411939554517d74c9ac3120c84755b2dd14ad
+    imgix-url-builder: ^0.0.5
+  checksum: ab970d7bcf7c876c4b22222828491709080823b8e03e7200ce26ed42f5b82e4fb5160338036f95deac0784b1205ae3674f8012903344466035d77d3848cc927a
   languageName: node
   linkType: hard
 
@@ -5997,6 +5997,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@prismicio/client@npm:^7.1.0, @prismicio/client@npm:^7.5.0, @prismicio/client@npm:^7.6.0":
+  version: 7.6.0
+  resolution: "@prismicio/client@npm:7.6.0"
+  dependencies:
+    imgix-url-builder: ^0.0.4
+  checksum: 716d9d3f0d920c58d3af74a3558886a090dc12d7ec190761d296bcfb8beda1dd47806681eeebf6543f1fdb24c92411939554517d74c9ac3120c84755b2dd14ad
+  languageName: node
+  linkType: hard
+
 "@prismicio/custom-types-client@npm:2.1.0":
   version: 2.1.0
   resolution: "@prismicio/custom-types-client@npm:2.1.0"
@@ -6300,9 +6309,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prismicio/types-internal@npm:2.5.0":
-  version: 2.5.0
-  resolution: "@prismicio/types-internal@npm:2.5.0"
+"@prismicio/types-internal@npm:2.7.0-alpha.1":
+  version: 2.7.0-alpha.1
+  resolution: "@prismicio/types-internal@npm:2.7.0-alpha.1"
   dependencies:
     monocle-ts: ^2.3.11
     newtype-ts: ^0.3.5
@@ -6313,7 +6322,7 @@ __metadata:
     io-ts: ^2.2.16
     io-ts-types: ^0.5.16
     uuid: ^9.0.0
-  checksum: 4cdb6f69cdeb1b197d125c281ffa79c86f4351ef355ebf1ee4d3b066eda49e5092288cccc00b8744f85fcaa30504e6be21fc3eee220a956840ae89e815b0f727
+  checksum: 7d642f2bb27c3ccc414298bad65ed7e0bf3ca1c788dcfcfafe6232d1c38f6a43a40af92bc06791728db4cd44e42e2caa46758266079d5de2b359fdc6a05a778e
   languageName: node
   linkType: hard
 
@@ -21083,6 +21092,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"imgix-url-builder@npm:^0.0.5":
+  version: 0.0.5
+  resolution: "imgix-url-builder@npm:0.0.5"
+  checksum: 5bdb9c8df1ef6eff7f53cb8f84dfc33c4862bb3542d557ee083a1cb213c3acb9464f0216ade00a5ed5d79403d58bb2169a537bb24e705ed05b8c3606902435d7
+  languageName: node
+  linkType: hard
+
 "immediate@npm:~3.0.5":
   version: 3.0.6
   resolution: "immediate@npm:3.0.6"
@@ -31424,14 +31440,14 @@ __metadata:
   dependencies:
     "@emotion/react": 11.11.1
     "@extractus/oembed-extractor": 3.1.8
-    "@prismicio/client": 7.6.0
+    "@prismicio/client": 7.9.0-alpha.0
     "@prismicio/editor-fields": 0.4.40
     "@prismicio/editor-support": 0.4.40
     "@prismicio/editor-ui": 0.4.40
     "@prismicio/mock": 0.3.3
     "@prismicio/mocks": 2.3.3
     "@prismicio/simulator": 0.1.4
-    "@prismicio/types-internal": 2.5.0
+    "@prismicio/types-internal": 2.7.0-alpha.1
     "@radix-ui/react-hover-card": 1.0.6
     "@radix-ui/react-tabs": 1.0.4
     "@radix-ui/react-visually-hidden": 1.0.3