@wangeditor-next/editor-for-react 2.0.2 → 2.0.3
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/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/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
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@wangeditor-next/editor"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@wangeditor-next/editor","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).WangEditorForReact={},e.wangEditor,e.React,e.ReactDOM)}(this,function(e,t,r,n){"use strict";function o(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 a=o(t),i=function(){return i=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},i.apply(this,arguments)};function l(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}"function"==typeof SuppressedError&&SuppressedError,e.Editor=function(e){var o=e.defaultContent,a=void 0===o?[]:o,u=e.onCreated,c=e.defaultHtml,f=void 0===c?"":c,d=e.value,s=void 0===d?"":d,v=e.onChange,g=e.defaultConfig,y=void 0===g?{}:g,b=e.mode,m=void 0===b?"default":b,p=e.style,h=void 0===p?{}:p,E=e.className,C=e.loading,_=void 0!==C&&C,w=e.loadingText,x=void 0===w?"Loading...":w,O=r.useRef(null),j=l(r.useState(null),2),R=j[0],S=j[1],k=r.useRef(""),H=r.useRef(!1),T=l(r.useState(null),2),D=T[0],N=T[1],P=r.useCallback(function(e){O.current=e,S(e)},[]),q=r.useCallback(function(e){u&&u(e);var t=y.onCreated;t&&t(e)},[y,u]),A=r.useCallback(function(e){var t=y.onDestroyed;N(null),t&&t(e)},[y]);return r.useEffect(function(){if(null!=D)return D.__react_on_change=function(e){var t=e.getHtml(),r=k.current;if(k.current=t,!H.current&&t!==r){v&&v(e);var n=y.onChange;n&&n(e)}},function(){D.__react_on_change=void 0}},[D,y,v]),r.useEffect(function(){if(null!=D&&s!==k.current)try{H.current=!0,D.setHtml(s),k.current=D.getHtml()}catch(e){console.error(e)}finally{H.current=!1}},[D,s]),r.useEffect(function(){var e;if(null!=O.current&&null==D&&!(null===(e=O.current)||void 0===e?void 0:e.getAttribute("data-w-e-textarea"))){var r=t.createEditor({selector:O.current,config:i(i({},y),{onCreated:q,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:A}),content:a,html:f||s,mode:m});k.current=r.getHtml(),N(r)}},[D,y,a,f,q,A,m,s]),r.createElement("div",{ref:P,style:i(i({},h),{position:h.position||"relative"}),className:E,"data-w-e-react-editor-container":"true"},_&&R&&n.createPortal(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}},x),R))},e.Toolbar=function(e){var t=e.editor,n=e.defaultConfig,o=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=a.createToolbar({editor:t,selector:d.current,config:o,mode:l});return function(){var e;r&&(r.destroy(),null===(e=d.current)||void 0===e||e.removeAttribute("data-w-e-toolbar"))}}},[t,o,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 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
|
|
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'\nimport ReactDOM from 'react-dom'\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>(null)\n const [editorRoot, setEditorRoot] = useState<HTMLDivElement | null>(null)\n const latestHtmlRef = useRef('')\n const isSyncingFromPropsRef = useRef(false)\n const [editor, setEditor] = useState<ICustomDomEditor | null>(null)\n\n const setRootRef = useCallback((node: HTMLDivElement | null) => {\n ref.current = node\n setEditorRoot(node)\n }, [])\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 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 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 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 ref={setRootRef}\n style={{ ...style, position: style.position || 'relative' }}\n className={className}\n data-w-e-react-editor-container=\"true\"\n >\n {loading && editorRoot && ReactDOM.createPortal((\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 ), editorRoot)}\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","_j","__read","useState","editorRoot","setEditorRoot","latestHtmlRef","isSyncingFromPropsRef","_k","editor","setEditor","setRootRef","useCallback","node","current","handleCreated","createdEditor","onCreatedFromConfig","handleDestroyed","destroyedEditor","onDestroyed","useEffect","__react_on_change","e","latestHtml","getHtml","prevHtml","onChangeFromConfig","undefined","setHtml","error","console","getAttribute","newEditor","createEditor","selector","config","__assign","call","content","html","React","createElement","position","ReactDOM","createPortal","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 e}from"@wangeditor-next/editor";import r,{useRef as n,useState as o,useCallback as a,useEffect as l}from"react";var
|
|
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";import i from"react-dom";var u=function(){return u=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},u.apply(this,arguments)};function c(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}function d(t){var d=t.defaultContent,f=void 0===d?[]:d,v=t.onCreated,s=t.defaultHtml,m=void 0===s?"":s,g=t.value,y=void 0===g?"":g,p=t.onChange,b=t.defaultConfig,h=void 0===b?{}:b,_=t.mode,C=void 0===_?"default":_,w=t.style,x=void 0===w?{}:w,E=t.className,H=t.loading,N=void 0!==H&&H,S=t.loadingText,j=void 0===S?"Loading...":S,A=n(null),O=c(o(null),2),T=O[0],D=O[1],I=n(""),P=n(!1),k=c(o(null),2),z=k[0],L=k[1],q=a(function(t){A.current=t,D(t)},[]),B=a(function(t){v&&v(t);var e=h.onCreated;e&&e(t)},[h,v]),F=a(function(t){var e=h.onDestroyed;L(null),e&&e(t)},[h]);return l(function(){if(null!=z)return z.__react_on_change=function(t){var e=t.getHtml(),r=I.current;if(I.current=e,!P.current&&e!==r){p&&p(t);var n=h.onChange;n&&n(t)}},function(){z.__react_on_change=void 0}},[z,h,p]),l(function(){if(null!=z&&y!==I.current)try{P.current=!0,z.setHtml(y),I.current=z.getHtml()}catch(t){console.error(t)}finally{P.current=!1}},[z,y]),l(function(){var t;if(null!=A.current&&null==z&&!(null===(t=A.current)||void 0===t?void 0:t.getAttribute("data-w-e-textarea"))){var r=e({selector:A.current,config:u(u({},h),{onCreated:B,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:F}),content:f,html:m||y,mode:C});I.current=r.getHtml(),L(r)}},[z,h,f,m,B,F,C,y]),r.createElement("div",{ref:q,style:u(u({},x),{position:x.position||"relative"}),className:E,"data-w-e-react-editor-container":"true"},N&&T&&i.createPortal(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}},j),T))}function f(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{d as Editor,f 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 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
|
|
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'\nimport ReactDOM from 'react-dom'\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>(null)\n const [editorRoot, setEditorRoot] = useState<HTMLDivElement | null>(null)\n const latestHtmlRef = useRef('')\n const isSyncingFromPropsRef = useRef(false)\n const [editor, setEditor] = useState<ICustomDomEditor | null>(null)\n\n const setRootRef = useCallback((node: HTMLDivElement | null) => {\n ref.current = node\n setEditorRoot(node)\n }, [])\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 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 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 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 ref={setRootRef}\n style={{ ...style, position: style.position || 'relative' }}\n className={className}\n data-w-e-react-editor-container=\"true\"\n >\n {loading && editorRoot && ReactDOM.createPortal((\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 ), editorRoot)}\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","_j","__read","useState","editorRoot","setEditorRoot","latestHtmlRef","isSyncingFromPropsRef","_k","editor","setEditor","setRootRef","useCallback","node","current","handleCreated","createdEditor","onCreatedFromConfig","handleDestroyed","destroyedEditor","onDestroyed","useEffect","__react_on_change","e","latestHtml","getHtml","prevHtml","onChangeFromConfig","undefined","setHtml","error","console","getAttribute","newEditor","createEditor","selector","config","__assign","call","content","html","React","createElement","position","ReactDOM","createPortal","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": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
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.7.
|
|
37
|
+
"@wangeditor-next/editor": "^5.7.12",
|
|
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.7.
|
|
43
|
+
"@wangeditor-next/editor": ">=5.7.12",
|
|
44
44
|
"react": ">=17.0.2",
|
|
45
45
|
"react-dom": ">=17.0.2"
|
|
46
46
|
},
|