@scottjgilbert/lexical-blog-editor 1.0.0-beta.2 → 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.map

@@ -1 +1 @@
-{"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"}
+{"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";
@@ -60,7 +60,7 @@ 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");
@@ -106,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.
@@ -121,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

@@ -183,7 +183,7 @@
   min-width: 25px;
 }
 .PlaygroundEditorTheme__code span {
-  white-space: nowrap;
+  white-space: pre;
 }
 .PlaygroundEditorTheme__tableScrollableWrapper {
   overflow-x: auto;

package/build/themes/ViewerTheme.css

@@ -170,7 +170,7 @@
   white-space: pre;
 }
 .ViewerTheme__code span {
-  white-space: nowrap;
+  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.2",
+  "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",