### Install Dependencies and Run Playground Source: https://github.com/portabletext/editor/blob/main/apps/playground/README.md Use these commands to install project dependencies, build the project, and start the local development server. ```sh pnpm install ``` ```sh pnpm build ``` ```sh pnpm dev ``` -------------------------------- ### Install @portabletext/schema Source: https://github.com/portabletext/editor/blob/main/packages/schema/README.md Install the library using npm. ```bash npm install @portabletext/schema ``` -------------------------------- ### Install @portabletext/keyboard-shortcuts Source: https://github.com/portabletext/editor/blob/main/packages/keyboard-shortcuts/README.md Install the library using npm. ```bash npm install @portabletext/keyboard-shortcuts ``` -------------------------------- ### Install @portabletext/html Source: https://github.com/portabletext/editor/blob/main/packages/html/README.md Install the package using npm. ```bash npm install @portabletext/html ``` -------------------------------- ### Install @portabletext/sanity-bridge Source: https://github.com/portabletext/editor/blob/main/packages/sanity-bridge/README.md Install the library using npm. ```bash npm install @portabletext/sanity-bridge ``` -------------------------------- ### Install @portabletext/toolbar Source: https://github.com/portabletext/editor/blob/main/packages/toolbar/README.md Install the @portabletext/toolbar package using npm. ```bash npm install @portabletext/toolbar ``` -------------------------------- ### Install Portable Text to HTML Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text to HTML serializer using npm. ```bash npm install @portabletext/to-html ``` -------------------------------- ### Install @portabletext/patches Source: https://github.com/portabletext/editor/blob/main/packages/patches/README.md Install the package using npm. ```bash npm install @portabletext/patches ``` -------------------------------- ### Install Portable Text Markdown Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text to Markdown serializer using npm. ```bash npm install @portabletext/markdown ``` -------------------------------- ### Start Sanity Development Server Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word.html Command to start the development server for your Sanity application. ```bash npx sanity@latest start ``` -------------------------------- ### Initialize Sanity App Quickstart Template Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word.html Command to initialize a new Sanity project with the app-quickstart template. ```bash npx sanity@latest init --template app-quickstart ``` -------------------------------- ### Install racejar Source: https://github.com/portabletext/editor/blob/main/packages/racejar/README.md Install racejar as a development dependency using pnpm. ```sh pnpm add --save-dev racejar ``` -------------------------------- ### Install Portable Text Vue Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text serializer for Vue using npm. ```bash npm install @portabletext/vue ``` -------------------------------- ### Install Portable Text React Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text serializer for React using npm. ```bash npm install @portabletext/react ``` -------------------------------- ### Node.js HTML Parsing Setup Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/conversion/html-to-portable-text.mdx In Node.js environments, you must provide a `parseHtml` function for HTML parsing. This example shows how to configure options with `JSDOM`. ```typescript import {JSDOM} from 'jsdom' // Pass to either package const options = { parseHtml: (html) => new JSDOM(html).window.document, } ``` -------------------------------- ### Install Astro Portable Text Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text integration for Astro using npm. ```bash npm install astro-portabletext ``` -------------------------------- ### Install Portable Text Editor Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/editor/getting-started.mdx Use this command to install the Portable Text Editor package in your project. ```bash npm install @portabletext/editor # or yarn add @portabletext/editor # or pnpm add @portabletext/editor ``` -------------------------------- ### Example: Create Bold Shortcut Source: https://github.com/portabletext/editor/blob/main/packages/keyboard-shortcuts/README.md Demonstrates creating a 'bold' shortcut with different key combinations for default (Ctrl+B) and Apple (⌘+B) platforms. ```typescript import {createKeyboardShortcut} from '@portabletext/keyboard-shortcuts' const boldShortcut = createKeyboardShortcut({ default: [ { key: 'B', ctrl: true, meta: false, alt: false, shift: false, }, ], apple: [ { key: 'B', ctrl: false, meta: true, alt: false, shift: false, }, ], }) // On non-Apple platforms: Ctrl+B // On Apple platforms: ⌘+B ``` -------------------------------- ### Install @portabletext/svelte Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/svelte.mdx Install the @portabletext/svelte package as a dev dependency. Svelte packages are compiled at build time. ```bash npm install --save-dev @portabletext/svelte ``` -------------------------------- ### Ordered List Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Demonstrates an ordered list with nested sub-lists. ```markdown 1. First step: Parse the markdown 2. Second step: Generate tokens 3. Third step: Transform to Portable Text 1. Map block types 2. Handle inline formatting 3. Preserve structure ``` -------------------------------- ### Unordered List Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md An example of an unordered list with various formatting and nesting levels. ```markdown - **Bold item** in a list - _Italic item_ with [a link](https://example.com) - Item with `inline code` - Nested item one - Nested item two - Even deeper nesting - Back to top level ``` -------------------------------- ### PasteLinkPlugin Usage Example Source: https://github.com/portabletext/editor/blob/main/packages/plugin-paste-link/README.md Example of how to import and use the PasteLinkPlugin within an EditorProvider, including basic configuration. ```APIDOC ## Usage Import the `PasteLinkPlugin` React component and place it inside the `EditorProvider`: ```tsx import { defineSchema, EditorProvider, PortableTextEditable, } from '@portabletext/editor' import {PasteLinkPlugin} from '@portabletext/plugin-paste-link' const schemaDefinition = defineSchema({ annotations: [{name: 'link', fields: [{name: 'href', type: 'string'}]}], }) function App() { return ( ) } ``` By default, the plugin looks for a `link` annotation with an `href` field of type `string`. ``` -------------------------------- ### Basic Gherkin Test Example Source: https://github.com/portabletext/editor/blob/main/packages/racejar/README.md A complete example demonstrating how to define a Gherkin feature, steps, and parameter types, and run it using `racejar` with Vitest. ```typescript import {Given, Then, When} from 'racejar' import {Feature} from 'racejar/vitest' import {expect} from 'vitest' function greet(name: string) { return `Hello, ${name}!` } type Context = { person: string greeting: string } Feature({ featureText: ` Feature: Greeting Scenario: Greeting a person Given the person "Herman" When greeting the person Then the greeting is "Hello, Herman!"`, stepDefinitions: [ Given('the person {string}', (context: Context, person: string) => { context.person = person }), When('greeting the person', (context: Context) => { context.greeting = greet(context.person) }), Then('the greeting is {string}', (context: Context, greeting: string) => { expect(context.greeting).toBe(greeting) }), ], }) ``` -------------------------------- ### Gherkin Feature File Example Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/editor/guides/testing-behaviors.mdx Define editor behaviors using Gherkin's Given/When/Then syntax. This example demonstrates auto-capitalization after a period and space, and verifies undo functionality. ```gherkin # my-behavior.feature Feature: Auto-capitalize after period Scenario: Capitalizes first letter after period and space Given the text "hello." When the editor is focused And the caret is put after "hello." And " " is typed And "w" is typed Then the text is "hello. W" Scenario: Does not capitalize mid-sentence Given the text "hello" When the editor is focused And the caret is put after "hello" And " w" is typed Then the text is "hello w" Scenario: Undo restores original text Given the text "hello." When the editor is focused And the caret is put after "hello." And " " is typed And "w" is typed Then the text is "hello. W" When undo is performed Then the text is "hello. w" ``` -------------------------------- ### Start Dev Server on Different Port Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word.html Command to start the development server on a different port if the default port (3333) is in use. ```bash npx sanity@latest start --port 3334 ``` -------------------------------- ### Inline Math Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.advanced.out.md Demonstrates inline math notation using LaTeX syntax, enclosed in single dollar signs. ```latex \omega = d\phi / dt ``` -------------------------------- ### Install Portable Text Svelte Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/index.mdx Install the Portable Text serializer for Svelte using npm. This requires Svelte 5+. ```bash npm install @portabletext/svelte -D ``` -------------------------------- ### Install @portabletext/plugin-paste-link Source: https://github.com/portabletext/editor/blob/main/packages/plugin-paste-link/README.md Install the paste link plugin using npm. This command adds the package to your project's dependencies. ```sh npm install @portabletext/plugin-paste-link ``` -------------------------------- ### Develop Pilcrow App Source: https://github.com/portabletext/editor/blob/main/apps/pilcrow/README.md Run this command to start the development server for the Pilcrow app. Ensure you are in the correct project directory. ```bash pnpm --filter pilcrow dev ``` -------------------------------- ### Install Portable Text Editor Source: https://github.com/portabletext/editor/blob/main/packages/editor/README.md Add the Portable Text Editor library to your project using npm, pnpm, or yarn. ```sh # npm npm i @portabletext/editor # pnpm pnpm add @portabletext/editor # yarn yarn add @portabletext/editor ``` -------------------------------- ### Build and Run Editor Development Mode Source: https://github.com/portabletext/editor/blob/main/packages/editor/README.md Build the editor package and start the development server. These commands are essential for local development and testing. ```bash pnpm build:editor ``` ```bash pnpm dev:editor ``` -------------------------------- ### Autolink Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Demonstrates autolinks for URLs and email addresses, which are automatically converted into clickable links. ```markdown Check out these autolinks: and for quick linking. ``` -------------------------------- ### Project Commands Source: https://github.com/portabletext/editor/blob/main/apps/docs/README.md Lists common npm commands for managing the Astro project, including installation, development server, building, and previewing. ```bash npm install ``` ```bash npm run dev ``` ```bash npm run build ``` ```bash npm run preview ``` ```bash npm run astro ... ``` ```bash npm run astro -- --help ``` -------------------------------- ### Display Math Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.advanced.out.md Shows display math notation using LaTeX syntax, enclosed in double dollar signs for block-level equations. ```latex I = \int \rho R^{2} dV ``` -------------------------------- ### Links with Formatting Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Demonstrates links that incorporate various text formatting styles like bold, italic, and code. ```markdown Here's a [**bold link**](https://example.com) and an [_italic link_](https://example.com) and even a [`code link`](https://example.com). ``` -------------------------------- ### Nested Blockquote Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Illustrates nested blockquotes, demonstrating how to create quotes within quotes. ```markdown > This is the outer quote > > > And this is nested deeper > > > > With multiple paragraphs ``` -------------------------------- ### HTML Passthrough Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Illustrates how raw HTML blocks and inline HTML are preserved when converting markdown to Portable Text. ```html

This is raw HTML that gets preserved

Inline HTML like highlighted text can be handled too. ``` -------------------------------- ### Gherkin Feature File Example Source: https://github.com/portabletext/editor/blob/main/packages/racejar/README.md A sample Gherkin feature file demonstrating a scenario for testing text annotations and selection in an editor. ```gherkin // annotations.feature Feature: Annotations Background: Given one editor And a global keymap Scenario: Selection after adding an annotation Given the text "foo bar baz" When "bar" is selected And "link" "l1" is toggled Then "bar" has marks "l1" And "bar" is selected ``` -------------------------------- ### Render HTML String Example Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/index.mdx This snippet shows the HTML string representation of a simple text with a link and bold formatting. ```html

Read the documentation for Portable Text.

``` -------------------------------- ### HTML String Example Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/why-portable-text.mdx Illustrates a basic HTML string structure. This format requires parsing for rendering on different platforms or for data extraction. ```html

Read the documentation for details.

``` -------------------------------- ### Example Markdown Output Source: https://github.com/portabletext/editor/blob/main/packages/markdown/README.md The resulting Markdown string from the Portable Text to Markdown conversion, demonstrating headings, basic formatting, links, and lists. ```markdown # Hello World This is **bold** and _italic_ text with a [link](https://example.com). - First item - Second item ``` -------------------------------- ### Line Break Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Shows how to create hard line breaks within a paragraph using two spaces at the end of a line. ```markdown This is a line with a hard break that continues on the next line but stays in the same paragraph. Another paragraph with a break and more content. ``` -------------------------------- ### Example: Check Keyboard Shortcut Match Source: https://github.com/portabletext/editor/blob/main/packages/keyboard-shortcuts/README.md Illustrates how to use the `isKeyboardShortcut` function to check if a given keyboard event matches a specific shortcut definition. ```typescript import {isKeyboardShortcut} from '@portabletext/keyboard-shortcuts' const definition = { key: 'B', ctrl: true, meta: false, alt: false, shift: false, } const isMatch = isKeyboardShortcut(definition, keyboardEvent) ``` -------------------------------- ### Develop Racetrack App Source: https://github.com/portabletext/editor/blob/main/apps/racetrack/README.md Run the Racetrack development server using pnpm. This command starts the application in development mode, enabling hot-reloading and other development-specific features. ```bash pnpm --filter racetrack dev ``` -------------------------------- ### Navigate to the project directory Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word-online.windows.html Change into your newly created project directory to begin configuration and development. ```bash cd my-cool-project ``` -------------------------------- ### Simple Code Block Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.out.md Demonstrates a basic indented code block. This format is useful for simple code snippets without syntax highlighting. ```plaintext const simple = "code block"; console.log(simple); ``` -------------------------------- ### Integrate Emojilib with createMatchEmojis Source: https://github.com/portabletext/editor/blob/main/packages/plugin-emoji-picker/README.md To use a comprehensive emoji library, install `emojilib` and pass its contents directly to `createMatchEmojis` for a rich set of emojis and keywords. ```tsx import emojilib from 'emojilib' const matchEmojis = createMatchEmojis({ emojis: emojilib, }) ``` -------------------------------- ### Configure Emoji Picker with useEmojiPicker Hook Source: https://github.com/portabletext/editor/blob/main/packages/plugin-emoji-picker/README.md Use the `useEmojiPicker` hook to manage emoji picker state and logic. This example shows basic setup with a predefined emoji list and a simple React component for rendering the picker UI. ```tsx import { createMatchEmojis, useEmojiPicker, } from '@portabletext/plugin-emoji-picker' const matchEmojis = createMatchEmojis({ emojis: { '😂': ['joy', 'laugh'], '❤️': ['heart', 'love'], '🎉': ['party', 'celebrate'], '👍': ['thumbsup', 'yes', 'approve'], '🔥': ['fire', 'hot', 'lit'], }, }) function EmojiPicker() { const {keyword, matches, selectedIndex, onNavigateTo, onSelect, onDismiss} = useEmojiPicker({matchEmojis}) if (keyword.length < 1) { return null } return (
{matches.length === 0 ? (
No emojis found for "{keyword}"
) : (
    {matches.map((match, index) => (
  • onNavigateTo(index)} onClick={onSelect} className={selectedIndex === index ? 'selected' : ''} > {match.emoji} {match.keyword}
    • ))}
)}
) } ``` -------------------------------- ### Basic Toolbar Example Source: https://github.com/portabletext/editor/blob/main/packages/toolbar/README.md Demonstrates how to set up and render a basic toolbar with decorator and annotation buttons, and history controls. It shows schema extension for icons and shortcuts, and usage of provided hooks. ```tsx import {bold, link} from '@portabletext/keyboard-shortcuts' import { useDecoratorButton, useHistoryButtons, useToolbarSchema, type ExtendAnnotationSchemaType, type ExtendDecoratorSchemaType, } from '@portabletext/toolbar' /** * 1. Define extensions for your schema types */ const extendDecorator: ExtendDecoratorSchemaType = (decorator) => { if (decorator.name === 'strong') { return { ...decorator, icon: BoldIcon, shortcut: bold, } } return decorator } const extendAnnotation: ExtendAnnotationSchemaType = (annotation) => { if (annotation.name === 'link') { return { ...annotation, icon: LinkIcon, defaultValues: { href: 'https://example.com', }, shortcut: link, } } return annotation } /** * 2. Create a Toolbar plugin that can be used inside an `EditorProvider`. */ function ToolbarPlugin() { /** * 3. Obtain a `ToolbarSchema` by extending the `EditorSchema`. */ const toolbarSchema = useToolbarSchema({ extendDecorator, extendAnnotation, // extendStyle, // extendList, // extendBlockObject, // extendInlineObject, }) /** * 4. Render the toolbar */ return (
{toolbarSchema.decorators?.map((decorator) => ( ))} {toolbarSchema.annotations?.map((annotation) => { /** ... */ })}
) } function DecoratorButton(props: {schemaType: ToolbarDecoratorSchemaType}) { /** * 5. Use the provided hooks to manage state, set up keyboard shortcuts and * more. */ const decoratorButton = useDecoratorButton(props) return ( ) } function HistoryButtons() { const historyButtons = useHistoryButtons() return ( <> ) } ``` -------------------------------- ### Clone Repository and Set Up Virtual Environment Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/snapshot-tests/whitespaceInPreTags/input.html Follow these commands to clone the project repository, navigate into the client directory, and create a new Python virtual environment. ```bash git clone ... ``` ```bash cd ... ``` ```bash python3 -m venv ... ``` -------------------------------- ### Initialize a new App SDK project Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word-online.windows.html Use this command to scaffold a new Sanity App SDK project. Follow the prompts to configure your organization, project location, and language. ```bash npx sanity@latest init --template app-quickstart ``` -------------------------------- ### App SDK Project Initialization Success Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.gdocs.html This message confirms that your custom app has been successfully scaffolded. Navigate to the project directory to continue. ```bash ✅ Success! Your custom app has been scaffolded.(cd my-cool-project to navigate to your new project directory) ``` -------------------------------- ### Create a Minimal Toolbar Component Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/editor/getting-started.mdx This example demonstrates a basic toolbar component using `useToolbarSchema` to fetch schema definitions and map them to `DecoratorButton` and `StyleButton` components. It requires importing necessary hooks and types from `@portabletext/toolbar` and `@portabletext/keyboard-shortcuts`. ```tsx // App.tsx // ... import {bold} from '@portabletext/keyboard-shortcuts' import { useDecoratorButton, useStyleSelector, useToolbarSchema, type ExtendDecoratorSchemaType, type ExtendStyleSchemaType, type ToolbarDecoratorSchemaType, type ToolbarStyleSchemaType, } from '@portabletext/toolbar' function Toolbar() { // useToolbarSchema provides access to the PTE schema // optionally, pass in updated schemas to override the default const toolbarSchema = useToolbarSchema({ extendDecorator, extendStyle, }) return (
{toolbarSchema.decorators?.map((decorator) => ( ))} {toolbarSchema.styles?.map((style) => ( ))}
) } // Extend the schema with icons, titles, and keyboard shortcuts const extendStyle: ExtendStyleSchemaType = (style) => { // Apply updates to the schema, if needed if (style.name === 'h1') { return { ...style, title: 'Title', } } // ...repeat for each style type, or return the original style return style } const extendDecorator: ExtendDecoratorSchemaType = (decorator) => { if (decorator.name === 'strong') { return { ...decorator, // Optional: add a react component as an icon and unset the title icon: () => B, // Optional: connect to a keyboard shortcut from the keyboard-shortcuts library shortcut: bold, title: '', } } // ...repeat for each decorator type, or return the original decorator return decorator } // Create a button for each decorator type const DecoratorButton = (props: {schemaType: ToolbarDecoratorSchemaType}) => { const decoratorButton = useDecoratorButton(props) return ( ) } function StyleButton(props: {schemaType: ToolbarStyleSchemaType}) { const styleSelector = useStyleSelector({schemaTypes: [props.schemaType]}) return ( ) } // ... and so on for each schema type, or create a generic button ``` -------------------------------- ### Build Pilcrow App Source: https://github.com/portabletext/editor/blob/main/apps/pilcrow/README.md Execute this command to build the Pilcrow app for static hosting. The output will be placed in the `apps/pilcrow/dist/` directory. ```bash pnpm --filter pilcrow build ``` -------------------------------- ### Complex List Item Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md An example of a complex list item containing multiple formatting types, a link with a title, and an inline image, along with nested items. ```markdown - Item with **bold**, _italic_, and `code` - Item with a [link to **bold** content](https://example.com 'Link Title') - Item with an inline image ![small icon](https://example.com/icon.png) in the middle - Nested **bold item** with _italic_ and `code` - Another nested item ``` -------------------------------- ### Define Slash Command Picker Source: https://github.com/portabletext/editor/blob/main/packages/plugin-typeahead-picker/README.md Configure a typeahead picker to recognize slash commands at the start of a block. The `trigger` uses a regex anchored to the start of the block (`^`). The `onSelect` handler maps commands to specific actions like toggling styles or inserting blocks. ```typescript const commandPicker = defineTypeaheadPicker({ trigger: /\^\/", // ^ anchors to start of block keyword: /\w*/, getMatches: ({keyword}) => searchCommands(keyword), onSelect: [ ({event}) => { switch (event.match.command) { case 'h1': case 'h2': case 'h3': return [ raise({type: 'delete', at: event.patternSelection}), raise({type: 'style.toggle', style: event.match.command}), ] case 'image': return [ raise({type: 'delete', at: event.patternSelection}), raise({type: 'insert.block', block: {_type: 'image'}}), ] default: return [raise({type: 'delete', at: event.patternSelection})] } }, ], }) ``` -------------------------------- ### Heading Levels Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Shows all six levels of markdown headings, from H1 to H6. ```markdown # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 ``` -------------------------------- ### Set up a Portable Text Editor Test Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/editor/guides/testing-behaviors.mdx This test file connects a feature file to the editor using Racejar and Vitest. It sets up the editor with a custom plugin and schema definition before running the feature tests. ```tsx import { defineSchema } from '@portabletext/editor' import {parameterTypes} from '@portabletext/editor/test' import { createTestEditor, stepDefinitions, type Context, } from '@portabletext/editor/test/vitest' import {Before} from 'racejar' import {Feature} from 'racejar/vitest' import {MyBehaviorPlugin} from './my-behavior-plugin' import myFeature from './my-behavior.feature?raw' Feature({ hooks: [ Before(async (context: Context) => { const {editor, locator} = await createTestEditor({ children: , schemaDefinition: defineSchema({ decorators: [{name: 'strong'}, {name: 'em'}], annotations: [{name: 'link'}], }), }) context.locator = locator context.editor = editor }), ], featureText: myFeature, stepDefinitions, parameterTypes, }) ``` -------------------------------- ### Build Racetrack App Source: https://github.com/portabletext/editor/blob/main/apps/racetrack/README.md Build the Racetrack application for production using pnpm. The output is placed in `apps/racetrack/dist/` and is optimized for static hosting. ```bash pnpm --filter racetrack build ``` -------------------------------- ### Blockquote Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Shows a basic blockquote. Nested blockquotes are also supported for hierarchical quoting. ```markdown > Markdown is a lightweight markup language for creating formatted text. > > It was created by John Gruber in 2004. ``` -------------------------------- ### Import defineBehavior Helper Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/editor/guides/create-behavior.mdx Import the `defineBehavior` function from the `@portabletext/editor/behaviors` module to start creating custom behaviors. ```tsx import {defineBehavior} from '@portabletext/editor/behaviors' ``` -------------------------------- ### Horizontal Rule Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Demonstrates the use of horizontal rules (---) to visually separate content sections. ```markdown --- They create visual breaks in the content. --- ``` -------------------------------- ### Deploy your Sanity app Source: https://github.com/portabletext/editor/blob/main/packages/html/src/tests/html-to-portable-text/app-sdk-quickstart-guide.word-online.windows.html Execute this command when your app is ready to be deployed. It will be made available in your organization's dashboard. ```bash npx sanity@latest deploy ``` -------------------------------- ### Simple Code Block Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.md Demonstrates an indented code block. This format is recognized by many markdown parsers. ```javascript const simple = "code block"; console.log(simple); ``` -------------------------------- ### Delimited Code Block Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.advanced.out.md A delimited code block for easier copying and pasting. No specific language highlighting. ```plaintext define foobar() { print "Welcome to flavor country!"; } ``` -------------------------------- ### Basic Code Block Example Source: https://github.com/portabletext/editor/blob/main/packages/markdown/src/example-document.advanced.out.md A simple code block demonstrating basic syntax. Indented with 4 spaces. ```plaintext # Let me re-iterate ... for i in 1 .. 10 { do-something(i) } ``` -------------------------------- ### Basic Usage Source: https://github.com/portabletext/editor/blob/main/apps/docs/src/content/docs/rendering/html.mdx Demonstrates the fundamental way to use the `toHTML` function with Portable Text blocks. ```APIDOC ## Basic Usage `toHTML` takes an array of Portable Text blocks and an options object. It returns an HTML string. ```js import {toHTML} from '@portabletext/to-html' const html = toHTML(portableTextBlocks, { components: { /* optional: override or extend default components */ }, }) ``` The `components` option is where you register renderers for custom types and marks. Without it, `toHTML` uses the built-in defaults for standard block styles, lists, and decorators. ```