the-grid / ed Goto Github PK

Using ed 0.0.35 and this flow:

1. Hit enter to create new block
2. Paste URL, hit enter
3. App gets url share event, creates placeholder block, does setContent (placeholder is displayed correctly)
4. App does PUT /item/<id> to save placeholder block to API
5. App does POST /share into the placeholder block
6. As soon as job-completed GCM comes in, app reloads item and does setContent

This is the item (I do ed.setContent(item.content)): https://gist.github.com/hannesstruss/819ab983c52cca26251c

This is the error (the index in Failed to resolve path %d is the index of the block about to be replaced +1, when counting 0-based):

Not sure how related they are and can't reproduce, but I also encountered these errors (might have happened during just editing):

(Sorry for screenshots, but I can't seem to copy/paste stacktraces from Chrome devtools)

1. Open Post
2. Add Image, inserts placeholder (do not complete placeholder replacement)
3. Delete that placeholder
4. Add another, see exception
   

Currently makes a new uuid.

Need some minimal check so widgets can only update their own block.

Currently, when sharing URLs, Ed creates the placeholder. For sharing images, there is ed.insertBlocks(index, blocks), which requires the app to create the placeholders itself.

I think for consistency it should only be one component's responsibility to actually construct placeholder blocks. Currently, the knowledge about placeholder construction, the placeholder block's internal structure (metadata.status etc.) is spread across app and Ed. Since Ed has to interpret placeholder blocks anyway, it should be the single source of construction as well. I'd encapsulate that behind a more narrowly scoped API like (a less verbose version of) ed.createPlaceholdersForImages(originalPlaceholderBlockId, numberOfPlaceholders) which could return an array of placeholder block IDs to share into.

Let's discuss that in the meeting suggested in #editor!

cc @nickvelloff

Need clarification from API (@bergie) about a consistent way to save that for all types that can have a cover.

I started AttributionEditor with it, but I am not terribly attached to xml.

using pros:

• react documentation
• react potential api changes sometimes swallowed by jsx
• I think you have to export default React.createFactory(X) to use X without jsx

cons:

• subjectively, it makes code look weird

• 1 code style / linting setup to keep in mind

• I usually end up doing const props = { /* js stuff here */ } then <div {...props} ></div> ... could just be el('div', props)
• new things in ES6 > XMLish things mixed in

hint for simple sys: https://github.com/ProseMirror/prosemirror/blob/35e5d866e8f4d5228dfba6b29d3460d6e9b85441/src/dom/index.js#L69-L84

use: https://github.com/ProseMirror/prosemirror/blob/35e5d866e8f4d5228dfba6b29d3460d6e9b85441/src/menu/menu.js#L341

Discussion welcome... could do all js styles...

Verified on PM demo.
Filed upstream ProseMirror/prosemirror#224

https://discuss.prosemirror.net/t/modifying-an-imgs-src-before-its-rendered/171/7?u=forresto

Cut and del work on the divs if selected around, but paste and undo don't restore them. Once that is fixed widget should restore itself.

This is scrolled up all the way:

Given the following scenario:

1. User pastes URL, initiates share
2. User deletes placeholder block
3. App PUTs item without placeholder
4. Share job finishes
5. App fetches item, does ed.setContent

API might append the share block to the end of the content array if it doesn't find the placeholder. But Ed would just ignore that block, as the merging strategy only replaces placeholders.

As long as the App does a final PUT without placeholder or shared block, things are okay though.

Right now the popover toolbar clashes with the native selection bars on mobile platforms. It would be better to use a position: fixed toolbar on the bottom of the screen for those.

1. If I add a url, I see this:
2. 
3. onShareUrl fires properly
4. Then I delete that url.
5. Then I repeat.
6. onShareUrl does not fire subsequently (and there are no js errors).
7. 😨

Additionally:
If an placeholder block exists when the item is loaded, the it will fail after deleting it as well.

• option for menu bar for mobile with native tooltip
• insert image on newline - trigger file event for grid-chrome
• block controls also show up in inline selection (default is block controls only show on newlines and esc block selection)
• media details event to trigger modal

Uncaught TypeError: Cannot read property 'value' of undefined
Uncaught TypeError: Cannot read property 'node' of undefined
Uncaught Error: Position 4:1 is not valid in current document

Something gets thrown off 💀 if typing while setContent is hit (like new share progress in demo).

I like that you can tap in the blank space now to create a new block!

There's a slight inconvenience on Android though. When long pressing on an empty block that is not the last empty block, the in-place context menu for pasting doesn't pop up. Instead, an action mode overlay shows from which people can paste.

Definitely an Android bug, but we might be able to work around that by not leaving empty blocks at the end of the content array. What do you think?

discuss: https://discuss.prosemirror.net/t/disable-h4-h5-h6/148/1

Here's a path that could work without API changes.

1. type /gif on a new line in the editor
2. prosemirror injects a placeholder with grid-type="placeholder" grid-widget="gif" (this placeholder block could get saved to API without making anybody 😢)
3. widget plugin makes overlay with interface to search eg GiphyAPI
4. widget builds a block type image (or video) that API can then do normal Caliper stuff with
5. widget replaces self with this block

• Move plugins/code-embedder input rule to widget-code
• replace PM's ``` input rule
• make it inject a media div with grid-type="code", widget sys will do rest

with tooltip to trigger meta modal, to make it work as it does now

• figure out how to express in schema
• suppress editing
• suppress click / text selection / drag over etc
• event for media clicked

Related PM discussion: https://discuss.prosemirror.net/t/prosemirror-ready-for-widgets-islands-of-non-editable-content/12/8?u=forresto

System fonts look great! I'd add a little more line spacing though for body text

Should work as it does now if not specified.

• Done in v3 by injecting empty ps before, between, and after media.

Started editing in an image block, and it appears onAutosave never triggered.

We need a way to handle failures when sharing. Currently, sharing works like this:

1. User triggers share
2. Ed creates placeholder, notifies app with {blockId, url} (in case of URL sharing)
   • Update: When sharing images, App creates placeholders and does ed.setContent
3. App does ed.getContent(), PUT /item/<id> and POST /share
4. When share is done (App receives GCM/APN), App does GET /item/<id>, then ed.setContent(blocks)

Possible fail cases (ignoring programmer errors):

1. When sharing images: User closes image picker without picking images -- not an issue b/c App inserts placeholders after files are selected - fo
2. PUT /item/<id> fails
3. POST /share fails
   1. Special case when sharing images: only some POST /share calls succeed
4. POST /share succeeds, but the app isn't notified, or the share job takes a long time api-side
5. GET /item/<id> fails

Questions:

1. We need UX for failures. I think V1 shouldn't include retrying. I'd go for something like "make placeholder block red, add X button to remove the failed block"
2. We need an API in Ed, so App can notify Ed of failures. Since Ed already creates the placeholders itself, I think it should also modify/remove them. Off the top of my head: ed.shareFailed(placeholderBlockId).
3. Should we timeout when the Share job doesn't complete within X minutes? It could result in false positives, where the user thinks the share failed, does something else/closes the editor, and the shared content eventually ends up in the item unexpectedly.
4. It's probably not a big problem if some but not all image shares fail. Some placeholders become red, some get replaced with images.
5. When sharing images, Ideally we only create the placeholder blocks after the user has already selected n images, so we don't have to remove them again.

cc @forresto @nickvelloff @JohnRandom

The sets overlap: https://github.com/the-grid/ed/blob/master/src/menu/ed-menu.js

Maybe PM shouldn't concat those?

Also touching below the content does not insert cursor at all.

1. Initial load of item data: https://gist.github.com/nickvelloff/6e8bc69ba717a3c36939
2. visual state of content:
   
3. Edit some textual content, type "The name is mr ed"
4. PUT succeeds: https://gist.github.com/nickvelloff/d78cd3a558ef36821f4d
5. visual state of content:
   
6. Receive push notification that the item update is complete
7. GET the updated item: https://gist.github.com/nickvelloff/e59162feed3fe82ab541
8. "window.ed.setContent(\(contentString)); the new item data
9. visual state of content (text reverts to old value):
   

Steps to reproduce:

1. Hit enter to create new block
2. Paste URL, hit enter
3. onShareUrl callback is called (we don't do anything with it for now)
4. Move caret to end of pasted URL
5. Hit enter
6. onShareUrl is called again
7. GOTO 4

I'm not sure this is a real-world-problem. But what if I want a block that just contains a plain-text url without sharing it?

We have easily spec-able code in there that's important to not break. Good place to start.

PM makes nested blockquotes when pressing ( “ ) multiple times. We need to either

1. make the style work for that
2. change button behavior to toggle & disallow nested bq

Console output:

Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 23 is larger than or equal to the node's length (22).

23 changes depending on where the caret is while typing

Needed for gh-pages preview and packaged versions for Grid apps to consume. Hopefully easy with a dash of webpack magic.

They work now ☺️, but are pretty complex and might not be needed.

https://discuss.prosemirror.net/t/the-grid-ed-overlay-widgets/150/4?u=forresto

Can we construct the editor object with a configuration?
3 come to mind:

1. Do or don't use toolbar
2. Auto save enabled
3. Auto save frequency

When user adds a paragraph that only contains a URL, we should make a /share API call on that.

Same as #2, the placeholder blocks that we have when user shares an image or link should not have their contents editable.

Updating to today's PM gives

Uncaught TypeError: (0 , _prosemirrorSrcMenuMenu.commandGroups) is not a function

so @d4tocchini will need to rehack that for us to update PM.

• use css-loader to inline styles
• setup build to make standalone Ed
• setup build to copy widgets #12
• make minimal mobile.html
• setup travis to deploy build to npm

& keep deploying the demo to gh-pages

potential to reduce thrash http://prosemirror.net/ref.html#UpdateScheduler

💓

We need to build "the fold" into Ed.

• [title text field, if exists]
• [instance of ProseMirror with schema limited to p, list, quote, inline formatting]
• [buttons to add single title (plain text), single (for now) image OR url share]
• [hr equivalent visually denotes fold]
• [full-schema ProseMirror]

Ed should have initial option and method to toggle collapsed (only show above the fold) state.

Initial content should infer fold from starred blocks.

ed.getContent should build content array with blocks "above the fold" starred.

This makes Ed not-insignificantly more complex, but has advantage of working with current API.

Good thing PM has versions now. Using that in widget plugin.

ProseMirror/prosemirror@578a030

BREAKING CHANGE: The 'flushed' event is no longer fired.