guardian / scribe Goto Github PK
View Code? Open in Web Editor NEWDEPRECATED: A rich text editor framework for the web platform
Home Page: http://guardian.github.io/scribe/
License: Apache License 2.0
DEPRECATED: A rich text editor framework for the web platform
Home Page: http://guardian.github.io/scribe/
License: Apache License 2.0
After making a selection of a portion of a text and bolding (by for example pressing command-b), text gets bolded but selection disappears. This is a bit counter intuitive in comparison with other WYSIWYG editors (like Word) where you can keep pressing a button and it is toggling bold on and off.
Bold is just an example. :-)
This happens at least in Chrome.
Using the curly quote plugin, typing something ("words")
results in something (”words”)
(i.e. the first curly quotes is a closing one, where it should be an opening one).
The logic needs to be adapted to avoid considering punctuation (typically parentheses, maybe other things) as a character that may be ending a word.
A simpler formatter API would allow reusing a parsed working DOM tree and use immutable mapping to compose small transformations (e.g. unwrap SPAN, map inline style to element, replace element X by Y, filter classes, etc).
This is a WIP spike, use this issue for tracking.
This module should work in CommonJS, AMD, and browser globals. Currently it only works for AMD.
Ideally this wrapping would be done as part of the build process.
Re. #77
We have individual repositories for each plugin which is where the distribution code lives. However we still need to move out these source files and their corresponding integration/unit tests.
I want to include scribe like i do jquery into my project (I do not want to use require.js) - is this currently possible ? (and sorry if this is a dumb question, I looked through the issues and couldnt figure it out - and two weeks ago I could not do this)
right now the library assumes that <p>
is the desired block element, it'd be great to support other elements along with nested block structures.
Sanitizer does not seem to be able to prevent nested lists?
Steps to reproduce:
example.js
, line 103, from scribe.setContent('<p>Hello, World!</p>');
to scribe.insertPlainText('Hello, World!');
Uncaught TypeError: Cannot call method 'cloneRange' of undefined
in selection.js
, line 28.OS: Mac OS X Maverick
Chrome: 33.0.1750.152
If I select word "World" in demo in Firefox 28 and I click on link button, and create a link, link is created and selection seemingly keeps link selected. But when I click on the link button again, to edit the link, I get initial empty dialog box.
In Chrome the same series of steps works.
Hi there,
I've tried pasting the following in to the example:
1
3
6
You can see there's two empty lines between the 3 and 6. When pasted into the scribe example, they are not maintained. Is this a bug?
Hi guys, I just wanted to let you know about this error.
Reproduce:
The same error occurs when I run scribe in my project.
Browser: Google Chrome 34.0.1847.116 m
OS: Windows 7
If you write something in the ouput textarea, even if it's html or plain text, any commands done in the input textarea will not work, neither will be entering of more text in that textarea. I have tested this on Firefox 28 and Chrome 34 on Windows XP. I recomand changing the textarea to disabled and the background color to white and color of the text to black.
Here's a video to demonstrate: https://cloudup.com/cqc5E00OHaQ
The first time it worked fine (when there was no input), but the second time it still added the span in.
Browsers need to insert something inside of an empty element in order for the caret to be positioned there (AFAIK). You wouldn’t be able to place your caret inside of <p></p>
because there’s no text node/element.
This hasn’t been fixed because there were bigger fish to try, but could easily be done as a “formatter” (perhaps).
Have you ever tried to bind an event to a contenteditable and received events for the target elements? As it turns out it's really ridiculous.
Example:
http://codepen.io/JAStanton/pen/pAynm/
(or since you guys like fiddle so much: http://jsfiddle.net/U3Me9/)
Bug in FF23 and CHROME29 Possible IE. Discussed here: http://stackoverflow.com/questions/18771651/detect-keyup-event-of-contenteditable-child-whose-parent-is-a-contenteditable-di
There is a bug in Firefox on Windows (I believe this one) that causes pasted HTML to be identified as text/plain rather than text/html. That causes this check to fail and the content to be inserted as plaintext.
This appears to be an issue only with this particular combination of browser and OS. Firefox 28 on OS X 10.9.2 correctly identifies pasted HTML as text/html, while Firefox 28 on Windows 7 x86 does not. I don't have any other versions of Windows available to test on.
As a workaround, I added a useragent check to force Scribe to use the non-Clipboard API method of pasting when in Firefox on Windows. I'm sure there's a better way to do it :P
Forgive me if there's an obvious answer to this question. I spent some time yesterday trying to use this in a project, and got stuck because of the AMD format. Is there a simple way to use this with browserify?
Using the Demo at: http://guardian.github.io/scribe/ I created a list item and then click Indent and nothing happens. I expect this to indent a level within the list.
There are currently ordering issues with formatters.
Enclosed is a list of desired formatters. Please comment if you have any others. From here I can figure out how to group them into phases.
b => strong
<p>1</p>
<p>2</p>
=>
<p>1</p><p>2</p>
Would be great to add a little more info to the BROWSERINCONSISTENCIES.md
file.
Maybe something like, "fixed" or "bug". I think it would help with PRs too.
What would be the best way to remove scribe instance?
Scenario in my project:
focus
event.blur
event (after finishing editing text)Basically I don't want to have separate scribe instance per every div
, since this might be high memory consuming.
Currently sanitizing input just removes elements and attributes. I am thinking that sometimes it would be better to replace them with some other element. For example, big headings could be replaced with the one heading used in your content. Current code does not allow this, but I could implement it. I am just not sure about API. Maybe something like:
h1: {
_replace: 'h2'
}
So field names starting with _
would be special and not attributes.
Installation instruction are not clear or covering everything needed to get Scribe running. I have two main issues with your current "instructions":
bower install scribe
is not enough to get it working.You should keep in mind that not everyone is a JS guru used to all the tooling mentioned in the README. Scribe seems really nice, but given how hard it is to even get running and there is no help available, having proper instructions should be a priority rather than adding features.
I would write it up myself, but given that after 2h I still failed to get Scribe to work at all, I'll leave it to the contributors to write clear instructions.
If I have a caret position inside a normal text and I click on "bold" button and start typing new text is bold. This is good. But if I click on "bold" button and then change my mind, I cannot click again to disable/disengage. I have to move caret somewhere else for this to happen. Or type something and delete.
Tested in Chrome 34.
In the editor: Mark any word in the texteditor (not the output) and click h2 multiple times.
Instead of expected: <h2>Hello, World!</h2>
I get: <h2>Hello, World!</h2><h2></h2><p></p><h2></h2><p></p>
Sadly the integration tests won’t run for pull requests when the source repository !== the target repository. See these Travis docs for details why – we’re using encrypted environment variables to store our access key for Sauce Labs.
It looks like AngularJS, who share a similar setup, have decided not to bother encrypting their access key for Sauce Labs.
Solutions on the Travis end of things are being discussed at travis-ci/travis-ci#1946.
For now we should skip the tests if one of the expected encrypted environment variables is not found.
/cc @saucelabs
If I open demo in Firefox 28 and, select whole Hello World text and click on "link", text selection disappears and so also the link is not created when I type into the dialog box.
Else it creates difficulties for plugins and sanitisation.
If you type into the textbox, and then delete everything, the output html is
<p><br><p>
It would be nice to have the captions in other languages.
A way to use editor in inline-only mode. So without any block elements, but even without line breaks. Just a long rich-text line of text. It seems that even with allowBlockElements
set to false and using sanitizer plugin to remove all except basic inline elements this is not possible.
I think that current intelligent unlink action could be combined with link. If you are inside a link and you invoke link, you should simply get an option to edit the link with a button to unlink everything. A separate action to unlink is probably unnecessary and strange for users.
It would be nice if we could set the debounce on inputs so undo/redo don't trigger for every key.
Could be an option:
Scribe(el, { debounce: 50 });
Or the ability to monkeypatch the input
event would be great too.
If two plugins require the same modules, the consumer will have duplicated code (duplicated AMD modules).
Here is an example of what RequireJS creates when walking the dependency graph of the scribe-plugin-sanitizer library.
Source code (master
branch): https://github.com/guardian/scribe-plugin-sanitizer/blob/master/src/scribe-plugin-sanitizer.js
Compiled distribution code (dist
branch): https://github.com/guardian/scribe-plugin-sanitizer/blob/dist/scribe-plugin-sanitizer.js
If another plugin had the same dependencies, and I as a consumer was using both of those plugins, I would have quite a lot of duplicated code in my environment. Furthermore, my AMD loader might complain about duplicate module IDs.
This is an artefact of using the distributed versions instead of building from source on the consumer’s end. Traditionally, libraries in the front-end ecosystem solve this problem by requiring consumers to load the library themselves and make it available on the window
object, for use by the library. This is not something we want to do because it sucks to have globals and throws all the ideas of dependency management, dependency versioning, and encapsulation, out of the window.
For the time being, the consumer can work around this by compiling from source themselves.
Ideally, plugins would define their dependencies with versions, and then the consumer would create an optimised bundle themselves. So:
find
module from [email protected], the resulting bundle would only contain one find
modulefind
module from [email protected] and plugin b used the find
module from [email protected], the resulting bundle would contain two find
modules. The bundled plugins would know which respective find
module to use.N.B: I am only using lodash-amd as an example of a dependency.
Herein we should discuss the requirements of the package manager, module format (we would like to move to using ES6 modules), and module loader. I think we need consumers to create their own bundles instead of using compiled distribution code, however:
find
modules? RequireJS does not support this, as far as I can tell./cc @guybedford
When destroying a Scribe instance, it should clean-up all references and DOM event bindings, including in any plugins being used.
Rangy is a cross-browser JavaScript range and selection library. I think that using it could help make Scribe cross-browser. Selection API is one of parts which is not really cross-browser but it is heavily used in Scribe.
Hi,
Is it possible to use a single toolbar for multiple editor instances?
Thanks.
In your article http://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor you mention wysihtml5 but don't say why you didn't use that.
I've been developing an App for a while now which uses wysihtml5 as it was the best of the bunch that I found. Unfortunately development seems to have lapsed, which happens all too often with open source code.
CI is currently very slow. It takes 10-14 minutes to run each job in the Travis matrix, for example: https://travis-ci.org/guardian/scribe/builds/20491312. We should really see if we can speed this up.
One idea: we currently tear down and reload the view before each test. This is a bottleneck because of the tunnelled HTTP requests. Could we just re-use the page session?
It seems to me that currently there is no way to allow a set of CSS classes to be applied to an element, but not any other or any other attribute. You can just enable/disable attribute as a whole? Here I see that you can specify an exact value for the attribute, but not really a list of values for CSS classes?
Plugin to add an image by a URL. Also should be able to set width and height attributes.
When I run:
var action = scribe.getCommand(cmd);
scribe.el.focus();
action.execute(val);
I get a call to the transaction manager in these two spots:
https://github.com/guardian/scribe/blob/master/src/api/command-patch.js#L11-L13
https://github.com/guardian/scribe/blob/master/src/scribe.js#L53-L59
Leading to two cmd+z's to undo.
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.