jonasdoebertin / kirby-visual-markdown Goto Github PK

Kirby Forum reference

v1.1.0 looks good to me, it works with icons and without, headings look good, just a few of things :-)

1. The ability to turn of/on individual items, perhaps as an array e.g.
   toolbar: h3, h4, bold, italic, quote, link, image , bullet-list , num-list, hr
   On some blueprint elements people will want certain buttons but not others?
2. As you are using proper markdown for links when inserted with the link button, it makes sense to also insert proper markdown image links when you select the image button, rather than KirbyText links you currently do. Now I realise people will maybe want the KirbyText for images, so perhaps a kt/md option in the blueprint or two different buttons?
3. Maybe left align the left edge of the toolbar with the left edge of the text, might look a bit neater?
4. Headings in toolbar should be lower case, it is html, and bold button text should be bold as italic text is italic?

All good stuff, keep it up!

Hi,

on OS X the shortcut cmd+A usually selects all the text, but this doesn’t work in the markdown field, instead a link is created.
Can this be changed?

Hi Jonas,

i want to use your markdown but it does´t work. I have create a "field" folder in site, than
a "markdown" with the repository in it. And than as type "markdown" in my blueprint. Just see some shortcuts and the field is small with no nice text formatting. Any help??

That is it. Even after submodule update nothing changed.

Although I think this is a great way to ease some clients into using markdown, I'd love to see an option for hiding the markdown in the live preview. Unfortunately, many clients just don't want to have anything to do with even simple Markdown in their content.

The icing on the cake would be the ability to insert and align an image (with preview).

Adding HTML tags like "br" or "sup" will break the following syntax highlighting.

🐛 I'm running a Kirby 2.2 beta (based on the nighlty) site together with the kirby visual markdown plugin and it's not working. All I get is a two line textarea and the buttons as a bold title and shortcut.

It works fine for me when I use it with the latest stable version of Kirby.

I see there was someone else before me reporting this in issue #36.

If you have any idea where to start hunting the problem down I will have a look myself.

Update: I had a look at it real quick and it non of the assets are loaded anymore. I hardcoded them in and the field works. Looks like they are not picked up by the panel anymore. Resulting in the unstyled textarea. On top there are two missing files. The form.css and form.js are missing. I guess they would normally hold the custom field assets too.

Thank you.

I like the fullscreen so much. But on my 34" 21:9 display it looks a bit weird:

I wish to have something like iAWriter has:

I've tried to add a max-width to the CodeMirror window which looks now like this:

Maybe you have to add a class to the body on Fullscreen which gives it some extra CSS styles to the CodeMirror?

I am currently testing the editor and stumbled over following issue:

Any unsaved changes in a markdown field show up again (and again) after reloading or closing and reopening of an entry page. Keep in mind that the entry did not get saved.

I made a little screencast.

Any ideas?

When in fullscreen mode, you're unable to scroll when your content is longer then the available space.

A little quirk I noticed: a filename containing underscores will make the rest of the line italic.

Perhaps disabling the markdown preview within Kirbytags makes sense?

The VM custom fields don't seem to be appearing as they should in K2.2 panel, instead I'm getting a default single line text area?
They worked before the Kirby upgrade, on the off chance I tried the dev version of the plugin, but the same?

Any ideas?

Add a setting to the blueprints that allows to select which toolbar icons shall be displayed.

Based on this suggestion via Twitter, the keymaps should be changed to be actually useful.

This is an idea rather than an issue.

I thought about a toggle to display/hide the Markdown syntax. It would be a button in the toolbar, possibly to the right next to the fullscreen button, to avoid confusion with editing buttons.
The result would be a hybrid editor: if you want to type Markdown formatting you can ; if the syntax bugs you, just hide it and only use the toolbar buttons.

Fiddling in Dev Tools:

There a a number of issues with my quick test:

• titles have to be aligned in a different way than they are right now (I gave an absolute position to the # inside the title wrapper, but then the cursor is at the wrong place)
• lists have to keep some kind of bullets, here I just applied a dumb .cm-formatting {display: none}. Same for HRs, and probably other elements, so we'd need to target more specific classes like .cm-header.

So far, I believe the toggle could be a matter of simply applying alternate styles. Perhaps just add a class to the CodeMirror wrapper.

I can no longer paste anything in the textarea, nor drag and drop text from another app or window, nothing is output.
I use an up-to-date kirby-visual-markdown, on the master branch.

I'm sorry I cannot provide more info on this, just me and my iPad and a poor network connection. When I try to save a page which contains the visual editor it just blanks and does not save. I can't see anything going on. If I try a page without the visual editor it saves as expected.

IPad is latest AIr 128mb' latest iOS.

Any ideas?

I miss the e-mail link button in the toolbar. Please add it in the future.

😐 No need for scroll position investigations if the editor isn't focused, right?

Most versions of Safari don't allow keyboard input in fullscreen mode. Since it's pretty useless in this case, the fullscreen mode toolbar icon should be hidden in affected Safari versions.

All seem to work quite well, very nice, so thank you.

In develop branch headings are a good addition, some sites may well want to use H1 and H2 headings in their content, but other may well want to specify (probably on a per template basis) to start at a lower level, for example H3 and H4 (having used H1 and H2 already in the site template).

Also maybe the option to turn individual items on/off?

Some extra spacing or margin might be nice ;-) (Firefox/Mac - ordinary release)
Example of margins

Just a thought.

Hi,

I've played a bit around with your awesome plugin and figured out how you could add a sticky header to it.

It's really rudimentary but this is my solution:

Add this to the init method of your markdown field:

    var  className      = 'fixed',
         $navigation    = $('.visualmarkdown-toolbar'),
         $content       = $('.markdownfield-wrapper');

    $(window).scroll(function() {

        if ($(document).scrollTop() >= $content.offset().top) {
            $navigation.addClass(className);
            $content.css({
                'padding-top': $navigation.height()
            });
            $navigation.css({
                'max-width' : ($content.width())
            })
        }
        else {
            $navigation.removeClass(className);
            $content.css({'padding-top': 0});
        }
    });

Add this to your visualmarkdown CSS:

.markdownfield-wrapper .visualmarkdown-toolbar.fixed {
    position: fixed;
    top: 0;
    z-index: 999;
}

I haven't tried it with multiple markdown fields. But maybe this is helpful for you :-)

Because of the (beautiful) padding of CodeMirror it's more difficult to click into the textfield. Just make the whole thing clickable. Possible solution: instead of setting to the CodeMirror the padding, set it to CodeMirror-scroll - that works in my quick and dirty prototype in Safari. This doesn't work so well in the fullscreen mode but in the normal mode.

We just upgraded to Kirby 2.2.2 and the markdown editor redirects back to the dashboard (or previous view) whenever you highlight some text and try to use any button in the editor (like bold or italicize). Clicking any button in the top button bar in the markdown editor redirects the browser back.

Loaded my test installation of kirby and...
This :

I never configured a dark theme. What did just happen?

It happens, because the »Save« Button has no z-index, but the toolbar has:

.markdownfield-wrapper .visualmarkdown-toolbar {
    z-index: 100;
}

Bug: Can't write in fullscreen mode on pages with multiple markdown fields.
Version: 1.0, 1.0.1
Tested browsers: Safari (doesn't work except for making a paragraph by hitting enter...crazy (just in v. 1.0)), Chrome (works just in v. 1.0)

Possible solution: Maybe you have to set the cursor and focus right?

In Firefox Mac, there is no ''right-click' spell checker when using this field, reverting to textarea the spell checker is back?

Tiny, tiny issue: I just noticed there is no tooltip on the italic button, even though it has a translation string. Its link lacks the title="Italic" property.
Tested on a fresh Starterkit with the latest release.

In the "Git submodule" section of your readme is a wrong URL for cloning.
git submodule add [email protected]:jonasdoebertin/kirby-visual-markdown.git site/fields/markdown
should be:
git submodule add https://github.com/JonasDoebertin/kirby-visual-markdown.git site/fields/markdown
because not everyone has access rights to your github account.

It would be nice to highlight the parenthesis and attributes inside Kirbytext tags, it would be more legible. Especially when parentheses are used in the text. Quick mockup:

NOW! It works :) THX

Reloading the panel when you're in the page editor destroys the editor. You'll then have to go back to the overview and click on the page again.

I've tested this in Chrome, Safari and Internet Explorer 9.

How can i set Visual Markdown the default editor in the Panel when editing posts?
The instructions in the README didn't help me a lot.
I don't know which blueprint i have to edit.

Hope you can give me a short summary of steps! 😁

Hi!

Maybe this is too much for you but I've found this very cool idea and solution for adding tables:
https://github.com/yabwe/medium-editor-tables

Maybe this helps you to add even more awesomeness to your field! :-)

First of all: Great plugin! Thanks!
Second of all: If I can make some time I'll see if I can resolve this myself and post a pull-request.

The issue: When I use a heading and then press the other heading button, the # marks are not replaced but added, so I get something like this:

## ### Heading switched from h2 to h3

As some of you already pointed out in the past, the name "markdown" as used in your blueprints with type: markdown is a bit too generic.

With one of the next releases, I want to change this. However, I need your help with choosing the new name. So, here's a quick poll: What do you think should be used?

• visualmarkdown
• visualeditor
• visualmarkdowneditor

Of course this change will require you to reinstall Visual Markdown Editor instead of simply updating your submodule. But as this will take only one or two minutes longer then usual, I think it is a reasonable change.

• Move line-wide formating (#, >) to the left and align content
• Add task list styling
• Fix editor width in full screen mode
• Further improve task list styling (same width)

Adding required: true to the markdown field is tricky right now: When there is text in the field, no problems occur. However, when the input is left blank - and this is where required would become important - the field breaks the panel JS and prevents the page from being saved:

An invalid form control with name='' is not focusable. (index):1 
An invalid form control with name='text' is not focusable. (index):1 

Hi, I updated to Kirby 2.2.1 and I'm experimenting a “VM top-bar” duplication every time I click on the new link on the bottom of Title to change URL-Appendix:

I tested this on Firefox and Chrome.

The markdown editor somehow doesn't allow to hit ALT + Enter as a shortcut to the "save"-button. The normal fields do.

How do i link via panel and visual markdown editor an image thumbnail (generated by image tag) with full image (via link tag, i suppose?). Both images are loaded and visible in panel editor.

i try something like [ ![image_alt](image:url_thumbnail_image.jpg) ] (link:url_full_image.jpg)
it does not work.

With Kirby 2.1.0, Visual Markdown does not seem to honour the Markdown mode e.g. no kirby tags?

Kirby 2.1.0 update notes:
"You can now set the panel to strict markdown mode by switching off kirbytext tag support in your config:
c::set('panel.kirbytext', false);"

It would be nice for the fixed toolbar to work with the fixed position save button

This can do that, it basically just drops the toolbar below the main black Kirby one...

.markdownfield-wrapper .visualmarkdown-toolbar-fixed {
...
    top: 3em;
...

Also I think I'd like my main text to stand out a little bit so I always change the font size to 1.45 or 1.5

.cm-s-visualmarkdown {
    font: 1.45em/1.45 monospace;
....

See #24.

The style of the Kirbytext tag highlighting should probably be optimized.