Markdown Interface Updates

[benhaynes]

• Editor button text should be Edit
• Edit and Preview buttons should stay highlighted (Primary color) based on current mode
• Need to add an interface option for Font type (same as other interfaces) for Sans, Serif, Mono. Should we have two? One for editor and one for preview? I think both should default to sans (like this GitHub editor).
• All WYSIWYG CSS should get copied from the HTML WYSIWYG editor... which has correct styling for headings, body copy, etc.
• The Custom Block option (see below) should have placeholders in each input that explain how they can be used. Not sure if we should make the fields conditional based on inline/block.
• It would be nice if you could control the action buttons (which are on/off) like in the HTML WYSIWYG
• Let's use the format_size icon for headings

[RC-Lee]

Hi, may I try to have a go at this issue please?

[benhaynes]

Hi, may I try to have a go at this issue please?

Of course! All set... ❤️

[RC-Lee]

Hello, I'm new to open source and I've been trying to work on this issue, but I am still struggling.
So far I have done the following:

• Editor button text should be Edit
• Edit and Preview buttons should stay highlighted (Primary color) based on current mode
• Let's use the format_size icon for headings
• The Custom Block option should have placeholders in each input that explain how they can be used.

I was wondering if you could give some clarifications and pointers as to how I could approach the rest of the items?

• It would be nice if you could control the action buttons (which are on/off) like in the HTML WYSIWYG

I'm not entirely sure what this means. Does it mean to be able to select which toolbar items could show up in the editor?

• All WYSIWYG CSS should get copied from the HTML WYSIWYG editor... which has correct styling for headings, body copy, etc.

I would like to clarify if the styling is meant to be copied to just the preview styling in the Input Markdown Interface?

• Need to add an interface option for Font type (same as other interfaces) for Sans, Serif, Mono. Should we have two? One for editor and one for preview? I think both should default to sans (like this GitHub editor).

I have managed to create interface options for font type that show up for the fields and layout section like below:

I did so by writing code blocks similar to the one in HTML WYSIWYG. Like the code block below, written in index.ts for defining the Markdown interface.

{
	field: 'editorFont',
	name: '$t:interfaces.input-rich-text-md.editorFont',
	type: 'string',
	meta: {
		width: 'half',
		interface: 'select-dropdown',
		options: {
			choices: [
				{ text: '$t:sans_serif', value: 'sans-serif' },
				{ text: '$t:monospace', value: 'monospace' },
				{ text: '$t:serif', value: 'serif' },
			],
		},
	},
	schema: {
		default_value: 'sans-serif',
	},
},

However, I am struggling on how to get the selected font reflected in the editor. I was wondering if you could provide any tips or pointers to how this could be implemented.

Many thanks in advance!

[benhaynes]

It would be nice if you could control the action buttons (which are on/off) like in the HTML WYSIWYG

I'm not entirely sure what this means. Does it mean to be able to select which toolbar items could show up in the editor?

Yes, this is for controlling the "formatting" buttons of the editor (like the HTML WYSIWYG).

I would like to clarify if the styling is meant to be copied to just the preview styling in the Input Markdown Interface?

Correct.

---

For any other questions, I defer to the tech team.

[azrikahar]

However, I am struggling on how to get the selected font reflected in the editor. I was wondering if you could provide any tips or pointers to how this could be implemented.

@rclee91 Thanks for working on this! As for your question regarding getting the selected font, once you added the interface there in the index.ts as you pointed out, adding it to the props will allow you to access the value (you can see "placeholder" and "imageToken" from the index.ts over here as props as well):

directus/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue

Lines 164 to 185 in 037fbd2

	props: {
	value: {
	type: String,
	default: null,
	},
	disabled: {
	type: Boolean,
	default: false,
	},
	placeholder: {
	type: String,
	default: null,
	},
	customSyntax: {
	type: Array as PropType<CustomSyntax[]>,
	default: () => [],
	},
	imageToken: {
	type: String,
	default: undefined,
	},
	},

example code to add:

editorFont: {
	type: String,
	default: 'sans-serif',
},

Here's a screenshot of this prop being available to use, as seen in Vue devtools:

Afterwards you should be able to bind class or style to them over here (editor and preview, in that order):

directus/app/src/interfaces/input-rich-text-md/input-rich-text-md.vue

Lines 130 to 132 in 037fbd2

	<div ref="codemirrorEl"></div>
	<div v-if="view[0] === 'preview'" v-md="markdownString" class="preview-box"></div>

Recommend to use the existing css variables, and you'll likely need to remove the hardcoded font-family properties in the classes in the same file. Hope that clears things up 👍

[RC-Lee]

Hi @azrikahar , thanks for your feedback!

I've managed to change the preview text area to use the selected font, but I'm still having trouble with the editor text area. I'm wondering if it has to do with using CodeMirror?

I've been reading the CodeMirror manuscript, and it mentions we could override the font styles in the codemirror.css file, but I'm not sure how to achieve this dynamically.

Update: I've managed to get it working now. Thanks!

[RC-Lee]

Hi @benhaynes , I have managed to complete everything else, except for

* It would be nice if you could control the action buttons (which are on/off) like in the HTML WYSIWYG

For now, I am not entirely sure how to approach this.
Is it alright if I submit a pull request to have my code reviewed for the other completed parts first?

[RC-Lee]

I managed to think of a way to work with toolbars.
I've submitted a pull request for this issue for review.
Thanks!

[benhaynes]

Awesome... we'll take a look!