fastmail / squire Goto Github PK

Wrong repo

Hello! If the range is collapsed we can not increase/decrease the font size. For example, if the user want to start from the current caret position with a bigger font size...

Thanks!

• demo should be online, perhaps hosted here as a github page
• demo should be a bit more user friendly, it is sparse as it is

Apparently, the defaultBlockTag option only applies to lines after the first line in the editor. I can reproduce this bug consistently like so:

Step 1. Instantiate the editor:

var iframe = document.getElementbyId('editor'),
    editor = new Squire(iframe.contentDocument),
    editor.defaultBlockTag = 'P';

Step 2. Type a line, hit enter, type another line, then view HTML:

<div>This is a test.<br></div><p>This is only a test.</p>

Right now, when starting text or pressing ENTER, Squire inserts a new div tag for a new paragraph into the contentEditable. However, the semantically appropriate tag to use for any paragraph-style block of text would be p instead of div. Also, the initial element to type into should be a p. Screen readers for the blind use semantic tags to identify page elements such as headings, paragraphs, lists, block quotes etc. While other tags Squire uses are appropriate, I think div is too generic and should be replaced by p elements where possible.

We are using Squire to implement an editor to which different modules could send arbitrary HTML fragments to insert into the editor. I believe it would be helpful to add an insertHTML method to the Editor.

Sorry if this is a known issue.
When I make a ordered list and break it in between by pressing double enter, dont we expect the remaining list to be numbered from 1 . Please refer the above screenshot.
Please do look at this.
Thank you.

Hi ,
Tab and shift+tab -> for increasing and decreasing list level respectively.
So that every time I need not go to the toolbar for doing this.This feature is available in many standard editors.
I think it will be very useful if this feature is provided in Squire too.

Also for eg:

1.sample1
2.sample2
3.sample3
4.sample4

In the above case if i select the entire ordered list and apply makeOrderedList , It should remove the list structure (removeList should work). More like toggling .This also seem to be available in many editors.
It would be really nice if these features are available in Squire .

Thank you.

This is essential for an RTE IMHO =)

It seems like there ought to be an npm package in for this editor. Many front-end libraries use it, and support for including npm packages is improving (see systemjs for an excellent example). So would such a thing be possible? There already exists a squire package - a front-end build tool of some sort - but this could be named squire-rte, or squire-editor?

For my own purposes, I could get around this by maintaining a private package on our closed npm repository, but it would be far better for everyone if the package was public.

I'm working on a Dart project, and I'd love to use Squire in it. My only problem is that I need all dependencies to be Dart native (to be able to run natively up to 4x the speed of javascript on browsers supporting Dart natively). Dart syntax is not too different from javascript, very easy to convert, so I wonder if you can port this lib in Dart. Thank you.

Hello! thanks for this great editor, I love its API.

I am working on a project where I can not use an iframe, I have to use a content editable DIV in the body of an html page.

Is it very difficult to modify Squire for this goal? Any clue?

Thanks in advance,

Best regards,

Frankai

Any chance this can be made to work on mobile Safari?

Just throws an undefined.

jshint flips out during my build because your package is not yet on bower and i had to pull it into my codebase:

I can open a pull request if you are too busy to fix this right now

squire-raw.js: line 122, col 46, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 151, col 14, Unexpected use of '--'.
squire-raw.js: line 217, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 229, col 27, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 232, col 48, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 265, col 14, Unexpected use of '--'.
squire-raw.js: line 279, col 9, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 330, col 26, Unexpected use of '--'.
squire-raw.js: line 444, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 464, col 14, Unexpected use of '--'.
squire-raw.js: line 505, col 24, Unexpected use of '--'.
squire-raw.js: line 638, col 1, Empty block.
squire-raw.js: line 790, col 14, Unexpected use of '--'.
squire-raw.js: line 844, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1011, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1244, col 5, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 1250, col 14, Unexpected use of '--'.
squire-raw.js: line 1285, col 18, Unexpected use of '--'.
squire-raw.js: line 1390, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1647, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 1931, col 49, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2020, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2072, col 19, Unexpected use of '--'.
squire-raw.js: line 2152, col 38, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2155, col 49, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 2253, col 9, The body of a for in should be wrapped in an if statement to filter unwanted properties from the prototype.
squire-raw.js: line 2344, col 14, Unexpected use of '--'.
squire-raw.js: line 2476, col 14, Unexpected use of '--'.
squire-raw.js: line 2546, col 18, Unexpected use of '--'.
squire-raw.js: line 2629, col 53, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3011, col 46, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3125, col 43, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3136, col 45, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3147, col 18, Unexpected use of '--'.
squire-raw.js: line 3173, col 41, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 3179, col 36, Expected a conditional expression and instead saw an assignment.
squire-raw.js: line 21, col 10, 'navigator' is not defined.
squire-raw.js: line 1191, col 5, 'console' is not defined.
squire-raw.js: line 1443, col 5, 'top' is not defined.
squire-raw.js: line 2525, col 5, 'setTimeout' is not defined.
squire-raw.js: line 2605, col 5, 'setTimeout' is not defined.
squire-raw.js: line 2950, col 13, 'setTimeout' is not defined.
squire-raw.js: line 2998, col 13, 'setTimeout' is not defined.
squire-raw.js: line 3425, col 6, 'top' is not defined.
squire-raw.js: line 3435, col 4, 'document' is not defined.

Hi Guys,

I just found squire from keystonejs project issue
keystonejs/keystone#1112

It looks awesome.

I have been using

1. ckeditor
2. wysihtml5

The reason I tried is they have rails combination. But they can't fulfill my requirements easily.

• beside html, Can insert and edit predefined code snippet
• upload images to servers.

I like ckeditor but the complexity isn't fit for my projects.

Don't know why I haven't get into squire before until now. Probably since it has not rails gem.

Can I ask how easy to _upload images_ and _insert code snippet in squire_

There are a lot of rich text editors out there, most of which are not accessible. Some have limited accessibility. As it stands now there isn't a way for a keyboard or screen reader user to navigate to the buttons controlling the formatting. Additionally, the letters being typed aren't spoken out.

Providing this functionality would put Squire in a rare atmosphere and make it a goto product for people looking to build accessible form implementations (and these are growing rapidly due to new laws and lawsuits).

On the Squire demo, you can click the same button (e.g. bold) to both bold AND unbold.

From the API docs I can't tell the appropriate way to detect the text state (is it bold or not?) therefore, can't match this behavior easily...

Suggesting this be added to the doc ...

I am getting a the wrong text in Squire when I use getSelectedText() on an empty line.

Assuming content of the editor is the following html block, getSelectedText() returns "456" if the selection is an empty line

<div>123<br></div>
<div><br></div>
<div><br></div>
<div><br></div>
<div>456<br></div>

Hi !

I'm aware this is not the most useful issue ever haha. In https://neilj.github.io/Squire/, just replace

<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

by

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

It is possible to select text on Windows phone 8.1 bit clicking bold etc doesn't do anything

I'm running Squire within a web view on iOS. The OS seems to be preventing keydown events for certain key combinations from making it through to the editor (and the JS context in general) - the tab key, ctrl-[ and ctrl-] don't trigger their assigned commands, for example.

Because of this I've had to reimplement the shortcuts for list indentation etc. Now there's two places in code where shortcuts are defined, which isn't ideal. It'd be really nice if there were a way to access Squire's shortcut map so I could add to/override the defaults. Cheers!

I'm running Chromium 41.0.2272.76 (Developer Build) Ubuntu 14.04. Lately I noticed that the HTML output of the editor ends up with an empty link if there is a link somewhere else in the document. To recreate with the provided Demo.html file:

1. Type some text in the editor
2. On a new line, type some text, select the text and click the "Link" button to add a link
3. On another new line, type some text

You should end up with the following text in the editor, where the middle line is a link:

asdf
google.com
asdf

editor.getHTML() in the console returns the following:

"<div>asdf<br></div><div><a href="http://www.google.com">google.com</a><br></div><div>asdf<a href="http://www.google.com"></a><br></div>"

Notice the empty link (<a href="http://www.google.com"></a>) at the end. This happens every time I follow these steps. It does not happen when I type all three lines first then add the link on the second line. Also, it does not happen in Firefox 37.0.

I am using the editor but i did not see the option of embedding the slideshare code and youtube code.
OR to see the source code.
Can you tell me how to sort out these feature into squire.

It looks like the 'select' event is only fired when a selection spans multiple nodes, while the documentation states that the select event should be fired when "[t]he user selected some text." Based on the documentation, I would expect that we would get a select event whenever the selection changes, regardless of the boundaries of the selection.

I believe these events are getting filtered out in Editor.js, line ~344-346:

    if ( anchor !== focus ) {
        this.fireEvent( 'select' );
    }

Any chance of markdown support being added?

This bug does not show up in your demo page (http://neilj.github.io/Squire/), but it does show up if I try using Squire in a custom document or even in the Demo.html from your repository.

To reproduce the bug: type a few letters on the 1st line in a fresh editor window then delete one letter and you'll see that a new empty line was just appended below (press down arrow and the cursor will step down one line).

It looks like I can accomplish same with changeFormat, but it would be nice if makeLink allowed me to set target='_blank' on the links.

Love the editor and the merge of insertHTML. Currently using this for a product and would love for the bower config to be updated so that the latest is available :) Let me know if there is a way to help @neilj

Hey guys, I stumbled upon this bug while playing with Squire on the demo site.

Currently on http://neilj.github.io/Squire/ if you type in the following text:

Hello this is
a test message.

You can't then go and highlight the entire text then center/right align this text. "Selecting All" then doing the alignment doesn't work either.

A single line message like the message below however does work as intended.

Hello this is a test message.

Hello.
I like this editor.
Now I'm coding rails gem using example squire js and css.
I get source code from this sample site.

http://neilj.github.io/Squire/

And I use Squire-UI.js , Squire-UI.css , Squire-UI.html for my gem.
But I can't find out license in that.

Please tell me. What kind of license it that?
Thank you.

Right now, images that get inserted only get an src attribute. However, for accessibility reasons, alternative text, specified in the alt attribute, is required to make images properly accessible. I therefore request that insertion of an image be enhanced to also require and insert alternative text along with the image src itself.

At the end of the editor, if you have a tag running (say a span) around the text, there is no intuitive way to escape out of it.

Suggested route, would probably to escape the tag on enter?

It would be nice if this feature was available on bower. All you need to do is add another tag.

Thanks

is there plugins or demos? thanks.

maybe we need some functions like:

• getSelectedNode(), returns current selected node;
• selectNode(node), select node (in range)

More informations http://bower.io/docs/creating-packages/

• The package name must adhere to the bower.json spec.
• There must be a valid manifest JSON in the current working directory.
• Your package should use semver Git tags.
• Your package must be publically available at a Git endpoint (e.g., GitHub).
• Remember to push your Git tags!

When the current selection does not contain a text node (e.g., if you hit enter a few times and then select the empty lines), executing one of the formatting commands (e.g., bold()) will throw an exception.

This occurs when Squire tries to restore the selection, as startContainer will be null in _addFormat because we use the first node from TreeWalker if the startContainer is not a text node:

        // Make sure we start inside a text node.
        walker.currentNode = startContainer;
        if ( startContainer.nodeType !== TEXT_NODE ) {
            startContainer = walker.nextNode();
            startOffset = 0;
        }

Since the selection doesn't contain any text nodes, walker.nextNode() returns null here.

Javascript doesn't keep information if meta key was pressed when keyup event happens. But it does when keydown event happens.
If you undo text changes and press Cmd key there is no way to redo changes.

I've prepared a simple demo for that case

function test(event) {
  console.log(event.metaKey);
}
document.addEventListener('keydown', test);
document.addEventListener('keyup', test);

Hello

I make web page to use demo page resources.
http://neilj.github.io/Squire/

Demo page squire-raw.js is old.
I change it to latest version.

I was confirmed the operation in safari and chrome.
But firefox can't work.

I check browser error log.

TypeError: sel is null. sel.removeAllRanges();

This is demo page repository.
https://github.com/cndlhvn/my-squire-demo

How to solve this problem.
Thank you

Reproducable on the demo page (Chrome 40 Linux). Paste a link, then delete the text link. The anchor remains. You can do it over and over and get a pretty funky tree of elements.

Hi, first of all squire is awesome, I saw this one bug though .
1.I inserted a blockquote in the editor.
2.I copied some content from GEdit or notepad which has more than one lines.
3.When I pasted that inside that blockquote , it gets inserted after that blockquote.
Also please see that if I paste that in an empty blockquote , the blockquote gets removed.

Thanks neilj.

Hi!

It is possible in Squire to set defaults (attributes, classes) for the default block tag and the tag itself. What do you think about the ability to set attributes and classnames for all the other main tags: ul, ol, blockquote, for which Squire has built-in constructing API? Something like

editor.defaults = {
    ul: {
        'class': 'editor-list',
        ...
    },
    blockquote: {
        'class': 'editor-quote',
        ...
    },
}

Having classes on some these tags may be very convenient in that if one have given ul some stiles, he|she doesn't have to override all the other lists' styles.

https://github.com/neilj/Squire/blob/master/README.md#lightweight :

Instead, you get a component you can drop >>in<< in place

I'm using squire in a way that loads multiple (commonly tens, possibly a hundred or so) iframes onto a single page.

To try to reduce script loads (though, I think the cached copy would be used?) I've changed the code to make a squire object instead of using a self-executing function: function Squire( doc ) { ... } instead of (function(doc) { ... }( document ) ); and then in each iframe executing new parent.Squire(document)

This required I change var RangePrototype = Range.prototype; to var RangePrototype = win.Range.prototype;

I'd like to try to further reduce duplication of function/object definitions (for example, not having a Range object per iframe). Is there an easy way to do this, or will I have to break apart things so they're attached to the main window object?

Are there any things that need their own instance, or do all functions use only what's passed to them?

Hi,
Just wanted to let you know that I wrote a wrapper directive for squire.
The UI was based on your gh-pages code, but adds a bit more functionality (and removes some).

http://hourlynerd.github.io/angular-squire/

Thanks for your work on squire :)

This editor should generate <em> and <strong> rather than <i> or <b>, as the latter aren't semantic as well as the fact that screen readers won't distinguish any difference between a text that's inside <b> tags, but will do so if it's inside a <strong>.

This topic has a great discussion around this issue.

There is no way to completely reset all of the text attributes of text pasted into the text area. Gmail has "clear formatting" button which does that. I propose we add this to the editor.
Are there technical difficulties preventing implementation of clear formatting feature?

I really miss this in fastmail. I usually have notepad open just to paste text into it and immediately copy it into fastmail.

I spent some time debugging today what ended up me using both the advanced init and basic init at the same time. I bound the plugin 2 times to the same iframe and it started doing really weird things.