fabianmichael / kirby-markdown-field Goto Github PK
View Code? Open in Web Editor NEWSuper-sophisticated markdown editor for Kirby 3, community built.
License: Other
Super-sophisticated markdown editor for Kirby 3, community built.
License: Other
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.
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']
)
I am often using special whitespace characters for controlling text layout. In most cases, these are:
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.
Display the file selection dialog, to pick from images uploaded in the page.
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.
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
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...
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.
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
If single-line: wrap it with 1 backtick (current behaviour)
If multiline (code block): wrap it with 3 backticks.
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
Somehow focus isn't restored correctly after adding a link or email with their dialog.
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.
On creation of a new structure item (editing an existing structure item works fine):
Cannot read property 'split' of undefined
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).
Same as #19, applied to any file but images and inserting a (file: )
tag.
Implement proper highlighting for CodeMirror that supports Markdown, HTML and Kirbytags.
@fabianmichael MIT license works for you?
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?
Optional, wraps any text with two tildes ~~
.
Using:
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' => '← Hi',
]
];
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
Shouldn't we make it a bit more distinguishable? $color-dark-grey
?
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.
A really nice feature of https://github.com/medienbaecker/kirby-simplemde.
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
Start by adding the exact same as the textarea
field:
1. Toolbar
2. Shortcuts
Cmd
+ b
)Cmd
+ i
)Cmd
+ l
)Cmd
+ e
)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:
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)
}
}
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?
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
Register a h1
, h2
, h3
, h4
, h5
and h6
icon for improved clarity.
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
Implement text styles for both monospace and sans-serif fonts available within the editor.
markdown:
type: markdown
query:
pagelink: site.children
image: page.images
file: page.files.filterBy("type", "!=", "image")
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.
Could it be that the revert/undo button isn't working properly?
RC3, Safari, Firefox
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
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
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
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.