@blocklet/editor-lite 2.6.0

package/lib/main/index.css

@@ -0,0 +1,257 @@
+@keyframes slide-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mic-pulsate-color {
+  0% {
+    background-color: #ffdcdc;
+  }
+  50% {
+    background-color: #ff8585;
+  }
+  100% {
+    background-color: #ffdcdc;
+  }
+}
+
+.ltr {
+  text-align: left;
+}
+
+.rtl {
+  text-align: right;
+}
+
+.excalidraw-button {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+
+  width: 100%;
+}
+
+.excalidraw-button.selected {
+  outline: 2px solid rgb(60, 132, 244);
+  user-select: none;
+}
+
+.tree-view-output {
+  display: block;
+  background: #222;
+  color: #fff;
+  padding: 0;
+  font-size: 12px;
+  position: relative;
+  overflow: hidden;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  min-height: 100px;
+  margin: 20px;
+}
+
+.github-node-container,
+.inline-embed-container {
+  display: inline-block;
+  max-width: 100%;
+  line-height: normal;
+  vertical-align: text-bottom;
+}
+
+.github-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: max-content;
+  max-width: 100%;
+}
+
+.github-container .github-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin-right: 3px;
+}
+
+.github-container .github-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  font-size: 15px;
+  margin-right: 3px;
+  height: 18px;
+}
+
+.github-container .github-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+  font-size: 14px;
+  font-weight: bold;
+  height: 18px;
+  line-height: 18px;
+  text-decoration: none;
+}
+
+table td .github-container .github-text {
+  max-width: 300px;
+}
+
+.github-container .github-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  margin-left: 4px;
+}
+
+.github-container:hover {
+  cursor: pointer !important;
+  background: rgba(148, 148, 148, 0.15);
+  box-shadow: 0 0 0 3px rgba(148, 148, 148, 0.15);
+  border-radius: 1px;
+}
+
+.global-loading {
+  vertical-align: middle;
+}
+
+.global-loading span {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  position: relative;
+  animation: be-rotate 1s linear infinite;
+}
+
+.global-loading span::before {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  inset: 0px;
+  border-radius: 50%;
+  border: 2px solid #b9c6d4;
+  animation: be-prixClipFix 2s linear infinite;
+
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes be-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes be-prixClipFix {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
+li.embed-option-disabled > span:after {
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: bottom;
+  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
+  animation: ellipsis steps(4, end) 900ms infinite;
+  content: '\2026'; /* ascii code for the ellipsis character */
+  width: 0px;
+}
+@keyframes loading-ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+@-webkit-keyframes loading-ellipsis {
+  to {
+    width: 1.25em;
+  }
+}
+
+/* HeadingsIdPlugin */
+.be-editable h1[id] > a:last-child,
+.be-editable h2[id] > a:last-child,
+.be-editable h3[id] > a:last-child,
+.be-editable h4[id] > a:last-child,
+.be-editable h5[id] > a:last-child,
+.be-editable h6[id] > a:last-child {
+  user-select: none;
+  -webkit-user-select: none; /* 兼容 Safari */
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  color: #999;
+  font-size: inherit;
+  opacity: 0;
+  text-decoration: none;
+  transition: opacity 0.3s ease;
+  border: 0;
+}
+
+.be-editable h1[id]:hover a,
+.be-editable h2[id]:hover a,
+.be-editable h3[id]:hover a,
+.be-editable h4[id]:hover a,
+.be-editable h5[id]:hover a,
+.be-editable h6[id]:hover a {
+  opacity: 1;
+}
+
+/* https://github.com/francoischalifour/medium-zoom */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 99999;
+}
+
+.inline-translation-node {
+  position: relative;
+}
+
+/* 紧挨的 2 个 TranslationNode 容器结点，分别用于包裹翻译结果结点和原文结点, 第 2 个 TranslationNode 是隐藏状态, 通过调换顺序来实现单个结点的原文/翻译切换 */
+.inline-translation-node + .inline-translation-node {
+  display: none;
+}
+
+.inline-translation-node-inline > * {
+  border-bottom: 2px dashed #3890f9;
+}
+
+.bg-excalidraw {
+  background-image: url(images/excalidraw.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}

package/lib/main/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import '@iconify/iconify';
+import './index.css';
+import './style/editable.css';
+import { EditorState, Klass, LexicalEditor, LexicalNode } from 'lexical';
+import React, { MutableRefObject, ReactNode, type JSX } from 'react';
+export interface BlockletEditorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'placeholder' | 'onChange'> {
+    placeholder?: ReactNode;
+    editable?: boolean;
+    editorState?: string;
+    children?: ReactNode;
+    prepend?: ReactNode;
+    nodes?: ReadonlyArray<Klass<LexicalNode>>;
+    onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
+    autoFocus?: boolean;
+    showToolbar?: boolean;
+    editorRef?: React.RefCallback<LexicalEditor> | MutableRefObject<LexicalEditor | null>;
+    onReady?: () => void;
+    enableHeadingsIdPlugin?: boolean;
+    markdown?: boolean;
+}
+export default function BlockletEditor({ editorState, nodes, editable, markdown, ...props }: BlockletEditorProps): JSX.Element;

package/lib/main/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import '@iconify/iconify';
+import './index.css';
+import './style/editable.css';
+import { cx } from '@emotion/css';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useEffect, useRef } from 'react';
+import { useTheme } from '@mui/material';
+import { SharedAutocompleteContext } from './context/SharedAutocompleteContext';
+import { SharedHistoryContext } from './context/SharedHistoryContext';
+import Editor from './editor';
+import { EditorRoot } from './editor-root';
+import PlaygroundNodes from './nodes/PlaygroundNodes';
+import { TableContext } from './plugins/TablePlugin';
+import { useCustomTheme } from './themes/customTheme';
+import { getInitialEditorState } from '../lexical-utils';
+export default function BlockletEditor({ editorState, nodes = PlaygroundNodes, editable = true, markdown, ...props }) {
+    const theme = useCustomTheme();
+    const initialConfig = {
+        namespace: 'Playground',
+        editorState: getInitialEditorState(editorState ?? '', markdown),
+        nodes,
+        editable,
+        onError: (error) => {
+            throw error;
+        },
+        theme,
+    };
+    return (_jsx(SharedHistoryContext, { children: _jsx(SharedAutocompleteContext, { children: _jsx(TableContext, { children: _jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(EditorShell, { ...props, editable: editable }) }) }) }) }));
+}
+function EditorShell({ placeholder, children, prepend, editable, onChange, autoFocus, showToolbar = true, editorRef, onReady, enableHeadingsIdPlugin, ...props }) {
+    const muiTheme = useTheme();
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.setEditable(editable ?? true);
+    }, [editable]);
+    const shellRef = useRef(null);
+    const onShellClick = useCallback((e) => {
+        if (e.target === shellRef.current) {
+            editor.focus();
+        }
+    }, []);
+    return (_jsx(EditorRoot, { ...props, className: cx(props.className, 'be-shell'), ref: shellRef, "data-mode": muiTheme.palette.mode, onClick: onShellClick, children: _jsx(Editor, { onChange: onChange, placeholder: placeholder, autoFocus: autoFocus, showToolbar: showToolbar, editorRef: editorRef, onReady: onReady, enableHeadingsIdPlugin: enableHeadingsIdPlugin, prepend: prepend, children: children }) }));
+}

package/lib/main/nodes/EmojiNode.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { EditorConfig, LexicalNode, NodeKey, SerializedTextNode, Spread } from 'lexical';
+import { TextNode } from 'lexical';
+export type SerializedEmojiNode = Spread<{
+    className: string;
+}, SerializedTextNode>;
+export declare class EmojiNode extends TextNode {
+    __className: string;
+    static getType(): string;
+    static clone(node: EmojiNode): EmojiNode;
+    constructor(className: string, text: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: this, dom: HTMLElement, config: EditorConfig): boolean;
+    static importJSON(serializedNode: SerializedEmojiNode): EmojiNode;
+    exportJSON(): SerializedEmojiNode;
+    getClassName(): string;
+}
+export declare function $isEmojiNode(node: LexicalNode | null | undefined): node is EmojiNode;
+export declare function $createEmojiNode(className: string, emojiText: string): EmojiNode;

package/lib/main/nodes/EmojiNode.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $applyNodeReplacement, TextNode } from 'lexical';
+export class EmojiNode extends TextNode {
+    __className;
+    static getType() {
+        return 'emoji';
+    }
+    static clone(node) {
+        return new EmojiNode(node.__className, node.__text, node.__key);
+    }
+    constructor(className, text, key) {
+        super(text, key);
+        this.__className = className;
+    }
+    createDOM(config) {
+        const dom = document.createElement('span');
+        const inner = super.createDOM(config);
+        dom.className = this.__className;
+        inner.className = 'emoji-inner';
+        dom.appendChild(inner);
+        return dom;
+    }
+    updateDOM(prevNode, dom, config) {
+        const inner = dom.firstChild;
+        if (inner === null) {
+            return true;
+        }
+        super.updateDOM(prevNode, inner, config);
+        return false;
+    }
+    static importJSON(serializedNode) {
+        return $createEmojiNode(serializedNode.className, serializedNode.text).updateFromJSON(serializedNode);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            className: this.getClassName(),
+        };
+    }
+    getClassName() {
+        const self = this.getLatest();
+        return self.__className;
+    }
+}
+export function $isEmojiNode(node) {
+    return node instanceof EmojiNode;
+}
+export function $createEmojiNode(className, emojiText) {
+    const node = new EmojiNode(className, emojiText).setMode('token');
+    return $applyNodeReplacement(node);
+}

package/lib/main/nodes/EquationNode.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import { type JSX } from 'react';
+export type SerializedEquationNode = Spread<{
+    type: 'equation';
+    equation: string;
+    inline: boolean;
+}, SerializedLexicalNode>;
+export declare class EquationNode extends DecoratorNode<JSX.Element> {
+    __equation: string;
+    __inline: boolean;
+    static getType(): string;
+    static clone(node: EquationNode): EquationNode;
+    constructor(equation: string, inline?: boolean, key?: NodeKey);
+    static importJSON(serializedNode: SerializedEquationNode): EquationNode;
+    exportJSON(): SerializedEquationNode;
+    createDOM(_config: EditorConfig): HTMLElement;
+    updateDOM(prevNode: EquationNode): boolean;
+    getEquation(): string;
+    setEquation(equation: string): void;
+    decorate(): JSX.Element;
+}
+export declare function $createEquationNode(equation?: string, inline?: boolean): EquationNode;
+export declare function $isEquationNode(node: LexicalNode | null | undefined): node is EquationNode;

package/lib/main/nodes/EquationNode.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { DecoratorNode } from 'lexical';
+export class EquationNode extends DecoratorNode {
+    __equation;
+    __inline;
+    static getType() {
+        return 'equation';
+    }
+    static clone(node) {
+        return new EquationNode(node.__equation, node.__inline, node.__key);
+    }
+    constructor(equation, inline, key) {
+        super(key);
+        this.__equation = equation;
+        this.__inline = inline ?? false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createEquationNode(serializedNode.equation, serializedNode.inline);
+        return node;
+    }
+    exportJSON() {
+        return {
+            equation: this.getEquation(),
+            inline: this.__inline,
+            type: 'equation',
+            version: 1,
+        };
+    }
+    createDOM(_config) {
+        return document.createElement(this.__inline ? 'span' : 'div');
+    }
+    updateDOM(prevNode) {
+        // If the inline property changes, replace the element
+        return this.__inline !== prevNode.__inline;
+    }
+    getEquation() {
+        return this.__equation;
+    }
+    setEquation(equation) {
+        const writable = this.getWritable();
+        writable.__equation = equation;
+    }
+    decorate() {
+        console.warn('dummy equation node');
+        return null;
+        // return (
+        //   <Suspense fallback={null}>
+        //     <EquationComponent equation={this.__equation} inline={this.__inline} nodeKey={this.__key} />
+        //   </Suspense>
+        // );
+    }
+}
+export function $createEquationNode(equation = '', inline = false) {
+    const equationNode = new EquationNode(equation, inline);
+    return equationNode;
+}
+export function $isEquationNode(node) {
+    return node instanceof EquationNode;
+}

package/lib/main/nodes/ExcalidrawNode/ExcalidrawComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { NodeKey } from 'lexical';
+import { type JSX } from 'react';
+export default function ExcalidrawComponent({ nodeKey, data }: {
+    data: string;
+    nodeKey: NodeKey;
+}): JSX.Element;

package/lib/main/nodes/ExcalidrawNode/ExcalidrawComponent.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ImageResizer from '../../ui/ImageResizer';
+import { $isExcalidrawNode } from '.';
+import ExcalidrawImage from './ExcalidrawImage';
+import ExcalidrawModal from './ExcalidrawModal';
+import { covertImageWithMediaKitPath } from './utils';
+export default function ExcalidrawComponent({ nodeKey, data }) {
+    const [editor] = useLexicalComposerContext();
+    const [isModalOpen, setModalOpen] = useState(data === '[]' && editor.isEditable());
+    const imageContainerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const captionButtonRef = useRef(null);
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = useState(false);
+    const initialEditorEditable = useRef(editor.isEditable());
+    // 兼容 excalidraw 旧版本数据 - 缺少 "elements" key, 并且是一个 array, 新版本数据是 object
+    const parsed = useMemo(() => {
+        try {
+            const tempData = JSON.parse(data);
+            covertImageWithMediaKitPath(tempData.elements, tempData.files);
+            return tempData;
+        }
+        catch (e) {
+            console.error(e);
+            return {};
+        }
+    }, [data]);
+    const { files = {}, appState = {}, width: containerWidth, height: containerHeight } = parsed;
+    const elements = Array.isArray(parsed) ? parsed : parsed.elements || [];
+    const onDelete = useCallback((event) => {
+        if (isSelected && $isNodeSelection($getSelection())) {
+            event.preventDefault();
+            editor.update(() => {
+                const node = $getNodeByKey(nodeKey);
+                if ($isExcalidrawNode(node)) {
+                    node.remove();
+                }
+                setSelected(false);
+            });
+        }
+        return false;
+    }, [editor, isSelected, nodeKey, setSelected]);
+    // Set editor to readOnly if excalidraw is open to prevent unwanted changes
+    useEffect(() => {
+        if (isModalOpen) {
+            editor.setEditable(false);
+        }
+        else {
+            editor.setEditable(initialEditorEditable.current);
+        }
+    }, [isModalOpen, editor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
+            const buttonElem = buttonRef.current;
+            const eventTarget = event.target;
+            if (isResizing) {
+                return true;
+            }
+            if (buttonElem !== null && buttonElem.contains(eventTarget)) {
+                if (!event.shiftKey) {
+                    clearSelection();
+                }
+                setSelected(!isSelected);
+                if (event.detail > 1) {
+                    setModalOpen(true);
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
+    }, [clearSelection, editor, isSelected, isResizing, onDelete, setSelected]);
+    const deleteNode = useCallback(() => {
+        setModalOpen(false);
+        return editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isExcalidrawNode(node)) {
+                node.remove();
+            }
+        });
+    }, [editor, nodeKey]);
+    const setData = (els, aps, fls) => {
+        if (!editor.isEditable()) {
+            return;
+        }
+        return editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isExcalidrawNode(node)) {
+                if (els.length > 0 || Object.keys(fls).length > 0) {
+                    // covert image with mediaKit path
+                    covertImageWithMediaKitPath(els, fls);
+                    node.setData(JSON.stringify({
+                        appState: aps,
+                        elements: els,
+                        files: fls,
+                        width: containerWidth,
+                        height: containerHeight,
+                    }));
+                }
+                else {
+                    node.remove();
+                }
+            }
+        });
+    };
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const onResizeEnd = (width, height) => {
+        updateSize(Array.isArray(parsed) ? { elements: parsed } : parsed, width, height);
+        // Delay hiding the resize bars for click case
+        setTimeout(() => {
+            setIsResizing(false);
+        }, 200);
+    };
+    const updateSize = (parsedData, width, height) => {
+        if (!editor.isEditable()) {
+            return;
+        }
+        return editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isExcalidrawNode(node)) {
+                node.setData(JSON.stringify({ ...parsedData, width, height }));
+            }
+        });
+    };
+    const handleClick = () => {
+        // view mode 仅在 readonly 的 editor 中有效
+        if (!initialEditorEditable.current) {
+            setModalOpen(true);
+        }
+    };
+    const handleClose = () => {
+        setModalOpen(false);
+    };
+    const containerStyles = {
+        ...(containerWidth && { width: containerWidth }),
+        ...(containerHeight && { height: containerHeight }),
+        maxWidth: '100%',
+    };
+    // 若从未 resize 过, 则使用 editor width 的 90% 作为默认的显示宽度 (#1178)
+    if (!containerWidth && editor.getRootElement()) {
+        containerStyles.width = '90%';
+    }
+    const _appState = !initialEditorEditable.current ? { ...appState, viewModeEnabled: true } : appState;
+    return (_jsxs(_Fragment, { children: [_jsx(ExcalidrawModal, { initialElements: elements, initialFiles: files, initialAppState: _appState, isShown: isModalOpen, readonly: !initialEditorEditable.current, onDelete: deleteNode, onClose: handleClose, onSave: (els, aps, fls) => {
+                    editor.setEditable(true);
+                    setData(els, aps, fls);
+                    setModalOpen(false);
+                }, closeOnClickOutside: false }), elements.length > 0 && (_jsxs("button", { ref: buttonRef, className: `excalidraw-button ${isSelected ? 'selected' : ''}`, children: [_jsx(ExcalidrawImage, { imageContainerRef: imageContainerRef, className: "image", elements: elements, files: files, appState: appState, onClick: handleClick, style: containerStyles }), (isSelected || isResizing) && (_jsx(ImageResizer, { buttonRef: captionButtonRef, showCaption: true, setShowCaption: () => null, imageRef: imageContainerRef, editor: editor, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: true }))] }))] }));
+}