coreyward/react-portable-text

Rendering internalLink and footnote

oilsinwater opened this issue · 2 comments

Hi, I apologize if this is a weird/unclear/compacted/lazy question but in all honesty I've been stuck on this for about two weeks trying to use the different versions of portable text for react (block-to-content, react/portabletext, and this package).

  1. No matter what I do using react-portable-text I keep getting an error for an internalLink. I tried starting with "marks?.blank" and a conditional statement like I saw in a previous issue here, but doesn't work either.

Screen Shot 2022-08-13 at 12 46 49 PM

  1. And I've been trying different ways to also rendering an annotation/footnote but the browser/build simply doesn't recognize it. Here's entry from my portableText.js schema:
 {
            name: "footnote",
            type: "object",
            title: "Footnote",
            description: "Add a footnote to the selected text.",
            fields: [
              {
                name: "note",
                title: "Note",
                type: "simpleBlockContent",
              },
              {
                name: "URL",
                title: "URL",
                type: "url",
                validation: (Rule) =>
                  Rule.uri({
                    allowRelative: true,
                    scheme: ["https", "http"],
                  }),
              },
              {
                name: "author",
                title: "Author(s)",
                type: "string",
              },
              {
                name: "publisher",
                title: "Publisher",
                type: "string",
              },
              {
                name: "date",
                title: "Published at",
                type: "string",
              },
              {
                name: "image",
                title: "Image",
                type: "image",
                fields: [
                  {
                    title: "Caption",
                    name: "caption",
                    type: "string",
                    options: {
                      isHighlighted: true,
                    },
                  },
                  {
                    name: "alt",
                    type: "string",
                    title: "Alternative text",
                    description: "Important for SEO and accessiblity.",
                    options: {
                      isHighlighted: true,
                    },
                  },
                ],
              },
            ],
            blockEditor: {
              render: FootnoteRender,
            },
          },

How might you handle both internalLinks and a customType like the footnote annotation above in a serializer?

I need more information to be able to help. The code you shared for a schema doesn't include your block content (portable text), and your screenshot shows what appears to be use of another library (react-portable-text does not pass a marks prop to serializer components).

  1. What does the definition for your simpleBlockContent look like?
  2. What does your usage of <PortableText> (this library) look like?

Closing this out for now since this is unlikely to be a react-portable-text bug, but if you still need help feel free to comment and I'll see if I can help.