Weishen/Hydro
2
0 Fork 0
mirror of https://gitcode.com/gh_mirrors/hy/Hydro.git synced 2026-10-21 01:46:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: milkdown: handle editor layout

Browse Source
This commit is contained in:
undefined committed 2022-05-04 11:53:14 +08:00
1 parent 78814f05da
commit 4e11efb341
2 files changed
+29 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui-default/components/editor/cmeditor.styl
+14
View File
@@ -5,3 +5,17 @@
.code-fence_selector .code-fence_selector
height: 2.2em !important height: 2.2em !important
width: 10em !important width: 10em !important
.editor-root
width: 100%
height: 100%
.editor-main
width: 100%
height: 100%
display: inline-flex
.editor-col
min-width: 50%
padding-left: 0px
padding-right: 0px
packages/ui-default/components/editor/index.ts
+15 -10
View File
@@ -20,6 +20,9 @@ export default class VjEditor extends DOMAttachedObject {
static DOMAttachKey = 'vjEditorInstance'; static DOMAttachKey = 'vjEditorInstance';
isValid: boolean; isValid: boolean;
private lock: boolean; private lock: boolean;
height = 0;
menu: JQuery<HTMLDivElement>;
root: JQuery<HTMLDivElement>;
model: import('../monaco').default.editor.IModel; model: import('../monaco').default.editor.IModel;
editor: import('../monaco').default.editor.IStandaloneCodeEditor; editor: import('../monaco').default.editor.IStandaloneCodeEditor;
milkdown: import('@milkdown/core').Editor & { milkdown: import('@milkdown/core').Editor & {
@@ -28,16 +31,17 @@ export default class VjEditor extends DOMAttachedObject {
dispose?: () => void; dispose?: () => void;
}; };
height = 0;
constructor($dom, public options: Options = {}) { constructor($dom, public options: Options = {}) {
super($dom); super($dom);
$dom.hide(); $dom.hide();
const root = $('<div class="row editor-root" style="width: 100%;"></div>'); this.root = $('<div class="editor-root"></div>');
const left = $('<div class="medium-6 columns textbox" style="padding-left:0px;padding-right:0px;"></div>'); this.menu = $('<div class="editor-menu"></div>');
const right = $('<div class="medium-6 columns textbox typo" style="padding-left:0px;padding-right:0px;"></div>'); const editor = $('<div class="editor-main"></div>');
root.append(left, right); const left = $('<div class="editor-col textbox" style="height:100%"></div>');
$($dom).parent().append(root); const right = $('<div class="editor-col textbox typo" style="display:none;height:100%"></div>');
this.root.append(this.menu, editor);
editor.append(left, right);
$($dom).parent().append(this.root);
this.initMonaco(left.get(0)); this.initMonaco(left.get(0));
if ((options?.language || 'markdown') === 'markdown') this.initMilkdown(right.get(0)); if ((options?.language || 'markdown') === 'markdown') this.initMilkdown(right.get(0));
} }
@@ -53,7 +57,6 @@ export default class VjEditor extends DOMAttachedObject {
} = this.options; } = this.options;
const { monaco, registerAction } = await load([language]); const { monaco, registerAction } = await load([language]);
const hasFocus = this.$dom.is(':focus') || this.$dom.hasClass('autofocus'); const hasFocus = this.$dom.is(':focus') || this.$dom.hasClass('autofocus');
if (!autoResize && this.$dom.height()) $(ele).height(this.$dom.height());
const value = this.options.value || this.$dom.val(); const value = this.options.value || this.$dom.val();
this.model = typeof model === 'string' this.model = typeof model === 'string'
? monaco.editor.getModel(monaco.Uri.parse(model)) ? monaco.editor.getModel(monaco.Uri.parse(model))
@@ -240,8 +243,9 @@ export default class VjEditor extends DOMAttachedObject {
view?.destroy(); view?.destroy();
}; };
await this.milkdown.create(); await this.milkdown.create();
$('.editor-root').prepend($('<div class="editor-menu columns" style="padding-left:0px;padding-right:0px;"></div>')); $(ele).show();
$('.editor-menu').prepend($('.milkdown-menu')); this.menu.children().remove();
this.menu.prepend(this.root.find('.milkdown-menu'));
this.isValid = true; this.isValid = true;
} }
@@ -249,6 +253,7 @@ export default class VjEditor extends DOMAttachedObject {
this.detach(); this.detach();
this.editor?.dispose(); this.editor?.dispose();
this.milkdown?.dispose(); this.milkdown?.dispose();
this.root?.remove();
} }
ensureValid() { ensureValid() {