danielearwicker/carota

Simple, flexible rich text rendering/editing on HTML Canvas

carota's Issues

Line height of last line with small font size

Hi,

set a font-size of 3
write text with 2 carriage return to have tree lines,

Then, the last line doesn't have the correct height.

Just add a carriage return at the end of the text to see the correct line

Best

Rich internal clipboard

Ctrl+C copies from hidden textarea (HTA), which is plain text. Ctrl+V copies back to HTA, also plain text. This means we cannot round-trip rich text.

Solution: when updating HTA with plain text, also store corresponding runs and plain text in variables. When accepting input from HTA, compare it with stored plain text. If the same, use the stored runs instead.

OR... solution 2: instead of HTA have a DIV with contentEditable=true (sweet, sweet irony). Would also need to implement scanning function that generates runs from DOM tree, and vice versa, but they'd be useful anyway.

Demo page should have links to switch between "pages" of text

I should implement the website purely by loading chunks of rich text into the editor, so users can try editing the site as they read it.

Screen Resolution

The test rendering is very fuzzy on a retina Macbook Pro.

Justified text appears ragged at the right, not enough space is being added

Was due to dividing by number of words instead of (words - 1), d'oh.

Spacing gets all screwy on custom fonts

Typing with no font selected

All I did was change the font-family....

And if I change the font-size...

And when I go back to the font-size I was at when I originally changed font-families

To be honest I have no idea what is going on, I want to say there is an issue with the custom fonts.. but then when you change sizes everything seems to work out. I know @danielearwicker isn't supporting this anymore.. But if you could take a look at this super quick that would be a huge help. I can't find where that left property is coming from to align the words.. I have no idea what is happening here.

Restore the project?

Hello, @danielearwicker.

I am a maintainer of https://github.com/konvajs/konva and founder of https://polotno.com/.

I want to have a full rich-text editor in Konva 2d canvas framework, and later I would like to integrate it into Polotno Design Editor.

Furthermore, I was thinking to start canvas-based rich text editor library from the start. But I feel like your project can be a good foundation for it. What I am thinking about is to make a fork and add all other features and change the behavior in some cases. As a developer, I want to invest my time here and as a founder, I am ready to spend some money on it.

Before doing the fork, I want to connect with you, if you would like to collaborate here.

Bullet/numbered lists

New formatting flag similar to align, i.e. obey first word of line, apply to whole line.

All intelligence would go in wrap. Bullet could be handled by an inline type. Probably get away with assuming all bullets in a list will have same width (numbered lists just need to allow "enough" space).

All the stuff managing selection state should be in editor, not doc

Background Color

How can i add background color?

Script error when deleting the one character from a single-character document

Current demo is too slow to use under Linux under Firefox

Attempting to use the demo in the firefox web browser 25.0.1 under Ubuntu Linux 13.10 is too slow. There is a long delay proportional to the number of characters you type before anything appears on the screen. Press 1 key, it displays after 1 second. Press 5 keys, it appears after 5 seconds.

Under Chrome Version 31.0.1650.63 under Ubuntu is fast enough to use.

Update npm with this!

You should update npm with the new per dependency fix.

(I know you're not doing so much stuff on this, but it's actually is not a coding thing or a pull request, I think).

Two Column

Is there any possibility to render text on two columns? in carota editor?

Exception when entering first character

I pulled from master and attempted to trim down your sample to the most basic. Here's what I ended up with:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="carota-debug.js"></script>
  <style>
    #exampleEditor {
      border: 1px solid silver;
      position: absolute;
      left: 10px;
      top: 40px;
      right: 50%;
      bottom: 40px;
    }
  </style>
</head>
<body>
<div id="exampleEditor"></div>
<script>
  window.onload = function() {
    var elem = document.querySelector('#exampleEditor')
    var exampleEditor = carota.editor.create(elem)
  }
</script>
</body>
</html>

If you focus the editor and press a key on the keyboard, an exception is thrown.

Uncaught TypeError: Object prototype may only be an Object or null: undefined 
node.derive.splice    (at carota-debug.js:656 )
Range.setText         (at carota-debug.js:2149)
node.derive.insert    (at carota-debug.js:536)
(anonymous function)  (at carota-debug.js:1256)
(anonymous function)  (at carota-debug.js:902)

If the editor is pre-loaded with some text, like:

exampleEditor.load(carota.html.parse("<div><p>Test</p></div>"))

immediately after the carota.editor.create, you are able to position the caret and type without issue. If, however, you select all the characters using ctrl+a, then delete them, then attempt to type again it will throw the exception.

You are able to use the backspace key to remove all the characters, and then enter a new character without it throwing the exception. But placing the caret at the very beginning, and deleting all the characters with the delete key, then pressing the delete key one more time, presumably deleting the linefeed, will cause the exception to be thrown the next time a key is pressed.

Looking through the code it appears that some changes where made somewhat recently to the area from where the exception is thrown. The code in Github appears to be newer than the code that is running on your sample site (http://earwicker.com/carota/) which works.

A single word is wider than the constrained document width - what happens?

Up to this point, the word is simply clipped. No horiz scrollbar appears. The user can move the caret along to the end of the word but cannot see what they are doing.

Instead, horizontal scrolling should be supported, and the view should scroll to ensure that the caret is visible (just as it already does vertically). This would only kick in when there is at least one word with non-space content that is wider than the whole document's width constraint, thus giving it an "actualWidth" that is wider than the window.

Problem building carota with webmake

I'm trying to build carota using webmake but 'per.js' seems to be missing.
Best,
Michel

blurry on retina display

On retina display we need to render 2x bigger canvas and 2x downscale it

<canvas width="628" height="424" class="carotaEditorCanvas"></canvas>

But set canvas width=1256 height=848 in javascript
Read more

limitations of text rendering in canvas

First, you've done some nice work in Carota!
You have a lot of experience with canvas, can I ask you what kind of limitations do you see with rendering text in canvas?
For example, would it possible to use any kind of font? In the Carota demo there are only a few.
What is the support for text metrics?

Thanks!

It cannot input chinese character

The live demo cannot input chinese character

Example needs to show saving text to runs

Ctrl+A should select all

Problem with IMEs

Doesn't work well with imput methods (IMEs).
Under Linux (Mint 16) with IBus the canvas region polls changes too frequently, so for IMEs that require multiple keystrokes, input does not work and you can't select a character.

How to tear down / destroy / remove?

Does Carota provide a method to completely remove it from the DOM and unbind all event handlers etc? If not, how would you recommend achieving this?

Save to Microsoft Word Format

Is it possible to save the Carota document into a format compatible with Microsoft Word .doc/.docx format?

Double click word to select it

Applying formatting to empty range

Applying formatting to empty range should store formatting in document to be applied to next plain text insertion (and then discarded, as subsequent insertion will work normally by reading previous character formatting).

brilliant approach

I am trying to implement some richtext functionality using contenteditable="true"and document.execCommand

It is a pain (inconsistent behaviour of Firefox and Webkit)! Therefor I like your approach. Is there any support for lists (such as ol and ul in HTML)? What about paragraphs and other structural elements?

probable bug in file carota-debug.js

Hi Daniel

first thanks for your good job!

I have notice that maybe there is a bug in your last release of Carota.

The error occur in file carota-debug.js at line 246
...
this.words = per(characters(runs)).per(split()).map(function(w) {
...
in the console of Google Chrome the message is
Uncaught TypeError: per is not a function

So my workaruond is to use the file carota-debug.js that I have copied from the folder where your demo site is (http://earwicker.com/carota/carota-debug.js) and work good!

I did a match of the 2 files carota-debug.js the and I have discovered that there is a difference at line 26

in your file is
path = path.split('/');

in the file of the repository is
path = path.split(/[/]/);

May be here is the error.

So please put the right files in repository.

I have tested all in a PC with windows 10, Xampp, Node.js

I suggest you to write a paragraph about the instruction to install Carota, because is not so clear (I spent a lot of time to make it to work properly).
bye Francesco

Blurry on retina display

Hi,
current implementation is blurry on high resolution displays like Retina:

Request: letter-spacing

Really loving this framework, good work! One thing that would be great though is the inclusion of a letter-spacing property. Could you give me any pointers on how best to do this?

Test on IE9

If end of document is center or right aligned, caret appears at left

I guess end-of-doc character should pick up alignment from predecessor?

could do with some guidance on codes and edit filters

Any chance you could provide some guidance on extending codes and edit filters? I am looking to implement hypertext linking and need to associate a run with an external resource, as well as style it in the editor to denote it as a link. Any advice on how best to approach this would be great.

Page View

It is possible to split up into pages wise with multiple pages?

How to align text vetrically

Same as topic: how to align text vetrically to start draw text from width/2 point ?

Thanks for any answer.

Change in Font, size, Allignment, color and check mark are not reflecting in the dialog box

Change in Font, size, Alignment, color and check mark are not reflecting in the dialog box. However, if we continue to type, changes takes place. The user should see first that there is a change in font, size etc. before typing not after.

Please help me.........

Performance with longer documents

In Chrome typing becomes progressively slower as the document gets longer.

Some obvious improvements:

• The canvas is sized large enough for the whole document, which is unnecessary. We only need to create a canvas large enough for the visible viewport of the scrollable area, and so we can search for the first line that needs drawing and stop after the last one. On scroll events, we'd move the canvas to appear in the right place and repaint it.
• The wrapping could also be optimised so it stops at the next newline and merely adjusts the y positions of the existing lines below.

Is node-canvas supported?

I haven't seen any mentions of it, I only want the text rendering features and not the editor.
Is it possible to use the rendering features without a browser?

Thanks

Multiple editors on one page

Hi

Is there a way to put 2 or more carota editors on one page but with diffrent formatting ?
Any help would be greatly appreciated :-)

Regards

Missing file ?

Hello - Just downloaded this and loaded in Webstorm - the index.js has this line

<script src="carota-debug.js"></script> but the source files don't appear to have this file.

Any ideas ?

Applying align formatting should affect whole paragraph

Even if range is empty!

tablet, keyboard event, keycode

Hello,
could not be used on tablet.
It is not possible to delete character

Also, (tested on galaxy tab2) characters are always CAPS.

best

Undo

Extending Carota

Hello Daniel,
really an awesome work.
I am especially interested in the rendering part of Carota. The reason is that there is currently no satisfactory solution to draw HTML text on a canvas.

1. There is html2canvas (http://html2canvas.hertzen.com/) but it fails on simple <ol> and <ul> lists.
2. In the future, SVG foreignObject will do the job, but it is not implemented in IE, including IE11.
3. There is also a solution based on Blob and createObjectURL but on IE<10 it fails as well.

From what I see, Carota is the best candidate to do the job.

In the short term, I would like to extend it to make it able to render other HTML tags, and other styling properties.
For the HTML part, I would like to implement <ol> and <ul> rendering. For CSS, I would like to implement margin properties, as well as line-height

To achieve this, I have a few questions.

1. I guess I first need to implement some kind of box model into Carota. Am I right ?
2. If yes, I imagine that I need to replace the line data structure with something that is more structured (box) ?
3. I don't fully understand why line is made of words. I would have thought that a line is made of runs, i.e. text chunks with homogenous styling. Is it because of the justification algorithm ?
   Best,
   Michel