bevacqua / woofmark Goto Github PK

Hi, I'm hoping for some guidance on where to put this code most efficiently; not a high priority though. Related to bevacqua/bureaucracy#2

I found that bureaucracy is in prompts/prompt.js and there's an opportunity to pass in an options object here:

To link that to the options object in the woofmark constructor, looks like changes would be needed in these two lines (for two modes):

...then we can access editor.options on this line, passing it to linkOrImageOrAttachment():

If that looks good, I can do up a PR -- again, not super urgent. Thanks.

Hello! Looks like I've found a couple of bugs all of them having to do with link insertion into a fresh instance of woofmark.

When you try to insert a link (http://bevacqua.github.io/woofmark/) in wysiwyg with text link:

link 
//bugs start here with only the first letter being linked

and then switch to markdown:

[l][1]ink

[1]: http://bevacqua.github.io/woofmark/

html:

<p>/</p>

and back to wysiwyg you finally get this:

/

The same happens if you try to insert a link in markdown mode. Somehow that doesn't happen if you not only insert a link, but also write a word on another line (while if you start from wysiwyg mode, you still get only the first letter linked).

If your first line in markdown is a URL starting with http, then this is what you get in html:

<p></p>

which, of course, translates to nothing in wysiwyg.

I have the following code:

woofmark(document.querySelector('#ta'), {
        parseMarkdown: megamark,
        parseHTML: domador,
        render: {
            commands: function (button, id) {
                button.className = 'btn';
                var n = {
                    "bold": 'B',
                    "italic": 'I',
                    "quote": 'Q',
                    "code": 'C',
                    "ol": 'OL',
                    "ul": 'UL',
                    "heading": 'H',
                    "link": 'A',
                    "image": 'IMG'
                };
                button.innerHTML = n[id];
            },
            modes: function (button, id) {
                button.className = 'btn';
                var n = {
                    "markdown": "MarkDown",
                    "html": "HTML",
                    "wysiwyg": "WYSIWYG"
                }
                button.innerHTML = n[id];
            }
        }
    }).addCommandButton("Jump", function jump() {});

Is there is not a built-in way to render added command buttons? Or do I have to do it outside woofmark?

I examined the source of the code. I'm sorry I am not familiar with the node styled javascript. I would like to add buttons for the functions for redoing and undoing history. Is that something doable?

I'm responding (from Rails) to an image upload, and when I send a response back it's parsed as a string, not JSON, oddly. The headers seem right:

Cache-Control:max-age=0, private, must-revalidate
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/json; charset=utf-8
Date:Fri, 03 Jun 2016 18:14:26 GMT
ETag:W/"366c2e915957fbb3688349173c85b656"
Server:nginx/1.8.1 + Phusion Passenger 5.0.26
Set-Cookie:_session_id=546ca71df6549ce20171d258b9616027; path=/; HttpOnly
Status:200 OK
Transfer-Encoding:chunked
X-Powered-By:Phusion Passenger 5.0.26
X-Request-Id:39752ef745d8261da5eee350caa554a3
X-Runtime:5.814758
X-UA-Compatible:IE=Edge

And the response body is:

{"id":29,"url":"/system/images/photos/000/000/029/large/batman.gif","filename":"batman.gif","href":"/system/images/photos/000/000/029/large/batman.gif","title":"batman.gif"}

However, I had to add the following to line 180 of Woofmark's prompts/prompt.js to get body.href to return anything:

body = JSON.parse(body);

Do you think I'm doing something wrong in encoding my server response, and/or would adding an extra check and ability to parse into JSON be a useful extension to Woofmark's abilities?

Thanks!

bureaucracy is constructed here: https://github.com/bevacqua/woofmark/blob/master/src/prompts/prompt.js#L111

To attach an event listener and handle successful file upload, I'm wondering if we can return or otherwise expose bureaucracy outside the prompt.js scope, for attaching crossvent handlers.

Apologies for the flurry of issues! Not super high priority.

i.e. dropped image is converted to base64 encoding and embedded as dataURI? @let4be

This seems like it'd be pretty easy to implement with a runCommand but it's also a fairly common thing to want. Any interest in including this in a standard tool set?

This is probably a known limitation, but I didn't see an issue for it.

Unless I've made some mistake:

editor.runCommand(function(mode, chunks) { console.log(mode, chunks) })
> HtmlChunks {before: "<p>", startTag: "", selection: "", endTag: "", after: "lalalala</p>↵"…} "wysiwyg"

I have some feature requests.

1. Can you add an option to let the buttons render on top of the textarea?
2. Can the buttons including custom ones get arranged for display? For example, bring the Heading buttons left, next to italic?

Is it possible, without changing the core code in my project, to custom the DOM node where the prompts for images and links are created?

I have some contents that embeds YouTube videos in it with the YouTube iframe embed code. I thought it'd be a good idea to have woofmark previews it in the WYSIWYG mode but then it never appeared. Switching to HTML mode also shows that it's gone.

Markdown to HTML = iframe gone
Markdown to WYSIWYG = iframe gone
Start in HTML/WYSIWYG = iframe gone

1. add new codeblock in preview mode, then switch editor to markdown mode will cause error

2. unexcepted behavior in html mode, when add new codeblock in preview mode repeatedly.
   (when click codeblock button twice, html tag should be switched create tag and remove tag, not create tags nested)

Ps: Enable to edit markdown in preview mode is awesome! I really love this editor!

Type the following into a fresh instance of the editor in chrome:

This is a point

Using the keyboard or mouse select the entire line. Press the numbered list button. Hit enter and a number 2 should appear below. Without typing anything, press the bold button. The text "strong text" gets inserted between the 1. list item and the 2. list item. Type:

This is another point

Then hit enter once. The 2. label will disappear. Hit enter again, the cursor will move to the next line but will be indented. You could keep doing this for ages and each time the cursor would move to the next line and be indented. However, instead of typing anything, hit enter on the empty line. The cursor will move inline with "This is another point". Hitting enter twice more will delete the entire list.

I would expect pressing the bold button on an empty line to not break the list. Anything after that is probably because the editor is in some sort of broken state but could probably be looked into as well.

I have tested this on both the demo site (https://bevacqua.github.io/woofmark/), and a version I downloaded from npm (version 4.2.3).

Running on chrome:

This could relate to #36 -- it seems like hitting enter on an empty line in a formatted block should leave you on an unformatted (p) line.

How can i change the displayed value in the command buttons or to remove some buttons entirely?

For example:

• change UL button icon into text '<UL>'
• i enabled only 1 mode in editor - markdown, so displaying markdown button in not needed anymore.

I have been testing the software and I think I've found a bug?

I'm using Firefox Nightly 41,

Problem:
Texts unexpected appended to editor upon refresh

Expected Text:
space

Resulted Text:
First time. spaceWoofmarkSelectionOpenMarkergbdhcWoofmarkSelectionCloseMarkergbdhc
Second time. spaceWoofmarkSelectionOpenMarkerecaacbhWoofmarkSelectionCloseMarkerecaacbh

Procedures:
Input space or any text into WYSIWYG mode, refresh page.

Analysis:
The string "WoofmarkSelectionOpenMarker" + code string + "WoofmarkSelectionCloseMarker" + repeated code string is appended to text upon every refresh on WYSIWYG mode with some text input.

I need some functions as below.

1. the way to apply widget like facebook's mention ui
2. text highlights in textarea (you can see a automatically highlighted name when you mention your friend’s name with “@“ in Facebook)

Does woofmark provide a way to do them?
Or do you have any plan to provide?

thank!

I wanted to add woofmark to my project with Bower but when i tried
->
'Bower install woofmark --save' return Package woofmark not found

Did you forgot something or is it just a random bug ?

First of all, woofmark looks awesome! I think this would work great with our app.

I found a bug with tables however. Here are the steps to reproduce on the demo page http://bevacqua.github.io/woofmark/

Click markdown icon and paste the following

| col1 | col2 | col3 |
|------|------|------|
| foo  | bar  | baz  |
| food | bars | bats |

Click wysiwyg icon and you'll see a table (woohoo!) but without borders (boo)

Click html icon and you'll see proper html table (woohoo!)

<table>
<thead>
<tr><th>col1</th><th>col2</th><th>col3</th></tr>
</thead>
<tbody>
<tr><td>foo</td><td>bar</td><td>baz</td></tr>
<tr><td>food</td><td>bars</td><td>bats</td></tr>
</tbody>
</table>

Now click markdown icon and you'll get paragraphs?? (oops)

col1col2col3

foobarbaz

foodbarsbats

I'm assuming the html -> markdown doesn't support tables yet?

Hey, I found some bugs with the markdown mode.

Bug 1

When marking text as bold in WYSIWYG Mode and then line breaking after it, the text gets rendered correctly. But when switching to markdown mode and back, the text formatting breaks and the * are shown and the text isn't rendered correctly anymore. (In our implementation you can see the * are escaped with \)

Bug 2

When marking text as bold in WYSIWYG mode and then adding text behind it and marking it as regular text, the rendering breaks when switching to markdown mode and back to WYSIWYG mode.

I'm trying to switch to woofmark from tinymce (to also support markdown...)

Unfortunately, I find it hard to to do my customizing based on the examples I found so far (here and under public lab). Maybe I'm looking in the wrong place but I'm looking for things like:

• place commands & modes above the text editor
• place images inline as base64

So far I managed to beautify the commands and modes using the render feature and fontawesome - but that really was a lot (too much) trial and error...

Any help is appreciated!

Doesn't seem to be possible (by config) to render the buttons (in the DOM) above the wysiwyg-container?

I could do this using CSS and flexbox or "display: table" but it will make other this more complex, like "inlining" the buttons next to each other.

Woofmark can successfully paste rich text containing images (e.g. the contents of this Google Doc), but not standalone images from clipboard.

Pasting images directly from the clipboard is very widespread nowadays: Google Docs, GitHub, StackOverflow, Slack etc.

Having this feature would make this the most handy WYSIWYG/Markdown editor among the 50+ I've compared.

Current default in markdown mode is to insert:

![image description][1]

Then at the bottom of the doc:

[1]: http://url.com/image.jpg "image.jpg"

This is well-formed markdown but for many purposes this disrupts page flow - for example in inline-markdown-editor which is using woofmark for subsections of a larger document.

I'd like to propose that the default be the all-inline, all-one-line version:

![image.jpg](http://url.com/image.jpg)

Failing that, that we at least allow configuration of this.

Where is this code living? Would it be in megamark config, or bureaucracy? Or can we set this in Woofmark alone?

Thanks!

The interface does not currently appear to permit a strikethrough function.
This would be incredibly useful, and is present on most comparable editors.

Finally got this bug!

This needs to be set to upload.validate || 'image', to properly set validator as in README: https://github.com/bevacqua/woofmark#optionsattachments.

https://github.com/bevacqua/woofmark/blob/master/src/prompts/prompt.js#L116

I also found that after solving that, I got options.mergeHtmlAndAttachment is not a function on this line:

That's because that should be specified here:

But that doesn't seem to appear anywhere else in the codebase. I think it could be from a previous version of the API, but it seems to be pretty simple:

options.mergeHtmlAndAttachment(chunks.before + chunks.selection + chunks.after, link);

And it expects:

      chunks.before = parts.before;
      chunks.selection = parts.selection;
      chunks.after = parts.after;

I'm going to try just adding a default that wraps it in an <a> tag.

Happy to submit a PR shortly.

The only way I've found to listen to the text input is to add event listener to woofmark.find(textarea).textarea and .editable objects.
Is there any other way of doing that?

Bug:
The position of the cursor at the moment of switching the view changes the behaviour of the parser.

How to reproduce:

1. Open markdown view
2. Set cursor at the end of a line ending in 2 spaces (this should parse to a line-break)
3. Open html or wysiwyg view
4. Line-break is not applied
5. Open markdown view: the 2 spaces are reduced to 1 space

A case in which the bug does not come up:

1. Open markdown view
2. Set cursor not at the end of a line ending in 2 spaces (this should parse to a line-break)
3. Open html or wysiwyg view
4. Line-break is applied as expected
5. Open markdown view: the 2 spaces are still there as expected

Hola, I just stumbled over woofmark last night, and so far I like it.

But I can't figure out how to sync those. I mean, when submitting the form, nothing get posted..?
This is my js to init woofmark..

var rte = document.querySelector('.rich-text');
    woofmark(rte, {
        parseMarkdown: megamark,
        parseHTML: domador,
        defaultMode: 'wysiwyg'
    });

Use case, I want to provide an easy (wysiwyg) forum input but behind the scenes everything should be markdown. Do I need parseMarkdown and parseHTML for this?
Maybe I should learn more vanilla-js..

Saludos, Can

Great work, first of all! But got a couple of questions.

1. Is it possible to have buttons reflect current state of a selection/cursor position? For example, if a bold text is selected or the cursor is within a bold text, then we can style the bold button as active.
2. Is it possible to have formatting buttons toggle their state? For example, when in WSIWYG mode you click the bold button (or press the cmd+B shortcut) you get bold text, but you can't toggle it off by pressing the button or the shortcut for the second time.

Following up from bevacqua/domador#7 (comment) -- related to inserted <br> when pasting content copied from a webpage (even a single word) in at least Chrome.

Type the following into a fresh instance of the editor in chrome:

This is a test line.

Then, using the keyboard or mouse, select the entire line. Press the bold button, followed by the italic button, and then the bold button again.

The resulting selection will now be:

This is a t

and subsequent presses of the bold and italic buttons do odd things (either causing the selection to reduce in size again, disappear, or do absolutely nothing).

I would expect the text selection to remain the same regardless of how many times the bold and or italic buttons are pressed in this situation. The same thing happens if the shortcut keys for bold and italic are used.

Depending on which browser is used, depends on how much of the text selection is changed. I have tested this on both the demo site (https://bevacqua.github.io/woofmark/), and a version I downloaded from npm (version 4.2.3).

Running on chrome:

At first, the editor looks great!

Is it possible to add custom buttons and / or customize current button set?

In the Demo If I have:

<ol>
  <li>1
    <ol>
      <li>1.a</li>
    </ol>
  </li>
  <li>2</li>
</ol>

and switch to markdown then back to wysiwyg it looses the nested <ol> wrapper.
ex.

<ol>
  <li>1</li>
  <li>1.a</li>
  <li>2</li>
</ol>

I've found a small issue I'm able to reproduce if:

1. HTML (an h1) already exists at load-time in the .wk-wysiwyg element (wysiwyg mode)
2. All content in the contentEditable div is selected and deleted
3. Delete key is hit once again to leave the div completely empty
4. New text is typed into the div
5. h1 text appears, not plain p text

Note that to clear this formatting, you can click outside the div and click back in. This makes me think that there's some preserved formatting state in this (chromium) contentEditable which is cleared when it loses focus.

You can try it here: https://publiclab.github.io/PublicLab.Editor/examples/

Although I'm not able to reproduce it on the default demo at https://bevacqua.github.io/woofmark/ -- and I'm wondering if there's something about the interaction of the stylesheets with the contentEditable that causes it in one demo but not another.

Can WYSIWYG support for LaTeX be added too?

I find that when i switch modes, the browser scroll position (document.body.scrollTop) shifts, which is disorienting. Any interest in saving and/or adjusting for the scroll position when changing modes? I've tested this in my own code by storing scrollTop before the change and then setting it after the change.

Hi, bevacqua

Could you please provide an example of how to execute formatting command without using .wk-commands? I have read the doc and still could not solve the problem.

Thank you very much.

I think I've found another bug using the editor. The resulted text is not consistent refreshing the page with text in HTML mode.

I'm using Firefox Nightly 41,

Problem:
Texts unexpected appended to editor upon refresh

Expected Result:
<h1>Heading Text</h1> be consistent.

Actual Result:
First time refresh: <p><h1>Heading Text</h1></p>
Second time refresh: <p><p><h1>Heading Text</h1></p></p>

Procedures:
Input any text into HTML mode, refresh page.

Analysis:
The content is not consistent. <p> tags is being prepended and appended upon every refresh in HTML mode.

The less-than caret followed by text is removed when you e.g. set some text to bold in wysiwyg mode.

E.g: in the demo, write "<e", and change some other text to bold.

Is there any possibility to preserve these when typed in?

It doesn seem to work for code blocks is this supposed to support the full markdown spec http://commonmark.org?

e.g. for example

<?=´hello´?>

When inserting an image in WYSIWYG mode it should display at the users current cursor position.

Currently the cursor position appears to be ignored and the image is inserted at the top. Here's an example:

Firefox v41.0.2 on OS X (El Capitan)

The way I picture this working is a function being added to the editor object like editor.setValue(markdownString).

This would internally check editor.mode and then either just insert the markdownString into the editor (if in markdown mode) or run editor.parseMarkdown(markdownString) and then either render or insert the resulting HTML string into the editor (if in html or wysiwyg mode respectively).

It also wouldn't hurt to make this an option to pass into the woofmark() function with a name like option.initialValue or something.

P.S. Thanks for this great extensible library.

Is it a good idea to get it working with React.js given that we'd be dealing with a virtual DOM?

The controls appear on the bottom by default. This seems weird to me. It would be nice to have the option of putting those controls above the text area.

I want to be able to use woofmark as a wysiwyg editor for markdown only.

1. I never want my users to be able to switch to html mode (I know how to do this).
2. I would like to automatically strip out any inline styles when a user pastes rich text into the editor while in wysiwyg mode. ( don't know how to do this).

How can I accomplish the second item?

I created a code pen to illustrate the non-desirable behavior. http://codepen.io/jessegavin/pen/mRyOJb?editors=0010

Thanks so much. This is one of the coolest implementations I have seen for a wysiwyg editor.

It would be highly useful to tick list (checklist), in addition to the existing bulleted and numbered lists.
This list would enable items listed in it to marked as done, or not done, by virtue of a tick (check mark).

This markdown editor looks really good and i would like it to use in all my production websites, however i am concerned that not much activity is here for a while.

Is this still maintained? Issues resolved?