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

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,4CAwIA,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8BxC,CAAC"}

package/build/Editor.js

@@ -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";
@@ -65,10 +64,10 @@ 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;

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: nowrap;
+}
 .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: nowrap;
 }
 /* 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-beta.2",
   "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",