@voplus/morpho-document 1.4.96 → 1.4.97

package/es/modules/page/views/PageDefaultView/index.js

@@ -1,68 +1,68 @@
-import "./index.less";
-import { Button, Skeleton, Tooltip } from "@voplus/antd";
-import { PageContext, PageContextState, usePage } from "../../data";
-import React, { useEffect, useState } from "react";
-import { Reload, Sidebar, Versions } from "../../../../controls/ToolBar/buttons";
-import { faChevronDown, faChevronUp } from "@fortawesome/pro-light-svg-icons";
-import { useLayout, useTabItem } from "@voplus/morpho-data";
-import { AsideContent } from "@voplus/morpho-ui";
-import DescriptionEditor from "../../../../controls/DescriptionEditor";
-import DocumentHeader from "../../../../components/DocumentHeader";
-import DocumentTabs from "../../../../components/DocumentTabs";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import PageItems from "../../components/PageItems";
-import ToolBar from "../../../../controls/ToolBar/ToolBar2";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-/** The Page Page component with router parameters support. */
-const PageDefaultView = ({ id }) => {
-    var _a;
-    const layout = useLayout();
-    const query = new URLSearchParams(layout.history.location.search);
-    const expand = (_a = query.get("expand")) !== null && _a !== void 0 ? _a : undefined;
-    const [asideContext] = useState(AsideContent.createContext());
-    const [context] = useState(new PageContextState());
-    const page = usePage(id, { reload: true, includes: "tags,versions" });
-    const tab = useTabItem();
-    useEffect(() => {
-        runInAction(() => (tab.title = page.name));
-    }, [page === null || page === void 0 ? void 0 : page.name]);
-    useEffect(() => {
-        if (expand)
-            asideContext.openAside(AsideElement, { span: 12 });
-    }, []);
-    const AsideElement = (React.createElement("div", { className: "page-default-view_aside" },
-        React.createElement(DocumentTabs, { id: id, docTab: false })));
-    return observe(() => (React.createElement(AsideContent, { context: asideContext },
-        React.createElement(PageContext.Provider, { value: context },
-            React.createElement("div", { className: "page-default-view" },
-                React.createElement("header", null,
-                    React.createElement(DocumentHeader, { id: id, size: "h2", tools: React.createElement(React.Fragment, null,
-                            React.createElement(ToolBar, { id: id },
-                                React.createElement(Tooltip, { title: context.collapsed ? "Expand All" : "Collapse All" },
-                                    React.createElement(Button, { type: "link", onClick: () => {
-                                            context.collapse(!context.collapsed);
-                                        } },
-                                        React.createElement(FAIcon, { icon: context.collapsed ? faChevronDown : faChevronUp }))),
-                                React.createElement(Reload, { action: onReLoad }),
-                                React.createElement(Sidebar, { action: () => asideContext.asideContent
-                                        ? asideContext.closeAside()
-                                        : asideContext.openAside(AsideElement, { span: 12 }) }),
-                                React.createElement(Versions, null))), clickNameEffect: "edit", autoSaveName: true, descriptionVisible: false }),
-                    page.loading ? (React.createElement("div", { className: "page-description" },
-                        React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: page.description, readonly: page.readonly, padding: "0 0 0.75rem 0", collapseAll: true }))),
-                page.loading || !context.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
-                    React.createElement(Skeleton, { active: true }))) : (React.createElement(PageItems, { id: id, readonly: page.readonly })))))));
-    /** reload data */
-    function onReLoad() {
-        context.reload = false;
-        setTimeout(() => {
-            context.reload = true;
-        }, 100);
-    }
-};
-PageDefaultView.defaultProps = {
-    expand: false,
-};
-export default PageDefaultView;
+import "./index.less";
+import { Button, Skeleton, Tooltip } from "@voplus/antd";
+import { PageContext, PageContextState, usePage } from "../../data";
+import React, { useEffect, useState } from "react";
+import { Reload, Sidebar, Versions } from "../../../../controls/ToolBar/buttons";
+import { faChevronDown, faChevronUp } from "@fortawesome/pro-light-svg-icons";
+import { useLayout, useTabItem } from "@voplus/morpho-data";
+import { AsideContent } from "@voplus/morpho-ui";
+import DescriptionEditor from "../../../../controls/DescriptionEditor";
+import DocumentHeader from "../../../../components/DocumentHeader";
+import DocumentTabs from "../../../../components/DocumentTabs";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import PageItems from "../../components/PageItems";
+import ToolBar from "../../../../controls/ToolBar/ToolBar2";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+/** The Page Page component with router parameters support. */
+const PageDefaultView = ({ id }) => {
+    var _a;
+    const layout = useLayout();
+    const query = new URLSearchParams(layout.history.location.search);
+    const expand = (_a = query.get("expand")) !== null && _a !== void 0 ? _a : undefined;
+    const [asideContext] = useState(AsideContent.createContext());
+    const [context] = useState(new PageContextState());
+    const page = usePage(id, { reload: true, includes: "tags,versions" });
+    const tab = useTabItem();
+    useEffect(() => {
+        runInAction(() => (tab.title = page.name));
+    }, [page === null || page === void 0 ? void 0 : page.name]);
+    useEffect(() => {
+        if (expand)
+            asideContext.openAside(AsideElement, { span: 12 });
+    }, []);
+    const AsideElement = (React.createElement("div", { className: "page-default-view_aside" },
+        React.createElement(DocumentTabs, { id: id, docTab: false })));
+    return observe(() => (React.createElement(AsideContent, { context: asideContext },
+        React.createElement(PageContext.Provider, { value: context },
+            React.createElement("div", { className: "page-default-view" },
+                React.createElement("header", null,
+                    React.createElement(DocumentHeader, { id: id, size: "h2", tools: React.createElement(React.Fragment, null,
+                            React.createElement(ToolBar, { id: id },
+                                React.createElement(Tooltip, { title: context.collapsed ? "Expand All" : "Collapse All" },
+                                    React.createElement(Button, { type: "link", onClick: () => {
+                                            context.collapse(!context.collapsed);
+                                        } },
+                                        React.createElement(FAIcon, { icon: context.collapsed ? faChevronDown : faChevronUp }))),
+                                React.createElement(Reload, { action: onReLoad }),
+                                React.createElement(Sidebar, { action: () => asideContext.asideContent
+                                        ? asideContext.closeAside()
+                                        : asideContext.openAside(AsideElement, { span: 12 }) }),
+                                React.createElement(Versions, null))), clickNameEffect: "edit", autoSaveName: true, descriptionVisible: false }),
+                    page.loading ? (React.createElement("div", { className: "page-description" },
+                        React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: page.description, readonly: page.readonly, padding: "0 0 0.75rem 0", collapseAll: true }))),
+                page.loading || !context.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
+                    React.createElement(Skeleton, { active: true }))) : (React.createElement(PageItems, { id: id, readonly: page.readonly })))))));
+    /** reload data */
+    function onReLoad() {
+        context.reload = false;
+        setTimeout(() => {
+            context.reload = true;
+        }, 100);
+    }
+};
+PageDefaultView.defaultProps = {
+    expand: false,
+};
+export default PageDefaultView;
 //# sourceMappingURL=index.js.map

package/es/modules/page/views/PageDefaultView/index.less

@@ -0,0 +1,75 @@
+@import "~@voplus/antd/es/style/themes/index.less";
+
+:global {
+	.page-default-view {
+		position: relative;
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		overflow: hidden;
+		> header {
+			z-index: 1;
+			box-shadow: 2px 2px 5px #e8e8e8;
+			background-color: @component-background;
+		}
+		.document-header-default {
+			background-color: transparent;
+		}
+		.page-description {
+			padding: 0 20px 10px 20px;
+		}
+		.list-view-header {
+			display: none;
+		}
+		.new-page-item-form {
+			width: 100%;
+			height: 0;
+			opacity: 0;
+			margin: 0;
+			background-color: #fff;
+			border-top: 0 @border-style-base @border-color-split;
+			transition: height 0.3s, opacity 0.2s ease-out, border-color 0.1s;
+			&.show {
+				opacity: 1;
+				height: auto;
+				border-top-width: @border-width-base;
+			}
+		}
+		.plus-icon-position {
+			position: absolute;
+			bottom: 20px;
+			right: 20px;
+			width: 26px;
+			height: 26px;
+			line-height: 26px;
+			font-size: 18px;
+			border-radius: 2px;
+			box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+				0 9px 28px 8px rgba(0, 0, 0, 0.05);
+			transition: width 0.3s, opacity 0.2s ease-out, color 0.3s;
+			&.hide {
+				width: 0;
+				opacity: 0;
+			}
+		}
+	}
+	.page-default-view_aside {
+		height: 100%;
+		.ant-tabs {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			.ant-tabs-content {
+				height: 100%;
+				padding-bottom: 0px !important;
+				.ant-tabs-tabpane {
+					position: relative;
+					height: 100%;
+				}
+			}
+			.ant-tabs-bar {
+				margin: 0 20px;
+			}
+		}
+	}
+}

package/es/modules/page/views/PagePrintView/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import "./index.less";
-declare const PagePrintView: {
-    (): JSX.Element;
-    defaultProps: {
-        expand: boolean;
-    };
-};
-export default PagePrintView;
+/// <reference types="react" />
+import "./index.less";
+declare const PagePrintView: {
+    (): JSX.Element;
+    defaultProps: {
+        expand: boolean;
+    };
+};
+export default PagePrintView;

package/es/modules/page/views/PagePrintView/index.js

@@ -1,31 +1,31 @@
-import "./index.less";
-import { PageContext, PageContextState, usePage } from "../../data";
-import React, { useContext, useState } from "react";
-import { __RouterContext } from "react-router";
-import DescriptionEditor from "../../../../controls/DescriptionEditor";
-import PageItems from "../../components/PageItems";
-import { Skeleton } from "@voplus/antd";
-import { observe } from "@voplus/morpho-ui";
-import { useLayout } from "@voplus/morpho-data";
-const PagePrintView = () => {
-    const { match } = useContext(__RouterContext);
-    const id = match.params.id;
-    const layout = useLayout();
-    layout.menu.visible = false;
-    layout.tabNav.visible = false;
-    const [context] = useState(new PageContextState());
-    const page = usePage(id, { reload: true, includes: "tags,versions" });
-    return observe(() => (React.createElement(PageContext.Provider, { value: context },
-        React.createElement("div", { className: "print-pre-view" }, page.loading || !context.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
-            React.createElement(Skeleton, { active: true }))) : (React.createElement(React.Fragment, null,
-            React.createElement("header", { className: "print-view-header" },
-                React.createElement("h2", null, page.name),
-                page.loading ? (React.createElement("div", { className: "page-description" },
-                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: page.description, readonly: page.readonly, padding: "0 0 0.75rem 0" }))),
-            React.createElement(PageItems, { print: true, id: id, readonly: page.readonly })))))));
-};
-PagePrintView.defaultProps = {
-    expand: false,
-};
-export default PagePrintView;
+import "./index.less";
+import { PageContext, PageContextState, usePage } from "../../data";
+import React, { useContext, useState } from "react";
+import { __RouterContext } from "react-router";
+import DescriptionEditor from "../../../../controls/DescriptionEditor";
+import PageItems from "../../components/PageItems";
+import { Skeleton } from "@voplus/antd";
+import { observe } from "@voplus/morpho-ui";
+import { useLayout } from "@voplus/morpho-data";
+const PagePrintView = () => {
+    const { match } = useContext(__RouterContext);
+    const id = match.params.id;
+    const layout = useLayout();
+    layout.menu.visible = false;
+    layout.tabNav.visible = false;
+    const [context] = useState(new PageContextState());
+    const page = usePage(id, { reload: true, includes: "tags,versions" });
+    return observe(() => (React.createElement(PageContext.Provider, { value: context },
+        React.createElement("div", { className: "print-pre-view" }, page.loading || !context.reload ? (React.createElement("div", { style: { padding: "0 20px" } },
+            React.createElement(Skeleton, { active: true }))) : (React.createElement(React.Fragment, null,
+            React.createElement("header", { className: "print-view-header" },
+                React.createElement("h2", null, page.name),
+                page.loading ? (React.createElement("div", { className: "page-description" },
+                    React.createElement(Skeleton, { active: true }))) : (React.createElement(DescriptionEditor, { id: id, description: page.description, readonly: page.readonly, padding: "0 0 0.75rem 0" }))),
+            React.createElement(PageItems, { print: true, id: id, readonly: page.readonly })))))));
+};
+PagePrintView.defaultProps = {
+    expand: false,
+};
+export default PagePrintView;
 //# sourceMappingURL=index.js.map

package/es/modules/page/views/PagePrintView/index.less

@@ -0,0 +1,35 @@
+@import "../../../../style/print.less" print;
+:global {
+	@media print {
+		* {
+			overflow: visible !important;
+		}
+		@page {
+			size: A4 portrait !important;
+			margin: 2cm;
+		}
+	}
+	.print-pre-view {
+		// display: flex;
+		// flex-direction: column;
+		height: 100%;
+		overflow-y: auto;
+
+		.print-view-header {
+			padding: 0.27cm 0.54cm;
+			background-color: #ffffff;
+			.print-item-name {
+				font-weight: 600;
+				font-size: 0.55cm;
+				margin-bottom: 0.13cm;
+				color: #000;
+			}
+		}
+		.page-scroll-view {
+			overflow-y: auto;
+		}
+		.plus-icon-position {
+			display: none;
+		}
+	}
+}

package/es/modules/page/views/PagePropertiesView/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const PagePropertiesView: (props: {
-    id: string;
-}) => JSX.Element;
-export default PagePropertiesView;
+/// <reference types="react" />
+declare const PagePropertiesView: (props: {
+    id: string;
+}) => JSX.Element;
+export default PagePropertiesView;

package/es/modules/page/views/PagePropertiesView/index.js

@@ -1,16 +1,16 @@
-import { PageContext, PageContextState } from "../../data";
-import React, { useState } from "react";
-import DocumentHeader from "../../../../components/DocumentHeader";
-import DocumentTabs from "../../../../components/DocumentTabs";
-import PageItems from "../../components/PageItems";
-import { observe } from "@voplus/morpho-ui";
-const PagePropertiesView = (props) => {
-    const { id } = props;
-    const [context] = useState(new PageContextState());
-    return observe(() => (React.createElement(PageContext.Provider, { value: context },
-        React.createElement("div", { className: "module-detail-view" },
-            React.createElement(DocumentHeader, { id: id, size: "h3", quickDataBarAlign: "left", clickNameEffect: "edit", autoSaveName: true }),
-            React.createElement(DocumentTabs, { id: id, details: React.createElement(PageItems, { id: id }) })))));
-};
-export default PagePropertiesView;
+import { PageContext, PageContextState } from "../../data";
+import React, { useState } from "react";
+import DocumentHeader from "../../../../components/DocumentHeader";
+import DocumentTabs from "../../../../components/DocumentTabs";
+import PageItems from "../../components/PageItems";
+import { observe } from "@voplus/morpho-ui";
+const PagePropertiesView = (props) => {
+    const { id } = props;
+    const [context] = useState(new PageContextState());
+    return observe(() => (React.createElement(PageContext.Provider, { value: context },
+        React.createElement("div", { className: "module-detail-view" },
+            React.createElement(DocumentHeader, { id: id, size: "h3", quickDataBarAlign: "left", clickNameEffect: "edit", autoSaveName: true }),
+            React.createElement(DocumentTabs, { id: id, details: React.createElement(PageItems, { id: id }) })))));
+};
+export default PagePropertiesView;
 //# sourceMappingURL=index.js.map

package/es/modules/page/views/PageQuickView/index.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-declare const PageQuickView: (props: {
-    id: string;
-    visible?: boolean;
-    onCancel?: () => void;
-}) => JSX.Element;
-export default PageQuickView;
+/// <reference types="react" />
+declare const PageQuickView: (props: {
+    id: string;
+    visible?: boolean;
+    onCancel?: () => void;
+}) => JSX.Element;
+export default PageQuickView;

package/es/modules/page/views/PageQuickView/index.js

@@ -1,14 +1,14 @@
-import { PageContext, PageContextState } from "../../data";
-import React, { useState } from "react";
-import PageItems from "../../components/PageItems";
-import QuickViewDialog from "../../../../components/QuickViewDialog";
-import { observe } from "@voplus/morpho-ui";
-const PageQuickView = (props) => {
-    const { id, visible, onCancel } = props;
-    const [context] = useState(new PageContextState());
-    return observe(() => (React.createElement(PageContext.Provider, { value: context },
-        React.createElement(QuickViewDialog, { id: id, visible: visible, onCancel: onCancel },
-            React.createElement(PageItems, { id: id })))));
-};
-export default PageQuickView;
+import { PageContext, PageContextState } from "../../data";
+import React, { useState } from "react";
+import PageItems from "../../components/PageItems";
+import QuickViewDialog from "../../../../components/QuickViewDialog";
+import { observe } from "@voplus/morpho-ui";
+const PageQuickView = (props) => {
+    const { id, visible, onCancel } = props;
+    const [context] = useState(new PageContextState());
+    return observe(() => (React.createElement(PageContext.Provider, { value: context },
+        React.createElement(QuickViewDialog, { id: id, visible: visible, onCancel: onCancel },
+            React.createElement(PageItems, { id: id })))));
+};
+export default PageQuickView;
 //# sourceMappingURL=index.js.map

package/es/pages/ArchivedPage/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-/** Archive page component retrieve id from route and pass to document list. */
-declare const ArchivePage: () => JSX.Element;
-export default ArchivePage;
+/// <reference types="react" />
+/** Archive page component retrieve id from route and pass to document list. */
+declare const ArchivePage: () => JSX.Element;
+export default ArchivePage;

package/es/pages/ArchivedPage/index.js

@@ -1,12 +1,12 @@
-import { DefaultFolders } from "../../data/DefaultFolders";
-import DocumentList from "../../components/DocumentList";
-import React from "react";
-import { useTabItem } from "@voplus/morpho-data";
-/** Archive page component retrieve id from route and pass to document list. */
-const ArchivePage = () => {
-    const tab = useTabItem();
-    tab.title = "Archived";
-    return React.createElement(DocumentList, { id: DefaultFolders.ArchiveId, filtersSystem: true, includes: "" });
-};
-export default ArchivePage;
+import { DefaultFolders } from "../../data/DefaultFolders";
+import DocumentList from "../../components/DocumentList";
+import React from "react";
+import { useTabItem } from "@voplus/morpho-data";
+/** Archive page component retrieve id from route and pass to document list. */
+const ArchivePage = () => {
+    const tab = useTabItem();
+    tab.title = "Archived";
+    return React.createElement(DocumentList, { id: DefaultFolders.ArchiveId, filtersSystem: true, includes: "" });
+};
+export default ArchivePage;
 //# sourceMappingURL=index.js.map

package/es/pages/DocumentPage/index.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-declare const DocumentPage: (props: {
-    /** optional root document id. once provided will override match {id} */
-    root?: string;
-    /** optional base route. Once provide will override default document route to build url. */
-    route?: string;
-    className?: string;
-    /** Use to override the view type of default view. */
-    defaultViewType?: string;
-    /** list exclude type eg:  exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件*/
-    exclude?: string[];
-    /** disabled icon view eg: disabled={["TreeView", "ExplorerView", "TabbedView"]} */
-    disabled?: string[];
-}) => JSX.Element;
-export default DocumentPage;
+/// <reference types="react" />
+declare const DocumentPage: (props: {
+    /** optional root document id. once provided will override match {id} */
+    root?: string;
+    /** optional base route. Once provide will override default document route to build url. */
+    route?: string;
+    className?: string;
+    /** Use to override the view type of default view. */
+    defaultViewType?: string;
+    /** list exclude type eg:  exclude={["Task", "Agenda"]} 結果:不會顯示 Task和Agenda文件*/
+    exclude?: string[];
+    /** disabled icon view eg: disabled={["TreeView", "ExplorerView", "TabbedView"]} */
+    disabled?: string[];
+}) => JSX.Element;
+export default DocumentPage;

package/es/pages/DocumentPage/index.js

@@ -1,27 +1,27 @@
-import React from "react";
-import ViewFrame from "../../components/ViewFrame";
-import { observe } from "@voplus/morpho-ui";
-import { useLayout } from "@voplus/morpho-data";
-import { useMetaStore } from "../../data";
-import { useRouteMatch } from "react-router";
-const DocumentPage = (props) => {
-    var _a, _b;
-    const meta = useMetaStore();
-    const match = useRouteMatch();
-    const layout = useLayout();
-    const query = new URLSearchParams(layout.history.location.search);
-    const id = (_b = (_a = query.get("active")) !== null && _a !== void 0 ? _a : props.root) !== null && _b !== void 0 ? _b : match === null || match === void 0 ? void 0 : match.params.id;
-    const view = query.get("view");
-    return observe(() => (React.createElement(ViewFrame, { id: id, view: view, onNavigate: onNavigate, className: props.className, exclude: props.exclude, disabled: props.disabled, defaultViewType: props.defaultViewType })));
-    function onNavigate(id, view) {
-        var _a;
-        const route = (_a = props.route) !== null && _a !== void 0 ? _a : meta.getRoute({ id: match.params.id, type: "Document" });
-        const viewQuery = view ? `&view=${view}` : "";
-        if (id != (match === null || match === void 0 ? void 0 : match.params.id))
-            layout.history.push(`${route}?active=${id}${viewQuery}`);
-        else
-            layout.history.push(`${route}?${viewQuery}`);
-    }
-};
-export default DocumentPage;
+import React from "react";
+import ViewFrame from "../../components/ViewFrame";
+import { observe } from "@voplus/morpho-ui";
+import { useLayout } from "@voplus/morpho-data";
+import { useMetaStore } from "../../data";
+import { useRouteMatch } from "react-router";
+const DocumentPage = (props) => {
+    var _a, _b;
+    const meta = useMetaStore();
+    const match = useRouteMatch();
+    const layout = useLayout();
+    const query = new URLSearchParams(layout.history.location.search);
+    const id = (_b = (_a = query.get("active")) !== null && _a !== void 0 ? _a : props.root) !== null && _b !== void 0 ? _b : match === null || match === void 0 ? void 0 : match.params.id;
+    const view = query.get("view");
+    return observe(() => (React.createElement(ViewFrame, { id: id, view: view, onNavigate: onNavigate, className: props.className, exclude: props.exclude, disabled: props.disabled, defaultViewType: props.defaultViewType })));
+    function onNavigate(id, view) {
+        var _a;
+        const route = (_a = props.route) !== null && _a !== void 0 ? _a : meta.getRoute({ id: match.params.id, type: "Document" });
+        const viewQuery = view ? `&view=${view}` : "";
+        if (id != (match === null || match === void 0 ? void 0 : match.params.id))
+            layout.history.push(`${route}?active=${id}${viewQuery}`);
+        else
+            layout.history.push(`${route}?${viewQuery}`);
+    }
+};
+export default DocumentPage;
 //# sourceMappingURL=index.js.map

package/es/pages/EmailTemplate/CodeMirror/index.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-import "codemirror/addon/display/autorefresh";
-import "codemirror/addon/comment/comment";
-import "codemirror/addon/edit/matchbrackets";
-import "codemirror/keymap/sublime";
-import "codemirror/theme/eclipse.css";
-declare const CodeMirror: (props: {
-    code: string;
-    height?: string | undefined;
-    readOnly?: boolean | undefined;
-    onChange?: ((code: string) => void) | undefined;
-}) => JSX.Element;
-export default CodeMirror;
+/// <reference types="react" />
+import "codemirror/addon/display/autorefresh";
+import "codemirror/addon/comment/comment";
+import "codemirror/addon/edit/matchbrackets";
+import "codemirror/keymap/sublime";
+import "codemirror/theme/eclipse.css";
+declare const CodeMirror: (props: {
+    code: string;
+    height?: string | undefined;
+    readOnly?: boolean | undefined;
+    onChange?: ((code: string) => void) | undefined;
+}) => JSX.Element;
+export default CodeMirror;