To be edited, if needed.

I am often using special whitespace characters for controlling text layout. In most cases, these are:

• No-break space
• Soft hyphen
• Thin space

Maybe we should add an optional menu (just like for headline level) for inserting any of these characters and maybe some other, common special chars as well? This will especially help Windows users, who do not have convenient access for chars like the no-break space.

Start by adding the exact same as the textarea field:

1. Toolbar

• headlines
  • H1
  • H2
  • H3
• bold
• italic
• link
• email
• code
• ul
• ol

2. Shortcuts

• Bold (Cmd + b)
• Italic (Cmd + i)
• Link (Cmd + l)
• Email (Cmd + e)

I leave buttons out of this list, while we're figuring out how to handle them.

• autofocus
• counter
• default
• disabled
• help
• icon
• label
• maxlength
• minlength
• placeholder
• required
• size
• translate
• width

Triggering a format action on an already formatted text should toggle the formatting.

Hey! Sorry to be a pooface.
I just ran into the following errors (see screenshots). They only occur if I use the link-button and a modal window opens. Not with bold for instance.

A really nice feature of https://github.com/medienbaecker/kirby-simplemde.

Optional, wraps any text with two tildes ~~.

modals: true
Current behaviour, like the textarea field.

modals: false
No modals and automatic link/email detection when selecting text and using the link or email button, like https://github.com/medienbaecker/kirby-simplemde

I'm not able to install it with composer.

I tried it with: composer require community/markdown-field but I get this error:

[InvalidArgumentException]                                                                                                                                                                                                
  Could not find a matching version of package community/markdown-field. Check the package spelling, your version constraint and that the package is available in a stability which matches your minimum-stability (beta). 

Implement the possibility of making whitespace visible in the editor (basically what every IDE or code editor offers). This also includes line-breaks in Markdown created by adding 2 spaces at the end of a line.

Later on, we can add a button to the toolbar to toggle this feature.

Shouldn't we make it a bit more distinguishable? $color-dark-grey?

On creation of a new structure item (editing an existing structure item works fine):

Cannot read property 'split' of undefined

Somehow focus isn't restored correctly after adding a link or email with their dialog.

It would be great to be able to easily add custom buttons. The current issue is the order in which components are loaded.

Currently, each button (eg. bold) will look for a corresponding k-mardown-button-bold component, which contains a bunch of things:

• Its template (which only the headlines button overrides)
• Some data:

data() {
  return {
    label: 'My label', // Shown on hover
    icon: 'my-icon', // Displayed in the toolbar
    type: 'my-button-type', // Used to identify whether the current selection is within the associated token type
    shortcut: 'Cmd-B', // Shortcut that should trigger the action (optional)
  }
}

• An action method, triggered on click or shortcut:

methods: {
  action() {
    alert('It works!')
  }
}

All buttons extend a base button (button.vue).

So, in theory, one could create custom buttons by registering a component in another plugin, with as little config as:

panel.plugin('my/methods', {
  components: {
    'k-markdown-button-test': {
      extends: 'k-markdown-button',
      data: function() {
        return {
          label: 'My label',
          icon: 'my-icon',
        }
      },
      methods: {
        action() {
          alert('It works!')
        }
      }
    },
  },
});

And then in a blueprint:

mymarkdownfield:
  type: markdown
  buttons:
    - test

The issue is: how could we set it up so that k-markdown-button is available to extend by the time k-markdown-button-test tries to?

The error The field type "text" does not exist is thrown when using type: text and type: markdown on the same blueprint. Can you reproduce?

The following blueprint won't work:

preset: page
pages: false

fields:
  intro:
    label: Intro
    type: text

  text:
    label: Text
    type: markdown

The old SimpleMDE field had this too and I found it pretty useful. In the site/config.php you could define:

'community.markdown-field.buttons' => ['headlines', 'bold', 'italic']

I already started with it, but I think we need to change the array_merge_recursive() function in lib/fields/markdown.php as it doesn't allow overwriting existing props. If I understand it correctly it only adds another buttons to the props array. See https://medium.com/@kcmueller/php-merging-two-multi-dimensional-arrays-overwriting-existing-values-8648d2a7ea4f

After that we should be able to just add something like this to the lib/fields/markdown.php file:

'buttons' => function() {
  return option('community.markdown-field.buttons');
}

...and this to the /config.php file:

'options' => array(
  'buttons' => ['headlines', 'bold', 'italic', 'divider', 'link', 'email', 'code', 'divider', 'ul', 'ol']
)

The image and file buttons work fine inside a Page - e.g., the Home Page. But if the field is placed somewhere at the top level of the panel - ie., when the field is being used inside the 'site.yml' blueprint - then these buttons don't work, and the user gets an error message:

I guess the queries that are being used are page.images and page.files. When we're trying to get images and files at the top-level, outside any pages, I guess they have to be site.images and site.files.

Implement proper highlighting for CodeMirror that supports Markdown, HTML and Kirbytags.

When a blueprint has type: textarea, the toolbar’s stickiness behaves correctly (i.e. it remains stuck to the top of the viewport when text area has focus and as you scroll up and down). Yet upon setting type: markdown, this behaviour is broken, with the toolbar remaining fixed in position as you scroll. This is only the case in Safari†, in other browsers (Firefox and Chrome) everything works as expected.

† Safari Technology Preview Release 72 (Safari 12.1, WebKit 14607.1.17.1) and Safari 12.0.2

Allow dev to either register the whole headlines dropdown:

buttons:
  - headlines

Or limit the displayed headlines (would still be grouped under the headlines dropdown):

buttons:
  - headlines
    - h2
    - h3

If single-line: wrap it with 1 backtick (current behaviour)

If multiline (code block): wrap it with 3 backticks.

Currently, any text selected before clicking the button will fill the text field of the modal.

We should add some automatic detection in case the selected string is an url / email, and fill the link / email field of the modal instead.

@fabianmichael MIT license works for you?

Using:

• Kirby 3.0 RC3
• this plugin in latest version
• no other plugins

In a setup using two languages (de & en) the t() helper returns nothing at all across different pages.

For example use the following language file with t('t.test'):

<?php

return [
  'code' => 'de',
  'default' => true,
  'direction' => 'ltr',
  'locale' => 'de_DE.utf8',
  'name' => 'Deutsch',
  'url' => '/',

  'translations' => [
    't.test' => '&larr; Hi',
  ]
];

The query option that we have for pagelink could also be useful for the image picker. Here is the use-case: I am building a one-pager, where each of the page's sections is a child page. Each one of these child pages will use the markdown field, and all of them will need to embed images into the field.

However, as they are all really part of the same parent page, rather than having to add a Files Section on each child page, allowing the user to upload images into each individual child page, I'd rather just add a single Files Section in the parent page. Ideally, the user would be able to then pick the images from the parent page - not from the current one.

This would be important also in avoiding multiple uploads of the same image, that are being used in different sections of the same page.

That is, of course, just one use-case, and I'm sure there will be others.

When I use the option buttons: false to hide all buttons, the panel shows this error:

An error accours, if i click on image button in editor, select no image but confirm with okay.

kirby-markdown-field: latest(f62b775), but also in other older versions
Kirby 3.0.0
Max OSX, Chrome latest 70.x

1. Decrease monospace font-size?

Shouldn't we decrease a little the monospace font-size (font-size: $font-size-small), so that it keeps the vertical rythm of the textarea field? It currently feels a bit big.
With the change:

2. Sans-serif headlines

Currently, h6 ends up being 14px while a regular paragraph is 16px.
Shouldn't we adjust those proportions so that h6 = paragraph?

3. Font-styling options

Should we give devs the possibility to disable the scaling of headings when displaying sans-serif?

Options could become:

font:
  family: sans-serif
  scaling: false

Sometimes when I paste long content with a lot of formatting the upper half gets hidden. When triggering a rewrite via a click or browser resize, it gets fixed. Tested in latest Chrome, Firefox and Safari.

I have not yet found the exact length or formatting amount to reproduce it. You can find an example text on the bottom of this issue, though.

## Lorem Ipsum 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.aaa

**Lorem Ipsum:**

- 2009: Finalistin beim internationalen Wettbewerb „Schömberger Fotoherbst für Reise- und Reportagefotografie“ mit ihrer Dokumentation der Arbeit der „Helfenden Hände e.V.“ in Nouakchott / Mauretanien. 
- Im September 2009 erstmalige Teilnahme an den IPA int ́l photography awards in New York; Ulrike Klumpps Arbeiten erreichten die Endrunde und damit ein „Honorable Mention“. 
- Diesen Erfolg konnte sie in den Folgejahren 2010 – 2015 wiederholen.
- Im Juli 2010 war ihr Projekt “SchwarzwaldMenschen” eines der vier Besten des Berliner Wettbewerbs “Halbtagsjob 2010”.
- 2011: Finalistin beim 11. „Schömberger Fotoherbst “ mit der Geschichte „Farm Glenorkie“.
- September 2011: 2. Platz der IPA New York, Kategorie Architektur / Stadtlandschaften.
- 2015: Finalistin beim 13. „Schömberger Fotoherbst“, Serie „Waisenhaus in Burundi“.

**Lorem Ipsum:**

- Ausstellung „Naturreine Interpretationen“ in der Kreissparkasse Freudenstadt, August 2007.
- Ausstellung „Anders sehen – anderes Sehen“ in Dornstetten, Frühjahr 2009. Die Serie entstand aus der ehrenamtlichen Dokumentation der Arbeit der „Helfenden Hände e.V.“ in Nouakchott/Mauretanien.
- Gruppenausstellung „Farbe in der Natur“ im Palmengarten Frankfurt, Oktober 2009.
- Teilnahme an der Internationalen Kalenderschau des Graphischen Klubs Stuttgart und am Calendar Fair der Japan Federation of Printing Industries mit einer Auftragsarbeit für die HOMAG Holzbearbeitungssysteme AG. Januar 2010.
- Ausstellung „ 7969 km Schwarzwald – Namibia“ in der Kulturfabrik in Schopfheim, 2012/13.
- Im Oktober 2013 eröffnete Ulrike Klumpp ihre eigene Fotogalerie in Baiersbronn. Neben ihren eigenen Fotoprojekten bietet die Galerie auch Raum, Ausstellungen anderer Fotokünstler zu präsentieren.
- Gemeinschaftsausstellung „Heimischer Hirsch“ – Kunstausstellung mit zeitgenössischer Malerei und Fotografie, Galerie U in Baiersbronn, ab April 2015.
- Ausstellung „Kaffee – Menschen – Kunst“ über das Kaffeeland Guatemala im Neuen Rathaus Altensteig, Juli – September 2016.
- Ausstellung „ Naturreine Interpretationen“ in Berlin Sommer 2017 zur IGA 2017
- Ausstellung „Olifant“ im Rathaus Freudenstadt Sommer/Herbst 2017
- Ausstellung WÄLDER im Haus des Waldes in Stuttgart
- Ausstellung Menschen in Burundi in Berlin 2018-12-13

**Lorem Ipsum**

Buch „WÄLDER in Baden Württemberg“ zusammen mit Forst BW 2017
Silberburg Verlag, Tübingen ISBN 978-3-8425-2038-7

Let's say I define a 'default_markdown.yml' field blueprint, which sets out all the buttons I normally want in my standard markdown fields - it looks something like this:

buttons: 
  - headlines
    - h2
    - h3
    - h4
  - bold
  - italic
  - strikethrough
  - horizontal-rule
  - ul
  - ol
  - blockquote
  - code
  - image 
  - file 
  - pagelink
  - link
  - email

Now, somewhere else in my site, I'm going to extend this blueprint, wanting to override the 'buttons' option, because I want to use less buttons. So, I'd do something like this:

byline:
  extends: fields/default_markdown
  buttons:
    - bold
    - italic
    - link
    - pagelink
    - email

Unfortunately, when I do this, I still get all the buttons from the original field blueprint - not the overridden, shorter list...

Currently, when cursor is right after an ordered li, on click on the ordered-list button the current incrementation isn't taken into account and always insert 1. .

While this will not cause any issue when rendered, this can be confusing for editors.

Implement text styles for both monospace and sans-serif fonts available within the editor.

When hitting CMD+S while editing, the cursor will jump back to the beginning of the editor field. It should stay where it was before and ideally also keep the current selection if there is one.

I noticed that new lines in numbered lists now automatically increment the number.
That may not be required in terms of functionality, but it's definitely nice to have.

When formatting lines of text to a numbered list, it doesn't do the same, though:

Could it be that the revert/undo button isn't working properly?
RC3, Safari, Firefox

Same as #19, applied to any file but images and inserting a (file: ) tag.

I am using the pages preset with the bigger one (⅔ ratio) using a type: markdown field. No custom plugin configuration. I guess there's nothing else to say. 🙂

Can the markdown characters be hidden to make this a bit more non-developer friendly? My clients would certainly be confused why "##" appears before the text once they choose to make it a heading.

If you install Kirby in a custom directory (https://getkirby.com/docs/cookbook/installation/composer#installing-kirby-to-a-custom-directory), the plugin throws this error:
Warning: require(/var/www/htdocs/vendor/k-community/markdown-field/lib/fields/../../../../../kirby/config/fields/textarea.php): failed to open stream: No such file or directory in /var/www/htdocs/vendor/k-community/markdown-field/lib/fields/markdown.php on line 5

The path is falsely defined hard:
https://github.com/sylvainjule/kirby-markdown-field/blob/fe3d9df124668297422a9247d45fca8c308872c4/lib/fields/markdown.php#L5

Make CodeMirror aware of Kirbytags and implement an basic autocomplete feature, that will allow us to define simple rulesets for all built-in Kirbytags. This should be made available for user-generated Kirbytags later on.

When the cursor / current selection is inside a kirbytag, I'd disable all the kirbytag-inserting buttons (link, email, pagelink, image, file), because as far as I know you can't nest them.

What do you think?

Register a h1, h2, h3, h4, h5 and h6 icon for improved clarity.

Display the file selection dialog, to pick from images uploaded in the page.