@wangeditor-next/editor-for-react 1.0.10 → 2.0.0
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.
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
1. 安装组件包
|
|
13
13
|
|
|
14
14
|
```shell
|
|
15
|
-
|
|
15
|
+
pnpm add @wangeditor-next/editor-for-react
|
|
16
16
|
# 或者npm install @wangeditor-next/editor-for-react --save
|
|
17
17
|
|
|
18
18
|
```
|
|
@@ -20,7 +20,7 @@ yarn add @wangeditor-next/editor-for-react
|
|
|
20
20
|
2. 安装核心包
|
|
21
21
|
|
|
22
22
|
```shell
|
|
23
|
-
|
|
23
|
+
pnpm add @wangeditor-next/editor
|
|
24
24
|
|
|
25
25
|
# 或者 npm install @wangeditor-next/editor --save
|
|
26
26
|
```
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
* @description editor react component
|
|
3
3
|
* @author wangfupeng
|
|
4
4
|
*/
|
|
5
|
-
import { IDomEditor, IEditorConfig
|
|
5
|
+
import type { IDomEditor, IEditorConfig } from '@wangeditor-next/editor';
|
|
6
|
+
import { SlateDescendant } from '@wangeditor-next/editor';
|
|
6
7
|
import React from 'react';
|
|
7
8
|
interface IProps {
|
|
8
9
|
defaultContent?: SlateDescendant[];
|
|
@@ -15,5 +16,5 @@ interface IProps {
|
|
|
15
16
|
style?: React.CSSProperties;
|
|
16
17
|
className?: string;
|
|
17
18
|
}
|
|
18
|
-
declare function EditorComponent(props: Partial<IProps>):
|
|
19
|
+
declare function EditorComponent(props: Partial<IProps>): React.JSX.Element;
|
|
19
20
|
export default EditorComponent;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* @author wangfupeng
|
|
4
4
|
*/
|
|
5
5
|
import * as wangEditor from '@wangeditor-next/editor';
|
|
6
|
+
import React from 'react';
|
|
6
7
|
interface IProps {
|
|
7
8
|
editor: wangEditor.IDomEditor | null;
|
|
8
9
|
defaultConfig?: Partial<wangEditor.IToolbarConfig>;
|
|
@@ -10,5 +11,5 @@ interface IProps {
|
|
|
10
11
|
style?: object;
|
|
11
12
|
className?: string;
|
|
12
13
|
}
|
|
13
|
-
declare function ToolbarComponent(props: IProps):
|
|
14
|
+
declare function ToolbarComponent(props: IProps): React.JSX.Element;
|
|
14
15
|
export default ToolbarComponent;
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@wangeditor-next/editor"),require("react")):"function"==typeof define&&define.amd?define(["exports","@wangeditor-next/editor","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).WangEditorForReact={},e.wangEditor,e.React)}(this,function(e,t,r){"use strict";function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var o=n(t),
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@wangeditor-next/editor"),require("react")):"function"==typeof define&&define.amd?define(["exports","@wangeditor-next/editor","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).WangEditorForReact={},e.wangEditor,e.React)}(this,function(e,t,r){"use strict";function n(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var o=n(t),u=function(){return u=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},u.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,e.Editor=function(e){var n=e.defaultContent,o=void 0===n?[]:n,a=e.onCreated,l=e.defaultHtml,i=void 0===l?"":l,c=e.value,f=void 0===c?"":c,d=e.onChange,s=e.defaultConfig,v=void 0===s?{}:s,y=e.mode,g=void 0===y?"default":y,m=e.style,p=void 0===m?{}:m,b=e.className,h=r.useRef(null),E=r.useRef(""),_=r.useRef(!1),w=function(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,u=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=u.next()).done;)a.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=u.return)&&r.call(u)}finally{if(o)throw o.error}}return a}(r.useState(null),2),C=w[0],O=w[1],j=function(e){a&&a(e);var t=v.onCreated;t&&t(e)},x=function(e){var t=v.onDestroyed;O(null),t&&t(e)};return r.useEffect(function(){if(null!=C)return C.__react_on_change=function(e){var t=e.getHtml(),r=E.current;if(E.current=t,!_.current&&t!==r){d&&d(e);var n=v.onChange;n&&n(e)}},function(){C.__react_on_change=void 0}},[C,v,d]),r.useEffect(function(){if(null!=C&&f!==E.current)try{_.current=!0,C.setHtml(f),E.current=C.getHtml()}catch(e){console.error(e)}finally{_.current=!1}},[C,f]),r.useEffect(function(){var e;if(null!=h.current&&null==C&&!(null===(e=h.current)||void 0===e?void 0:e.getAttribute("data-w-e-textarea"))){var r=t.createEditor({selector:h.current,config:u(u({},v),{onCreated:j,onChange:function(e){var t;return null===(t=null==r?void 0:r.__react_on_change)||void 0===t?void 0:t.call(r,e)},onDestroyed:x}),content:o,html:i||f,mode:g});E.current=r.getHtml(),O(r)}},[C]),r.createElement("div",{style:p,ref:h,className:b})},e.Toolbar=function(e){var t=e.editor,n=e.defaultConfig,u=void 0===n?{}:n,a=e.mode,l=void 0===a?"default":a,i=e.style,c=void 0===i?{}:i,f=e.className,d=r.useRef(null);return r.useEffect(function(){var e;if(null!=d.current&&null!=t&&!(null===(e=d.current)||void 0===e?void 0:e.getAttribute("data-w-e-toolbar"))){var r=o.createToolbar({editor:t,selector:d.current,config:u,mode:l});return function(){var e;r&&(r.destroy(),null===(e=d.current)||void 0===e||e.removeAttribute("data-w-e-toolbar"))}}},[t,u,l]),r.createElement("div",{style:c,ref:d,className:f})}});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/Editor.tsx","../src/components/Toolbar.tsx"],"sourcesContent":["/**\n * @description editor react component\n * @author wangfupeng\n */\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Editor.tsx","../src/components/Toolbar.tsx"],"sourcesContent":["/**\n * @description editor react component\n * @author wangfupeng\n */\n\nimport type { IDomEditor, IEditorConfig } from '@wangeditor-next/editor'\nimport {\n createEditor, SlateDescendant,\n} from '@wangeditor-next/editor'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface IProps {\n defaultContent?: SlateDescendant[]\n onCreated?: (editor: IDomEditor) => void\n defaultHtml?: string\n value?: string\n onChange: (editor: IDomEditor) => void\n defaultConfig: Partial<IEditorConfig>\n mode?: string\n style?: React.CSSProperties\n className?: string\n}\n\ninterface ICustomDomEditor extends IDomEditor {\n __react_on_change?: (editor: ICustomDomEditor) => void;\n}\n\nfunction EditorComponent(props: Partial<IProps>) {\n const {\n defaultContent = [], onCreated, defaultHtml = '', value = '', onChange, defaultConfig = {}, mode = 'default', style = {}, className,\n } = props\n const ref = useRef<HTMLDivElement>(null)\n const latestHtmlRef = useRef('')\n const isSyncingFromPropsRef = useRef(false)\n const [editor, setEditor] = useState<ICustomDomEditor | null>(null)\n\n const handleCreated = (createdEditor: IDomEditor) => {\n // 组件属性 onCreated\n if (onCreated) { onCreated(createdEditor) }\n\n // 编辑器 配置 onCreated\n const { onCreated: onCreatedFromConfig } = defaultConfig\n\n if (onCreatedFromConfig) { onCreatedFromConfig(createdEditor) }\n }\n\n const handleDestroyed = (destroyedEditor: IDomEditor) => {\n const { onDestroyed } = defaultConfig\n\n setEditor(null)\n if (onDestroyed) {\n onDestroyed(destroyedEditor)\n }\n }\n\n useEffect(() => {\n if (editor == null) { return }\n\n // eslint-disable-next-line no-underscore-dangle\n editor.__react_on_change = (e: IDomEditor) => {\n const latestHtml = e.getHtml()\n const prevHtml = latestHtmlRef.current\n\n latestHtmlRef.current = latestHtml // 记录当前 html 值\n\n // 由 props 同步触发 setHtml 时，不向外触发 onChange，避免受控场景产生回环\n if (isSyncingFromPropsRef.current) { return }\n\n // 仅在内容发生变化时触发，对齐输入控件 onChange 语义（忽略选区/焦点变化）\n if (latestHtml === prevHtml) { return }\n\n // 组件属性 onChange\n if (onChange) { onChange(e) }\n\n // 编辑器 配置 onChange\n const { onChange: onChangeFromConfig } = defaultConfig\n\n if (onChangeFromConfig) { onChangeFromConfig(e) }\n }\n return () => {\n // eslint-disable-next-line no-underscore-dangle\n editor.__react_on_change = undefined\n }\n }, [editor, defaultConfig, onChange])\n\n // value 变化，重置 HTML\n useEffect(() => {\n if (editor == null) { return }\n\n if (value === latestHtmlRef.current) { return } // 如果和当前 html 值相等，则忽略\n\n // ------ 重新设置 HTML ------\n try {\n isSyncingFromPropsRef.current = true\n editor.setHtml(value)\n latestHtmlRef.current = editor.getHtml()\n } catch (error) {\n console.error(error)\n } finally {\n isSyncingFromPropsRef.current = false\n }\n }, [editor, value])\n\n useEffect(() => {\n if (ref.current == null) { return }\n if (editor != null) { return }\n // 防止重复渲染 当编辑器已经创建就不在创建了\n if (ref.current?.getAttribute('data-w-e-textarea')) { return }\n\n const newEditor = createEditor({\n selector: ref.current,\n config: {\n ...defaultConfig,\n onCreated: handleCreated,\n // eslint-disable-next-line no-underscore-dangle\n onChange: (e: IDomEditor) => newEditor?.__react_on_change?.(e),\n onDestroyed: handleDestroyed,\n },\n content: defaultContent,\n html: defaultHtml || value,\n mode,\n })as ICustomDomEditor\n\n latestHtmlRef.current = newEditor.getHtml()\n setEditor(newEditor)\n }, [editor])\n\n return <div style={style} ref={ref} className={className}></div>\n}\n\nexport default EditorComponent\n","/**\n * @description toolbar react component\n * @author wangfupeng\n */\n\nimport * as wangEditor from '@wangeditor-next/editor'\nimport React, { useEffect, useRef } from 'react'\n\ninterface IProps {\n editor: wangEditor.IDomEditor | null\n defaultConfig?: Partial<wangEditor.IToolbarConfig>\n mode?: string\n style?: object\n className?: string\n}\n\nfunction ToolbarComponent(props: IProps) {\n const {\n editor, defaultConfig = {}, mode = 'default', style = {}, className,\n } = props\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (ref.current == null || editor == null) { return }\n if (ref.current?.getAttribute('data-w-e-toolbar')) { return }\n\n const toolbar = wangEditor.createToolbar({\n editor,\n selector: ref.current,\n config: defaultConfig,\n mode,\n })\n\n return () => {\n if (toolbar) {\n toolbar.destroy()\n ref.current?.removeAttribute('data-w-e-toolbar')\n }\n }\n }, [editor, defaultConfig, mode])\n\n return <div style={style} ref={ref} className={className}></div>\n}\n\nexport default ToolbarComponent\n"],"names":["props","_a","defaultContent","onCreated","_b","defaultHtml","_c","value","onChange","_d","defaultConfig","_e","mode","_f","style","className","ref","useRef","latestHtmlRef","isSyncingFromPropsRef","_g","__read","useState","editor","setEditor","handleCreated","createdEditor","onCreatedFromConfig","handleDestroyed","destroyedEditor","onDestroyed","useEffect","__react_on_change","e","latestHtml","getHtml","prevHtml","current","onChangeFromConfig","undefined","setHtml","error","console","getAttribute","newEditor","createEditor","selector","config","__assign","call","content","html","React","createElement","toolbar","wangEditor","createToolbar","destroy","removeAttribute"],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"@wangeditor-next/editor";import{createEditor as t}from"@wangeditor-next/editor";import e,{useRef as n,useState as o,useEffect as a}from"react";var l=function(){return l=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},l.apply(this,arguments)};function u(r){var u=r.defaultContent,i=void 0===u?[]:u,c=r.onCreated,d=r.defaultHtml,f=void 0===d?"":d,v=r.value,s=void 0===v?"":v,m=r.onChange,y=r.defaultConfig,g=void 0===y?{}:y,p=r.mode,h=void 0===p?"default":p,_=r.style,b=void 0===_?{}:_,C=r.className,w=n(null),x=n(""),E=n(!1),H=function(r,t){var e="function"==typeof Symbol&&r[Symbol.iterator];if(!e)return r;var n,o,a=e.call(r),l=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)l.push(n.value)}catch(r){o={error:r}}finally{try{n&&!n.done&&(e=a.return)&&e.call(a)}finally{if(o)throw o.error}}return l}(o(null),2),N=H[0],S=H[1],A=function(r){c&&c(r);var t=g.onCreated;t&&t(r)},O=function(r){var t=g.onDestroyed;S(null),t&&t(r)};return a(function(){if(null!=N)return N.__react_on_change=function(r){var t=r.getHtml(),e=x.current;if(x.current=t,!E.current&&t!==e){m&&m(r);var n=g.onChange;n&&n(r)}},function(){N.__react_on_change=void 0}},[N,g,m]),a(function(){if(null!=N&&s!==x.current)try{E.current=!0,N.setHtml(s),x.current=N.getHtml()}catch(r){console.error(r)}finally{E.current=!1}},[N,s]),a(function(){var r;if(null!=w.current&&null==N&&!(null===(r=w.current)||void 0===r?void 0:r.getAttribute("data-w-e-textarea"))){var e=t({selector:w.current,config:l(l({},g),{onCreated:A,onChange:function(r){var t;return null===(t=null==e?void 0:e.__react_on_change)||void 0===t?void 0:t.call(e,r)},onDestroyed:O}),content:i,html:f||s,mode:h});x.current=e.getHtml(),S(e)}},[N]),e.createElement("div",{style:b,ref:w,className:C})}function i(t){var o=t.editor,l=t.defaultConfig,u=void 0===l?{}:l,i=t.mode,c=void 0===i?"default":i,d=t.style,f=void 0===d?{}:d,v=t.className,s=n(null);return a(function(){var t;if(null!=s.current&&null!=o&&!(null===(t=s.current)||void 0===t?void 0:t.getAttribute("data-w-e-toolbar"))){var e=r.createToolbar({editor:o,selector:s.current,config:u,mode:c});return function(){var r;e&&(e.destroy(),null===(r=s.current)||void 0===r||r.removeAttribute("data-w-e-toolbar"))}}},[o,u,c]),e.createElement("div",{style:f,ref:s,className:v})}"function"==typeof SuppressedError&&SuppressedError;export{u as Editor,i as Toolbar};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/components/Editor.tsx","../src/components/Toolbar.tsx"],"sourcesContent":["/**\n * @description editor react component\n * @author wangfupeng\n */\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/components/Editor.tsx","../src/components/Toolbar.tsx"],"sourcesContent":["/**\n * @description editor react component\n * @author wangfupeng\n */\n\nimport type { IDomEditor, IEditorConfig } from '@wangeditor-next/editor'\nimport {\n createEditor, SlateDescendant,\n} from '@wangeditor-next/editor'\nimport React, { useEffect, useRef, useState } from 'react'\n\ninterface IProps {\n defaultContent?: SlateDescendant[]\n onCreated?: (editor: IDomEditor) => void\n defaultHtml?: string\n value?: string\n onChange: (editor: IDomEditor) => void\n defaultConfig: Partial<IEditorConfig>\n mode?: string\n style?: React.CSSProperties\n className?: string\n}\n\ninterface ICustomDomEditor extends IDomEditor {\n __react_on_change?: (editor: ICustomDomEditor) => void;\n}\n\nfunction EditorComponent(props: Partial<IProps>) {\n const {\n defaultContent = [], onCreated, defaultHtml = '', value = '', onChange, defaultConfig = {}, mode = 'default', style = {}, className,\n } = props\n const ref = useRef<HTMLDivElement>(null)\n const latestHtmlRef = useRef('')\n const isSyncingFromPropsRef = useRef(false)\n const [editor, setEditor] = useState<ICustomDomEditor | null>(null)\n\n const handleCreated = (createdEditor: IDomEditor) => {\n // 组件属性 onCreated\n if (onCreated) { onCreated(createdEditor) }\n\n // 编辑器 配置 onCreated\n const { onCreated: onCreatedFromConfig } = defaultConfig\n\n if (onCreatedFromConfig) { onCreatedFromConfig(createdEditor) }\n }\n\n const handleDestroyed = (destroyedEditor: IDomEditor) => {\n const { onDestroyed } = defaultConfig\n\n setEditor(null)\n if (onDestroyed) {\n onDestroyed(destroyedEditor)\n }\n }\n\n useEffect(() => {\n if (editor == null) { return }\n\n // eslint-disable-next-line no-underscore-dangle\n editor.__react_on_change = (e: IDomEditor) => {\n const latestHtml = e.getHtml()\n const prevHtml = latestHtmlRef.current\n\n latestHtmlRef.current = latestHtml // 记录当前 html 值\n\n // 由 props 同步触发 setHtml 时，不向外触发 onChange，避免受控场景产生回环\n if (isSyncingFromPropsRef.current) { return }\n\n // 仅在内容发生变化时触发，对齐输入控件 onChange 语义（忽略选区/焦点变化）\n if (latestHtml === prevHtml) { return }\n\n // 组件属性 onChange\n if (onChange) { onChange(e) }\n\n // 编辑器 配置 onChange\n const { onChange: onChangeFromConfig } = defaultConfig\n\n if (onChangeFromConfig) { onChangeFromConfig(e) }\n }\n return () => {\n // eslint-disable-next-line no-underscore-dangle\n editor.__react_on_change = undefined\n }\n }, [editor, defaultConfig, onChange])\n\n // value 变化，重置 HTML\n useEffect(() => {\n if (editor == null) { return }\n\n if (value === latestHtmlRef.current) { return } // 如果和当前 html 值相等，则忽略\n\n // ------ 重新设置 HTML ------\n try {\n isSyncingFromPropsRef.current = true\n editor.setHtml(value)\n latestHtmlRef.current = editor.getHtml()\n } catch (error) {\n console.error(error)\n } finally {\n isSyncingFromPropsRef.current = false\n }\n }, [editor, value])\n\n useEffect(() => {\n if (ref.current == null) { return }\n if (editor != null) { return }\n // 防止重复渲染 当编辑器已经创建就不在创建了\n if (ref.current?.getAttribute('data-w-e-textarea')) { return }\n\n const newEditor = createEditor({\n selector: ref.current,\n config: {\n ...defaultConfig,\n onCreated: handleCreated,\n // eslint-disable-next-line no-underscore-dangle\n onChange: (e: IDomEditor) => newEditor?.__react_on_change?.(e),\n onDestroyed: handleDestroyed,\n },\n content: defaultContent,\n html: defaultHtml || value,\n mode,\n })as ICustomDomEditor\n\n latestHtmlRef.current = newEditor.getHtml()\n setEditor(newEditor)\n }, [editor])\n\n return <div style={style} ref={ref} className={className}></div>\n}\n\nexport default EditorComponent\n","/**\n * @description toolbar react component\n * @author wangfupeng\n */\n\nimport * as wangEditor from '@wangeditor-next/editor'\nimport React, { useEffect, useRef } from 'react'\n\ninterface IProps {\n editor: wangEditor.IDomEditor | null\n defaultConfig?: Partial<wangEditor.IToolbarConfig>\n mode?: string\n style?: object\n className?: string\n}\n\nfunction ToolbarComponent(props: IProps) {\n const {\n editor, defaultConfig = {}, mode = 'default', style = {}, className,\n } = props\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (ref.current == null || editor == null) { return }\n if (ref.current?.getAttribute('data-w-e-toolbar')) { return }\n\n const toolbar = wangEditor.createToolbar({\n editor,\n selector: ref.current,\n config: defaultConfig,\n mode,\n })\n\n return () => {\n if (toolbar) {\n toolbar.destroy()\n ref.current?.removeAttribute('data-w-e-toolbar')\n }\n }\n }, [editor, defaultConfig, mode])\n\n return <div style={style} ref={ref} className={className}></div>\n}\n\nexport default ToolbarComponent\n"],"names":["EditorComponent","props","_a","defaultContent","onCreated","_b","defaultHtml","_c","value","onChange","_d","defaultConfig","_e","mode","_f","style","className","ref","useRef","latestHtmlRef","isSyncingFromPropsRef","_g","__read","useState","editor","setEditor","handleCreated","createdEditor","onCreatedFromConfig","handleDestroyed","destroyedEditor","onDestroyed","useEffect","__react_on_change","e","latestHtml","getHtml","prevHtml","current","onChangeFromConfig","undefined","setHtml","error","console","getAttribute","newEditor","createEditor","selector","config","__assign","call","content","html","React","createElement","ToolbarComponent","toolbar","wangEditor","createToolbar","destroy","removeAttribute"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wangeditor-next/editor-for-react",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "wangEditor next editor for react",
|
|
5
5
|
"author": "cycleccc <2991205548@qq.com>",
|
|
6
6
|
"type": "module",
|
|
@@ -34,13 +34,13 @@
|
|
|
34
34
|
"url": "https://github.com/wangeditor-next/wangEditor-next/issues"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@wangeditor-next/editor": "^5.
|
|
37
|
+
"@wangeditor-next/editor": "^5.7.0",
|
|
38
38
|
"react": "^17.0.2",
|
|
39
39
|
"react-dom": "^17.0.2",
|
|
40
|
-
"@wangeditor-next-shared/rollup-config": "^0.0.
|
|
40
|
+
"@wangeditor-next-shared/rollup-config": "^0.0.2"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@wangeditor-next/editor": ">=5.
|
|
43
|
+
"@wangeditor-next/editor": ">=5.7.0",
|
|
44
44
|
"react": ">=17.0.2",
|
|
45
45
|
"react-dom": ">=17.0.2"
|
|
46
46
|
},
|