Skip to content
Svelte component for rendering block content
JavaScript HTML
Branch: prototype
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src added missing text html elements and fixed ol/ul bug Nov 4, 2019
.gitignore updated gitignore to include nested index.js Oct 25, 2019
LICENSE added license Oct 28, 2019
README.md Update README.md Nov 4, 2019
package.json 0.0.6 Nov 4, 2019
rollup.config.js including block-content-to-hyperscript as an external dependency Nov 4, 2019

README.md

svelte-portable-text

Note: this package is in active development, will likely change and may contain errors.

Install

At the moment, it seems the best approach is to install @sanity/block-content-to-hyperscript alongside this component.

Installing Svelte components as a devDependency seems to address this issue.

npm install @movingbrands/svelte-portable-text @sanity/block-content-to-hyperscript --save-dev

Usage example

<script>
  import BlockContent from "@movingbrands/svelte-portable-text";
  
  import Image from "./Image";
  import Link from "./Link";

  export let content;
  export const customSerializers = {
    types: {
      image: props => {
        return {
          component: Image,
          childNodes: props.children,
          props: {
            url: props.node.url
          }
        };
      }
    },
    marks: {
      link: props => {
        return {
          component: Link,
          childNodes: props.children,
          props: props.mark
        };
      }
    }
  };
  </script>

  <BlockContent blocks={content} serializers={customSerializers} />

Consuming components

With Svelte apps (recommended approach)

This package.json has a "svelte" field pointing to src/index.svelte, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte").

Apps which aren't using Svelte elsewhere

npm run build will bundle your component's source code into a plain JavaScript module (index.mjs) and a UMD script (index.js).

You can’t perform that action at this time.