From b1bfa70c3ce3190d73e79d5600f0126218c444f3 Mon Sep 17 00:00:00 2001 From: Nitwel Date: Sat, 15 Aug 2020 13:31:07 +0200 Subject: [PATCH 01/29] add markdown interface --- app/src/interfaces/markdown/demo.md | 132 +++++++ app/src/interfaces/markdown/index.ts | 0 app/src/interfaces/markdown/markdown.story.ts | 49 +++ app/src/interfaces/markdown/markdown.test.ts | 24 ++ app/src/interfaces/markdown/markdown.vue | 343 ++++++++++++++++++ app/src/interfaces/markdown/readme.md | 9 + 6 files changed, 557 insertions(+) create mode 100644 app/src/interfaces/markdown/demo.md create mode 100644 app/src/interfaces/markdown/index.ts create mode 100644 app/src/interfaces/markdown/markdown.story.ts create mode 100644 app/src/interfaces/markdown/markdown.test.ts create mode 100644 app/src/interfaces/markdown/markdown.vue create mode 100644 app/src/interfaces/markdown/readme.md diff --git a/app/src/interfaces/markdown/demo.md b/app/src/interfaces/markdown/demo.md new file mode 100644 index 0000000000..af45f9d930 --- /dev/null +++ b/app/src/interfaces/markdown/demo.md @@ -0,0 +1,132 @@ +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + + +## Horizontal Rules + +___ + +--- + +*** + + +## Emphasis + +**This is bold text** + +__This is bold text__ + +*This is italic text* + +_This is italic text_ + +~~Strikethrough~~ + + +## Blockquotes + + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + + +## Lists + +Unordered + ++ Create a list by starting a line with `+`, `-`, or `*` ++ Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit ++ Very easy! + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + + +1. You can use sequential numbers... +1. ...or keep all the numbers as `1.` + +Start numbering with offset: + +57. foo +1. bar + + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + +Block code "fences" + +``` +Sample text here... +``` + +Syntax highlighting + +``` js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +## Tables + +| Option | Description | +| ------ | ----------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| ------:| -----------:| +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + + +## Links + +[link text](http://dev.nodeca.com) + +[link with title](http://nodeca.github.io/pica/demo/ "title text!") + +Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +Like links, Images also have a footnote style syntax + +![Alt text][id] + +With a reference later in the document defining the URL location: + +[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" diff --git a/app/src/interfaces/markdown/index.ts b/app/src/interfaces/markdown/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app/src/interfaces/markdown/markdown.story.ts b/app/src/interfaces/markdown/markdown.story.ts new file mode 100644 index 0000000000..481ade5dcf --- /dev/null +++ b/app/src/interfaces/markdown/markdown.story.ts @@ -0,0 +1,49 @@ +import { withKnobs, boolean, text, optionsKnob } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; +import Vue from 'vue'; +import InterfaceMarkdown from './markdown.vue'; +import markdown from './readme.md'; +import withPadding from '../../../.storybook/decorators/with-padding'; +import { defineComponent, ref } from '@vue/composition-api'; +import RawValue from '../../../.storybook/raw-value.vue'; + +Vue.component('interface-markdown', InterfaceMarkdown); + +export default { + title: 'Interfaces / Markdown', + decorators: [withKnobs, withPadding], + parameters: { + notes: markdown, + }, +}; + +export const basic = () => + defineComponent({ + components: { RawValue }, + props: { + disabled: { + default: boolean('Disabled', false, 'Options'), + }, + placeholder: { + default: text('Placeholder', 'Enter a value...', 'Options'), + }, + tabbed: { + default: boolean('Tabbed', false, 'Options'), + }, + }, + setup() { + const value = ref(''); + const onInput = action('input'); + return { onInput, value }; + }, + template: ` +
+ + {{ value }} +
+ `, + }); diff --git a/app/src/interfaces/markdown/markdown.test.ts b/app/src/interfaces/markdown/markdown.test.ts new file mode 100644 index 0000000000..1b1fdabab9 --- /dev/null +++ b/app/src/interfaces/markdown/markdown.test.ts @@ -0,0 +1,24 @@ +import VueCompositionAPI from '@vue/composition-api'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import InterfaceMarkdown from './markdown.vue'; + +import VTextarea from '@/components/v-textarea'; + +const localVue = createLocalVue(); +localVue.use(VueCompositionAPI); +localVue.component('v-textarea', VTextarea); + +describe('Interfaces / Markdown', () => { + it('Renders a v-markdown', () => { + const component = shallowMount(InterfaceMarkdown, { + localVue, + propsData: { + placeholder: 'Enter value...', + }, + listeners: { + input: () => {}, + }, + }); + expect(component.find(VTextarea).exists()).toBe(true); + }); +}); diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue new file mode 100644 index 0000000000..5cc9e18d4d --- /dev/null +++ b/app/src/interfaces/markdown/markdown.vue @@ -0,0 +1,343 @@ + + + + + + + diff --git a/app/src/interfaces/markdown/readme.md b/app/src/interfaces/markdown/readme.md new file mode 100644 index 0000000000..063ce0d860 --- /dev/null +++ b/app/src/interfaces/markdown/readme.md @@ -0,0 +1,9 @@ +# Markdown + +## Options + +| Option | Description | Default | +| ------------- | ------------------------------------------------------------------- | ------------ | +| `placeholder` | Text to show when no input is entered | `null` | +| `tabbed` | If the view should be tabbed | `false` | +| `disabled` | Disables the input | `false` | From 7825b65bd517c135519cab820e389f06f14e7ccf Mon Sep 17 00:00:00 2001 From: Nitwel Date: Sat, 15 Aug 2020 17:05:11 +0200 Subject: [PATCH 02/29] small improvements to the codebase --- app/src/interfaces/markdown/markdown.vue | 473 +++++++++++------------ 1 file changed, 234 insertions(+), 239 deletions(-) diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue index 5cc9e18d4d..f35709cfad 100644 --- a/app/src/interfaces/markdown/markdown.vue +++ b/app/src/interfaces/markdown/markdown.vue @@ -1,25 +1,25 @@ diff --git a/app/src/modules/collections/routes/detail/detail.vue b/app/src/modules/collections/routes/detail/detail.vue index 155f80896f..e05259d068 100644 --- a/app/src/modules/collections/routes/detail/detail.vue +++ b/app/src/modules/collections/routes/detail/detail.vue @@ -152,7 +152,7 @@ diff --git a/app/src/modules/collections/routes/overview/overview.vue b/app/src/modules/collections/routes/overview/overview.vue index 5266054267..3c334926a3 100644 --- a/app/src/modules/collections/routes/overview/overview.vue +++ b/app/src/modules/collections/routes/overview/overview.vue @@ -30,10 +30,7 @@ diff --git a/app/src/modules/files/routes/browse/browse.vue b/app/src/modules/files/routes/browse/browse.vue index 63816541d9..b6c4cac3ff 100644 --- a/app/src/modules/files/routes/browse/browse.vue +++ b/app/src/modules/files/routes/browse/browse.vue @@ -128,13 +128,10 @@ diff --git a/app/src/modules/files/routes/detail/components/file-info-drawer-detail.vue b/app/src/modules/files/routes/detail/components/file-info-drawer-detail.vue index aca6687207..e4a11cce6f 100644 --- a/app/src/modules/files/routes/detail/components/file-info-drawer-detail.vue +++ b/app/src/modules/files/routes/detail/components/file-info-drawer-detail.vue @@ -86,6 +86,11 @@ + + + +
+ @@ -94,6 +99,7 @@ import { defineComponent, computed, ref, watch } from '@vue/composition-api'; import readableMimeType from '@/utils/readable-mime-type'; import bytes from 'bytes'; import i18n from '@/lang'; +import marked from 'marked'; import localizedFormat from '@/utils/localized-format'; import api from '@/api'; @@ -122,7 +128,7 @@ export default defineComponent({ const { user } = useUser(); const { folder } = useFolder(); - return { readableMimeType, size, creationDate, user, folder }; + return { readableMimeType, size, creationDate, user, folder, marked }; function useCreationDate() { const creationDate = ref(null); diff --git a/app/src/modules/files/routes/detail/detail.vue b/app/src/modules/files/routes/detail/detail.vue index 4360c39bc5..10a4cca7df 100644 --- a/app/src/modules/files/routes/detail/detail.vue +++ b/app/src/modules/files/routes/detail/detail.vue @@ -163,9 +163,6 @@ collection="directus_files" :primary-key="primaryKey" /> - -
- @@ -186,7 +183,6 @@ import FileLightbox from '@/views/private/components/file-lightbox'; import { useFieldsStore } from '@/stores/'; import { Field } from '@/types'; import FileInfoDrawerDetail from './components/file-info-drawer-detail.vue'; -import marked from 'marked'; import useFormFields from '@/composables/use-form-fields'; import FolderPicker from '../../components/folder-picker'; import api from '@/api'; @@ -315,7 +311,6 @@ export default defineComponent({ previewActive, revisionsDrawerDetail, formFields, - marked, confirmLeave, leaveTo, discardAndLeave, diff --git a/app/src/modules/settings/routes/data-model/collections/collections.vue b/app/src/modules/settings/routes/data-model/collections/collections.vue index 951c89afc5..61a4ba2aa4 100644 --- a/app/src/modules/settings/routes/data-model/collections/collections.vue +++ b/app/src/modules/settings/routes/data-model/collections/collections.vue @@ -77,12 +77,9 @@ diff --git a/app/src/modules/settings/routes/data-model/fields/fields.vue b/app/src/modules/settings/routes/data-model/fields/fields.vue index b9bf9f0c0d..d16cdc134f 100644 --- a/app/src/modules/settings/routes/data-model/fields/fields.vue +++ b/app/src/modules/settings/routes/data-model/fields/fields.vue @@ -75,10 +75,7 @@ diff --git a/app/src/modules/settings/routes/presets/browse/browse.vue b/app/src/modules/settings/routes/presets/browse/browse.vue index 914d1dbd25..f8643a1a94 100644 --- a/app/src/modules/settings/routes/presets/browse/browse.vue +++ b/app/src/modules/settings/routes/presets/browse/browse.vue @@ -86,9 +86,6 @@ @@ -105,7 +102,6 @@ import layouts from '@/layouts'; import { TranslateResult } from 'vue-i18n'; import router from '@/router'; import ValueNull from '@/views/private/components/value-null'; -import marked from 'marked'; import PresetsInfoDrawerDetail from './components/presets-info-drawer-detail.vue'; type PresetRaw = { @@ -152,7 +148,6 @@ export default defineComponent({ confirmDelete, deleting, deleteSelection, - marked, }; function useLinks() { diff --git a/app/src/modules/settings/routes/presets/browse/components/presets-info-drawer-detail.vue b/app/src/modules/settings/routes/presets/browse/components/presets-info-drawer-detail.vue index bc68bf1134..b47d0861d6 100644 --- a/app/src/modules/settings/routes/presets/browse/components/presets-info-drawer-detail.vue +++ b/app/src/modules/settings/routes/presets/browse/components/presets-info-drawer-detail.vue @@ -10,12 +10,18 @@
{{ presetsCount }}
+ + + +
+ + + diff --git a/app/src/modules/settings/routes/presets/detail/detail.vue b/app/src/modules/settings/routes/presets/detail/detail.vue index 8072c0e19c..24ddf68dd8 100644 --- a/app/src/modules/settings/routes/presets/detail/detail.vue +++ b/app/src/modules/settings/routes/presets/detail/detail.vue @@ -77,16 +77,12 @@ diff --git a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue b/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue index bd987c26b5..a6c3300f99 100644 --- a/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue +++ b/app/src/modules/settings/routes/project/components/project-info-drawer-detail.vue @@ -30,12 +30,17 @@
3306
+ + + +
+ + diff --git a/app/src/modules/settings/routes/project/project.vue b/app/src/modules/settings/routes/project/project.vue index 11c5e47413..fbb1c1ceae 100644 --- a/app/src/modules/settings/routes/project/project.vue +++ b/app/src/modules/settings/routes/project/project.vue @@ -23,9 +23,6 @@ @@ -35,7 +32,6 @@ import { defineComponent, ref, computed } from '@vue/composition-api'; import SettingsNavigation from '../../components/navigation/'; import useCollection from '@/composables/use-collection'; import { useSettingsStore } from '@/stores'; -import marked from 'marked'; import ProjectInfoDrawerDetail from './components/project-info-drawer-detail.vue'; import { clone } from 'lodash'; @@ -54,7 +50,7 @@ export default defineComponent({ const saving = ref(false); - return { fields, initialValues, edits, noEdits, saving, save, marked }; + return { fields, initialValues, edits, noEdits, saving, save }; async function save() { if (edits.value === null) return; diff --git a/app/src/modules/settings/routes/roles/browse/browse.vue b/app/src/modules/settings/routes/roles/browse/browse.vue index 6ae5ed3828..83c48504a9 100644 --- a/app/src/modules/settings/routes/roles/browse/browse.vue +++ b/app/src/modules/settings/routes/roles/browse/browse.vue @@ -20,11 +20,7 @@ @@ -159,11 +155,6 @@ export default defineComponent({ --v-button-background-color-disabled: var(--warning-25); } -.subdued { - color: var(--foreground-subdued); - font-style: italic; -} - .roles { padding: var(--content-padding); padding-bottom: var(--content-padding-bottom); diff --git a/app/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue b/app/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue index 0485d71a40..3c79d73e31 100644 --- a/app/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue +++ b/app/src/modules/settings/routes/roles/detail/components/role-info-drawer-detail/role-info-drawer-detail.vue @@ -6,11 +6,16 @@
{{ role.id }}
+ + + +
+ + diff --git a/app/src/modules/settings/routes/roles/detail/detail.vue b/app/src/modules/settings/routes/roles/detail/detail.vue index 57f91802cf..b4c2e4a081 100644 --- a/app/src/modules/settings/routes/roles/detail/detail.vue +++ b/app/src/modules/settings/routes/roles/detail/detail.vue @@ -91,9 +91,6 @@ @@ -106,7 +103,6 @@ import router from '@/router'; import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-detail'; import useItem from '@/composables/use-item'; import SaveOptions from '@/views/private/components/save-options'; -import marked from 'marked'; import { useUserStore } from '@/stores/'; import RoleInfoDrawerDetail from './components/role-info-drawer-detail'; @@ -153,7 +149,6 @@ export default defineComponent({ saveAndAddNew, saveAsCopyAndNavigate, isBatch, - marked, }; /** diff --git a/app/src/modules/settings/routes/webhooks/browse/browse.vue b/app/src/modules/settings/routes/webhooks/browse/browse.vue index 73df829924..e33a20856b 100644 --- a/app/src/modules/settings/routes/webhooks/browse/browse.vue +++ b/app/src/modules/settings/routes/webhooks/browse/browse.vue @@ -61,13 +61,10 @@ diff --git a/app/src/modules/settings/routes/webhooks/detail/detail.vue b/app/src/modules/settings/routes/webhooks/detail/detail.vue index 6d418737e6..4274fc31fc 100644 --- a/app/src/modules/settings/routes/webhooks/detail/detail.vue +++ b/app/src/modules/settings/routes/webhooks/detail/detail.vue @@ -59,12 +59,9 @@ diff --git a/app/src/modules/users/routes/browse/browse.vue b/app/src/modules/users/routes/browse/browse.vue index f8838d0b3e..54b170f636 100644 --- a/app/src/modules/users/routes/browse/browse.vue +++ b/app/src/modules/users/routes/browse/browse.vue @@ -93,13 +93,10 @@ diff --git a/app/src/modules/users/routes/detail/components/user-info-drawer-detail.vue b/app/src/modules/users/routes/detail/components/user-info-drawer-detail.vue index 8b9980bed8..936ce695ca 100644 --- a/app/src/modules/users/routes/detail/components/user-info-drawer-detail.vue +++ b/app/src/modules/users/routes/detail/components/user-info-drawer-detail.vue @@ -29,14 +29,15 @@
- + + +
+ + diff --git a/app/src/modules/users/routes/detail/detail.vue b/app/src/modules/users/routes/detail/detail.vue index 14af76209a..bd4ac89ad9 100644 --- a/app/src/modules/users/routes/detail/detail.vue +++ b/app/src/modules/users/routes/detail/detail.vue @@ -121,9 +121,6 @@ collection="directus_users" :primary-key="primaryKey" /> - -
- @@ -138,7 +135,6 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d import CommentsDrawerDetail from '@/views/private/components/comments-drawer-detail'; import useItem from '@/composables/use-item'; import SaveOptions from '@/views/private/components/save-options'; -import marked from 'marked'; import api from '@/api'; import { useFieldsStore } from '@/stores/'; import useFormFields from '@/composables/use-form-fields'; @@ -258,7 +254,6 @@ export default defineComponent({ saveAsCopyAndNavigate, isBatch, revisionsDrawerDetail, - marked, previewLoading, avatarSrc, roleName, diff --git a/app/src/views/private/components/drawer-detail/drawer-detail.vue b/app/src/views/private/components/drawer-detail/drawer-detail.vue index 36f0656e0e..d9adffca68 100644 --- a/app/src/views/private/components/drawer-detail/drawer-detail.vue +++ b/app/src/views/private/components/drawer-detail/drawer-detail.vue @@ -151,7 +151,10 @@ body { .content { padding: 16px; ::v-deep { - .format-markdown { + .page-description { + color: var(--foreground-subdued); + margin-bottom: 8px; + a { color: var(--primary); } From 8124cf6be499c833f93ec6ece5750f98dc183980 Mon Sep 17 00:00:00 2001 From: Nitwel Date: Tue, 18 Aug 2020 21:33:14 +0200 Subject: [PATCH 15/29] improve codebase --- app/src/interfaces/markdown/markdown.story.ts | 2 ++ app/src/interfaces/markdown/markdown.vue | 10 ++++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/src/interfaces/markdown/markdown.story.ts b/app/src/interfaces/markdown/markdown.story.ts index 481ade5dcf..889813b0cf 100644 --- a/app/src/interfaces/markdown/markdown.story.ts +++ b/app/src/interfaces/markdown/markdown.story.ts @@ -6,6 +6,7 @@ import markdown from './readme.md'; import withPadding from '../../../.storybook/decorators/with-padding'; import { defineComponent, ref } from '@vue/composition-api'; import RawValue from '../../../.storybook/raw-value.vue'; +import i18n from '@/lang'; Vue.component('interface-markdown', InterfaceMarkdown); @@ -20,6 +21,7 @@ export default { export const basic = () => defineComponent({ components: { RawValue }, + i18n, props: { disabled: { default: boolean('Disabled', false, 'Options'), diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue index f35709cfad..1c2f66751b 100644 --- a/app/src/interfaces/markdown/markdown.vue +++ b/app/src/interfaces/markdown/markdown.vue @@ -13,13 +13,13 @@
-
+
@@ -52,15 +52,17 @@ export default defineComponent({ const currentTab = ref(0); const html = computed(() => marked(props.value)); + const showEdit = computed(() => !props.tabbed || currentTab.value == 0); + const showPreview = computed(() => !props.tabbed || currentTab.value != 0); - return { html, currentTab }; + return { html, currentTab, showEdit, showPreview }; }, });