@finos/legend-extension-dsl-text 3.0.8 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/studio/TextElementEditor.d.ts.map +1 -1
- package/lib/components/studio/TextElementEditor.js +11 -3
- package/lib/components/studio/TextElementEditor.js.map +1 -1
- package/lib/index.css +2 -2
- package/lib/index.css.map +1 -1
- package/lib/package.json +1 -1
- package/package.json +5 -5
- package/src/components/studio/TextElementEditor.tsx +55 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextElementEditor.d.ts","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;
|
|
1
|
+
{"version":3,"file":"TextElementEditor.d.ts","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;AA2CH,eAAO,MAAM,iBAAiB;;CAmH5B,CAAC"}
|
|
@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
* See the License for the specific language governing permissions and
|
|
15
15
|
* limitations under the License.
|
|
16
16
|
*/
|
|
17
|
-
import { useRef, useEffect } from 'react';
|
|
17
|
+
import { useRef, useEffect, useState } from 'react';
|
|
18
18
|
import { observer } from 'mobx-react-lite';
|
|
19
19
|
import { prettyCONSTName } from '@finos/legend-shared';
|
|
20
20
|
import { StudioTextInputEditor, useEditorStore } from '@finos/legend-studio';
|
|
21
21
|
import { TextEditorState } from '../../stores/studio/TextEditorState.js';
|
|
22
|
-
import { LockIcon, CaretDownIcon, DropdownMenu, MenuContent, MenuContentItem, } from '@finos/legend-art';
|
|
22
|
+
import { OpenPreviewIcon, LockIcon, CaretDownIcon, DropdownMenu, MenuContent, MenuContentItem, MarkdownTextViewer, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, getControlledResizablePanelProps, } from '@finos/legend-art';
|
|
23
23
|
import { EDITOR_LANGUAGE, useApplicationNavigationContext, } from '@finos/legend-application';
|
|
24
24
|
import { text_setContent, text_setType, } from '../../stores/studio/DSLText_GraphModifierHelper.js';
|
|
25
25
|
import { TEXT_TYPE } from '../../helper/DSLText_Helper.js';
|
|
@@ -39,19 +39,27 @@ export const TextElementEditor = observer(() => {
|
|
|
39
39
|
const textElement = textEditorState.textElement;
|
|
40
40
|
const isReadOnly = textEditorState.isReadOnly;
|
|
41
41
|
const typeNameRef = useRef(null);
|
|
42
|
+
const [showPreview, setShowPreview] = useState(false);
|
|
43
|
+
const isMarkdown = textElement.type === EDITOR_LANGUAGE.MARKDOWN;
|
|
42
44
|
const changeType = (val) => () => {
|
|
43
45
|
!isReadOnly && text_setType(textElement, val);
|
|
44
46
|
};
|
|
45
47
|
const changeContent = (val) => text_setContent(textElement, val);
|
|
48
|
+
const changePreview = (val) => setShowPreview(val);
|
|
46
49
|
useEffect(() => {
|
|
47
50
|
if (!isReadOnly) {
|
|
48
51
|
typeNameRef.current?.focus();
|
|
49
52
|
}
|
|
50
53
|
}, [isReadOnly]);
|
|
51
54
|
useApplicationNavigationContext(DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.TEXT_EDITOR);
|
|
55
|
+
const renderPlainTextEditorView = () => (_jsx("div", { className: "panel__content text-element-editor__editor", children: _jsx(StudioTextInputEditor, { language: getTextElementEditorLanguage(textElement.type), inputValue: textElement.content, updateInput: changeContent }) }));
|
|
56
|
+
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({
|
|
57
|
+
value: { value: textElement.content },
|
|
58
|
+
className: `text-element-editor__preview__markdown`,
|
|
59
|
+
}) }) }))] }));
|
|
52
60
|
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: {
|
|
53
61
|
anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
|
|
54
62
|
transformOrigin: { vertical: 'top', horizontal: 'right' },
|
|
55
|
-
}, 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, {}) })] }) })
|
|
63
|
+
}, 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()] }));
|
|
56
64
|
});
|
|
57
65
|
//# sourceMappingURL=TextElementEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextElementEditor.js","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TextElementEditor.js","sourceRoot":"","sources":["../../../src/components/studio/TextElementEditor.tsx"],"names":[],"mappings":"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"}
|
package/lib/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/** @license @finos/legend-extension-dsl-text v3.0
|
|
1
|
+
/** @license @finos/legend-extension-dsl-text v3.1.0
|
|
2
2
|
* Copyright (c) 2020-present, Goldman Sachs
|
|
3
3
|
*
|
|
4
4
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
@@ -14,4 +14,4 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
: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 */
|
|
17
|
+
: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-blue-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{background:var(--color-blue-100)}/*# sourceMappingURL=index.css.map */
|
package/lib/index.css.map
CHANGED
|
@@ -1 +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,
|
|
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,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,4BACA,eACA,iBACA,4BAEA,0CACE,kCAGF,wCACE","file":"index.css"}
|
package/lib/package.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@finos/legend-extension-dsl-text",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Legend extension for Text DSL",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"legend",
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"test:watch": "jest --watch"
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@finos/legend-application": "6.0.
|
|
47
|
-
"@finos/legend-art": "2.0.
|
|
48
|
-
"@finos/legend-graph": "10.1.
|
|
46
|
+
"@finos/legend-application": "6.0.1",
|
|
47
|
+
"@finos/legend-art": "2.0.7",
|
|
48
|
+
"@finos/legend-graph": "10.1.1",
|
|
49
49
|
"@finos/legend-model-storage": "2.0.6",
|
|
50
50
|
"@finos/legend-shared": "4.0.3",
|
|
51
|
-
"@finos/legend-studio": "11.0.
|
|
51
|
+
"@finos/legend-studio": "11.0.2",
|
|
52
52
|
"@types/react": "18.0.15",
|
|
53
53
|
"mobx": "6.6.1",
|
|
54
54
|
"mobx-react-lite": "3.4.0",
|
|
@@ -14,17 +14,23 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
|
-
import { useRef, useEffect } from 'react';
|
|
17
|
+
import { useRef, useEffect, useState } from 'react';
|
|
18
18
|
import { observer } from 'mobx-react-lite';
|
|
19
19
|
import { prettyCONSTName } from '@finos/legend-shared';
|
|
20
20
|
import { StudioTextInputEditor, useEditorStore } from '@finos/legend-studio';
|
|
21
21
|
import { TextEditorState } from '../../stores/studio/TextEditorState.js';
|
|
22
22
|
import {
|
|
23
|
+
OpenPreviewIcon,
|
|
23
24
|
LockIcon,
|
|
24
25
|
CaretDownIcon,
|
|
25
26
|
DropdownMenu,
|
|
26
27
|
MenuContent,
|
|
27
28
|
MenuContentItem,
|
|
29
|
+
MarkdownTextViewer,
|
|
30
|
+
ResizablePanel,
|
|
31
|
+
ResizablePanelGroup,
|
|
32
|
+
ResizablePanelSplitter,
|
|
33
|
+
getControlledResizablePanelProps,
|
|
28
34
|
} from '@finos/legend-art';
|
|
29
35
|
import {
|
|
30
36
|
EDITOR_LANGUAGE,
|
|
@@ -55,6 +61,9 @@ export const TextElementEditor = observer(() => {
|
|
|
55
61
|
const textElement = textEditorState.textElement;
|
|
56
62
|
const isReadOnly = textEditorState.isReadOnly;
|
|
57
63
|
const typeNameRef = useRef<HTMLInputElement>(null);
|
|
64
|
+
const [showPreview, setShowPreview] = useState(false);
|
|
65
|
+
const isMarkdown = textElement.type === EDITOR_LANGUAGE.MARKDOWN;
|
|
66
|
+
|
|
58
67
|
const changeType =
|
|
59
68
|
(val: TEXT_TYPE): (() => void) =>
|
|
60
69
|
(): void => {
|
|
@@ -62,6 +71,7 @@ export const TextElementEditor = observer(() => {
|
|
|
62
71
|
};
|
|
63
72
|
const changeContent = (val: string): void =>
|
|
64
73
|
text_setContent(textElement, val);
|
|
74
|
+
const changePreview = (val: boolean): void => setShowPreview(val);
|
|
65
75
|
|
|
66
76
|
useEffect(() => {
|
|
67
77
|
if (!isReadOnly) {
|
|
@@ -73,6 +83,38 @@ export const TextElementEditor = observer(() => {
|
|
|
73
83
|
DSL_TEXT_LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.TEXT_EDITOR,
|
|
74
84
|
);
|
|
75
85
|
|
|
86
|
+
const renderPlainTextEditorView = (): JSX.Element => (
|
|
87
|
+
<div className="panel__content text-element-editor__editor">
|
|
88
|
+
<StudioTextInputEditor
|
|
89
|
+
language={getTextElementEditorLanguage(textElement.type)}
|
|
90
|
+
inputValue={textElement.content}
|
|
91
|
+
updateInput={changeContent}
|
|
92
|
+
/>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
const renderMarkdownView = (): JSX.Element => (
|
|
97
|
+
<ResizablePanelGroup
|
|
98
|
+
{...getControlledResizablePanelProps(true)}
|
|
99
|
+
orientation="vertical"
|
|
100
|
+
>
|
|
101
|
+
<ResizablePanel minSize={250}>
|
|
102
|
+
{renderPlainTextEditorView()}
|
|
103
|
+
</ResizablePanel>
|
|
104
|
+
{showPreview && <ResizablePanelSplitter />}
|
|
105
|
+
{showPreview && (
|
|
106
|
+
<ResizablePanel>
|
|
107
|
+
<div className="panel_content text-element-editor__preview">
|
|
108
|
+
{MarkdownTextViewer({
|
|
109
|
+
value: { value: textElement.content },
|
|
110
|
+
className: `text-element-editor__preview__markdown`,
|
|
111
|
+
})}
|
|
112
|
+
</div>
|
|
113
|
+
</ResizablePanel>
|
|
114
|
+
)}
|
|
115
|
+
</ResizablePanelGroup>
|
|
116
|
+
);
|
|
117
|
+
|
|
76
118
|
return (
|
|
77
119
|
<div className="panel text-element-editor">
|
|
78
120
|
<div className="panel__header text-element-editor__header">
|
|
@@ -112,15 +154,20 @@ export const TextElementEditor = observer(() => {
|
|
|
112
154
|
</div>
|
|
113
155
|
</div>
|
|
114
156
|
</DropdownMenu>
|
|
157
|
+
{isMarkdown ? (
|
|
158
|
+
<button
|
|
159
|
+
title={showPreview ? `Hide Preview` : `Show Preview`}
|
|
160
|
+
className={`text-element-editor__preview-btn ${
|
|
161
|
+
showPreview ? `text-element-editor__preview-btn__active` : ''
|
|
162
|
+
}`}
|
|
163
|
+
onClick={(): void => changePreview(!showPreview)}
|
|
164
|
+
>
|
|
165
|
+
<OpenPreviewIcon />
|
|
166
|
+
</button>
|
|
167
|
+
) : null}
|
|
115
168
|
</div>
|
|
116
169
|
</div>
|
|
117
|
-
|
|
118
|
-
<StudioTextInputEditor
|
|
119
|
-
language={getTextElementEditorLanguage(textElement.type)}
|
|
120
|
-
inputValue={textElement.content}
|
|
121
|
-
updateInput={changeContent}
|
|
122
|
-
/>
|
|
123
|
-
</div>
|
|
170
|
+
{isMarkdown ? renderMarkdownView() : renderPlainTextEditorView()}
|
|
124
171
|
</div>
|
|
125
172
|
);
|
|
126
173
|
});
|