Squidex
  • Welcome to Squidex
  • Getting Started
    • Squidex Cloud
    • Installation Instructions
      • Platforms
        • Install on Kubernetes
        • Install on AWS (Deprecated)
        • Install on AWS EC2 using Docker
        • Install on Azure
        • Install on Azure using ARM
        • Install on Google Cloud Platform (GCP)
        • Install on Docker
        • Install on Heroku
        • Install on IIS
        • Install on Render
        • Install on Vultr
      • Configuration
        • Deploying the Image Resizer Service
      • Troubleshooting and Support
        • Diagnose Runtime Issues
        • Restoring Deleted Apps
      • Install Identity (Deprecated)
      • External Identity Providers
        • Azure AD (OAuth) with Squidex
    • Contributing and Developing
      • Building
      • Developing
      • Extensions
        • Custom Rule Action
      • Contributing
      • Architecture
      • Translating
      • Squidex Docs Program
    • Roadmap
    • Quick Start Guides
      • Vue.js Blog with Squidex
      • React.js Blog with Squidex
      • Angular Blog with Squidex
  • Documentation
    • Introduction and Use Case
    • Concepts
      • Apps
      • Teams
      • Schemas
        • Field Rules
      • Content
        • Scheduled Publishing
      • Assets
        • Querying Assets
      • Localization
      • Migrations
      • Roles & Permissions
      • Rules
        • Publish an Event to Azure Queues using Rules
        • Populate Elasticsearch Index
      • Backups
      • Subscriptions
        • App Subscriptions v/s Team Subscriptions
      • Notifications
      • Dashboard
      • Workflows
    • Software Development Kits
      • TypeScript
      • .NET
        • Version v14 (and Earlier)
        • Version v15 (and Later)
      • PHP
      • Java
    • Developer Guides
      • API
        • Authentication
        • Postman
        • Queries
        • Assets
      • Automation Tools (CLI)
      • Scripting
        • Scripting Helper Methods
      • Embed Content
      • Custom Workflows
      • Custom Editors
      • Custom Sidebars
      • Preview Content
      • Rule Formatting
        • Simple
        • Script
        • Liquid
      • Tutorials
        • Building a Blog with Squidex and Next.js
  • Next
    • Squidex 3.0: API Compatibility
Powered by GitBook
On this page
  • Use Case
  • How to Use Embedded Contents
  • 1. Define Which Schemas Can be Embedded
  • 2. Add Links to Your String Field
  • 3. Use the GraphQL to Fetch References
  • 4. Use the References to Render the Embedded Content
  • Examples

Was this helpful?

  1. Documentation
  2. Developer Guides

Embed Content

Learn to Embed Content to Unstructured Text Such as Markdown or Rich-Text to Close the Gap Between Unstructured Content and Structured Content

PreviousScripting Helper MethodsNextCustom Workflows

Last updated 2 years ago

Was this helpful?

This documentation is based on the FoodCrunch use case. Please open the link below alongside this page to understand the examples.

Use Case

When a content author writes an article about new food startups or a review for a product sold by a startup, they might want to add startup information to the article. As the article is unstructured and just Markdown or rich-text, there are limited options mentioned below and none of them really work:

  1. The author can copy and paste the startup information to the article. When the information about the startup is updated at a later date, the article will contain outdated information.

  2. It's possible to use a special placeholder in the Markdown to reference the startup and ask the developers to resolve this reference in the UI.

  3. The developers can build a complex schema, for example with arrays to structure the article.

As none of the options are practical and convenient, this feature has been added.

How to Use Embedded Contents

To use this feature follow the steps below:

1. Define Which Schemas Can be Embedded

By editing the string field, you can decide which schemas can be embedded. Set Markdown (1) as the editor as it provides easy options to insert contents. Next, check Is embedding contents and assets (2) and select the schema.

In this example, we only allow embedding of contents from the startups schema.

2. Add Links to Your String Field

We can now use the Markdown editor to add links to other content items. To do so, click the Insert Contents (1) button in the editor.

The string field must be set to Markdown editor to see the insert contents button.

On the popup window, select the entries you wish to link by checking the box (2) next to them and click Link selected contents (3). Refer to the example screenshot below, here we are selecting a couple of startups:

The result should be two links appearing in the Markdown editor. An example screenshot is provided below for reference:

3. Use the GraphQL to Fetch References

Use the new GraphQL structure to fetch the text and references. When you allow embedding, the structure of the GraphQL response changes and you can fetch the text and the references with a single request:

4. Use the References to Render the Embedded Content

In the frontend both of the pieces of information can be used together to render the embedded content. In this sample code we've used react and react-markdown for this purpose. We can hook into the rendering process and render custom components for links.

At this point, it's important to check if the link is referencing a content item and if this content item is part of the references. Then it's possible to render the startup.

const startupsRegex = new RegExp(`${CONFIG.url}\\/api/content\\/${CONFIG.appName}\\/startups/(?<id>[a-z0-9\\-]+)`);

export const Markdown = ({ markdown, references }) => {
    return (
        <ReactMarkdown children={markdown} components={{
            a({ href, children }) {
                const match = startupsRegex.exec(href);

                if (match && match.groups) {
                    const referenceId = match.groups.id;
                    const reference = references?.find(x => x.id === referenceId);

                    if (reference) {
                        return <EmbeddableStartup startup={reference} />;
                    }
                } 
                
                return <a href={href} target='_blank' rel='noopener noreferrer'>{children}</a>;
            }
        }} />
    )
}s

As Markdown is unstructured a regular expression must be used for this. The result is an article with embedded startup information.

This feature gives the content authors a lot more flexibility and simplifies the schemas in question.

Examples

This sample does not use the FoodCrunch use case but can be used as a reference to understand how it is implemented.

A sample for this feature is available in GitHub: .

The template for the schemas and sample content is also available under:

https://github.com/Squidex/squidex-samples/tree/master/jscript/react/sample-hotels
https://github.com/Squidex/templates/tree/main/sample-hotels
Introduction and Use Case
Enabling embedding on a string field
Adding linked contents from another schema
Selecting linked contents from another schema
Linked content from another schema
Get the references with GraphQL