@wangeditor-next/editor-for-react 1.0.11 → 2.0.1
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 +17 -2
- package/dist/editor-for-react/src/components/Editor.d.ts +5 -2
- package/dist/editor-for-react/src/components/Toolbar.d.ts +2 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
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
|
```
|
|
@@ -34,6 +34,21 @@ import { Editor, Toolbar } from '@wangeditor-next/editor-for-react'
|
|
|
34
34
|
|
|
35
35
|
详情参考[wangEditor react使用文档](https://wangeditor-next.github.io/docs/guide/for-frame#react)。
|
|
36
36
|
|
|
37
|
+
### Editor 内置 loading
|
|
38
|
+
|
|
39
|
+
为避免外层 `Spin/Loader` 包裹导致编辑器节点结构变化，可直接使用内置 `loading` 覆盖层：
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
<Editor
|
|
43
|
+
defaultConfig={editorConfig}
|
|
44
|
+
onChange={setEditorState}
|
|
45
|
+
loading={uploading}
|
|
46
|
+
loadingText="Uploading..."
|
|
47
|
+
/>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
`loading` 只控制可视化遮罩，不会重建 editor 实例。
|
|
51
|
+
|
|
37
52
|
### 在Next.js下使用
|
|
38
53
|
```js
|
|
39
54
|
import dynamic from 'next/dynamic'
|
|
@@ -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[];
|
|
@@ -14,6 +15,8 @@ interface IProps {
|
|
|
14
15
|
mode?: string;
|
|
15
16
|
style?: React.CSSProperties;
|
|
16
17
|
className?: string;
|
|
18
|
+
loading?: boolean;
|
|
19
|
+
loadingText?: React.ReactNode;
|
|
17
20
|
}
|
|
18
|
-
declare function EditorComponent(props: Partial<IProps>):
|
|
21
|
+
declare function EditorComponent(props: Partial<IProps>): React.JSX.Element;
|
|
19
22
|
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),a=function(){return a=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},a.apply(this,arguments)};
|
|
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),a=function(){return a=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},a.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,e.Editor=function(e){var n=e.defaultContent,o=void 0===n?[]:n,i=e.onCreated,l=e.defaultHtml,u=void 0===l?"":l,c=e.value,f=void 0===c?"":c,d=e.onChange,s=e.defaultConfig,v=void 0===s?{}:s,g=e.mode,y=void 0===g?"default":g,p=e.style,m=void 0===p?{}:p,b=e.className,h=e.loading,E=void 0!==h&&h,C=e.loadingText,_=void 0===C?"Loading...":C,w=r.useRef(null),x=r.useRef(""),j=r.useRef(!1),O=function(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}(r.useState(null),2),H=O[0],R=O[1],S=r.useCallback(function(e){i&&i(e);var t=v.onCreated;t&&t(e)},[v,i]),T=r.useCallback(function(e){var t=v.onDestroyed;R(null),t&&t(e)},[v]);return r.useEffect(function(){if(null!=H)return H.__react_on_change=function(e){var t=e.getHtml(),r=x.current;if(x.current=t,!j.current&&t!==r){d&&d(e);var n=v.onChange;n&&n(e)}},function(){H.__react_on_change=void 0}},[H,v,d]),r.useEffect(function(){if(null!=H&&f!==x.current)try{j.current=!0,H.setHtml(f),x.current=H.getHtml()}catch(e){console.error(e)}finally{j.current=!1}},[H,f]),r.useEffect(function(){var e;if(null!=w.current&&null==H&&!(null===(e=w.current)||void 0===e?void 0:e.getAttribute("data-w-e-textarea"))){var r=t.createEditor({selector:w.current,config:a(a({},v),{onCreated:S,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:T}),content:o,html:u||f,mode:y});x.current=r.getHtml(),R(r)}},[H,v,o,u,S,T,y,f]),r.createElement("div",{style:a(a({},m),{position:m.position||"relative"}),className:b,"data-w-e-react-editor-container":"true"},r.createElement("div",{style:{minHeight:"1px"},ref:w}),E&&r.createElement("div",{"data-w-e-loading-overlay":"true",style:{position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(255, 255, 255, 0.6)",zIndex:10}},_))},e.Toolbar=function(e){var t=e.editor,n=e.defaultConfig,a=void 0===n?{}:n,i=e.mode,l=void 0===i?"default":i,u=e.style,c=void 0===u?{}:u,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:a,mode:l});return function(){var e;r&&(r.destroy(),null===(e=d.current)||void 0===e||e.removeAttribute("data-w-e-toolbar"))}}},[t,a,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, {\n useCallback, useEffect, useRef, useState,\n} 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 loading?: boolean\n loadingText?: React.ReactNode\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 loading = false, loadingText = 'Loading...',\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 = useCallback((createdEditor: IDomEditor) => {\n // 组件属性 onCreated\n if (onCreated) { onCreated(createdEditor) }\n\n // 编辑器 配置 onCreated\n const { onCreated: onCreatedFromConfig } = defaultConfig\n\n if (onCreatedFromConfig) { onCreatedFromConfig(createdEditor) }\n }, [defaultConfig, onCreated])\n\n const handleDestroyed = useCallback((destroyedEditor: IDomEditor) => {\n const { onDestroyed } = defaultConfig\n\n setEditor(null)\n if (onDestroyed) {\n onDestroyed(destroyedEditor)\n }\n }, [defaultConfig])\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 }, [\n editor,\n defaultConfig,\n defaultContent,\n defaultHtml,\n handleCreated,\n handleDestroyed,\n mode,\n value,\n ])\n\n return (\n <div\n style={{ ...style, position: style.position || 'relative' }}\n className={className}\n data-w-e-react-editor-container=\"true\"\n >\n <div style={{ minHeight: '1px' }} ref={ref}></div>\n {loading && (\n <div\n data-w-e-loading-overlay=\"true\"\n style={{\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'rgba(255, 255, 255, 0.6)',\n zIndex: 10,\n }}\n >\n {loadingText}\n </div>\n )}\n </div>\n )\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","_g","loading","_h","loadingText","ref","useRef","latestHtmlRef","isSyncingFromPropsRef","_j","__read","useState","editor","setEditor","handleCreated","useCallback","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","position","minHeight","top","right","bottom","left","display","alignItems","justifyContent","background","zIndex","toolbar","wangEditor","createToolbar","destroy","removeAttribute"],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"@wangeditor-next/editor";import{createEditor as
|
|
1
|
+
import*as t from"@wangeditor-next/editor";import{createEditor as e}from"@wangeditor-next/editor";import r,{useRef as n,useState as o,useCallback as a,useEffect as l}from"react";var i=function(){return i=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},i.apply(this,arguments)};function u(t){var u=t.defaultContent,c=void 0===u?[]:u,d=t.onCreated,f=t.defaultHtml,v=void 0===f?"":f,s=t.value,m=void 0===s?"":s,g=t.onChange,y=t.defaultConfig,p=void 0===y?{}:y,h=t.mode,b=void 0===h?"default":h,_=t.style,C=void 0===_?{}:_,w=t.className,x=t.loading,E=void 0!==x&&x,H=t.loadingText,N=void 0===H?"Loading...":H,S=n(null),j=n(""),A=n(!1),O=function(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,o,a=r.call(t),l=[];try{for(;(void 0===e||e-- >0)&&!(n=a.next()).done;)l.push(n.value)}catch(t){o={error:t}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return l}(o(null),2),T=O[0],D=O[1],I=a(function(t){d&&d(t);var e=p.onCreated;e&&e(t)},[p,d]),k=a(function(t){var e=p.onDestroyed;D(null),e&&e(t)},[p]);return l(function(){if(null!=T)return T.__react_on_change=function(t){var e=t.getHtml(),r=j.current;if(j.current=e,!A.current&&e!==r){g&&g(t);var n=p.onChange;n&&n(t)}},function(){T.__react_on_change=void 0}},[T,p,g]),l(function(){if(null!=T&&m!==j.current)try{A.current=!0,T.setHtml(m),j.current=T.getHtml()}catch(t){console.error(t)}finally{A.current=!1}},[T,m]),l(function(){var t;if(null!=S.current&&null==T&&!(null===(t=S.current)||void 0===t?void 0:t.getAttribute("data-w-e-textarea"))){var r=e({selector:S.current,config:i(i({},p),{onCreated:I,onChange:function(t){var e;return null===(e=null==r?void 0:r.__react_on_change)||void 0===e?void 0:e.call(r,t)},onDestroyed:k}),content:c,html:v||m,mode:b});j.current=r.getHtml(),D(r)}},[T,p,c,v,I,k,b,m]),r.createElement("div",{style:i(i({},C),{position:C.position||"relative"}),className:w,"data-w-e-react-editor-container":"true"},r.createElement("div",{style:{minHeight:"1px"},ref:S}),E&&r.createElement("div",{"data-w-e-loading-overlay":"true",style:{position:"absolute",top:0,right:0,bottom:0,left:0,display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(255, 255, 255, 0.6)",zIndex:10}},N))}function c(e){var o=e.editor,a=e.defaultConfig,i=void 0===a?{}:a,u=e.mode,c=void 0===u?"default":u,d=e.style,f=void 0===d?{}:d,v=e.className,s=n(null);return l(function(){var e;if(null!=s.current&&null!=o&&!(null===(e=s.current)||void 0===e?void 0:e.getAttribute("data-w-e-toolbar"))){var r=t.createToolbar({editor:o,selector:s.current,config:i,mode:c});return function(){var t;r&&(r.destroy(),null===(t=s.current)||void 0===t||t.removeAttribute("data-w-e-toolbar"))}}},[o,i,c]),r.createElement("div",{style:f,ref:s,className:v})}"function"==typeof SuppressedError&&SuppressedError;export{u as Editor,c 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, {\n useCallback, useEffect, useRef, useState,\n} 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 loading?: boolean\n loadingText?: React.ReactNode\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 loading = false, loadingText = 'Loading...',\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 = useCallback((createdEditor: IDomEditor) => {\n // 组件属性 onCreated\n if (onCreated) { onCreated(createdEditor) }\n\n // 编辑器 配置 onCreated\n const { onCreated: onCreatedFromConfig } = defaultConfig\n\n if (onCreatedFromConfig) { onCreatedFromConfig(createdEditor) }\n }, [defaultConfig, onCreated])\n\n const handleDestroyed = useCallback((destroyedEditor: IDomEditor) => {\n const { onDestroyed } = defaultConfig\n\n setEditor(null)\n if (onDestroyed) {\n onDestroyed(destroyedEditor)\n }\n }, [defaultConfig])\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 }, [\n editor,\n defaultConfig,\n defaultContent,\n defaultHtml,\n handleCreated,\n handleDestroyed,\n mode,\n value,\n ])\n\n return (\n <div\n style={{ ...style, position: style.position || 'relative' }}\n className={className}\n data-w-e-react-editor-container=\"true\"\n >\n <div style={{ minHeight: '1px' }} ref={ref}></div>\n {loading && (\n <div\n data-w-e-loading-overlay=\"true\"\n style={{\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n background: 'rgba(255, 255, 255, 0.6)',\n zIndex: 10,\n }}\n >\n {loadingText}\n </div>\n )}\n </div>\n )\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","_g","loading","_h","loadingText","ref","useRef","latestHtmlRef","isSyncingFromPropsRef","_j","__read","useState","editor","setEditor","handleCreated","useCallback","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","position","minHeight","top","right","bottom","left","display","alignItems","justifyContent","background","zIndex","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.1",
|
|
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.6
|
|
37
|
+
"@wangeditor-next/editor": "^5.7.6",
|
|
38
38
|
"react": "^17.0.2",
|
|
39
39
|
"react-dom": "^17.0.2",
|
|
40
40
|
"@wangeditor-next-shared/rollup-config": "^0.0.2"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"@wangeditor-next/editor": ">=5.6
|
|
43
|
+
"@wangeditor-next/editor": ">=5.7.6",
|
|
44
44
|
"react": ">=17.0.2",
|
|
45
45
|
"react-dom": ">=17.0.2"
|
|
46
46
|
},
|