Fixed: Move createSummernoteButton to ReactSummernote

Author: easylogic

.changeset/pretty-jars-scream.md

@@ -0,0 +1,7 @@
+---
+'@easylogic/react-summernote-lite': patch
+'@easylogic/react-summernote-bs4': patch
+'@easylogic/react-summernote': patch
+---
+
+Fixed: Move createSummernoteButton to ReactSummernote

apps/dev-storybook/src/stories/basic-api/createRange.stories.tsx

@@ -28,7 +28,8 @@ const CreateRangeComponent: React.FC = () => {
         <ReactSummernoteLite 
           id="sample" 
           onInit={({ note }) => {
-            nodeRef.current = note;
+            const range = note.summernote('createRange');
+            console.log(range);
           }} 
         />
       `}</pre>

apps/dev-storybook/src/stories/basic-api/focus.stories.tsx

@@ -16,7 +16,7 @@ const FocusTemplate: Story = {
     let $note: any = null;
     function doFocus() {
       if ($note) {
-        $note.summernote('Focus');
+        $note.summernote('focus');
       }
     }
 

apps/dev-storybook/src/stories/basic-api/fullscreen.toggle.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { ReactSummernoteLite, SummernoteCallbackInitProps } from '@easylogic/react-summernote-lite';
+import {
+  ReactSummernoteLite,
+  SummernoteCallbackInitProps,
+  SummernoteJQueryInstance,
+} from '@easylogic/react-summernote-lite';
 
 const meta = {
   title: 'Basic API/FullScreenToggle',
@@ -11,7 +15,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const FullScreenToggleComponent: React.FC = () => {
-  const noteRef = React.useRef<any>(null);
+  const noteRef = React.useRef<SummernoteJQueryInstance | null>(null);
 
   const doFullScreen = React.useCallback(() => {
     if (noteRef.current) {

apps/dev-storybook/src/stories/basic-api/undo.redo.stories.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { ReactSummernoteLite } from '@easylogic/react-summernote-lite';
 
 const meta: Meta<typeof ReactSummernoteLite> = {
@@ -18,14 +17,12 @@ export const UndoAndRedo: Story = {
     const doUndo = () => {
       if ($note.current) {
         $note.current.summernote('undo');
-        action('undo')();
       }
     };
 
     const doRedo = () => {
       if ($note.current) {
         $note.current.summernote('redo');
-        action('redo')();
       }
     };
 
@@ -39,7 +36,6 @@ export const UndoAndRedo: Story = {
           {...args}
           onInit={({ note }) => {
             $note.current = note;
-            action('onInit')(note);
           }}
         />
       </div>

json

@@ -1,50 +1,9 @@
-import React from 'react';
-import * as ReactDOM from 'react-dom/client';
 import 'jquery';
 import 'popper.js';
 import 'bootstrap';
 import 'summernote/dist/summernote-bs4';
 import 'summernote/dist/summernote-bs4.css';
-import {
-  Summernote,
-  SummernoteProps,
-  SummernoteContext,
-  SummernoteCustomButtonProps,
-} from '@easylogic/react-summernote';
-
-interface ButtonProps {
-  container?: string;
-  tooltip?: string;
-  contents?: string;
-  click?: () => void;
-}
-
-export function createSummernoteButton(opt: SummernoteCustomButtonProps): any {
-  return (context: SummernoteContext) => {
-    let buttonProps: ButtonProps = {
-      container: opt.container || 'body',
-      tooltip: opt.tooltip || 'sample',
-    };
-
-    if (opt.title && !opt.element) {
-      buttonProps.contents = opt.title;
-      buttonProps.click = () => {
-        opt?.onClick?.(context);
-      };
-      return context.ui.button(buttonProps).render();
-    } else {
-      const button = context.ui.button(buttonProps);
-      const el = button.render(); // return button as jquery object
-
-      if (opt?.element) {
-        const props = { context, ...opt.props };
-        ReactDOM.createRoot(el[0]).render(React.createElement(opt.element, props));
-      }
-
-      return el;
-    }
-  };
-}
+import { Summernote, SummernoteProps } from '@easylogic/react-summernote';
 
 export function ReactSummernoteBS4({ children, ...props }: SummernoteProps) {
   return <Summernote {...props}>{children}</Summernote>;

packages/react-summernote-bs4/src/summernote/ReactSummernoteBS4.tsx

@@ -1,51 +1,6 @@
-import React from 'react';
-import * as ReactDOM from 'react-dom/client';
 import 'summernote/dist/summernote-lite';
 import 'summernote/dist/summernote-lite.css';
-import {
-  Summernote,
-  SummernoteContext,
-  SummernoteCustomButtonProps,
-  SummernoteProps,
-} from '@easylogic/react-summernote';
-
-interface ButtonProps {
-  container?: string;
-  tooltip?: string;
-  contents?: string;
-  click?: () => void;
-}
-
-export function createSummernoteButton(opt: SummernoteCustomButtonProps): any {
-  return (context: SummernoteContext) => {
-    let buttonProps: ButtonProps = {
-      container: opt.container || 'body',
-      tooltip: opt.tooltip || 'sample',
-    };
-
-    if (opt.title && !opt.element && !opt.render) {
-      buttonProps.contents = opt.title;
-      buttonProps.click = () => {
-        opt?.onClick?.(context);
-      };
-      return context.ui.button(buttonProps).render();
-    } else {
-      const button = context.ui.button(buttonProps);
-      const el = button.render(); // return button as jquery object
-      const props = { context, ...opt.props };
-
-      if (opt?.render) {
-        ReactDOM.createRoot(el[0]).render(opt.render(props));
-      }
-
-      if (opt?.element && React.isValidElement(React.createElement(opt.element, props))) {
-        ReactDOM.createRoot(el[0]).render(React.createElement(opt.element, props));
-      }
-
-      return el;
-    }
-  };
-}
+import { Summernote, SummernoteProps } from '@easylogic/react-summernote';
 
 export function ReactSummernoteLite({ children, ...props }: SummernoteProps) {
   return <Summernote {...props}>{children}</Summernote>;

packages/react-summernote-lite/src/summernote/ReactSummernoteLite.tsx

@@ -1,6 +1,13 @@
-import { useEffect, useId, useState } from 'react';
+import React, { useEffect, useId, useState } from 'react';
+import * as ReactDOM from 'react-dom/client';
 import $ from 'jquery';
-import { SummernoteProps, SummernoteContext, SummernotePluginInterface, SummernoteCallbackInitProps } from '../types';
+import {
+  SummernoteProps,
+  SummernoteContext,
+  SummernotePluginInterface,
+  SummernoteCallbackInitProps,
+  SummernoteCustomButtonProps,
+} from '../types';
 
 export type SummernoteEventNames =
   | 'init'
@@ -56,6 +63,44 @@ export function createSummernotePlugin(name: string, PluginClass: SummernotePlug
   });
 }
 
+interface ButtonProps {
+  container?: string;
+  tooltip?: string;
+  contents?: string;
+  click?: () => void;
+}
+
+export function createSummernoteButton(opt: SummernoteCustomButtonProps): any {
+  return (context: SummernoteContext) => {
+    let buttonProps: ButtonProps = {
+      container: opt.container || 'body',
+      tooltip: opt.tooltip || 'sample',
+    };
+
+    if (opt.title && !opt.element && !opt.render) {
+      buttonProps.contents = opt.title;
+      buttonProps.click = () => {
+        opt?.onClick?.(context);
+      };
+      return context.ui.button(buttonProps).render();
+    } else {
+      const button = context.ui.button(buttonProps);
+      const el = button.render(); // return button as jquery object
+      const props = { context, ...opt.props };
+
+      if (opt?.render) {
+        ReactDOM.createRoot(el[0]).render(opt.render(props));
+      }
+
+      if (opt?.element && React.isValidElement(React.createElement(opt.element, props))) {
+        ReactDOM.createRoot(el[0]).render(React.createElement(opt.element, props));
+      }
+
+      return el;
+    }
+  };
+}
+
 export function setSummernoteLang(langInfo: any) {
   const jQuery = $ as any;
 

packages/react-summernote/src/component/Summernote.tsx

@@ -91,7 +91,8 @@ export type SummernoteCommand =
   | 'formatH5'
   | 'formatH6'
   | 'isEmpty'
-  | string;
+  | 'fullscreen.toggle'
+  | (string & {});
 
 export interface SummernoteCommandCallback {
   (command: 'justify' | 'justifyLeft' | 'justifyCenter' | 'justifyRight' | 'justifyFull'): void;