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

package/build/utils/swipe.js

@@ -1,10 +1,4 @@
-/**
- * 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.
- *
- */
+"use client";
 const elements = new WeakMap();
 function readTouch(e) {
     const touch = e.changedTouches[0];
@@ -37,8 +31,8 @@ function addListener(element, cb) {
                 }
             }
         };
-        element.addEventListener('touchstart', handleTouchstart);
-        element.addEventListener('touchend', handleTouchend);
+        element.addEventListener("touchstart", handleTouchstart);
+        element.addEventListener("touchend", handleTouchend);
         elementValues = {
             handleTouchend,
             handleTouchstart,
@@ -59,8 +53,8 @@ function deleteListener(element, cb) {
     listeners.delete(cb);
     if (listeners.size === 0) {
         elements.delete(element);
-        element.removeEventListener('touchstart', elementValues.handleTouchstart);
-        element.removeEventListener('touchend', elementValues.handleTouchend);
+        element.removeEventListener("touchstart", elementValues.handleTouchstart);
+        element.removeEventListener("touchend", elementValues.handleTouchend);
     }
 }
 export function addSwipeLeftListener(element, cb) {

package/build/viewer/Viewer.d.ts

@@ -0,0 +1,18 @@
+import { EditorState } from "lexical";
+import React from "react";
+export interface ViewerProps {
+    state: EditorState | string;
+    sanitize?: boolean;
+}
+/**
+ * A viewer component for displaying parsed editor state in the DOM. Returns a div containing dangerouslySetInnerHTML.
+ *
+ * HTML content is sanitized by stripping tags and running DOMPurify by default. This can be disabled by setting the `sanitize` prop to false - **not recommended for client-facing editors**.
+ *
+ * Note: DOMPurify is configured to allow iframes. A custom whitelist is applied to only allow iframes from YouTube, Figma, and Twitter.
+ * @param {ViewerProps} props
+ * @returns {JSX.Element}
+ */
+export declare const Viewer: React.FC<ViewerProps>;
+export default Viewer;
+//# sourceMappingURL=Viewer.d.ts.map

package/build/viewer/Viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewer.d.ts","sourceRoot":"","sources":["../../src/viewer/Viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,OAAO,KAAuB,MAAM,OAAO,CAAC;AAU5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2GxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/viewer/Viewer.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createHeadlessEditor } from "@lexical/headless";
+import PlaygroundNodes from "../nodes/PlaygroundNodes/ServerPlaygroundNodes";
+import { useMemo } from "react";
+import DOMPurify from "dompurify";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { buildHTMLConfig } from "../buildHTMLConfig";
+import { stripHtmlCode } from "@igorskyflyer/strip-html";
+import { Tweet } from "react-tweet";
+import parse from "html-react-parser";
+import { JSDOM } from "jsdom";
+import theme from "../themes/ViewerTheme";
+/**
+ * A viewer component for displaying parsed editor state in the DOM. Returns a div containing dangerouslySetInnerHTML.
+ *
+ * HTML content is sanitized by stripping tags and running DOMPurify by default. This can be disabled by setting the `sanitize` prop to false - **not recommended for client-facing editors**.
+ *
+ * Note: DOMPurify is configured to allow iframes. A custom whitelist is applied to only allow iframes from YouTube, Figma, and Twitter.
+ * @param {ViewerProps} props
+ * @returns {JSX.Element}
+ */
+export const Viewer = ({ state, sanitize = true, }) => {
+    if (typeof window === "undefined") {
+        global.window = new JSDOM("").window;
+        global.document = global.window.document;
+    }
+    // Create editor instance per component to avoid module-level singleton issues
+    const editor = useMemo(() => createHeadlessEditor({
+        namespace: "ViewerEditor",
+        nodes: [...PlaygroundNodes],
+        onError(error) {
+            throw error;
+        },
+        html: buildHTMLConfig(),
+        theme,
+    }), []);
+    try {
+        if (typeof state === "string") {
+            if (sanitize)
+                state = stripHtmlCode(state);
+            editor.setEditorState(editor.parseEditorState(state));
+        }
+        else {
+            editor.setEditorState(state);
+        }
+        let clean = "";
+        const purify = DOMPurify(window);
+        if (sanitize)
+            editor.update(() => {
+                const html = $generateHtmlFromNodes(editor);
+                clean = purify.sanitize(html, {
+                    ADD_TAGS: ["iframe", "blockquote", "a", "p"],
+                    ADD_ATTR: [
+                        "src",
+                        "width",
+                        "height",
+                        "frameborder",
+                        "allowfullscreen",
+                        "class",
+                        "href",
+                    ],
+                    FORBID_ATTR: ["on*"],
+                });
+                const allowedSources = [
+                    "https://www.youtube.com/embed",
+                    "https://www.figma.com/embed",
+                    "https://platform.twitter.com/widgets.js",
+                ];
+                const parser = new window.DOMParser();
+                const doc = parser.parseFromString(clean, "text/html");
+                const iframes = doc.querySelectorAll("iframe");
+                iframes.forEach((iframe) => {
+                    const src = iframe.getAttribute("src");
+                    if (!src ||
+                        !allowedSources.some((source) => src.startsWith(source))) {
+                        iframe.remove();
+                    }
+                });
+                clean = doc.body.innerHTML;
+            });
+        else
+            editor.update(() => {
+                clean = $generateHtmlFromNodes(editor);
+            });
+        const parsedContent = parse(clean, {
+            replace: (domNode) => {
+                if (domNode &&
+                    typeof domNode === "object" &&
+                    "name" in domNode &&
+                    "attribs" in domNode &&
+                    domNode.name === "div" &&
+                    domNode.attribs["data-lexical-tweet-id"]) {
+                    const tweetId = domNode.attribs["data-lexical-tweet-id"];
+                    return _jsx(Tweet, { id: tweetId });
+                }
+            },
+        });
+        return _jsx("div", { children: parsedContent });
+    }
+    catch (error) {
+        console.error("Error generating viewer output. There may be an error in the editor state or the HTML generation process.\n", error);
+        return (_jsxs("div", { className: "LexicalBlogViewer__Error", children: [_jsx("strong", { children: "Error:" }), " Unable to render content."] }));
+    }
+};
+export default Viewer;

package/build/viewer/client.d.ts

@@ -0,0 +1,18 @@
+import { EditorState } from "lexical";
+import React from "react";
+export interface ViewerProps {
+    state: EditorState | string;
+    sanitize?: boolean;
+}
+/**
+ * A viewer component for displaying parsed editor state in the DOM. Returns a div containing dangerouslySetInnerHTML.
+ *
+ * HTML content is sanitized by stripping tags and running DOMPurify by default. This can be disabled by setting the `sanitize` prop to false - **not recommended for client-facing editors**.
+ *
+ * Note: DOMPurify is configured to allow iframes. A custom whitelist is applied to only allow iframes from YouTube, Figma, and Twitter.
+ * @param {ViewerProps} props
+ * @returns {JSX.Element}
+ */
+export declare const Viewer: React.FC<ViewerProps>;
+export default Viewer;
+//# sourceMappingURL=client.d.ts.map

package/build/viewer/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/viewer/client.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgB,WAAW,EAAE,MAAM,SAAS,CAAC;AAEpD,OAAO,KAAuB,MAAM,OAAO,CAAC;AAS5C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,WAAW,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AAEH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkGxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/build/viewer/client.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createEditor } from "lexical";
+import PlaygroundNodes from "../nodes/PlaygroundNodes/ServerPlaygroundNodes";
+import { useMemo } from "react";
+import DOMPurify from "dompurify";
+import { $generateHtmlFromNodes } from "@lexical/html";
+import { buildHTMLConfig } from "../buildHTMLConfig";
+import { stripHtmlCode } from "@igorskyflyer/strip-html";
+import { Tweet } from "react-tweet";
+import parse, { Element } from "html-react-parser";
+import theme from "../themes/ViewerTheme";
+/**
+ * A viewer component for displaying parsed editor state in the DOM. Returns a div containing dangerouslySetInnerHTML.
+ *
+ * HTML content is sanitized by stripping tags and running DOMPurify by default. This can be disabled by setting the `sanitize` prop to false - **not recommended for client-facing editors**.
+ *
+ * Note: DOMPurify is configured to allow iframes. A custom whitelist is applied to only allow iframes from YouTube, Figma, and Twitter.
+ * @param {ViewerProps} props
+ * @returns {JSX.Element}
+ */
+export const Viewer = ({ state, sanitize = true, }) => {
+    // Create editor instance per component to avoid module-level singleton issues
+    const editor = useMemo(() => createEditor({
+        namespace: "ViewerEditor",
+        nodes: [...PlaygroundNodes],
+        onError(error) {
+            throw error;
+        },
+        html: buildHTMLConfig(),
+        theme,
+    }), []);
+    try {
+        if (typeof state === "string") {
+            if (sanitize)
+                state = stripHtmlCode(state);
+            editor.setEditorState(editor.parseEditorState(state));
+        }
+        else {
+            editor.setEditorState(state);
+        }
+        let clean = "";
+        if (sanitize)
+            editor.update(() => {
+                const html = $generateHtmlFromNodes(editor);
+                clean = DOMPurify.sanitize(html, {
+                    ADD_TAGS: ["iframe", "blockquote"],
+                    ADD_ATTR: [
+                        "src",
+                        "width",
+                        "height",
+                        "frameborder",
+                        "allowfullscreen",
+                        "class",
+                        "href",
+                    ],
+                    FORBID_ATTR: ["on*"],
+                });
+                const allowedSources = [
+                    "https://www.youtube.com/embed",
+                    "https://www.figma.com/embed",
+                    "https://platform.twitter.com/widgets.js",
+                ];
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(clean, "text/html");
+                const iframes = doc.querySelectorAll("iframe");
+                iframes.forEach((iframe) => {
+                    const src = iframe.getAttribute("src");
+                    if (!src ||
+                        !allowedSources.some((source) => src.startsWith(source))) {
+                        iframe.remove();
+                    }
+                });
+                clean = doc.body.innerHTML;
+            });
+        else
+            editor.update(() => {
+                clean = $generateHtmlFromNodes(editor);
+            });
+        const parsedContent = parse(clean, {
+            replace: (domNode) => {
+                if (domNode instanceof Element &&
+                    domNode.name === "div" &&
+                    domNode.attribs["data-lexical-tweet-id"]) {
+                    const tweetId = domNode.attribs["data-lexical-tweet-id"];
+                    return _jsx(Tweet, { id: tweetId });
+                }
+            },
+        });
+        return _jsx("div", { children: parsedContent });
+    }
+    catch (error) {
+        console.error("Error generating viewer output. There may be an error in the editor state or the HTML generation process.\n", error);
+        return (_jsxs("div", { className: "LexicalBlogViewer__Error", children: [_jsx("strong", { children: "Error:" }), " Unable to render content."] }));
+    }
+};
+export default Viewer;

package/build/viewer/index.d.ts

@@ -0,0 +1,4 @@
+export { Viewer } from "./Viewer";
+export type { ViewerProps } from "./Viewer";
+export { Viewer as default } from "./Viewer";
+//# sourceMappingURL=index.d.ts.map

package/build/viewer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/viewer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/build/viewer/index.js

@@ -0,0 +1,2 @@
+export { Viewer } from "./Viewer";
+export { Viewer as default } from "./Viewer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scottjgilbert/lexical-blog-editor",
-  "version": "0.1.4",
+  "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",
@@ -13,7 +13,15 @@
       "types": "./build/index.d.ts",
       "import": "./build/index.js",
       "require": "./build/index.js"
-    }
+    },
+    "./viewer": {
+      "types": "./build/viewer/index.d.ts",
+      "browser": "./build/viewer/client.js",
+      "import": "./build/viewer/index.js",
+      "require": "./build/viewer/index.js"
+    },
+    "./styles/ViewerTheme.css": "./build/themes/ViewerTheme.css",
+    "./styles/ViewerThemeComplete.css": "./build/themes/ViewerThemeComplete.css"
   },
   "files": [
     "build"
@@ -26,50 +34,64 @@
     "rich-text"
   ],
   "author": "Scott Gilbert",
-  "license": "ISC",
+  "license": "MIT",
+  "peerDependencies": {
+    "lexical": "^0.40.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
-    "@lexical/clipboard": "^0.39.0",
-    "@lexical/code": "^0.39.0",
-    "@lexical/code-shiki": "^0.39.0",
-    "@lexical/file": "^0.39.0",
-    "@lexical/hashtag": "^0.39.0",
-    "@lexical/html": "^0.39.0",
-    "@lexical/link": "^0.39.0",
-    "@lexical/list": "^0.39.0",
-    "@lexical/mark": "^0.39.0",
-    "@lexical/markdown": "^0.39.0",
-    "@lexical/overflow": "^0.39.0",
-    "@lexical/react": "^0.39.0",
-    "@lexical/rich-text": "^0.39.0",
-    "@lexical/selection": "^0.39.0",
-    "@lexical/table": "^0.39.0",
-    "@lexical/utils": "^0.39.0",
-    "@lexical/yjs": "^0.39.0",
+    "@floating-ui/react": "^0.27.17",
+    "@igorskyflyer/strip-html": "^2.1.0",
+    "@lexical/clipboard": "^0.40.0",
+    "@lexical/code": "^0.40.0",
+    "@lexical/code-shiki": "^0.40.0",
+    "@lexical/extension": "^0.40.0",
+    "@lexical/file": "^0.40.0",
+    "@lexical/hashtag": "^0.40.0",
+    "@lexical/headless": "^0.40.0",
+    "@lexical/html": "^0.40.0",
+    "@lexical/link": "^0.40.0",
+    "@lexical/list": "^0.40.0",
+    "@lexical/mark": "^0.40.0",
+    "@lexical/markdown": "^0.40.0",
+    "@lexical/overflow": "^0.40.0",
+    "@lexical/react": "^0.40.0",
+    "@lexical/rich-text": "^0.40.0",
+    "@lexical/selection": "^0.40.0",
+    "@lexical/table": "^0.40.0",
+    "@lexical/utils": "^0.40.0",
+    "@lexical/yjs": "^0.40.0",
+    "@shikijs/core": "^3.22.0",
+    "@shikijs/engine-javascript": "^3.22.0",
+    "@shikijs/types": "^3.22.0",
     "date-fns": "^4.1.0",
-    "katex": "^0.16.27",
-    "lexical": "^0.39.0",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.22",
-    "prettier": "^3.7.4",
-    "react": "19.2.3",
+    "dompurify": "^3.0.6",
+    "html-react-parser": "^5.2.16",
+    "jsdom": "^28.0.0",
+    "katex": "^0.16.28",
+    "lodash": "^4.17.23",
+    "lodash-es": "^4.17.23",
+    "prettier": "^3.8.1",
     "react-day-picker": "^9.13.0",
-    "react-dom": "19.2.3",
-    "react-error-boundary": "^6.0.3",
+    "react-error-boundary": "^6.1.0",
+    "react-tweet": "^3.3.0",
+    "shiki": "^3.22.0",
     "y-websocket": "^3.0.0",
     "yjs": "^13.6.29"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/jsdom": "^27.0.0",
     "@types/lodash": "^4.17.23",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/node": "^20.19.32",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "copyfiles": "^2.4.1",
-    "eslint": "^9",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "eslint": "^9.39.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "build": "tsc && pnpm run copy-assets",

package/build/collaboration.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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 { Provider } from "@lexical/yjs";
-import { Doc } from "yjs";
-export declare function createWebsocketProvider(id: string, yjsDocMap: Map<string, Doc>): Provider;
-export declare function createWebsocketProviderWithDoc(id: string, doc: Doc): Provider;
-//# sourceMappingURL=collaboration.d.ts.map

package/build/collaboration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"collaboration.d.ts","sourceRoot":"","sources":["../src/collaboration.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAU1B,wBAAgB,uBAAuB,CACrC,EAAE,EAAE,MAAM,EACV,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,GAC1B,QAAQ,CAWV;AAED,wBAAgB,8BAA8B,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,CAU7E"}

package/build/collaboration.js

@@ -1,32 +0,0 @@
-/**
- * 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 { WebsocketProvider } from "y-websocket";
-import { Doc } from "yjs";
-const url = new URL(window.location.href);
-const params = new URLSearchParams(url.search);
-const WEBSOCKET_ENDPOINT = params.get("collabEndpoint") || "ws://localhost:1234";
-const WEBSOCKET_SLUG = "playground";
-const WEBSOCKET_ID = params.get("collabId") || "0";
-// parent dom -> child doc
-export function createWebsocketProvider(id, yjsDocMap) {
-    let doc = yjsDocMap.get(id);
-    if (doc === undefined) {
-        doc = new Doc();
-        yjsDocMap.set(id, doc);
-    }
-    else {
-        doc.load();
-    }
-    return createWebsocketProviderWithDoc(id, doc);
-}
-export function createWebsocketProviderWithDoc(id, doc) {
-    // @ts-expect-error I have no idea why this is needed
-    return new WebsocketProvider(WEBSOCKET_ENDPOINT, WEBSOCKET_SLUG + "/" + WEBSOCKET_ID + "/" + id, doc, {
-        connect: false,
-    });
-}

package/build/nodes/FigmaNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FigmaNode.d.ts","sourceRoot":"","sources":["../../src/nodes/FigmaNode.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EACV,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,OAAO,EACP,MAAM,EACP,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC7B,MAAM,0CAA0C,CAAC;AAmClD,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,UAAU,EAAE,MAAM,CAAC;CACpB,EACD,4BAA4B,CAC7B,CAAC;AAEF,qBAAa,SAAU,SAAQ,kBAAkB;IAC/C,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS;IAMjE,UAAU,IAAI,mBAAmB;gBAOrB,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,EAAE,OAAO;IAKjE,SAAS,IAAI,KAAK;IAIlB,KAAK,IAAI,MAAM;IAIf,cAAc,CACZ,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,EACnC,qBAAqB,CAAC,EAAE,KAAK,GAAG,SAAS,GACxC,MAAM;IAIT,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO;CAepE;AAED,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAE9D;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,GAC/C,IAAI,IAAI,SAAS,CAEnB"}

package/build/nodes/PageBreakNode/index.css

@@ -1,64 +0,0 @@
-/**
- * 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 url('assets/styles/variables.css'); */
-
-[type='page-break'] {
-  position: relative;
-  display: block;
-  width: calc(100% + var(--editor-input-padding, 28px) * 2);
-  overflow: unset;
-  margin-left: calc(var(--editor-input-padding, 28px) * -1);
-  margin-top: var(--editor-input-padding, 28px);
-  margin-bottom: var(--editor-input-padding, 28px);
-
-  border: none;
-  border-top: 1px dashed var(--editor-color-secondary, #eeeeee);
-  border-bottom: 1px dashed var(--editor-color-secondary, #eeeeee);
-  background-color: var(--editor-color-secondary, #eeeeee);
-}
-
-[type='page-break']::before {
-  content: '';
-
-  position: absolute;
-  top: 50%;
-  left: calc(var(--editor-input-padding, 28px) + 12px);
-  transform: translateY(-50%);
-  opacity: 0.5;
-
-  background-size: cover;
-  background-image: url(/src/images/icons/scissors.svg);
-  width: 16px;
-  height: 16px;
-}
-
-[type='page-break']::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  display: block;
-  padding: 2px 6px;
-  border: 1px solid #ccc;
-  background-color: #fff;
-
-  content: 'PAGE BREAK';
-  font-size: 12px;
-  color: #000;
-  font-weight: 600;
-}
-
-.selected[type='page-break'] {
-  border-color: var(--editor-color-primary, #4766cb);
-}
-
-.selected[type='page-break']::before {
-  opacity: 1;
-}

package/build/nodes/PageBreakNode/index.d.ts

@@ -1,25 +0,0 @@
-/**
- * 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 type { JSX } from "react";
-import "./index.css";
-import { DecoratorNode, DOMConversionMap, LexicalNode, SerializedLexicalNode } from "lexical";
-export type SerializedPageBreakNode = SerializedLexicalNode;
-export declare class PageBreakNode extends DecoratorNode<JSX.Element> {
-    static getType(): string;
-    static clone(node: PageBreakNode): PageBreakNode;
-    static importJSON(serializedNode: SerializedPageBreakNode): PageBreakNode;
-    static importDOM(): DOMConversionMap | null;
-    createDOM(): HTMLElement;
-    getTextContent(): string;
-    isInline(): false;
-    updateDOM(): boolean;
-    decorate(): JSX.Element;
-}
-export declare function $createPageBreakNode(): PageBreakNode;
-export declare function $isPageBreakNode(node: LexicalNode | null | undefined): node is PageBreakNode;
-//# sourceMappingURL=index.d.ts.map

package/build/nodes/PageBreakNode/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nodes/PageBreakNode/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,aAAa,CAAC;AAKrB,OAAO,EAIL,aAAa,EACb,gBAAgB,EAEhB,WAAW,EAEX,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,uBAAuB,GAAG,qBAAqB,CAAC;AAuC5D,qBAAa,aAAc,SAAQ,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;IAC3D,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,aAAa,GAAG,aAAa;IAIhD,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,uBAAuB,GAAG,aAAa;IAIzE,MAAM,CAAC,SAAS,IAAI,gBAAgB,GAAG,IAAI;IAgB3C,SAAS,IAAI,WAAW;IAOxB,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,KAAK;IAIjB,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,GAAG,CAAC,OAAO;CAGxB;AAMD,wBAAgB,oBAAoB,IAAI,aAAa,CAEpD;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,aAAa,CAEvB"}

package/build/nodes/PageBreakNode/index.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./index.css";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { mergeRegister } from "@lexical/utils";
-import { CLICK_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DecoratorNode, } from "lexical";
-import { useEffect } from "react";
-function PageBreakComponent({ nodeKey }) {
-    const [editor] = useLexicalComposerContext();
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    useEffect(() => {
-        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
-            const pbElem = editor.getElementByKey(nodeKey);
-            if (event.target === pbElem) {
-                if (!event.shiftKey) {
-                    clearSelection();
-                }
-                setSelected(!isSelected);
-                return true;
-            }
-            return false;
-        }, COMMAND_PRIORITY_LOW));
-    }, [clearSelection, editor, isSelected, nodeKey, setSelected]);
-    useEffect(() => {
-        const pbElem = editor.getElementByKey(nodeKey);
-        if (pbElem !== null) {
-            pbElem.className = isSelected ? "selected" : "";
-        }
-    }, [editor, isSelected, nodeKey]);
-    return null;
-}
-export class PageBreakNode extends DecoratorNode {
-    static getType() {
-        return "page-break";
-    }
-    static clone(node) {
-        return new PageBreakNode(node.__key);
-    }
-    static importJSON(serializedNode) {
-        return $createPageBreakNode().updateFromJSON(serializedNode);
-    }
-    static importDOM() {
-        return {
-            figure: (domNode) => {
-                const tp = domNode.getAttribute("type");
-                if (tp !== this.getType()) {
-                    return null;
-                }
-                return {
-                    conversion: $convertPageBreakElement,
-                    priority: COMMAND_PRIORITY_HIGH,
-                };
-            },
-        };
-    }
-    createDOM() {
-        const el = document.createElement("figure");
-        el.style.pageBreakAfter = "always";
-        el.setAttribute("type", this.getType());
-        return el;
-    }
-    getTextContent() {
-        return "\n";
-    }
-    isInline() {
-        return false;
-    }
-    updateDOM() {
-        return false;
-    }
-    decorate() {
-        return _jsx(PageBreakComponent, { nodeKey: this.__key });
-    }
-}
-function $convertPageBreakElement() {
-    return { node: $createPageBreakNode() };
-}
-export function $createPageBreakNode() {
-    return new PageBreakNode();
-}
-export function $isPageBreakNode(node) {
-    return node instanceof PageBreakNode;
-}

package/build/nodes/PlaygroundNodes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PlaygroundNodes.d.ts","sourceRoot":"","sources":["../../src/nodes/PlaygroundNodes.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA8BlD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAiC9C,CAAC;AAEF,eAAe,eAAe,CAAC"}