carbon-tools / carbon Goto Github PK

In RTL mode, if user starts typing LTR-language, should we switch that paragraph to LTR.

Currently, for example, all code blocks are LTR regardless of the mode.

This also applies to the other situation where we have the editor in LTR mode and the user wrote an RTL paragraph - should that switch the paragraph to RTL.

Hi,

Congrats for this nice tool.
I'm trying it to see if it can replace an old Wysiwyg editor in a CMS.

The thing is at this time, contents are store in the database as HTML.

In the editor description you say "It is built on top of an internal model for an article that clients can translate to and from JSON and HTML".

But I was not able to find a way to load HTML content.
Is this option already available ?
Or can you advice a way to do such a thing ?

Thanks for your answer.

Regards.

When selecting multiple paragraphs (last one being not fully selected) and deleting the selected range, any formats of the last paragraph are lost.

I faced a weird behavior when hit the Shift+Enter to get down by one line, and I lost the whole paragraph. Also the one line down is not supported so far ?

That's what happens when a user append multiple empty lines at the end of the article, check this article: https://www.manshar.com/articles/3582/

We need to automatically merge these trailing empty lines.

The inline-formatting toolbar should allow users to add links.

Sometimes the cursor gets a mind of it's own and jump back or forth , tested on the demo site using ios 9.2 .

Also if i put cursor on word and select a replacement from the virtual keyboard , sometimes the words get jumbled

When uploading multiple photos we'd like to insert a collage layout(s) that split the images in a nice way. Similar to what Medium.com does.

The main idea is that when the user selects multiple photos, we need to create multiple layouts. One way to go about this is by creating multiple row layouts to insert three (or more) images per row with the same height. We don't have a row layout but we can create one. flexbox might be useful here but I don't think it's necessary just limiting the height of the image would do nicely I believe.

When having multiple lists with multiple items in a long document, try to select all and delete. This needs further investigation.

Can only select text one paragraph at a time.

Ctrl/Cmd+B ▶️ bold
Ctrl/Cmd+i ▶️ italic
Ctrl/Cmd+k ▶️ link
Ctrl/Cmd+Alt+1/2 ▶️ h1/h2
Ctrl/Cmd+Alt+0 ▶️ un-header (p)

1. Fixes the new line on the upper part of the screen , past lines flow up
2. Some keystroke audio

Formats are lost when deleting a range format and then undoing.

Similar to Figure component, we need a video component for HTML5 videos.

After introducing this, this would allow us also to allow uploading videos and inserting the VideoComponent for them - And will also enable us to build +velfie/+vlog for quick video selfie recording 🐼

Pasting seems to strips out the formatting of list items. For example, if you copy the following list and paste it into a Carbon editor, it will remove the bold and italic.

• Hello World
• Goodbye Now

This can be handled inside Editor.processPastedContent method.

Ordered and unordered lists, whether through syntactic analysis and replacement (typing "1." followed by space at the beginning of the line would trigger an ordered list) or through formatting bar.

Need to revamp our build system and how we deploy new versions and releases. Including what versions we maintain in Carbon CDN and how we version extensions and components.

While the embedded components are being loaded, we need to present a nice placeholder in place of the component that takes the same size. We need a way to listen to render finished events and hide that placeholder and show the rendered embed.

This would remove blank paragraphs components at the start and the end of the article. For example calling it on an article that has something like the following:

<p></p>
<p>   </p>
<p>Hello</p>
<p>&nbsp;</sp>
<p></p>

Would result in the following:

<p>Hello</p>

We need a way to paste a mnshar's specific article url to get it embedded.
like https://www.manshar.com/articles/0000 then got a frame for it like youtube's or other's component's ones.

For a recent project I had to use PicEdit.js to allow quick annotations , allowing images to be edited will be a great feature

The formatting toolbar need to trigger on selecting text with mouse or keyboard selections. This needs to support basic formatting, bold, italic, link, quote, h1, h2 and code.

This specially happen in captions where when you click on the placeholder to focus it you're not sure if the cursor is there or not but if you start typing it works.

There are many issues many other browsers than chrome.
I had many issues recently while I am using Firefox but this is the worst.
I wrote an article in a simple text editor then I copied it to manshar :

هناك عدة مشاكل مع المتصفحات ما عدا كروم.
منذ فترة بدأت استعمال فيرفوكس وواجهتني عدة مشاكل ولكن كانت هذه هي الأسوأ:

Allow inserting Images using URL (by detecting a pasted image link and by formatting bar) and upload by formatting bar or by a separate side-toolbar.

The editor need to catch the paste event, sanitize and produce proper operations to be applied to the article model to create a better pasting experience with good undo-redo processes.

And can't move the cursor afterwards either.

Repro:

• Have a figure as the last component in the document
• Type something in its caption
• Hit Enter
• Observe that instead of creating a new single-column layout it and inserting the paragraph in it
• It inserts the paragraph inside the staged layout which should never happen.

In RTL mode, arrows act up at end the paragraph. Both keys (left and right) take the user to the next paragraph instead of going back a character.

tested on ios 9.2

So I tried running git submodule init and then grunt serve. The demo ran fine but I can't see the json-tree generated on the right-hand side at all.
Not sure what I'm doing wrong.
Thanks

This allows clients to require the user to enter specific input, for example requiring the article to have a title (h1 Paragraph) and a subtitle (h2 Paragraph) and an image. This would prevent the user from deleting these required components and show a simple error message when the user tries to delete them.

When selecting a single non-text component (figure, embed) copying and pasting doesn't work.

Not sure what would copying a selected figure means, does it copy the source of the figure or does it copy to dom tree of it.

This sometimes is buggy, investigate what's happening and fix.

Currently we have no way for users to write a large block of code. The current support is limited to single-line code and paragraphs. There isn't a way to insert a \n or <br> characters to allow smaller line height.

As mentioned in #42. One suggestion from @RashaHussein to implement this is to add a class for special paragraphs to treat them as "lines", for example one can have the following to signify that these shouldn't be padded as the normal paragraphs:

<p class="nomargin">Line 1</p>
<p class="nomargin">Line 2</p>
<p class="nomargin">Line 3</p>

Of course one could add some logic to handle \n or <br> instead, this requires some more thoughts and discussion on which way to go.

As for code blocks, we could aim to achieve something similar to Lists, where the UL element would have a special class like .code-block and the LIs representing lines of codes. Using a similar logic (or the same - logic) as Lists also could give us the tab-to-indent logic for both code and normal lists.

<ul class="code-block">
  <li>def sayHello(name):
  <li>    print 'Hello, ', name
</ul>

Allow the users to select pre-defined filters (instagram-like) to apply on photos.

There are multiple ways one can accomplish this, one by just sticking with CSS properties that allow us to do that, the other is by more advanced methods with some canvas manipulations. I think we should start with experimenting with pre-defined filters with classnames.

See:

• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://css-tricks.com/almanac/properties/f/filter/

After npm install, I ran into this issue

$ grunt test
Running "browserify:tests" (browserify) task
>> Bundle build/editor.spec.js created.

Running "jshint:dist" (jshint) task
>> 9 files lint free.

Running "jshint:test" (jshint) task
>> 7 files lint free.

Running "karma:continous" (karma) task
INFO [karma]: Karma v0.12.37 server started at http://localhost:8080/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket 4nCswkj99XcDPqfMO15e with id 4897509
PhantomJS 1.9.8 (Mac OS X 0.0.0) Article should return the json model FAILED
    Expected Object({ sections: [ Object({ paragraphs: [ Object({ name: '12', text: '', paragraphType: 'p', formats: [  ] }) ] }) ] }) to equal Object({ sections: [ Object({ paragraphs: [ Object({ text: '', name: '12', paragraphType: 'p' }) ] }) ] }).
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3669
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor should initialize listeners on initilaization FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3805
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should handle Enter key FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3828
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should handle backspace key FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3884
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should handle delete key FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3925
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should remove selected text when backspace FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3966
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should remove selected text when typing character FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4000
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should not remove selected text when non-changing key FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4033
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handleKeyDownEvent should undo/redo FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4066
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.handlePaste should call processPastedContent FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4093
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.processPastedContent should generate single operation for inline content FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4107
PhantomJS 1.9.8 (Mac OS X 0.0.0) Editor Editor.processPastedContent should generate proper operations when pasting multi-line FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.handleKeyDownEvent.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:2108
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:367
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4121
PhantomJS 1.9.8 (Mac OS X 0.0.0) Paragraph should return the json model FAILED
    Expected Object({ name: '1234', text: 'hello', paragraphType: 'p', formats: [  ] }) to equal Object({ name: '1234', text: 'hello', paragraphType: 'p' }).
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4205
PhantomJS 1.9.8 (Mac OS X 0.0.0) Section should return a json model FAILED
    Expected Object({ paragraphs: [ Object({ name: '12', text: '', paragraphType: 'p', formats: [  ] }), Object({ name: '23', text: 'Hello p1', paragraphType: 'p', formats: [  ] }) ] }) to equal Object({ paragraphs: [ Object({ text: '', name: '12', paragraphType: 'p' }), Object({ text: 'Hello p1', name: '23', paragraphType: 'p' }) ] }).
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4283
PhantomJS 1.9.8 (Mac OS X 0.0.0) Selection should initialize event listeners FAILED
    TypeError: 'undefined' is not a function (evaluating 'this.updateSelectionFromWindow.bind(this)')
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:3348
        at /Users/saada/HackHackHack/Projects/manshar/editor/build/editor.spec.js:4349
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 42 of 42 (15 FAILED) (0.026 secs / 0.014 secs)
Warning: Task "karma:continous" failed. Use --force to continue.

Aborted due to warnings.

Is there a special way to setup PhantomJS?

The editor should allow the insertion of youtube videos and playlists through side-toolbar or through detecting pasted YouTube link.

Instead it just moves the cursor to the previous or next paragraph.

For some weird reason it actually inserts a character now instead of deleting.

I have seen the Folding Text editor , which really makes editing long articles a nice and easy experience ,

This seems to be working for the most part. Although sometimes it doesn't trigger. It seems reproducable by triple clicking on whitespace outside the paragraph.

Automatically detect the pasted content is code and format it accordingly (regardless if the copied content is already formatted or not).

This is blocked by #59

Tested on ios 9.2 . the virtual keyboard takes up most of the space making it difficult to edit images

This API would be something like editor.getAttachments(optIncludeFinished) and returns the list of attachments objects that are still being processed (uploaded or otherwise). If the optIncludeFinished parameter is passed true, it should return all attachments that has been added to the editor.

More thinking needs to go into this and how we handle attachments in general.

Currently, we don't handle cut events at all, falling back to the browser handling which breaks the model representation of the article.

Allow nested lists:

• Hello
  • What
  • Bye
• Cool

When users copy a large block of text with a YouTube embed for example the embed is stripped out and not processed.

Typically we need to get the embed source and create an EmbeddedComponent for them. One challenge might be is that I am not sure oembed endpoints would return the correct results when using the embed src. Usually the normal link and the embed source are different, for example:

• YouTube Link: https://www.youtube.com/watch?v=JGhoLcsr8GA
• YouTube Embed Src: https://www.youtube.com/embed/JGhoLcsr8GA

Embedly oembed endpoints seem to catch both type of URLs for YouTube.

Input handler is being called on every input event which causes the typing experience to lag and have some delays.

The idea is to debounce the handler and write better logic to understand what was deleted or inserted to run specific operations insertChars and deleteChars instead of updateComponent.