Giter Club home page Giter Club logo

kirby-visual-markdown's Issues

Hide fullscreen button in Safari

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.

Make white space clickable to add text

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.

bildschirmfoto 2015-04-01 um 12 26 58

Required: true breaks the panel when field is left empty

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 

Does not adjust to 'strict markdown mode' in Kirby 2.1.0

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);"

Max-Width for CodeMirror?

I like the fullscreen so much. But on my 34" 21:9 display it looks a bit weird:
bildschirmfoto 2015-03-31 um 12 58 57

I wish to have something like iAWriter has:
bildschirmfoto 2015-03-31 um 13 00 18

I've tried to add a max-width to the CodeMirror window which looks now like this:
bildschirmfoto 2015-03-31 um 13 06 17

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

Change field name to be more adequate

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.

doesn't work in my panel :(

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??

Styling Improvements

  • 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)

Unsaved changes show up after reloading

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?

Can't write in Fullscreen on pages with multiple markdown fields

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?

Visual Markdown as editor in the Panel

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! 😁

cmd+A doesn’t work as expected on OSX

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?

Neat plugin

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.

Spell Checker Fails

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

Question - Image / Link

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.

Markdown syntax toggle

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:

markdownhide

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.

Can't save pages on an iPad

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?

Alt + Enter to save

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

alt enter

Kirby 2.2 compatibility

🐛 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.

Suggestion: highlighting for Kirbytext

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:
kirbytext

Feature Request: Hiding markdown

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).

Suggestions

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!

Reloading the panel destroys the editor

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.

untitled2

No tooltip for Italics

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.

switching Heading type should replace current header

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

Redirect Issue in Kirby 2.2.2

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.

Sticky toolbar

Hi,

I've played a bit around with your awesome plugin and figured out how you could add a sticky header to it.
bildschirmfoto 2015-06-28 um 22 55 04

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 :-)

wrong URL in the readme submodule section

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.