@finos/legend-extension-dsl-text 3.0.8 → 3.1.2

package/lib/components/studio/{DSLText_LegendStudioPlugin.d.ts → DSLText_LegendStudioApplicationPlugin.d.ts}

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LegendStudioPlugin, type NewElementFromStateCreator, type ElementEditorStateCreator, type ElementTypeGetter, type ElementProjectExplorerDnDTypeGetter, type ElementIconGetter, type ElementEditorRenderer, type DSL_LegendStudioPlugin_Extension, type PureGrammarParserDocumentationGetter, type PureGrammarParserKeywordSuggestionGetter, type PureGrammarParserElementSnippetSuggestionsGetter, type PureGrammarParserElementDocumentationGetter } from '@finos/legend-studio';
-export declare class DSLText_LegendStudioPlugin extends LegendStudioPlugin implements DSL_LegendStudioPlugin_Extension {
+import { LegendStudioApplicationPlugin, type NewElementFromStateCreator, type ElementEditorStateCreator, type ElementTypeGetter, type ElementProjectExplorerDnDTypeGetter, type ElementIconGetter, type ElementEditorRenderer, type DSL_LegendStudioApplicationPlugin_Extension, type PureGrammarParserDocumentationGetter, type PureGrammarParserKeywordSuggestionGetter, type PureGrammarParserElementSnippetSuggestionsGetter, type PureGrammarParserElementDocumentationGetter } from '@finos/legend-studio';
+export declare class DSLText_LegendStudioApplicationPlugin extends LegendStudioApplicationPlugin implements DSL_LegendStudioApplicationPlugin_Extension {
     constructor();
     getExtraRequiredDocumentationKeys(): string[];
     getExtraAccessEventLoggingApplicationContextKeys(): string[];
@@ -31,4 +31,4 @@ export declare class DSLText_LegendStudioPlugin extends LegendStudioPlugin imple
     getExtraPureGrammarParserKeywordSuggestionGetters(): PureGrammarParserKeywordSuggestionGetter[];
     getExtraPureGrammarParserElementSnippetSuggestionsGetters(): PureGrammarParserElementSnippetSuggestionsGetter[];
 }
-//# sourceMappingURL=DSLText_LegendStudioPlugin.d.ts.map
+//# sourceMappingURL=DSLText_LegendStudioApplicationPlugin.d.ts.map

package/lib/components/studio/DSLText_LegendStudioApplicationPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSLText_LegendStudioApplicationPlugin.d.ts","sourceRoot":"","sources":["../../../src/components/studio/DSLText_LegendStudioApplicationPlugin.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EACL,6BAA6B,EAC7B,KAAK,0BAA0B,EAG/B,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,mCAAmC,EACxC,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,2CAA2C,EAEhD,KAAK,oCAAoC,EACzC,KAAK,wCAAwC,EAE7C,KAAK,gDAAgD,EACrD,KAAK,2CAA2C,EACjD,MAAM,sBAAsB,CAAC;AAsB9B,qBAAa,qCACX,SAAQ,6BACR,YAAW,2CAA2C;;IAM7C,iCAAiC,IAAI,MAAM,EAAE;IAO7C,gDAAgD,IAAI,MAAM,EAAE;IAMrE,6BAA6B,IAAI,MAAM,EAAE;IAIzC,0BAA0B,IAAI,iBAAiB,EAAE;IAWjD,0BAA0B,IAAI,iBAAiB,EAAE;IAejD,8BAA8B,IAAI,qBAAqB,EAAE;IAWzD,mCAAmC,IAAI,0BAA0B,EAAE;IAenE,kCAAkC,IAAI,yBAAyB,EAAE;IAcjE,4CAA4C,IAAI,mCAAmC,EAAE;IAWrF,qCAAqC,IAAI,MAAM,EAAE;IAIjD,oDAAoD,IAAI,2CAA2C,EAAE;IAmBrG,6CAA6C,IAAI,oCAAoC,EAAE;IAgBvF,iDAAiD,IAAI,wCAAwC,EAAE;IAgB/F,yDAAyD,IAAI,gDAAgD,EAAE;CAsBhH"}

package/lib/components/studio/{DSLText_LegendStudioPlugin.js → DSLText_LegendStudioApplicationPlugin.js}

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * limitations under the License.
  */
 import packageJson from '../../../package.json';
-import { LegendStudioPlugin, } from '@finos/legend-studio';
+import { LegendStudioApplicationPlugin, } from '@finos/legend-studio';
 import { FileIcon } from '@finos/legend-art';
 import { TextEditorState } from '../../stores/studio/TextEditorState.js';
 import { TextElementEditor } from './TextElementEditor.js';
@@ -27,7 +27,7 @@ import { create_TextElement } from '../../helper/DSLText_Helper.js';
 import { DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/studio/DSLText_LegendStudioApplicationNavigationContext.js';
 const TEXT_ELEMENT_TYPE = 'TEXT';
 const TEXT_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_TEXT';
-export class DSLText_LegendStudioPlugin extends LegendStudioPlugin {
+export class DSLText_LegendStudioApplicationPlugin extends LegendStudioApplicationPlugin {
     constructor() {
         super(packageJson.extensions.studioPlugin, packageJson.version);
     }
@@ -161,4 +161,4 @@ export class DSLText_LegendStudioPlugin extends LegendStudioPlugin {
         ];
     }
 }
-//# sourceMappingURL=DSLText_LegendStudioPlugin.js.map
+//# sourceMappingURL=DSLText_LegendStudioApplicationPlugin.js.map

package/lib/components/studio/DSLText_LegendStudioApplicationPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DSLText_LegendStudioApplicationPlugin.js","sourceRoot":"","sources":["../../../src/components/studio/DSLText_LegendStudioApplicationPlugin.tsx"],"names":[],"mappings":"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"}

package/lib/components/studio/TextElementEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextElementEditor.d.ts","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;AAqCH,eAAO,MAAM,iBAAiB;;CA0E5B,CAAC"}
+{"version":3,"file":"TextElementEditor.d.ts","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;AA2CH,eAAO,MAAM,iBAAiB;;CAmH5B,CAAC"}

package/lib/components/studio/TextElementEditor.js

@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { StudioTextInputEditor, useEditorStore } from '@finos/legend-studio';
 import { TextEditorState } from '../../stores/studio/TextEditorState.js';
-import { LockIcon, CaretDownIcon, DropdownMenu, MenuContent, MenuContentItem, } from '@finos/legend-art';
+import { OpenPreviewIcon, LockIcon, CaretDownIcon, DropdownMenu, MenuContent, MenuContentItem, MarkdownTextViewer, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, getControlledResizablePanelProps, } from '@finos/legend-art';
 import { EDITOR_LANGUAGE, useApplicationNavigationContext, } from '@finos/legend-application';
 import { text_setContent, text_setType, } from '../../stores/studio/DSLText_GraphModifierHelper.js';
 import { TEXT_TYPE } from '../../helper/DSLText_Helper.js';
@@ -39,19 +39,27 @@ export const TextElementEditor = observer(() => {
     const textElement = textEditorState.textElement;
     const isReadOnly = textEditorState.isReadOnly;
     const typeNameRef = useRef(null);
+    const [showPreview, setShowPreview] = useState(false);
+    const isMarkdown = textElement.type === EDITOR_LANGUAGE.MARKDOWN;
     const changeType = (val) => () => {
         !isReadOnly && text_setType(textElement, val);
     };
     const changeContent = (val) => text_setContent(textElement, val);
+    const changePreview = (val) => setShowPreview(val);
     useEffect(() => {
         if (!isReadOnly) {
             typeNameRef.current?.focus();
         }
     }, [isReadOnly]);
     useApplicationNavigationContext(DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.TEXT_EDITOR);
+    const renderPlainTextEditorView = () => (_jsx("div", { className: "panel__content text-element-editor__editor", children: _jsx(StudioTextInputEditor, { language: getTextElementEditorLanguage(textElement.type), inputValue: textElement.content, updateInput: changeContent }) }));
+    const renderMarkdownView = () => (_jsxs(ResizablePanelGroup, { ...getControlledResizablePanelProps(true), orientation: "vertical", children: [_jsx(ResizablePanel, { minSize: 250, children: renderPlainTextEditorView() }), showPreview && _jsx(ResizablePanelSplitter, {}), showPreview && (_jsx(ResizablePanel, { children: _jsx("div", { className: "panel_content text-element-editor__preview", children: MarkdownTextViewer({
+                        value: { value: textElement.content },
+                        className: `text-element-editor__preview__markdown`,
+                    }) }) }))] }));
     return (_jsxs("div", { className: "panel text-element-editor", children: [_jsx("div", { className: "panel__header text-element-editor__header", children: _jsxs("div", { className: "text-element-editor__header__configs", children: [isReadOnly && (_jsx("div", { className: "text-element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx(DropdownMenu, { disabled: isReadOnly, content: _jsx(MenuContent, { children: Object.values(TEXT_TYPE).map((mode) => (_jsx(MenuContentItem, { className: "text-element-editor__header__configs__option", onClick: changeType(mode), children: prettyCONSTName(mode) }, mode))) }), menuProps: {
                                 anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
                                 transformOrigin: { vertical: 'top', horizontal: 'right' },
-                            }, children: _jsxs("div", { className: "text-element-editor__header__configs__type", children: [_jsx("div", { className: "text-element-editor__header__configs__type__label", children: prettyCONSTName(textElement.type) }), _jsx("div", { className: "text-element-editor__header__configs__type__icon", children: _jsx(CaretDownIcon, {}) })] }) })] }) }), _jsx("div", { className: "panel__content text-element-editor__editor", children: _jsx(StudioTextInputEditor, { language: getTextElementEditorLanguage(textElement.type), inputValue: textElement.content, updateInput: changeContent }) })] }));
+                            }, children: _jsxs("div", { className: "text-element-editor__header__configs__type", children: [_jsx("div", { className: "text-element-editor__header__configs__type__label", children: prettyCONSTName(textElement.type) }), _jsx("div", { className: "text-element-editor__header__configs__type__icon", children: _jsx(CaretDownIcon, {}) })] }) }), isMarkdown ? (_jsx("button", { title: showPreview ? `Hide Preview` : `Show Preview`, className: `text-element-editor__preview-btn ${showPreview ? `text-element-editor__preview-btn__active` : ''}`, onClick: () => changePreview(!showPreview), children: _jsx(OpenPreviewIcon, {}) })) : null] }) }), isMarkdown ? renderMarkdownView() : renderPlainTextEditorView()] }));
 });
 //# sourceMappingURL=TextElementEditor.js.map

package/lib/components/studio/TextElementEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextElementEditor.js","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextElementEditor.js","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"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"}

package/lib/index.css

@@ -1,4 +1,4 @@
-/** @license @finos/legend-extension-dsl-text v3.0.8
+/** @license @finos/legend-extension-dsl-text v3.1.2
  * Copyright (c) 2020-present, Goldman Sachs
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-:root{--color-text-element: var(--color-blue-50)}.icon--text-element{color:var(--color-text-element)}.text-element-editor{height:100%;width:100%;display:flex;flex-direction:column;background:var(--color-dark-grey-50);position:relative}.text-element-editor__header__lock{display:flex;align-items:center;justify-content:center;width:4rem;min-width:4rem;padding-left:.5rem;padding-right:.5rem;background:var(--color-dark-grey-100)}.text-element-editor__header__lock svg{font-size:1.2rem;color:var(--color-yellow-200)}.text-element-editor__header{padding-left:0;background:var(--color-dark-grey-50)}.text-element-editor__header__configs{display:flex}.text-element-editor__header__configs__type{display:flex;align-items:center;height:2.6rem;width:25rem;background:var(--color-dark-grey-100);border-right:.1rem solid var(--color-dark-grey-50);border-left:.1rem solid var(--color-dark-grey-50);color:var(--color-light-grey-400);cursor:pointer}.text-element-editor__header__configs__type__label{height:2.6rem;width:23.4rem;display:flex;align-items:center;justify-content:center}.text-element-editor__header__configs__type__icon{display:flex;align-items:center;justify-content:center;border-left:.1rem solid var(--color-dark-grey-50);height:2.6rem;width:2.6rem;min-width:2.6rem}.text-element-editor__header__configs__option{display:flex;align-items:center;justify-content:center;width:24.8rem;height:2.6rem}.text-element-editor__editor{overflow-y:hidden;position:relative}/*# sourceMappingURL=index.css.map */
+:root{--color-text-element: var(--color-blue-50)}.icon--text-element{color:var(--color-text-element)}.text-element-editor{height:100%;width:100%;display:flex;flex-direction:column;background:var(--color-dark-grey-50);position:relative}.text-element-editor__header__lock{display:flex;align-items:center;justify-content:center;width:4rem;min-width:4rem;padding-left:.5rem;padding-right:.5rem;background:var(--color-dark-grey-100)}.text-element-editor__header__lock svg{font-size:1.2rem;color:var(--color-yellow-200)}.text-element-editor__header{padding-left:0;background:var(--color-dark-grey-50)}.text-element-editor__header__configs{display:flex;width:100%}.text-element-editor__header__configs__type{display:flex;align-items:center;height:2.6rem;width:25rem;background:var(--color-dark-grey-100);border-right:.1rem solid var(--color-dark-grey-50);border-left:.1rem solid var(--color-dark-grey-50);color:var(--color-light-grey-400);cursor:pointer}.text-element-editor__header__configs__type__label{height:2.6rem;width:23.4rem;display:flex;align-items:center;justify-content:center}.text-element-editor__header__configs__type__icon{display:flex;align-items:center;justify-content:center;border-left:.1rem solid var(--color-dark-grey-50);height:2.6rem;width:2.6rem;min-width:2.6rem}.text-element-editor__header__configs__option{display:flex;align-items:center;justify-content:center;width:24.8rem;height:2.6rem}.text-element-editor__editor{overflow-y:hidden;position:relative}.text-element-editor__preview{overflow-y:hidden;position:relative}.text-element-editor__preview__markdown{height:100%;overflow-y:scroll}.text-element-editor__preview-btn{color:var(--color-light-grey-400);cursor:pointer;font-size:1.8rem;margin:auto .5rem auto auto}.text-element-editor__preview-btn__active{color:var(--color-light-grey-100)}.text-element-editor__preview-btn:hover{color:var(--color-light-grey-100)}/*# sourceMappingURL=index.css.map */

package/lib/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style/index.scss","../../../node_modules/@finos/legend-art/scss/_mixins.scss"],"names":[],"mappings":"AAkBA,MACE,2CAGF,oBACE,gCAGF,qBACE,YACA,WACA,aACA,sBACA,qCACA,kBAEA,mCCVA,aACA,mBACA,uBDWE,WACA,eACA,mBACA,oBACA,sCAGF,uCACE,iBACA,8BAGF,6BACE,eACA,qCAEA,sCACE,aAEA,4CC1BJ,aACA,mBD4BM,cACA,YACA,sCACA,mDACA,kDACA,kCACA,eAGF,mDACE,cACA,cC9CN,aACA,mBACA,uBDiDI,kDCnDJ,aACA,mBACA,uBDoDM,kDACA,cACA,aACA,iBAGF,8CC5DJ,aACA,mBACA,uBD6DM,cACA,cAKN,6BACE,kBACA","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../style/index.scss","../../../node_modules/@finos/legend-art/scss/_mixins.scss"],"names":[],"mappings":"AAkBA,MACE,2CAGF,oBACE,gCAGF,qBACE,YACA,WACA,aACA,sBACA,qCACA,kBAEA,mCCVA,aACA,mBACA,uBDWE,WACA,eACA,mBACA,oBACA,sCAGF,uCACE,iBACA,8BAGF,6BACE,eACA,qCAEA,sCACE,aACA,WAEA,4CC3BJ,aACA,mBD6BM,cACA,YACA,sCACA,mDACA,kDACA,kCACA,eAGF,mDACE,cACA,cC/CN,aACA,mBACA,uBDkDI,kDCpDJ,aACA,mBACA,uBDqDM,kDACA,cACA,aACA,iBAGF,8CC7DJ,aACA,mBACA,uBD8DM,cACA,cAKN,6BACE,kBACA,kBAGF,8BACE,kBACA,kBAEA,wCACE,YACA,kBAIJ,kCACE,kCACA,eACA,iBACA,4BAEA,0CACE,kCAGF,wCACE","file":"index.css"}

package/lib/index.d.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 export * from './DSLText_Extension.js';
-export { DSLText_LegendStudioPlugin } from './components/studio/DSLText_LegendStudioPlugin.js';
+export { DSLText_LegendStudioApplicationPlugin } from './components/studio/DSLText_LegendStudioApplicationPlugin.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,mDAAmD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,qCAAqC,EAAE,MAAM,8DAA8D,CAAC"}

package/lib/index.js

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 export * from './DSLText_Extension.js';
-export { DSLText_LegendStudioPlugin } from './components/studio/DSLText_LegendStudioPlugin.js';
+export { DSLText_LegendStudioApplicationPlugin } from './components/studio/DSLText_LegendStudioApplicationPlugin.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,0BAA0B,EAAE,MAAM,mDAAmD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,qCAAqC,EAAE,MAAM,8DAA8D,CAAC"}

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@finos/legend-extension-dsl-text",
-    "version": "3.0.8",
+    "version": "3.1.2",
     "description": "Legend extension for Text DSL",
     "keywords": [
         "legend",
@@ -57,13 +57,13 @@
     },
     "devDependencies": {
         "@finos/legend-dev-utils": "workspace:*",
-        "@jest/globals": "28.1.2",
+        "@jest/globals": "28.1.3",
         "cross-env": "7.0.3",
-        "eslint": "8.19.0",
-        "jest": "28.1.2",
+        "eslint": "8.20.0",
+        "jest": "28.1.3",
         "npm-run-all": "4.1.5",
         "rimraf": "3.0.2",
-        "sass": "1.53.0",
+        "sass": "1.54.0",
         "typescript": "4.7.4"
     },
     "peerDependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-extension-dsl-text",
-  "version": "3.0.8",
+  "version": "3.1.2",
   "description": "Legend extension for Text DSL",
   "keywords": [
     "legend",
@@ -43,12 +43,12 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "6.0.0",
-    "@finos/legend-art": "2.0.6",
-    "@finos/legend-graph": "10.1.0",
-    "@finos/legend-model-storage": "2.0.6",
-    "@finos/legend-shared": "4.0.3",
-    "@finos/legend-studio": "11.0.1",
+    "@finos/legend-application": "7.0.0",
+    "@finos/legend-art": "2.0.9",
+    "@finos/legend-graph": "11.0.0",
+    "@finos/legend-model-storage": "2.0.7",
+    "@finos/legend-shared": "5.0.0",
+    "@finos/legend-studio": "12.0.0",
     "@types/react": "18.0.15",
     "mobx": "6.6.1",
     "mobx-react-lite": "3.4.0",
@@ -56,14 +56,14 @@
     "serializr": "2.0.5"
   },
   "devDependencies": {
-    "@finos/legend-dev-utils": "2.0.5",
-    "@jest/globals": "28.1.2",
+    "@finos/legend-dev-utils": "2.0.6",
+    "@jest/globals": "28.1.3",
     "cross-env": "7.0.3",
-    "eslint": "8.19.0",
-    "jest": "28.1.2",
+    "eslint": "8.20.0",
+    "jest": "28.1.3",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
-    "sass": "1.53.0",
+    "sass": "1.54.0",
     "typescript": "4.7.4"
   },
   "peerDependencies": {

package/src/components/studio/{DSLText_LegendStudioPlugin.tsx → DSLText_LegendStudioApplicationPlugin.tsx}

@@ -16,7 +16,7 @@
 
 import packageJson from '../../../package.json';
 import {
-  LegendStudioPlugin,
+  LegendStudioApplicationPlugin,
   type NewElementFromStateCreator,
   type EditorStore,
   type ElementEditorState,
@@ -25,7 +25,7 @@ import {
   type ElementProjectExplorerDnDTypeGetter,
   type ElementIconGetter,
   type ElementEditorRenderer,
-  type DSL_LegendStudioPlugin_Extension,
+  type DSL_LegendStudioApplicationPlugin_Extension,
   type NewElementState,
   type PureGrammarParserDocumentationGetter,
   type PureGrammarParserKeywordSuggestionGetter,
@@ -48,15 +48,15 @@ import {
   PLAIN_TEXT_SNIPPET,
 } from './DSLText_CodeSnippets.js';
 import { create_TextElement } from '../../helper/DSLText_Helper.js';
-import type { LegendApplicationDocumentationEntry } from '@finos/legend-application';
+import type { DocumentationEntry } from '@finos/legend-application';
 import { DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/studio/DSLText_LegendStudioApplicationNavigationContext.js';
 
 const TEXT_ELEMENT_TYPE = 'TEXT';
 const TEXT_ELEMENT_PROJECT_EXPLORER_DND_TYPE = 'PROJECT_EXPLORER_TEXT';
 
-export class DSLText_LegendStudioPlugin
-  extends LegendStudioPlugin
-  implements DSL_LegendStudioPlugin_Extension
+export class DSLText_LegendStudioApplicationPlugin
+  extends LegendStudioApplicationPlugin
+  implements DSL_LegendStudioApplicationPlugin_Extension
 {
   constructor() {
     super(packageJson.extensions.studioPlugin, packageJson.version);
@@ -166,7 +166,7 @@ export class DSLText_LegendStudioPlugin
         editorStore: EditorStore,
         parserKeyword: string,
         elementKeyword: string,
-      ): LegendApplicationDocumentationEntry | undefined => {
+      ): DocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_TEXT_PARSER_NAME) {
           if (elementKeyword === PURE_GRAMMAR_TEXT_ELEMENT_TYPE_LABEL) {
             return editorStore.applicationStore.documentationService.getDocEntry(
@@ -184,7 +184,7 @@ export class DSLText_LegendStudioPlugin
       (
         editorStore: EditorStore,
         parserKeyword: string,
-      ): LegendApplicationDocumentationEntry | undefined => {
+      ): DocumentationEntry | undefined => {
         if (parserKeyword === PURE_GRAMMAR_TEXT_PARSER_NAME) {
           return editorStore.applicationStore.documentationService.getDocEntry(
             DSL_TEXT_LEGEND_STUDIO_DOCUMENTATION_KEY.GRAMMAR_PARSER,

package/src/components/studio/TextElementEditor.tsx

@@ -14,17 +14,23 @@
  * limitations under the License.
  */
 
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { prettyCONSTName } from '@finos/legend-shared';
 import { StudioTextInputEditor, useEditorStore } from '@finos/legend-studio';
 import { TextEditorState } from '../../stores/studio/TextEditorState.js';
 import {
+  OpenPreviewIcon,
   LockIcon,
   CaretDownIcon,
   DropdownMenu,
   MenuContent,
   MenuContentItem,
+  MarkdownTextViewer,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  getControlledResizablePanelProps,
 } from '@finos/legend-art';
 import {
   EDITOR_LANGUAGE,
@@ -55,6 +61,9 @@ export const TextElementEditor = observer(() => {
   const textElement = textEditorState.textElement;
   const isReadOnly = textEditorState.isReadOnly;
   const typeNameRef = useRef<HTMLInputElement>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const isMarkdown = textElement.type === EDITOR_LANGUAGE.MARKDOWN;
+
   const changeType =
     (val: TEXT_TYPE): (() => void) =>
     (): void => {
@@ -62,6 +71,7 @@ export const TextElementEditor = observer(() => {
     };
   const changeContent = (val: string): void =>
     text_setContent(textElement, val);
+  const changePreview = (val: boolean): void => setShowPreview(val);
 
   useEffect(() => {
     if (!isReadOnly) {
@@ -73,6 +83,38 @@ export const TextElementEditor = observer(() => {
     DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.TEXT_EDITOR,
   );
 
+  const renderPlainTextEditorView = (): JSX.Element => (
+    <div className="panel__content text-element-editor__editor">
+      <StudioTextInputEditor
+        language={getTextElementEditorLanguage(textElement.type)}
+        inputValue={textElement.content}
+        updateInput={changeContent}
+      />
+    </div>
+  );
+
+  const renderMarkdownView = (): JSX.Element => (
+    <ResizablePanelGroup
+      {...getControlledResizablePanelProps(true)}
+      orientation="vertical"
+    >
+      <ResizablePanel minSize={250}>
+        {renderPlainTextEditorView()}
+      </ResizablePanel>
+      {showPreview && <ResizablePanelSplitter />}
+      {showPreview && (
+        <ResizablePanel>
+          <div className="panel_content text-element-editor__preview">
+            {MarkdownTextViewer({
+              value: { value: textElement.content },
+              className: `text-element-editor__preview__markdown`,
+            })}
+          </div>
+        </ResizablePanel>
+      )}
+    </ResizablePanelGroup>
+  );
+
   return (
     <div className="panel text-element-editor">
       <div className="panel__header text-element-editor__header">
@@ -112,15 +154,20 @@ export const TextElementEditor = observer(() => {
               </div>
             </div>
           </DropdownMenu>
+          {isMarkdown ? (
+            <button
+              title={showPreview ? `Hide Preview` : `Show Preview`}
+              className={`text-element-editor__preview-btn ${
+                showPreview ? `text-element-editor__preview-btn__active` : ''
+              }`}
+              onClick={(): void => changePreview(!showPreview)}
+            >
+              <OpenPreviewIcon />
+            </button>
+          ) : null}
         </div>
       </div>
-      <div className="panel__content text-element-editor__editor">
-        <StudioTextInputEditor
-          language={getTextElementEditorLanguage(textElement.type)}
-          inputValue={textElement.content}
-          updateInput={changeContent}
-        />
-      </div>
+      {isMarkdown ? renderMarkdownView() : renderPlainTextEditorView()}
     </div>
   );
 });

package/src/index.ts

@@ -15,4 +15,4 @@
  */
 
 export * from './DSLText_Extension.js';
-export { DSLText_LegendStudioPlugin } from './components/studio/DSLText_LegendStudioPlugin.js';
+export { DSLText_LegendStudioApplicationPlugin } from './components/studio/DSLText_LegendStudioApplicationPlugin.js';

package/tsconfig.json

@@ -51,7 +51,7 @@
     "./src/stores/studio/DSLText_GraphModifierHelper.ts",
     "./src/stores/studio/DSLText_LegendStudioApplicationNavigationContext.ts",
     "./src/stores/studio/TextEditorState.ts",
-    "./src/components/studio/DSLText_LegendStudioPlugin.tsx",
+    "./src/components/studio/DSLText_LegendStudioApplicationPlugin.tsx",
     "./src/components/studio/TextElementEditor.tsx"
   ],
   "include": [

package/lib/components/studio/DSLText_LegendStudioPlugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSLText_LegendStudioPlugin.d.ts","sourceRoot":"","sources":["../../../src/components/studio/DSLText_LegendStudioPlugin.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EACL,kBAAkB,EAClB,KAAK,0BAA0B,EAG/B,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,mCAAmC,EACxC,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,gCAAgC,EAErC,KAAK,oCAAoC,EACzC,KAAK,wCAAwC,EAE7C,KAAK,gDAAgD,EACrD,KAAK,2CAA2C,EACjD,MAAM,sBAAsB,CAAC;AAsB9B,qBAAa,0BACX,SAAQ,kBACR,YAAW,gCAAgC;;IAMlC,iCAAiC,IAAI,MAAM,EAAE;IAO7C,gDAAgD,IAAI,MAAM,EAAE;IAMrE,6BAA6B,IAAI,MAAM,EAAE;IAIzC,0BAA0B,IAAI,iBAAiB,EAAE;IAWjD,0BAA0B,IAAI,iBAAiB,EAAE;IAejD,8BAA8B,IAAI,qBAAqB,EAAE;IAWzD,mCAAmC,IAAI,0BAA0B,EAAE;IAenE,kCAAkC,IAAI,yBAAyB,EAAE;IAcjE,4CAA4C,IAAI,mCAAmC,EAAE;IAWrF,qCAAqC,IAAI,MAAM,EAAE;IAIjD,oDAAoD,IAAI,2CAA2C,EAAE;IAmBrG,6CAA6C,IAAI,oCAAoC,EAAE;IAgBvF,iDAAiD,IAAI,wCAAwC,EAAE;IAgB/F,yDAAyD,IAAI,gDAAgD,EAAE;CAsBhH"}

package/lib/components/studio/DSLText_LegendStudioPlugin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSLText_LegendStudioPlugin.js","sourceRoot":"","sources":["../../../src/components/studio/DSLText_LegendStudioPlugin.tsx"],"names":[],"mappings":"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"}