Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 1x 1x 1x 7x 7x 7x 7x 7x 7x 1x 1x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 1x 7x 7x 1x 1x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 7x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <!--
WikiLambda Vue wrapper component for ACE CodeEditor
https://ace.c9.io/
@copyright 2020– Abstract Wikipedia team; see AUTHORS.txt
@license MIT
-->
<template>
<div
class="ext-wikilambda-app-code-editor"
:class="{ 'ext-wikilambda-app-code-editor--disabled': disabled }">
<div
ref="editor"
class="ext-wikilambda-app-code-editor__ace"
data-testid="ace-code-editor"></div>
</div>
</template>
<script>
const { defineComponent } = require( 'vue' );
require( '../../../lib/ace/src/ace.js' );
module.exports = exports = defineComponent( {
name: 'wl-code-editor',
props: {
value: {
type: String,
default: ''
},
mode: {
type: String,
default: 'javascript'
},
theme: {
type: String,
default: 'chrome'
},
readOnly: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
data: function () {
return {
options: {
minLines: 5,
maxLines: 20,
showPrintMargin: false,
fontSize: 12,
useSoftTabs: false
},
editor: null
};
},
methods: {
initialize: function () {
this.editor = window.ace.edit( this.$refs.editor, { value: this.value } );
// Set base path to know where to import modules while setting language and theme
let basePath = mw.config.get( 'wgExtensionAssetsPath', '' );
// ACE doesn't understand relative links
if ( basePath.slice( 0, 2 ) === '//' ) {
basePath = window.location.protocol + basePath;
}
// TODO: Figure a way to not have this path hardcoded
window.ace.config.set( 'basePath', basePath + '/WikiLambda/resources/lib/ace/src' );
// Set readonly attribute when readonly or disabled
this.editor.setReadOnly( this.readOnly || this.disabled );
// Set language and theme
this.editor.getSession().setMode( 'ace/mode/' + this.mode );
this.editor.setTheme( 'ace/theme/' + this.theme );
// Set custom options
// TODO: Do we want to pass options as a prop?
this.editor.setOptions( this.options );
// Set listener
this.editor.on( 'change', () => {
this.$emit( 'change', this.editor.getValue() );
} );
}
},
watch: {
value: function ( newValue ) {
this.editor.setValue( newValue, 1 );
},
mode: function ( newMode ) {
this.editor.setOption( 'mode', 'ace/mode/' + newMode );
},
theme: function ( newTheme ) {
this.editor.setTheme( 'ace/theme/' + newTheme );
},
readOnly: function ( newValue ) {
this.editor.setReadOnly( newValue );
},
disabled: function ( newValue ) {
this.editor.setReadOnly( newValue );
}
},
mounted: function () {
this.initialize();
}
} );
</script>
<style lang="less">
@import '../../ext.wikilambda.app.variables.less';
.ext-wikilambda-app-code-editor {
.ext-wikilambda-app-code-editor__ace.ace_editor {
width: 100%;
border: 1px solid @border-color-subtle;
min-height: 85px;
z-index: 0;
box-sizing: @box-sizing-base;
}
&--disabled {
.ext-wikilambda-app-code-editor__ace.ace_editor {
background-color: @background-color-disabled-subtle;
}
}
}
</style>
|