@haklex/rich-ext-embed

URL embed extension supporting Twitter, YouTube, Bilibili, CodeSandbox, and GitHub Gist.

Installation

pnpm add @haklex/rich-ext-embed

Peer Dependencies

| Package | Version | Required | | --- | --- | --- | | @lexical/react | ^0.41.0 | Yes | | lexical | ^0.41.0 | Yes | | react | >= 19 | Yes | | react-dom | >= 19 | Yes | | shiki | >= 3 | Optional |

Usage

Register nodes in your editor config

import { embedEditNodes } from '@haklex/rich-ext-embed'

const editorConfig = {
  nodes: [...embedEditNodes],
}

For static/read-only rendering:

import { embedNodes } from '@haklex/rich-ext-embed/static'

const staticConfig = {
  nodes: [...embedNodes],
}

Use the embed plugin

import { EmbedPlugin } from '@haklex/rich-ext-embed'

function EditorPlugins() {
  return <EmbedPlugin />
}

Insert embeds programmatically

import { INSERT_EMBED_COMMAND } from '@haklex/rich-ext-embed'

editor.dispatchCommand(INSERT_EMBED_COMMAND, { url: 'https://youtube.com/watch?v=...' })

Use renderers

import { EmbedLinkRenderer } from '@haklex/rich-ext-embed'
import { EmbedStaticRenderer } from '@haklex/rich-ext-embed/static'

Provide custom embed renderers

import { EmbedRendererProvider, useEmbedRenderers } from '@haklex/rich-ext-embed'

function App() {
  return (
    <EmbedRendererProvider>
      <Editor />
    </EmbedRendererProvider>
  )
}

URL matching utilities

import {
  matchEmbedUrl,
  isTweetUrl,
  isYoutubeUrl,
  isBilibiliVideoUrl,
  isCodesandboxUrl,
  isGistUrl,
  isGithubFilePreviewUrl,
  createSelfThinkingMatcher,
} from '@haklex/rich-ext-embed'

Import styles

import '@haklex/rich-ext-embed/style.css'

Exports

Nodes

• EmbedNode -- static (read-only) node
• EmbedEditNode -- edit node with interactive UI
• $createEmbedNode() / $isEmbedNode() -- Lexical helpers
• embedNodes -- array of static nodes for config registration
• embedEditNodes -- array of edit nodes for config registration

Renderers

• EmbedStaticRenderer -- static renderer
• EmbedLinkRenderer -- link-style embed renderer

Plugin

• EmbedPlugin -- editor plugin for embed insertion
• INSERT_EMBED_COMMAND -- Lexical command for programmatic insertion

Context

• EmbedRendererProvider -- context provider for custom embed renderers
• useEmbedRenderers -- hook to access embed renderer context

URL Matchers

• matchEmbedUrl -- match a URL against all supported embed types
• isTweetUrl, isYoutubeUrl, isBilibiliVideoUrl, isCodesandboxUrl, isGistUrl, isGithubFilePreviewUrl -- individual URL matchers
• createSelfThinkingMatcher -- factory for custom URL matchers

Types

• EmbedType -- enum of supported embed types

Sub-path Exports

| Path | Description | | --- | --- | | @haklex/rich-ext-embed | Full exports (edit + static) | | @haklex/rich-ext-embed/static | Static-only (no heavy UI deps) | | @haklex/rich-ext-embed/style.css | Stylesheet |

Part of Haklex

This package is part of the Haklex rich editor ecosystem.

License

MIT