@scottjgilbert/lexical-blog-editor 0.1.4 → 1.0.0-beta.2

package/README.md

@@ -1,11 +1,19 @@
 # @scottjgilbert/lexical-blog-editor
 
+<p float="left">
 <img alt="NPM version" src="https://img.shields.io/npm/v/@scottjgilbert/lexical-blog-editor.svg?style=for-the-badge&labelColor=000000">
 <img alt="License" src="https://img.shields.io/npm/l/@scottjgilbert/lexical-blog-editor.svg?style=for-the-badge&labelColor=000000">
+</p>
 
-A feature-rich, production-ready rich text editor for blog content, built on Meta's [Lexical](https://lexical.dev/) framework. This package provides a comprehensive editing experience with extensive plugin support, custom nodes, and a full-featured toolbar.
+# Lexical Blog Editor Documentation
 
-> ⚠️ **Note**: This package is currently in beta. A rendering component for displaying saved content as DOM is under active development.
+A feature-rich, production-ready rich text editor designed for blog content management. Built on Meta's [Lexical](https://lexical.dev/) framework.
+
+## Overview
+
+A feature-rich, production-ready rich text editor and viewer for blog content, built on Meta's [Lexical](https://lexical.dev/) framework. This package provides a comprehensive editing experience with extensive plugin support, custom nodes, and a full-featured toolbar.
+
+This editor is designed to be plug-and-play and is not customizable or designed for extensive configuration. It is intended to be used as a complete solution for blog content creation, with a focus on providing a wide range of features out of the box.
 
 ## Installation
 
@@ -21,33 +29,47 @@ yarn add @scottjgilbert/lexical-blog-editor
 
 This package requires the following peer dependencies:
 
-- React 18.0.0 or higher
-- React DOM 18.0.0 or higher
-- Lexical 0.39.0 or higher
+- Lexical 0.40.0 or higher
+- React 18.0.0 or 19.0.0
+- React DOM 18.0.0 or 19.0.0
+
+## Supported Browsers
+
+| Browser | Version |
+| ------- | ------- |
+| Chrome  | 49+     |
+| Firefox | 52+     |
+| Safari  | 11+     |
+| Edge    | 79+     |
 
 ## Usage
 
 ### Basic Implementation
 
 ```tsx
+import { useState } from "react";
 import { Editor } from "@scottjgilbert/lexical-blog-editor";
-import type { EditorState } from "lexical";
+import { Viewer } from "@scottjgilbert/lexical-blog-editor/viewer";
+import type { EditorState } from "@scottjgilbert/lexical-blog-editor";
+
+import "@scottjgilbert/lexical-blog-editor/styles/ViewerTheme.css";
 
 function MyBlogEditor() {
+  const [savedState, setSavedState] = useState<string | null>(null);
+
   const handleChange = (editorState: EditorState) => {
-    // Access and serialize the editor state
-    editorState.read(() => {
-      const json = JSON.stringify(editorState.toJSON());
-      console.log("Editor content:", json);
-      // Save to your database, state management, etc.
-    });
+    const json = JSON.stringify(editorState.toJSON());
+    setSavedState(json);
   };
 
   return (
-    <Editor
-      onChange={handleChange}
-      placeholder="Start writing your blog post..."
-    />
+    <>
+      <Editor
+        onChange={handleChange}
+        placeholder="Start writing your blog post..."
+      />
+      {savedState && <Viewer state={savedState} />}
+    </>
   );
 }
 ```
@@ -56,10 +78,10 @@ function MyBlogEditor() {
 
 ```tsx
 import { Editor } from "@scottjgilbert/lexical-blog-editor";
-import type { EditorState } from "lexical";
+import type { EditorState } from "@scottjgilbert/lexical-blog-editor";
 
 function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
-  const handleChange = (editorState: EditorState) => {
+  const handleChange = (editorState: EditorState, html: string) => {
     // Handle changes
   };
 
@@ -79,11 +101,26 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 
 #### Props
 
-| Prop           | Type                                 | Default                | Description                                                                       |
-| -------------- | ------------------------------------ | ---------------------- | --------------------------------------------------------------------------------- |
-| `onChange`     | `(editorState: EditorState) => void` | **Required**           | Callback fired whenever the editor content changes                                |
-| `placeholder`  | `string`                             | `"Enter some text..."` | Placeholder text displayed when the editor is empty                               |
-| `initialState` | `EditorState`                        | `undefined`            | Initial editor content state. If not provided, displays a default welcome message |
+| Prop           | Type                                               | Default                | Description                                                                       |
+| -------------- | -------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------- |
+| `onChange`     | `(editorState: EditorState, html: string) => void` | **Required**           | Callback fired whenever the editor content changes                                |
+| `placeholder`  | `string`                                           | `"Enter some text..."` | Placeholder text displayed when the editor is empty                               |
+| `initialState` | `EditorState`                                      | `undefined`            | Initial editor content state. If not provided, displays a default welcome message |
+
+### Viewer Component
+
+Import from:
+
+```tsx
+import { Viewer } from "@scottjgilbert/lexical-blog-editor/viewer";
+```
+
+#### Props
+
+| Prop       | Type                    | Default      | Description                                                                                               |
+| ---------- | ----------------------- | ------------ | --------------------------------------------------------------------------------------------------------- |
+| `state`    | `EditorState \| string` | **Required** | Serialized editor state string (from `JSON.stringify(editorState.toJSON())`) or an `EditorState` instance |
+| `sanitize` | `boolean`               | `true`       | Sanitizes generated HTML with DOMPurify and an iframe allowlist for YouTube, Figma, and Twitter embeds    |
 
 ## Features
 
@@ -105,7 +142,6 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 - **Embeds**: YouTube videos, Twitter/X posts, Figma designs
 - **Equations**: LaTeX/KaTeX mathematical equation support
 - **Horizontal Rules**: Visual section dividers
-- **Page Breaks**: Print-friendly page break markers
 - **Layouts**: Multi-column layouts with customizable containers
 - **Collapsible Sections**: Expandable/collapsible content blocks
 - **Date/Time**: Insert formatted date and time stamps
@@ -113,11 +149,9 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 ### Interactive Elements
 
 - **Links**: Auto-detection, manual insertion, and inline editing
-- **Mentions**: @mention support with autocomplete
 - **Hashtags**: Automatic #hashtag detection
 - **Keywords**: Special keyword highlighting
 - **Emojis**: Emoji picker with search and categories
-- **Polls**: Interactive poll creation (visual component)
 
 ### Advanced Features
 
@@ -127,15 +161,16 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 - **Component Picker**: Slash commands (`/`) to quickly insert components
 - **Floating Toolbars**: Context-aware formatting toolbars
 - **Auto-linking**: Automatically converts URLs to clickable links
-- **Syntax Highlighting**: Code blocks with Shiki-powered syntax highlighting
+- **Syntax Highlighting**: Code blocks with Shiki-powered syntax highlighting for almost 200 languages
 - **Undo/Redo**: Full history support with keyboard shortcuts
 - **Keyboard Shortcuts**: Comprehensive keyboard shortcut system
 - **Copy/Paste**: Smart paste handling with format preservation
+- **Viewer**: Read-only rendering component with sanitization and embed handling
 
-### Included Plugins
+### Included Plugins/Extensions
 
 <details>
-<summary>View all plugins (40+)</summary>
+<summary>View all (30+)</summary>
 
 - ActionsPlugin
 - AutoEmbedPlugin
@@ -145,7 +180,6 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 - ClearEditorPlugin
 - ClickableLinkPlugin
 - CodeActionMenuPlugin
-- CodeHighlightShikiPlugin
 - CollapsiblePlugin
 - ComponentPickerPlugin
 - DateTimePlugin
@@ -159,15 +193,13 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 - FloatingTextFormatToolbarPlugin
 - HashtagPlugin
 - HistoryPlugin
-- HorizontalRulePlugin
+- HorizontalRule**Extension**
 - ImagesPlugin
 - KeywordsPlugin
 - LayoutPlugin
 - LinkPlugin
 - ListPlugin
 - MarkdownShortcutPlugin
-- MentionsPlugin
-- PageBreakPlugin
 - RichTextPlugin
 - ShortcutsPlugin
 - SpeechToTextPlugin
@@ -182,7 +214,8 @@ function MyBlogEditor({ savedContent }: { savedContent?: EditorState }) {
 
 ### Custom Nodes
 
-The editor includes over 25 custom node types:
+<details>
+<summary>The editor includes 20 custom node types:</summary>
 
 - AutoLinkNode, LinkNode
 - CodeNode, CodeHighlightNode
@@ -199,34 +232,20 @@ The editor includes over 25 custom node types:
 - LayoutContainerNode, LayoutItemNode
 - ListNode, ListItemNode
 - MarkNode
-- MentionNode
 - OverflowNode
-- PageBreakNode
-- PollNode
 - SpecialTextNode
 - TableNode, TableCellNode, TableRowNode
 - TweetNode
 - YouTubeNode
 
-## Styling
-
-The package includes built-in CSS that will be automatically imported. The editor uses CSS classes that can be customized:
-
-```tsx
-// The editor includes its own styles
-import { Editor } from "@scottjgilbert/lexical-blog-editor";
-// Styles are automatically applied
-```
+</details>
 
-### Key CSS Classes
+## Styling
 
-- `.full-blog-editor-wrapper` - Outermost wrapper
-- `.editor-container` - Main editor container
-- `.editor-scroller` - Scrollable editor area
-- `.editor` - ContentEditable wrapper
-- Various node-specific classes for custom styling
+See the [Styling Guide](./docs/styling.md) for details on editor and viewer styling. The viewer ships with two style bundles:
 
-You can override these classes in your own CSS to customize the appearance.
+- `@scottjgilbert/lexical-blog-editor/styles/ViewerTheme.css`
+- `@scottjgilbert/lexical-blog-editor/styles/ViewerThemeComplete.css`
 
 ## TypeScript Support
 
@@ -237,26 +256,13 @@ import type { EditorProps } from "@scottjgilbert/lexical-blog-editor";
 import type { EditorState } from "@scottjgilbert/lexical-blog-editor";
 ```
 
-## Roadmap
-
-- [ ] **Viewer Component**: Dedicated component for rendering saved EditorState as read-only DOM content
-- [ ] **Server-Side Rendering**: Enhanced SSR support
-
-## Browser Support
-
-The editor supports all modern browsers:
-
-- Chrome/Edge (latest)
-- Firefox (latest)
-- Safari (latest)
-
 ## Contributing
 
 This is an open-source project. Contributions, issues, and feature requests are welcome!
 
 ## Acknowledgments
 
-Built on top of Meta's [Lexical](https://lexical.dev/) framework. This package is a wrapper of a modified version of the Lexical Playground editor, tailored specifically for blog content creation.
+Built on top of Meta's [Lexical](https://lexical.dev/) framework. This package is a modified wrapper of the Lexical Playground editor, tailored specifically for blog content creation.
 
 ## License
 

package/build/Editor.d.ts

@@ -1,14 +1,19 @@
-import { EditorState } from "lexical";
+import type { EditorState } from "lexical";
 import React from "react";
 import "./index.css";
-export type EditorProps = {
+export interface EditorProps {
     placeholder?: string;
     initialState?: EditorState;
     onChange: (state: EditorState) => void;
-};
+}
 export declare const EditorComponent: ({ placeholder, onChange, }: {
     placeholder?: string;
     onChange: (state: EditorState) => void;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A full Rich Text Editor component.
+ * @param {EditorProps} props
+ * @returns {JSX.Element}
+ */
 export declare const Editor: React.FC<EditorProps>;
 //# sourceMappingURL=Editor.d.ts.map

package/build/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AA0DA,OAAO,EAIL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAMjB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,aAAa,CAAC;AAarB,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,4BAG7B;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,4CA2IA,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA6BxC,CAAC"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AA+DA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAM3C,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,OAAO,aAAa,CAAC;AAcrB,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,GAAI,4BAG7B;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,4CAwIA,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8BxC,CAAC"}

package/build/Editor.js

@@ -7,7 +7,7 @@ import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin";
 import { HashtagPlugin } from "@lexical/react/LexicalHashtagPlugin";
-import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
+// import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
@@ -38,8 +38,6 @@ import KeywordsPlugin from "./plugins/KeywordsPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin/LayoutPlugin";
 import LinkPlugin from "./plugins/LinkPlugin";
 import MarkdownShortcutPlugin from "./plugins/MarkdownShortcutPlugin";
-import MentionsPlugin from "./plugins/MentionsPlugin";
-import PageBreakPlugin from "./plugins/PageBreakPlugin";
 import ShortcutsPlugin from "./plugins/ShortcutsPlugin";
 import SpeechToTextPlugin from "./plugins/SpeechToTextPlugin";
 import TabFocusPlugin from "./plugins/TabFocusPlugin";
@@ -58,17 +56,18 @@ import { TableContext } from "./plugins/TablePlugin";
 import { ToolbarContext } from "./context/ToolbarContext";
 import { useMemo } from "react";
 import PlaygroundEditorTheme from "./themes/PlaygroundEditorTheme";
-import PlaygroundNodes from "./nodes/PlaygroundNodes";
+import PlaygroundNodes from "./nodes/PlaygroundNodes/PlaygroundNodes";
 import { buildHTMLConfig } from "./buildHTMLConfig";
 import "./index.css";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { HorizontalRuleExtension } from "@lexical/extension";
 function $prepopulatedRichText() {
     const root = $getRoot();
     const heading = $createHeadingNode("h1");
-    heading.append($createTextNode("Lexical Rich Text Editor"));
+    heading.append($createTextNode("Rich Blog Editor"));
     root.append(heading);
     const paragraph = $createParagraphNode();
-    paragraph.append($createTextNode("Welcome to the Lexical rich text editor!"));
+    paragraph.append($createTextNode("Welcome to the rich blog editor!"));
     root.append(paragraph);
 }
 export const EditorComponent = ({ placeholder = "Enter some text...", onChange, }) => {
@@ -107,8 +106,13 @@ export const EditorComponent = ({ placeholder = "Enter some text...", onChange,
             window.removeEventListener("resize", updateViewPortWidth);
         };
     }, [isSmallWidthViewport]);
-    return (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, { editor: editor, activeEditor: activeEditor, setActiveEditor: setActiveEditor, setIsLinkEditMode: setIsLinkEditMode }), _jsx(ShortcutsPlugin, { editor: activeEditor, setIsLinkEditMode: setIsLinkEditMode }), _jsxs("div", { className: `editor-container`, children: [_jsx(DragDropPaste, {}), _jsx(AutoFocusPlugin, {}), _jsx(ClearEditorPlugin, {}), _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(DateTimePlugin, {}), _jsx(HistoryPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onRef, children: _jsx(ContentEditable, { placeholder: placeholder }) }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, {}), _jsx(CodeHighlightShikiPlugin, {}), " ", _jsx(ListPlugin, { hasStrictIndent: true }), _jsx(CheckListPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizer, {}), _jsx(TableScrollShadowPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(LinkPlugin, { hasLinkAttributes: true }), _jsx(TwitterPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(FigmaPlugin, {}), _jsx(ClickableLinkPlugin, { disabled: isEditable }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(TabFocusPlugin, {}), _jsx(TabIndentationPlugin, { maxIndent: 7 }), _jsx(CollapsiblePlugin, {}), _jsx(PageBreakPlugin, {}), _jsx(LayoutPlugin, {}), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true })] })), floatingAnchorElem && !isSmallWidthViewport && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), _jsx(TableHoverActionsV2Plugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode })] })), _jsx(ActionsPlugin, { shouldPreserveNewLinesInMarkdown: true, useCollabV2: false })] }), " "] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ToolbarPlugin, { editor: editor, activeEditor: activeEditor, setActiveEditor: setActiveEditor, setIsLinkEditMode: setIsLinkEditMode }), _jsx(ShortcutsPlugin, { editor: activeEditor, setIsLinkEditMode: setIsLinkEditMode }), _jsxs("div", { className: `editor-container`, children: [_jsx(DragDropPaste, {}), _jsx(AutoFocusPlugin, {}), _jsx(ClearEditorPlugin, {}), _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(DateTimePlugin, {}), _jsx(HistoryPlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onRef, children: _jsx(ContentEditable, { placeholder: placeholder }) }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: onChange }), _jsx(MarkdownShortcutPlugin, {}), _jsx(CodeHighlightShikiPlugin, {}), _jsx(ListPlugin, { hasStrictIndent: true }), _jsx(CheckListPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizer, {}), _jsx(TableScrollShadowPlugin, {}), _jsx(ImagesPlugin, {}), _jsx(LinkPlugin, { hasLinkAttributes: true }), _jsx(TwitterPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(FigmaPlugin, {}), _jsx(ClickableLinkPlugin, { disabled: isEditable }), _jsx(EquationsPlugin, {}), _jsx(TabFocusPlugin, {}), _jsx(TabIndentationPlugin, { maxIndent: 7 }), _jsx(CollapsiblePlugin, {}), _jsx(LayoutPlugin, {}), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true })] })), floatingAnchorElem && !isSmallWidthViewport && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), _jsx(TableHoverActionsV2Plugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode })] })), _jsx(ActionsPlugin, { shouldPreserveNewLinesInMarkdown: true, useCollabV2: false })] }), " "] }));
 };
+/**
+ * A full Rich Text Editor component.
+ * @param {EditorProps} props
+ * @returns {JSX.Element}
+ */
 export const Editor = ({ placeholder = "Enter some text...", initialState, onChange, }) => {
     const app = useMemo(() => defineExtension({
         $initialEditorState: initialState !== null && initialState !== void 0 ? initialState : $prepopulatedRichText,
@@ -117,6 +121,7 @@ export const Editor = ({ placeholder = "Enter some text...", initialState, onCha
         namespace: "BlogEditor",
         nodes: PlaygroundNodes,
         theme: PlaygroundEditorTheme,
+        dependencies: [HorizontalRuleExtension],
     }), [initialState]);
-    return (_jsx("div", { className: "full-blog-editor-wrapper", children: _jsx(LexicalExtensionComposer, { extension: app, contentEditable: null, children: _jsx(TableContext, { children: _jsx(ToolbarContext, { children: _jsx(EditorComponent, { placeholder: placeholder, onChange: onChange }) }) }) }) }));
+    return (_jsx("div", { className: "editor-shell", children: _jsx(LexicalExtensionComposer, { extension: app, contentEditable: null, children: _jsx(TableContext, { children: _jsx(ToolbarContext, { children: _jsx(EditorComponent, { placeholder: placeholder, onChange: onChange }) }) }) }) }));
 };

package/build/EditorExport.d.ts

@@ -0,0 +1,4 @@
+import type { EditorProps } from "./Editor";
+export declare function Editor(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+export type { EditorProps } from "./Editor";
+//# sourceMappingURL=EditorExport.d.ts.map

package/build/EditorExport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorExport.d.ts","sourceRoot":"","sources":["../src/EditorExport.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAuBxC;AAED,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/build/EditorExport.js

@@ -0,0 +1,13 @@
+// src/Editor.tsx
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, useEffect, useState } from "react";
+const ClientEditor = React.lazy(() => import("./Editor").then((mod) => ({ default: mod.Editor })));
+export function Editor(props) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
+    if (typeof window === "undefined" || !mounted) {
+        return (_jsxs("div", { className: "space-y-4 p-4", children: [_jsx("p", { className: "text-gray-600", children: "Loading editor..." }), _jsx("div", { className: "h-10 bg-gray-200 rounded animate-pulse" }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse w-5/6" }), _jsx("div", { className: "h-4 bg-gray-200 rounded animate-pulse w-4/6" })] })] }));
+    }
+    return (_jsx(Suspense, { fallback: null, children: _jsx(ClientEditor, Object.assign({}, props)) }));
+}

package/build/appSettings.d.ts

@@ -15,7 +15,7 @@ export declare const DEFAULT_SETTINGS: {
     readonly isCharLimit: false;
     readonly isCharLimitUtf8: false;
     readonly isCodeHighlighted: true;
-    readonly isCodeShiki: false;
+    readonly isCodeShiki: true;
     readonly isCollab: false;
     readonly isMaxLength: false;
     readonly isRichText: true;

package/build/appSettings.js

@@ -15,7 +15,7 @@ export const DEFAULT_SETTINGS = {
     isCharLimit: false,
     isCharLimitUtf8: false,
     isCodeHighlighted: true,
-    isCodeShiki: false,
+    isCodeShiki: true,
     isCollab: false,
     isMaxLength: false,
     isRichText: true,

package/build/buildHTMLConfig.d.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { HTMLConfig } from 'lexical';
+import { HTMLConfig } from "lexical";
 export declare function buildHTMLConfig(): HTMLConfig;
 //# sourceMappingURL=buildHTMLConfig.d.ts.map

package/build/buildHTMLConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildHTMLConfig.d.ts","sourceRoot":"","sources":["../src/buildHTMLConfig.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAIL,UAAU,EAKX,MAAM,SAAS,CAAC;AA8GjB,wBAAgB,eAAe,IAAI,UAAU,CAE5C"}
+{"version":3,"file":"buildHTMLConfig.d.ts","sourceRoot":"","sources":["../src/buildHTMLConfig.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAIL,UAAU,EAKX,MAAM,SAAS,CAAC;AA+IjB,wBAAgB,eAAe,IAAI,UAAU,CAE5C"}

package/build/buildHTMLConfig.js

@@ -5,23 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { $isTextNode, isBlockDomNode, isHTMLElement, ParagraphNode, TextNode, } from 'lexical';
-import { parseAllowedFontSize } from './plugins/ToolbarPlugin/fontSize';
-import { parseAllowedColor } from './ui/ColorPicker';
+import { $isTextNode, isBlockDomNode, isHTMLElement, ParagraphNode, TextNode, } from "lexical";
+import { CodeNode } from "./nodes/CodeNode/CodeNode";
+import { parseAllowedFontSize } from "./plugins/ToolbarPlugin/fontSize";
+import { parseAllowedColor } from "./ui/ColorPicker";
 function getExtraStyles(element) {
     // Parse styles from pasted input, but only if they match exactly the
     // sort of styles that would be produced by exportDOM
-    let extraStyles = '';
+    let extraStyles = "";
     const fontSize = parseAllowedFontSize(element.style.fontSize);
     const backgroundColor = parseAllowedColor(element.style.backgroundColor);
     const color = parseAllowedColor(element.style.color);
-    if (fontSize !== '' && fontSize !== '15px') {
+    if (fontSize !== "" && fontSize !== "15px") {
         extraStyles += `font-size: ${fontSize};`;
     }
-    if (backgroundColor !== '' && backgroundColor !== 'rgb(255, 255, 255)') {
+    if (backgroundColor !== "" && backgroundColor !== "rgb(255, 255, 255)") {
         extraStyles += `background-color: ${backgroundColor};`;
     }
-    if (color !== '' && color !== 'rgb(0, 0, 0)') {
+    if (color !== "" && color !== "rgb(0, 0, 0)") {
         extraStyles += `color: ${color};`;
     }
     return extraStyles;
@@ -67,18 +68,18 @@ function buildExportMap() {
             ParagraphNode,
             (editor, target) => {
                 const output = target.exportDOM(editor);
-                if (isHTMLElement(output.element) && output.element.tagName === 'P') {
+                if (isHTMLElement(output.element) && output.element.tagName === "P") {
                     const after = output.after;
                     return Object.assign(Object.assign({}, output), { after: (generatedElement) => {
                             if (after) {
                                 generatedElement = after(generatedElement);
                             }
                             if (isHTMLElement(generatedElement) &&
-                                generatedElement.tagName === 'P') {
+                                generatedElement.tagName === "P") {
                                 for (const childNode of generatedElement.childNodes) {
                                     if (isBlockDomNode(childNode)) {
-                                        const div = document.createElement('div');
-                                        div.setAttribute('role', 'paragraph');
+                                        const div = document.createElement("div");
+                                        div.setAttribute("role", "paragraph");
                                         for (const attr of generatedElement.attributes) {
                                             div.setAttribute(attr.name, attr.value);
                                         }
@@ -94,6 +95,29 @@ function buildExportMap() {
                 return output;
             },
         ],
+        [
+            CodeNode,
+            (editor, target) => {
+                const output = target.exportDOM(editor);
+                if (isHTMLElement(output.element) && output.element.tagName === "PRE") {
+                    const after = output.after;
+                    return Object.assign(Object.assign({}, output), { after: (generatedElement) => {
+                            if (after) {
+                                generatedElement = after(generatedElement);
+                            }
+                            if (isHTMLElement(generatedElement) &&
+                                generatedElement.tagName === "PRE") {
+                                // Count line breaks after the element is fully constructed
+                                const lineCount = generatedElement.getElementsByTagName("br").length + 1;
+                                const lineNumbers = Array.from({ length: lineCount }, (_, i) => i + 1).join("\n");
+                                generatedElement.setAttribute("data-gutter", lineNumbers);
+                            }
+                            return generatedElement;
+                        } });
+                }
+                return output;
+            },
+        ],
     ]);
 }
 export function buildHTMLConfig() {

package/build/context/FlashMessageContext.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { JSX } from 'react';
-import { ReactNode } from 'react';
+import type { JSX } from "react";
+import { ReactNode } from "react";
 export type ShowFlashMessage = (message?: React.ReactNode, duration?: number) => void;
 export declare const FlashMessageContext: ({ children, }: {
     children: ReactNode;

package/build/context/FlashMessageContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlashMessageContext.d.ts","sourceRoot":"","sources":["../../src/context/FlashMessageContext.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EACzB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;AAWV,eAAO,MAAM,mBAAmB,GAAI,eAEjC;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OAsBP,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAAO,gBAMzC,CAAC"}
+{"version":3,"file":"FlashMessageContext.d.ts","sourceRoot":"","sources":["../../src/context/FlashMessageContext.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAEL,SAAS,EAKV,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,EACzB,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAC;AAWV,eAAO,MAAM,mBAAmB,GAAI,eAEjC;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OAsBP,CAAC;AAEF,eAAO,MAAM,sBAAsB,QAAO,gBAMzC,CAAC"}

package/build/context/FlashMessageContext.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
-import FlashMessage from '../ui/FlashMessage';
+import { createContext, useCallback, useContext, useEffect, useState, } from "react";
+import FlashMessage from "../ui/FlashMessage";
 const Context = createContext(undefined);
 const INITIAL_STATE = {};
 const DEFAULT_DURATION = 1000;
@@ -19,7 +20,7 @@ export const FlashMessageContext = ({ children, }) => {
 export const useFlashMessageContext = () => {
     const ctx = useContext(Context);
     if (!ctx) {
-        throw new Error('Missing FlashMessageContext');
+        throw new Error("Missing FlashMessageContext");
     }
     return ctx;
 };

package/build/context/SharedHistoryContext.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
-import type { JSX } from 'react';
-import { ReactNode } from 'react';
+import type { HistoryState } from "@lexical/react/LexicalHistoryPlugin";
+import type { JSX } from "react";
+import { ReactNode } from "react";
 type ContextShape = {
     historyState?: HistoryState;
 };

package/build/context/SharedHistoryContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SharedHistoryContext.d.ts","sourceRoot":"","sources":["../../src/context/SharedHistoryContext.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,qCAAqC,CAAC;AACtE,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAgB,SAAS,EAAsB,MAAM,OAAO,CAAC;AAEpE,KAAK,YAAY,GAAG;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAO,YAE1C,CAAC"}
+{"version":3,"file":"SharedHistoryContext.d.ts","sourceRoot":"","sources":["../../src/context/SharedHistoryContext.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjC,OAAO,EAAiB,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEtE,KAAK,YAAY,GAAG;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,oBAAoB,GAAI,eAElC;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OAMP,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAO,YAE1C,CAAC"}

package/build/context/SharedHistoryContext.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin';
-import { createContext, useContext, useMemo } from 'react';
+import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin";
+import { createContext, useContext, useMemo } from "react";
 const Context = createContext({});
 export const SharedHistoryContext = ({ children, }) => {
     const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);

package/build/context/ToolbarContext.d.ts

@@ -34,6 +34,7 @@ declare const INITIAL_TOOLBAR_STATE: {
     blockType: keyof typeof blockTypeToBlockName;
     canRedo: boolean;
     canUndo: boolean;
+    codeCategory: string;
     codeLanguage: string;
     codeTheme: string;
     elementFormat: ElementFormatType;

package/build/context/ToolbarContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarContext.d.ts","sourceRoot":"","sources":["../../src/context/ToolbarContext.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAc,EAEZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAGpC,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAahC,CAAC;AAGF,QAAA,MAAM,qBAAqB;;eAEC,MAAM,OAAO,oBAAoB;;;;;mBAKlC,iBAAiB;;;;;;;;;;;;;;;;;;;cAqBtB,MAAM,OAAO,kBAAkB;qBAC1B,MAAM,GAAG,IAAI;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,qBAAqB,CAAC;AAGjD,KAAK,eAAe,GAAG,MAAM,YAAY,CAAC;AAC1C,KAAK,iBAAiB,CAAC,GAAG,SAAS,eAAe,IAAI,YAAY,CAAC,GAAG,CAAC,CAAC;AAExE,KAAK,YAAY,GAAG;IAClB,YAAY,EAAE,YAAY,CAAC;IAC3B,kBAAkB,CAAC,GAAG,SAAS,eAAe,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,IAAI,CAAC;CACT,CAAC;AAIF,eAAO,MAAM,cAAc,GAAI,eAE5B;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OA0BP,CAAC;AAEF,eAAO,MAAM,eAAe,oBAQ3B,CAAC"}
+{"version":3,"file":"ToolbarContext.d.ts","sourceRoot":"","sources":["../../src/context/ToolbarContext.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAc,EAEZ,SAAS,EAMV,MAAM,OAAO,CAAC;AAEf,eAAO,MAAM,qBAAqB,IAAI,CAAC;AACvC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAGpC,QAAA,MAAM,kBAAkB;;;CAGvB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;CAahC,CAAC;AAGF,QAAA,MAAM,qBAAqB;;eAEC,MAAM,OAAO,oBAAoB;;;;;;mBAMlC,iBAAiB;;;;;;;;;;;;;;;;;;;cAqBtB,MAAM,OAAO,kBAAkB;qBAC1B,MAAM,GAAG,IAAI;CACvC,CAAC;AAEF,KAAK,YAAY,GAAG,OAAO,qBAAqB,CAAC;AAGjD,KAAK,eAAe,GAAG,MAAM,YAAY,CAAC;AAC1C,KAAK,iBAAiB,CAAC,GAAG,SAAS,eAAe,IAAI,YAAY,CAAC,GAAG,CAAC,CAAC;AAExE,KAAK,YAAY,GAAG;IAClB,YAAY,EAAE,YAAY,CAAC;IAC3B,kBAAkB,CAAC,GAAG,SAAS,eAAe,EAC5C,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,iBAAiB,CAAC,GAAG,CAAC,GAC5B,IAAI,CAAC;CACT,CAAC;AAIF,eAAO,MAAM,cAAc,GAAI,eAE5B;IACD,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,GAAG,CAAC,OA0BP,CAAC;AAEF,eAAO,MAAM,eAAe,oBAQ3B,CAAC"}

package/build/context/ToolbarContext.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 export const MIN_ALLOWED_FONT_SIZE = 8;
@@ -28,6 +29,7 @@ const INITIAL_TOOLBAR_STATE = {
     blockType: "paragraph",
     canRedo: false,
     canUndo: false,
+    codeCategory: "",
     codeLanguage: "",
     codeTheme: "",
     elementFormat: "left",

package/build/hooks/useModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,CAAC,OAAO,UAAU,QAAQ,IAAI;IAClC,GAAG,CAAC,OAAO,GAAG,IAAI;IAClB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,KAAK,IAAI;CACzE,CA2CA"}
+{"version":3,"file":"useModal.d.ts","sourceRoot":"","sources":["../../src/hooks/useModal.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,CAAC,OAAO,UAAU,QAAQ,IAAI;IAClC,GAAG,CAAC,OAAO,GAAG,IAAI;IAClB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,GAAG,CAAC,OAAO,KAAK,IAAI;CACzE,CA2CA"}

package/build/hooks/useModal.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from "react";
 import Modal from "../ui/Modal";

package/build/hooks/useReport.d.ts

@@ -1,9 +1,2 @@
-/**
- * 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 function useReport(): (arg0: string) => ReturnType<typeof setTimeout>;
 //# sourceMappingURL=useReport.d.ts.map