5htp-core 0.4.9-5 → 0.4.9-6

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-5",
+	"version": "0.4.9-6",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/components/inputv3/Rte/ToolbarPlugin/index.tsx

@@ -16,7 +16,6 @@ import ElementFormatDropdown from './ElementFormat';
 import BlockFormatDropDown, { blockTypeNames, rootTypeToRootName } from './BlockFormat';
 
 import {
-    $createCodeNode,
     $isCodeNode,
     CODE_LANGUAGE_FRIENDLY_NAME_MAP,
     CODE_LANGUAGE_MAP,
@@ -25,9 +24,6 @@ import {
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
 import {
     $isListNode,
-    INSERT_CHECK_LIST_COMMAND,
-    INSERT_ORDERED_LIST_COMMAND,
-    INSERT_UNORDERED_LIST_COMMAND,
     ListNode,
 } from '@lexical/list';
 import { INSERT_EMBED_COMMAND } from '@lexical/react/LexicalAutoEmbedPlugin';
@@ -35,17 +31,13 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
 import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
 import {
-    $createHeadingNode,
-    $createQuoteNode,
     $isHeadingNode,
     $isQuoteNode,
-    HeadingTagType,
 } from '@lexical/rich-text';
 import {
     $getSelectionStyleValueForProperty,
     $isParentElementRTL,
     $patchStyleText,
-    $setBlocksType,
 } from '@lexical/selection';
 import { $isTableNode, $isTableSelection } from '@lexical/table';
 import {
@@ -126,7 +118,7 @@ function dropDownActiveClass(active: boolean) {
 
 
 
-function Divider(): JSX.Element {
+function Divider(): React.JSX.Element {
     return <div className="divider" />;
 }
 
@@ -134,7 +126,7 @@ export default function ToolbarPlugin({
     setIsLinkEditMode,
 }: {
     setIsLinkEditMode: Dispatch<boolean>;
-}): JSX.Element {
+}): React.JSX.Element {
 
     const { modal } = useContext();
 
@@ -603,7 +595,6 @@ export default function ToolbarPlugin({
                     <DropDown popover={{ tag: 'li' }} icon="font" size="s"
                         disabled={!isEditable}
                         title="Formatting options for additional text styles"
-                        buttonIconClassName="icon dropdown-more"
                     >
 
                         <Button icon="strikethrough" size="s"

package/src/client/components/inputv3/Rte/nodes/HeadingNode.ts

@@ -0,0 +1,55 @@
+
+import { HeadingNode, HeadingTagType } from '@lexical/rich-text';
+
+export default class HeadingWithAnchorNode extends HeadingNode {
+
+    public anchor?: string; 
+    
+    constructor( tag: HeadingTagType, key?: string ) {
+        super(tag, key);
+    }
+
+    // Adding a static method to register the custom node
+    static getType() {
+        return 'anchored-heading';
+    }
+
+    static clone(node) {
+        return new HeadingWithAnchorNode(node.getTag(), node.__key);
+    }
+
+    // Add a `anchor` attribute to the serialized JSON
+    static importJSON(serializedNode) {
+        const node = new HeadingWithAnchorNode(serializedNode.tag);
+        node.anchor = serializedNode.anchor;
+        return node;
+    }
+
+    // Ensure the `anchor` attribute is serialized in JSON
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: HeadingWithAnchorNode.getType(),
+            anchor: this.anchor,
+        };
+    }
+
+    // Override createDOM to set the `anchor` attribute
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        if (this.anchor) {
+            dom.setAttribute('id', this.anchor);
+        }
+        return dom;
+    }
+
+    // Update the DOM to reflect changes in the `anchor` attribute
+    updateDOM(prevNode, dom) {
+        const updated = super.updateDOM(prevNode, dom);
+        if (this.anchor !== prevNode.anchor) {
+            dom.setAttribute('id', this.anchor);
+            return true;
+        }
+        return updated;
+    }
+}

package/src/client/components/inputv3/Rte/plugins/ComponentPickerPlugin/index.tsx

@@ -36,7 +36,10 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 // Core
-import useContext from '@/client/context';
+import useContext, { ClientContext } from '@/client/context';
+
+// Custom Nodes
+import AnchoredHeadingNode from '@client/components/inputv3/Rte/nodes/HeadingNode';
 
 import { EmbedConfigs } from '../AutoEmbedPlugin';
 import { INSERT_COLLAPSIBLE_COMMAND } from '../CollapsiblePlugin';
@@ -50,7 +53,7 @@ class ComponentPickerOption extends MenuOption {
     // What shows up in the editor
     title: string;
     // Icon for display
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     // For extra searching.
     keywords: Array<string>;
     // TBD
@@ -61,7 +64,7 @@ class ComponentPickerOption extends MenuOption {
     constructor(
         title: string,
         options: {
-            icon?: JSX.Element;
+            icon?: React.JSX.Element;
             keywords?: Array<string>;
             keyboardShortcut?: string;
             onSelect: (queryString: string) => void;
@@ -141,7 +144,7 @@ function getDynamicOptions(editor: LexicalEditor, queryString: string) {
     return options;
 }
 
-function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
+function getBaseOptions(editor: LexicalEditor, { modal }: ClientContext) {
     return [
         new ComponentPickerOption('Paragraph', {
             icon: <i className="icon paragraph" />,
@@ -163,7 +166,7 @@ function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
                         editor.update(() => {
                             const selection = $getSelection();
                             if ($isRangeSelection(selection)) {
-                                $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                                $setBlocksType(selection, () => new AnchoredHeadingNode(`h${n}`));
                             }
                         }),
                 }),
@@ -281,7 +284,7 @@ function getBaseOptions(editor: LexicalEditor, { modal }: TContext) {
     ];
 }
 
-export default function ComponentPickerMenuPlugin(): JSX.Element {
+export default function ComponentPickerMenuPlugin(): React.JSX.Element {
     
     const [editor] = useLexicalComposerContext();
     const { modal, context } = useContext();

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.css

@@ -16,17 +16,6 @@
   margin: 0;
   position: relative;
 }
-.PlaygroundEditorTheme__quote {
-  margin: 0;
-  margin-left: 20px;
-  margin-bottom: 10px;
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
-  border-left-width: 4px;
-  border-left-style: solid;
-  padding-left: 16px;
-}
 .PlaygroundEditorTheme__h1 {
   font-size: 24px;
   color: rgb(5, 5, 5);

package/src/client/components/inputv3/Rte/themes/PlaygroundEditorTheme.ts

@@ -88,7 +88,7 @@ const theme: EditorThemeClasses = {
     mark: 'PlaygroundEditorTheme__mark',
     markOverlap: 'PlaygroundEditorTheme__markOverlap',
     paragraph: 'PlaygroundEditorTheme__paragraph',
-    quote: 'PlaygroundEditorTheme__quote',
+    quote: '',
     rtl: 'PlaygroundEditorTheme__rtl',
     table: 'PlaygroundEditorTheme__table',
     tableCell: 'PlaygroundEditorTheme__tableCell',

package/src/common/data/rte/nodes.ts

@@ -35,8 +35,16 @@ import { StickyNode } from '@client/components/inputv3/Rte/nodes/StickyNode';
 import { TweetNode } from '@client/components/inputv3/Rte/nodes/TweetNode';
 import { YouTubeNode } from '@client/components/inputv3/Rte/nodes/YouTubeNode';
 
+import HeadingWithAnchorNode from '@client/components/inputv3/Rte/nodes/HeadingNode';
+
 const PlaygroundNodes: Array<Klass<LexicalNode>> = [
-    HeadingNode,
+    /*HeadingNode, */HeadingWithAnchorNode,
+    {
+        replace: HeadingNode,
+        with: (node) => {
+            return new HeadingWithAnchorNode( node.getTag(), node.__key );
+        }
+    },
     ListNode,
     ListItemNode,
     QuoteNode,

package/src/server/utils/rte.ts

@@ -10,7 +10,7 @@ import md5 from 'md5';
 import { fromBuffer } from 'file-type';
 import { JSDOM } from 'jsdom';
 // Lexical
-import { $getRoot, SerializedEditorState, SerializedLexicalNode } from 'lexical';
+import { $getRoot } from 'lexical';
 import { createHeadlessEditor } from '@lexical/headless';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
 
@@ -19,17 +19,46 @@ import { Anomaly } from '@common/errors';
 import editorNodes from '@common/data/rte/nodes';
 import ExampleTheme from '@client/components/inputv3/Rte/themes/PlaygroundEditorTheme';
 import type Driver from '@server/services/disks/driver';
+import Slug from '@server/utils/slug';
 
 /*----------------------------------
 - TYPES
 ----------------------------------*/
 
-type SerializedLexicalNodeWithSrc = SerializedLexicalNode & { src: string };
+type LexicalState = {
+    root: LexicalNode
+}
 
-type TAttachmentsOptions = {
-    disk: Driver,
-    directory: string,
-    prevVersion?: string | SerializedEditorState | null,
+type LexicalNode = {
+    version: number,
+    type: string,
+    children?: LexicalNode[],
+    // Attachement
+    src?: string;
+    // Headhing
+    text?: string;
+    anchor?: string;
+    tag?: string;
+}
+
+type TRenderOptions = {
+    attachements?: {
+        disk: Driver,
+        directory: string,
+        prevVersion?: string | LexicalState | null,
+    }
+}
+
+type TSkeleton = { 
+    id: string,
+    title: string, 
+    level: number, 
+    childrens: TSkeleton 
+}[];
+
+type TContentAssets = {
+    attachements: string[],
+    skeleton: TSkeleton
 }
 
 /*----------------------------------
@@ -39,70 +68,198 @@ type TAttachmentsOptions = {
 export class RteUtils {
 
     public async render( 
-        content: string | SerializedEditorState, 
-        attachementsOpts?: TAttachmentsOptions 
-    ) {
+        content: string | LexicalState, 
+        options: TRenderOptions = {}
+    ): Promise<TContentAssets & {
+        html: string,
+        json: string | LexicalState,
+    }> {
 
         // Parse content if string
+        let json: LexicalState;
         if (typeof content === 'string') {
             try {
-                content = JSON.parse(content) as SerializedEditorState;
+                json = JSON.parse(content) as LexicalState;
             } catch (error) { 
                 throw new Anomaly("Invalid JSON format for the given JSON RTE content.");
             }
+        } else
+            json = content;
+
+        // Parse prev version if string
+        if (typeof options?.attachements?.prevVersion === 'string') {
+            try {
+                options.attachements.prevVersion = JSON.parse(options.attachements.prevVersion) as LexicalState;
+            } catch (error) {
+                throw new Anomaly("Invalid JSON format for the given JSON RTE prev version.");
+            }
+        }
+
+        // Transform content
+        const assets: TContentAssets = {
+            attachements: [],
+            skeleton: []
         }
 
-        // Attachments
-        let attachements: string[] = [];
-        if (attachementsOpts) {
+        const root = await this.processContent(json.root, async (node) => {
+            return await this.transformNode(node, assets, options);
+        });
+
+        json = { ...json, root };
+
+        // Delete unused attachements
+        const attachementOptions = options?.attachements;
+        if (attachementOptions && attachementOptions.prevVersion !== undefined) {
+
+            await this.processContent(root, async (node) => {
+                return await this.deleteUnusedFile(node, assets, attachementOptions);
+            });
+        }
+
+        // Convert json to HTML
+        const html = await this.jsonToHtml( json );
+
+        return { html, json: content, ...assets };
+    }
+
+    private async processContent( 
+        node: LexicalNode, 
+        callback: (node: LexicalNode) => Promise<LexicalNode>
+    ) {
+
+        node = await callback(node);
+
+        // Recursion
+        if (node.children) {
+            for (let i = 0; i < node.children.length; i++) {
+
+                node.children[ i ] = await this.processContent( node.children[ i ], callback );
 
-            // Parse prev version if string
-            if (typeof attachementsOpts.prevVersion === 'string') {
-                try {
-                    attachementsOpts.prevVersion = JSON.parse(attachementsOpts.prevVersion) as SerializedEditorState;
-                } catch (error) {
-                    throw new Anomaly("Invalid JSON format for the given JSON RTE prev version.");
-                }
             }
+        }
+
+        return node;
+    }
+
+    private async transformNode(node: LexicalNode, assets: TContentAssets, options: TRenderOptions) {
 
-            // Upload attachments and replace blobs by URLs
-            attachements = await this.uploadAttachments(
-                content,
-                attachementsOpts.disk, attachementsOpts.directory,
-                attachementsOpts.prevVersion || undefined
+        // Attachment: Upload attachments and replace blobs by URLs
+        if (node.type === 'image' || node.type === 'file') {
+
+            await this.processAttachement(
+                node as With<LexicalNode, 'src'>,
+                assets,
+                options,
             );
+
+        } else if (node.type === 'anchored-heading') {
+
+            await this.processHeading(node, assets);
+
         }
 
-        // Convert content to HTML
-        const html = await this.jsonToHtml( content );
-        
-        return { html, json: content, attachements };
+        return node;
     }
 
-    public async htmlToJson(htmlString: string): Promise<SerializedEditorState> {
+    public async processAttachement(
+        node: LexicalNode,
+        assets: TContentAssets,
+        options: TRenderOptions
+    ) {
 
-        const editor = createHeadlessEditor({
-            nodes: editorNodes,
-            theme: ExampleTheme,
+        const attachementOptions = options?.attachements;
+        if (typeof node.src !== 'string' || !attachementOptions)
+            return;
+
+        // Already uploaded
+        if (!node.src.startsWith('data:')) {
+            assets.attachements.push(node.src);
+            return node.src;
+        }
+
+        // Transform into buffer
+        node.src = node.src.replace(/^data:\w+\/\w+;base64,/, '');
+        const fileData = Buffer.from(node.src, 'base64');
+
+        // Parse file type from buffer
+        const fileType = await fromBuffer(fileData);
+        if (!fileType)
+            throw new Error('Failed to detect file type');
+
+        // Upload file to disk
+        const fileName = md5(node.src) + '.' + fileType.ext;
+        const filePath = path.join(attachementOptions.directory, fileName);
+        const upoadedFile = await attachementOptions.disk.outputFile('data', filePath, fileData, {
+            encoding: 'binary'
         });
 
-        await editor.update(() => {
+        // Replace node.src with url
+        node.src = upoadedFile.path;
+        assets.attachements.push(node.src);
+    }
 
-            const root = $getRoot();
+    private async processHeading( node: LexicalNode, assets: TContentAssets ) {
 
-            const dom = new JSDOM(htmlString);
+        const title = this.jsonToText(node);
+        const titleLevel = parseInt(node.tag?.substring(1) || '1');
+        const titleSlug = await Slug.generate(title);
+        node.anchor = titleSlug;
 
-            // Once you have the DOM instance it's easy to generate LexicalNodes.
-            const lexicalNodes = $generateNodesFromDOM(editor, dom ? dom.window.document : window.document);
+        const findParentContainer = (skeleton: TSkeleton): TSkeleton => {
+            for (let i = skeleton.length - 1; i >= 0; i--) {
+                const child = skeleton[i];
 
-            lexicalNodes.forEach((node) => root.append(node));
+                if (child.level === titleLevel - 1) {
+                    return child.childrens;
+                } else if (child.level < titleLevel) {
+                    return findParentContainer(child.childrens);
+                }
+            }
+
+            return skeleton;
+        }
+
+        const parentContainer = (assets.skeleton.length === 0 || titleLevel === 1)
+            ? assets.skeleton
+            : findParentContainer(assets.skeleton);
+
+        parentContainer.push({
+            title,
+            id: titleSlug,
+            level: titleLevel,
+            childrens: []
         });
+    }
 
-        const state = editor.getEditorState();
-        return state.toJSON();
-    };
+    private async deleteUnusedFile( 
+        node: LexicalNode, 
+        assets: TContentAssets,
+        options: NonNullable<TRenderOptions["attachements"]>
+    ) {
+
+        if (!node.src)
+            return node;
 
-    public async jsonToHtml(jsonString: string) {
+        // Should be a URL
+        if (node.src.startsWith('data:') || !node.src.startsWith('http'))
+            return node;
+
+        // This file is used
+        if (assets.attachements.includes(node.src))
+            return node;
+
+        // Extract file name
+        const fileName = path.basename(node.src);
+        const filePath = path.join(options.directory, fileName);
+
+        // Delete file from disk
+        await options.disk.delete('data', filePath);
+        console.log('Deleted file:', filePath);
+
+        return node;
+    }
+
+    public async jsonToHtml( json: LexicalState ) {
 
         // Server side: simulate DOM environment
         const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
@@ -120,9 +277,9 @@ export class RteUtils {
         });
 
         // Set the editor state from JSON
-        const state = editor.parseEditorState(jsonString);
+        const state = editor.parseEditorState(json);
         if (state.isEmpty())
-            return null;
+            return '';
 
         editor.setEditorState(state);
 
@@ -131,105 +288,60 @@ export class RteUtils {
             return $generateHtmlFromNodes(editor);
         });
 
-            // Clean up global variables set for JSDOM to avoid memory leaks
+        // Clean up global variables set for JSDOM to avoid memory leaks
+        // @ts-ignore
         delete global.window;
+        // @ts-ignore
         delete global.document;
+        // @ts-ignore
         delete global.DOMParser;
+        // @ts-ignore
         delete global.MutationObserver;
 
         return html;
     }
 
-    public async uploadAttachments(
-        value: SerializedEditorState,
-        disk: Driver,
-        destination: string,
-        oldState?: SerializedEditorState
-    ) {
-
-        const usedFilesUrl: string[] = [];
+    private jsonToText( node: LexicalNode ) {
 
-        // Deep check for images / files
-        const findFiles = async (
-            node: SerializedLexicalNode,
-            callback: (node: SerializedLexicalNodeWithSrc) => Promise<void>
-        ) => {
+        let text = '';
 
-            // Attachment
-            if (node.type === 'image' || node.type === 'file') {
-                if (typeof node.src === 'string') {
-                    await callback(node as SerializedLexicalNodeWithSrc);
-                }
-                // Recursion
-            } else if (node.children) {
-                for (const child of node.children) {
-                    await findFiles(child, callback);
-                }
-            }
+        // Check if the node has text content
+        if (node.type === 'text' && node.text) {
+            text += node.text;
         }
 
-        const uploadFile = async (node: SerializedLexicalNodeWithSrc) => {
-
-            // Already uploaded
-            if (!node.src.startsWith('data:')) {
-                usedFilesUrl.push(node.src);
-                return node.src;
-            }
-
-            // Transform into buffer
-            node.src = node.src.replace(/^data:\w+\/\w+;base64,/, '');
-            const fileData = Buffer.from(node.src, 'base64');
-
-            // Parse file type from buffer
-            const fileType = await fromBuffer(fileData);
-            if (!fileType)
-                throw new Error('Failed to detect file type');
-
-            // Upload file to disk
-            const fileName = md5(node.src) + '.' + fileType.ext;
-            const filePath = path.join(destination, fileName);
-            const upoadedFile = await disk.outputFile('data', filePath, fileData, {
-                encoding: 'binary'
+        // Recursively process children nodes
+        if (node.children && Array.isArray(node.children)) {
+            node.children.forEach(childNode => {
+                text += this.jsonToText(childNode);
             });
-
-            // Replace node.src with url
-            node.src = upoadedFile.path;
-            usedFilesUrl.push(node.src);
         }
 
-        const deleteUnusedFile = async (node: SerializedLexicalNodeWithSrc) => {
+        return text;
+    }
 
-            // Should be a URL
-            if (node.src.startsWith('data:') || !node.src.startsWith('http'))
-                return;
+    public async htmlToJson(htmlString: string): Promise<LexicalState> {
 
-            // This file is used
-            if (usedFilesUrl.includes(node.src))
-                return;
+        const editor = createHeadlessEditor({
+            nodes: editorNodes,
+            theme: ExampleTheme,
+        });
 
-            // Extract file name
-            const fileName = path.basename(node.src);
-            const filePath = path.join(destination, fileName);
+        await editor.update(() => {
 
-            // Delete file from disk
-            await disk.delete('data', filePath);
-            console.log('Deleted file:', filePath);
-        }
+            const root = $getRoot();
 
-        // Find files in the editor state
-        for (const child of value.root.children) {
-            await findFiles(child, uploadFile);
-        }
+            const dom = new JSDOM(htmlString);
 
-        // Old state given: remove unused attachments
-        if (oldState !== undefined) {
-            for (const child of oldState.root.children) {
-                await findFiles(child, deleteUnusedFile);
-            }
-        }
+            // Once you have the DOM instance it's easy to generate LexicalNodes.
+            const lexicalNodes = $generateNodesFromDOM(editor, dom ? dom.window.document : window.document);
 
-        return usedFilesUrl;
-    }
+            lexicalNodes.forEach((node) => root.append(node));
+        });
+
+        const state = editor.getEditorState();
+        return state.toJSON();
+    };
 }
 
 export default new RteUtils;

package/src/server/utils/slug.ts

@@ -26,9 +26,9 @@ export class Slug {
         // Generate slug
         let slug = slugify(label, {
             replacement: '-',  // replace spaces with replacement character, defaults to `-`
-            remove: undefined, // remove characters that match regex, defaults to `undefined`
+            remove: /[^a-z\s]/ig, // remove characters that match regex, defaults to `undefined`
             lower: true,      // convert to lower case, defaults to `false`
-            strict: false,     // strip special characters except replacement, defaults to `false`
+            strict: true,     // strip special characters except replacement, defaults to `false`
             locale: 'vi',       // language code of the locale to use
             trim: true         // trim leading and trailing replacement chars, defaults to `true`
         });

package/src/client/components/inputv3/Rte/nodes/PlaygroundNodes.ts

@@ -1,76 +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 {Klass, LexicalNode} from 'lexical';
-
-import {CodeHighlightNode, CodeNode} from '@lexical/code';
-import {HashtagNode} from '@lexical/hashtag';
-import {AutoLinkNode, LinkNode} from '@lexical/link';
-import {ListItemNode, ListNode} from '@lexical/list';
-import {MarkNode} from '@lexical/mark';
-import {OverflowNode} from '@lexical/overflow';
-import {HorizontalRuleNode} from '@lexical/react/LexicalHorizontalRuleNode';
-import {HeadingNode, QuoteNode} from '@lexical/rich-text';
-import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
-
-import {CollapsibleContainerNode} from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
-import {CollapsibleContentNode} from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
-import {CollapsibleTitleNode} from '../plugins/CollapsiblePlugin/CollapsibleTitleNode';
-import {AutocompleteNode} from './AutocompleteNode';
-import {EmojiNode} from './EmojiNode';
-import {EquationNode} from './EquationNode';
-import {FigmaNode} from './FigmaNode';
-import {ImageNode} from './ImageNode';
-import {InlineImageNode} from './InlineImageNode/InlineImageNode';
-import {KeywordNode} from './KeywordNode';
-import {LayoutContainerNode} from './LayoutContainerNode';
-import {LayoutItemNode} from './LayoutItemNode';
-import {MentionNode} from './MentionNode';
-import {PageBreakNode} from './PageBreakNode';
-import {PollNode} from './PollNode';
-import {StickyNode} from './StickyNode';
-import {TweetNode} from './TweetNode';
-import {YouTubeNode} from './YouTubeNode';
-
-const PlaygroundNodes: Array<Klass<LexicalNode>> = [
-  HeadingNode,
-  ListNode,
-  ListItemNode,
-  QuoteNode,
-  CodeNode,
-  TableNode,
-  TableCellNode,
-  TableRowNode,
-  HashtagNode,
-  CodeHighlightNode,
-  AutoLinkNode,
-  LinkNode,
-  OverflowNode,
-  PollNode,
-  StickyNode,
-  ImageNode,
-  InlineImageNode,
-  MentionNode,
-  EmojiNode,
-  EquationNode,
-  AutocompleteNode,
-  KeywordNode,
-  HorizontalRuleNode,
-  TweetNode,
-  YouTubeNode,
-  FigmaNode,
-  MarkNode,
-  CollapsibleContainerNode,
-  CollapsibleContentNode,
-  CollapsibleTitleNode,
-  PageBreakNode,
-  LayoutContainerNode,
-  LayoutItemNode,
-];
-
-export default PlaygroundNodes;