vap1 0.3.6 → 0.3.8

package/deps/editor/support/buttons/ImageButton.js

@@ -0,0 +1,138 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageButton = exports.insertImage = void 0;
+var react_1 = __importStar(require("react"));
+var slate_react_1 = require("slate-react");
+var UploadImage_1 = require("../../../../components/Upload/UploadImage");
+var UForm_1 = require("../../../../components/UForm");
+var utils_1 = require("../../../../utils");
+var slate_1 = require("slate");
+var index_1 = require("../../../../index");
+var useToggle_1 = require("../../../../hooks/useToggle");
+var insertImage = function (editor, url) {
+    var image = { type: 'image', url: url, children: [{ text: '' }] };
+    slate_1.Transforms.insertNodes(editor, image);
+    slate_1.Transforms.insertNodes(editor, { type: 'paragraph', children: [{ text: '' }], });
+};
+exports.insertImage = insertImage;
+var UploadImageModal = function (_a) {
+    var open = _a.open, onCancel = _a.onCancel, onOk = _a.onOk, value = _a.value;
+    var currentUrl = (0, react_1.useRef)();
+    return react_1.default.createElement(index_1.Modal, { width: 640, 
+        // styles={{ body: { padding: 0, height: 400 } }}
+        bodyStyle: { padding: 0, height: 500 }, title: "\u4E0A\u4F20\u56FE\u7247", open: open, onCancel: onCancel, onOk: function () {
+            if (currentUrl.current == null) {
+                index_1.message.error('请上传图片');
+                return;
+            }
+            onOk(currentUrl.current);
+        } },
+        react_1.default.createElement(UploadImage_1.UploadImage, { allowClear: false, width: 640, height: 400, onChange: function (data) {
+                currentUrl.current = (0, UploadImage_1.getImageUrl)(data.fileId);
+            } }));
+};
+var ImageButton = function (_a) {
+    var icon = _a.icon, ik = _a.ik, cmd = _a.cmd, disabled = _a.disabled;
+    var uploadState = (0, useToggle_1.useToggle)();
+    var inputState = (0, useToggle_1.useToggle)();
+    var selectState = (0, useToggle_1.useToggle)();
+    var editor = (0, slate_react_1.useSlate)();
+    var clazz = ['se-icon', 'vicon', 'vicon-' + icon];
+    if (disabled) {
+        clazz.push('se-icon-disabled');
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Dropdown, { placement: "bottomLeft", arrow: true, trigger: ['click'], menu: {
+                items: [
+                    { key: 1, label: "上传图片", onClick: uploadState[1] },
+                    // { key: 2, label: "从图库中选择", onClick: selectState[1] },
+                    { key: 3, label: "输入图片URL", onClick: inputState[1] },
+                    // {
+                    //     key: 3, label: "输入图片URL", onClick: () => {
+                    //         // editor.insertData({})
+                    //         insertImage(editor, 'http://www.vrv.com.cn/images/banner_03.png')
+                    //     }
+                    // },
+                ]
+            } },
+            react_1.default.createElement("span", { className: clazz.join(' '), title: utils_1.i18n.txt(ik) })),
+        react_1.default.createElement(UploadImageModal, { open: uploadState[0], onCancel: (uploadState[1]), onOk: function (url) {
+                uploadState[1]();
+                (0, exports.insertImage)(editor, url);
+            } }),
+        react_1.default.createElement(UForm_1.UFormModal, { title: "\u8F93\u5165\u56FE\u7247\u5730\u5740", open: inputState[0], onCancel: inputState[1], default: {}, fields: [
+                { field: 'url', title: '图片地址', required: true, type: 'url' }
+            ], onOk: function (data) {
+                inputState[1]();
+                (0, exports.insertImage)(editor, data.url);
+            } }));
+};
+exports.ImageButton = ImageButton;
+// const isImageUrl = url => {
+//     if (!url) return false
+//     if (!StringUtil.isURL(url)) return false
+//     // const ext = new URL(url).pathname.split('.').pop()
+//     // return imageExtensions.includes(ext)
+//     return true;
+// }
+// const insertImage = (editor, url) => {
+//     console.log('inserimg')
+//     const text = { text: '' }
+//     const image: ImageElement = { type: 'image', url, children: [text] }
+//     Transforms.insertNodes(editor, image)
+//     Transforms.insertNodes(editor, {
+//         type: 'paragraph',
+//         children: [{ text: '' }],
+//     })
+// }
+// export const withInsert = (editor: Editor) => {
+//     const { insertData, isVoid } = editor
+//     editor.isVoid = element => {
+//         return element.type === 'image' ? true : isVoid(element)
+//     }
+//     editor.insertData = data => {
+//         const text = data.getData('text/plain');
+//         const { files } = data
+//         if (files && files.length > 0) {
+//             for (const file of files) {
+//                 const reader = new FileReader()
+//                 const [mime] = file.type.split('/')
+//                 if (mime === 'image') {
+//                     reader.addEventListener('load', () => {
+//                         const url = reader.result
+//                         insertImage(editor, url)
+//                     })
+//                     reader.readAsDataURL(file)
+//                 }
+//             }
+//         } else if (isImageUrl(text)) {
+//             insertImage(editor, text)
+//         } else {
+//             insertData(data)
+//         }
+//     }
+//     return editor
+// }

package/deps/editor/support/buttons/index.d.ts

@@ -0,0 +1 @@
+export { ImageButton } from './ImageButton';

package/deps/editor/support/buttons/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageButton = void 0;
+var ImageButton_1 = require("./ImageButton");
+Object.defineProperty(exports, "ImageButton", { enumerable: true, get: function () { return ImageButton_1.ImageButton; } });

package/deps/editor/support/element/ImageElement.d.ts

@@ -0,0 +1,3 @@
+import type { ElementRender } from './_Base';
+import type { ImageElement } from '../../types';
+export declare const Image: ElementRender<ImageElement>;

package/deps/editor/support/element/ImageElement.js

@@ -0,0 +1,228 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+var react_1 = __importDefault(require("react"));
+var index_1 = require("../../../../index");
+var slate_react_1 = require("slate-react");
+var slate_1 = require("slate");
+var slate_react_2 = require("slate-react");
+// type ImageProps = {}
+var ImageView = function (_a) {
+    var attributes = _a.attributes, children = _a.children, element = _a.element;
+    return react_1.default.createElement("div", null);
+};
+var ImageEdit = function (_a) {
+    var attributes = _a.attributes, children = _a.children, element = _a.element;
+    var editor = (0, slate_react_1.useSlateStatic)();
+    var path = slate_react_1.ReactEditor.findPath(editor, element);
+    // console.log(element, attributes)
+    // if(element)
+    var selected = (0, slate_react_2.useSelected)();
+    // const focused = useFocused()
+    return react_1.default.createElement("div", __assign({}, attributes, { className: 'sv-img' + (selected ? ' se-del' : '') }),
+        children,
+        react_1.default.createElement("div", { contentEditable: false, className: 'sv-img-content' + (element.align ? (' sv-img-' + element.align) : '') },
+            selected && react_1.default.createElement(index_1.Button, { danger: true, type: 'primary', onClick: function () { return slate_1.Transforms.removeNodes(editor, { at: path }); }, size: "small" }, "\u5220\u9664"),
+            react_1.default.createElement("img", { src: element.url })));
+};
+// const ImageEdit =  ({ attributes, children, element }) => {
+//     const editor = useSlateStatic()
+//     const path = ReactEditor.findPath(editor, element)
+//     const selected = useSelected()
+//     const focused = useFocused()
+//     return (
+//       <div {...attributes}>
+//         {children}
+//         <div
+//           contentEditable={false}
+//           className={css`
+//             position: relative;
+//           `}
+//         >
+//           <img
+//             src={element.url}
+//             className={css`
+//               display: block;
+//               max-width: 100%;
+//               max-height: 20em;
+//               box-shadow: ${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'};
+//             `}
+//           />
+//           <Button
+//             active
+//             onClick={() => Transforms.removeNodes(editor, { at: path })}
+//             className={css`
+//               display: ${selected && focused ? 'inline' : 'none'};
+//               position: absolute;
+//               top: 0.5em;
+//               left: 0.5em;
+//               background-color: white;
+//             `}
+//           >
+//             <Icon>delete</Icon>
+//           </Button>
+//         </div>
+//       </div>
+// }
+var Image = function (props) {
+    if (props.isEditor)
+        return react_1.default.createElement(ImageEdit, __assign({}, props));
+    return react_1.default.createElement(ImageView, __assign({}, props));
+    // const editor = useSlateStatic()
+    // const path = ReactEditor.findPath(editor, element)
+    // // console.log(path)
+    // // const selected = useSelected()
+    // // const focused = useFocused()
+    // return <div {...attributes}>
+    //     {/* {children} */}
+    //     <div
+    //         contentEditable={false}
+    //     //         className={css`
+    //     //   position: relative;
+    //     // `}
+    //     >
+    //         <img
+    //             src={element.url}
+    //         //             className={css`
+    //         //     display: block;
+    //         //     max-width: 100%;
+    //         //     max-height: 20em;
+    //         //     box-shadow: ${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'};
+    //         //   `}
+    //         />
+    //         <a
+    //             // active
+    //             onClick={() => Transforms.removeNodes(editor, { at: path })}
+    //         //             className={css`
+    //         //     display: ${selected && focused ? 'inline' : 'none'};
+    //         //     position: absolute;
+    //         //     top: 0.5em;
+    //         //     left: 0.5em;
+    //         //     background-color: white;
+    //         //   `}
+    //         >
+    //             {/* <Icon>delete</Icon> */}
+    //         </a>
+    //     </div>
+    // </div>
+};
+exports.Image = Image;
+// import React from 'react'
+// import { Transforms } from 'slate'
+// import { useSlateStatic, ReactEditor, useReadOnly } from 'slate-react'
+// import { Button } from 'antd'
+// import { Editor } from 'slate'
+// import type { CommandType } from '../../types'
+// const ImageViewer = ({ attributes, element, children, style }) => {
+//     return <div {...attributes} className='v-image' style={style}>
+//         <img src={element.url} />
+//     </div>
+// }
+// const markValue = (editor: Editor, cmd: CommandType) => {
+//     const marks = Editor.marks(editor);
+//     if (marks && marks[cmd]) {
+//         return marks[cmd];
+//     }
+//     return null;
+// }
+// const setValue = (editor: Editor, cmd: CommandType, value: string | number | null) => {
+//     if (value == null || value == '') {
+//         const notSelected = editor.selection?.focus.offset == editor.selection?.anchor.offset;
+//         if (notSelected) {
+//             editor.select(editor.selection.focus.path);
+//         }
+//         Editor.removeMark(editor, cmd)
+//     } else {
+//         Editor.addMark(editor, cmd, value)
+//     }
+// }
+// const ImageEditor = ({ attributes, element, children, style }) => {
+//     const editor = useSlateStatic()
+//     const path = ReactEditor.findPath(editor, element);
+//     return <div {...attributes} className='v-image' style={style}>
+//         <img src={element.url}
+//         //     className={css`
+//         //   display: block;
+//         //   max-width: 100%;
+//         //   max-height: 20em;
+//         //   box-shadow: ${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'};
+//         // `}
+//         />
+//         {children}
+//         <div contentEditable={false}
+//         //     className={css`
+//         //     position: relative;
+//         //   `}
+//         >
+//             <Button
+//                 icon="delete"
+//                 // active
+//                 onClick={() => Transforms.removeNodes(editor, { at: path })}
+//             //     className={css`
+//             //   display: ${selected && focused ? 'inline' : 'none'};
+//             //   position: absolute;
+//             //   top: 0.5em;
+//             //   left: 0.5em;
+//             //   background-color: white;
+//             // `}
+//             >
+//             </Button>
+//         </div>
+//     </div>
+// }
+// export const Image = (props) => {
+//     const isReadOnly = useReadOnly();
+//     if (!isReadOnly && props.isEditor) {
+//         return <ImageEditor {...props} />
+//     }
+//     return <ImageViewer {...props} />
+//     // const editor = useSlateStatic()
+//     // const path = ReactEditor.findPath(editor, element);
+//     // // editor.above
+//     // const selected = useSelected()
+//     // return <div {...attributes} className='v-image' style={style}>
+//     //     <img src={element.url}
+//     //     //     className={css`
+//     //     //   display: block;
+//     //     //   max-width: 100%;
+//     //     //   max-height: 20em;
+//     //     //   box-shadow: ${selected && focused ? '0 0 0 3px #B4D5FF' : 'none'};
+//     //     // `}
+//     //     />
+//     //     {children}
+//     //     <div
+//     //         contentEditable={false}
+//     //     //     className={css`
+//     //     //     position: relative;
+//     //     //   `}
+//     //     >
+//     //         <Button
+//     //             icon="delete"
+//     //             // active
+//     //             onClick={() => Transforms.removeNodes(editor, { at: path })}
+//     //         //     className={css`
+//     //         //   display: ${selected && focused ? 'inline' : 'none'};
+//     //         //   position: absolute;
+//     //         //   top: 0.5em;
+//     //         //   left: 0.5em;
+//     //         //   background-color: white;
+//     //         // `}
+//     //         >
+//     //         </Button>
+//     //     </div>
+//     // </div>
+// }

package/deps/editor/support/element/_Base.d.ts

@@ -0,0 +1,9 @@
+import type { RenderElementProps } from "slate-react";
+import type { FC, CSSProperties } from 'react';
+import type { Element } from 'slate';
+import type { CustomElement, EditorElement } from '../../types';
+export type ElementRender<T extends Element = CustomElement> = FC<Omit<RenderElementProps, 'element'> & {
+    element: T;
+    isEditor?: boolean;
+}>;
+export declare const getStyle: (element: EditorElement) => CSSProperties;

package/deps/editor/support/element/_Base.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyle = void 0;
+var getStyle = function (element) {
+    if (element.align)
+        return { textAlign: element.align };
+    return undefined;
+};
+exports.getStyle = getStyle;

package/deps/editor/support/element/_Element.d.ts

@@ -0,0 +1,2 @@
+import { type ElementRender } from './_Base';
+export declare const Element: ElementRender;

package/deps/{_editor/base/Element.js → editor/support/element/_Element.js}

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Element = void 0;
 var react_1 = __importDefault(require("react"));
-var _Image_1 = require("../advance/_Image");
+var ImageElement_1 = require("./ImageElement");
+var _Base_1 = require("./_Base");
 var Element = function (props) {
     var attributes = props.attributes, children = props.children;
     var element = props.element;
-    var style = {};
-    // @ts-ignore
-    if (element.align)
-        style.textAlign = element.align;
+    var style = (0, _Base_1.getStyle)(element);
     switch (element.type) {
         case 'blockQuote':
             return react_1.default.createElement("blockquote", __assign({ style: style }, attributes), children);
@@ -46,7 +44,12 @@ var Element = function (props) {
         case 'hr':
             return react_1.default.createElement("hr", __assign({ style: style }, attributes));
         case 'image':
-            return react_1.default.createElement(_Image_1.Image, __assign({}, props, { style: style, isEditor: props.isEditor }));
+            return react_1.default.createElement(ImageElement_1.Image, __assign({}, props, { isEditor: props.isEditor }));
+        case 'video':
+        case 'audio':
+            // return <div style={{ color: 'red' }}>视频还不支持</div>
+            return react_1.default.createElement("div", { style: { color: 'red' } }, "\u6682\u4E0D\u652F\u6301");
+        // return <Image {...props} style={style} isEditor={props.isEditor} />
         default:
             return react_1.default.createElement("p", __assign({ style: style }, attributes), children);
     }

package/deps/editor/support/element/_Leaf.d.ts

@@ -0,0 +1,3 @@
+import type { RenderLeafProps } from "slate-react";
+import type { FC } from 'react';
+export declare const Leaf: FC<RenderLeafProps>;

package/deps/{_editor/base/Leaf.js → editor/support/element/_Leaf.js}

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Leaf = void 0;
 var react_1 = __importDefault(require("react"));
-var types_1 = require("./types");
+var utils_1 = require("../../utils");
 var Leaf = function (props) {
     var leaf = props.leaf;
     var children = props.children;
@@ -36,7 +36,7 @@ var Leaf = function (props) {
     if (leaf.fontSize)
         style.fontSize = leaf.fontSize;
     if (leaf.fontFamily && leaf.fontFamily > 0 && leaf.fontFamily < 5) {
-        style.fontFamily = types_1.FontFamilyTexts[leaf.fontFamily];
+        style.fontFamily = utils_1.FontFamilyTexts[leaf.fontFamily];
     }
     if (leaf.color)
         style.color = leaf.color;

package/deps/editor/support/index.d.ts

@@ -0,0 +1,4 @@
+import type { Editor } from 'slate';
+export { Element } from './element/_Element';
+export { Leaf } from './element/_Leaf';
+export declare const supportAdvance: (editor: Editor) => import("slate").BaseEditor & import("slate-react").ReactEditor;

package/deps/editor/support/index.js

@@ -0,0 +1,89 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.supportAdvance = exports.Leaf = exports.Element = void 0;
+var utils_1 = require("../../../utils");
+var ImageButton_1 = require("./buttons/ImageButton");
+var _Element_1 = require("./element/_Element");
+Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return _Element_1.Element; } });
+var _Leaf_1 = require("./element/_Leaf");
+Object.defineProperty(exports, "Leaf", { enumerable: true, get: function () { return _Leaf_1.Leaf; } });
+// 后端代码可以先给我下，
+var VOID_SET = new Set(['image', 'video', 'audio']);
+var supportAdvance = function (editor) {
+    var insertData = editor.insertData, isVoid = editor.isVoid;
+    editor.isVoid = function (element) {
+        // console.log(element.type, VOID_SET.has(element.type))
+        if (VOID_SET.has(element.type))
+            return true;
+        return isVoid(element);
+    };
+    editor.insertData = function (data) {
+        var text = data.getData('text/plain');
+        var files = data.files;
+        if (files && files.length > 0) {
+            var _loop_1 = function (i, _i) {
+                var file = files.item(i);
+                var reader = new FileReader();
+                var _a = __read(file.type.split('/'), 1), mime = _a[0];
+                if (mime === 'image') {
+                    reader.addEventListener('load', function () {
+                        var url = reader.result;
+                        (0, ImageButton_1.insertImage)(editor, url);
+                    });
+                    reader.readAsDataURL(file);
+                }
+            };
+            for (var i = 0, _i = files.length; i < _i; i++) {
+                _loop_1(i, _i);
+            }
+        }
+        else if (utils_1.StringUtil.isURL(text)) {
+            (0, ImageButton_1.insertImage)(editor, text);
+        }
+        else {
+            insertData(data);
+        }
+    };
+    return editor;
+    // editor.insertData = data => {
+    //     const text = data.getData('text/plain')
+    //     console.log('insert', data);
+    //     console.log('text', text);
+    //     const { files } = data
+    //     if (files && files.length > 0) {
+    //         for (const file of files) {
+    //             const reader = new FileReader()
+    //             const [mime] = file.type.split('/')
+    //             if (mime === 'image') {
+    //                 reader.addEventListener('load', () => {
+    //                     const url = reader.result
+    //                     insertImage(editor, url)
+    //                 })
+    //                 reader.readAsDataURL(file)
+    //             }
+    //         }
+    //     } else if (isImageUrl(text)) {
+    //         insertImage(editor, text)
+    //     } else {
+    //         insertData(data)
+    //     }
+    // }
+    return editor;
+};
+exports.supportAdvance = supportAdvance;

package/deps/{_editor → editor}/tools/Button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CommandType } from '../base/types';
+import type { CommandType } from '../types';
 export declare const Button: React.FC<{
     type: CommandType;
     disabled: boolean;

package/deps/{_editor → editor}/tools/Button.js

@@ -22,6 +22,7 @@ var utils_1 = require("../../../utils");
 var _BlockButton_1 = require("./_BlockButton");
 var _MarkButton_1 = require("./_MarkButton");
 var _InsertButton_1 = require("./_InsertButton");
+var ImageButton_1 = require("../support/buttons/ImageButton");
 var _TxtButton_1 = require("./_TxtButton");
 var BUTTONS = {
     bold: { type: 'mark', icon: 'bold', ik: i18n_1.EDITOR.BOLD },
@@ -54,7 +55,7 @@ var BUTTONS = {
 var Button = function (_a) {
     var type = _a.type, disabled = _a.disabled;
     if (type == null) {
-        return react_1.default.createElement("span", { className: 'editor-toolbar-split' });
+        return react_1.default.createElement("span", { className: 'se-toolbar-split' });
     }
     if (!lodash_1.default.has(BUTTONS, type)) {
         return utils_1.Const.NONE;
@@ -78,15 +79,18 @@ var Button = function (_a) {
                 return react_1.default.createElement(_TxtButton_1.FontSize, __assign({}, define, { cmd: type, disabled: disabled }));
             case 'fontFamily':
                 return react_1.default.createElement(_TxtButton_1.FontFamily, __assign({}, define, { cmd: type, disabled: disabled }));
+            // 只要有点学习能力，学习一两个月时间后，弄点玩具级别的模型是不成问题的，
+            // 解释权在自己手上，后面逐步优化
         }
         return utils_1.Const.NONE;
     }
     else if (define.type == 'action') {
+        // console.log(type)
         switch (type) {
             case 'hr':
                 return react_1.default.createElement(_InsertButton_1.HR, __assign({}, define, { cmd: type, disabled: disabled }));
-            // case 'image':
-            // return <Picture {...define} cmd={type} disabled={disabled} />
+            case 'image':
+                return react_1.default.createElement(ImageButton_1.ImageButton, __assign({}, define, { cmd: type, disabled: disabled }));
             // case 'audio':
             //     return <Audio {...define} cmd={type} disabled={disabled}/>
             // case 'video':

package/deps/{_editor → editor}/tools/ToolBar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { CommandType } from '../base/types';
+import type { CommandType } from '../types';
 type ToolbarProps = {
     buttons: CommandType[][];
     disabled?: boolean;

package/deps/{_editor → editor}/tools/ToolBar.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toolbar = void 0;
 var react_1 = __importDefault(require("react"));
 var Button_1 = require("./Button");
-var Toolbar = function (props) { return react_1.default.createElement("div", { className: "editor-toolbar" }, props.buttons.map(function (lineGroup) { return react_1.default.createElement("div", { className: "editor-toolbar-line" }, lineGroup.map(function (type) { return react_1.default.createElement(Button_1.Button, { type: type, disabled: props.disabled }); })); })); };
+var Toolbar = function (props) { return react_1.default.createElement("div", { className: "se-toolbar" }, props.buttons.map(function (lineGroup, i) { return react_1.default.createElement("div", { key: i, className: "se-toolbar-line" }, lineGroup.map(function (type, j) { return react_1.default.createElement(Button_1.Button, { key: type + j, type: type, disabled: props.disabled }); })); })); };
 exports.Toolbar = Toolbar;

package/deps/{_editor → editor}/tools/_BlockButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { ButtonProps } from '../base/types';
+import type { ButtonProps } from '../types';
 export declare const TEXT_ALIGN_TYPES: string[];
 export declare const BlockButton: React.FC<ButtonProps>;