diff --git a/package.json b/package.json index b1566c58c4..a82b24cff9 100644 --- a/package.json +++ b/package.json @@ -19,13 +19,15 @@ "@directus/format-title": "^3.2.0", "@popperjs/core": "^2.4.0", "@sindresorhus/slugify": "^1.0.0", - "@tinymce/tinymce-vue": "^3.2.2", + "@tinymce/tinymce-vue": "^3.2.1", + "@types/codemirror": "^0.0.95", "@types/debug": "^4.1.5", "@types/lodash": "^4.14.152", "@vue/composition-api": "^0.5.0", "axios": "^0.19.2", "base-64": "^0.1.0", "bytes": "^3.1.0", + "codemirror": "^5.54.0", "cropperjs": "^1.5.7", "date-fns": "^2.14.0", "diff": "^4.0.2", diff --git a/src/interfaces/code/code.story.ts b/src/interfaces/code/code.story.ts new file mode 100644 index 0000000000..759bf64bbb --- /dev/null +++ b/src/interfaces/code/code.story.ts @@ -0,0 +1,59 @@ +import withPadding from '../../../.storybook/decorators/with-padding'; +import { defineComponent, ref } from '@vue/composition-api'; +import { boolean, withKnobs, optionsKnob } from '@storybook/addon-knobs'; +import readme from './readme.md'; +import i18n from '@/lang'; +import RawValue from '../../../.storybook/raw-value.vue'; +import CodeMirror from 'codemirror'; +import 'codemirror/mode/meta'; + +const choices = {} as Record; + +CodeMirror.modeInfo.forEach((e) => (choices[e.name] = e.mode)); + +export default { + title: 'Interfaces / Code', + decorators: [withPadding, withKnobs], + parameters: { + notes: readme, + }, +}; + +export const basic = () => + defineComponent({ + components: { RawValue }, + i18n, + props: { + lineNumber: { + default: boolean('Line Number', false), + }, + disabled: { + default: boolean('Disabled', false), + }, + language: { + default: optionsKnob('Language', choices, 'markdown', { + display: 'select', + }), + }, + }, + setup(props) { + const value = ref( + `# This is the editor. +_It starts out in markdown mode_, +**use the control below to load and apply a mode** +"you'll see the highlighting of" this text *change*.` + ); + return { value }; + }, + template: ` +
+ + {{ value }} +
+ `, + }); diff --git a/src/interfaces/code/code.vue b/src/interfaces/code/code.vue new file mode 100644 index 0000000000..3b5bf0f520 --- /dev/null +++ b/src/interfaces/code/code.vue @@ -0,0 +1,265 @@ +