@scottjgilbert/lexical-blog-editor 1.0.0-beta.1 → 1.0.0

package/README.md

@@ -193,7 +193,7 @@ import { Viewer } from "@scottjgilbert/lexical-blog-editor/viewer";
 - FloatingTextFormatToolbarPlugin
 - HashtagPlugin
 - HistoryPlugin
-- HorizontalRule**Extension**
+- HorizontalRulePlugin
 - ImagesPlugin
 - KeywordsPlugin
 - LayoutPlugin

package/build/Editor.d.ts

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

package/build/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAwDA,OAAO,EAIL,WAAW,EAEZ,MAAM,SAAS,CAAC;AAQjB,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,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,eAAe,GAAI,4BAG7B;IACD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD,4CAgJA,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8BxC,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,4CAyIA,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8BxC,CAAC"}

package/build/Editor.js

@@ -7,7 +7,6 @@ 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 { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
@@ -33,6 +32,7 @@ import EquationsPlugin from "./plugins/EquationsPlugin";
 import FigmaPlugin from "./plugins/FigmaPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
 import FloatingTextFormatToolbarPlugin from "./plugins/FloatingTextFormatToolbarPlugin";
+import HorizontalRulePlugin from "./plugins/HorizontalRulePlugin";
 import ImagesPlugin from "./plugins/ImagesPlugin";
 import KeywordsPlugin from "./plugins/KeywordsPlugin";
 import { LayoutPlugin } from "./plugins/LayoutPlugin/LayoutPlugin";
@@ -51,7 +51,6 @@ import YouTubePlugin from "./plugins/YouTubePlugin";
 import ContentEditable from "./ui/ContentEditable";
 import { $createHeadingNode } from "@lexical/rich-text";
 import { $getRoot, $createParagraphNode, defineExtension, $createTextNode, } from "lexical";
-import { $generateHtmlFromNodes } from "@lexical/html";
 import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionComposer";
 import { TableContext } from "./plugins/TablePlugin";
 import { ToolbarContext } from "./context/ToolbarContext";
@@ -61,14 +60,14 @@ import PlaygroundNodes from "./nodes/PlaygroundNodes/PlaygroundNodes";
 import { buildHTMLConfig } from "./buildHTMLConfig";
 import "./index.css";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { HorizontalRuleExtension } from "@lexical/extension";
+// 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 rich text editor!"));
+    paragraph.append($createTextNode("Welcome to the rich blog editor!"));
     root.append(paragraph);
 }
 export const EditorComponent = ({ placeholder = "Enter some text...", onChange, }) => {
@@ -89,13 +88,7 @@ export const EditorComponent = ({ placeholder = "Enter some text...", onChange,
         useEffect(() => {
             // most listeners return a teardown function that can be called to clean them up.
             return editor.registerUpdateListener(({ editorState }) => {
-                editor.read(() => {
-                    onChange(editorState, 
-                    //Need to modify generateHtml to auto-inject classes for styling
-                    '<div class="lexical-blog-output">' +
-                        $generateHtmlFromNodes(editor) +
-                        "</div>");
-                });
+                onChange(editorState);
             });
         }, [editor, onChange]);
         return null;
@@ -113,7 +106,7 @@ 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(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 })] }), " "] }));
+    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(HorizontalRulePlugin, {}), _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.
@@ -128,7 +121,7 @@ export const Editor = ({ placeholder = "Enter some text...", initialState, onCha
         namespace: "BlogEditor",
         nodes: PlaygroundNodes,
         theme: PlaygroundEditorTheme,
-        dependencies: [HorizontalRuleExtension],
+        // dependencies: [HorizontalRuleExtension],
     }), [initialState]);
     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/plugins/HorizontalRulePlugin/index.d.ts

@@ -0,0 +1,2 @@
+export default function HorizontalRulePlugin(): null;
+//# sourceMappingURL=index.d.ts.map

package/build/plugins/HorizontalRulePlugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/HorizontalRulePlugin/index.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,oBAAoB,IAAI,IAAI,CA4BnD"}

package/build/plugins/HorizontalRulePlugin/index.js

@@ -0,0 +1,25 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND, } from "@lexical/extension";
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, } from "lexical";
+import { useEffect } from "react";
+export default function HorizontalRulePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(INSERT_HORIZONTAL_RULE_COMMAND, () => {
+            const selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                return false;
+            }
+            const horizontalRuleNode = $createHorizontalRuleNode();
+            selection.insertNodes([horizontalRuleNode]);
+            if ($isRootOrShadowRoot(horizontalRuleNode.getParent())) {
+                const paragraphNode = $createParagraphNode();
+                horizontalRuleNode.insertAfter(paragraphNode);
+                paragraphNode.select();
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/build/themes/PlaygroundEditorTheme.css

@@ -167,6 +167,7 @@
   overflow-x: auto;
   position: relative;
   tab-size: 2;
+  white-space: pre;
 }
 .PlaygroundEditorTheme__code:before {
   content: attr(data-gutter);
@@ -181,6 +182,9 @@
   text-align: right;
   min-width: 25px;
 }
+.PlaygroundEditorTheme__code span {
+  white-space: pre;
+}
 .PlaygroundEditorTheme__tableScrollableWrapper {
   overflow-x: auto;
   margin: 0px 25px 30px 0px;

package/build/themes/ViewerTheme.css

@@ -167,6 +167,10 @@
   overflow-x: auto;
   position: relative;
   tab-size: 2;
+  white-space: pre;
+}
+.ViewerTheme__code span {
+  white-space: pre;
 }
 /* Apply padding if the pre is empty OR if the last child isn't a span */
 .ViewerTheme__code:empty::after,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scottjgilbert/lexical-blog-editor",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0",
   "description": "Prebuilt components for editing and rendering rich blog content with Lexical. Modified wrapper of the Lexical Playground editor.",
   "main": "./build/index.js",
   "types": "./build/index.d.ts",