mirror of
https://github.com/directus/directus.git
synced 2026-02-05 21:45:04 -05:00
Finalize interface names (#5521)
* Rename button-links->presentation-links * Rename checkboxes->select-multiple-checkbox * Rename code->input-code * Rename checkboxes files * Rename color->select-color * Rename divider->presentation-divider * Rename dropdown-multiselect->select-multiple-dropdown * Rename hash->input-hash * Rename icon->select-icon * Rename image->file-image * Rename m2a-builder->list-m2a * Rename many-to-many->list-m2m * Rename many-to-one->select-dropdown-m2o * Rename markdown->input-rich-text-md * Rename notice->presentation-notice * Rename one-to-many->list-o2m * Rename radio-buttons->select-radio * Rename repeater->list * Rename text-input->input * Rename textarea->input-multiline * Rename toggle->boolean * Rename tree-view->list-o2m-tree-view * Rename wysiwyg->input-rich-text-html * Use correct interfaces in system defaults * Rename collection->system-collection * Rename collections->system-collections * Rename display-template->system-display-template * Rename field->system-field * Rename interface->system-interface * Rename interface-options->system-interface-options * Rename scope->interface-scope * Rename tfa-setup->system-mfa-setup * Fix oversights * Remove old todo * Some more tweaks * Add migration, fix dropdown name in system use * Merge numeric + input * Replace dropdown->select-dropdown in app use * Merge slug->input, user->select-dropdown-m2o * Fix type issue * Fix seeder field name
This commit is contained in:
Rijk van Zanten
76
app/src/interfaces/input-code/index.ts
Normal file
76
app/src/interfaces/input-code/index.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { defineInterface } from '@/interfaces/define';
|
||||
import CodeMirror from 'codemirror';
|
||||
import 'codemirror/mode/meta';
|
||||
import InterfaceCode from './input-code.vue';
|
||||
|
||||
const choicesMap = CodeMirror.modeInfo.reduce((acc: Record<string, string>, choice) => {
|
||||
if (['JSON', 'JSON-LD'].includes(choice.name)) {
|
||||
acc['JSON'] = 'JSON';
|
||||
return acc;
|
||||
}
|
||||
|
||||
if (choice.mode == null || choice.mode == 'null') {
|
||||
choice.mode = 'plaintext';
|
||||
}
|
||||
|
||||
if (choice.mode in acc) {
|
||||
acc[choice.mode] += ' / ' + choice.name;
|
||||
} else {
|
||||
acc[choice.mode] = choice.name;
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const choices = Object.entries(choicesMap).map(([key, value]) => ({
|
||||
text: value,
|
||||
value: key,
|
||||
}));
|
||||
|
||||
export default defineInterface({
|
||||
id: 'input-code',
|
||||
name: '$t:interfaces.input-code.code',
|
||||
description: '$t:interfaces.input-code.description',
|
||||
icon: 'code',
|
||||
component: InterfaceCode,
|
||||
types: ['string', 'json', 'text'],
|
||||
options: [
|
||||
{
|
||||
field: 'language',
|
||||
name: '$t:language',
|
||||
type: 'string',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'select-dropdown',
|
||||
options: { choices },
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'lineNumber',
|
||||
name: '$t:interfaces.input-code.line_number',
|
||||
type: 'boolean',
|
||||
meta: {
|
||||
width: 'half',
|
||||
interface: 'boolean',
|
||||
},
|
||||
schema: {
|
||||
default_value: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'template',
|
||||
name: '$t:template',
|
||||
type: 'text',
|
||||
meta: {
|
||||
width: 'full',
|
||||
interface: 'input-code',
|
||||
options: {
|
||||
placeholder: '$t:interfaces.input-code.placeholder',
|
||||
},
|
||||
},
|
||||
schema: {
|
||||
default_value: null,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
321
app/src/interfaces/input-code/input-code.vue
Normal file
321
app/src/interfaces/input-code/input-code.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="input-code codemirror-custom-styles" :class="{ disabled }">
|
||||
<textarea ref="codemirrorEl" :value="stringValue" />
|
||||
|
||||
<v-button small icon secondary v-if="template" v-tooltip.left="$t('fill_template')" @click="fillTemplate">
|
||||
<v-icon name="playlist_add" />
|
||||
</v-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import CodeMirror from 'codemirror';
|
||||
|
||||
import { defineComponent, computed, ref, onMounted, onUnmounted, watch } from '@vue/composition-api';
|
||||
|
||||
import 'codemirror/mode/meta';
|
||||
import 'codemirror/addon/search/searchcursor.js';
|
||||
import 'codemirror/addon/search/matchesonscrollbar.js';
|
||||
import 'codemirror/addon/scroll/annotatescrollbar.js';
|
||||
import 'codemirror/addon/lint/lint.js';
|
||||
import 'codemirror/addon/search/search.js';
|
||||
import 'codemirror/addon/display/placeholder.js';
|
||||
|
||||
import 'codemirror/addon/comment/comment.js';
|
||||
import 'codemirror/addon/dialog/dialog.js';
|
||||
import 'codemirror/keymap/sublime.js';
|
||||
|
||||
import formatTitle from '@directus/format-title';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
value: {
|
||||
type: [String, Object, Array],
|
||||
default: null,
|
||||
},
|
||||
altOptions: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
template: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
lineNumber: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
language: {
|
||||
type: String,
|
||||
default: 'plaintext',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const codemirrorEl = ref<HTMLTextAreaElement | null>(null);
|
||||
const codemirror = ref<CodeMirror.EditorFromTextArea | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
if (codemirrorEl.value) {
|
||||
const codemirrorElVal = codemirrorEl.value;
|
||||
|
||||
await getImports(cmOptions.value);
|
||||
codemirror.value = CodeMirror.fromTextArea(codemirrorElVal, cmOptions.value);
|
||||
codemirror.value.setValue(stringValue.value || '');
|
||||
await setLanguage();
|
||||
codemirror.value.on('change', (cm, { origin }) => {
|
||||
if (origin === 'setValue') return;
|
||||
|
||||
const content = cm.getValue();
|
||||
|
||||
if (props.type === 'json') {
|
||||
if (content.length === 0) {
|
||||
return emit('input', null);
|
||||
}
|
||||
|
||||
try {
|
||||
emit('input', JSON.parse(content));
|
||||
} catch {
|
||||
// We won't stage invalid JSON
|
||||
}
|
||||
} else {
|
||||
emit('input', content);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
codemirror.value?.toTextArea();
|
||||
});
|
||||
|
||||
const stringValue = computed<string>(() => {
|
||||
if (props.value == null) return '';
|
||||
|
||||
if (props.type === 'json') {
|
||||
return JSON.stringify(props.value, null, 4);
|
||||
}
|
||||
|
||||
return props.value;
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.language,
|
||||
() => {
|
||||
setLanguage();
|
||||
}
|
||||
);
|
||||
|
||||
watch(stringValue, () => {
|
||||
if (codemirror.value?.getValue() !== stringValue.value) {
|
||||
codemirror.value?.setValue(stringValue.value || '');
|
||||
}
|
||||
});
|
||||
|
||||
async function setLanguage() {
|
||||
if (codemirror.value) {
|
||||
const lang = props.language.toLowerCase();
|
||||
|
||||
if (lang === 'json') {
|
||||
// @ts-ignore
|
||||
await import('codemirror/mode/javascript/javascript.js');
|
||||
|
||||
const jsonlint = (await import('jsonlint-mod')) as any;
|
||||
|
||||
codemirror.value.setOption('mode', { name: 'javascript', json: true });
|
||||
|
||||
CodeMirror.registerHelper('lint', 'json', (text: string) => {
|
||||
const found: Record<string, any> = [];
|
||||
const parser = jsonlint.parser;
|
||||
|
||||
parser.parseError = (str: string, hash: any) => {
|
||||
const loc = hash.loc;
|
||||
found.push({
|
||||
from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
|
||||
to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
|
||||
message: str,
|
||||
});
|
||||
};
|
||||
if (text.length > 0) {
|
||||
try {
|
||||
jsonlint.parse(text);
|
||||
} finally {
|
||||
// Do nothing
|
||||
}
|
||||
}
|
||||
return found;
|
||||
});
|
||||
} else if (lang === 'plaintext') {
|
||||
codemirror.value.setOption('mode', { name: null });
|
||||
} else {
|
||||
await import(`codemirror/mode/${lang}/${lang}.js`);
|
||||
codemirror.value.setOption('mode', { name: lang });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function getImports(optionsObj: Record<string, any>): Promise<void> {
|
||||
const imports = [] as Promise<any>[];
|
||||
|
||||
if (optionsObj && optionsObj.size > 0) {
|
||||
if (optionsObj.styleActiveLine) {
|
||||
imports.push(import(`codemirror/addon/selection/active-line.js`));
|
||||
}
|
||||
|
||||
if (optionsObj.markSelection) {
|
||||
// @ts-ignore - @types/codemirror is missing this export
|
||||
imports.push(import(`codemirror/addon/selection/mark-selection.js`));
|
||||
}
|
||||
if (optionsObj.highlightSelectionMatches) {
|
||||
imports.push(import(`codemirror/addon/search/match-highlighter.js`));
|
||||
}
|
||||
if (optionsObj.autoRefresh) {
|
||||
imports.push(import(`codemirror/addon/display/autorefresh.js`));
|
||||
}
|
||||
if (optionsObj.matchBrackets) {
|
||||
imports.push(import(`codemirror/addon/edit/matchbrackets.js`));
|
||||
}
|
||||
if (optionsObj.hintOptions || optionsObj.showHint) {
|
||||
imports.push(import(`codemirror/addon/hint/show-hint.js`));
|
||||
// @ts-ignore - @types/codemirror is missing this export
|
||||
imports.push(import(`codemirror/addon/hint/show-hint.css`));
|
||||
// @ts-ignore - @types/codemirror is missing this export
|
||||
imports.push(import(`codemirror/addon/hint/javascript-hint.js`));
|
||||
}
|
||||
await Promise.all(imports);
|
||||
}
|
||||
}
|
||||
|
||||
const lineCount = computed(() => {
|
||||
if (codemirror.value) {
|
||||
return codemirror.value.lineCount();
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const defaultOptions: CodeMirror.EditorConfiguration = {
|
||||
tabSize: 4,
|
||||
autoRefresh: true,
|
||||
indentUnit: 4,
|
||||
styleActiveLine: true,
|
||||
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true, delay: 100 },
|
||||
hintOptions: {
|
||||
completeSingle: true,
|
||||
hint: () => undefined,
|
||||
},
|
||||
matchBrackets: true,
|
||||
showCursorWhenSelecting: true,
|
||||
theme: 'default',
|
||||
extraKeys: { Ctrl: 'autocomplete' },
|
||||
lint: true,
|
||||
gutters: ['CodeMirror-lint-markers'],
|
||||
};
|
||||
|
||||
const cmOptions = computed<Record<string, any>>(() => {
|
||||
return Object.assign(
|
||||
{},
|
||||
defaultOptions,
|
||||
{
|
||||
lineNumbers: props.lineNumber,
|
||||
readOnly: false,
|
||||
mode: props.language,
|
||||
placeholder: props.placeholder,
|
||||
},
|
||||
props.altOptions ? props.altOptions : {}
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(disabled) => {
|
||||
codemirror.value?.setOption('readOnly', disabled ? 'nocursor' : false);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.altOptions,
|
||||
async (altOptions) => {
|
||||
if (!altOptions || altOptions.size === 0) return;
|
||||
await getImports(altOptions);
|
||||
for (const key in altOptions) {
|
||||
codemirror.value?.setOption(key as any, altOptions[key]);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.lineNumber,
|
||||
(lineNumber) => {
|
||||
codemirror.value?.setOption('lineNumbers', lineNumber);
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
cmOptions,
|
||||
lineCount,
|
||||
codemirrorEl,
|
||||
stringValue,
|
||||
fillTemplate,
|
||||
formatTitle,
|
||||
};
|
||||
|
||||
function fillTemplate() {
|
||||
if (props.type === 'json') {
|
||||
try {
|
||||
emit('input', JSON.parse(props.template));
|
||||
} finally {
|
||||
// Do nothing
|
||||
}
|
||||
} else {
|
||||
emit('input', props.template);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~codemirror/addon/lint/lint.css';
|
||||
|
||||
.input-code {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.small {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20px;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.v-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
color: var(--primary);
|
||||
cursor: pointer;
|
||||
transition: color var(--fast) var(--transition-out);
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-125);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user