npm - 5htp-core - Versions diffs - 0.4.8 → 0.4.9-2 - Mend

5htp-core 0.4.8 → 0.4.9-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

package/src/{common/data/rte/index.ts → server/utils/rte.ts} RENAMED Viewed

@@ -1,26 +1,35 @@
-import { createHeadlessEditor } from '@lexical/headless';
-import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
-import { $getRoot } from 'lexical';
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+// Npm
+import { createHeadlessEditor } from '@lexical/headless';
+import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
+import { $getRoot, SerializedEditorState } from 'lexical';
 import { JSDOM } from 'jsdom';
-import editorNodes from './nodes';
+// Core
+import editorNodes from '@common/data/rte/nodes';
+import ExampleTheme from '@client/components/inputv3/Rte/themes/PlaygroundEditorTheme';
-export const htmlToJson = async (htmlString: string) => {
+/*----------------------------------
+- FUNCTIONS
+----------------------------------*/
+export const htmlToJson = async (htmlString: string): Promise<SerializedEditorState> => {
-    const editor = createHeadlessEditor({
-        nodes: editorNodes
+    const editor = createHeadlessEditor({
+        nodes: editorNodes,
+        theme: ExampleTheme,
     });
     await editor.update(() => {
         const root = $getRoot();
-        // In a headless environment you can use a package such as JSDom to parse the HTML string.
         const dom = new JSDOM(htmlString);
         // Once you have the DOM instance it's easy to generate LexicalNodes.
-        const lexicalNodes = $generateNodesFromDOM(editor, dom.window.document);
+        const lexicalNodes = $generateNodesFromDOM(editor, dom ? dom.window.document : window.document);
         lexicalNodes.forEach((node) => root.append(node));
     });
@@ -30,18 +39,20 @@ export const htmlToJson = async (htmlString: string) => {
 };
 export const jsonToHtml = async (jsonString: string) => {
+    // Server side: simulate DOM environment
     const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
     global.window = dom.window;
     global.document = dom.window.document;
     global.DOMParser = dom.window.DOMParser;
     global.MutationObserver = dom.window.MutationObserver;
     // Create a headless Lexical editor instance
     const editor = createHeadlessEditor({
         namespace: 'headless',
         editable: false,
+        nodes: editorNodes,
+        theme: ExampleTheme,
     });
     // Set the editor state from JSON
@@ -49,14 +60,14 @@ export const jsonToHtml = async (jsonString: string) => {
     if (state.isEmpty())
         return null;
-    editor.setEditorState( state );
+    editor.setEditorState(state);
     // Generate HTML from the Lexical nodes
     const html = await editor.getEditorState().read(() => {
         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
     delete global.window;
     delete global.document;
     delete global.DOMParser;

package/src/client/components/inputv3/Rte/ExampleTheme.tsx DELETED Viewed

@@ -1,42 +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.
- *
- */
-export default {
-    code: 'editor-code',
-    heading: {
-        h1: 'editor-heading-h1',
-        h2: 'editor-heading-h2',
-        h3: 'editor-heading-h3',
-        h4: 'editor-heading-h4',
-        h5: 'editor-heading-h5',
-    },
-    image: 'editor-image',
-    link: 'editor-link',
-    list: {
-        listitem: 'editor-listitem',
-        nested: {
-            listitem: 'editor-nested-listitem',
-        },
-        ol: 'editor-list-ol',
-        ul: 'editor-list-ul',
-    },
-    ltr: 'ltr',
-    paragraph: 'editor-paragraph',
-    placeholder: 'editor-placeholder',
-    quote: 'editor-quote',
-    rtl: 'rtl',
-    text: {
-        bold: 'editor-text-bold',
-        code: 'editor-text-code',
-        hashtag: 'editor-text-hashtag',
-        italic: 'editor-text-italic',
-        overflowed: 'editor-text-overflowed',
-        strikethrough: 'editor-text-strikethrough',
-        underline: 'editor-text-underline',
-        underlineStrikethrough: 'editor-text-underlineStrikethrough',
-    },
-};

package/src/client/components/inputv3/Rte/ToolbarPlugin.tsx DELETED Viewed

@@ -1,167 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { mergeRegister } from '@lexical/utils';
-import {
-    $getSelection,
-    $isRangeSelection,
-    CAN_REDO_COMMAND,
-    CAN_UNDO_COMMAND,
-    FORMAT_ELEMENT_COMMAND,
-    FORMAT_TEXT_COMMAND,
-    REDO_COMMAND,
-    SELECTION_CHANGE_COMMAND,
-    UNDO_COMMAND,
-} from 'lexical';
-import React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-const LowPriority = 1;
-function Divider() {
-    return <div className="divider" />;
-}
-export default function ToolbarPlugin() {
-    const [editor] = useLexicalComposerContext();
-    const toolbarRef = useRef(null);
-    const [canUndo, setCanUndo] = useState(false);
-    const [canRedo, setCanRedo] = useState(false);
-    const [isBold, setIsBold] = useState(false);
-    const [isItalic, setIsItalic] = useState(false);
-    const [isUnderline, setIsUnderline] = useState(false);
-    const [isStrikethrough, setIsStrikethrough] = useState(false);
-    const $updateToolbar = useCallback(() => {
-        const selection = $getSelection();
-        if ($isRangeSelection(selection)) {
-            // Update text format
-            setIsBold(selection.hasFormat('bold'));
-            setIsItalic(selection.hasFormat('italic'));
-            setIsUnderline(selection.hasFormat('underline'));
-            setIsStrikethrough(selection.hasFormat('strikethrough'));
-        }
-    }, []);
-    useEffect(() => {
-        return mergeRegister(
-            editor.registerUpdateListener(({ editorState }) => {
-                editorState.read(() => {
-                    $updateToolbar();
-                });
-            }),
-            editor.registerCommand(
-                SELECTION_CHANGE_COMMAND,
-                (_payload, _newEditor) => {
-                    $updateToolbar();
-                    return false;
-                },
-                LowPriority,
-            ),
-            editor.registerCommand(
-                CAN_UNDO_COMMAND,
-                (payload) => {
-                    setCanUndo(payload);
-                    return false;
-                },
-                LowPriority,
-            ),
-            editor.registerCommand(
-                CAN_REDO_COMMAND,
-                (payload) => {
-                    setCanRedo(payload);
-                    return false;
-                },
-                LowPriority,
-            ),
-        );
-    }, [editor, $updateToolbar]);
-    return (
-        <div className="toolbar" ref={toolbarRef}>
-            <button
-                disabled={!canUndo}
-                onClick={() => {
-                    editor.dispatchCommand(UNDO_COMMAND, undefined);
-                }}
-                className="toolbar-item spaced"
-                aria-label="Undo">
-                <i className="format undo" />
-            </button>
-            <button
-                disabled={!canRedo}
-                onClick={() => {
-                    editor.dispatchCommand(REDO_COMMAND, undefined);
-                }}
-                className="toolbar-item"
-                aria-label="Redo">
-                <i className="format redo" />
-            </button>
-            <Divider />
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
-                }}
-                className={'toolbar-item spaced ' + (isBold ? 'active' : '')}
-                aria-label="Format Bold">
-                <i className="format bold" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
-                }}
-                className={'toolbar-item spaced ' + (isItalic ? 'active' : '')}
-                aria-label="Format Italics">
-                <i className="format italic" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
-                }}
-                className={'toolbar-item spaced ' + (isUnderline ? 'active' : '')}
-                aria-label="Format Underline">
-                <i className="format underline" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
-                }}
-                className={'toolbar-item spaced ' + (isStrikethrough ? 'active' : '')}
-                aria-label="Format Strikethrough">
-                <i className="format strikethrough" />
-            </button>
-            <Divider />
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
-                }}
-                className="toolbar-item spaced"
-                aria-label="Left Align">
-                <i className="format left-align" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
-                }}
-                className="toolbar-item spaced"
-                aria-label="Center Align">
-                <i className="format center-align" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
-                }}
-                className="toolbar-item spaced"
-                aria-label="Right Align">
-                <i className="format right-align" />
-            </button>
-            <button
-                onClick={() => {
-                    editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
-                }}
-                className="toolbar-item"
-                aria-label="Justify Align">
-                <i className="format justify-align" />
-            </button>{' '}
-        </div>
-    );
-}

package/src/client/components/inputv3/Rte/icons/LICENSE.md DELETED Viewed

@@ -1,5 +0,0 @@
-Bootstrap Icons
-https://icons.getbootstrap.com
-Licensed under MIT license
-https://github.com/twbs/icons/blob/main/LICENSE.md

package/src/client/components/inputv3/Rte/icons/arrow-clockwise.svg DELETED Viewed

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/arrow-counterclockwise.svg DELETED Viewed

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/journal-text.svg DELETED Viewed

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
-  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
-  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
-  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/justify.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/text-center.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-center" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M4 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/text-left.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/text-paragraph.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/text-right.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-right" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-4-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/type-bold.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
-  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/type-italic.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
-  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/type-strikethrough.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16">
-  <path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/>
-</svg>

package/src/client/components/inputv3/Rte/icons/type-underline.svg DELETED Viewed

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
-  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
-</svg>