@team-monolith/cds 1.10.6 → 1.11.0

package/dist/CodleDesignSystemProvider.d.ts

@@ -71,18 +71,6 @@ export declare const light: {
     };
 };
 interface CodleDesignSystemContext {
-    editorjs?: {
-        image: {
-            uploader: {
-                uploadByFile: (file: File) => Promise<{
-                    success: number;
-                    file: {
-                        url: string;
-                    };
-                }>;
-            };
-        };
-    };
     lexical?: {
         uploadByFile: (file: File) => Promise<string>;
     };

package/dist/index.d.ts

@@ -35,5 +35,4 @@ export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
 export * from "./patterns/SegmentedControl";
-export * from "./patterns/ReactEditorJS";
 export * from "./patterns/LexicalEditor";

package/dist/index.js

@@ -35,5 +35,4 @@ export * from "./utils/hover";
 export * from "./utils/reset";
 export * from "./utils/zIndex";
 export * from "./patterns/SegmentedControl";
-export * from "./patterns/ReactEditorJS";
 export * from "./patterns/LexicalEditor";

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { useContext, useState } from "react";
-import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
 import styled from "@emotion/styled";
@@ -23,36 +22,46 @@ import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+import TextInput from "./TextInput";
+import SegmentedInput from "./SegmentedInput";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
-    const { placeholder, nodeKey } = settingFormProps;
+    const { solutions, showCharacterCount, placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const [answerInput, setAnswerInput] = useState(answer);
     const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
+    // "** ***" 같은 형태입니다.
+    const answerFormat = solutions[0].value;
     // 학생 view
-    // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        if (lexicalCustomConfig.freezeProblemNode) {
-            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, color: "default", fullWidth: true, inputProps: { readOnly: true } }));
-        }
-        else {
-            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
-                    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
-                    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
-                    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
-                    // 문제를 더 파악하고 추후 개선 필요.
-                    setAnswerInput(e.target.value);
+        if (showCharacterCount) {
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+                    setAnswerInput(e.value);
                     editor.update(() => {
                         const node = $getNodeByKey(nodeKey);
                         if (!$isProblemInputNode(node)) {
                             return;
                         }
-                        node.setAnswer(e.target.value);
+                        node.setAnswer(e.value);
                     });
-                }, color: "default", fullWidth: true }));
+                } }));
         }
+        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+                // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+                // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+                // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+                // 문제를 더 파악하고 추후 개선 필요.
+                setAnswerInput(e.target.value);
+                editor.update(() => {
+                    const node = $getNodeByKey(nodeKey);
+                    if (!$isProblemInputNode(node)) {
+                        return;
+                    }
+                    node.setAnswer(e.target.value);
+                });
+            }, fullWidth: true }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface SegmentedInputProps {
+    readOnly: boolean;
+    answerFormat: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: {
+        value: string;
+        event: React.ChangeEvent<HTMLInputElement>;
+    }) => void;
+}
+export default function SegmentedInput(props: SegmentedInputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { InputBase } from "../../../../components/InputBase";
+import { useRef, useState } from "react";
+/** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
+function updateFocus(value, i, setFocus) {
+    setFocus((prevFocus) => {
+        const newFocus = prevFocus.slice();
+        newFocus[i] = value;
+        return newFocus;
+    });
+}
+export default function SegmentedInput(props) {
+    const { readOnly, answerFormat, placeholder, value, onChange } = props;
+    // "** ***" => ["*", "*", " ", "*", "*", "*"]
+    const splitedFormat = answerFormat.split("");
+    // "안녕 하세요" => ["안","녕"," ","하","세","요"]
+    const splitedValues = value.split("");
+    const [focus, setFocus] = useState([]);
+    const refs = useRef([]);
+    return (_jsxs(Container, { children: [_jsxs(InputWrapper, { children: [_jsx("div", Object.assign({ css: css `
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          ` }, { children: splitedFormat.map((format, i) => format === " " ? (_jsx(Space, {}, i)) : (_jsx(SquareInput, { size: "small", color: focus[i] ? "activePrimary" : "default", inputRef: (element) => {
+                                refs.current[i] = element;
+                            }, inputProps: {
+                                readOnly,
+                                onBlur: () => updateFocus(false, i, setFocus),
+                                onFocus: () => updateFocus(true, i, setFocus),
+                                onKeyDown: (e) => {
+                                    var _a, _b;
+                                    // Backspace 키로 이전 input으로의 포커스 이동
+                                    if (e.key === "Backspace" && !splitedValues[i] && i > 0) {
+                                        if (splitedFormat[i - 1] === " ") {
+                                            (_a = refs.current[i - 2]) === null || _a === void 0 ? void 0 : _a.focus();
+                                            return;
+                                        }
+                                        (_b = refs.current[i - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                                    }
+                                },
+                            }, value: splitedValues[i] || "", onChange: (event) => {
+                                const eventValue = event.target.value;
+                                // 복붙으로 입력을 입력한 경우
+                                if (eventValue.length > 2) {
+                                    onChange({ value: value + eventValue, event });
+                                    return;
+                                }
+                            } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
+}
+const Container = styled.div `
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+`;
+const InputWrapper = styled.div `
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  gap: 8px;
+  margin: auto;
+`;
+const SquareInput = styled(InputBase) `
+  width: 36px;
+  height: 36px;
+  padding-left: 0;
+  padding-right: 0;
+  input {
+    text-align: center;
+  }
+`;
+const Space = styled.div `
+  width: 4px;
+`;
+const InputMarker = styled.div(({ theme }) => css `
+    height: 8px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    border-top: none;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  `);
+const Text = styled.span(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    text-align: center;
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/TextInput.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from "../../../../components/Input";
+export type TextInputProps = InputProps & {
+    readOnly: boolean;
+};
+/** 읽기모드/편집모드가 가능한 input 컴포넌트 */
+export default function TextInput(props: TextInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/TextInput.js

@@ -0,0 +1,28 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Input from "../../../../components/Input";
+/** 읽기모드/편집모드가 가능한 input 컴포넌트 */
+export default function TextInput(props) {
+    const { readOnly } = props, InputOriginalProps = __rest(props, ["readOnly"]);
+    const [focus, setFocus] = useState(false);
+    if (readOnly) {
+        return (_jsx(Input, Object.assign({}, InputOriginalProps, { inputProps: {
+                readOnly: true,
+            } })));
+    }
+    return (_jsx(Input, Object.assign({}, InputOriginalProps, { color: focus ? "activePrimary" : "default", inputProps: {
+            onFocus: () => setFocus(true),
+            onBlur: () => setFocus(false),
+        } })));
+}

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox.js

@@ -44,6 +44,11 @@ const Index = styled.div(({ theme, isSelected }) => css `
     width: 20px;
     height: 20px;
     padding: 4px;
+    // https://www.w3schools.com/howto/howto_css_disable_text_selection.asp
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+
     justify-content: center;
     align-items: center;
     border-radius: 4px;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SettingForm/SettingForm.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { useFieldArray, useForm, } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { $isProblemSelectNode } from "../ProblemSelectNode";
 import { $getNodeByKey } from "lexical";
 import { css } from "@emotion/react";

package/package.json

@@ -1,21 +1,10 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.10.6",
+  "version": "1.11.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "dependencies": {
-    "@editorjs/delimiter": "^1.4.0",
-    "@editorjs/editorjs": "2.28.2",
-    "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.0",
-    "@editorjs/inline-code": "^1.5.0",
-    "@editorjs/nested-list": "^1.4.1",
-    "@editorjs/paragraph": "2.11.3",
-    "@editorjs/quote": "^2.6.0",
-    "@editorjs/raw": "^2.5.0",
-    "@editorjs/table": "^2.3.0",
-    "@editorjs/underline": "^1.1.0",
+  "dependencies": { 
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
@@ -23,13 +12,11 @@
     "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "editorjs-strikethrough": "^1.0.0",
+    "@types/react-dom": "^18.2.13", 
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-editor-js": "^2.1.0",
+    "react-dom": "^18.2.0", 
     "react-hook-form": "^7.48.2",
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5",

package/dist/patterns/ReactEditorJS/Layout.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const Layout: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    readOnly?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export default Layout;

package/dist/patterns/ReactEditorJS/Layout.js

@@ -1,91 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { hexToCSSFilter } from "hex-to-css-filter";
-import { CalloutStyle, DelimiterStyle, HeaderStyle, NestedListStyle, QuoteStyle, RawStyle, } from "./customTools";
-const Layout = styled.div(({ theme, readOnly }) => css `
-    .codex-editor__redactor {
-      padding-bottom: 0 !important;
-    }
-    .ce-block {
-      margin-left: ${readOnly ? "0" : "58px"};
-    }
-    .ce-block__content {
-      margin: 0;
-      max-width: unset;
-    }
-    .ce-paragraph {
-      font-family: ${theme.fontFamily.ui};
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 24px;
-      padding: 0 0 8px;
-    }
-    // toolbar__actions의 position이 absolute이고, 상위인 toolbar__content의 기본 position이 relative입니다.
-    // actions의 위치를 올바르게 변경하기 위해 content의 position을 static으로 변경합니다.
-    .ce-toolbar__content {
-      position: static;
-    }
-
-    ${HeaderStyle(theme)}
-    ${NestedListStyle}
-    ${QuoteStyle(theme)}
-    ${CalloutStyle(theme)}
-    ${RawStyle(theme)}
-    ${DelimiterStyle(theme)} 
- 
-    // editorjs에서는 content의 width가 모자라는 경우 narrow모드로 변경합니다.
-    // https://github.com/codex-team/editor.js/blob/next/src/components/modules/ui.ts#L268
-    // 그런데, narrow모드가 의도하지 않은 상황에 발생하는 버그가 있습니다.
-    // 관련이슈: https://github.com/codex-team/editor.js/issues/2457
-    // narrow 모드가 아직 제거되지 않아서 narrow모드가 발생했을 때를 고려해야 합니다. 
-    // 그래서 narrow모드가 변경하는 css를 override합니다.
-    .codex-editor--narrow .codex-editor__redactor {
-      margin-right: 0;
-    }
-    .codex-editor--narrow .ce-popover {
-      left: 0;
-      right: unset;
-    }
-    // toolbar를 항상 왼쪽에서 나타나게 하기 위해 narrow모드의 right 스타일을 제거하고, left 스타일을 추가합니다.
-    .ce-toolbar__actions {
-      left: -5px;
-      right: unset;
-    }
-
-    // block tool 스타일
-    .ce-popover-item__icon img {
-      width: 18px;
-      height: 18px;
-    }
-
-    // inline tool 스타일
-    .ce-conversion-tool img {
-      width: 18px;
-      height: 18px;
-    }
-    .ce-inline-toolbar__buttons {
-      gap: 4px;
-      .ce-inline-tool--active img {
-        // color를 editorjs에서는 active icon을 svg color: #388ae5로 변경합니다.
-        // cds color인 primary로 변경합니다.
-        filter: ${hexToCSSFilter(theme.color.foreground.primary).filter};
-      }
-    }
-    .ce-inline-toolbar__dropdown {
-      padding: 8px 4px;
-      gap: 4px;
-    }
-    .ce-inline-toolbar__dropdown-content img {
-      margin-left: 4px;
-      width: 18px;
-      height: 18px;
-    }
-    .ce-inline-tool {
-      padding: 8px 4px;
-      img {
-        width: 18px;
-        height: 18px;
-      }
-    }
-  `);
-export default Layout;

package/dist/patterns/ReactEditorJS/ReactEditorJS.d.ts

@@ -1,15 +0,0 @@
-import { EditorCore } from "@react-editor-js/core";
-export interface ReactEditorJSProps {
-    className?: string;
-    /** 읽기모드 여부(preview 여부) */
-    readOnly?: boolean;
-    /** 에디터의 블록데이터 */
-    blocks: any;
-    /** 데이터가 변경되었을 때 실행될 콜백 */
-    onChange?: (blocks: any) => void;
-    /** 에러 발생시 처리콜백 */
-    onError?: (error: any) => void;
-    /** 초기화시 콜백 */
-    onInitialize?: (instance: EditorCore) => void;
-}
-export declare function ReactEditorJS(props: ReactEditorJSProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/ReactEditorJS/ReactEditorJS.js

@@ -1,87 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { createReactEditorJS } from "react-editor-js";
-import Layout from "./Layout";
-import TOOLS from "./tools";
-import I18n from "./i18n";
-import { CodleDesignSystemContext } from "../../CodleDesignSystemProvider";
-export function ReactEditorJS(props) {
-    var _a;
-    const { className, readOnly = false, blocks, onChange, onError, onInitialize, } = props;
-    const ReactEditorJS = createReactEditorJS();
-    const editorCore = useRef(null);
-    const [isInitialized, setIsInitialized] = useState(false);
-    const codleDesignSystemContext = useContext(CodleDesignSystemContext);
-    const handleInitialize = useCallback((instance) => __awaiter(this, void 0, void 0, function* () {
-        try {
-            setIsInitialized(false);
-            yield instance.dangerouslyLowLevelInstance.isReady;
-            editorCore.current = instance;
-            setIsInitialized(true);
-            onInitialize === null || onInitialize === void 0 ? void 0 : onInitialize(instance);
-        }
-        catch (e) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
-        }
-    }), []);
-    const handleSave = useCallback((onChange) => __awaiter(this, void 0, void 0, function* () {
-        if (!editorCore.current || readOnly) {
-            return;
-        }
-        // 저장 전에 isReady 상태를 기다리기
-        // https://github.com/codex-team/editor.js/issues/1136
-        try {
-            yield editorCore.current.dangerouslyLowLevelInstance.isReady;
-            const savedData = yield editorCore.current.save();
-            if (savedData) {
-                onChange(savedData.blocks);
-            }
-        }
-        catch (e) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
-        }
-    }), []);
-    // blocks가 변경될 때 preview가 다시 렌더링되게 하려면 controlled component를 위한 "value"인자를 전달하는 것이 올바른 방법이지만
-    // controlled를 위해 "defaultValue" 대신 "value"를 사용하면 불필요하게 많이 리렌더링 되고, 그에 따른 오류가 발생합니다.
-    // 따라서, highly recommended인 "defaultValue" 사용을 유지하고 blocks가 변경될 때마다
-    // useEffect를 사용하여 editorCore의 render 메서드를 호출하여 리렌더링을 수행하도록 구현합니다.
-    useEffect(() => {
-        if (!isInitialized || !editorCore.current || !readOnly) {
-            return;
-        }
-        editorCore.current.render({
-            blocks,
-        });
-    }, [blocks, readOnly, isInitialized]);
-    const tools = Object.assign(Object.assign({}, TOOLS), { image: Object.assign(Object.assign({}, TOOLS.image), { config: {
-                uploader: (_a = codleDesignSystemContext.editorjs) === null || _a === void 0 ? void 0 : _a.image.uploader,
-            } }) });
-    // readOnly가 변경되면 ReactEditorJS를 다시 마운트하기 위해 key를 변경합니다.
-    // readOnly 모드에서는 onChange를 전달할 수 없어서 케이스를 분리합니다.
-    if (readOnly) {
-        return (_jsx(Layout, Object.assign({ className: className, readOnly: true }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: tools, defaultValue: {
-                    blocks,
-                }, i18n: I18n, readOnly: true }, "readOnly") })));
-    }
-    return (_jsx(Layout, Object.assign({ className: className }, { children: _jsx(ReactEditorJS, { onInitialize: handleInitialize, tools: tools, inlineToolbar: [
-                "bold",
-                "italic",
-                "underline",
-                "strikeThrough",
-                "inlineCode",
-                "link",
-            ], tunes: ["moveUp", "delete", "moveDown"], 
-            // onChange를 사용하므로 value를 사용하면 안됩니다.(defaultValue 사용이 highly recommended)
-            defaultValue: {
-                blocks,
-            }, onChange: () => handleSave(onChange), i18n: I18n }, "editable") })));
-}

package/dist/patterns/ReactEditorJS/customTools/block/Callout.d.ts

@@ -1,38 +0,0 @@
-import { BlockTool } from "@editorjs/editorjs";
-import { Theme } from "@emotion/react";
-type COLOR_TYPE = "grey" | "red" | "yellow" | "blue" | "green";
-export declare const CalloutStyle: (theme: Theme) => import("@emotion/utils").SerializedStyles;
-export declare class Callout implements BlockTool {
-    api: any;
-    config: any;
-    readOnly: any;
-    private _wrapper;
-    constructor({ api, config, readOnly, data }: any);
-    /** 주어진 data에 따라 HTML Element를 반환함. */
-    private createWrapper;
-    /** 주어진 data에 따라 this._wrapper를 업데이트함. */
-    private updateWrapper;
-    get colors(): string[];
-    get defaultColor(): string;
-    get color(): COLOR_TYPE;
-    save(): {
-        color: COLOR_TYPE;
-        text: string;
-    };
-    render(): HTMLDivElement;
-    renderSettings(): {
-        name: string;
-        icon: string;
-        label: any;
-        isActive: boolean;
-        closeOnActivate: boolean;
-        onActivate: () => void;
-    }[];
-    static get isReadOnlySupported(): boolean;
-    static get enableLineBreaks(): boolean;
-    static get toolbox(): {
-        icon: string;
-        title: string;
-    };
-}
-export {};