diff --git a/src/editor/DOMWidget.jsx b/src/editor/DOMWidget.jsx new file mode 100644 index 0000000..6440108 --- /dev/null +++ b/src/editor/DOMWidget.jsx @@ -0,0 +1,41 @@ +import React from 'preact/compat'; +import { useRef, useEffect } from 'preact/hooks'; + +const DOMWidget = props => { + + const element = useRef(); + + const { + annotation, + readOnly, + onAppendBody, + onUpdateBody, + onRemoveBody, + onSaveAndClose + } = props; + + useEffect(() => { + if (element.current) { + + // Instantiate the widget... + const widgetEl = props.widget({ + annotation, + readOnly, + onAppendBody, + onUpdateBody, + onRemoveBody, + onSaveAndClose + }); + + // ...and append to JSX wrapper + element.current.appendChild(widgetEl); + } + }, []); + + return ( +
+ ) + +} + +export default DOMWidget; \ No newline at end of file diff --git a/src/editor/Editor.jsx b/src/editor/Editor.jsx index 11f8903..b65e02a 100644 --- a/src/editor/Editor.jsx +++ b/src/editor/Editor.jsx @@ -1,6 +1,7 @@ import React from 'preact/compat'; import { useState, useRef, useEffect } from 'preact/hooks'; import Environment from '../Environment'; +import DOMWidget from './DOMWidget'; import setPosition from './setPosition'; import i18n from '../i18n'; @@ -18,6 +19,8 @@ const bounds = elem => { * with CTRL+Z. */ const Editor = props => { + + const widgets = props.widgets.map(fn =>