grep-components 2.1.0-GREPF-1810.1 → 2.1.0-GREPF-1810.2

package/dist/build/components/GrepEditor/components/plugins/HeadingPlugin.d.ts

@@ -0,0 +1,3 @@
+export default function HeadingPlugin({ html }: {
+    html?: string;
+}): null;

package/dist/build/components/GrepEditor/stories/GrepEditor.stories.d.ts

@@ -53,3 +53,15 @@ export declare const WithLabel: {
         name: string;
     };
 };
+export declare const OnlyHeading: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const ReadOnly: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/index.js

@@ -56,7 +56,7 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
-import require$$3, { BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND, TextNode, ParagraphNode, PASTE_COMMAND, $createTextNode, $insertNodes, RootNode, LineBreakNode, $getSelection, $isRangeSelection, $isTextNode, $isParagraphNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND } from 'lexical';
+import require$$3, { BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND, TextNode, ParagraphNode, PASTE_COMMAND, $createTextNode, $insertNodes, RootNode, LineBreakNode, $getSelection, $isRangeSelection, $isTextNode, $isParagraphNode, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, $createParagraphNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
@@ -16109,12 +16109,12 @@ function FloatingTextFormatToolbarPlugin({ anchorElem, buttons, CustomToolbar, }
 function InsertDataPlugin({ html }) {
     const [editor] = useLexicalComposerContext();
     const parser = new DOMParser();
-    if (!html) {
-        return null;
-    }
-    const dom = parser.parseFromString(html, 'text/html');
     // Initial data insertion
     useEffect(() => {
+        if (!html) {
+            return;
+        }
+        const dom = parser.parseFromString(html, 'text/html');
         editor.update(() => {
             const nodes = LexicalHtml_1.$generateNodesFromDOM(editor, dom);
             $insertNodes(nodes);
@@ -16123,6 +16123,35 @@ function InsertDataPlugin({ html }) {
     return null;
 }
 
+const getTagType = (html) => {
+    if (!html) {
+        return null;
+    }
+    const tag = html.match(/^<h[0-6]>/); // Matches h tag at start of line
+    const tagType = tag && tag[0].replace('<', '').replace('>', '');
+    return tagType;
+};
+/* Changes behavior of editor, based on the input html: (Only heading, No heading) */
+function HeadingPlugin({ html }) {
+    const [editor] = useLexicalComposerContext();
+    const tag = getTagType(html);
+    useEffect(() => {
+        // Only replace if tag is heading.
+        if (tag) {
+            editor.registerNodeTransform(ParagraphNode, (node) => {
+                node.replace(LexicalRichText_1.$createHeadingNode(`${tag}`));
+            });
+        }
+        else {
+            // Replace a heading with paragraph
+            editor.registerNodeTransform(LexicalRichText_1.HeadingNode, (node) => {
+                node.replace($createParagraphNode(), true);
+            });
+        }
+    }, [editor, html]);
+    return null;
+}
+
 // Classes here are added to the relevant tags i.e.(<strong>)
 const theme = {
     text: {
@@ -16141,6 +16170,7 @@ function Editor({ html, label, classes, autoFocus, helperText, showCharCount, al
     const initialConfig = {
         namespace: 'GrepEditor',
         theme,
+        editable: !readOnly,
         onError,
         nodes: [LexicalRichText_1.HeadingNode],
         html: {
@@ -16164,6 +16194,7 @@ function Editor({ html, label, classes, autoFocus, helperText, showCharCount, al
             React__default.createElement(HistoryPlugin, null),
             React__default.createElement(OnChangePlugin, { onChange: onContentChange }),
             React__default.createElement(InsertDataPlugin, { html: html }),
+            React__default.createElement(HeadingPlugin, { html: html }),
             React__default.createElement(ModifyPastePlugin, { blockPasting: blockPasting, stripPastedStyles: stripPastedStyles }),
             React__default.createElement(PreventNewlinesPlugin, { disableNewlines: disableNewlines }))));
 }