facebook · etrepum · Apr 18, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
@@ -0,0 +1,13 @@
+# DEV Node State Style example
+
+Here we have an example that demonstrates how NodeState can be used with a
+DOMRenderExtension to override create and export behavior of any node.
+
+This example currently depends on unreleased features (v0.44+) and will not
+work outside of the monorepo.
+
+**Run it locally:** `pnpm i && pnpm run dev`
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/facebook/lexical/tree/main?file=dev-examples/dev-node-state-style/src/main.tsx&startCommand=pnpm%20run%20start:example%20dev-node-state-style)
+
+[![Open in StackBlitz-PR](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/etrepum/lexical/tree/claude%2fremove-dom-import-code-LGqib?file=dev-examples/dev-node-state-style/src/main.tsx&startCommand=pnpm%20run%20start:example%20dev-node-state-style)
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical Node State Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/src/main.tsx" type="module"></script>
+  </body>
+</html>
@@ -0,0 +1,43 @@
+{
+  "name": "@lexical/dev-node-state-style-example",
+  "private": true,
+  "version": "0.43.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite -c vite.config.monorepo.ts",
+    "monorepo:dev": "vite -c vite.config.monorepo.ts",
+    "build": "tsc && vite build -c vite.config.monorepo.ts",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@ark-ui/react": "^5.36.0",
+    "@lexical/clipboard": "workspace:*",
+    "@lexical/extension": "workspace:*",
+    "@lexical/history": "workspace:*",
+    "@lexical/html": "workspace:*",
+    "@lexical/react": "workspace:*",
+    "@lexical/rich-text": "workspace:*",
+    "@lexical/selection": "workspace:*",
+    "@lexical/utils": "workspace:*",
+    "@zag-js/combobox": "^1.40.0",
+    "@shikijs/langs": "^4.0.2",
+    "@shikijs/themes": "^4.0.2",
+    "inline-style-parser": "^0.2.7",
+    "lexical": "workspace:*",
+    "lucide-react": "^1.8.0",
+    "prettier": "^3.8.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "shiki": "^4.0.2"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "cross-env": "^10.1.0",
+    "csstype": "^3.2.3",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8"
+  }
+}
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {Tabs} from '@ark-ui/react/tabs';
+import {AutoFocusExtension} from '@lexical/extension';
+import {HistoryExtension} from '@lexical/history';
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import {LexicalExtensionComposer} from '@lexical/react/LexicalExtensionComposer';
+import {RichTextExtension} from '@lexical/rich-text';
+import {defineExtension, ParagraphNode, TextNode} from 'lexical';
+
+import ExampleTheme from './ExampleTheme';
+import {ShikiViewPlugin} from './plugins/ShikiViewPlugin';
+import {StyleViewPlugin} from './plugins/StyleViewPlugin';
+import {ToolbarPlugin} from './plugins/ToolbarPlugin';
+import {StyleStateExtension} from './styleState';
+
+const placeholder = 'Enter some rich text...';
+
+const editorExtension = defineExtension({
+  dependencies: [
+    RichTextExtension,
+    HistoryExtension,
+    AutoFocusExtension,
+    StyleStateExtension,
+  ],
+  name: '@lexical/examples/node-state-style',
+  namespace: 'NodeState Demo',
+  nodes: [ParagraphNode, TextNode],
+  onError(error: Error) {
+    throw error;
+  },
+  theme: ExampleTheme,
+});
+
+export default function App() {
+  return (
+    <LexicalExtensionComposer
+      extension={editorExtension}
+      contentEditable={null}>
+      <div className="editor-container">
+        <ToolbarPlugin />
+        <div className="editor-inner">
+          <ContentEditable
+            className="editor-input"
+            aria-placeholder={placeholder}
+            placeholder={
+              <div className="editor-placeholder">{placeholder}</div>
+            }
+          />
+        </div>
+      </div>
+      <Tabs.Root
+        lazyMount={true}
+        unmountOnExit={true}
+        defaultValue="style"
+        style={{margin: '0 10px'}}>
+        <Tabs.List
+          style={{display: 'flex', justifyContent: 'center', margin: '10px 0'}}>
+          <Tabs.Trigger value="style">Style Tree</Tabs.Trigger>
+          <Tabs.Trigger value="html">HTML</Tabs.Trigger>
+          <Tabs.Trigger value="json">JSON</Tabs.Trigger>
+          <Tabs.Indicator />
+        </Tabs.List>
+        <Tabs.Content value="style">
+          <StyleViewPlugin />
+        </Tabs.Content>
+        <Tabs.Content value="html">
+          <ShikiViewPlugin lang="html" />
+        </Tabs.Content>
+        <Tabs.Content value="json">
+          <ShikiViewPlugin lang="json" />
+        </Tabs.Content>
+      </Tabs.Root>
+    </LexicalExtensionComposer>
+  );
+}
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default {
+  code: 'editor-code',
+  heading: {
+    h1: 'editor-heading-h1',
+    h2: 'editor-heading-h2',
+    h3: 'editor-heading-h3',
+    h4: 'editor-heading-h4',
+    h5: 'editor-heading-h5',
+  },
+  image: 'editor-image',
+  link: 'editor-link',
+  list: {
+    listitem: 'editor-listitem',
+    nested: {
+      listitem: 'editor-nested-listitem',
+    },
+    ol: 'editor-list-ol',
+    ul: 'editor-list-ul',
+  },
+  paragraph: 'editor-paragraph',
+  placeholder: 'editor-placeholder',
+  quote: 'editor-quote',
+  text: {
+    bold: 'editor-text-bold',
+    code: 'editor-text-code',
+    hashtag: 'editor-text-hashtag',
+    italic: 'editor-text-italic',
+    overflowed: 'editor-text-overflowed',
+    strikethrough: 'editor-text-strikethrough',
+    underline: 'editor-text-underline',
+    underlineStrikethrough: 'editor-text-underlineStrikethrough',
+  },
+};
@@ -0,0 +1,5 @@
+Bootstrap Icons
+https://icons.getbootstrap.com
+
+Licensed under MIT license
+https://github.com/twbs/icons/blob/main/LICENSE.md
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './styles.css';
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App.tsx';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <div className="App">
+      <h1>NodeState Style Example</h1>
+      <App />
+    </div>
+  </React.StrictMode>,
+);
@@ -0,0 +1,5 @@
+.shiki-view-plugin > pre.shiki {
+  margin: 0;
+  padding: 10px;
+  white-space: pre-wrap;
+}
@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './ShikiViewPlugin.css';
+
+import {$generateHtmlFromNodes} from '@lexical/html';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {EditorState, LexicalEditor} from 'lexical';
+import * as prettier from 'prettier';
+import {useEffect, useMemo, useState} from 'react';
+import {createHighlighterCore} from 'shiki/core';
+import {createJavaScriptRegexEngine} from 'shiki/engine/javascript';
+
+const jsEngine = createJavaScriptRegexEngine({target: 'ES2024'});
+
+const shikiPromise = createHighlighterCore({
+  engine: jsEngine,
+  langs: [import('@shikijs/langs/html'), import('@shikijs/langs/json')],
+  themes: [import('@shikijs/themes/nord')],
+});
+const prettierPlugins = [
+  import('prettier/plugins/babel'),
+  import('prettier/plugins/estree'),
+  import('prettier/plugins/html'),
+];
+
+function editorHTML(editor: LexicalEditor, editorState: EditorState): string {
+  return editorState.read(() => $generateHtmlFromNodes(editor, null), {editor});
+}
+
+function editorJSON(_editor: LexicalEditor, editorState: EditorState): string {
+  return JSON.stringify(editorState.toJSON(), null, 2);
+}
+
+const langs = {
+  html: editorHTML,
+  json: editorJSON,
+} as const;
+
+export interface ShikiViewPluginProps {
+  lang: keyof typeof langs;
+}
+
+export function ShikiViewPlugin({lang}: ShikiViewPluginProps) {
+  const [editor] = useLexicalComposerContext();
+  const [editorState, setEditorState] = useState(() => editor.getEditorState());
+  useEffect(
+    () =>
+      editor.registerUpdateListener((payload) =>
+        setEditorState(payload.editorState),
+      ),
+    [editor],
+  );
+  const rawCode = useMemo(
+    () => langs[lang](editor, editorState),
+    [lang, editor, editorState],
+  );
+  const htmlPromise = useMemo(
+    () =>
+      (async () => {
+        const prettified = await prettier.format(rawCode, {
+          parser: lang,
+          plugins: (await Promise.all(prettierPlugins)).map(
+            (mod) => mod.default,
+          ),
+        });
+        return (await shikiPromise).codeToHtml(prettified, {
+          lang,
+          theme: 'nord',
+        });
+      })(),
+    [lang, rawCode],
+  );
+  const [html, setHtml] = useState('');
+  useEffect(() => {
+    let canceled = false;
+    htmlPromise.then((formatted) => canceled || setHtml(formatted));
+    return () => {
+      canceled = true;
+    };
+  }, [htmlPromise]);
+  return (
+    <div
+      className="shiki-view-plugin"
+      dangerouslySetInnerHTML={{__html: html}}
+    />
+  );
+}