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 | 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 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 | <!--
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-codeEditor"
:class="{ 'ext-wikilambda-codeEditor-disabled': disabled }">
<div ref="editor" 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
const self = this;
this.editor.on( 'change', () => {
self.$emit( 'change', self.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.edit.variables.less';
.ext-wikilambda-codeEditor .ace_editor {
width: 100%;
border: 1px solid @border-color-subtle;
min-height: 85px;
z-index: 0;
box-sizing: @box-sizing-base;
}
.ext-wikilambda-codeEditor-disabled .ace_editor {
background-color: @background-color-disabled-subtle;
}
</style>
|